/** Shopify CDN: Minification failed Line 2772:11 Expected identifier but found whitespace Line 2772:12 Unexpected "40px" Line 3160:1 Expected "}" to go with "{" **/ /* ========================================================= Reflexions – Global Luxury Theme Polish (Expanse v8) (CLEAN, header logic simplified) ========================================================= */ /* ----------------------------- Brand tokens & base typography ------------------------------ */ :root{ --luxury-gold:#C9A646; --rxm-atc-h: 76px; --rx-page-max:1280px; /* global page width */ } h1,h2,h3,.heading{ font-family:"Playfair Display",serif; font-weight:600; letter-spacing:-0.02em; } body,p,a,li,span,input,button,textarea{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } /* Primary buttons */ .button--primary, button.btn--primary, .banner__buttons .button, .slideshow__buttons .button{ background:var(--luxury-gold); color:#fff!important; border:none;border-radius:2rem; padding:.8rem 2rem; font-weight:500; transition:background .3s,transform .3s; } .button--primary:hover, button.btn--primary:hover, .banner__buttons .button:hover, .slideshow__buttons .button:hover{ background:#b2903e;transform:translateY(-2px); } /* ----------------------------- Hero / Slideshow ------------------------------ */ .section-image-banner,.slideshow,.slideshow__slide{position:relative;overflow:hidden} .section-image-banner::after,.slideshow__slide::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.55) 100%); } .banner__content,.slideshow__text-wrap{ position:relative;z-index:2;color:#fff;text-align:center;max-width:680px;margin-inline:auto; } .banner__heading,.slideshow__heading{ font-family:"Playfair Display",serif!important;font-weight:600;line-height:1.2; letter-spacing:-.03em;font-size:clamp(2rem,5vw,3.5rem);color:#fff; } @media(max-width:768px){ .banner__heading,.slideshow__heading{font-size:2rem} } /* (Optional) stop hero zoom on desktop */ @media (min-width: 1025px){ .index-section--hero .slideshow__slide img, .index-section--hero .slideshow__slide .element-image__image{ transform:none !important; animation:none !important; will-change:auto !important; } } /* ----------------------------- Trust strip ------------------------------ */ .rxf-trust-strip{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center; background:#fff;border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05); padding:32px 5%;max-width:1400px;margin:0 auto; } .rxf-trust-item svg{width:36px;height:36px;margin-bottom:10px} .rxf-trust-item h4{font-family:"Playfair Display",serif;font-size:16px;color:#111;margin-bottom:4px} .rxf-trust-item p{font-family:"Inter",sans-serif;font-size:14px;color:#444;letter-spacing:.02em} @media(max-width:768px){ .rxf-trust-strip{grid-template-columns:1fr 1fr;row-gap:28px} } /* ----------------------------- Featured Collection (homepage) ------------------------------ */ .featured-collection{background:#FAF8F4;padding:50px 0} .featured-collection .grid{gap:22px} .featured-collection .card-wrapper{ display:flex;flex-direction:column;height:100%; background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden; transition:border-color .25s,box-shadow .25s,transform .25s; } .featured-collection .card-wrapper:hover{ border-color:var(--luxury-gold);box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-3px); } .featured-collection .card__media{ display:flex;align-items:center;justify-content:center;background:#fff; padding:18px 10px;border-bottom:1px solid rgba(0,0,0,.05);height:250px; } .featured-collection .card__media img{width:100%;height:100%;object-fit:contain;transition:transform .35s} .featured-collection .card-wrapper:hover .card__media img{ transform:scale(1.03) } .featured-collection .card__content{display:flex;flex-direction:column;justify-content:space-between;text-align:center;padding:14px 12px 18px;min-height:160px} .featured-collection .card__heading{ font-family:"Inter",sans-serif;font-weight:500;font-size:14px;color:#111;line-height:1.45; margin:8px 0 6px;min-height:44px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .featured-collection .price{ font-family:"Playfair Display",serif;font-weight:600;font-size:15px;color:#000;letter-spacing:.3px; margin-top:auto;line-height:1;display:inline-flex;gap:6px;align-items:baseline;justify-content:center; } .featured-collection .price .price-item--regular{color:#888;font-weight:400;text-decoration:line-through;font-size:14px;margin-right:6px} .featured-collection .card-wrapper::after{ content:"";display:block;height:2px;width:28%;background:var(--luxury-gold); margin:12px auto 0;opacity:0;transition:opacity .25s; } .featured-collection .card-wrapper:hover::after{opacity:1} @media(max-width:768px){ .featured-collection .grid{gap:16px} .featured-collection .card__media{height:220px} } /* ----------------------------- Universal product cards ------------------------------ */ .rx-card,[class*="product-grid"] .card-wrapper{ display:flex;flex-direction:column;height:100%; background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:14px;overflow:hidden; transition:border-color .25s,box-shadow .25s,transform .25s; } .rx-card:hover,[class*="product-grid"] .card-wrapper:hover{ border-color:var(--luxury-gold);box-shadow:0 8px 22px rgba(0,0,0,.08);transform:translateY(-2px); } .rx-card [class*="card__media"],[class*="product-grid"] .card__media{ display:flex;align-items:center;justify-content:center;height:250px;padding:16px 12px; border-bottom:1px solid rgba(0,0,0,.06);background:#fff; } .rx-card [class*="card__media"] img,[class*="product-grid"] .card__media img{ width:100%;height:100%;object-fit:contain;transition:transform .35s; } .rx-card:hover [class*="card__media"] img, [class*="product-grid"] .card-wrapper:hover .card__media img{transform:scale(1.03)} .rx-card [class*="card__information"], .rx-card [class*="card-information"], [class*="product-grid"] [class*="card__information"], [class*="product-grid"] [class*="card-information"]{ flex:1 1 auto;display:flex;flex-direction:column;text-align:center;padding:14px 12px 16px; } .rx-card [class*="card__heading"],[class*="product-grid"] [class*="card__heading"]{ font-size:14px;line-height:1.45;color:#111;margin:8px 0 6px;min-height:44px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .rx-card .price,[class*="product-grid"] .price{ margin-top:auto;align-self:center;line-height:1.1;font-family:"Playfair Display",serif; font-weight:600;font-size:15px;color:#000;display:inline-flex;gap:6px;align-items:baseline; } .rx-card .price .price-item--regular,[class*="product-grid"] .price .price-item--regular{ color:#888;font-weight:400;text-decoration:line-through;font-size:14px;margin-right:6px; } /* ----------------------------- PDP media thumbs ------------------------------ */ .product__thumbs .product__thumb, .product__thumbs .product__thumb img{ aspect-ratio:1/1 } .product__thumbs .product__thumb img{ width:100%;height:100%;object-fit:cover;border-radius:8px } /* ----------------------------- PDP – Compact buy-box / accordions ------------------------------ */ .rxPDP .grid{align-items:start} .rxPDP .rxBox{z-index:2;border-radius:18px} .rxPDP .rxCTA .rxBtn{min-height:44px} .rxPDP .rxAcc details+details{margin-top:10px} /* Desktop: do not sticky the right column */ @media (min-width: 769px){ .rxBox{ position: static !important; } } /* Mobile: one-column + bottom ATC bar */ @media (max-width: 768px){ .rxPDP{ padding-bottom: var(--rxm-atc-h, 76px); } .rxPDP .grid{ grid-template-columns:1fr } .rxMedia, .rxBox{ position: static !important; top:auto !important; z-index:auto !important; } /* Hide big in-flow CTAs to avoid duplicates */ .rxForm .rxCTA, .rxForm .shopify-payment-button{ display:none !important; } /* Bottom sticky ATC bar (price hidden by design) */ .rxm-atc{ position: fixed; left:0; right:0; bottom:0; z-index:50; display:flex; gap:10px; align-items:center; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid rgba(0,0,0,.08); backdrop-filter:saturate(150%) blur(6px); } .rxm-atc__price{ display:none !important; } .rxm-atc__btn, .rxm-buy__btn{ flex:1 1 0; border-radius:12px; font-weight:700; padding:12px 16px; } } /* Default: hide mobile bar on desktop */ .rxm-atc{ display:none; } /* ----------------------------- Kerastase-style concern chips ------------------------------ */ .rxPDP .rxPills{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 14px; } .rxPDP .rxPill{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:8px; background:#F7F4EC; border:1px solid rgba(0,0,0,.08); color:#333; font-size:13px; line-height:1; text-decoration:none; white-space:nowrap; transition:background .2s ease, box-shadow .2s ease, transform .15s ease; } .rxPDP .rxPill:hover{ background:#F1EAD8; box-shadow:0 3px 10px rgba(0,0,0,.06); transform:translateY(-1px); } /* gentle hues by keyword */ .rxPDP .rxPill[data-c*="frizz"]{ background:#F2F3FF; } .rxPDP .rxPill[data-c*="smooth"]{ background:#F7F2FF; } .rxPDP .rxPill[data-c*="shine"]{ background:#FFF7EF; } .rxPDP .rxPill[data-c*="hydrate"], .rxPDP .rxPill[data-c*="moist"]{ background:#EEF9FF; } @media (max-width: 749px){ .rxPDP .rxPills{ gap:8px } .rxPDP .rxPill{ padding:7px 10px; font-size:12px } } /* Compact PDP pass */ .rxCompact .grid{ gap:18px } .rxCompact .rxBox{ max-width:520px; padding:16px; border-radius:14px; box-shadow:none } .rxCompact .rxTitle{ font-size:clamp(20px,2.6vw,28px); line-height:1.15; margin:6px 0 8px } .rxCompact .rxPrice{ gap:8px; margin:6px 0 10px } .rxCompact .rxPrice .now{ font-size:22px } .rxCompact .rxPills{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px } .rxCompact .rxPill{ display:inline-flex; align-items:center; padding:7px 11px; border-radius:8px; background:#F7F4EC; border:1px solid rgba(0,0,0,.08); color:#333; font-size:12.5px; font-weight:600; } .rxCompact .rxPill:hover{ background:#F1EAD8; box-shadow:0 2px 8px rgba(0,0,0,.05); transform:translateY(-1px) } .rxCompact .rxPill[data-c*="frizz"]{ background:#F2F3FF } .rxCompact .rxPill[data-c*="smooth"]{ background:#F7F2FF } .rxCompact .rxPill[data-c*="shine"]{ background:#FFF7EF } .rxCompact .rxPill[data-c*="color"]{ background:#FFF3F5 } .rxCompact .rxPill[data-c*="hydrate"], .rxCompact .rxPill[data-c*="moist"]{ background:#EEF9FF } .rxCompact .rxPill[data-c*="volume"], .rxCompact .rxPill[data-c*="density"]{ background:#F1FFF0 } .rxCompact .rxForm .opts{ gap:8px; margin:8px 0 } .rxCompact .rxForm label{ font-size:11px; margin-bottom:4px; color:#666 } .rxCompact .rxForm select{ padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,.08) } .rxCompact .rxCTA{ gap:8px; margin-top:8px } .rxCompact .rxBtn{ min-height:44px; border-radius:10px } .rxCompact .rxTrust{ gap:10px; margin-top:8px; font-size:12px; color:#666 } .rxCompact .rxMedia .rxThumbs{ gap:6px } .thumbnail-list__item, .thumbnail-list__item img{ aspect-ratio:1/1 } .thumbnail-list__item img{ width:100%; height:100%; object-fit:cover; border-radius:8px } @media (max-width: 749px){ .rxCompact .grid{ grid-template-columns:1fr; gap:14px } .rxCompact .rxBox{ padding:14px; border-radius:12px } .rxCompact .rxTitle{ font-size:20px; margin:6px 0 6px } .rxCompact .rxPill{ padding:6px 9px; font-size:12px } .rxCompact .rxCTA .rxBtn{ border-radius:12px } } /* ----------------------------- WhatsApp floating button ------------------------------ */ .whatsapp-float{ position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom) + var(--rxm-atc-h, 76px) + 12px); z-index: 35; width: 56px; height: 56px; filter: drop-shadow(0 8px 22px rgba(0,0,0,.18)); transition: transform .25s ease; } .whatsapp-float:hover{ transform: scale(1.05) } @media (min-width: 769px){ .whatsapp-float{ right:24px; bottom:24px; width:60px; height:60px; z-index:60 } } /* ----------------------------- Cart drawer & cart page polish ------------------------------ */ .rxCartPanel{ height:100dvh; max-height:100dvh; display:flex; flex-direction:column } [data-rx-cart-drawer]{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column } .rxCartDrawer__scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; } /* Cart row media sizing */ .cart__image,.cart__media,.cart-item__media,.cart-item__image,.cart__image-wrapper{ width:88px; aspect-ratio:1/1; flex:0 0 88px; border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#fff; overflow:hidden; } .cart__image img,.cart__media img,.cart-item__media img,.cart-item__image img,.cart__image-wrapper img{ width:100%; height:100%; object-fit:contain !important; object-position:center; display:block; max-height:none !important; } @media (min-width: 768px){ .cart__image,.cart__media,.cart-item__media,.cart-item__image,.cart__image-wrapper{ width:96px; flex-basis:96px } } /* Grid alignment for cart rows */ .cart__row,.cart__item,.cart-item{ display:grid; grid-template-columns:88px 1fr auto; align-items:center; column-gap:16px; } .cart__image,.cart__media,.cart-item__media,.cart-item__image,.cart__image-wrapper{ grid-column:1; justify-self:start } .cart__content,.cart__item__content,.cart-item__content,.cart__info,.cart__details{ grid-column:2 } .cart__final-price,.cart__price,.cart-item__price,.cart__totals,.cart__line-price{ grid-column:3; justify-self:end; text-align:right } .cart__product-title,.cart-item__title,.cart__title{ margin:0 0 6px; line-height:1.3 } .cart__qty,.cart-quantity,.quantity-selector,.cart-item__quantity-wrapper{ margin-top:6px } @media (max-width: 749px){ .cart__row,.cart__item,.cart-item{ grid-template-columns:88px 1fr auto; column-gap:14px } } @media (min-width: 750px){ .cart__row,.cart__item,.cart-item{ grid-template-columns:96px 1fr 140px; column-gap:20px } } /* ----------------------------- Product Badges (FREE GIFT / SALE etc.) ------------------------------ */ .product-item__image,.product-item__image-wrapper,.card__media,.product__media,.rxf-card__media{ position:relative } .rx-badges{ position:absolute; top:8px; left:8px; display:inline-flex; flex-wrap:wrap; gap:6px; z-index:6; pointer-events:none; } .rx-badge{ --rx-gold:#C9A646; padding:4px 8px; border-radius:0; font:600 11px/1.1 Inter,system-ui,sans-serif; color:#111; border:1px solid rgba(0,0,0,.08); background:#fff; box-shadow:1px 1px 0 rgba(0,0,0,.06); text-transform:uppercase; letter-spacing:.02em; } .rx-badge--new{ border-color:rgba(76,175,80,.25); background:rgba(241,255,244,.96); color:#0b6b2a } .rx-badge--best{ border-color:rgba(0,0,0,.12); background:#fff; color:#111 } .rx-badge--sale{ border-color:rgba(255,0,0,.25); background:#fff5f5; color:#8a0000 } .rx-badge--bogos{ background:linear-gradient(180deg,#fff,#f2ead0); border-color:var(--rx-gold); color:#111 } @media (max-width:420px){ .rx-badges{ top:6px; left:6px; gap:4px } .rx-badge{ font-size:10px; padding:3px 7px } } /* Hide vendor line where we show concerns instead */ .rxVndr{ display:none !important } /* PDP concern chips on template-product */ .template-product .rxPills .rxPill{ background: #F7F4EC !important; border: 1px solid rgba(0,0,0,.08) !important; color: #333 !important; text-decoration: none !important; } .template-product .rxPills .rxPill:hover{ background: #F1EAD8 !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(0,0,0,.05); } .template-product .rxPills .rxPill[data-c*="frizz"]{ background:#F2F3FF !important; } .template-product .rxPills .rxPill[data-c*="smooth"]{ background:#F7F2FF !important; } .template-product .rxPills .rxPill[data-c*="shine"]{ background:#FFF7EF !important; } .template-product .rxPills .rxPill[data-c*="hydrate"], .template-product .rxPills .rxPill[data-c*="moist"]{ background:#EEF9FF !important; } .template-product .rxPills .rxPill[data-c*="volume"], .template-product .rxPills .rxPill[data-c*="density"]{ background:#F1FFF0 !important; } /* De-dupe badges on custom cards */ .rxf-card .card__hover [class*="badge"], .rxf-card .card__hover .grid-product__badge, .rxf-card .card__hover .badge__wrapper { display: none !important; } .rxf-card .grid-product__badge-group [class*="badge"]:not(:first-child) { display: none !important; } .rxf-card .grid-product__badge-group { gap: 4px !important; } .rxf-card [class*="hover"] .badge, .rxf-card [class*="hover"] [class*="badge"], .rxf-card [class*="hover"] .grid-product__badge, .rxf-card [class*="hover"] .badge__wrapper { display: none !important; } .rxf-card .grid-product__badge-group:not(:first-of-type) { display: none !important; } .rxf-card .badge__row ~ .badge__row { display: none !important; } /* Quick-fix: stop + ATC / icons clipping on rounded cards */ .rxf-card{ position: relative; overflow: visible; } .rxf-card [class*="card__media"]{ border-top-left-radius: 14px; border-top-right-radius: 14px; overflow: hidden; } .rxf-card .grid-product__actions{ position: absolute; top: 12px; right: 12px; z-index: 6; } .rxf-card .quick-add__submit{ z-index: 7; } /* ----------------------------- GLOBAL PAGE WIDTH ------------------------------ */ .page-width{ max-width: var(--rx-page-max); margin: 0 auto; padding-inline: 20px; } /* ----------------------------- MINIMAL, SAFE HEADER TUNE (let Expanse handle layout) ------------------------------ */ /* Just control logo sizing */ #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg{ width:auto !important; height:42px; max-height:42px; object-fit:contain !important; } @media (max-width:768px){ #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg{ height:30px; max-height:30px; } /* no text labels under icons on mobile */ #SiteHeader .site-nav__icon-label{ display:none !important; } } /* ===== Mobile header layout: burger | logo | icons ===== */ @media (max-width: 768px){ #SiteHeader .site-header__element--top .page-width{ position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 16px !important; min-height: 56px; } /* center logo */ #SiteHeader .header-item--logo{ position: absolute; left: 50%; transform: translateX(-50%); margin: 0; text-align: center; z-index: 2; } /* burger on the left */ #SiteHeader .mobile-nav-trigger{ display: inline-flex !important; align-items: center; justify-content: center; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; z-index: 3; } /* icons on the right (account + cart) */ #SiteHeader .header-item--icons, #SiteHeader .site-nav__icons{ position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; z-index: 3; } /* hide text labels under icons */ #SiteHeader .site-nav__icon-label{ display: none !important; } } /* RX – Mobile header layout: burger left, logo center, icons right */ @media (max-width: 768px){ /* Make top row a simple frame */ #SiteHeader .site-header__element--top .page-width{ position: relative; display: flex; align-items: center; justify-content: center; /* keeps logo centred */ padding: 10px 16px !important; min-height: 56px; } /* Force the burger to show & sit on the left edge */ #SiteHeader .mobile-nav-trigger{ display: inline-flex !important; align-items: center; justify-content: center; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; z-index: 3; } /* Icons block (account + cart) stay on the right */ #SiteHeader .header-item--icons, #SiteHeader .site-nav__icons{ position: static; transform: none; display: flex; align-items: center; gap: 10px; justify-content: flex-end; } /* Hide text labels under icons on mobile */ #SiteHeader .site-nav__icon-label{ display: none !important; } } /* ===== RX HEADER — MOBILE LAYOUT (burger left, logo centre, icons right) ===== */ @media (max-width: 768px){ /* Top row container */ #SiteHeader .site-header__element--top .page-width{ display: flex; align-items: center; justify-content: center; position: relative; padding: 8px 16px; } /* Center the logo */ #SiteHeader .header-item--logo{ position: absolute; left: 50%; transform: translateX(-50%); margin: 0; text-align: center; flex: 0 0 auto; } /* Icons cluster on the right (account + cart) */ #SiteHeader .header-item--icons{ flex: 0 0 auto; display: flex; justify-content: flex-end; } /* Burger pinned to far left */ #SiteHeader .mobile-nav-trigger{ position: absolute; left: 16px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; } } /* ==== RX HEADER MOBILE — PIN ICONS TO RIGHT, STOP OVERLAP ==== */ @media (max-width: 768px){ /* logo stays absolutely centered (from earlier CSS) */ /* move the icons row to the far right */ #SiteHeader .header-item--icons{ position: absolute; right: 16px; top: 50%; transform: translateY(-50%); margin: 0 !important; flex: 0 0 auto; width: auto; z-index: 3; } #SiteHeader .header-item--icons .site-nav__icons{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; } } /* RX – Final mobile header layout: burger left, logo center, icons right (all states) */ @media (max-width: 768px){ /* Top row as a single flex line */ #SiteHeader .site-header__element--top .page-width{ position: relative; display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px 40px !important; /* room for icons on both sides */ } /* Logo in the visual centre */ #SiteHeader .header-item--logo{ margin: 0 auto !important; text-align: center !important; flex: 0 0 auto !important; } /* Icons cluster (account + cart) on the right */ #SiteHeader .header-item--icons{ position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; } /* Burger on the left, always visible */ #SiteHeader .mobile-nav-trigger{ position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; } /* Make sure icons don't collapse in compressed/sticky state */ .header-wrapper--compressed #SiteHeader .site-nav__icons{ display: flex !important; } /* Optional: keep icon labels hidden on mobile */ #SiteHeader .site-nav__icon-label{ display: none !important; } } /* --- Reflexions header: minimal, safe overrides --- */ /* Logo sizing: ignore theme width slider, control only height */ #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg{ width: auto; height: 42px; max-height: 42px; object-fit: contain; } @media (max-width: 768px){ #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg{ height: 30px; max-height: 30px; } } /* Optional: hide tiny text labels under icons on mobile */ @media (max-width: 768px){ #SiteHeader .site-nav__icon-label{ display: none !important; } } /* --- RX Header: mobile layout tweak --- */ @media (max-width: 768px) { /* Make the top header row a positioning context */ #SiteHeader .site-header__element--top .page-width { position: relative; } /* Burger: fixed on the left, not in the icon cluster */ #SiteHeader .mobile-nav-trigger { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; } /* Logo: keep visually centred */ #SiteHeader .site-header__logo { text-align: center; } /* Icons (account + cart) stay on the right */ #SiteHeader .header-item--icons { justify-content: flex-end; } } /* Small, consistent gap between header and first section on key pages */ @media (max-width: 749px) { body.template-index main.main-content, body.template-product main.main-content, body.template-collection main.main-content { padding-top: 10px !important; /* tweak 8–14px to taste */ } } /* =========================== RX – Premium Mobile Header (Kerastase-style) =========================== */ @media (max-width: 768px) { /* Top header band: solid white, compact */ .header-section .site-header__element--top { background-color: #ffffff; padding: 8px 0; } .header-section .site-header__element--top > .page-width { position: relative; display: flex; align-items: center; justify-content: center; /* center logo container */ padding-inline: 16px; } /* Centered logo block */ .header-section .header-item--logo { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; text-align: center; flex: 0 0 auto; } .header-section .site-header__logo-link img, .header-section .site-header__logo-link svg { width: auto; max-height: 32px; height: 32px; object-fit: contain; } /* Icon cluster on the right (search + account + cart) */ .header-section .header-item--icons { margin-left: auto; flex: 0 0 auto; } .header-section .site-nav__icons { display: flex; align-items: center; gap: 12px; } .header-section .site-nav__link--icon { padding-inline: 6px; } /* Hamburger forced to the far left, independent of icon cluster */ .header-section .site-nav__link--icon.mobile-nav-trigger { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); padding: 0; } .header-section .site-nav__link--icon.mobile-nav-trigger .element-icon { --element-icon-size: 22px; } /* Optional: hide account icon on very small screens for breathing space */ @media (max-width: 480px) { .header-section .site-nav__link--icon[data-header-account] { display: none; } } /* SEARCH ROW – full width under logo row, like Kerastase */ .header-section .site-header__element--sub[data-type="search"] .page-width { padding-top: 6px; padding-bottom: 10px; } .header-section .site-header__element--sub[data-type="search"] .search-bar { min-height: 40px; } .header-section .site-header__element--sub[data-type="search"] .search-bar__input { height: 40px; font-size: 14px; padding: 8px 14px; } .header-section .site-header__element--sub[data-type="search"] .search-bar__submit { width: 40px; height: 40px; } /* NAV ROW (Home / Hair / Skin...) – keep tight under search */ .header-section .site-header__element--sub[data-type="nav"] .page-width { padding-top: 4px; padding-bottom: 4px; } .header-section .site-nav__link { padding-block: 10px; font-size: 13px; } } /* Desktop small tidy-up: keep current look but a bit more refined */ @media (min-width: 769px) { .header-section .site-header__element--top { padding: 10px 0; } .header-section .site-header__element--top .page-width { align-items: center; } .header-section .site-header__logo-link img, .header-section .site-header__logo-link svg { height: 40px; max-height: 40px; width: auto; object-fit: contain; } } /* =========================== RX — Premium Mobile Header burger left / logo centre / icons right =========================== */ @media (max-width: 768px) { /* Main top header row */ #SiteHeader .site-header__element--top > .page-width { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 16px; min-height: 56px; } /* Center logo perfectly */ #SiteHeader .header-item--logo { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; text-align: center; } /* Icons cluster stays on the right */ #SiteHeader .header-item--icons { margin-left: auto; flex: 0 0 auto; } #SiteHeader .header-item--icons .site-nav { display: flex; align-items: center; gap: 8px; } /* Burger: fixed to far left */ #SiteHeader .mobile-nav-trigger { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; } /* Compact search row under header on mobile */ .site-header__element--sub[data-type='search'] .page-width { padding-top: 6px; padding-bottom: 8px; } } /* =========================== RX — Cart count bubble (desktop + mobile) =========================== */ .site-nav__link--cart { position: relative; } .site-nav__link--cart .cart-count-bubble { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #c3433b; /* deep red like Kerastase */ color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; font-weight: 500; } .site-nav__link--cart .cart-count-bubble [data-cart-count] { display: block; } /* =========================== RX — PREMIUM HEADER POLISH =========================== */ /* General header look */ #SiteHeader .site-header__element--top { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 0 rgba(0,0,0,0.04); background-color: #ffffff; } /* Logo sizing & crispness */ #SiteHeader .site-header__logo img { max-height: 26px; } /* Desktop nav – lighter, more premium spacing */ @media (min-width: 769px) { #SiteHeader .site-nav__link { font-size: 14px; padding: 14px 18px; letter-spacing: 0.04em; } } /* Desktop icons */ @media (min-width: 769px) { #SiteHeader .site-nav__icons .site-nav__link--icon { padding-left: 10px; padding-right: 10px; } } /* Red cart pill – refine position & size */ #SiteHeader .rx-cart-pill { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #c94a3b; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; } /* icon wrapper so badge is correctly anchored */ #SiteHeader .rx-cart-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } /* ============ MOBILE ============ */ @media (max-width: 768px) { /* Kerastase-style compact row */ #SiteHeader .site-header__element--top > .page-width { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; } /* Burger on the far left */ #SiteHeader .site-nav__link--icon.mobile-nav-trigger { margin-right: 8px; } /* Centre logo cleanly */ #SiteHeader .header-item--logo { flex: 1 1 auto; display: flex; justify-content: center; } #SiteHeader .site-header__logo-link { margin: 0 auto; } /* Icons cluster on the right */ #SiteHeader .header-item--icons { flex: 0 0 auto; display: flex; justify-content: flex-end; } #SiteHeader .header-item--icons .site-nav__icons { display: flex; align-items: center; } #SiteHeader .header-item--icons .site-nav__link--icon { padding-left: 8px; padding-right: 8px; } /* Slightly smaller logo on very small phones */ @media (max-width: 400px) { #SiteHeader .site-header__logo img { max-height: 23px; } } /* Mobile search bar immediately under header (your current layout) */ .site-header__element--sub[data-type="search"] .page-width { padding-top: 8px; padding-bottom: 10px; } } /* ============================================ RX – Mobile header: burger left, logo centre, icons right ============================================ */ @media (max-width: 768px) { /* Top row layout */ #SiteHeader .site-header__element--top > .page-width { position: relative; display: flex; align-items: center; justify-content: center; /* centre logo block */ padding: 10px 16px; } /* Logo stays in the middle */ #SiteHeader .header-item--logo { flex: 0 0 auto; margin: 0; text-align: center; } /* Icons cluster on the right (search / account / cart) */ #SiteHeader .header-item--icons { flex: 0 0 auto; margin-left: auto; justify-content: flex-end; } #SiteHeader .header-item--icons .site-nav__icons { display: flex; align-items: center; } /* Burger button forced to absolute left so it never overlaps logo */ #SiteHeader .site-nav__link--icon.mobile-nav-trigger { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; padding: 0 !important; } } /* ============================================ RX – Home icon badge next to logo (mobile) ============================================ */ @media (max-width: 768px) { .site-header__logo-link { position: relative; display: inline-flex; align-items: center; } .site-header__logo-link::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 6px; /* simple house outline, inherits text colour */ background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; background-position: center; } } /* Hide that extra home icon on larger screens */ @media (min-width: 769px) { .site-header__logo-link::after { display: none; } } /* ============================================ RX – Desktop header polish ============================================ */ /* Slight bottom border for the whole header bar */ @media (min-width: 769px) { .site-header__element--top { border-bottom: 1px solid rgba(0, 0, 0, 0.06); } } /* When header compresses on scroll, add a soft shadow */ .header-wrapper--compressed .site-header__element--top { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } /* Desktop nav: cleaner, more “luxury” spacing */ @media (min-width: 769px) { .site-header__element--sub[data-type="nav"] .site-nav__link { text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; padding-top: 14px; padding-bottom: 14px; } } /* Search bar – subtle pill look on desktop */ @media (min-width: 769px) { .site-header .header-item--search .search-form__input { border-radius: 999px; } } /* =========================== RX HEADER TWEAKS (2025-11-18) =========================== */ /* 2. Desktop: center the main navigation row */ @media (min-width: 769px) { /* Center the nav container */ .site-header__element--sub[data-type="nav"] .page-width { text-align: center; } /* Make the nav list itself inline & centered */ .site-header__element--sub[data-type="nav"] .site-nav { display: inline-flex; justify-content: center; } } /* 3. Bigger logo (both) */ #SiteHeader .site-header__logo img { height: auto; } /* Desktop logo size */ @media (min-width: 769px) { #SiteHeader .site-header__logo img { width: 190px !important; /* tweak as you like (180–220) */ } } /* Mobile logo size */ @media (max-width: 768px) { #SiteHeader .site-header__logo img { width: 150px !important; /* tweak as you like (130–170) */ } } /* 4. Mobile header: keep logo and home icon on SAME LINE, centered */ @media (max-width: 768px) { /* Center the logo block itself */ #SiteHeader .header-item--logo { display: flex; justify-content: center; } /* Make logo + home icon sit in a row with a small gap */ #SiteHeader .site-header__logo-link { display: inline-flex; align-items: center; gap: 6px; } /* Home icon next to logo, not below */ #SiteHeader .rxf-home-icon { display: inline-flex; align-items: center; margin: 0; position: static; } /* Keep header icons cluster on the right */ #SiteHeader .header-item--icons { margin-left: auto; justify-content: flex-end; } } /* Fix mobile logo + home icon alignment */ @media (max-width: 768px) { /* Logo row = logo + home side-by-side */ #SiteHeader .site-header__logo-link { display: inline-flex; align-items: center; gap: 6px; /* space between logo and home */ } /* Home icon: no more below/overlap */ #SiteHeader .site-header__logo .rxf-home-icon { position: static !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; transform: none !important; } } /* === RX HEADER FIX PACK v2 (mobile + logo size) === */ /* MOBILE – logo + single home icon in the middle */ @media (max-width: 768px) { /* Center the logo block */ #SiteHeader .header-item--logo { display: flex; justify-content: center; align-items: center; } /* Make logo + home sit in one row */ #SiteHeader .site-header__logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; } /* Bigger logo on mobile (override theme limits) */ #SiteHeader .site-header__logo img { max-width: 150px !important; height: auto !important; } /* Home icon that lives WITH the logo – keep it inline */ #SiteHeader .site-header__logo .rxf-home-icon { position: static !important; transform: none !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; } /* Hide any extra home icon in the right-side icon cluster on mobile */ #SiteHeader .header-item--icons a[href="/"], #SiteHeader .header-item--icons .rxf-home-icon { display: none !important; } } /* DESKTOP – bigger logo + keep nav centered row below */ @media (min-width: 769px) { /* Bigger logo on desktop */ #SiteHeader .site-header__logo img { max-width: 220px !important; height: auto !important; } /* Ensure the nav row is centered */ #SiteHeader .site-header__element--sub[data-type="nav"] .page-width { display: flex; justify-content: center; } } /* Remove Expanse-imposed logo height limits */ #SiteHeader .site-header__logo img { max-height: none !important; height: auto !important; width: 160px !important; /* adjust as needed */ } /* Full mobile header structure */ @media (max-width: 768px) { /* Force the entire top row to be a clean flex layout */ .site-header__element--top > .page-width { display: flex !important; align-items: center !important; justify-content: space-between !important; position: relative; padding: 10px 16px !important; } /* Burger stays left */ .mobile-nav-trigger { order: 1; } /* Logo centered visually */ .header-item--logo { order: 2; margin: 0 auto !important; padding: 0 !important; text-align: center !important; flex: 0 1 auto !important; } .header-item--logo img { width: 150px !important; } /* Home icon immediately after logo */ .rxf-mobile-home-icon { order: 3; margin-left: 6px; margin-right: auto; /* pushes profile + cart to right */ } /* Profile + Cart right aligned */ .header-item--icons { order: 4; display: flex !important; align-items: center !important; gap: 20px !important; margin-left: auto !important; } /* Make icons uniform */ .site-nav__link--icon svg { width: 26px !important; height: 26px !important; } /* Cart bubble premium look */ .cart-count-bubble { background: #D3544B !important; font-size: 13px !important; width: 22px !important; height: 22px !important; } } /* === RX – Premium logo sizing === */ .site-header__logo img { max-height: none !important; height: auto !important; width: 180px !important; /* desktop size – tweak if needed */ } /* Slightly smaller on mobile so it doesn’t dominate */ @media (max-width: 768px) { .site-header__logo img { width: 150px !important; } } /* RX – force search icon to show on mobile header */ @media (max-width: 768px) { .header-wrapper [data-nav="below"] .js-search-header { display: flex !important; align-items: center; padding-left: calc(var(--site-nav-item-padding) / 2); padding-right: calc(var(--site-nav-item-padding) / 2); } } /* === FINAL OVERRIDE – always show search icon on mobile === */ @media (max-width: 768px) { #SiteHeader .site-nav__link.js-search-header, #SiteHeader .site-nav__link--icon.js-search-header { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 8px !important; visibility: visible !important; opacity: 1 !important; } } /* Hide inline desktop search box, keep the dedicated search row */ .header-item--search { display: none !important; } /* =========================================== RX – Announcement bar (old-theme style) Cosmetic only, v8 structure unchanged =========================================== */ /* Make the whole toolbar feel like a clean band */ .toolbar { background: #000000; /* change if you want a different bar color */ color: #ffffff; } /* Announcement item layout */ .toolbar__item--announcements { flex: 1 1 auto; } /* Core announcement bar styling */ .toolbar__item--announcements .announcement-bar { padding: 6px 0; font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; } /* Inner text container */ .toolbar__item--announcements .announcement-bar__message-inner p { margin: 0; } /* Links inside announcement */ .toolbar__item--announcements .announcement-bar__message-inner a { color: inherit; text-decoration: none; } .toolbar__item--announcements .announcement-bar__message-inner a:hover { text-decoration: underline; } /* If there are multiple slides, keep controls subtle & aligned */ .toolbar__item--announcements .announcement-bar .slideshow__controls { margin-left: 12px; } .toolbar__item--announcements .announcement-bar .slideshow__arrows { gap: 4px; } .toolbar__item--announcements .announcement-bar .slideshow__arrows button { width: 20px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: none; } /* Dots (if used) – small & understated */ .toolbar__item--announcements .announcement-bar .slideshow__dots { gap: 4px; } .toolbar__item--announcements .announcement-bar .slideshow__dots button { width: 5px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); border: none; } .toolbar__item--announcements .announcement-bar .slideshow__dots button.is-active { background: #ffffff; } /* Mobile – center the bar and keep it clean */ @media (max-width: 768px) { .toolbar__content { justify-content: center; } .toolbar__item--announcements { text-align: center; width: 100%; } .toolbar__item--announcements .announcement-bar { padding: 8px 10px; font-size: 10px; letter-spacing: 0.14em; } .toolbar__item--announcements .announcement-bar__message-inner { justify-content: center; } } /* ========================================= RX – Announcement bar (v7 look & feel) ========================================= */ .toolbar-section .toolbar { position: relative; z-index: 30; /* sit above any header overlay */ background-color: #000000 !important; color: #ffffff !important; padding: 6px 0 !important; box-shadow: none !important; } .toolbar-section .toolbar__content { display: flex; justify-content: center !important; align-items: center; gap: 8px; } /* Text style – similar to old live theme */ .toolbar-section .toolbar__content p, .toolbar-section .toolbar__content a { margin: 0; font-family: 'Lato', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff !important; text-decoration: none; } /* Highlighted words (FREE SHIPPING / CASH-ON-DELIVERY) */ .toolbar-section .toolbar__content b, .toolbar-section .toolbar__content strong { color: #ffc94b !important; /* tweak this yellow if needed */ } /* Mobile tweaks */ @media (max-width: 768px) { .toolbar-section .toolbar { padding: 5px 8px !important; } .toolbar-section .toolbar__content { text-align: center; flex-wrap: wrap; gap: 4px; } .toolbar-section .toolbar__content p, .toolbar-section .toolbar__content a { font-size: 11px; letter-spacing: 0.12em; } } /* RX – clean announcement bar background, no extra overlays */ .header-wrapper--overlay::after { background: none !important; /* kill the gradient sheet */ } /* Remove toolbar’s subtle bottom overlay line */ .toolbar::after { border-bottom: 0 !important; } /* Limit our black background to just the header toolbar, not every .toolbar everywhere */ body .toolbar-section .toolbar { background: #000 !important; } body .toolbar::before, body .toolbar::after { background: transparent !important; } /* RX – Remove dark overlay / shadow from announcement text */ .toolbar-section .toolbar, .toolbar-section .toolbar__content, .toolbar-section .toolbar__content * { text-shadow: none !important; opacity: 1 !important; } /* Optional: force clear colors like old theme */ .toolbar-section .toolbar__content, .toolbar-section .toolbar__content p, .toolbar-section .toolbar__content span { color: #ffffff !important; } /* If you use a highlighted part (e.g. FREE SHIPPING / CASH-ON-DELIVERY) */ .toolbar-section .toolbar__content strong, .toolbar-section .toolbar__content b { color: #f8d34a !important; /* tweak to your yellow */ } /* ===== FINAL KILL-SWITCH FOR ANNOUNCEMENT OVERLAY ===== */ /* Remove ALL unwanted filters or overlays affecting announcement text */ .toolbar-section, .toolbar-section *, .toolbar, .toolbar *, .announcement-bar, .announcement-bar * { text-shadow: none !important; -webkit-text-stroke: 0 !important; filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; background-image: none !important; } /* Force clean black background & clean white text */ .toolbar-section { background-color: #000000 !important; } .toolbar-section p, .toolbar-section a, .toolbar-section strong, .toolbar-section b { color: #ffffff !important; text-shadow: none !important; filter: none !important; opacity: 1 !important; } /* Gold highlight */ .toolbar-section p strong, .toolbar-section p b { color: #ffc94b !important; } /* ==== RX – Fix announcement bar text, remove overlay/gradient ==== */ .toolbar-section .toolbar__content, .toolbar-section .toolbar__content p { color: #ffffff !important; /* main text solid white */ opacity: 1 !important; /* no dimming */ text-shadow: none !important; /* kill glow / shadow */ filter: none !important; /* kill any blur/filter */ mix-blend-mode: normal !important; /* no blend tricks */ background: none !important; /* no bg gradients on text */ -webkit-background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; } /* Highlighted words (FREE SHIPPING, CASH-ON-DELIVERY) */ .toolbar-section .toolbar__content p strong, .toolbar-section .toolbar__content p b { color: #ffc94b !important; /* solid gold, no overlay */ text-shadow: none !important; filter: none !important; mix-blend-mode: normal !important; background: none !important; -webkit-background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; } /* FORCE REMOVE ALL OVERLAYS / GRADIENTS FROM TOP */ .header-wrapper, .header-wrapper--overlay, .toolbar, .toolbar-section, .toolbar__content, #shopify-section-toolbar, .site-header, .toolbar-section .toolbar, .toolbar-section .toolbar__content { background-image: none !important; background: #000 !important; /* your desired solid black */ } /* Remove any ::after gradient layers added by theme */ .header-wrapper--overlay::after, .toolbar::after, .toolbar-section::after, #shopify-section-toolbar::after { background: none !important; content: none !important; } /* RX – Completely remove unwanted header overlay gradient */ .header-wrapper--overlay:after { display: none !important; background: none !important; opacity: 0 !important; } /* Kill any gradient on toolbar / announcement bar */ .toolbar, .toolbar-section, .toolbar__content, #shopify-section-toolbar { background: #000 !important; background-image: none !important; } #shopify-section-toolbar * { text-shadow: none !important; } /* ===== RX – HARD RESET FOR ANNOUNCEMENT TEXT ===== */ #AnnouncementSlider, #AnnouncementSlider * { background: #000 !important; /* solid black bar */ color: #f5f7ff !important; /* main text colour */ text-shadow: none !important; /* kill any glow / shadow */ -webkit-text-stroke: 0 !important; /* kill outlines (Safari/Chrome) */ text-stroke: 0 !important; mix-blend-mode: normal !important; /* no blending with background */ filter: none !important; /* no extra filters */ opacity: 1 !important; /* ensure full brightness */ } /* gold highlight words */ #AnnouncementSlider strong, #AnnouncementSlider b { color: #ffc94b !important; } /* === RX: Hard reset for announcement bar text/overlay === */ #shopify-section-toolbar, #shopify-section-toolbar .toolbar, #shopify-section-toolbar .toolbar__content, #shopify-section-toolbar .toolbar__item--announcements, #shopify-section-toolbar .toolbar__item--announcements *, #AnnouncementSlider, #AnnouncementSlider * { background: #000 !important; background-image: none !important; color: #ffffff !important; text-shadow: none !important; mix-blend-mode: normal !important; -webkit-text-stroke: 0 !important; filter: none !important; opacity: 1 !important; } /* Remove any pseudo-element overlays or gradients */ #shopify-section-toolbar .toolbar::before, #shopify-section-toolbar .toolbar::after, #shopify-section-toolbar .toolbar__item--announcements::before, #shopify-section-toolbar .toolbar__item--announcements::after, #AnnouncementSlider::before, #AnnouncementSlider::after { content: none !important; background: none !important; box-shadow: none !important; opacity: 0 !important; } /* Gold highlight like your old theme */ #AnnouncementSlider strong, #AnnouncementSlider b { color: #ffd54d !important; font-weight: 700; } .rxFaqList{ list-style:none; padding-left:0; margin:0; } .rxFaq + .rxFaq{ margin-top:0.75em; } .rxFaq p{ margin:0 0 .25em; } .rxFaq p:last-child{ margin-bottom:0; } /* ============================ Premium FAQ Styling – Reflexions v8 ============================ */ .rxFaqWrapper { padding: 0; margin: 0; } .rxFaqItem { margin: 0 0 18px 0; padding: 16px 18px; border: 1px solid #ececec; border-radius: 8px; background: #fafafa; } .rxFaqItem:last-child { margin-bottom: 0; } .rxFaqQ { margin: 0 0 6px 0; font-weight: 600; font-size: 15px; line-height: 1.4; color: #000; } .rxFaqA { margin: 0; font-size: 14px; line-height: 1.65; color: #444; } /* Remove default list bullet that was appearing */ .rxFaqList, .rxFaqList li { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } /* Accordion summary style alignment */ .rxAcc summary { font-weight: 600; font-size: 16px; } /* ================================ RX HOMEPAGE – FINAL POLISH ================================ */ /* 1. Base background + vertical rhythm on home */ body.template-index{ background:#f9f7f2; } body.template-index main.main-content{ padding-top:10px; } body.template-index .shopify-section{ padding:32px 0; } body.template-index .shopify-section:first-of-type{ padding-top:16px; } body.template-index .shopify-section:last-of-type{ padding-bottom:40px; } /* Avoid double spacing where inner section already has padding */ body.template-index .shopify-section .index-section, body.template-index .shopify-section .slideshow-section{ margin:0; padding:0; } /* 2. Align all inner content to one page width */ body.template-index .shopify-section > .page-width, body.template-index .shopify-section .page-width{ max-width:var(--rx-page-max); margin-inline:auto; } /* Hero & image banner sit closer to header */ body.template-index .index-section--hero, body.template-index .index-section--image-banner{ padding-top:0; padding-bottom:26px; } body.template-index .index-section--hero .page-width, body.template-index .index-section--image-banner .page-width{ padding-inline:20px; } /* 3. Trust strip: white card, perfectly aligned */ body.template-index .rxf-trust-strip{ background:#fff; border-radius:16px; padding-block:18px; } /* 4. Featured collection / product rail section shell */ body.template-index .featured-collection-custom, body.template-index .shopify-section .featured-collection{ background:#fdfbf7; border-radius:18px; padding-block:24px; } /* 5. Section headings – one style */ body.template-index .section-header__title, body.template-index .featured-collection-custom .heading, body.template-index .index-section .section-header__title{ font-family:"Playfair Display",serif; font-weight:600; letter-spacing:-0.02em; font-size:clamp(22px,2.4vw,28px); text-align:center; margin:0 0 8px; } body.template-index .section-header__subheading{ font-size:13px; color:#666; text-align:center; } /* ================================ HOMEPAGE PRODUCT CARDS – UNIFIED ================================ */ /* Base card shell (grid + featured section) */ body.template-index .grid .card-wrapper, body.template-index .featured-collection-custom .rxf-card .card-wrapper{ display:flex; flex-direction:column; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:14px; overflow:hidden; height:100%; transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease; } /* Hover state */ body.template-index .grid .card-wrapper:hover, body.template-index .featured-collection-custom .rxf-card .card-wrapper:hover{ border-color:var(--luxury-gold); box-shadow:0 8px 20px rgba(0,0,0,0.08); transform:translateY(-3px); } /* Image area */ body.template-index .grid .card__media, body.template-index .featured-collection-custom .rxf-card .card__media{ position:relative; display:flex; align-items:center; justify-content:center; height:240px; padding:16px 12px; background:#fff; border-bottom:1px solid rgba(0,0,0,0.06); } body.template-index .grid .card__media img, body.template-index .featured-collection-custom .rxf-card .card__media img{ width:100%; height:100%; object-fit:contain; transition:transform .35s ease; } body.template-index .grid .card-wrapper:hover .card__media img, body.template-index .featured-collection-custom .rxf-card .card-wrapper:hover .card__media img{ transform:scale(1.03); } /* Quick action icons – always inside the rounded corner */ body.template-index .featured-collection-custom .rxf-card .grid-product__actions, body.template-index .grid .grid-product__actions{ position:absolute; top:10px; right:10px; z-index:3; } /* Text block */ body.template-index .grid [class*="card__information"], body.template-index .grid [class*="card-information"], body.template-index .featured-collection-custom .rxf-card [class*="card__information"], body.template-index .featured-collection-custom .rxf-card [class*="card-information"]{ flex:1 1 auto; display:flex; flex-direction:column; text-align:center; padding:12px 12px 14px; } /* Titles */ body.template-index .grid [class*="card__heading"], body.template-index .featured-collection-custom .rxf-card [class*="card__heading"]{ font-family:"Inter",system-ui,sans-serif; font-size:14px; font-weight:500; color:#111; line-height:1.45; margin:6px 0 4px; min-height:44px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Prices */ body.template-index .grid .price, body.template-index .featured-collection-custom .rxf-card .price{ margin-top:auto; font-family:"Playfair Display",serif; font-weight:600; font-size:15px; color:#000; display:inline-flex; gap:6px; align-items:baseline; justify-content:center; line-height:1.1; } body.template-index .grid .price .price-item--regular, body.template-index .featured-collection-custom .rxf-card .price .price-item--regular{ font-family:"Inter",system-ui,sans-serif; font-size:14px; font-weight:400; color:#888; text-decoration:line-through; } /* ================================ MOBILE LAYOUT – 2 COLS + SWIPE ================================ */ @media (max-width: 768px){ /* 2 columns on normal grids */ body.template-index .index-section .grid.grid--uniform{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:14px; } body.template-index .grid .card__media, body.template-index .featured-collection-custom .rxf-card .card__media{ height:210px; } /* Horizontal swipe rail for the custom featured section */ body.template-index .featured-collection-custom .rxf-collection-grid{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; gap:14px; padding:2px 2px 10px; } body.template-index .featured-collection-custom .rxf-card{ flex:0 0 72vw; scroll-snap-align:start; } body.template-index .featured-collection-custom .rxf-collection-grid::-webkit-scrollbar{ display:none; } } /* Home – tighten vertical rhythm on desktop only */ @media (min-width: 1025px){ body.template-index .index-section{ padding-top: 32px; padding-bottom: 32px; } /* Hero sits a bit closer to header */ body.template-index .index-section--hero{ padding-top: 8px; padding-bottom: 32px; } /* Last content section before footer – reduce bottom gap */ body.template-index .shopify-section:last-of-type{ padding-bottom: 16px; } } /* ========================================= RX – HEADER HEIGHT + HOME SPACING + FEATURED COLLECTION ========================================= */ /* 1. HEADER – SHORTER ON DESKTOP & MOBILE */ /* Common: slimmer nav links */ .site-nav__link{ padding-top: 8px !important; padding-bottom: 8px !important; line-height: 1.2; } /* Desktop header */ @media (min-width: 769px){ #SiteHeader .site-header__element--top{ padding: 6px 0 !important; } #SiteHeader .site-header__logo{ margin: 2px 0 !important; } #SiteHeader .site-header__logo-image{ max-height: 34px !important; } /* Desktop search row – tighter and centered */ .site-header__element--sub{ padding: 0 !important; } .site-header__search-container{ max-width: 560px; margin: 4px auto 10px !important; } } /* Mobile header */ @media (max-width: 768px){ #SiteHeader .site-header__element--top{ padding: 3px 0 !important; } #SiteHeader .site-header__logo{ margin: 2px 0 !important; } #SiteHeader .site-header__logo-image{ max-height: 26px !important; } /* Compact mobile search row */ .site-header__element--sub{ padding: 0 !important; } .site-header__search-container{ padding: 2px 16px 6px !important; } .site-header__search-container input[type="search"], .site-header__search-container .search__input{ height: 38px !important; font-size: 13px; } } /* Small, consistent gap between header and first section */ body.template-index main.main-content{ padding-top: 6px !important; } /* 2. HOME – TIGHTER, EVEN SPACING BETWEEN SECTIONS */ body.template-index .index-section{ padding-top: 28px; padding-bottom: 28px; } body.template-index .index-section--hero{ padding-top: 0; padding-bottom: 24px; } /* Optional: slightly closer link between “Why Shop With Us” and first product rail */ body.template-index .index-section--hero + .index-section{ padding-top: 18px; } /* 3. REFLEXIONS FEATURED COLLECTION – TITLE + NEATER BLOCK */ /* Shell for the custom featured collection section */ .featured-collection-custom{ padding-top: 10px; padding-bottom: 10px; } /* Visible, elegant section title (e.g. “Best Sellers”) */ .featured-collection-custom .section-header__title{ font-family:"Playfair Display",serif; font-weight:600; font-size:24px; letter-spacing:-0.02em; text-align:center; margin:0 0 14px; } /* Make the product rail feel like one neat card strip */ .featured-collection-custom .rxf-collection-grid{ gap:16px; } /* Keep cards reasonably narrow on desktop so the row doesn’t feel “heavy” */ @media (min-width: 1025px){ .featured-collection-custom .rxf-card{ max-width: 240px; } } /* ============================ RX – Featured Collection Cleanup ============================ */ /* Align the block with other sections and give breathing room */ body.template-index .featured-collection-custom{ max-width: 1240px; margin: 0 auto !important; padding: 10px 24px 30px !important; } /* Section title (uses the “Section heading” field) */ body.template-index .featured-collection-custom .section-header__title{ font-family:"Playfair Display",serif; font-weight:600; letter-spacing:-0.02em; font-size:24px; text-align:center; margin:0 0 18px; } /* Keep the product rail centered, not touching the edges */ body.template-index .featured-collection-custom .rxf-collection-grid{ max-width: 1200px; margin: 0 auto !important; } /* Same card + hover treatment as other product sections */ body.template-index .featured-collection-custom .rxf-card{ border-radius:14px; border:1px solid rgba(0,0,0,0.08); background:#fff; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; } body.template-index .featured-collection-custom .rxf-card:hover{ border-color:var(--luxury-gold, #C9A646) !important; /* gold outline */ box-shadow:0 8px 20px rgba(0,0,0,0.08); transform:translateY(-3px); } /* Let Best Sellers cards lift without clipping */ body.template-index .featured-collection-custom .rxf-collection-grid{ overflow-x: auto !important; overflow-y: visible !important; /* no vertical clipping */ } body.template-index .featured-collection-custom .rxf-collection-grid{ overflow-x: auto !important; overflow-y: visible !important; margin-top: 20px; } /* ==== RX – Best Sellers rail: fix clipped gold border ==== */ /* Remove Expanse's inner card borders so only our wrapper border shows */ body.template-index .featured-collection-custom .rxf-card .card, body.template-index .featured-collection-custom .rxf-card .card__inner, body.template-index .featured-collection-custom .rxf-card .card--product, body.template-index .featured-collection-custom .rxf-card .product-card { border: none !important; box-shadow: none !important; overflow: visible !important; /* make sure nothing cuts the outline */ } /* Extra safety: card wrapper owns the radius + border */ body.template-index .featured-collection-custom .rxf-card .card-wrapper { border-radius: 14px; overflow: hidden; } /* Rail itself can let the lifted card breathe vertically */ body.template-index .featured-collection-custom .rxf-collection-grid { overflow-x: auto !important; overflow-y: visible !important; padding-top: 8px; padding-bottom: 16px; } /* === RX – stop card lift on homepage (fix clipped top border) === */ body.template-index .card-wrapper:hover, body.template-index .rxf-card .card-wrapper:hover { transform: none !important; /* no upwards move = nothing to clip */ } /* ========================================= RX – STOP CARDS / BORDERS FROM CLIPPING (Home page only) ========================================= */ /* Main section wrappers */ body.template-index .shopify-section, body.template-index .shopify-section .index-section, body.template-index .shopify-section .index-section--flush, body.template-index .shopify-section .index-section--flush .page-width, body.template-index .shopify-section .index-section .page-width { overflow: visible !important; } /* Trust strip / icon blocks & other card rows */ body.template-index .icon-row, body.template-index .icon-row__item, body.template-index .rxf-trust-strip, body.template-index .rxf-collection-grid { overflow: visible !important; } /* ========================================= RX – Fix top clipping on homepage cards (Best Sellers + Why Shop With Us) ========================================= */ /* 1. "Why Shop With Us" trust cards - add a small top pad so the lift doesn't hit section boundary - let each card overflow visibly */ body.template-index .index-section--icons-row .icon-row{ padding-top: 8px !important; padding-bottom: 8px !important; } body.template-index .index-section--icons-row .icon-row__item{ overflow: visible !important; } /* Optional: very gentle lift on hover, to stay well inside */ body.template-index .index-section--icons-row .icon-row__item:hover{ transform: translateY(-2px); } /* 2. "Best Sellers" featured rail - extra top padding for the rail - allow vertical overflow so gold border + badges stay visible */ body.template-index .featured-collection-custom{ padding-top: 16px !important; } body.template-index .featured-collection-custom .rxf-collection-grid{ padding-top: 8px !important; padding-bottom: 16px !important; overflow-y: visible !important; } /* Slightly smaller lift so we don't collide with the section top */ body.template-index .featured-collection-custom .rxf-card:hover{ transform: translateY(-2px); } /* RX – ensure trust badges never clip when lifted */ body.template-index .rxf-trust-carousel, body.template-index .rxf-trust-carousel__track { overflow: visible !important; } /* === DESKTOP HEADER – compact === */ @media (min-width: 769px) { /* Top logo row */ #SiteHeader .site-header__element--top { padding: 6px 0 !important; } #SiteHeader .site-header__logo { margin: 2px 0 !important; } #SiteHeader .site-header__logo-image, #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { max-height: 32px !important; /* tweak 30–34 if you like */ height: auto !important; } /* Nav row just under logo – slimmer */ .site-header__element--sub[data-type="nav"] { padding: 0 !important; } .site-header__element--sub[data-type="nav"] .page-width { padding-top: 4px !important; padding-bottom: 4px !important; } .site-header__element--sub[data-type="nav"] .site-nav__link { padding-top: 8px !important; padding-bottom: 8px !important; } } /* === MOBILE HEADER – shorter logo band + compact search === */ @media (max-width: 768px) { /* Logo row */ #SiteHeader .site-header__element--top > .page-width { padding: 6px 14px !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } #SiteHeader .site-header__logo { margin: 0 !important; } #SiteHeader .site-header__logo-image, #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { max-height: 24px !important; height: auto !important; } /* Search row under header */ .site-header__element--sub[data-type="search"] { padding: 0 !important; } .site-header__element--sub[data-type="search"] .page-width { padding: 4px 14px 6px !important; } .site-header__search-container input[type="search"], .site-header__search-container .search__input { height: 36–38px !important; font-size: 13px; } } /* === RX HEADER COMPACT MODE === */ /* 0. Announcement bar – slimmer */ #shopify-section-toolbar .toolbar { padding: 4px 0 !important; } /* Remove any artificial gap between toolbar and header */ #shopify-section-toolbar + .header-section .site-header { margin-top: 0 !important; } /* ---------- Desktop (>= 769px) ---------- */ @media (min-width: 769px) { /* Top logo row – shorter */ .header-section .site-header__element--top { padding: 6px 0 !important; } .header-section .site-header__logo { margin: 2px 0 !important; } .header-section .site-header__logo img { max-height: 32px !important; height: auto !important; } /* Kill the big search row on desktop; keep only search icon */ .header-section .site-header__element--sub[data-type="search"] { display: none !important; } /* Nav row – tighter vertical padding */ .header-section .site-header__element--sub[data-type="nav"] .page-width { padding-top: 4px !important; padding-bottom: 4px !important; } .header-section .site-header__element--sub[data-type="nav"] .site-nav__link { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 13px; } } /* ---------- Mobile (<= 768px) ---------- */ @media (max-width: 768px) { /* Top logo row – compact */ .header-section .site-header__element--top > .page-width { padding: 6px 14px !important; min-height: 48px !important; display: flex; align-items: center; justify-content: space-between; } .header-section .site-header__logo img { max-height: 26px !important; height: auto !important; } /* Keep burger left, logo centre, icons right (layout you have now) */ .header-section .site-nav__link--icon.mobile-nav-trigger { margin-right: 8px; } .header-section .header-item--logo { flex: 1 1 auto; display: flex; justify-content: center; } .header-section .header-item--icons { flex: 0 0 auto; display: flex; justify-content: flex-end; } /* Search row right under header – but shorter */ .header-section .site-header__element--sub[data-type="search"] .page-width { padding: 4px 12px 6px !important; } .header-section .site-header__element--sub[data-type="search"] input[type="search"], .header-section .site-header__element--sub[data-type="search"] .search__input { height: 36px !important; font-size: 13px; } /* Slightly reduce gap before page content on mobile */ body.template-index main.main-content { padding-top: 4px !important; } } /* === RX FINAL HEADER TUNE === */ /* 1. BIGGER LOGO, STILL COMPACT HEADER */ /* Desktop logo size */ @media (min-width: 769px){ .header-section .site-header__logo img, #SiteHeader .site-header__logo img{ width: auto !important; height: 40px !important; max-height: 40px !important; object-fit: contain !important; } } /* Mobile logo size */ @media (max-width: 768px){ .header-section .site-header__logo img, #SiteHeader .site-header__logo img{ width: auto !important; height: 34px !important; max-height: 34px !important; object-fit: contain !important; } } /* 2. ANNOUNCEMENT BAR – THINNER BAND */ #shopify-section-toolbar .toolbar{ padding: 3px 0 !important; /* less vertical height */ } #shopify-section-toolbar .toolbar__content p, #shopify-section-toolbar .toolbar__content a{ font-size: 11px !important; letter-spacing: 0.12em !important; } /* 3. REMOVE THE FULL-WIDTH SEARCH ROW (KEEP ICON) */ .header-section .site-header__element--sub[data-type="search"]{ display: none !important; } /* 4. NAV ROW PADDING – KEEP IT TIGHT */ @media (min-width: 769px){ .header-section .site-header__element--sub[data-type="nav"] .site-nav__link{ padding-top: 8px !important; padding-bottom: 8px !important; } } /* 5. MOBILE TOP ROW – SMALLER BUT COMFY */ @media (max-width: 768px){ .header-section .site-header__element--top > .page-width{ padding: 6px 14px !important; min-height: 48px !important; } } /* ==== RX – COMPACT TOP STACK (ANNOUNCEMENT + HEADER + HERO) ==== */ /* 1. Announcement bar: much shorter band */ #shopify-section-toolbar .toolbar{ padding: 2px 0 !important; /* was ~6–8px */ min-height: 0 !important; } #shopify-section-toolbar .toolbar__content{ padding-block: 0 !important; } #shopify-section-toolbar .toolbar__content p, #shopify-section-toolbar .toolbar__content a{ margin: 0 !important; font-size: 10px !important; /* slightly smaller text */ letter-spacing: 0.12em !important; line-height: 1.3 !important; } /* 2. Remove any gap between announcement bar and main header */ #shopify-section-toolbar, #shopify-section-toolbar .toolbar{ margin-bottom: 0 !important; } #shopify-section-toolbar + .header-section{ margin-top: 0 !important; } /* 3. Make the white header row itself slimmer */ .header-section .site-header__element--top{ padding: 4px 0 !important; } .header-section .site-header__element--top > .page-width{ padding-top: 4px !important; padding-bottom: 4px !important; } /* 4. Kill extra space before the hero on home */ body.template-index main.main-content{ padding-top: 0 !important; } body.template-index .shopify-section:first-of-type{ margin-top: 0 !important; padding-top: 0 !important; } body.template-index .index-section--hero, body.template-index .slideshow-section{ margin-top: 0 !important; padding-top: 0 !important; } /* ========================= RX – HEADER CLEANUP RESET ========================= */ /* 1. Kill ALL custom home icons near the logo or in the icon row */ .site-header__logo-link::after, .site-header__logo .rxf-home-icon, .rxf-home-icon, .rxf-mobile-home-icon { display: none !important; content: none !important; } /* 2. Slimmer announcement bar */ #shopify-section-toolbar .toolbar { padding: 4px 8px !important; } #shopify-section-toolbar .toolbar__content p, #shopify-section-toolbar .toolbar__content a { font-size: 11px !important; line-height: 1.3 !important; } /* 3. Remove beige gap between announcement bar and header */ #shopify-section-toolbar { margin-bottom: 0 !important; } #shopify-section-toolbar .toolbar { margin-bottom: 0 !important; border-bottom: 0 !important; } #shopify-section-header, .header-section { margin-top: 0 !important; padding-top: 0 !important; } /* Force header background to be clean white */ #SiteHeader, .header-section .site-header { background-color: #ffffff !important; } /* 4. MOBILE ONLY: hide full-width search row, keep the search icon */ @media (max-width: 768px) { .site-header__element--sub[data-type="search"] { display: none !important; } /* Pull the page content up a bit since we removed that row */ main.main-content { padding-top: 0 !important; } } /* ===== RX FINAL HEADER TWEAK PACK ===== */ /* 1) Shorter announcement bar (desktop + mobile) */ #shopify-section-toolbar .toolbar { padding: 2px 0 !important; /* was ~8px+ */ margin: 0 !important; border-bottom: 0 !important; } #shopify-section-toolbar .toolbar__content { min-height: 0 !important; } #shopify-section-toolbar .toolbar__content p, #shopify-section-toolbar .toolbar__content a { font-size: 11px !important; line-height: 1.3 !important; } /* Remove beige strip between announcement and header */ .toolbar-section { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* 2) Logo bigger, header not chunky */ #SiteHeader .site-header__element--top { padding: 4px 0 !important; /* tighter top bar */ } /* desktop + mobile logo sizing */ #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { height: auto !important; max-height: 38px !important; /* nice size without making header tall */ width: auto !important; } /* 3) Kill extra space before hero on home */ body.template-index main.main-content { margin-top: 0 !important; padding-top: 0 !important; } /* hero section itself should start right under header */ body.template-index .index-section--hero, body.template-index .slideshow-section { margin-top: 0 !important; padding-top: 0 !important; } /* Also remove any header-wrapper gap */ .header-wrapper, .header-wrapper--overlay { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* === RX LOGO SIZE OVERRIDE === */ #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { height: auto !important; max-height: 42px !important; /* adjust to taste: 40–46 */ width: auto !important; } @media (max-width: 768px) { #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { max-height: 40px !important; } } /* === RX HOME: NO GAP BEFORE HERO === */ body.template-index .header-wrapper, body.template-index .header-wrapper--overlay { margin-bottom: 0 !important; padding-bottom: 0 !important; } body.template-index main.main-content { margin-top: 0 !important; padding-top: 0 !important; } body.template-index .index-section--hero, body.template-index .slideshow-section { margin-top: 0 !important; padding-top: 0 !important; } /* === RX FINAL PATCH – HEADER / HERO / ANNOUNCEMENT === */ /* 1) Compact announcement bar (black strip) */ #shopify-section-toolbar .toolbar { padding: 3px 0 !important; /* reduce top & bottom padding */ } #shopify-section-toolbar .toolbar__content { min-height: 0 !important; } #shopify-section-toolbar .toolbar__content p, #shopify-section-toolbar .toolbar__content span { font-size: 10px !important; /* slightly smaller text */ line-height: 1.2 !important; } /* 2) Remove extra beige gaps above + below header on HOME */ .header-wrapper, .header-section { margin-top: 0 !important; padding-top: 0 !important; } body.template-index main.main-content { margin-top: 0 !important; padding-top: 0 !important; } /* first section in main (your hero) – no top padding/margin */ body.template-index main.main-content > .shopify-section:first-of-type { margin-top: 0 !important; padding-top: 0 !important; } /* 3) Bigger logo on all viewports */ #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { height: auto !important; max-height: 40px !important; /* tweak: 38–44 if you want */ width: auto !important; } /* 4) Kill any “home” icon that was injected next to the logo */ .site-header__logo-link::after, .site-header__logo .rxf-home-icon, .rxf-home-icon { content: none !important; display: none !important; } max-height: 40px !important; /* === RX – Kill empty beige band above & below HERO (home only) === */ /* Remove top padding on the very first homepage section (the hero) */ body.template-index main.main-content > .shopify-section:first-of-type, body.template-index main.main-content > .shopify-section:first-of-type .index-section, body.template-index main.main-content > .shopify-section:first-of-type .index-section--hero, body.template-index main.main-content > .shopify-section:first-of-type .slideshow-section { margin-top: 0 !important; padding-top: 0 !important; } /* Remove extra bottom padding on the hero section */ body.template-index main.main-content > .shopify-section:first-of-type .index-section, body.template-index main.main-content > .shopify-section:first-of-type .index-section--hero, body.template-index main.main-content > .shopify-section:first-of-type .slideshow-section { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Bring the next section ("Why Shop With Us") closer to the hero */ body.template-index main.main-content > .shopify-section:first-of-type + .shopify-section, body.template-index main.main-content > .shopify-section:first-of-type + .shopify-section .index-section { padding-top: 14px !important; /* tweak 10–18px to taste */ } /* === RX – HERO FLUSH FIX (home) – PUT THIS AT THE VERY END === */ /* No extra padding from MainContent */ body.template-index #MainContent, body.template-index main.main-content { padding-top: 0 !important; padding-bottom: 0 !important; } /* Remove padding/margins on the first section wrapper (hero shell) */ body.template-index #MainContent > .shopify-section:first-of-type { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Remove padding from the hero section itself */ body.template-index #MainContent > .shopify-section:first-of-type .index-section, body.template-index #MainContent > .shopify-section:first-of-type .index-section--hero, body.template-index #MainContent > .shopify-section:first-of-type .slideshow-section { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Bring "Why Shop With Us" closer to hero but keep a little air */ body.template-index #MainContent > .shopify-section:first-of-type + .shopify-section { padding-top: 14px !important; /* tweak 10–18px to taste */ } /* === RX – Ensure nav & hamburger always visible === */ /* Desktop nav row */ .site-header__element--sub[data-type="nav"] { display: block !important; } /* Mobile burger */ .site-nav__link--icon.mobile-nav-trigger { display: inline-flex !important; } /* === RX – FINAL LOGO SIZE === */ #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { height: auto !important; max-height: none !important; } /* Desktop logo width */ @media (min-width: 769px) { #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { width: 190px !important; /* adjust 180–220 if you want */ } } /* Mobile logo width */ @media (max-width: 768px) { #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { width: 150px !important; /* adjust 140–160 if you want */ } } /* === RX – HERO FLUSH: KILL INNER PADDING === */ /* Remove padding on the hero wrapper itself */ body.template-index #MainContent > .shopify-section:first-of-type > .slideshow-section, body.template-index #MainContent > .shopify-section:first-of-type > .index-section--hero { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Remove padding inside the hero .page-width */ body.template-index #MainContent > .shopify-section:first-of-type > .slideshow-section > .page-width, body.template-index #MainContent > .shopify-section:first-of-type > .index-section--hero > .page-width { padding-top: 0 !important; padding-bottom: 0 !important; } /* === RX – 2025-12 final header + hero spacing tweak === */ /* 1) Kill extra gap between header and first hero on HOME only */ body.template-index .main-content, body.template-index main.main-content { padding-top: 0 !important; } body.template-index .main-content > .shopify-section:first-of-type { margin-top: 0 !important; padding-top: 0 !important; } /* 2) Make logo a bit bigger again without making header tall */ /* Reset weird previous height limits */ #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { width: auto !important; height: auto !important; } /* Desktop logo + header */ @media (min-width: 769px){ #SiteHeader .site-header__element--top{ padding: 8px 0 !important; /* slim but not squashed */ } #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg{ max-height: 42px !important; /* bump desktop logo size */ } } /* Mobile logo + header */ @media (max-width: 768px){ #SiteHeader .site-header__element--top{ padding: 6px 0 !important; } #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg{ max-height: 34px !important; /* clearly larger than now */ } } /* 3) Safety: never let nav row / hamburger get hidden by old rules */ @media (min-width: 769px){ #SiteHeader .site-header__element--sub[data-type="nav"]{ display: block !important; } #SiteHeader .site-header__element--sub[data-type="nav"] .sit /* === RX – 2025-12 final header + hero spacing tweak === */ /* 1) Kill extra gap between header and first hero on HOME only */ body.template-index .main-content, body.template-index main.main-content { padding-top: 0 !important; } body.template-index .main-content > .shopify-section:first-of-type { margin-top: 0 !important; padding-top: 0 !important; } /* 2) Make logo a bit bigger again without making header tall */ /* Reset weird previous height limits */ #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { width: auto !important; height: auto !important; } /* Desktop logo + header */ @media (min-width: 769px){ #SiteHeader .site-header__element--top{ padding: 8px 0 !important; /* slim but not squashed */ } #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg{ max-height: 42px !important; /* bump desktop logo size */ } } /* Mobile logo + header */ @media (max-width: 768px){ #SiteHeader .site-header__element--top{ padding: 6px 0 !important; } #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg{ max-height: 34px !important; /* clearly larger than now */ } } /* 3) Safety: never let nav row / hamburger get hidden by old rules */ @media (min-width: 769px){ #SiteHeader .site-header__element--sub[data-type="nav"]{ display: block !important; } #SiteHeader .site-header__element--sub[data-type="nav"] .site-nav{ display: flex !important; } } @media (max-width: 768px){ #SiteHeader .site-nav__link--icon.mobile-nav-trigger{ display: inline-flex !important; } } /* =========================================== RX – HOMEPAGE CLEANUP (HEADER + HERO) Drop this at the VERY BOTTOM of theme.css =========================================== */ /* 1) Announcement bar – make it shorter */ #shopify-section-toolbar .announcement-bar, #shopify-section-toolbar .toolbar { padding-top: 6px !important; padding-bottom: 6px !important; line-height: 1.3 !important; } /* 2) Header bar – keep compact but with a decent logo size */ #SiteHeader .site-header__element--top { padding-top: 6px !important; padding-bottom: 6px !important; } /* Desktop logo */ @media (min-width: 769px) { #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { max-height: 34px !important; height: auto !important; width: auto !important; } } /* Mobile logo */ @media (max-width: 768px) { #SiteHeader .site-header__logo img, #SiteHeader .site-header__logo svg { max-height: 32px !important; height: auto !important; width: auto !important; } } /* 3) Mobile header layout – burger left, logo centre, icons right (without adding any extra height) */ @media (max-width: 768px) { #SiteHeader .site-header__element--top > .page-width { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 14px !important; } #SiteHeader .site-nav__link--icon.mobile-nav-trigger { order: 1; margin-right: 8px; } #SiteHeader .header-item--logo { order: 2; margin: 0 auto !important; text-align: center !important; flex: 0 1 auto !important; } #SiteHeader .header-item--icons { order: 3; display: flex !important; align-items: center !important; gap: 14px !important; margin-left: auto !important; } /* hide any “extra” home icon that might be in the icon cluster */ #SiteHeader .header-item--icons a[href="/"] { display: none !important; } /* keep icon labels off on mobile */ #SiteHeader .site-nav__icon-label { display: none !important; } } /* 4) Search row – make it slimmer on both desktop & mobile */ .site-header__element--sub[data-type="search"] .page-width { padding-top: 2px !important; padding-bottom: 6px !important; } .site-header__search-container input[type="search"], .site-header__search-container .search__input { height: 38px !important; font-size: 13px !important; } /* 5) HOME PAGE – kill the extra cream bands around the first hero section only */ body.template-index main.main-content { padding-top: 0 !important; } /* The first section on home (your full-bleed hero) */ body.template-index .shopify-section:first-of-type { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 18px !important; /* small, tidy gap into “Why Shop With Us” */ } /* Inner hero wrapper – no additional top/bottom padding */ body.template-index .shopify-section:first-of-type .rxhb-bleed { margin-top: 0 !important; margin-bottom: 0 !important; } /* 6) Why Shop With Us – avoid extra “gaping” margin at top */ body.template-index #shopify-section-trust-strip-carousel, body.template-index #shopify-section-trust-strip-carousel .index-section { margin-top: 18px !important; padding-top: 0 !important; } /* ================================ RX HEADER — COMPACT LUXURY FIX ================================ */ /* Reduce announcement bar height */ .announcement-bar, .toolbar{ padding: 6px 0 !important; font-size: 12px; letter-spacing: 0.5px; } /* Reduce header vertical space */ #SiteHeader .site-header__element--top .page-width{ padding-top: 8px !important; padding-bottom: 8px !important; min-height: 52px !important; } /* Desktop header */ @media (min-width: 769px){ #SiteHeader{ padding: 6px 0 !important; } } /* Logo sizing balance */ #SiteHeader .site-header__logo img{ max-height: 38px !important; } /* Mobile header tighter */ @media (max-width: 768px){ #SiteHeader .site-header__element--top .page-width{ padding: 6px 14px !important; min-height: 48px !important; } #SiteHeader .site-header__logo img{ max-height: 28px !important; } } /* Remove extra gap below header */ .main-content{ padding-top: 0 !important; } /* Tight hero alignment */ .index-section--hero, .slideshow{ margin-top: 0 !important; }