list style rendering */
.style_tomato_wrapper p > a[href*="department="],
.style_tomato_wrapper li > a[href*="department="],
.style_tomato_wrapper div > a[href*="department="] {
display: inline-block !important;
padding: 10px 16px !important;
margin: 4px 4px !important;
border: 2px solid #FA740D !important;
border-radius: 8px !important;
color: #FA740D !important;
font-weight: 700 !important;
font-size: .95rem !important;
text-decoration: none !important;
text-transform: uppercase !important;
background: #fff !important;
transition: all .18s !important;
}
.style_tomato_wrapper p > a[href*="department="]:hover,
.style_tomato_wrapper li > a[href*="department="]:hover,
.style_tomato_wrapper div > a[href*="department="]:hover {
background: #FA740D !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(250,116,13,.35) !important;
}
/* =============================================================
HUCKLEBERRY v4 — Precise fixes from live HTML inspection
============================================================= */
/* ---- ADD TO CART: button keeps Bootstrap .btn base, we override color ---- */
/* gb-btn is ADDED alongside btn btn-primary, so we need higher specificity */
button.btn.gb-btn,
button.btn-primary.gb-btn,
.gb-form button.gb-btn {
background: #FA740D !important;
background-color: #FA740D !important;
border-color: #FA740D !important;
color: #fff !important;
font-weight: 700 !important;
font-size: .95rem !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
border-radius: 6px !important;
box-shadow: 0 2px 8px rgba(250,116,13,.4) !important;
transition: background .18s, box-shadow .18s, transform .12s !important;
padding: 11px 14px !important;
width: 100% !important;
display: block !important;
}
button.btn.gb-btn:hover,
button.btn-primary.gb-btn:hover,
.gb-form button.gb-btn:hover {
background: #c85c00 !important;
background-color: #c85c00 !important;
border-color: #c85c00 !important;
box-shadow: 0 4px 14px rgba(250,116,13,.55) !important;
transform: translateY(-1px) !important;
}
/* ---- DEPARTMENTS PAGE: actual href format is /departments/name.html ---- */
/* Target all department/category browse links by their URL pattern */
.style_tomato_wrapper a[href^="/departments/"] {
display: inline-block !important;
padding: 11px 18px !important;
margin: 4px 5px !important;
border: 2px solid #FA740D !important;
border-radius: 8px !important;
color: #FA740D !important;
font-weight: 700 !important;
font-size: .95rem !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
background: #fff !important;
transition: background .18s, color .18s, transform .15s, box-shadow .18s !important;
line-height: 1.3 !important;
}
.style_tomato_wrapper a[href^="/departments/"]:hover {
background: #FA740D !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(250,116,13,.35) !important;
}
/* Make the 2-col dept table layout look better with the button style */
.style_tomato_wrapper .store_browse_list_no_buttons_page td,
.style_tomato_wrapper .store_container_page td {
padding: 3px 2px !important;
border: none !important;
background: transparent !important;
vertical-align: top !important;
}
.style_tomato_wrapper .store_browse_list_no_buttons_page table,
.style_tomato_wrapper .store_container_page > table {
border: none !important;
background: transparent !important;
}
/* =====================================================
WOW THEME
===================================================== */
/* --- FONT: Apply to body text ONLY — exclude icon fonts --- */
body, p, span, div, a, li, td, th, input, button, select, h1, h2, h3, h4, h5, label {
font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* Explicitly preserve FontAwesome icon fonts */
.fas, .far, .fab, .fal, .fad,
[class*=" fa-"], [class^="fa-"],
.inet_icon {
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
font-size: inherit;
}
/* --- FULL WIDTH --- */
@media (min-width: 1200px) {
.style_tomato_body, .style_tomato_footer,
.style_tomato_header, .style_tomato_top_menu, .style_theme_tiptop {
display: block !important;
grid-template-columns: none !important;
}
.style_tomato_body > .row { min-width: 100% !important; }
}
/* --- TOP NAV BAR --- */
@media (min-width: 768px) {
.style_tomato_top_menu {
background: #FA740D !important;
padding: 0 28px !important;
}
.style_tomato_top_menu .nav-link {
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
color: #fff !important;
padding: 10px 18px !important;
border-bottom: 2px solid transparent !important;
transition: border-color .15s !important;
}
.style_tomato_top_menu .nav-link:hover {
color: #fff !important;
border-bottom-color: rgba(255,255,255,.7) !important;
font-weight: 700 !important;
}
}
/* --- LEFT SIDEBAR --- */
@media (min-width: 768px) {
.style_tomato_side_menu {
background: #fff !important;
border-right: 1px solid #ebebeb !important;
padding: 0 !important;
}
/* Dark title bars */
.style_tomato_side_nav .style_tomato_title_bar {
background: #1c1f24 !important;
color: #fff !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
padding: 13px 18px !important;
cursor: default !important;
display: block !important;
}
.style_tomato_side_nav .style_tomato_content { background: #fff !important; padding: 4px 0 !important; }
.style_tomato_side_nav .style_tomato_menu { margin-bottom: 0 !important; border-bottom: 1px solid #f0f0f0 !important; }
/* Nav links */
.style_tomato_side_nav .nav-link,
.style_tomato_side_nav .navbar-nav a,
#nav_store_links .nav-link,
#nav_category_menubox .nav-link {
font-size: 15px !important;
font-weight: 500 !important;
color: #333 !important;
padding: 10px 18px !important;
border-left: 3px solid transparent !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
display: block !important;
transition: all .15s !important;
text-decoration: none !important;
line-height: 1.3 !important;
}
.style_tomato_side_nav .nav-link:hover,
.style_tomato_side_nav .navbar-nav a:hover,
#nav_store_links .nav-link:hover,
#nav_category_menubox .nav-link:hover {
color: #FA740D !important;
border-left-color: #FA740D !important;
background: #fff8f3 !important;
text-decoration: none !important;
}
}
/* --- SIDEBAR "IN THIS DEPT" INJECTED BOX --- */
#tomato-subcats {
background: #fff !important;
border-bottom: 1px solid #f0f0f0 !important;
}
#tomato-subcats .tomato-subcat-title {
background: #FA740D !important;
color: #fff !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
padding: 13px 18px !important;
display: block !important;
}
#tomato-subcats a {
display: block !important;
font-size: 15px !important;
font-weight: 500 !important;
color: #333 !important;
padding: 10px 18px !important;
border-left: 3px solid transparent !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
text-decoration: none !important;
transition: all .15s !important;
}
#tomato-subcats a:hover {
color: #FA740D !important;
border-left-color: #FA740D !important;
background: #fff8f3 !important;
}
/* --- BREADCRUMB --- */
.breadcrumbs { padding: 14px 0 18px !important; }
.breadcrumb {
background: transparent !important;
padding: 0 !important; margin: 0 !important;
display: flex !important; flex-wrap: wrap !important;
align-items: center !important; gap: 2px !important;
}
.breadcrumb-item { display: flex !important; align-items: center !important; }
.breadcrumb-item a {
display: inline-block !important;
padding: 6px 14px !important;
border: 1.5px solid #FA740D !important;
border-radius: 5px !important;
color: #FA740D !important;
font-size: .82rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
text-decoration: none !important;
background: #fff !important;
white-space: nowrap !important;
transition: background .15s, color .15s !important;
}
.breadcrumb-item a:hover { background: #FA740D !important; color: #fff !important; }
.breadcrumb-item strong {
color: #555 !important; font-size: .82rem !important;
font-weight: 700 !important; text-transform: uppercase !important;
letter-spacing: .05em !important;
}
.breadcrumb-item + .breadcrumb-item::before {
content: "/" !important; color: #bbb !important;
padding: 0 5px !important;
}
/* --- DEPT/CATEGORY LINKS in content --- */
.style_tomato_wrapper a[href^="/departments/"]:not(.tomato-dept-name a):not(.tomato-dept-name *) {
display: inline-block !important;
padding: 10px 16px !important;
margin: 4px 4px !important;
border: 1.5px solid #FA740D !important;
border-radius: 5px !important;
color: #FA740D !important;
font-weight: 700 !important;
font-size: .9rem !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
background: #fff !important;
transition: all .18s !important;
}
.style_tomato_wrapper a[href^="/departments/"]:not(.tomato-dept-name a):not(.tomato-dept-name *):hover {
background: #FA740D !important;
color: #fff !important;
transform: translateY(-1px) !important;
box-shadow: 0 3px 10px rgba(250,116,13,.3) !important;
}
/* Ensure card name links are never affected by the dept pill-button rule above.
Use high-specificity chain to beat the a[href^="/departments/"] selector. */
.style_tomato_wrapper .tomato-dept-card .tomato-dept-name a,
.style_tomato_wrapper .tomato-dept-photo .tomato-dept-name a,
.tomato-dept-card .tomato-dept-name a,
.tomato-dept-name a {
display: block !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
color: #fff !important;
transform: none !important;
text-transform: none !important;
letter-spacing: .01em !important;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
/* --- PRODUCT GRID --- */
.gb-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
}
@media (max-width: 991px) { .gb-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 575px) { .gb-grid { grid-template-columns: 1fr !important; } }
.gb-card {
background: #fff !important;
border: 1px solid #ebebeb !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
transition: box-shadow .2s, transform .2s !important;
display: flex !important; flex-direction: column !important;
}
.gb-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
transform: translateY(-3px) !important;
}
/* --- IMAGE --- */
.gb-img {
height: 230px !important;
padding: 0 !important;
overflow: hidden !important;
background: #f7f7f7 !important;
flex-shrink: 0 !important;
}
.gb-img a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important; height: 100% !important;
}
.gb-img img {
width: 100% !important; height: 100% !important;
max-width: none !important; max-height: none !important;
object-fit: contain !important;
padding: 12px !important;
box-sizing: border-box !important;
transition: transform .3s ease !important;
}
.gb-card:hover .gb-img img { transform: scale(1.08) !important; }
/* --- CARD BODY --- */
.gb-body { padding: 14px 16px 8px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }
.gb-sku a { font-size: .8rem !important; color: #FA740D !important; font-weight: 700 !important; text-decoration: none !important; }
.gb-name a {
font-size: 1rem !important; font-weight: 700 !important;
color: #1c1f24 !important; line-height: 1.3 !important;
text-decoration: none !important; display: block !important; margin: 4px 0 8px !important;
}
.gb-name a:hover { color: #FA740D !important; }
.gb-avail { font-size: .85rem !important; font-weight: 600 !important; margin-bottom: 6px !important; }
.gb-avail.in { color: #2e7d32 !important; }
.gb-avail.out { color: #c62828 !important; }
.gb-price { font-size: 1.4rem !important; font-weight: 800 !important; color: #FA740D !important; margin-bottom: 2px !important; }
.gb-uom { font-size: .8rem !important; color: #999 !important; margin-bottom: 10px !important; }
/* --- QTY STEPPER --- */
.gb-form { padding: 0 !important; margin: 0 14px 12px !important; }
.gb-qty-row {
display: flex !important; align-items: stretch !important;
height: 40px !important; border: 1.5px solid #e0e0e0 !important;
border-radius: 7px !important; overflow: hidden !important;
margin-bottom: 8px !important; transition: border-color .18s !important;
}
.gb-qty-row:focus-within { border-color: #FA740D !important; }
.gb-qty-btn {
width: 40px !important; min-width: 40px !important;
background: #f5f5f5 !important; border: none !important;
font-size: 1.2rem !important; font-weight: 700 !important;
color: #555 !important; cursor: pointer !important;
display: flex !important; align-items: center !important; justify-content: center !important;
padding: 0 !important; transition: background .15s, color .15s !important;
flex-shrink: 0 !important;
}
.gb-qty-btn:hover { background: #FA740D !important; color: #fff !important; }
.gb-qty {
flex: 1 !important; min-width: 0 !important;
border: none !important; outline: none !important;
text-align: center !important; font-size: 1rem !important;
font-weight: 600 !important; color: #222 !important;
background: #fff !important; -moz-appearance: textfield !important;
}
.gb-qty::-webkit-outer-spin-button,
.gb-qty::-webkit-inner-spin-button { -webkit-appearance: none !important; }
/* --- ADD TO CART --- */
button.btn.gb-btn, button.btn-primary.gb-btn, .gb-form button.gb-btn {
display: block !important; width: 100% !important; padding: 11px 0 !important;
background: #FA740D !important; background-color: #FA740D !important;
border-color: #FA740D !important; color: #fff !important;
font-weight: 700 !important; font-size: .9rem !important;
text-transform: uppercase !important; letter-spacing: .07em !important;
border-radius: 6px !important; box-shadow: 0 2px 6px rgba(250,116,13,.3) !important;
cursor: pointer !important; transition: all .18s !important;
}
button.btn.gb-btn:hover, .gb-form button.gb-btn:hover {
background: #c85c00 !important; background-color: #c85c00 !important;
border-color: #c85c00 !important; transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(250,116,13,.45) !important;
}
/* --- WRAPPER & PAGE --- */
.style_tomato_wrapper { padding: 16px 24px !important; background: #fafafa !important; }
.category_header h1, .store_browse_list_no_buttons_page h1, .store_container_page h1 {
font-size: 1.8rem !important; font-weight: 800 !important; color: #1c1f24 !important; margin-bottom: .5rem !important;
}
/* --- PAGINATION --- */
.store_results_pagination .page-link {
border: 1.5px solid #FA740D !important; color: #FA740D !important;
border-radius: 5px !important; font-weight: 700 !important;
font-size: .85rem !important; margin: 0 2px !important; padding: 6px 13px !important;
transition: all .15s !important;
}
.store_results_pagination .page-item.active .page-link,
.store_results_pagination .page-link:hover {
background: #FA740D !important; color: #fff !important;
}
/* --- FOOTER --- */
.style_tomato_footer {
background: #1c1f24 !important; color: #aaa !important;
padding: 24px 28px !important; font-size: 14px !important;
}
/* =================================================================
WOW HEADER v2 — MODERN REDESIGN
================================================================= */
.style_tomato_header {
background: #1c1f24 !important;
padding: 0 !important;
border-bottom: none !important;
}
/* ── UTILITY BAR (top strip) ──────────────────────────────────── */
.tomato-utility-bar {
background: #111417 !important;
border-bottom: 1px solid #2e3239 !important;
padding: 6px 28px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: .03em !important;
}
.tomato-utility-bar, .tomato-utility-bar a,
.tomato-utility-bar span, .tomato-utility-bar i {
color: #aaa !important;
text-decoration: none !important;
}
.tomato-utility-bar a:hover { color: #FA740D !important; }
.tomato-utility-left i { color: #FA740D !important; font-size: 11px !important; }
.tomato-utility-right { display: flex !important; align-items: center !important; gap: 10px !important; }
.tomato-util-sep { color: #3a3f4a !important; }
/* ── MAIN HEADER ROW ──────────────────────────────────────────── */
.tomato-main-header {
display: flex !important;
align-items: center !important;
padding: 14px 28px !important;
gap: 24px !important;
background: #1c1f24 !important;
border-bottom: 3px solid #FA740D !important;
}
/* Logo */
.tomato-logo-wrap {
flex: 0 0 auto !important;
min-width: 140px !important;
}
.tomato-logo-wrap img {
max-height: 66px !important;
width: auto !important;
}
/* Search column */
.tomato-search-wrap {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.tomato-search-label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
}
.tomato-search-label,
.tomato-search-label a,
.tomato-search-label i {
color: #9aa0ab !important;
text-decoration: none !important;
}
.tomato-search-label a:hover { color: #FA740D !important; }
.tomato-search-divider { color: #3a3f4a !important; margin: 0 2px !important; }
.tomato-adv-icon { margin-left: 4px !important; }
/* Search input */
.tomato-search-wrap .style_tomato_search_form .input-group,
.tomato-search-wrap .input-group {
background: #fff !important;
border-radius: 8px !important;
border: 2px solid #e0e0e0 !important;
overflow: hidden !important;
transition: border-color .2s !important;
}
.tomato-search-wrap .style_tomato_search_form .input-group:focus-within,
.tomato-search-wrap .input-group:focus-within {
border-color: #FA740D !important;
box-shadow: 0 0 0 3px rgba(250,116,13,.15) !important;
}
.tomato-search-wrap input[type="text"],
.tomato-search-wrap .form-control {
background: transparent !important;
border: none !important;
color: #222 !important;
font-size: 16px !important;
font-weight: 400 !important;
padding: 12px 16px !important;
height: auto !important;
box-shadow: none !important;
}
.tomato-search-wrap input[type="text"]::placeholder,
.tomato-search-wrap .form-control::placeholder {
color: #aaa !important;
font-size: 15px !important;
}
/* Search button — orange with magnifier icon */
.tomato-search-wrap .btn.input-group-text,
.tomato-search-wrap button[type="submit"] {
background: #FA740D !important;
border: none !important;
color: #fff !important;
padding: 12px 20px !important;
border-radius: 0 !important;
font-size: 18px !important;
cursor: pointer !important;
transition: background .15s !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.tomato-search-wrap .btn.input-group-text:hover,
.tomato-search-wrap button[type="submit"]:hover {
background: #c85c00 !important;
}
/* Make sure the FA icon inside search button is white */
.tomato-search-wrap .btn.input-group-text i,
.tomato-search-wrap .btn.input-group-text .inet_icon,
.tomato-search-wrap button[type="submit"] i {
color: #fff !important;
font-size: 16px !important;
}
/* Action icon buttons column */
.tomato-actions-wrap {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.tomato-action-btn {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 8px 14px !important;
border-radius: 8px !important;
color: #ccc !important;
text-decoration: none !important;
transition: all .18s !important;
min-width: 72px !important;
cursor: pointer !important;
}
.tomato-action-btn:hover {
background: rgba(255,255,255,.07) !important;
color: #FA740D !important;
text-decoration: none !important;
}
.tomato-action-icon-wrap {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
background: rgba(255,255,255,.08) !important;
border-radius: 50% !important;
margin-bottom: 4px !important;
transition: background .18s !important;
}
.tomato-action-btn:hover .tomato-action-icon-wrap {
background: rgba(250,116,13,.2) !important;
}
.tomato-action-icon-wrap .fas,
.tomato-action-icon-wrap .far {
color: #fff !important;
font-size: 17px !important;
}
.tomato-action-btn:hover .tomato-action-icon-wrap .fas {
color: #FA740D !important;
}
.tomato-action-label {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
color: #aaa !important;
text-align: center !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.tomato-action-btn:hover .tomato-action-label { color: #FA740D !important; }
/* Cart badge */
.tomato-action-icon-wrap .badge.cart_item_count {
position: absolute !important;
top: -4px !important;
right: -4px !important;
background: #FA740D !important;
color: #fff !important;
font-size: 9px !important;
font-weight: 700 !important;
padding: 2px 5px !important;
border-radius: 999px !important;
border: 2px solid #1c1f24 !important;
min-width: 18px !important;
}
/* ── TOP NAV BAR BELOW HEADER ─────────────────────────────────── */
@media (min-width: 768px) {
.style_tomato_top_menu {
background: #FA740D !important;
padding: 0 28px !important;
margin: 0 !important;
}
.style_tomato_top_menu .nav-link {
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: #fff !important;
padding: 11px 18px !important;
border-bottom: 2px solid transparent !important;
transition: border-color .15s !important;
}
.style_tomato_top_menu .nav-link:hover {
color: #fff !important;
border-bottom-color: rgba(255,255,255,.7) !important;
font-weight: 700 !important;
}
}
/* =================================================================
TOMATO — HOME PAGE DEPARTMENT GRID
================================================================= */
/* Full width on home/login page */
[data-programmode="inet_custom_page_home-custom"] .style_tomato_side_menu,
[data-programmode="login"] .style_tomato_side_menu {
display: none !important;
}
[data-programmode="inet_custom_page_home-custom"] .style_tomato_wrapper,
[data-programmode="login"] .style_tomato_wrapper {
flex: 0 0 100% !important;
max-width: 100% !important;
padding: 24px 32px !important;
background: #f5f5f5 !important;
}
/* Hide default login/home page content while grid loads */
.tomato-home-loading .style_tomato_wrapper > *:not(#tomato-home-grid) {
display: none !important;
}
/* Grid wrapper */
#tomato-home-grid {
width: 100%;
}
#tomato-home-grid h1.tomato-home-heading {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: #1c1f24 !important;
margin-bottom: 20px !important;
letter-spacing: -.01em !important;
}
/* 4-column grid */
.tomato-dept-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
}
@media (max-width: 1199px) { .tomato-dept-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 767px) { .tomato-dept-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .tomato-dept-grid { grid-template-columns: 1fr !important; } }
/* Department card — photo only, no body */
.tomato-dept-card {
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
transition: box-shadow .2s, transform .2s !important;
display: block !important;
cursor: pointer !important;
position: relative !important;
}
.tomato-dept-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
transform: translateY(-3px) !important;
}
/* Photo fills card entirely */
.tomato-dept-photo {
position: relative !important;
width: 100% !important;
padding-top: 66% !important; /* 3:2 ratio */
overflow: hidden !important;
}
.tomato-dept-photo img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transition: transform .4s ease !important;
display: block !important;
}
.tomato-dept-card:hover .tomato-dept-photo img {
transform: scale(1.05) !important;
}
/* Dark gradient overlay */
.tomato-dept-photo::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to top,
rgba(0,0,0,.82) 0%,
rgba(0,0,0,.35) 50%,
rgba(0,0,0,.0) 100%
) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Department name — clean text on image, right-aligned */
.tomato-dept-name {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 2 !important;
padding: 12px 14px 14px !important;
pointer-events: none !important;
text-align: right !important;
}
.tomato-dept-name a {
color: #fff !important;
font-size: 1rem !important;
font-weight: 600 !important;
text-decoration: none !important;
letter-spacing: .01em !important;
line-height: 1.3 !important;
pointer-events: auto !important;
display: block !important;
font-family: Inter, sans-serif !important;
background: none !important;
border: none !important;
padding: 0 !important;
}
.tomato-dept-name a:hover { color: #ffe4c0 !important; }
/* Skeleton */
.tomato-skeleton {
background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%) !important;
background-size: 400% 100% !important;
animation: shimmer 1.4s infinite !important;
border-radius: 10px !important;
padding-top: 66% !important;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── PER-PAGE SELECTOR ─────────────────────────────────────── */
#tomato-per-page {
margin: 24px 0 8px;
padding: 0;
}
.tomato-per-page-inner {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
background: #fff;
border: 1.5px solid #e8e8e8;
border-radius: 10px;
padding: 12px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.tomato-per-page-label {
font-size: .8rem;
font-weight: 700;
color: #555;
text-transform: uppercase;
letter-spacing: .06em;
white-space: nowrap;
}
.tomato-per-page-controls {
display: flex;
align-items: center;
gap: 10px;
}
#tomato-per-page-select {
appearance: none;
-webkit-appearance: none;
border: 2px solid #FA740D;
border-radius: 8px;
color: #FA740D;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FA740D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
font-size: .9rem;
font-weight: 700;
padding: 8px 34px 8px 14px;
cursor: pointer;
outline: none;
min-width: 90px;
transition: background-color .18s, box-shadow .18s, border-color .18s;
line-height: 1.4;
}
#tomato-per-page-select:hover {
background-color: #fff8f3;
box-shadow: 0 0 0 3px rgba(250,116,13,.15);
}
#tomato-per-page-select:focus {
background-color: #fff8f3;
box-shadow: 0 0 0 3px rgba(250,116,13,.25);
border-color: #c85c00;
}
#tomato-per-page-select:disabled {
opacity: .55;
cursor: not-allowed;
}
#tomato-per-page-select option {
color: #222;
font-weight: 600;
background: #fff;
}
#tomato-per-page-status {
font-size: .8rem;
font-weight: 600;
min-width: 130px;
color: #888;
transition: color .2s;
}
#tomato-per-page-status.tomato-per-page-loading {
color: #FA740D;
}
#tomato-per-page-status.tomato-per-page-done {
color: #2e7d32;
}
@media (max-width: 575px) {
.tomato-per-page-inner {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px 14px;
}
#tomato-per-page-status {
min-width: unset;
}
}
/* ── WEBSITE MARGIN FIX ─────────────────────────────────────────────────── */
/* Outer page container — breathing room on all screen sizes */
.style_tomato_container {
padding-left: 40px !important;
padding-right: 40px !important;
}
/* Body row inner padding */
.style_tomato_body > .row {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Main content wrapper */
.style_tomato_wrapper {
padding-left: 40px !important;
padding-right: 40px !important;
}
/* Header/nav/tiptop — full width, break out of container padding */
.style_tomato_header,
.style_tomato_top_menu,
.style_theme_tiptop,
.style_tomato_footer {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: -40px !important;
margin-right: -40px !important;
width: calc(100% + 80px) !important;
}
/* Inner content of bars gets the padding */
.tomato-main-header,
.style_tomato_top_menu .style_tomato_menu,
.style_theme_tiptop_content,
.style_tomato_footer > .row {
padding-left: 40px !important;
padding-right: 40px !important;
}
/* Home dept grid */
#tomato-home-grid {
padding: 0 0 32px !important;
}
/* On large screens, bump up to 60px */
@media (min-width: 1200px) {
.style_tomato_container {
padding-left: 60px !important;
padding-right: 60px !important;
}
.style_tomato_wrapper {
padding-left: 48px !important;
padding-right: 48px !important;
}
.style_tomato_header,
.style_tomato_top_menu,
.style_theme_tiptop,
.style_tomato_footer {
margin-left: -60px !important;
margin-right: -60px !important;
width: calc(100% + 120px) !important;
}
.tomato-main-header,
.style_tomato_top_menu .style_tomato_menu,
.style_theme_tiptop_content,
.style_tomato_footer > .row {
padding-left: 60px !important;
padding-right: 60px !important;
}
}
/* Mobile — reduce margins so content isn't too tight */
@media (max-width: 767px) {
.style_tomato_container {
padding-left: 12px !important;
padding-right: 12px !important;
}
.style_tomato_wrapper {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* ── PROMO TICKER STRIP ──────────────────────────────────────── */
#coke-ticker {
background: #111417;
border-bottom: 2px solid #FA740D;
overflow: hidden;
white-space: nowrap;
height: 36px;
display: flex;
align-items: center;
margin-left: -40px;
margin-right: -40px;
width: calc(100% + 80px);
}
@media (min-width: 1200px) {
#coke-ticker {
margin-left: -60px;
margin-right: -60px;
width: calc(100% + 120px);
}
}
@media (max-width: 767px) {
#coke-ticker {
margin-left: -12px;
margin-right: -12px;
width: calc(100% + 24px);
}
}
.coke-ticker-track {
display: inline-flex;
align-items: center;
animation: coke-ticker-scroll 28s linear infinite;
white-space: nowrap;
}
.coke-ticker-track:hover { animation-play-state: paused; }
.coke-ticker-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .78rem;
font-weight: 700;
color: #fff;
letter-spacing: .06em;
text-transform: uppercase;
padding: 0 44px;
}
.coke-ticker-item .fas { color: #FA740D; font-size: 11px; }
.coke-ticker-sep { color: #FA740D; opacity: .45; padding: 0 2px; font-size: 10px; }
@keyframes coke-ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.coke-ticker-track { animation: none; }
}
/* ── SIDEBAR PROMO CARD ──────────────────────────────────────── */
#coke-promo-card {
margin: 0 0 12px 0;
border-radius: 12px;
overflow: hidden;
border: none;
box-shadow: 0 4px 18px rgba(0,0,0,.15);
animation: coke-promo-in .55s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes coke-promo-in {
from { opacity: 0; transform: translateY(14px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.coke-promo-header {
background: #FA740D;
padding: 14px 16px 10px;
position: relative;
overflow: hidden;
}
/* Decorative circles in header */
.coke-promo-header::before,
.coke-promo-header::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,.1);
}
.coke-promo-header::before {
width: 80px; height: 80px;
top: -30px; right: -20px;
}
.coke-promo-header::after {
width: 50px; height: 50px;
bottom: -20px; right: 30px;
}
.coke-promo-eyebrow {
font-size: .62rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.75);
display: block;
margin-bottom: 3px;
}
.coke-promo-headline {
font-size: 1.15rem;
font-weight: 800;
color: #fff;
line-height: 1.15;
display: block;
letter-spacing: -.01em;
}
.coke-promo-body {
background: #fff;
padding: 0;
}
.coke-promo-row {
padding: 14px 16px 12px;
border-bottom: 2px dashed #ffe5cc;
position: relative;
transition: background .18s, transform .18s;
}
.coke-promo-row:last-child { border-bottom: none; }
.coke-promo-row:hover {
background: #fffaf5;
transform: translateX(3px);
}
/* Bubble badge */
.coke-promo-bubble {
position: absolute;
top: 12px; right: 14px;
background: #FA740D;
color: #fff;
font-size: .58rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
animation: coke-bubble-pop .6s cubic-bezier(.36,.07,.19,.97) both;
animation-delay: .7s;
}
@keyframes coke-bubble-pop {
0% { opacity:0; transform: scale(.4) rotate(-10deg); }
70% { transform: scale(1.15) rotate(3deg); }
100% { opacity:1; transform: scale(1) rotate(0deg); }
}
.coke-promo-row-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.coke-promo-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
background: #FA740D;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 8px rgba(250,116,13,.4);
}
.coke-promo-row:hover .coke-promo-icon {
animation: coke-icon-bounce .45s cubic-bezier(.36,.07,.19,.97);
}
@keyframes coke-icon-bounce {
0%,100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-6px) rotate(-8deg); }
60% { transform: translateY(2px) rotate(4deg); }
80% { transform: translateY(-3px) rotate(-2deg); }
}
.coke-promo-icon .fas { color: #fff; font-size: 15px; }
.coke-promo-text strong {
display: block;
font-size: .92rem;
font-weight: 800;
color: #1c1f24;
line-height: 1.2;
letter-spacing: -.01em;
}
.coke-promo-text span {
font-size: .76rem;
color: #777;
line-height: 1.4;
display: block;
margin-top: 3px;
}
.coke-promo-cta {
display: block;
margin-top: 10px;
padding: 11px 10px;
background: #1c1f24;
color: #fff !important;
font-size: .76rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
text-align: center;
text-decoration: none !important;
border-radius: 8px;
border: none;
position: relative;
overflow: hidden;
transition: background .15s, transform .12s, box-shadow .15s;
animation: coke-pulse 2.8s ease-in-out infinite;
}
.coke-promo-cta::after {
content: ' \2192';
font-weight: 900;
opacity: .7;
}
@keyframes coke-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(28,31,36,0); }
50% { box-shadow: 0 0 0 5px rgba(28,31,36,.15); }
}
.coke-promo-cta:hover {
background: #FA740D !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 5px 14px rgba(250,116,13,.5) !important;
animation: none !important;
}
/* Footer strip */
.coke-promo-footer {
background: #1c1f24;
padding: 8px 16px;
text-align: center;
font-size: .65rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #FA740D;
}
@media (prefers-reduced-motion: reduce) {
#coke-promo-card,
.coke-promo-cta,
.coke-promo-bubble { animation: none; }
.coke-promo-row:hover { transform: none; }
}
/* ── HERO BANNER ─────────────────────────────────────────────── */
#coke-hero {
width: 100%;
margin-bottom: 28px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 24px rgba(0,0,0,.13);
animation: coke-hero-in .6s cubic-bezier(.22,.68,0,1.15) both;
}
@keyframes coke-hero-in {
from { opacity: 0; transform: translateY(18px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── TOP STRIP — season sale ─────────────────────────────────── */
.coke-hero-topstrip {
background: #1c1f24;
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 22px;
flex-wrap: wrap;
gap: 8px;
}
.coke-hero-season {
display: flex;
align-items: center;
gap: 10px;
}
.coke-hero-season-badge {
background: #FA740D;
color: #fff;
font-size: .62rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
animation: coke-badge-pop .5s cubic-bezier(.36,.07,.19,.97) .4s both;
}
@keyframes coke-badge-pop {
from { opacity:0; transform: scale(.5) rotate(-8deg); }
70% { transform: scale(1.12) rotate(2deg); }
to { opacity:1; transform: scale(1) rotate(0); }
}
.coke-hero-season-text {
font-size: .82rem;
font-weight: 700;
color: #fff;
letter-spacing: .02em;
}
.coke-hero-season-text em {
color: #FA740D;
font-style: normal;
}
.coke-hero-store-pill {
display: flex;
align-items: center;
gap: 6px;
font-size: .74rem;
color: #aaa;
font-weight: 500;
}
.coke-hero-store-pill .fas {
color: #FA740D;
font-size: 11px;
}
/* ── MAIN BODY ───────────────────────────────────────────────── */
.coke-hero-main {
background: linear-gradient(135deg,rgba(0,0,0,.62) 0%,rgba(250,116,13,.55) 100%),url('https://scontent-sea1-1.xx.fbcdn.net/v/t39.30808-6/565656781_122177870504461501_3509804213691186857_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=2a1932&_nc_ohc=WnKPfJgMkvUQ7kNvwEjDXGP&_nc_oc=AdqP7ru5yB12iJ22WuiTsNa4Z3cKxBNiEpKm2UB8HaPpwSQCxOyNuMGDykeKzg_U_j4&_nc_zt=23&_nc_ht=scontent-sea1-1.xx&_nc_gid=G-tPsy5_I5_DV6pYKnGdPw&_nc_ss=7a30f&oh=00_AfxDS2lcpmYRyPFDmXqD8BCi7-nugIW6vqVKiwspFadF2Q&oe=69C7EA80') center center/cover no-repeat;
padding: 28px 28px 24px;
position: relative;
overflow: hidden;
}
/* Decorative circles */
.coke-hero-main::before {
content: '';
position: absolute;
width: 260px; height: 260px;
border-radius: 50%;
background: rgba(255,255,255,.07);
top: -80px; right: -60px;
pointer-events: none;
}
.coke-hero-main::after {
content: '';
position: absolute;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(255,255,255,.06);
bottom: -50px; left: 40%;
pointer-events: none;
}
.coke-hero-eyebrow {
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
display: block;
margin-bottom: 6px;
animation: coke-hero-fadein .5s .15s both;
}
.coke-hero-headline {
font-size: 1.9rem;
font-weight: 900;
color: #fff;
line-height: 1.1;
letter-spacing: -.02em;
display: block;
margin-bottom: 8px;
animation: coke-hero-fadein .5s .25s both;
}
.coke-hero-sub {
font-size: .88rem;
font-weight: 600;
color: rgba(255,255,255,.85);
display: block;
margin-bottom: 20px;
animation: coke-hero-fadein .5s .35s both;
}
@keyframes coke-hero-fadein {
from { opacity:0; transform: translateX(-12px); }
to { opacity:1; transform: translateX(0); }
}
.coke-hero-btns {
display: flex;
gap: 10px;
flex-wrap: wrap;
animation: coke-hero-fadein .5s .45s both;
}
.coke-hero-btn-primary {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 12px 20px;
background: #1c1f24;
color: #fff !important;
font-size: .82rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 8px;
transition: background .15s, transform .12s, box-shadow .15s;
white-space: nowrap;
}
.coke-hero-btn-primary:hover {
background: #000 !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 5px 16px rgba(0,0,0,.35);
}
.coke-hero-btn-secondary {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 12px 20px;
background: rgba(255,255,255,.18);
color: #fff !important;
font-size: .82rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 8px;
border: 2px solid rgba(255,255,255,.5);
transition: background .15s, transform .12s, box-shadow .15s;
white-space: nowrap;
}
.coke-hero-btn-secondary:hover {
background: rgba(255,255,255,.28) !important;
color: #fff !important;
transform: translateY(-2px);
border-color: #fff !important;
}
/* ── BOTTOM INFO STRIP ───────────────────────────────────────── */
.coke-hero-infostrip {
background: #fff;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
gap: 0;
border-top: 3px solid #FA740D;
}
.coke-hero-info-item {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 16px;
flex: 1;
min-width: 140px;
border-right: 1px solid #f0f0f0;
}
.coke-hero-info-item:last-child { border-right: none; }
.coke-hero-info-item .fas {
color: #FA740D;
font-size: 15px;
flex-shrink: 0;
}
.coke-hero-info-label {
font-size: .7rem;
font-weight: 600;
color: #aaa;
text-transform: uppercase;
letter-spacing: .06em;
display: block;
line-height: 1;
}
.coke-hero-info-value {
font-size: .8rem;
font-weight: 700;
color: #1c1f24;
display: block;
line-height: 1.3;
margin-top: 2px;
}
/* ── CONTRACTOR TICKER inside hero ──────────────────────────── */
.coke-hero-contractor {
background: #fff8f2;
border-top: 1px solid #ffe0c0;
padding: 8px 22px;
display: flex;
align-items: center;
gap: 10px;
}
.coke-hero-contractor .fas { color: #FA740D; font-size: 13px; flex-shrink: 0; }
.coke-hero-contractor-text {
font-size: .76rem;
font-weight: 600;
color: #1c1f24;
}
.coke-hero-contractor-text a {
color: #FA740D !important;
font-weight: 800;
text-decoration: none !important;
margin-left: 6px;
}
.coke-hero-contractor-text a:hover { text-decoration: underline !important; }
@media (max-width: 767px) {
.coke-hero-headline { font-size: 1.4rem; }
.coke-hero-main { padding: 20px 18px 18px; }
.coke-hero-topstrip { padding: 8px 14px; }
.coke-hero-infostrip { flex-direction: column; align-items: flex-start; }
.coke-hero-info-item { border-right: none; border-bottom: 1px solid #f0f0f0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
#coke-hero, .coke-hero-eyebrow, .coke-hero-headline,
.coke-hero-sub, .coke-hero-btns, .coke-hero-season-badge { animation: none; }
}
#coke-rollup { margin-top: 16px; }
.coke-rollup-status-bar {
display: flex;
align-items: center;
font-size: .85rem;
color: #888;
font-weight: 500;
padding: 6px 0 14px;
}
.coke-rollup-pagination { margin-top: 24px; }
.coke-page-nav {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-bottom: 8px;
}
.coke-page-btn {
padding: 7px 14px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
color: #333;
cursor: pointer;
font-size: .9rem;
font-weight: 500;
transition: all .15s;
}
.coke-page-btn:hover { background: #f5f5f5; border-color: #FA740D; color: #FA740D; }
.coke-page-active { background: #FA740D !important; color: #fff !important; border-color: #FA740D !important; }
.coke-page-loading { font-size: .8rem; color: #aaa; display: flex; align-items: center; gap: 6px; }
.coke-page-count { font-size: .85rem; color: #888; }
/* ── ROLLUP SIDEBAR FILTERS ──────────────────────────────────── */
#coke-filter-panel {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 10px;
padding: 0;
margin-bottom: 20px;
overflow: hidden;
}
.coke-filter-section {
padding: 12px 14px;
border-bottom: 1px solid #f0f0f0;
}
.coke-filter-section:last-child { border-bottom: none; }
.coke-filter-title {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #888;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.coke-filter-title i { color: #FA740D; }
/* Keyword search */
#coke-filter-keyword {
width: 100%;
padding: 7px 10px;
border: 1.5px solid #e0e0e0;
border-radius: 6px;
font-size: .82rem;
color: #333;
outline: none;
transition: border-color .15s;
}
#coke-filter-keyword:focus { border-color: #FA740D; }
/* In Stock toggle */
.coke-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: .82rem;
color: #444;
font-weight: 500;
}
.coke-toggle {
position: relative;
width: 36px;
height: 20px;
flex-shrink: 0;
}
.coke-toggle input { opacity: 0; width: 0; height: 0; }
.coke-toggle-slider {
position: absolute;
inset: 0;
background: #ddd;
border-radius: 20px;
cursor: pointer;
transition: background .2s;
}
.coke-toggle-slider::before {
content: '';
position: absolute;
width: 14px; height: 14px;
left: 3px; top: 3px;
background: #fff;
border-radius: 50%;
transition: transform .2s;
}
.coke-toggle input:checked + .coke-toggle-slider { background: #FA740D; }
.coke-toggle input:checked + .coke-toggle-slider::before { transform: translateX(16px); }
/* Price range */
.coke-price-row {
display: flex;
align-items: center;
gap: 6px;
}
.coke-price-input {
flex: 1;
padding: 6px 8px;
border: 1.5px solid #e0e0e0;
border-radius: 6px;
font-size: .8rem;
width: 100%;
outline: none;
transition: border-color .15s;
}
.coke-price-input:focus { border-color: #FA740D; }
.coke-price-sep { color: #999; font-size: .8rem; flex-shrink: 0; }
/* Category chips */
.coke-cat-chips {
display: flex;
flex-direction: column;
gap: 0;
max-height: 340px;
overflow-y: auto;
border: 1px solid #f0f0f0;
border-radius: 6px;
}
.coke-cat-chip {
display: block;
padding: 16px 12px;
border-bottom: none;
cursor: pointer;
font-size: .82rem;
color: #333;
font-weight: 400;
transition: background .12s, color .12s;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
font-family: Inter, sans-serif;
}
.coke-cat-chip:last-child { border-bottom: none; }
.coke-cat-chip:hover { background: #fff4ec; color: #FA740D; }
.coke-cat-chip.active { background: #FA740D; color: #fff; }
.coke-cat-chip i { display: none; }
/* Apply button */
#coke-filter-apply {
width: 100%;
padding: 9px;
background: #FA740D;
color: #fff;
border: none;
border-radius: 0 0 10px 10px;
font-size: .82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
cursor: pointer;
transition: background .15s;
}
#coke-filter-apply:hover { background: #c85c00; }
/* Result count badge */
#coke-filter-count {
font-size: .75rem;
color: #888;
padding: 6px 14px 8px;
display: block;
}
/* Clear filters link */
#coke-filter-clear {
font-size: .72rem;
color: #aaa;
text-decoration: none;
cursor: pointer;
padding: 0 14px 10px;
display: block;
transition: color .15s;
}
#coke-filter-clear:hover { color: #FA740D; }
/* ── REFINE MENUBOX ──────────────────────────────────────────── */
/* li contains: NAME(N) */
.inet_refine_menu .style_tomato_title_bar {
background: #1c1f24 !important;
color: #fff !important;
font-size: .72rem !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
padding: 8px 12px !important;
border-radius: 4px 4px 0 0 !important;
cursor: default !important;
}
.inet_refine_menu .style_tomato_content {
background: #fff !important;
border: 1px solid #e8e8e8 !important;
border-top: none !important;
border-radius: 0 0 4px 4px !important;
padding: 4px 0 8px !important;
margin-bottom: 12px !important;
}
.inet_refine_menu .navbar-nav li {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 12px !important;
line-height: 1 !important;
}
.inet_refine_menu .navbar-nav li a {
flex: 1 !important;
font-size: .82rem !important;
color: #333 !important;
font-weight: 500 !important;
padding: 7px 0 !important;
text-decoration: none !important;
display: block !important;
}
.inet_refine_menu .navbar-nav li a:hover { color: #FA740D !important; }
.inet_refine_menu .refine_count {
font-size: .75rem !important;
color: #999 !important;
font-weight: 400 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
margin-left: 8px !important;
}
.inet_refine_menu .blank {
font-size: .72rem !important;
color: #999 !important;
padding: 4px 12px 6px !important;
border-bottom: 1px solid #f0f0f0 !important;
margin-bottom: 4px !important;
display: block !important;
}
.inet_refine_menu .refine_show_more a,
.inet_refine_menu li a.refine_show_more {
color: #FA740D !important;
font-weight: 600 !important;
}
/* ── REFINE CATEGORY — taller scroll area ───────────────────── */
#refine_category_menubox .style_tomato_content {
max-height: none !important;
overflow-y: visible !important;
}
/* ── HOME PAGE — hide refine sidebar ───────────────────────── */
body.tomato-home-loading .tomato_refine_search_menuboxes,
body.tomato-home-loading .inet_refine_menu,
#tomato-home-grid ~ * .tomato_refine_search_menuboxes {
display: none !important;
}
/* Hide immediately via attribute before JS runs */
.style_tomato_side_nav .tomato_refine_search_menuboxes {
transition: none !important;
}
/* ── SIDEBAR SEARCH FORM ─────────────────────────────────────── */
#store_links .coke-sidebar-search {
padding: 10px 12px 14px !important;
}
#store_links .coke-sidebar-search form .input-group {
border: 1.5px solid #e0e0e0 !important;
border-radius: 6px !important;
overflow: hidden !important;
transition: border-color .15s !important;
}
#store_links .coke-sidebar-search form .input-group:focus-within {
border-color: #FA740D !important;
}
#store_links .coke-sidebar-search input[type="text"] {
border: none !important;
box-shadow: none !important;
font-size: .88rem !important;
padding: 9px 12px !important;
background: #fafafa !important;
}
#store_links .coke-sidebar-search button {
background: #FA740D !important;
border: none !important;
color: #fff !important;
padding: 0 14px !important;
cursor: pointer !important;
}
#store_links .coke-sidebar-search button:hover {
background: #d4600a !important;
}
/* ── DEPARTMENTS HOME — hide products immediately, show grid ── */
body.tomato-home-loading .store_container_page,
body.tomato-home-loading .store_browse_products_page,
body.tomato-home-loading .store_results_navigation_top_wrapper,
body.tomato-home-loading .store_results_navigation_bottom_wrapper,
body.tomato-home-loading .recently_viewed_products_wrapper,
body.tomato-home-loading .inet_grid.store_products_list {
display: none !important;
}
/* ── DEPT BANNER STRIP ───────────────────────────────────────── */
#coke-dept-banner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
background: #1c1f24;
border-radius: 10px;
padding: 14px 20px;
margin-bottom: 18px;
animation: coke-promo-in .45s cubic-bezier(.22,.68,0,1.15) both;
}
.coke-dept-banner-left { display: flex; align-items: center; gap: 12px; }
.coke-dept-banner-icon {
width: 40px; height: 40px;
background: #FA740D; border-radius: 50%;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.coke-dept-banner-icon .fas { color: #fff; font-size: 16px; }
.coke-dept-banner-title { font-size: 1.1rem; font-weight: 800; color: #fff; display: block; line-height: 1.2; letter-spacing: -.01em; }
.coke-dept-banner-sub { font-size: .74rem; font-weight: 500; color: #aaa; display: block; margin-top: 2px; }
.coke-dept-banner-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coke-dept-banner-badge {
background: #FA740D; color: #fff;
font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.coke-dept-banner-badge.dark { background: rgba(255,255,255,.1); color: #ccc; }
/* ── MID-GRID PROMO STRIP ────────────────────────────────────── */
.coke-midgrid-promo {
grid-column: 1 / -1;
background: #1c1f24;
border-radius: 10px;
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
position: relative;
overflow: hidden;
animation: coke-promo-in .4s cubic-bezier(.22,.68,0,1.15) both;
}
.coke-midgrid-promo::before {
content: '';
position: absolute;
width: 180px; height: 180px; border-radius: 50%;
background: rgba(250,116,13,.08);
top: -60px; right: -40px; pointer-events: none;
}
.coke-midgrid-left { display: flex; align-items: center; gap: 14px; }
.coke-midgrid-icon {
width: 44px; height: 44px; background: #FA740D;
border-radius: 10px; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; box-shadow: 0 4px 12px rgba(250,116,13,.4);
}
.coke-midgrid-icon .fas { color: #fff; font-size: 18px; }
.coke-midgrid-title { font-size: 1rem; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.coke-midgrid-sub { font-size: .76rem; color: #aaa; display: block; margin-top: 3px; }
.coke-midgrid-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 18px; background: #FA740D; color: #fff !important;
font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
text-decoration: none !important; border-radius: 7px; white-space: nowrap;
transition: background .15s, transform .12s; flex-shrink: 0;
}
.coke-midgrid-cta:hover { background: #c85c00 !important; color: #fff !important; transform: translateY(-1px); }
/* ── UPSELL STRIP ────────────────────────────────────────────── */
#coke-upsell { margin: 24px 0; animation: coke-promo-in .45s cubic-bezier(.22,.68,0,1.15) both; }
.coke-upsell-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.coke-upsell-header .fas { color: #FA740D; font-size: 14px; }
.coke-upsell-title { font-size: .78rem; font-weight: 800; color: #1c1f24; text-transform: uppercase; letter-spacing: .08em; }
.coke-upsell-track {
display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
scrollbar-width: thin; scrollbar-color: #FA740D #f0f0f0;
}
.coke-upsell-track::-webkit-scrollbar { height: 4px; }
.coke-upsell-track::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 2px; }
.coke-upsell-track::-webkit-scrollbar-thumb { background: #FA740D; border-radius: 2px; }
.coke-upsell-card {
flex-shrink: 0; width: 140px; background: #fff;
border: 1px solid #ebebeb; border-radius: 8px; overflow: hidden;
text-decoration: none !important; transition: box-shadow .18s, transform .18s; display: block;
}
.coke-upsell-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
.coke-upsell-img {
height: 100px; background: #f7f7f7;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.coke-upsell-img img { max-width: 100%; max-height: 90px; object-fit: contain; padding: 6px; }
.coke-upsell-body { padding: 8px 10px; }
.coke-upsell-name {
font-size: .72rem; font-weight: 700; color: #1c1f24; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.coke-upsell-price { font-size: .82rem; font-weight: 800; color: #FA740D; margin-top: 4px; display: block; }
/* ── CONTRACTOR CALLOUT ──────────────────────────────────────── */
#coke-contractor-callout {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 14px;
background: #1c1f24; border-radius: 10px;
padding: 16px 22px; margin: 24px 0;
animation: coke-promo-in .45s cubic-bezier(.22,.68,0,1.15) both;
}
.coke-callout-left { display: flex; align-items: center; gap: 14px; }
.coke-callout-icon {
width: 42px; height: 42px; background: #FA740D; border-radius: 50%;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.coke-callout-icon .fas { color: #fff; font-size: 17px; }
.coke-callout-title { font-size: .95rem; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.coke-callout-sub { font-size: .76rem; color: #aaa; display: block; margin-top: 3px; }
.coke-callout-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 11px 20px; background: #FA740D; color: #fff !important;
font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
text-decoration: none !important; border-radius: 7px; white-space: nowrap;
transition: background .15s, transform .12s, box-shadow .15s; flex-shrink: 0;
}
.coke-callout-cta:hover {
background: #c85c00 !important; color: #fff !important;
transform: translateY(-2px); box-shadow: 0 4px 12px rgba(250,116,13,.45);
}
@media (max-width: 767px) {
#coke-dept-banner, #coke-contractor-callout { flex-direction: column; align-items: flex-start; }
.coke-midgrid-promo { flex-direction: column; align-items: flex-start; }
}
/* ── FOOTER REBUILD ──────────────────────────────────────────── */
.style_tomato_footer {
background: #1c1f24 !important;
padding: 0 !important;
margin-top: 32px !important;
}
/* Tagline strip */
.coke-footer-tagline {
background: #FA740D;
padding: 14px 60px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.coke-footer-tagline-text {
font-size: 1rem;
font-weight: 800;
color: #fff;
letter-spacing: -.01em;
}
.coke-footer-tagline-sub {
font-size: .78rem;
font-weight: 500;
color: rgba(255,255,255,.8);
display: flex;
align-items: center;
gap: 16px;
}
.coke-footer-tagline-sub span { display: flex; align-items: center; gap: 5px; }
.coke-footer-tagline-sub .fas { font-size: 11px; opacity: .8; }
/* Main footer grid */
.coke-footer-main {
padding: 40px 60px 32px;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.2fr;
gap: 40px;
}
@media (max-width: 991px) {
.coke-footer-main { grid-template-columns: 1fr 1fr; gap: 28px; padding: 28px 24px; }
.coke-footer-tagline { padding: 12px 24px; }
}
@media (max-width: 575px) {
.coke-footer-main { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px; }
.coke-footer-tagline { padding: 10px 16px; flex-direction: column; align-items: flex-start; }
}
/* Column headings */
.coke-footer-col-title {
font-size: .66rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: #FA740D;
display: block;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Brand column */
.coke-footer-brand-name {
font-size: 1.05rem;
font-weight: 800;
color: #fff;
display: block;
margin-bottom: 6px;
line-height: 1.2;
}
.coke-footer-brand-desc {
font-size: .78rem;
color: #888;
line-height: 1.6;
display: block;
margin-bottom: 16px;
}
.coke-footer-social {
display: flex;
gap: 10px;
margin-top: 4px;
}
.coke-footer-social a {
width: 36px;
height: 36px;
background: rgba(255,255,255,.07);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #aaa !important;
font-size: 15px;
text-decoration: none !important;
transition: background .15s, color .15s, transform .12s;
border: 1px solid rgba(255,255,255,.08);
}
.coke-footer-social a:hover {
background: #FA740D !important;
color: #fff !important;
transform: translateY(-2px);
border-color: #FA740D !important;
}
/* Hours column */
.coke-footer-hours-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.coke-footer-hours-row:last-child { border-bottom: none; }
.coke-footer-hours-day { font-size: .76rem; color: #888; font-weight: 500; }
.coke-footer-hours-time { font-size: .76rem; color: #ccc; font-weight: 600; }
.coke-footer-hours-time.closed { color: #555; }
/* Quick links column */
.coke-footer-links { list-style: none; padding: 0; margin: 0; }
.coke-footer-links li { margin-bottom: 2px; }
.coke-footer-links a {
font-size: .8rem;
color: #888 !important;
text-decoration: none !important;
display: flex;
align-items: center;
gap: 7px;
padding: 5px 0;
transition: color .15s, padding-left .15s;
}
.coke-footer-links a .fas { font-size: 10px; color: #FA740D; opacity: .7; }
.coke-footer-links a:hover { color: #fff !important; padding-left: 4px; }
.coke-footer-links a:hover .fas { opacity: 1; }
/* Contact column */
.coke-footer-contact-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
.coke-footer-contact-row .fas {
color: #FA740D;
font-size: 13px;
margin-top: 2px;
flex-shrink: 0;
width: 14px;
}
.coke-footer-contact-label { font-size: .7rem; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; display: block; }
.coke-footer-contact-value { font-size: .8rem; color: #ccc; font-weight: 500; display: block; margin-top: 1px; line-height: 1.4; }
.coke-footer-contact-value a { color: #ccc !important; text-decoration: none !important; transition: color .15s; }
.coke-footer-contact-value a:hover { color: #FA740D !important; }
/* Bottom bar */
.coke-footer-bottom {
border-top: 1px solid rgba(255,255,255,.07);
padding: 14px 60px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.coke-footer-copyright { font-size: .7rem; color: #444; }
.coke-footer-bottom-links { display: flex; gap: 20px; }
.coke-footer-bottom-links a { font-size: .7rem; color: #444 !important; text-decoration: none !important; transition: color .15s; }
.coke-footer-bottom-links a:hover { color: #FA740D !important; }
@media (max-width: 575px) {
.coke-footer-bottom { padding: 12px 16px; flex-direction: column; align-items: flex-start; }
}
/* ── RECENTLY VIEWED ─────────────────────────────────────────── */
.recently_viewed_products_wrapper {
margin: 32px 0 8px !important;
}
.recently_viewed_products_wrapper h2 {
display: none !important;
}
#coke-recently-viewed {
border-top: 3px solid #FA740D;
padding-top: 20px;
}
.coke-rv-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.coke-rv-title {
display: flex;
align-items: center;
gap: 8px;
}
.coke-rv-title .fas { color: #FA740D; font-size: 14px; }
.coke-rv-title span {
font-size: .78rem;
font-weight: 800;
color: #1c1f24;
text-transform: uppercase;
letter-spacing: .09em;
}
.coke-rv-clear {
font-size: .7rem;
color: #bbb;
text-decoration: none !important;
cursor: pointer;
transition: color .15s;
font-weight: 500;
}
.coke-rv-clear:hover { color: #FA740D !important; }
.coke-rv-track {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.coke-rv-card {
background: #fff;
border: 1px solid #ebebeb;
border-radius: 10px;
overflow: hidden;
text-decoration: none !important;
display: flex;
flex-direction: column;
transition: box-shadow .2s, transform .2s;
animation: coke-rv-pop .35s cubic-bezier(.22,.68,0,1.2) both;
}
.coke-rv-card:nth-child(2) { animation-delay: .05s; }
.coke-rv-card:nth-child(3) { animation-delay: .10s; }
.coke-rv-card:nth-child(4) { animation-delay: .15s; }
.coke-rv-card:nth-child(5) { animation-delay: .20s; }
@keyframes coke-rv-pop {
from { opacity: 0; transform: translateY(10px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.coke-rv-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.11);
transform: translateY(-3px);
}
.coke-rv-img {
height: 110px;
background: #f7f7f7;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-bottom: 1px solid #f0f0f0;
position: relative;
}
.coke-rv-img img {
max-width: 100%;
max-height: 98px;
object-fit: contain;
padding: 8px;
transition: transform .28s ease;
}
.coke-rv-card:hover .coke-rv-img img { transform: scale(1.08); }
.coke-rv-badge {
position: absolute;
top: 7px;
left: 7px;
background: #FA740D;
color: #fff;
font-size: .56rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 999px;
}
.coke-rv-body {
padding: 10px 12px 12px;
flex: 1;
display: flex;
flex-direction: column;
}
.coke-rv-name {
font-size: .78rem;
font-weight: 700;
color: #1c1f24;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 6px;
flex: 1;
}
.coke-rv-price {
font-size: .95rem;
font-weight: 800;
color: #FA740D;
display: block;
margin-bottom: 8px;
}
.coke-rv-btn {
display: block;
padding: 7px;
background: #1c1f24;
color: #fff !important;
font-size: .68rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
text-align: center;
text-decoration: none !important;
border-radius: 6px;
transition: background .15s;
}
.coke-rv-btn:hover { background: #FA740D !important; color: #fff !important; }
/* ── SCROLL TO TOP ───────────────────────────────────────────── */
#coke-scroll-top {
position: fixed;
bottom: 28px;
right: 28px;
width: 44px;
height: 44px;
background: #FA740D;
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: 0 4px 16px rgba(250,116,13,.45);
opacity: 0;
transform: translateY(12px) scale(.85);
transition: opacity .25s, transform .25s, background .15s;
z-index: 999;
pointer-events: none;
}
#coke-scroll-top.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
#coke-scroll-top:hover { background: #c85c00; transform: translateY(-2px) scale(1.05); }
/* ── SKELETON SHIMMER ────────────────────────────────────────── */
@keyframes coke-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.coke-skeleton {
background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
background-size: 400% 100%;
animation: coke-shimmer 1.4s ease-in-out infinite;
border-radius: 10px;
}
.gb-card.coke-loading .gb-img,
.gb-card.coke-loading .gb-body,
.gb-card.coke-loading .gb-foot {
visibility: hidden;
}
.gb-card.coke-loading::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
background-size: 400% 100%;
animation: coke-shimmer 1.4s ease-in-out infinite;
border-radius: 10px;
}
.gb-card { position: relative; }
/* ══════════════════════════════════════════════════════════════
CART PAGE
══════════════════════════════════════════════════════════════ */
/* Hide sidebar on cart page — full width */
[data-programmode="viewcart"] .style_tomato_side_menu { display: none !important; }
[data-programmode="viewcart"] .style_tomato_wrapper {
flex: 0 0 100% !important;
max-width: 100% !important;
padding: 20px 32px !important;
background: #f5f5f5 !important;
}
/* ── PAGE HEADER ─────────────────────────────────────────────── */
[data-programmode="viewcart"] .style_tomato_wrapper h1 {
font-size: 1.6rem !important;
font-weight: 900 !important;
color: #1c1f24 !important;
margin-bottom: 6px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
[data-programmode="viewcart"] .style_tomato_wrapper h1::before {
content: '\f07a';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #FA740D;
font-size: 1.3rem;
}
/* ── TWO-COLUMN LAYOUT wrapper ───────────────────────────────── */
[data-programmode="viewcart"] .store_cart_page {
display: grid !important;
grid-template-columns: 1fr 320px !important;
gap: 24px !important;
align-items: start !important;
}
@media (max-width: 991px) {
[data-programmode="viewcart"] .store_cart_page {
grid-template-columns: 1fr !important;
}
}
/* ── CART ITEMS TABLE ────────────────────────────────────────── */
[data-programmode="viewcart"] .store_cart_items_wrapper,
[data-programmode="viewcart"] .cart_items_wrapper {
background: #fff !important;
border-radius: 12px !important;
border: 1px solid #ebebeb !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
/* Table header */
[data-programmode="viewcart"] table.table thead th {
background: #1c1f24 !important;
color: #fff !important;
font-size: .7rem !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
padding: 14px 16px !important;
border: none !important;
white-space: nowrap !important;
}
/* Table rows */
[data-programmode="viewcart"] table.table tbody tr {
border-bottom: 1px solid #f5f5f5 !important;
transition: background .15s !important;
}
[data-programmode="viewcart"] table.table tbody tr:hover { background: #fffaf5 !important; }
[data-programmode="viewcart"] table.table tbody tr:last-child { border-bottom: none !important; }
[data-programmode="viewcart"] table.table td {
padding: 16px !important;
vertical-align: middle !important;
border: none !important;
}
/* Product image in cart */
[data-programmode="viewcart"] table.table td img {
width: 72px !important;
height: 72px !important;
object-fit: contain !important;
border-radius: 8px !important;
border: 1px solid #f0f0f0 !important;
background: #fafafa !important;
padding: 4px !important;
}
/* Product name */
[data-programmode="viewcart"] .cart_product_name a,
[data-programmode="viewcart"] td a[href*="products"] {
font-size: .9rem !important;
font-weight: 700 !important;
color: #1c1f24 !important;
text-decoration: none !important;
line-height: 1.3 !important;
display: block !important;
}
[data-programmode="viewcart"] .cart_product_name a:hover,
[data-programmode="viewcart"] td a[href*="products"]:hover {
color: #FA740D !important;
}
/* SKU / part number */
[data-programmode="viewcart"] .cart_product_sku,
[data-programmode="viewcart"] .cart_part_number {
font-size: .72rem !important;
color: #999 !important;
font-weight: 600 !important;
margin-top: 3px !important;
}
/* Quantity input */
[data-programmode="viewcart"] input[name*="cart_qty"],
[data-programmode="viewcart"] .cart_quantity input,
[data-programmode="viewcart"] input.form-control[type="text"] {
width: 64px !important;
height: 38px !important;
border: 2px solid #e0e0e0 !important;
border-radius: 7px !important;
text-align: center !important;
font-size: .9rem !important;
font-weight: 700 !important;
color: #1c1f24 !important;
background: #fff !important;
transition: border-color .15s !important;
}
[data-programmode="viewcart"] input[name*="cart_qty"]:focus,
[data-programmode="viewcart"] input.form-control[type="text"]:focus {
border-color: #FA740D !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(250,116,13,.12) !important;
}
/* Update / remove buttons */
[data-programmode="viewcart"] .btn-outline-secondary,
[data-programmode="viewcart"] .cart_update_button,
[data-programmode="viewcart"] button[name*="update"] {
background: #fff !important;
border: 1.5px solid #ddd !important;
color: #555 !important;
border-radius: 6px !important;
font-size: .72rem !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
padding: 6px 12px !important;
transition: all .15s !important;
}
[data-programmode="viewcart"] .btn-outline-secondary:hover,
[data-programmode="viewcart"] .cart_update_button:hover {
border-color: #FA740D !important;
color: #FA740D !important;
background: #fff8f2 !important;
}
[data-programmode="viewcart"] .btn-outline-danger,
[data-programmode="viewcart"] .cart_remove_button,
[data-programmode="viewcart"] button[name*="remove"],
[data-programmode="viewcart"] a[href*="remove"] {
background: #fff !important;
border: 1.5px solid #f0c0c0 !important;
color: #cc3333 !important;
border-radius: 6px !important;
font-size: .72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
padding: 6px 12px !important;
transition: all .15s !important;
}
[data-programmode="viewcart"] .btn-outline-danger:hover,
[data-programmode="viewcart"] .cart_remove_button:hover {
background: #fff0f0 !important;
border-color: #cc3333 !important;
}
/* Price cells */
[data-programmode="viewcart"] .cart_item_price,
[data-programmode="viewcart"] .cart_item_total,
[data-programmode="viewcart"] td.text-right {
font-size: 1rem !important;
font-weight: 800 !important;
color: #FA740D !important;
white-space: nowrap !important;
}
/* ── ORDER SUMMARY CARD ──────────────────────────────────────── */
[data-programmode="viewcart"] .store_cart_summary,
[data-programmode="viewcart"] .cart_summary_wrapper,
[data-programmode="viewcart"] .cart_order_summary {
background: #fff !important;
border-radius: 12px !important;
border: 1px solid #ebebeb !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
position: sticky !important;
top: 20px !important;
}
/* Summary header */
[data-programmode="viewcart"] .store_cart_summary h2,
[data-programmode="viewcart"] .store_cart_summary h3,
[data-programmode="viewcart"] .cart_summary_wrapper h2,
[data-programmode="viewcart"] .cart_summary_wrapper h3 {
background: #1c1f24 !important;
color: #fff !important;
font-size: .78rem !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
padding: 14px 18px !important;
margin: 0 !important;
}
/* Summary rows */
[data-programmode="viewcart"] .cart_summary_row,
[data-programmode="viewcart"] .store_cart_summary .row,
[data-programmode="viewcart"] .cart_subtotal_row,
[data-programmode="viewcart"] .cart_tax_row,
[data-programmode="viewcart"] .cart_shipping_row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 10px 18px !important;
font-size: .85rem !important;
border-bottom: 1px solid #f5f5f5 !important;
color: #555 !important;
}
/* Grand total row */
[data-programmode="viewcart"] .cart_grand_total,
[data-programmode="viewcart"] .cart_total_row,
[data-programmode="viewcart"] .store_cart_total {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 14px 18px !important;
font-size: 1.1rem !important;
font-weight: 900 !important;
color: #1c1f24 !important;
background: #f9f9f9 !important;
border-top: 2px solid #FA740D !important;
}
[data-programmode="viewcart"] .cart_grand_total .amount,
[data-programmode="viewcart"] .cart_total_amount {
color: #FA740D !important;
font-size: 1.3rem !important;
}
/* Checkout button */
[data-programmode="viewcart"] .btn-primary.checkout_button,
[data-programmode="viewcart"] a[href*="checkout"].btn,
[data-programmode="viewcart"] button[name*="checkout"],
[data-programmode="viewcart"] input[value*="Checkout"],
[data-programmode="viewcart"] .store_cart_summary .btn-primary,
[data-programmode="viewcart"] .cart_summary_wrapper .btn-primary {
display: block !important;
width: calc(100% - 36px) !important;
margin: 14px 18px !important;
padding: 15px !important;
background: #FA740D !important;
border: none !important;
border-radius: 8px !important;
color: #fff !important;
font-size: .9rem !important;
font-weight: 900 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
text-align: center !important;
text-decoration: none !important;
cursor: pointer !important;
transition: background .15s, transform .12s, box-shadow .15s !important;
box-shadow: 0 3px 12px rgba(250,116,13,.35) !important;
}
[data-programmode="viewcart"] .store_cart_summary .btn-primary:hover,
[data-programmode="viewcart"] .cart_summary_wrapper .btn-primary:hover {
background: #c85c00 !important;
transform: translateY(-1px) !important;
box-shadow: 0 5px 16px rgba(250,116,13,.5) !important;
color: #fff !important;
}
/* Continue shopping link */
[data-programmode="viewcart"] .continue_shopping,
[data-programmode="viewcart"] a[href*="departments"].btn,
[data-programmode="viewcart"] .cart_continue_shopping {
display: block !important;
text-align: center !important;
padding: 0 18px 14px !important;
font-size: .76rem !important;
color: #888 !important;
text-decoration: none !important;
transition: color .15s !important;
}
[data-programmode="viewcart"] .continue_shopping:hover { color: #FA740D !important; }
/* ── EMPTY CART STATE ────────────────────────────────────────── */
[data-programmode="viewcart"] .store_cart_empty,
[data-programmode="viewcart"] .cart_empty_message {
text-align: center !important;
padding: 60px 20px !important;
background: #fff !important;
border-radius: 12px !important;
border: 1px solid #ebebeb !important;
}
/* ── PROMO / COUPON SECTION ──────────────────────────────────── */
[data-programmode="viewcart"] .cart_coupon_wrapper,
[data-programmode="viewcart"] .store_cart_promo {
padding: 12px 18px !important;
border-top: 1px solid #f0f0f0 !important;
}
[data-programmode="viewcart"] .cart_coupon_wrapper input[type="text"] {
border: 1.5px solid #e0e0e0 !important;
border-radius: 7px 0 0 7px !important;
padding: 8px 12px !important;
font-size: .82rem !important;
}
[data-programmode="viewcart"] .cart_coupon_wrapper .btn {
border-radius: 0 7px 7px 0 !important;
background: #1c1f24 !important;
color: #fff !important;
border: none !important;
font-size: .78rem !important;
font-weight: 700 !important;
}
/* Trust badges below checkout */
[data-programmode="viewcart"] .coke-cart-trust {
display: flex !important;
justify-content: center !important;
gap: 16px !important;
padding: 10px 18px 16px !important;
flex-wrap: wrap !important;
}
[data-programmode="viewcart"] .coke-cart-trust-item {
display: flex !important;
align-items: center !important;
gap: 5px !important;
font-size: .66rem !important;
color: #aaa !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
}
[data-programmode="viewcart"] .coke-cart-trust-item .fas {
color: #FA740D !important;
font-size: 12px !important;
}
@media (max-width: 575px) {
[data-programmode="viewcart"] .style_tomato_wrapper { padding: 12px 14px !important; }
[data-programmode="viewcart"] table.table td { padding: 10px 8px !important; }
[data-programmode="viewcart"] table.table td img { width: 50px !important; height: 50px !important; }
}
/* ── CART BOTTOM SECTION (total + PO + checkout) ─────────────── */
.coke-cart .store_cart_page .cart_totals_wrapper,
.coke-cart .store_cart_totals,
.coke-cart table tfoot {
background: #f9f9f9 !important;
border-top: 3px solid #FA740D !important;
}
.coke-cart .cart_total_label,
.coke-cart table tfoot td:first-child {
font-size: .85rem !important;
font-weight: 700 !important;
color: #555 !important;
padding: 14px 16px !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
}
.coke-cart .cart_total_amount,
.coke-cart table tfoot td.text-right,
.coke-cart table tfoot td:last-child {
font-size: 1.3rem !important;
font-weight: 900 !important;
color: #FA740D !important;
padding: 14px 16px !important;
text-align: right !important;
}
/* PO# field */
.coke-cart input[name*="po_number"],
.coke-cart input[placeholder*="PO"],
.coke-cart input[placeholder*="Enter PO"] {
border: 2px solid #e0e0e0 !important;
border-radius: 7px !important;
padding: 9px 14px !important;
font-size: .88rem !important;
color: #1c1f24 !important;
transition: border-color .15s !important;
}
.coke-cart input[name*="po_number"]:focus,
.coke-cart input[placeholder*="PO"]:focus {
border-color: #FA740D !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(250,116,13,.12) !important;
}
/* Checkout button at page bottom */
.coke-cart input[value="CHECKOUT"],
.coke-cart input[value="Checkout"],
.coke-cart button[value="Checkout"],
.coke-cart a.btn[href*="checkout"] {
background: #FA740D !important;
border: none !important;
border-radius: 8px !important;
color: #fff !important;
font-size: .9rem !important;
font-weight: 900 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
padding: 14px 32px !important;
cursor: pointer !important;
box-shadow: 0 3px 14px rgba(250,116,13,.4) !important;
transition: background .15s, box-shadow .15s, transform .12s !important;
}
.coke-cart input[value="CHECKOUT"]:hover,
.coke-cart input[value="Checkout"]:hover {
background: #c85c00 !important;
box-shadow: 0 5px 18px rgba(250,116,13,.55) !important;
transform: translateY(-1px) !important;
}
/* Cart item rows — cleaner separators */
.coke-cart .store_cart_page tbody tr,
.coke-cart .store_shopping_cart_page tbody tr {
border-bottom: 1px solid #f0f0f0 !important;
transition: background .15s !important;
}
.coke-cart .store_cart_page tbody tr:hover {
background: #fffaf5 !important;
}
/* Update / action buttons row */
.coke-cart .cart_buttons_row,
.coke-cart .store_cart_buttons {
padding: 14px 0 !important;
border-top: 1px solid #f0f0f0 !important;
display: flex !important;
gap: 10px !important;
align-items: center !important;
}
/* ══════════════════════════════════════════════════════════════
LOGIN / ACCOUNT PAGE
══════════════════════════════════════════════════════════════ */
/* Full width — no sidebar needed */
[data-programmode="login"] .style_tomato_side_menu,
.coke-login .style_tomato_side_menu,
.store_login_page ~ * .style_tomato_side_menu {
display: none !important;
}
[data-programmode="login"] .style_tomato_wrapper,
.coke-login .style_tomato_wrapper {
flex: 0 0 100% !important;
max-width: 100% !important;
background: #f5f5f5 !important;
padding: 40px !important;
}
/* ── PAGE LAYOUT — two column: login left, register/info right ── */
.coke-login-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 960px;
margin: 0 auto;
}
@media (max-width: 767px) {
.coke-login-grid { grid-template-columns: 1fr; }
[data-programmode="login"] .style_tomato_wrapper,
.coke-login .style_tomato_wrapper { padding: 20px 16px !important; }
}
/* ── CARD BASE ───────────────────────────────────────────────── */
.coke-login-card {
background: #fff;
border-radius: 12px;
border: 1px solid #ebebeb;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
overflow: hidden;
animation: coke-promo-in .45s cubic-bezier(.22,.68,0,1.15) both;
}
.coke-login-card:nth-child(2) { animation-delay: .08s; }
/* Card header */
.coke-login-card-header {
background: #1c1f24;
padding: 18px 24px;
display: flex;
align-items: center;
gap: 12px;
}
.coke-login-card-header.orange { background: #FA740D; }
.coke-login-card-header .fas {
color: #FA740D;
font-size: 18px;
}
.coke-login-card-header.orange .fas { color: #fff; }
.coke-login-card-title {
font-size: .8rem;
font-weight: 800;
color: #fff;
text-transform: uppercase;
letter-spacing: .1em;
display: block;
}
.coke-login-card-sub {
font-size: .7rem;
color: rgba(255,255,255,.55);
display: block;
margin-top: 2px;
}
/* Card body */
.coke-login-card-body { padding: 24px; }
/* ── FORM ELEMENTS ───────────────────────────────────────────── */
.coke-login-label {
display: block;
font-size: .72rem;
font-weight: 800;
color: #555;
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: 6px;
}
.coke-login-input {
display: block;
width: 100%;
padding: 12px 14px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: .92rem;
color: #1c1f24;
background: #fff;
margin-bottom: 16px;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
font-family: inherit;
}
.coke-login-input:focus {
border-color: #FA740D;
outline: none;
box-shadow: 0 0 0 3px rgba(250,116,13,.12);
}
/* Login button */
.coke-login-btn {
display: block;
width: 100%;
padding: 14px;
background: #FA740D;
color: #fff !important;
font-size: .88rem;
font-weight: 900;
letter-spacing: .07em;
text-transform: uppercase;
text-align: center;
text-decoration: none !important;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 3px 12px rgba(250,116,13,.35);
transition: background .15s, transform .12s, box-shadow .15s;
margin-top: 4px;
font-family: inherit;
}
.coke-login-btn:hover {
background: #c85c00 !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 5px 16px rgba(250,116,13,.5);
}
/* Secondary button — outline */
.coke-login-btn-outline {
display: block;
width: 100%;
padding: 13px;
background: #fff;
color: #1c1f24 !important;
font-size: .88rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
text-align: center;
text-decoration: none !important;
border: 2px solid #1c1f24;
border-radius: 8px;
cursor: pointer;
transition: background .15s, color .15s;
margin-top: 10px;
font-family: inherit;
}
.coke-login-btn-outline:hover {
background: #1c1f24 !important;
color: #fff !important;
}
/* Forgot password link */
.coke-login-forgot {
display: block;
text-align: center;
font-size: .76rem;
color: #aaa;
text-decoration: none !important;
margin-top: 14px;
transition: color .15s;
}
.coke-login-forgot:hover { color: #FA740D !important; }
/* ── INFO ROWS (benefits list) ───────────────────────────────── */
.coke-login-benefit {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #f5f5f5;
}
.coke-login-benefit:last-child { border-bottom: none; padding-bottom: 0; }
.coke-login-benefit-icon {
width: 36px;
height: 36px;
background: #fff4ec;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.coke-login-benefit-icon .fas { color: #FA740D; font-size: 14px; }
.coke-login-benefit-title {
font-size: .84rem;
font-weight: 700;
color: #1c1f24;
display: block;
line-height: 1.2;
}
.coke-login-benefit-sub {
font-size: .74rem;
color: #888;
display: block;
margin-top: 2px;
line-height: 1.4;
}
/* ── CONTRACTOR CALLOUT CARD ─────────────────────────────────── */
.coke-login-contractor {
background: #1c1f24;
border-radius: 12px;
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-top: 24px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
animation: coke-promo-in .45s .16s cubic-bezier(.22,.68,0,1.15) both;
}
.coke-login-contractor-left {
display: flex;
align-items: center;
gap: 14px;
}
.coke-login-contractor-icon {
width: 44px;
height: 44px;
background: #FA740D;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.coke-login-contractor-icon .fas { color: #fff; font-size: 18px; }
.coke-login-contractor-title {
font-size: .95rem;
font-weight: 800;
color: #fff;
display: block;
}
.coke-login-contractor-sub {
font-size: .76rem;
color: #888;
display: block;
margin-top: 2px;
}
.coke-login-contractor-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 11px 22px;
background: #FA740D;
color: #fff !important;
font-size: .8rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 8px;
white-space: nowrap;
flex-shrink: 0;
transition: background .15s, transform .12s;
}
.coke-login-contractor-btn:hover {
background: #c85c00 !important;
color: #fff !important;
transform: translateY(-2px);
}
/* Hide the default login page content once we inject ours */
.coke-login-injected .login_page,
.coke-login-injected .store_login_page { display: none !important; }
/* ══════════════════════════════════════════════════════════════
SEARCH RESULTS — EMPTY STATE & ENHANCEMENTS
══════════════════════════════════════════════════════════════ */
/* ── RESULTS HEADER BAR ──────────────────────────────────────── */
.coke-search-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
background: #1c1f24;
border-radius: 10px;
padding: 14px 20px;
margin-bottom: 20px;
animation: coke-promo-in .4s cubic-bezier(.22,.68,0,1.15) both;
}
.coke-search-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.coke-search-header-left .fas { color: #FA740D; font-size: 16px; }
.coke-search-query {
font-size: .82rem;
font-weight: 500;
color: #aaa;
display: block;
}
.coke-search-query strong { color: #FA740D; font-weight: 800; }
.coke-search-count {
font-size: .72rem;
font-weight: 600;
color: #555;
background: rgba(255,255,255,.08);
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
/* ── NO RESULTS PAGE ─────────────────────────────────────────── */
#coke-no-results {
background: #fff;
border-radius: 12px;
border: 1px solid #ebebeb;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
overflow: hidden;
animation: coke-promo-in .45s cubic-bezier(.22,.68,0,1.15) both;
}
/* Top orange strip */
.coke-no-results-top {
background: #FA740D;
padding: 28px 32px;
text-align: center;
position: relative;
overflow: hidden;
}
.coke-no-results-top::before,
.coke-no-results-top::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,.08);
}
.coke-no-results-top::before { width: 160px; height: 160px; top: -60px; right: -40px; }
.coke-no-results-top::after { width: 100px; height: 100px; bottom: -40px; left: 20%; }
.coke-no-results-icon {
width: 64px;
height: 64px;
background: rgba(255,255,255,.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
.coke-no-results-icon .fas { color: #fff; font-size: 26px; }
.coke-no-results-title {
font-size: 1.3rem;
font-weight: 900;
color: #fff;
display: block;
margin-bottom: 6px;
letter-spacing: -.01em;
}
.coke-no-results-sub {
font-size: .84rem;
color: rgba(255,255,255,.8);
display: block;
}
/* Tips section */
.coke-no-results-tips {
padding: 24px 32px;
border-bottom: 1px solid #f0f0f0;
}
.coke-no-results-tips-title {
font-size: .7rem;
font-weight: 800;
color: #aaa;
text-transform: uppercase;
letter-spacing: .1em;
display: block;
margin-bottom: 14px;
}
.coke-no-results-tip {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
font-size: .82rem;
color: #555;
}
.coke-no-results-tip .fas { color: #FA740D; font-size: 12px; width: 14px; flex-shrink: 0; }
/* Search again box */
.coke-no-results-search {
padding: 20px 32px;
border-bottom: 1px solid #f0f0f0;
}
.coke-no-results-search-label {
font-size: .72rem;
font-weight: 800;
color: #555;
text-transform: uppercase;
letter-spacing: .07em;
display: block;
margin-bottom: 10px;
}
.coke-no-results-search-row {
display: flex;
gap: 0;
border: 2px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: border-color .15s;
}
.coke-no-results-search-row:focus-within { border-color: #FA740D; }
.coke-no-results-search-input {
flex: 1;
border: none;
outline: none;
padding: 11px 16px;
font-size: .9rem;
color: #1c1f24;
background: #fff;
font-family: inherit;
}
.coke-no-results-search-btn {
background: #FA740D;
border: none;
color: #fff;
padding: 0 20px;
font-size: .82rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
cursor: pointer;
transition: background .15s;
display: flex;
align-items: center;
gap: 7px;
font-family: inherit;
}
.coke-no-results-search-btn:hover { background: #c85c00; }
/* Popular category links */
.coke-no-results-cats {
padding: 20px 32px 24px;
}
.coke-no-results-cats-title {
font-size: .7rem;
font-weight: 800;
color: #aaa;
text-transform: uppercase;
letter-spacing: .1em;
display: block;
margin-bottom: 12px;
}
.coke-no-results-cat-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.coke-no-results-cat-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1.5px solid #FA740D;
border-radius: 999px;
color: #FA740D !important;
font-size: .76rem;
font-weight: 700;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: .04em;
transition: background .15s, color .15s, transform .12s;
}
.coke-no-results-cat-chip:hover {
background: #FA740D !important;
color: #fff !important;
transform: translateY(-1px);
}
.coke-no-results-cat-chip .fas { font-size: 10px; }
/* Contact strip */
.coke-no-results-contact {
background: #1c1f24;
padding: 16px 32px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.coke-no-results-contact-text {
font-size: .8rem;
color: #aaa;
}
.coke-no-results-contact-text strong { color: #fff; }
.coke-no-results-contact-btns {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.coke-no-results-contact-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: #FA740D;
color: #fff !important;
font-size: .76rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 7px;
transition: background .15s;
}
.coke-no-results-contact-btn:hover { background: #c85c00 !important; color: #fff !important; }
.coke-no-results-contact-btn.outline {
background: transparent;
border: 1.5px solid rgba(255,255,255,.2);
color: #ccc !important;
}
.coke-no-results-contact-btn.outline:hover {
background: rgba(255,255,255,.08) !important;
color: #fff !important;
}
/* ══════════════════════════════════════════════════════════════
PRINT STYLESHEET
══════════════════════════════════════════════════════════════ */
@media print {
/* ── HIDE EVERYTHING NON-ESSENTIAL ────────────────────────── */
.style_tomato_header,
.style_tomato_top_menu,
.style_theme_tiptop,
.style_tomato_side_menu,
.style_tomato_footer,
#coke-ticker,
#coke-scroll-top,
.coke-promo-card,
#coke-dept-banner,
.coke-midgrid-promo,
#coke-upsell,
#coke-contractor-callout,
.recently_viewed_products_wrapper,
.store_results_navigation_top_wrapper,
.store_results_navigation_bottom_wrapper,
#tomato-per-page,
.breadcrumbs,
.store_product_cart,
.store_product_list,
.gb-foot,
.gb-form,
.add_to_cart_button,
.add_to_list_button,
.nav-tabs,
.refine_filter_selection,
.coke-search-header,
#coke-no-results .coke-no-results-search,
#coke-no-results .coke-no-results-contact,
.purchase_buttons_modal,
.offcanvas_overlay,
#coke-scroll-top,
#coke-recently-viewed { display: none !important; }
/* ── PAGE SETUP ──────────────────────────────────────────── */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
body, html { background: #fff !important; font-size: 11pt !important; }
.style_tomato_container { display: block !important; }
.style_tomato_body { display: block !important; }
.style_tomato_body > .row { display: block !important; }
.style_tomato_wrapper {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
flex: none !important;
background: #fff !important;
}
/* ── PRINT HEADER ────────────────────────────────────────── */
.style_tomato_wrapper::before {
content: '';
display: block;
background: #FA740D;
height: 6px;
width: 100%;
margin-bottom: 16px;
}
.style_tomato_wrapper::after {
content: "Builder's Supply & Home Center | 1155 S Lyons, Airway Heights WA 99001 | (509) 798-8545 | bldrsupply.epicor-inet.com";
display: block;
font-size: 8pt;
color: #888;
border-top: 1px solid #e0e0e0;
padding-top: 8px;
margin-top: 24px;
text-align: center;
}
/* ── PRODUCT DETAIL PAGE ─────────────────────────────────── */
.product_detail_solo_page h1 {
font-size: 18pt !important;
font-weight: 800 !important;
color: #1c1f24 !important;
margin-bottom: 8px !important;
border-bottom: 2px solid #FA740D !important;
padding-bottom: 8px !important;
}
.product_detail_solo_page .partnumbers {
font-size: 9pt !important;
color: #555 !important;
margin-bottom: 12px !important;
}
.product_detail_solo_page .availability {
font-size: 10pt !important;
font-weight: 700 !important;
margin-bottom: 12px !important;
}
.product_images {
max-height: 260px !important;
page-break-inside: avoid !important;
}
.product_image_wrapper .product_image {
max-height: 240px !important;
width: auto !important;
}
/* Price — keep orange for color printers, dark for B&W */
.product_price, .product_price strong,
.gb-price { color: #FA740D !important; font-size: 16pt !important; font-weight: 900 !important; }
/* Description / specs tabs */
.tab-content { display: block !important; }
.tab-pane { display: block !important; opacity: 1 !important; }
.tab-pane + .tab-pane { border-top: 1px solid #eee !important; padding-top: 12px !important; margin-top: 12px !important; }
.nav-tabs { display: none !important; }
/* Quantity breaks table */
.quantity_breaks_wrapper { page-break-inside: avoid !important; }
.quantity_breaks_wrapper table { width: 100% !important; border-collapse: collapse !important; font-size: 9pt !important; }
.quantity_breaks_wrapper th {
background: #1c1f24 !important;
color: #fff !important;
padding: 6px 10px !important;
text-align: left !important;
}
.quantity_breaks_wrapper td { padding: 5px 10px !important; border-bottom: 1px solid #eee !important; }
/* ── PRODUCT GRID PAGES (category/search) ────────────────── */
.gb-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
page-break-inside: auto !important;
}
.gb-card {
border: 1px solid #ddd !important;
border-radius: 6px !important;
page-break-inside: avoid !important;
box-shadow: none !important;
}
.gb-img { height: 120px !important; }
.gb-img img { max-height: 110px !important; }
.gb-name a { color: #1c1f24 !important; }
.gb-sku a { color: #888 !important; }
/* ── CART PAGE ───────────────────────────────────────────── */
.store_cart_page table { width: 100% !important; border-collapse: collapse !important; font-size: 10pt !important; }
.store_cart_page thead th {
background: #1c1f24 !important;
color: #fff !important;
padding: 8px 10px !important;
text-align: left !important;
}
.store_cart_page tbody td { padding: 8px 10px !important; border-bottom: 1px solid #eee !important; }
.store_cart_page tfoot td {
font-weight: 800 !important;
padding: 10px !important;
border-top: 2px solid #FA740D !important;
}
/* ── LINKS ───────────────────────────────────────────────── */
a[href]::after {
content: none !important; /* don't print URLs — too noisy */
}
/* ── PAGE BREAKS ─────────────────────────────────────────── */
h1, h2, h3 { page-break-after: avoid !important; }
img { page-break-inside: avoid !important; }
table { page-break-inside: auto !important; }
tr { page-break-inside: avoid !important; }
}
/* ══════════════════════════════════════════════════════════════
PRINT STYLESHEET
══════════════════════════════════════════════════════════════ */
@media print {
/* ── HIDE EVERYTHING NOT NEEDED ─────────────────────────────── */
.style_tomato_header,
.style_tomato_top_menu,
.style_theme_tiptop,
.style_tomato_side_menu,
.style_tomato_footer,
#coke-ticker,
#coke-scroll-top,
.coke-promo-card,
#coke-dept-banner,
.coke-midgrid-promo,
#coke-upsell,
#coke-contractor-callout,
#coke-recently-viewed,
.store_results_pagination,
.store_results_navigation_top_wrapper,
.store_results_navigation_bottom_wrapper,
.breadcrumbs,
.refine_filter_selection,
.add_to_cart_button,
.add_to_list_button,
.gb-foot,
.gb-form,
.product_form_buttons,
#coke-per-page,
#tomato-per-page,
.coke-rollup-pagination,
nav,
button,
.btn,
#offcanvas_overlay,
.recently_viewed_products_wrapper { display: none !important; }
/* ── PAGE SETUP ──────────────────────────────────────────────── */
@page {
margin: 1.5cm 2cm;
size: A4;
}
* { box-shadow: none !important; text-shadow: none !important; }
body { background: #fff !important; color: #000 !important; font-size: 11pt; }
/* ── LAYOUT — full width single column ───────────────────────── */
.style_tomato_container,
.style_tomato_body,
.style_tomato_body > .row,
.style_tomato_wrapper {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
background: #fff !important;
flex: none !important;
}
/* ── PRINT HEADER — store branding at top ────────────────────── */
.style_tomato_wrapper::before {
content: "Builder's Supply & Home Center | 1155 S Lyons, Airway Heights WA 99001 | (509) 798-8545 | bldrsupply.com";
display: block;
font-size: 8.5pt;
font-weight: 600;
color: #555;
border-bottom: 2px solid #FA740D;
padding-bottom: 8px;
margin-bottom: 18px;
letter-spacing: .01em;
}
/* ── PRODUCT DETAIL PAGE ─────────────────────────────────────── */
.product_detail_solo_page { page-break-inside: avoid; }
.product_detail_solo_page h1 {
font-size: 18pt !important;
font-weight: 800 !important;
color: #000 !important;
margin-bottom: 6pt !important;
border-bottom: 1px solid #ddd;
padding-bottom: 6pt;
}
.product_detail_solo_page .partnumbers {
font-size: 9pt !important;
color: #444 !important;
margin-bottom: 10pt !important;
}
.product_detail_solo_page .partnumbers li {
border-left-color: #999 !important;
}
.product_detail_solo_page .availability {
font-size: 10pt !important;
font-weight: 700 !important;
margin-bottom: 8pt !important;
}
/* Product image — keep it reasonable size */
.product_images, .product_image_wrapper {
max-width: 220px !important;
margin: 0 auto 16pt !important;
float: left !important;
margin-right: 20pt !important;
}
.product_image_wrapper .product_image { max-height: 200px !important; }
/* Price — make it stand out */
.product_price, .store_product_price {
font-size: 16pt !important;
font-weight: 900 !important;
color: #000 !important;
}
/* Description / specs tabs — show all content */
.nav-tabs { display: none !important; }
.tab-content .tab-pane {
display: block !important;
opacity: 1 !important;
page-break-inside: avoid;
}
.tab-content .tab-pane + .tab-pane {
border-top: 1px solid #ddd;
padding-top: 10pt;
margin-top: 10pt;
}
/* Quantity breaks table */
.quantity_breaks_wrapper {
font-size: 9pt !important;
page-break-inside: avoid;
}
.quantity_breaks_wrapper table { width: 100% !important; }
.quantity_breaks_wrapper th {
background: #f0f0f0 !important;
color: #000 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* ── PRODUCT GRID PAGES (category / search) ──────────────────── */
.gb-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 10pt !important;
}
.gb-card {
border: 1px solid #ddd !important;
border-radius: 4px !important;
page-break-inside: avoid;
break-inside: avoid;
}
.gb-img { height: 100px !important; }
.gb-img img { max-height: 90px !important; }
.gb-name a { color: #000 !important; font-size: 8.5pt !important; }
.gb-price { color: #000 !important; font-size: 11pt !important; }
.gb-sku a { color: #555 !important; }
.gb-avail { font-size: 7.5pt !important; }
/* ── LINKS — show URLs for important ones ────────────────────── */
a[href]:after { content: none !important; } /* suppress default link printing */
.product_detail_solo_page a[href]:after {
content: " (" attr(href) ")";
font-size: 7pt;
color: #888;
}
/* ── PRINT FOOTER ─────────────────────────────────────────────── */
.style_tomato_wrapper::after {
content: "Printed from bldrsupply.com | Prices subject to change | Contractor accounts available \2014 call (509) 798-8545";
display: block;
font-size: 7.5pt;
color: #888;
border-top: 1px solid #ddd;
padding-top: 8px;
margin-top: 24pt;
text-align: center;
}
/* ── COLOR PRESERVATION ──────────────────────────────────────── */
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* ══════════════════════════════════════════════════════════════
404 / ERROR PAGE
══════════════════════════════════════════════════════════════ */
.coke-404 .style_tomato_side_menu { display: none !important; }
.coke-404 .style_tomato_wrapper {
flex: 0 0 100% !important;
max-width: 100% !important;
background: #f5f5f5 !important;
padding: 60px 40px !important;
}
#coke-404-page {
max-width: 640px;
margin: 0 auto;
text-align: center;
animation: coke-promo-in .5s cubic-bezier(.22,.68,0,1.2) both;
}
/* Big 404 number */
.coke-404-number {
font-size: 7rem;
font-weight: 900;
color: #FA740D;
line-height: 1;
display: block;
letter-spacing: -.04em;
margin-bottom: 8px;
position: relative;
}
.coke-404-number::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: #FA740D;
border-radius: 2px;
margin: 12px auto 0;
}
.coke-404-title {
font-size: 1.6rem;
font-weight: 900;
color: #1c1f24;
display: block;
margin: 20px 0 10px;
letter-spacing: -.01em;
}
.coke-404-sub {
font-size: .92rem;
color: #777;
display: block;
line-height: 1.6;
margin-bottom: 32px;
}
/* Search box */
.coke-404-search {
background: #fff;
border-radius: 12px;
border: 1px solid #ebebeb;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
padding: 20px 24px;
margin-bottom: 24px;
text-align: left;
}
.coke-404-search-label {
font-size: .7rem;
font-weight: 800;
color: #aaa;
text-transform: uppercase;
letter-spacing: .1em;
display: block;
margin-bottom: 10px;
}
.coke-404-search-row {
display: flex;
border: 2px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: border-color .15s;
}
.coke-404-search-row:focus-within { border-color: #FA740D; }
.coke-404-search-input {
flex: 1;
border: none;
outline: none;
padding: 12px 16px;
font-size: .9rem;
color: #1c1f24;
background: #fff;
font-family: inherit;
}
.coke-404-search-btn {
background: #FA740D;
border: none;
color: #fff;
padding: 0 22px;
font-size: .82rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
cursor: pointer;
transition: background .15s;
display: flex;
align-items: center;
gap: 7px;
font-family: inherit;
white-space: nowrap;
}
.coke-404-search-btn:hover { background: #c85c00; }
/* Quick action buttons */
.coke-404-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 28px;
}
.coke-404-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: #1c1f24;
color: #fff !important;
font-size: .82rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 8px;
transition: background .15s, transform .12s;
}
.coke-404-btn:hover {
background: #FA740D !important;
color: #fff !important;
transform: translateY(-2px);
}
.coke-404-btn.outline {
background: #fff;
color: #1c1f24 !important;
border: 2px solid #ddd;
}
.coke-404-btn.outline:hover {
border-color: #FA740D !important;
color: #FA740D !important;
background: #fff !important;
}
/* Contact strip */
.coke-404-contact {
background: #1c1f24;
border-radius: 10px;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
text-align: left;
}
.coke-404-contact-text {
font-size: .8rem;
color: #aaa;
}
.coke-404-contact-text strong { color: #fff; }
.coke-404-contact-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: #FA740D;
color: #fff !important;
font-size: .76rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 7px;
transition: background .15s;
white-space: nowrap;
flex-shrink: 0;
}
.coke-404-contact-link:hover { background: #c85c00 !important; color: #fff !important; }
@media (max-width: 575px) {
.coke-404-number { font-size: 5rem; }
.coke-404-title { font-size: 1.3rem; }
.coke-404 .style_tomato_wrapper { padding: 40px 16px !important; }
.coke-404-contact { flex-direction: column; align-items: flex-start; }
}
/* ══════════════════════════════════════════════════════════════
BREADCRUMB — MOBILE FIX
══════════════════════════════════════════════════════════════ */
/* Desktop — full breadcrumb already styled as pill buttons */
/* Mobile — collapse to last 2 crumbs with a "..." prefix */
@media (max-width: 767px) {
/* Show only last 2 items on mobile */
.breadcrumb-item { display: none !important; }
.breadcrumb-item:nth-last-child(1),
.breadcrumb-item:nth-last-child(2) { display: flex !important; }
/* Show ellipsis before the truncated trail */
.breadcrumb-item:nth-last-child(2):not(:first-child)::before {
content: '\2026' !important;
color: #bbb !important;
padding: 0 4px !important;
font-size: .8rem !important;
}
/* Tighten up pill size on mobile */
.breadcrumb-item a {
font-size: .72rem !important;
padding: 4px 10px !important;
max-width: 160px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
display: inline-block !important;
}
.breadcrumb-item strong {
font-size: .72rem !important;
max-width: 160px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
display: inline-block !important;
}
/* Stack breadcrumb on very small screens */
@media (max-width: 360px) {
.breadcrumb-item a { max-width: 120px !important; }
.breadcrumb-item strong { max-width: 120px !important; }
}
}
/* ── DESKTOP — breadcrumb refinements ────────────────────────── */
@media (min-width: 768px) {
/* Truncate very long category names */
.breadcrumb-item a {
max-width: 200px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.breadcrumb-item strong {
max-width: 240px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
display: inline-block !important;
vertical-align: middle !important;
}
}
/* Wrap the breadcrumb row so it scrolls horizontally on tiny screens
rather than breaking layout */
.breadcrumbs {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding-bottom: 2px !important;
}
.breadcrumbs::-webkit-scrollbar { display: none !important; }
.breadcrumb { flex-wrap: nowrap !important; }
/* ══════════════════════════════════════════════════════════════
HOME PAGE — MID-GRID STRIP + WHY SHOP WITH US
══════════════════════════════════════════════════════════════ */
/* ── MID-DEPT-GRID PROMO STRIP ───────────────────────────────── */
#coke-home-midstrip {
grid-column: 1 / -1;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(0,0,0,.12);
animation: coke-promo-in .4s cubic-bezier(.22,.68,0,1.15) both;
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 767px) {
#coke-home-midstrip { grid-template-columns: 1fr; }
}
.coke-home-midstrip-left {
background: #FA740D;
padding: 28px 32px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.coke-home-midstrip-left::before {
content: '';
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
background: rgba(255,255,255,.08);
top: -60px; right: -50px;
}
.coke-home-midstrip-left::after {
content: '';
position: absolute;
width: 120px; height: 120px;
border-radius: 50%;
background: rgba(255,255,255,.06);
bottom: -40px; left: 30%;
}
.coke-home-midstrip-eyebrow {
font-size: .65rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
display: block;
margin-bottom: 6px;
}
.coke-home-midstrip-headline {
font-size: 1.6rem;
font-weight: 900;
color: #fff;
line-height: 1.1;
letter-spacing: -.02em;
display: block;
margin-bottom: 10px;
}
.coke-home-midstrip-sub {
font-size: .82rem;
color: rgba(255,255,255,.8);
display: block;
margin-bottom: 20px;
line-height: 1.5;
}
.coke-home-midstrip-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: #1c1f24;
color: #fff !important;
font-size: .8rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 8px;
align-self: flex-start;
transition: background .15s, transform .12s;
}
.coke-home-midstrip-btn:hover {
background: #000 !important;
color: #fff !important;
transform: translateY(-2px);
}
.coke-home-midstrip-right {
background: #1c1f24;
padding: 28px 32px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
.coke-home-midstrip-row {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.coke-home-midstrip-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.coke-home-midstrip-icon {
width: 40px;
height: 40px;
background: rgba(250,116,13,.15);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.coke-home-midstrip-icon .fas { color: #FA740D; font-size: 16px; }
.coke-home-midstrip-row-title {
font-size: .86rem;
font-weight: 700;
color: #fff;
display: block;
line-height: 1.2;
}
.coke-home-midstrip-row-sub {
font-size: .74rem;
color: #777;
display: block;
margin-top: 2px;
}
/* ── WHY SHOP WITH US ────────────────────────────────────────── */
#coke-why-us {
margin-top: 32px;
animation: coke-promo-in .5s .1s cubic-bezier(.22,.68,0,1.15) both;
}
.coke-why-us-header {
text-align: center;
margin-bottom: 24px;
}
.coke-why-us-eyebrow {
display: block;
font-size: .66rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #FA740D;
margin-bottom: 6px;
}
.coke-why-us-title {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: #1c1f24;
letter-spacing: -.02em;
line-height: 1.15;
}
.coke-why-us-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 20px;
}
@media (max-width: 991px) { .coke-why-us-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .coke-why-us-grid { grid-template-columns: 1fr; } }
.coke-why-card {
background: #fff;
border: 1px solid #ebebeb;
border-radius: 12px;
padding: 22px 20px;
text-align: center;
transition: box-shadow .2s, transform .2s;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.coke-why-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.1);
transform: translateY(-3px);
}
.coke-why-icon-wrap {
width: 56px;
height: 56px;
background: #fff4ec;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
transition: background .2s, transform .2s;
}
.coke-why-card:hover .coke-why-icon-wrap {
background: #FA740D;
transform: scale(1.08) rotate(-4deg);
}
.coke-why-icon-wrap .fas { color: #FA740D; font-size: 22px; transition: color .2s; }
.coke-why-card:hover .coke-why-icon-wrap .fas { color: #fff; }
.coke-why-title {
display: block;
font-size: .9rem;
font-weight: 800;
color: #1c1f24;
margin-bottom: 6px;
line-height: 1.2;
}
.coke-why-sub {
display: block;
font-size: .76rem;
color: #888;
line-height: 1.5;
}
/* Bottom CTA bar */
.coke-why-cta-bar {
background: #FA740D;
border-radius: 12px;
padding: 20px 28px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
position: relative;
overflow: hidden;
}
.coke-why-cta-bar::before {
content: '';
position: absolute;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(255,255,255,.07);
top: -70px; right: -50px;
}
.coke-why-cta-text {
font-size: 1rem;
font-weight: 800;
color: #fff;
display: block;
}
.coke-why-cta-sub {
font-size: .78rem;
color: rgba(255,255,255,.75);
display: block;
margin-top: 3px;
}
.coke-why-cta-btns {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex-shrink: 0;
}
.coke-why-cta-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 11px 20px;
background: #1c1f24;
color: #fff !important;
font-size: .78rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 8px;
white-space: nowrap;
transition: background .15s, transform .12s;
}
.coke-why-cta-btn:hover {
background: #000 !important;
color: #fff !important;
transform: translateY(-1px);
}
.coke-why-cta-btn.outline {
background: rgba(255,255,255,.15);
border: 1.5px solid rgba(255,255,255,.4);
}
.coke-why-cta-btn.outline:hover {
background: rgba(255,255,255,.25) !important;
}
@media (max-width: 575px) {
.coke-why-cta-bar { flex-direction: column; align-items: flex-start; }
}
/* ══════════════════════════════════════════════════════════════
SIDEBAR — STORE INFO CARD
══════════════════════════════════════════════════════════════ */
#coke-sidebar-info {
margin: 12px 0;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.06);
animation: coke-promo-in .5s .1s cubic-bezier(.22,.68,0,1.15) both;
}
/* Header */
.coke-si-header {
background: #FA740D;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
}
.coke-si-header .fas { color: #fff; font-size: 13px; }
.coke-si-header span {
font-size: .68rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
}
/* Hours section */
.coke-si-section {
background: #242729;
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.coke-si-section:last-child { border-bottom: none; }
.coke-si-label {
font-size: .62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: #FA740D;
display: block;
margin-bottom: 8px;
}
/* Hours rows */
.coke-si-hours-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.coke-si-hours-row:last-child { border-bottom: none; }
.coke-si-day { font-size: .72rem; color: #888; font-weight: 500; }
.coke-si-time { font-size: .72rem; color: #ccc; font-weight: 600; }
.coke-si-time.closed { color: #555; }
/* Open now badge */
.coke-si-open-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(46,125,50,.2);
color: #66bb6a;
font-size: .62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 8px;
border-radius: 999px;
margin-bottom: 8px;
}
.coke-si-open-badge .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #66bb6a;
animation: coke-pulse-dot 2s ease-in-out infinite;
}
@keyframes coke-pulse-dot {
0%,100% { opacity: 1; }
50% { opacity: .4; }
}
.coke-si-closed-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(180,50,50,.15);
color: #e57373;
font-size: .62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 8px;
border-radius: 999px;
margin-bottom: 8px;
}
/* Contact rows */
.coke-si-contact-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,.04);
text-decoration: none !important;
}
.coke-si-contact-row:last-child { border-bottom: none; }
.coke-si-contact-row .fas {
color: #FA740D;
font-size: 12px;
width: 14px;
flex-shrink: 0;
}
.coke-si-contact-val {
font-size: .74rem;
color: #ccc;
font-weight: 500;
line-height: 1.3;
}
a.coke-si-contact-row:hover .coke-si-contact-val { color: #FA740D; }
/* Quick links */
.coke-si-links { padding: 0; margin: 0; list-style: none; }
.coke-si-links li { border-bottom: 1px solid rgba(255,255,255,.04); }
.coke-si-links li:last-child { border-bottom: none; }
.coke-si-links a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
font-size: .74rem;
color: #aaa !important;
text-decoration: none !important;
font-weight: 500;
transition: color .15s, padding-left .15s;
}
.coke-si-links a .fas { color: #FA740D; font-size: 10px; width: 12px; }
.coke-si-links a:hover { color: #fff !important; padding-left: 4px; }
/* CTA button */
.coke-si-cta {
display: block;
margin: 12px 14px 14px;
padding: 10px;
background: #FA740D;
color: #fff !important;
font-size: .72rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
text-align: center;
text-decoration: none !important;
border-radius: 6px;
transition: background .15s;
}
.coke-si-cta:hover { background: #c85c00 !important; color: #fff !important; }
/* ══════════════════════════════════════════════════════════════
SHOP BY BRAND / MANUFACTURER
══════════════════════════════════════════════════════════════ */
/* ── SIDEBAR REFINE BY MANUFACTURER — restyle ────────────────── */
#refine_manufacturer_menu .style_tomato_title_bar {
background: #FA740D !important;
color: #fff !important;
font-size: .68rem !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
padding: 10px 14px !important;
border-radius: 4px 4px 0 0 !important;
cursor: default !important;
display: flex !important;
align-items: center !important;
gap: 7px !important;
}
#refine_manufacturer_menu .style_tomato_title_bar::before {
content: '\f02d';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 11px;
color: rgba(255,255,255,.8);
}
#refine_manufacturer_menu .style_tomato_content {
background: #fff !important;
border: 1px solid #e8e8e8 !important;
border-top: none !important;
border-radius: 0 0 8px 8px !important;
padding: 6px 0 !important;
margin-bottom: 14px !important;
}
#refine_manufacturer_menu .navbar-nav {
padding: 0 !important;
}
#refine_manufacturer_menu .navbar-nav li {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 12px !important;
border-bottom: 1px solid #f5f5f5 !important;
}
#refine_manufacturer_menu .navbar-nav li:last-child { border-bottom: none !important; }
#refine_manufacturer_menu .navbar-nav li a {
flex: 1 !important;
font-size: .8rem !important;
font-weight: 600 !important;
color: #333 !important;
padding: 8px 0 !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
display: block !important;
transition: color .15s !important;
border-left: 3px solid transparent !important;
padding-left: 0 !important;
}
#refine_manufacturer_menu .navbar-nav li a:hover {
color: #FA740D !important;
border-left-color: #FA740D !important;
background: #fff8f2 !important;
padding-left: 6px !important;
}
#refine_manufacturer_menu .refine_count {
font-size: .7rem !important;
color: #bbb !important;
font-weight: 500 !important;
flex-shrink: 0 !important;
margin-left: 6px !important;
background: #f5f5f5 !important;
padding: 2px 7px !important;
border-radius: 999px !important;
}
#refine_manufacturer_menu .refine_show_more a {
color: #FA740D !important;
font-weight: 700 !important;
font-size: .76rem !important;
padding: 6px 12px !important;
display: block !important;
text-align: center !important;
border-top: 1px solid #f0f0f0 !important;
}
#refine_manufacturer_menu .refine_show_more a:hover {
background: #fff4ec !important;
}
/* ── HOME PAGE SHOP BY BRAND SECTION ────────────────────────── */
#coke-brands {
margin-top: 28px;
animation: coke-promo-in .5s .15s cubic-bezier(.22,.68,0,1.15) both;
}
.coke-brands-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.coke-brands-title-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.coke-brands-title-wrap .fas { color: #FA740D; font-size: 16px; }
.coke-brands-title {
font-size: 1.1rem;
font-weight: 900;
color: #1c1f24;
letter-spacing: -.01em;
}
.coke-brands-sub {
font-size: .76rem;
color: #888;
margin-top: 2px;
display: block;
}
.coke-brands-see-all {
font-size: .74rem;
font-weight: 700;
color: #FA740D !important;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: .06em;
white-space: nowrap;
transition: color .15s;
}
.coke-brands-see-all:hover { color: #c85c00 !important; }
/* Brand chips grid */
.coke-brands-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
@media (max-width: 575px) {
.coke-brands-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.coke-brand-chip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 10px;
background: #fff;
border: 1.5px solid #ebebeb;
border-radius: 10px;
text-decoration: none !important;
transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
text-align: center;
min-height: 72px;
cursor: pointer;
}
.coke-brand-chip:hover {
border-color: #FA740D;
box-shadow: 0 4px 14px rgba(250,116,13,.18);
transform: translateY(-2px);
background: #fff8f2;
}
.coke-brand-chip-initial {
width: 36px;
height: 36px;
background: #f5f5f5;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: .95rem;
font-weight: 900;
color: #1c1f24;
transition: background .18s, color .18s;
flex-shrink: 0;
}
.coke-brand-chip:hover .coke-brand-chip-initial {
background: #FA740D;
color: #fff;
}
.coke-brand-chip-name {
font-size: .68rem;
font-weight: 700;
color: #555;
text-transform: uppercase;
letter-spacing: .04em;
line-height: 1.2;
display: block;
}
.coke-brand-chip:hover .coke-brand-chip-name { color: #FA740D; }
.coke-brand-chip-count {
font-size: .6rem;
color: #bbb;
font-weight: 500;
}
/* Show more brands button */
.coke-brands-more {
display: block;
width: 100%;
margin-top: 12px;
padding: 11px;
background: #fff;
border: 2px solid #FA740D;
border-radius: 8px;
color: #FA740D !important;
font-size: .78rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
text-align: center;
cursor: pointer;
transition: background .15s, color .15s;
font-family: inherit;
}
.coke-brands-more:hover {
background: #FA740D !important;
color: #fff !important;
}
/* ── BRANDS GRID — force layout in case specificity lost ─────── */
#coke-brands { display: block !important; }
#coke-brands .coke-brands-header {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
margin-bottom: 16px !important;
}
#coke-brands .coke-brands-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
gap: 10px !important;
}
#coke-brands .coke-brand-chip {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 14px 10px !important;
background: #fff !important;
border: 1.5px solid #ebebeb !important;
border-radius: 10px !important;
text-decoration: none !important;
text-align: center !important;
min-height: 72px !important;
cursor: pointer !important;
transition: border-color .18s, box-shadow .18s, transform .18s, background .18s !important;
}
#coke-brands .coke-brand-chip:hover {
border-color: #FA740D !important;
box-shadow: 0 4px 14px rgba(250,116,13,.18) !important;
transform: translateY(-2px) !important;
background: #fff8f2 !important;
}
#coke-brands .coke-brand-chip-initial {
width: 36px !important;
height: 36px !important;
background: #f5f5f5 !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: .95rem !important;
font-weight: 900 !important;
color: #1c1f24 !important;
transition: background .18s, color .18s !important;
flex-shrink: 0 !important;
}
#coke-brands .coke-brand-chip:hover .coke-brand-chip-initial {
background: #FA740D !important;
color: #fff !important;
}
#coke-brands .coke-brand-chip-name {
font-size: .68rem !important;
font-weight: 700 !important;
color: #555 !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
line-height: 1.2 !important;
display: block !important;
}
#coke-brands .coke-brand-chip:hover .coke-brand-chip-name { color: #FA740D !important; }
#coke-brands .coke-brand-chip-count {
font-size: .6rem !important;
color: #bbb !important;
font-weight: 500 !important;
display: block !important;
}
/* ── SHOW MANUFACTURER REFINE IN SIDEBAR (all pages incl home) ── */
.tomato_refine_search_menuboxes #refine_manufacturer_menu,
body.tomato-home-loading #refine_manufacturer_menu {
display: block !important;
}
/* But keep category refine hidden on home */
body.tomato-home-loading #refine_category_menubox { display: none !important; }
/* ── BRAND CHIPS GRID — nuclear specificity fix ──────────────── */
div#coke-brands div#coke-brands-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
gap: 10px !important;
min-width: 0 !important;
}
div#coke-brands div#coke-brands-grid a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 14px 10px !important;
background: #fff !important;
border: 1.5px solid #ebebeb !important;
border-radius: 10px !important;
text-decoration: none !important;
text-align: center !important;
min-height: 72px !important;
box-sizing: border-box !important;
transition: border-color .18s, box-shadow .18s, transform .18s !important;
}
div#coke-brands div#coke-brands-grid a:hover {
border-color: #FA740D !important;
box-shadow: 0 4px 14px rgba(250,116,13,.18) !important;
transform: translateY(-2px) !important;
background: #fff8f2 !important;
}
div#coke-brands div#coke-brands-grid a div {
width: 36px !important;
height: 36px !important;
background: #f5f5f5 !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: .95rem !important;
font-weight: 900 !important;
color: #1c1f24 !important;
flex-shrink: 0 !important;
transition: background .18s, color .18s !important;
}
div#coke-brands div#coke-brands-grid a:hover div {
background: #FA740D !important;
color: #fff !important;
}
div#coke-brands div#coke-brands-grid a span:first-of-type {
font-size: .68rem !important;
font-weight: 700 !important;
color: #555 !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
line-height: 1.2 !important;
}
div#coke-brands div#coke-brands-grid a:hover span:first-of-type {
color: #FA740D !important;
}
div#coke-brands div#coke-brands-grid a span:last-of-type {
font-size: .6rem !important;
color: #bbb !important;
font-weight: 500 !important;
}
/* ── SIDEBAR BRAND FILTER — dept pages ───────────────────────── */
#coke-brand-filter {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 0 0 8px 8px;
margin-bottom: 12px;
overflow: hidden;
}
#coke-brand-filter-header {
background: #FA740D;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 7px;
cursor: default;
}
#coke-brand-filter-header .fas { color: #fff; font-size: 11px; }
#coke-brand-filter-header span {
font-size: .68rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
}
#coke-brand-filter-list {
padding: 4px 0 8px;
max-height: 280px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #FA740D #f0f0f0;
}
#coke-brand-filter-list::-webkit-scrollbar { width: 4px; }
#coke-brand-filter-list::-webkit-scrollbar-thumb { background: #FA740D; border-radius: 2px; }
#coke-brand-filter-list a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 7px 14px !important;
font-size: .8rem !important;
font-weight: 600 !important;
color: #333 !important;
text-decoration: none !important;
border-left: 3px solid transparent !important;
border-bottom: 1px solid #f5f5f5 !important;
transition: all .15s !important;
text-transform: uppercase !important;
letter-spacing: .02em !important;
}
#coke-brand-filter-list a:last-child { border-bottom: none !important; }
#coke-brand-filter-list a:hover {
color: #FA740D !important;
border-left-color: #FA740D !important;
background: #fff8f2 !important;
padding-left: 18px !important;
}
#coke-brand-filter-list .coke-brand-count {
font-size: .7rem !important;
color: #bbb !important;
font-weight: 500 !important;
background: #f5f5f5 !important;
padding: 2px 6px !important;
border-radius: 999px !important;
flex-shrink: 0 !important;
margin-left: 6px !important;
}
/* ══════════════════════════════════════════════════════════════
NAV BRANDS DROPDOWN
══════════════════════════════════════════════════════════════ */
#coke-nav-brands {
position: static !important;
display: inline-flex !important;
align-items: center !important;
}
#coke-nav-brands-btn {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 10px 18px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
color: #fff !important;
background: none !important;
border: none !important;
border-bottom: 2px solid transparent !important;
cursor: pointer !important;
transition: border-color .15s !important;
font-family: inherit !important;
white-space: nowrap !important;
}
#coke-nav-brands-btn:hover,
#coke-nav-brands.open #coke-nav-brands-btn {
border-bottom-color: rgba(255,255,255,.7) !important;
}
#coke-nav-brands-btn .fas { font-size: 11px !important; opacity: .8 !important; transition: transform .2s !important; }
#coke-nav-brands.open #coke-nav-brands-btn .fa-chevron-down { transform: rotate(180deg) !important; }
/* Dropdown panel — anchored to the nav bar bottom */
#coke-nav-brands-panel {
display: none;
position: fixed !important;
width: 240px !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 6px 28px rgba(0,0,0,.2) !important;
z-index: 99999 !important;
overflow: hidden !important;
border: 1px solid #e8e8e8 !important;
}
@keyframes coke-dd-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
#coke-nav-brands.open #coke-nav-brands-panel { display: block !important; }
/* Panel header */
.coke-dd-header {
background: #1c1f24 !important;
padding: 12px 18px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.coke-dd-header-title {
font-size: .7rem !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: #FA740D !important;
white-space: nowrap !important;
}
.coke-dd-header-sub {
font-size: .68rem !important;
color: #777 !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
/* Brand chips grid */
.coke-dd-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
padding: 16px !important;
max-height: 300px !important;
overflow-y: auto !important;
background: #fff !important;
scrollbar-width: thin !important;
scrollbar-color: #FA740D #f0f0f0 !important;
}
.coke-dd-grid::-webkit-scrollbar { width: 4px; }
.coke-dd-grid::-webkit-scrollbar-thumb { background: #FA740D; border-radius: 2px; }
.coke-dd-chip {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 10px 6px !important;
background: #f9f9f9 !important;
border: 1.5px solid #ebebeb !important;
border-radius: 8px !important;
text-decoration: none !important;
text-align: center !important;
transition: border-color .15s, background .15s, transform .15s !important;
cursor: pointer !important;
}
.coke-dd-chip:hover {
border-color: #FA740D !important;
background: #fff8f2 !important;
transform: translateY(-1px) !important;
text-decoration: none !important;
}
.coke-dd-chip-initial {
width: 32px !important;
height: 32px !important;
background: #fff !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: .9rem !important;
font-weight: 900 !important;
color: #1c1f24 !important;
border: 1px solid #e8e8e8 !important;
transition: background .15s, color .15s !important;
}
.coke-dd-chip:hover .coke-dd-chip-initial {
background: #FA740D !important;
color: #fff !important;
border-color: #FA740D !important;
}
.coke-dd-chip-name {
font-size: .6rem !important;
font-weight: 700 !important;
color: #555 !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
line-height: 1.2 !important;
display: block !important;
}
.coke-dd-chip:hover .coke-dd-chip-name { color: #FA740D !important; }
.coke-dd-chip-count {
font-size: .56rem !important;
color: #bbb !important;
font-weight: 500 !important;
display: block !important;
}
/* Footer */
.coke-dd-footer {
padding: 10px 16px !important;
background: #f5f5f5 !important;
border-top: 1px solid #ebebeb !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.coke-dd-footer-text {
font-size: .7rem !important;
color: #aaa !important;
font-weight: 500 !important;
}
.coke-dd-footer-link {
font-size: .72rem !important;
font-weight: 800 !important;
color: #FA740D !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
}
.coke-dd-footer-link:hover { color: #c85c00 !important; }
/* Backdrop */
#coke-brands-backdrop {
display: none !important;
position: fixed !important;
inset: 0 !important;
z-index: 9998 !important;
background: rgba(0,0,0,.3) !important;
}
#coke-brands-backdrop.visible { display: block !important; }
@media (max-width: 767px) {
#coke-nav-brands { display: none !important; }
}
/* ── Push Shop by Brand to the far right of nav ─────────────── */
#coke-nav-brands {
margin-left: auto !important;
}
/* Make the nav ul flex so margin-left:auto works */
.style_tomato_top_menu .navbar-nav,
#nav_custom_links {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
}
/* ══════════════════════════════════════════════════════════════════
Coke COLLECTIONS ENGINE — CSS
══════════════════════════════════════════════════════════════════ */
/* ── Shared card grid ─────────────────────────────────────────── */
.coke-col-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 14px;
padding: 4px 0 16px;
}
.coke-col-card {
background: #fff;
border: 1.5px solid #ebebeb;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
transition: box-shadow .15s, transform .15s;
}
.coke-col-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.1);
transform: translateY(-2px);
}
.coke-col-img-wrap {
display: block;
background: #f9f9f9;
aspect-ratio: 1;
overflow: hidden;
}
.coke-col-img-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
transition: transform .2s;
}
.coke-col-card:hover .coke-col-img-wrap img { transform: scale(1.04); }
.coke-col-noimg {
width: 100%;
height: 100%;
background: #f0f0f0;
min-height: 120px;
}
.coke-col-body {
padding: 10px 10px 6px;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.coke-col-name {
font-size: .76rem;
font-weight: 700;
color: #1c1f24;
text-decoration: none;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.coke-col-name:hover { color: #FA740D; }
.coke-col-prices { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.coke-col-price {
font-size: .9rem;
font-weight: 900;
color: #FA740D;
}
.coke-col-was {
font-size: .72rem;
color: #aaa;
text-decoration: line-through;
}
/* ── Badge ────────────────────────────────────────────────────── */
.coke-col-badge {
position: absolute;
top: 8px;
left: 8px;
font-size: .58rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
padding: 3px 8px;
border-radius: 999px;
z-index: 2;
pointer-events: none;
}
.coke-col-badge-flyer { background: #FA740D; color: #fff; }
.coke-col-badge-best { background: #1c1f24; color: #FA740D; }
.coke-col-badge-new { background: #0a9; color: #fff; }
.coke-col-badge-spring { background: #5a9; color: #fff; }
.coke-col-badge-promo { background: #d44; color: #fff; }
/* ── Add to cart button ───────────────────────────────────────── */
.coke-col-form { padding: 0 10px 10px; }
.coke-col-atc-btn {
width: 100%;
background: #FA740D;
color: #fff;
border: none;
border-radius: 7px;
font-size: .72rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
padding: 8px;
cursor: pointer;
transition: background .15s;
}
.coke-col-atc-btn:hover { background: #e06400; }
/* ── Loading / empty states ───────────────────────────────────── */
.coke-col-loading {
padding: 30px;
text-align: center;
color: #aaa;
font-size: .85rem;
}
.coke-col-loading i { color: #FA740D; margin-right: 8px; }
.coke-col-empty {
padding: 20px;
text-align: center;
color: #aaa;
font-size: .8rem;
}
/* ── See all link ─────────────────────────────────────────────── */
.coke-col-see-all, .coke-col-page-see-all {
display: inline-block;
margin-top: 12px;
font-size: .78rem;
font-weight: 700;
color: #FA740D;
text-decoration: none;
letter-spacing: .02em;
}
.coke-col-see-all:hover, .coke-col-page-see-all:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════════════════
1. HOME PAGE COLLECTIONS SECTION
══════════════════════════════════════════════════════════════════ */
#coke-collections-home {
background: #fff;
border: 1.5px solid #ebebeb;
border-radius: 14px;
padding: 28px 28px 20px;
margin: 28px 0;
}
.coke-col-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
flex-wrap: wrap;
gap: 8px;
}
.coke-col-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.coke-col-header-left i { color: #FA740D; font-size: 1.1rem; }
.coke-col-title {
font-size: 1.1rem;
font-weight: 900;
color: #1c1f24;
letter-spacing: -.01em;
}
.coke-col-subtitle {
font-size: .78rem;
color: #aaa;
font-weight: 500;
}
/* ── Tabs ─────────────────────────────────────────────────────── */
.coke-col-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 12px;
}
.coke-col-tab {
background: #f5f5f5;
border: 1.5px solid #ebebeb;
border-radius: 999px;
padding: 7px 16px;
font-size: .75rem;
font-weight: 700;
color: #555;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
}
.coke-col-tab:hover { background: #fff8f2; border-color: #FA740D; color: #FA740D; }
.coke-col-tab.active {
background: #FA740D;
border-color: #FA740D;
color: #fff;
}
/* ══════════════════════════════════════════════════════════════════
2. COLLECTIONS FULL PAGE
══════════════════════════════════════════════════════════════════ */
#coke-collections-fullpage {
padding: 20px 0 40px;
}
.coke-col-page-header {
background: #1c1f24;
border-radius: 12px;
padding: 30px 32px;
margin-bottom: 32px;
}
.coke-col-page-title {
font-size: 1.5rem;
font-weight: 900;
color: #fff;
margin: 0 0 6px;
}
.coke-col-page-title i { color: #FA740D; margin-right: 10px; }
.coke-col-page-sub {
font-size: .85rem;
color: #888;
margin: 0;
}
.coke-col-page-section {
margin-bottom: 36px;
background: #fff;
border: 1.5px solid #ebebeb;
border-radius: 12px;
padding: 20px 20px 16px;
}
.coke-col-page-sec-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.coke-col-page-sec-title {
font-size: 1rem;
font-weight: 900;
color: #1c1f24;
}
/* ══════════════════════════════════════════════════════════════════
3. SIDEBAR COLLECTIONS
══════════════════════════════════════════════════════════════════ */
#coke-col-sidebar {
background: #fff;
border: 1.5px solid #ebebeb;
border-radius: 10px;
overflow: hidden;
margin-bottom: 16px;
}
.coke-col-sidebar-header {
background: #1c1f24;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: #fff;
}
.coke-col-sidebar-header i { color: #FA740D; }
.coke-col-sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
font-size: .78rem;
font-weight: 600;
color: #333;
text-decoration: none;
border-bottom: 1px solid #f5f5f5;
transition: all .12s;
}
.coke-col-sidebar-link:last-child { border-bottom: none; }
.coke-col-sidebar-link:hover { background: #fff8f2; color: #FA740D; padding-left: 18px; }
.coke-col-sidebar-badge {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.coke-col-badge-flyer { background: #FA740D; }
.coke-col-badge-best { background: #1c1f24; }
.coke-col-badge-new { background: #0a9; }
.coke-col-badge-spring { background: #5a9; }
.coke-col-badge-promo { background: #d44; }
/* ══════════════════════════════════════════════════════════════════
4. PRODUCT DETAIL COLLECTIONS STRIP
══════════════════════════════════════════════════════════════════ */
#coke-col-pdp-strip {
background: #fff;
border: 1.5px solid #ebebeb;
border-radius: 12px;
padding: 20px 20px 16px;
margin: 20px 0;
}
.coke-col-pdp-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.coke-col-pdp-header i { color: #FA740D; }
.coke-col-pdp-title {
font-size: .95rem;
font-weight: 900;
color: #1c1f24;
}
/* ── Product tile badges (collection overlay) ─────────────────── */
.coke-tile-badge {
position: absolute;
top: 7px;
left: 7px;
font-size: .58rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
padding: 4px 9px;
border-radius: 999px;
z-index: 10;
pointer-events: none;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
display: flex;
align-items: center;
gap: 4px;
line-height: 1;
}
.coke-tile-badge i { font-size: .55rem; }
/* Badge colour variants */
.coke-tile-badge.coke-col-badge-flyer { background: #FA740D; color: #fff; }
.coke-tile-badge.coke-col-badge-best { background: #1c1f24; color: #FA740D; }
.coke-tile-badge.coke-col-badge-new { background: #00a878; color: #fff; }
.coke-tile-badge.coke-col-badge-spring { background: #5aab6a; color: #fff; }
.coke-tile-badge.coke-col-badge-promo { background: #cc3333; color: #fff; }
/* Ensure image wrappers support badge positioning */
.gb-img,
.product_thumbnail,
.coke-upsell-img {
position: relative !important;
}
/* ── Product detail page collection banner ────────────────────── */
.coke-pdp-collection-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 10px;
margin: 12px 0;
flex-wrap: wrap;
}
.coke-pdp-collection-badge i {
font-size: 1.1rem;
flex-shrink: 0;
}
.coke-pdp-badge-label {
font-size: .72rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 10px;
border-radius: 999px;
background: rgba(255,255,255,.25);
}
.coke-pdp-badge-sub {
font-size: .8rem;
flex: 1;
min-width: 160px;
}
.coke-pdp-badge-link {
font-size: .75rem;
font-weight: 700;
text-decoration: none;
border: 1.5px solid currentColor;
padding: 4px 12px;
border-radius: 999px;
opacity: .9;
white-space: nowrap;
transition: opacity .15s;
}
.coke-pdp-badge-link:hover { opacity: 1; }
/* Colour variants for PDP banner */
.coke-col-badge-flyer-pdp { background: #fff4ed; color: #FA740D; border: 1.5px solid #fdd5b0; }
.coke-col-badge-best-pdp { background: #1c1f24; color: #FA740D; }
.coke-col-badge-new-pdp { background: #e8faf4; color: #00a878; border: 1.5px solid #b0e8d8; }
.coke-col-badge-spring-pdp { background: #eef6ee; color: #5aab6a; border: 1.5px solid #c0ddc0; }
.coke-col-badge-promo-pdp { background: #fef0f0; color: #cc3333; border: 1.5px solid #f5c0c0; }
/* ── Extended collection badge colours ────────────────────────── */
.coke-col-badge-bogo,
.coke-tile-badge.coke-col-badge-bogo { background: #7c3aed; color: #fff; }
.coke-col-badge-clear,
.coke-tile-badge.coke-col-badge-clear { background: #cc3333; color: #fff; }
.coke-col-badge-bundle,
.coke-tile-badge.coke-col-badge-bundle { background: #0077cc; color: #fff; }
.coke-col-badge-winter,
.coke-tile-badge.coke-col-badge-winter { background: #0ea5e9; color: #fff; }
.coke-col-badge-christmas,
.coke-tile-badge.coke-col-badge-christmas { background: #16a34a; color: #fff; }
.coke-col-badge-halloween,
.coke-tile-badge.coke-col-badge-halloween { background: #ea580c; color: #fff; }
.coke-col-badge-outdoor,
.coke-tile-badge.coke-col-badge-outdoor { background: #65a30d; color: #fff; }
/* PDP banner variants */
.coke-col-badge-bogo-pdp { background: #f5f0ff; color: #7c3aed; border: 1.5px solid #ddd6fe; }
.coke-col-badge-clear-pdp { background: #fef0f0; color: #cc3333; border: 1.5px solid #f5c0c0; }
.coke-col-badge-bundle-pdp { background: #eff6ff; color: #0077cc; border: 1.5px solid #bfdbfe; }
.coke-col-badge-winter-pdp { background: #f0f9ff; color: #0ea5e9; border: 1.5px solid #bae6fd; }
.coke-col-badge-christmas-pdp { background: #f0fdf4; color: #16a34a; border: 1.5px solid #bbf7d0; }
.coke-col-badge-halloween-pdp { background: #fff7ed; color: #ea580c; border: 1.5px solid #fed7aa; }
.coke-col-badge-outdoor-pdp { background: #f7fee7; color: #65a30d; border: 1.5px solid #d9f99d; }
/* Sidebar dot colours */
#coke-col-sidebar .coke-col-badge-bogo { background: #7c3aed; }
#coke-col-sidebar .coke-col-badge-clear { background: #cc3333; }
#coke-col-sidebar .coke-col-badge-bundle { background: #0077cc; }
#coke-col-sidebar .coke-col-badge-winter { background: #0ea5e9; }
#coke-col-sidebar .coke-col-badge-christmas { background: #16a34a; }
#coke-col-sidebar .coke-col-badge-halloween { background: #ea580c; }
#coke-col-sidebar .coke-col-badge-outdoor { background: #65a30d; }
.style_tomato_side_nav{display:flex!important;flex-direction:column!important}#coke-promo-card{order:1}.tomato_refine_search_menuboxes{order:2}#coke-col-sidebar{order:3}#coke-trust-block{order:4}#coke-contact-block{order:5}#coke-quick-depts{order:6}#store_links{order:7}#coke-brand-filter{display:none!important}#coke-trust-block{margin:8px 0;border-radius:8px;overflow:hidden;background:#fff;border:1px solid #e8e8e8}.coke-trust-header{background:#1c1f24;padding:9px 14px;display:flex;align-items:center;gap:8px}.coke-trust-header .fas{color:#FA740D;font-size:12px}.coke-trust-header span{font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff}.coke-trust-list{padding:10px 14px;display:flex;flex-direction:column;gap:9px}.coke-trust-item{display:flex;align-items:flex-start;gap:10px}.coke-trust-icon{width:26px;height:26px;border-radius:6px;background:#fff7ee;display:flex;align-items:center;justify-content:center;flex-shrink:0}.coke-trust-icon .fas{color:#FA740D;font-size:11px}.coke-trust-text{display:flex;flex-direction:column}.coke-trust-label{font-size:.72rem;font-weight:700;color:#1c1f24;line-height:1.3}.coke-trust-sub{font-size:.65rem;color:#888;line-height:1.3}#coke-contact-block{margin:8px 0;border-radius:8px;overflow:hidden;background:#1c1f24;border:1px solid rgba(255,255,255,.06)}.coke-contact-header{background:#FA740D;padding:9px 14px;display:flex;align-items:center;gap:8px}.coke-contact-header .fas{color:#fff;font-size:12px}.coke-contact-header span{font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff}.coke-contact-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}.coke-contact-row{display:flex;align-items:center;gap:9px}.coke-contact-row .fas{color:#FA740D;font-size:12px;width:14px;flex-shrink:0}.coke-contact-row span,.coke-contact-row a{font-size:.75rem;color:#ccc;text-decoration:none;font-weight:500}.coke-contact-row a:hover{color:#FA740D;text-decoration:none}.coke-contact-hours{font-size:.65rem;color:#666;padding-top:4px;border-top:1px solid rgba(255,255,255,.06)}#coke-quick-depts{margin:8px 0;border-radius:8px;overflow:hidden;border:1px solid #e8e8e8;background:#fff}.coke-qdepts-header{background:#1c1f24;padding:9px 14px;display:flex;align-items:center;gap:8px}.coke-qdepts-header .fas{color:#FA740D;font-size:12px}.coke-qdepts-header span{font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff}.coke-qdepts-list{padding:6px 0}.coke-qdepts-list a{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;font-size:.75rem;font-weight:600;color:#333;text-decoration:none;text-transform:uppercase;letter-spacing:.03em;transition:background .15s,color .15s;border-bottom:1px solid #f3f3f3}.coke-qdepts-list a:last-child{border-bottom:none}.coke-qdepts-list a:hover{background:#fff7ee;color:#FA740D;text-decoration:none}.coke-qdepts-list a .fas{color:#ccc;font-size:9px;transition:color .15s}.coke-qdepts-list a:hover .fas{color:#FA740D}
.recently_viewed_products_wrapper>h2,.recently_viewed_products_wrapper>.card-deck{display:none!important}.recently_viewed_products_wrapper{margin:0!important;padding:0!important}.coke-hero-info-hours{flex:2;min-width:220px}.coke-hero-info-hours .coke-hero-info-value{white-space:nowrap}@media(max-width:860px){.coke-hero-info-hours .coke-hero-info-value{white-space:normal}}.coke-home-col-section{margin:0 0 48px;background:#fff;border-radius:10px;border:1px solid #ebebeb;overflow:hidden}.coke-home-col-sec-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#1c1f24;flex-wrap:wrap;gap:8px}.coke-home-col-sec-title{display:flex;align-items:center;gap:10px}.coke-home-col-sec-title .fas{color:#FA740D;font-size:16px}.coke-home-col-sec-title span{font-size:1rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.05em}.coke-home-col-count{font-size:.7rem!important;font-weight:600!important;color:#888!important;text-transform:none!important;letter-spacing:0!important;background:rgba(255,255,255,.07);padding:2px 8px;border-radius:999px}.coke-home-col-shopall{font-size:.78rem;font-weight:700;color:#FA740D!important;text-decoration:none;display:flex;align-items:center;gap:6px;transition:color .15s}.coke-home-col-shopall:hover{color:#e06800!important;text-decoration:none}.coke-home-col-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-top:1px solid #f0f0f0}@media(max-width:1200px){.coke-home-col-grid{grid-template-columns:repeat(5,1fr)}}@media(max-width:900px){.coke-home-col-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:640px){.coke-home-col-grid{grid-template-columns:repeat(2,1fr)}}.coke-home-col-card{border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;display:flex;flex-direction:column;transition:background .15s}.coke-home-col-card:hover{background:#fafafa}.coke-home-col-card:nth-child(7n){border-right:none}.coke-home-col-img-wrap{display:flex;align-items:center;justify-content:center;position:relative;padding:12px;text-align:center;background:#fff;height:140px;min-height:140px}.coke-home-col-img-wrap img{max-height:110px;max-width:100%;object-fit:contain}.coke-home-col-no-img{height:100%;width:100%;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:24px}.coke-home-col-badge{position:absolute;top:6px;left:6px;font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:4px;color:#fff}.coke-home-col-info{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px;flex:1}.coke-home-col-name{font-size:.72rem;font-weight:600;color:#1c1f24;text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:1.9rem;min-height:1.9rem}.coke-home-col-name:hover{color:#FA740D;text-decoration:none}.coke-home-col-price{font-size:.85rem;font-weight:800;color:#FA740D}.coke-home-col-btn{display:block;text-align:center;background:#FA740D;color:#fff!important;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 8px;border-radius:5px;text-decoration:none;margin-top:auto;transition:background .15s}.coke-home-col-btn:hover{background:#e06800;text-decoration:none;color:#fff!important}.coke-home-col-footer{padding:14px 20px;background:#f8f8f8;border-top:1px solid #f0f0f0;text-align:center}.coke-home-col-footer-btn{display:inline-flex;align-items:center;gap:8px;background:#1c1f24;color:#fff!important;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:9px 22px;border-radius:6px;text-decoration:none;transition:background .15s}.coke-home-col-footer-btn:hover{background:#FA740D;color:#fff!important;text-decoration:none}#coke-flyer-strip{margin:32px 0 16px;border-radius:10px;overflow:hidden;border:1px solid #ebebeb;background:#fff}.coke-flyer-strip-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#1c1f24;flex-wrap:wrap;gap:8px}.coke-flyer-strip-title{display:flex;align-items:center;gap:10px}.coke-flyer-strip-title .fas{color:#FA740D;font-size:15px}.coke-flyer-strip-title span{font-size:.9rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.06em}.coke-flyer-strip-count{font-size:.65rem!important;font-weight:600!important;color:#888!important;text-transform:none!important;letter-spacing:0!important;background:rgba(255,255,255,.07);padding:2px 8px;border-radius:999px}.coke-flyer-strip-all{font-size:.78rem;font-weight:700;color:#FA740D!important;text-decoration:none;display:flex;align-items:center;gap:6px}.coke-flyer-strip-all:hover{color:#e06800!important;text-decoration:none}.coke-flyer-strip-track{display:grid;grid-template-columns:repeat(6,1fr);gap:0}@media(max-width:1100px){.coke-flyer-strip-track{grid-template-columns:repeat(5,1fr)}}@media(max-width:800px){.coke-flyer-strip-track{grid-template-columns:repeat(4,1fr)}}@media(max-width:560px){.coke-flyer-strip-track{grid-template-columns:repeat(2,1fr)}}.coke-flyer-strip-card{border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;display:flex;flex-direction:column}.coke-flyer-strip-card:hover{background:#fafafa}.coke-flyer-strip-img{display:flex;align-items:center;justify-content:center;position:relative;padding:12px;text-align:center;background:#fff;height:130px;min-height:130px}.coke-flyer-strip-img img{max-height:100px;max-width:100%;object-fit:contain}.coke-flyer-no-img{height:100%;width:100%;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:22px}.coke-flyer-strip-badge{position:absolute;top:6px;left:6px;font-size:.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:4px;background:#FA740D;color:#fff}.coke-flyer-strip-body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px;flex:1}.coke-flyer-strip-name{font-size:.7rem;font-weight:600;color:#1c1f24;text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:1.9rem;min-height:1.9rem}.coke-flyer-strip-name:hover{color:#FA740D;text-decoration:none}.coke-flyer-strip-price{font-size:.85rem;font-weight:800;color:#FA740D}.coke-flyer-strip-btn{display:block;text-align:center;background:#FA740D;color:#fff!important;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 6px;border-radius:5px;text-decoration:none;margin-top:auto;transition:background .15s}.coke-flyer-strip-btn:hover{background:#e06800;text-decoration:none;color:#fff!important}.coke-flyer-strip-footer{padding:14px 20px;background:#f8f8f8;border-top:1px solid #f0f0f0;text-align:center}.coke-flyer-strip-footer-btn{display:inline-flex;align-items:center;gap:8px;background:#1c1f24;color:#fff!important;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:10px 24px;border-radius:6px;text-decoration:none;transition:background .15s}.coke-flyer-strip-footer-btn:hover{background:#FA740D;color:#fff!important;text-decoration:none}.coke-col-sidebar-chevron{transition:transform .2s ease;color:#fff!important}#coke-col-sidebar-list{transition:none}.coke-hero-main{background:linear-gradient(135deg,rgba(0,0,0,.62) 0%,rgba(250,116,13,.55) 100%),url('https://scontent-sea1-1.xx.fbcdn.net/v/t39.30808-6/565656781_122177870504461501_3509804213691186857_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=2a1932&_nc_ohc=WnKPfJgMkvUQ7kNvwEjDXGP&_nc_oc=AdqP7ru5yB12iJ22WuiTsNa4Z3cKxBNiEpKm2UB8HaPpwSQCxOyNuMGDykeKzg_U_j4&_nc_zt=23&_nc_ht=scontent-sea1-1.xx&_nc_gid=G-tPsy5_I5_DV6pYKnGdPw&_nc_ss=7a30f&oh=00_AfxDS2lcpmYRyPFDmXqD8BCi7-nugIW6vqVKiwspFadF2Q&oe=69C7EA80') center center/cover no-repeat;padding:28px 28px 24px;position:relative;overflow:hidden}