/* ====== UN ATELIER – Base CSS ====== */ /* --- Fonts --- */ @font-face{ font-family:'Futura Custom'; src:url('{{ "Futura-Book.woff2" | asset_url }}') format('woff2'), url('{{ "Futura-Book.woff" | asset_url }}') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Futura Custom'; src:url('{{ "Futura-Medium.woff2" | asset_url }}') format('woff2'), url('{{ "Futura-Medium.woff" | asset_url }}') format('woff'); font-weight:500; font-style:normal; font-display:swap; } /* --- Variables & base --- */ :root{ --gap:24px; --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.04); --site-max:1440px; --gutter:24px; --gutter-lg:40px; /* JS sets this to the announcement bar height */ --header-top: 0px; } @media (min-width:1200px){ :root{ --gutter:var(--gutter-lg); } } *{ box-sizing:border-box; } html,body{ margin:0; } body{ font-family:'Futura Custom', Futura, 'Avenir Next', Avenir, Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color:#111; font-size:15px; letter-spacing:.01em; font-weight:400; } h1,h2,h3{ font-family:'Futura Custom', Futura, 'Avenir Next', Avenir, Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height:1.2; margin:0 0 12px; font-weight:500; } .container{ max-width:var(--site-max); margin:0 auto; padding:0 var(--gutter); } .grid{ display:grid; gap:var(--gap); } .card{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .btn{ display:inline-block; border:1px solid #111; border-radius:999px; padding:12px 18px; text-decoration:none; color:#111; font-weight:500; } .btn.primary{ background:#111; color:#fff; } /* --- Product card hover --- */ .product-card{text-decoration:none;color:inherit} .product-card .imgwrap{position:relative;overflow:hidden;background:#f7f7f7} .product-card img{width:100%;height:auto;display:block;transition:transform .5s ease} .product-card:hover img{transform:scale(1.03)} .product-meta{padding:10px 2px} .product-vendor{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:400} .product-title{font-size:14px;margin-top:4px;font-weight:500} .product-price{margin-top:6px;font-weight:500;font-size:14px} /* --- Notice bar (visuals) --- */ .notice-bar{ background:#000; color:#fff; text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:8px 0; padding-left:var(--gutter); padding-right:var(--gutter); } /* --- Drawer base (overlay + panel) --- */ .drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.36); opacity:0; visibility:hidden; transition:.2s; z-index:60; } .drawer-overlay.open{ opacity:1; visibility:visible; } .drawer{ position:fixed; top:0; bottom:0; left:0; width:86vw; max-width:360px; background:#fff; transform:translateX(-100%); transition:transform .25s ease; z-index:70; overflow:auto; box-shadow:8px 0 24px rgba(0,0,0,.1); } .drawer.open{ transform:translateX(0); } .drawer .pane-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #eee; background:#fff; position:sticky; top:0; z-index:1; } .drawer .btn-close-drawer{ border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; padding:6px 8px; } .drawer a{ display:block; text-decoration:none; color:#111; font-size:16px; line-height:1.35; padding:6px 2px; } /* --- Quick actions (search/results) --- */ .result-card{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#f7f7f7; } .result-image{ width:100%; height:100%; object-fit:contain; } .qv-actions{ position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; pointer-events:none; opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease; } .result-card:hover .qv-actions{ opacity:1; transform:translateY(0); pointer-events:auto; } /* --- Header --- */ .Header{ background:#fff; } .Header__bar{ display:flex; align-items:center; justify-content:space-between; margin:0 auto; max-width:var(--site-max); padding:12px var(--gutter); } .Header__logo{ text-decoration:none; color:#111; } .LogoText{ font-family:'Futura Custom', Futura, sans-serif; font-weight:600; letter-spacing:.06em; font-size:22px; line-height:1.1; white-space:nowrap; } .Header__nav{ display:flex; gap:24px; align-items:center; } .Header__link{ text-decoration:none; color:inherit; text-transform:uppercase; letter-spacing:.14em; font-size:.92rem; font-family:'Futura Custom', Futura, sans-serif; } .Header__link.is-sale{ color:#d22630; } .Header__actions{ display:flex; gap:16px; align-items:center; } .Header__burger{ display:none; width:40px; height:40px; padding:8px; border:0; background:transparent; cursor:pointer; flex-direction:column; justify-content:center; gap:6px; } .Header__burger span{ display:block; height:2px; background:#111; border-radius:2px; } .Header__burger span:nth-child(1){ width:22px; } .Header__burger span:nth-child(2){ width:16px; margin-left:auto; } .Header__burger span:nth-child(3){ width:22px; } @media (max-width:1000px){ .Header__nav{ display:none !important; } .Header__burger{ display:flex; } } /* === Header icon badges === */ .Header__actions .HeaderIcon{ position:relative; text-decoration:none; } .Header__actions .HeaderIcon [data-cart-count], .Header__actions .HeaderIcon [data-swym-wishlist-count]{ position:absolute; top:-12px; right:-14px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#000; color:#fff; font-size:11px; line-height:16px; text-align:center; transform:none !important; text-decoration:none !important; box-shadow:0 0 0 2px #fff; border:0 !important; } .Header__actions .HeaderIcon [data-cart-count]:empty, .Header__actions .HeaderIcon [data-swym-wishlist-count]:empty, .Header__actions .HeaderIcon [data-cart-count][hidden], .Header__actions .HeaderIcon [data-swym-wishlist-count][hidden]{ display:none !important; } /* ===== Mobile menu – premium ===== */ .MobileMenu{ display:flex; flex-direction:column; background:#fff; } .MobileMenu .mm-body{ flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; } /* Tabs */ .MobileMenu .mm-tabs{ position:sticky; top:0; z-index:2; display:flex; gap:18px; padding:12px 18px 0; background:#fff; border-bottom:1px solid #eee; } .MobileMenu .mm-tab{ appearance:none; background:transparent; border:0; cursor:pointer; padding:10px 0 12px; margin:0; font:12px 'Futura Custom', Futura, sans-serif; text-transform:uppercase; letter-spacing:.14em; opacity:.6; border-bottom:2px solid transparent; } .MobileMenu .mm-tab.is-active{ opacity:1; border-color:#111; } /* Panels & rows */ .MobileMenu .mm-panels{ padding-bottom:10px; } .MobileMenu .mm-panel{ display:none; } .MobileMenu .mm-panel.is-active{ display:block; } .MobileMenu .mm-row{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #f1f1f1; text-decoration:none; color:#111; font-size:16px; line-height:1.35; font-weight:500; background:#fff; } .MobileMenu .mm-row:hover{ background:#fafafa; } .MobileMenu .mm-row.is-sale{ color:#d22630; } /* Homepage row emphasized */ .MobileMenu .mm-home{ font-weight:600; } /* Chevron */ .MobileMenu .mm-row::after{ content:""; position:absolute; right:18px; top:50%; width:8px; height:8px; border-right:2px solid rgba(0,0,0,.45); border-top:2px solid rgba(0,0,0,.45); transform:translateY(-50%) rotate(45deg); transition:border-color .2s ease, opacity .2s ease; } .MobileMenu .mm-row:hover::after{ border-color:rgba(0,0,0,.75); } /* CTAs at bottom */ .MobileMenu .mm-ctas{ position:sticky; bottom:0; background:#fff; padding:14px 16px 18px; border-top:1px solid #eee; display:grid; gap:10px; } .MobileMenu .mm-btn{ width:100%; text-align:center; } .MobileMenu .mm-badge{ display:inline-block; min-width:18px; height:18px; line-height:18px; font-size:11px; color:#fff; background:#000; border-radius:999px; padding:0 6px; margin-left:8px; } /* Hide header wishlist icon on mobile */ @media (max-width:1000px){ .Header__actions .HeaderIcon--wishlist{ display:none !important; } } /* Homepage row emphasized (cardy) */ .MobileMenu .mm-home{ background:#fafafa; border-radius:8px; margin:8px 12px; padding:16px; border:1px solid #eee; } .MobileMenu .mm-home:hover{ background:#f2f2f2; border-color:#ddd; } /* Header layout: desktop center nav */ @media (min-width:1001px){ .Header__bar{ display:grid; grid-template-columns:auto 1fr auto; /* logo | nav | actions */ align-items:center; } .Header__nav--center{ justify-self:center; display:flex; gap:24px; } .HeaderIcon--search-mobile{ display:none !important; } .HeaderIcon--search-desktop{ display:inline-flex !important; } } /* Mobile header sizing / centering */ @media (max-width:1000px){ .Header__nav--center{ display:none !important; } .HeaderIcon--search-desktop{ display:none !important; } .HeaderIcon--search-mobile{ display:inline-flex !important; } .Header__bar{ display:grid; grid-template-columns: 40px 40px 1fr auto; /* burger | search | logo | actions */ column-gap:4px; align-items:center; } .Header__burger{ grid-column:1; } .HeaderIcon--mobileSearch{ grid-column:2; width:40px; height:40px; display:flex; align-items:center; justify-content:center; } .Header__logo{ grid-column:3; justify-self:center; } .Header__actions{ grid-column:4; justify-self:end; } } /* === Sticky announcement + header (final, conflict-free) === */ #shopify-section-announcement-rotator, #shopify-section-announcement-bar, .notice-bar{ position: -webkit-sticky; position: sticky; top: 0; z-index: 1001; background:#000; } #shopify-section-header-mega, [id^="shopify-section-"][id*="header-mega"]{ position: -webkit-sticky; position: sticky; top: var(--header-top, 0px); z-index: 1000; background:#fff; overflow: visible; } #shopify-section-header-mega > .Header, [id^="shopify-section-"][id*="header-mega"] > .Header{ position: static !important; top: auto !important; background:#fff; } /* UA: ensure the visual header itself is sticky under the announcement bar */ #site-header { position: sticky; top: var(--header-top, 0px); z-index: 1000; /* below overlay/drawers, above content */ background: #fff; } /* === Refine Loox floating review badge === */ .loox-rating, .loox-floating-widget { border-radius: 10px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important; padding: 6px 10px !important; font-family: 'Futura Custom', sans-serif !important; background: #fff !important; } /* Remove "Powered by Loox" */ .loox-powered-by { display: none !important; } /* Tighten up text */ .loox-rating span, .loox-floating-widget span { font-size: 14px !important; line-height: 1.2 !important; } /* Make stars more prominent */ .loox-icon { font-size: 16px !important; color: #111 !important; } /* Align badge to left gutter */ .loox-rating, .loox-floating-widget { left: var(--gutter) !important; right: auto !important; } /* Loox trust badge: align with WOMEN gateway edge (specific ID) */ #loox-trust-badge-template--20307309625592__1757862348eebd804a{ display:flex !important; justify-content:flex-start !important; align-items:flex-start !important; text-align:left !important; box-sizing:border-box !important; width:100% !important; margin:0 auto !important; padding-left: calc((100vw - min(100vw, var(--site-max))) / 2 + var(--gutter)) !important; } @media (max-width:768px){ #loox-trust-badge-template--20307309625592__1757862348eebd804a{ padding-left:16px !important; } } /* Hide all Powered by Loox branding site-wide */ .loox-trust-badge-widget__logo, .loox-powered-by, a[href*="apps.shopify.com/loox"], a[aria-label*="Powered by Loox"], a[title*="Powered by Loox"]{ display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; width:0 !important; overflow:hidden !important; line-height:0 !important; } /* ===== UN ATELIER — Cart Drawer (final clean fix) ===== */ /* Drawer shell */ #CartDrawer { left:auto; right:0; width:min(88vw,420px); max-width:420px; background:#fff; border-top-left-radius:14px; border-bottom-left-radius:14px; transform:translateX(100%); transition:transform .25s ease; z-index:70; display:flex; flex-direction:column; } #CartDrawer.open { transform:translateX(0); } /* Header (Your bag + X) */ #CartDrawer .cart-drawer-head { flex:0 0 auto; position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; background:#fff; padding:16px 14px; border-bottom:1px dashed #eee; } #CartDrawer .cart-drawer-head .pane-title { margin:0; font:600 20px/1.2 "Futura Custom", Futura, sans-serif; } #CartDrawer .cart-drawer-head .btn-close-drawer { border:0; background:transparent; font-size:26px; line-height:1; padding:6px 8px; cursor:pointer; } /* Items scroll */ #CartDrawer .drawer-items { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 14px 0; } /* Footer pinned */ #CartDrawer .pane-foot { flex:0 0 auto; background:#fff; box-shadow:0 -6px 24px rgba(0,0,0,.06); padding:12px 14px; } /* Kill duplicate ghost headers */ #CartDrawer .drawer-header, #CartDrawer .drawer-items::before, #CartDrawerItems::before { display:none !important; content:none !important; } /* Elevate cart drawer above sticky site header */ .drawer-overlay { z-index: 2000 !important; } #CartDrawer { z-index: 2100 !important; } /* ===== UN ATELIER — Cart Drawer • Luxe finish ===== */ /* Dim + blur the world a touch */ .drawer-overlay{ background: rgba(0,0,0,.46) !important; backdrop-filter: blur(2px); } /* Panel: elegant radius, crisp shadow */ #CartDrawer{ border-top-left-radius: 18px !important; border-bottom-left-radius: 18px !important; box-shadow: 0 16px 40px rgba(0,0,0,.24); /* subtle edge highlight for a “hardware” feel */ outline: 1px solid rgba(255,255,255,.6); outline-offset: -1px; } /* Header: weight, spacing, subtle divider */ #CartDrawer .cart-drawer-head{ padding: 18px 18px !important; border-bottom: 1px dashed rgba(0,0,0,.10) !important; position: sticky; top: 0; background: #fff; } #CartDrawer .cart-drawer-head .pane-title{ font: 700 22px/1.15 "Futura Custom", Futura, sans-serif !important; letter-spacing: .01em; } #CartDrawer .cart-drawer-head .btn-close-drawer{ width: 36px; height: 36px; border-radius: 999px; font-size: 22px !important; color: #1a1a1a; transition: transform .12s ease, background-color .12s ease; } #CartDrawer .cart-drawer-head .btn-close-drawer:hover{ background: #f4f4f4; transform: scale(1.04); } /* Items area: airy, premium spacing */ #CartDrawer .drawer-items{ padding: 16px 16px 8px !important; gap: 12px; } /* Each line: card feel + bigger imagery */ #CartDrawer .drawer-line{ display: grid; gap: 12px; align-items: start; grid-template-columns: 104px 1fr auto; grid-template-areas: "thumb meta price"; padding: 14px; background: #fff; border: 1px solid #ececec; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.06); } #CartDrawer .drawer-line img{ grid-area: thumb; width: 104px; height: 104px; object-fit: contain; background: #f7f7f7; border-radius: 12px; } #CartDrawer .drawer-line .line-meta{ grid-area: meta; display: grid; gap: 6px; min-width: 0; } #CartDrawer .drawer-line .line-title{ font: 600 16px/1.28 "Futura Custom", Futura, sans-serif; text-decoration: none; color: #111; word-break: break-word; } #CartDrawer .drawer-line .line-sub{ font: 12px/1.2 "Futura Custom", Futura, sans-serif; opacity: .75; } #CartDrawer .drawer-line .line-price{ grid-area: price; align-self: start; text-align: right; font: 700 15px/1 "Futura Custom", Futura, sans-serif; white-space: nowrap; min-width: 84px; padding-left: 6px; } /* Quantity + remove: sleeker controls */ #CartDrawer .qty{ display: inline-grid; grid-auto-flow: column; align-items: center; gap: 6px; border: 1px solid #e5e5e5; border-radius: 999px; padding: 4px 8px; background: #fafafa; } #CartDrawer .qty input{ width: 44px; height: 28px; text-align: center; border: 0; background: transparent; font: 600 14px "Futura Custom", Futura, sans-serif; } #CartDrawer .qty-dec, #CartDrawer .qty-inc{ width: 24px; height: 24px; border-radius: 999px; border: 0; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08); font-weight: 600; cursor: pointer; } #CartDrawer .btn-remove{ appearance: none; border: 0; background: none; color: #b00000; text-decoration: underline; font: 12px "Futura Custom", Futura, sans-serif; margin-left: 10px; } /* Subtotal row: stronger hierarchy */ #CartDrawer .drawer-sub{ padding: 14px 0 12px; margin: 0 2px 6px; display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(0,0,0,.10); font: 500 14px/1.2 "Futura Custom", Futura, sans-serif; } #CartDrawer #CartDrawerSubtotal{ font-weight: 700; font-size: 16px; } /* CTA block pinned, cushy + safe-area for iOS + space for widgets */ #CartDrawer .pane-foot{ position: sticky; bottom: 0; background: #fff; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -14px 28px rgba(0,0,0,.08); } #CartDrawer .drawer-actions{ display: grid; gap: 10px; } #CartDrawer .drawer-actions .btn, #CartDrawer .drawer-actions a, #CartDrawer .drawer-actions button{ width: 100%; border-radius: 999px; padding: 14px 18px; font: 700 14px "Futura Custom", Futura, sans-serif; letter-spacing: .01em; transition: transform .1s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease; } #CartDrawer .drawer-actions .btn:hover, #CartDrawer .drawer-actions a:hover, #CartDrawer .drawer-actions button:hover{ transform: translateY(-1px); } #CartDrawer .drawer-actions .btn:first-child{ background: #fff; color: #111; border: 2px solid #111; box-shadow: 0 2px 0 rgba(0,0,0,.08) inset; } #CartDrawer .drawer-actions .btn.primary, #CartDrawer .drawer-actions button[name="checkout"]{ background: #111; color: #fff; border: 2px solid #111; box-shadow: 0 6px 16px rgba(0,0,0,.18); } /* Keep content from tucking under floating chat/rewards bubbles */ #CartDrawer .drawer-items{ padding-bottom: 88px !important; } #CartDrawer .pane-foot{ padding-bottom: max(16px, 12px + env(safe-area-inset-bottom)) !important; } /* === Refined Drawer Footer Layout === */ #CartDrawer .drawer-actions{ display:flex; flex-direction:column; align-items:center; gap:12px; } #CartDrawer .drawer-actions a.btn{ width:auto; /* shrink to fit */ min-width:160px; text-align:center; } /* === Cart drawer: luxe scroll cue (shows only when .has-overflow; fades out with .cue-hidden) === */ #CartDrawer .drawer-items{ position: relative; } #CartDrawer .drawer-items::after{ content: "Scroll to see more ↓"; position: sticky; bottom: 0; display: block; text-align: center; font: 400 12px/1.4 "Futura Custom", Futura, sans-serif; letter-spacing: .01em; color: rgba(0,0,0,.55); padding: 14px 0; background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0)); opacity: 0; /* hidden by default */ transform: translateY(6px); /* subtle rise-in */ pointer-events: none; transition: opacity .25s ease, transform .25s ease; } /* show cue only when overflowing */ #CartDrawer .drawer-items.has-overflow::after{ opacity: 1; transform: translateY(0); } /* hide sooner as user scrolls (JS toggles .cue-hidden) */ #CartDrawer .drawer-items.has-overflow.cue-hidden::after{ opacity: 0; transform: translateY(6px); } /* accessibility */ @media (prefers-reduced-motion: reduce){ #CartDrawer .drawer-items::after{ transition: none; transform: none; } } /* Elevate drawers above the shared overlay */ .drawer-overlay { z-index: 2000 !important; } /* stays below the drawers */ /* Cart drawer already elevated — keep or bump slightly */ #CartDrawer { z-index: 2100 !important; } /* Mobile menu + Preferences must sit above the overlay */ aside.MobileMenu.drawer { z-index: 2101 !important; } #PreferencesModal.drawer { z-index: 2102 !important; } /* Hide any "Update bag" buttons */ [name="update"], .update-cart, .cart__update { display:none !important; } /* Luxe qty stepper for cart page */ .qty--cart{ display:inline-flex; align-items:center; gap:8px; border:1px solid #e7e7e7; background:#fff; border-radius:999px; padding:6px 10px; box-shadow:0 1px 0 rgba(0,0,0,.04) inset; } .qty--cart .qty-dec, .qty--cart .qty-inc{ appearance:none; border:0; background:#f7f7f7; width:32px; height:32px; line-height:32px; border-radius:50%; font-weight:600; cursor:pointer; } .qty--cart .qty-input{ width:36px; text-align:center; border:0; background:transparent; font:500 16px/1 "Futura Custom", Futura, sans-serif; } .qty--cart:focus-within{ box-shadow:0 0 0 2px #1112; } .drawer-note { font-size: 13px; color: #555; margin: 0 0 8px; text-align: center; font-style: italic; opacity: 0; transform: translateY(4px); animation: fadeSlideIn 0.6s ease forwards; animation-delay: 0.2s; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---- Drawer banner (scoped) ---- */ #CartDrawer .drawer-banner{ margin: 8px 16px 6px; padding: 10px 12px; border-radius: 10px; background: #f7f7f7; font: 500 13px/1.35 Futura, sans-serif; color: #333; opacity: 0; transform: translateY(-4px); animation: drawerBannerIn .35s ease-out .05s forwards; } @keyframes drawerBannerIn{ to { opacity: 1; transform: translateY(0); } } /* Drawer subtotal row: ensure clear spacing */ #CartDrawer .drawer-sub{ display: flex; justify-content: space-between; align-items: center; gap: 8px; /* ← adds visual gap so it never looks like “Subtotal$” */ } #CartDrawer .drawer-sub span:first-child{ white-space: nowrap; } #CartDrawer .drawer-sub span:last-child{ font-weight: 600; } /* Urgency note (refined, subtle, not oversized) */ .cart-page .cart-urgency { font: 13px/1.4 Futura, sans-serif; color: #333; margin: 6px 0 14px; text-align: center; opacity: 0; transform: translateY(4px); animation: cartUrgencyIn .6s ease forwards; animation-delay: .2s; } @keyframes cartUrgencyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Helper note (Shipping & taxes...) restored */ .cart-aside .cart-note { font: 12px/1.4 Futura, sans-serif; font-weight: 400; /* not bold */ text-align: left; /* left aligned */ opacity: .75; margin: 10px 0 16px; } /* ===== Desktop Gender Switch (between announcement bar and header) ===== */ :root{ --gs-height: 42px; } /* height of the bar */ @media (min-width:1001px){ /* The snippet itself is not sticky; the site header sits below with its own sticky. */ .gender-switch{ background:#fff; border-bottom:1px solid #eee; height: var(--gs-height); } .gender-switch__inner{ max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter); height: 100%; display: flex; align-items: center; justify-content: space-between; /* left links / right locale */ gap: 20px; } .gender-switch__left{ display: inline-flex; align-items: center; gap: 18px; } .gender-switch__link{ font: 500 12px/1.2 "Futura Custom", Futura, sans-serif; text-transform: uppercase; letter-spacing: .14em; color:#555; text-decoration:none; position:relative; opacity:.8; transition: color .25s ease, opacity .25s ease; } .gender-switch__link:hover{ color:#000; opacity:1; } .gender-switch__link::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background:#000; transform: scaleX(0); transform-origin:center; transition: transform .25s ease; } .gender-switch__link:hover::after{ transform: scaleX(1); } .gender-switch__link.is-active{ color:#000; font-weight:600; opacity:1; } .gender-switch__link.is-active::after{ transform: scaleX(1); } .gender-switch__sep{ font: 500 12px/1 "Futura Custom", Futura, sans-serif; color:#aaa; } /* Right side (placeholder or your future locale selector) */ .gender-switch__right{ margin-left:auto; display:flex; align-items:center; gap:12px; } .gender-switch__locale{ font: 500 12px/1.2 "Futura Custom", Futura, sans-serif; color:#555; text-decoration:none; } .gender-switch__locale:hover{ color:#000; text-decoration:underline; } } /* Hide the bar entirely on mobile (you already have a mobile solution) */ @media (max-width:1000px){ .gender-switch{ display:none !important; } } /* ===== HOMEPAGE GAP: hard kill ===== */ /* Do not render/occupy space for the gender switch on the homepage */ .template-index #shopify-section-gender-switch, .template-index .gender-switch { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 0 !important; } /* On the homepage the header should sit flush under the announcement bar */ .template-index #shopify-section-header-mega, .template-index [id^="shopify-section-"][id*="header-mega"] { top: 0 !important; } /* Default: hide the gender switch everywhere */ .gender-switch--desktop { display: none; } /* Desktop only: show it */ @media (min-width:1001px){ .gender-switch--desktop { display:block; } } /* Mobile: keep everything hidden (gender + locale) */ @media (max-width:1000px){ .gender-switch--desktop, .gender-switch--desktop *, .gender-switch__right, .gender-switch__locale { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } } /* Preferences Drawer — LEFT side */ #PreferencesModal.drawer{ left: 0; right: auto; width: min(88vw, 420px); max-width: 420px; height: 100vh; background: #fff; border-top-right-radius: 18px; border-bottom-right-radius: 18px; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: 0 16px 40px rgba(0,0,0,.24); outline: 1px solid rgba(255,255,255,.6); outline-offset: -1px; transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; z-index: 2102 !important; /* above overlay + cart */ } #PreferencesModal.drawer.open{ transform: translateX(0); } /* Country search field */ .pref-search{ position: sticky; top: 0; background:#fff; padding: 10px 4px; z-index: 1; } .pref-search input[type="search"]{ width: 100%; border: 1px solid #e6e6e6; border-radius: 999px; padding: 10px 14px; font: 500 14px "Futura Custom", Futura, sans-serif; outline: none; } .pref-search input[type="search"]:focus{ box-shadow: 0 0 0 2px #1112; border-color: #d0d0d0; } /* === Preferences Drawer (final clean version) === */ #PreferencesModal.drawer { left: 0; right: auto; width: min(88vw, 420px); /* desktop & tablet: 88% or capped at 420px */ max-width: 420px; height: 100vh; background: #fff; border-top-right-radius: 18px; border-bottom-right-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.24); outline: 1px solid rgba(255,255,255,.6); outline-offset: -1px; transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; z-index: 2102 !important; /* above MobileMenu + Cart */ } #PreferencesModal.drawer.open { transform: translateX(0); } /* Mobile refinement */ @media (max-width: 768px) { #PreferencesModal.drawer { width: 92vw; /* slightly narrower on small screens */ max-width: none; /* no artificial cap */ border-radius: 0; /* flush edges like MobileMenu */ } } /* === Prevent iOS Safari auto-zoom on Preferences inputs === */ #PreferencesModal input[type="search"], #PreferencesModal input[type="text"], #PreferencesModal input[type="radio"], #PreferencesModal input[type="checkbox"], #PreferencesModal select { font-size: 16px !important; /* min size to stop Safari zoom */ } /* === Mobile menu active tab refinement (luxury clean) === */ .MobileMenu .mm-tab.is-active { border-color: #111 !important; /* solid underline */ border-bottom-width: 2px; /* a touch thicker */ font-weight: 600; /* subtle bold */ color: #111 !important; /* darker text */ opacity: 1 !important; /* no fade */ } /* Remove chevrons from specific rows */ .MobileMenu .mm-row[data-open-preferences]::after, .MobileMenu .mm-row[data-open-chat]::after, .MobileMenu .mm-row[href*="about-us"]::after { display: none !important; content: none !important; } /* Make Preferences, Customer Service, About us share same row style */ .MobileMenu .mm-row[data-open-preferences], .MobileMenu .mm-row[data-open-chat], .MobileMenu .mm-row[href*="about-us"] { font-weight: 500; font-size: 16px; line-height: 1.35; color: #111; background: #fff; border-bottom: 1px solid #f1f1f1; } /* Indent Preferences / Customer Service / About us for visual grouping */ .MobileMenu .mm-row[data-open-preferences], .MobileMenu .mm-row[data-open-chat], .MobileMenu .mm-row[href*="about-us"] { padding-left: 32px; /* default is 18px → now slightly indented */ } /* Add subtle gap above Preferences / Customer Service / About us */ .MobileMenu .mm-row[data-open-preferences] { margin-top: 10px; border-top: 1px solid #f1f1f1; } /* === Center footer links/headings on mobile (bulletproof) === */ @media (max-width: 768px){ /* Target the footer section reliably */ [id^="shopify-section-"][id*="footer"] .footer, [id^="shopify-section-"][id*="footer"] .Footer { text-align: center !important; } /* Headings */ [id^="shopify-section-"][id*="footer"] .footer-block__heading, [id^="shopify-section-"][id*="footer"] .footer-block h4{ text-align: center !important; margin: 0 0 10px !important; } /* Lists container */ [id^="shopify-section-"][id*="footer"] .footer-block__details-content .list-unstyled{ padding-left: 0 !important; margin: 0 auto !important; /* centers the list block */ text-align: center !important; } /* List items + links */ [id^="shopify-section-"][id*="footer"] .footer-block__details-content .list-unstyled li{ margin: 6px 0 !important; } [id^="shopify-section-"][id*="footer"] .footer-block__details-content .list-unstyled a{ display: inline-block !important; /* keeps nice tap targets while centered */ font-size: 15px !important; } /* If the theme grid pushes blocks left, center the blocks themselves */ [id^="shopify-section-"][id*="footer"] .footer__content-top .grid{ justify-content: center !important; } } /* Footer section headings: underline + hierarchy for mobile */ @media (max-width: 820px){ .Footer__head { position: relative; display: inline-block; /* so underline hugs the text */ text-transform: uppercase; letter-spacing: .18em; font-weight: 600; font-size: 13px; line-height: 1.2; color: #111; margin: 26px auto 12px !important; text-align: center; } .Footer__head::after { content: ""; display: block; width: 42px; height: 2px; margin: 10px auto 0; background: #111; opacity: .18; border-radius: 2px; } /* Make footer links lighter so headings stand out */ .Footer__list a { color: #444 !important; } } /* ===== Footer headings vs links — color only (mobile) ===== */ @media (max-width: 820px){ /* Headings */ [id^="shopify-section-"][id*="footer"] .Footer h3.Footer__head { color: #000 !important; /* solid black */ font-weight: 600; /* same size, just a touch bolder */ } /* Links (all states) */ [id^="shopify-section-"][id*="footer"] .Footer ul.Footer__list a, [id^="shopify-section-"][id*="footer"] .Footer ul.Footer__list a:link, [id^="shopify-section-"][id*="footer"] .Footer ul.Footer__list a:visited { color: #555 !important; /* softer gray under headings */ font-weight: 400; } } /* ===== Footer headings — desktop/laptop ===== */ @media (min-width: 821px){ [id^="shopify-section-"][id*="footer"] h3.Footer__head { position: relative; display: block; text-align: center; /* center heading above column */ text-transform: uppercase; letter-spacing: .18em; font-weight: 700; /* bold */ font-size: 13px; line-height: 1.2; color: #000; /* solid black */ margin: 0 0 16px !important; } [id^="shopify-section-"][id*="footer"] h3.Footer__head::after { content: ""; display: block; width: 42px; height: 2px; margin: 10px auto 0; /* centers the bar */ background: #000; opacity: .22; border-radius: 2px; } } /* Luxury subtle footer heading underline (desktop only) */ @media (min-width: 1001px){ .Footer__head { position: relative; display: inline-block; text-align: center; } .Footer__head::after { content: ""; display: block; width: 36px; /* narrower, more refined */ height: 1px; /* thinner line */ margin: 10px auto 0; background: #111; /* same color as text */ opacity: 0.25; /* lighter, subtle */ border-radius: 2px; } } /* ===== Mobile Drawer Title Styling ===== */ .drawer .pane-head strong { display: block; text-transform: uppercase; /* all caps for luxury feel */ letter-spacing: .18em; /* subtle spacing */ font-weight: 600; /* strong but not too heavy */ font-size: 13px; /* same scale as footer headings */ line-height: 1.2; color: #111; /* solid black */ margin: 0 auto; /* center horizontally */ margin-bottom: 6px; /* subtle breathing space below */ } .btn-close-drawer { font-size: 20px; /* smaller than heading */ font-weight: 300; /* lighter */ color: #666; /* softer grey, not pure black */ } /* Footer — copyright fine print (Option 1, enforced) */ [id^="shopify-section-"][id*="footer"] .Footer__copy{ font-size: 12px !important; /* slightly smaller */ color: #999999 !important; /* muted */ letter-spacing: 0.03em; /* elegant spacing */ margin-top: 6px; /* a little breathing room */ text-align: center; /* stays centered on all layouts */ } /* ===== PDP • Gallery arrows ===== */ .pdp-arrows{ position:absolute; inset:0; pointer-events:none; } .pdp-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:999px; background:#fff; border:1px solid #ddd; box-shadow:0 4px 10px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; pointer-events:auto; cursor:pointer; user-select:none; transition:transform .12s ease, background .12s ease, border-color .12s ease; } .pdp-arrow:hover{ transform:translateY(-50%) scale(1.04); background:#f9f9f9; border-color:#ccc; } .pdp-arrow svg{ width:15px; height:15px; } @media (hover:hover){ .pdp-arrows{ opacity:0; transition:opacity .15s ease; } .pdp-gallery:hover .pdp-arrows{ opacity:1; } } /* ===== PDP • Arrow inset override (bulletproof) ===== */ .pdp-hero-frame{ --pdp-arrow-inset: clamp(18px, 2.8vw, 42px); /* responsive inset */ position: relative; /* anchor for absolute buttons */ } /* Works with your actual buttons: .pdp-nav.pdp-prev / .pdp-nav.pdp-next */ .pdp-hero-frame .pdp-nav{ z-index:2; pointer-events:auto; } .pdp-hero-frame .pdp-prev{ left: var(--pdp-arrow-inset) !important; } .pdp-hero-frame .pdp-next{ right: var(--pdp-arrow-inset) !important; } @media (max-width:420px){ .pdp-hero-frame{ --pdp-arrow-inset: 20px; } } /* ===== PDP • Zoom / Accordion / Benefits (unchanged) ===== */ .pdp-gallery img{ cursor: zoom-in; } .pdp-zoom-lens{ display:none; } .pdp-zoom-modal{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index:3000; } .pdp-zoom-modal.is-open{ display:flex; } .pdp-zoom-modal img{ max-width:90vw; max-height:90vh; object-fit:contain; cursor:zoom-out; } .pdp-zoom-close{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:999px; background:#fff; border:1px solid #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; } .pdp-accordion summary{ list-style:none; cursor:pointer; position:relative; padding-right:28px; } .pdp-accordion summary::-webkit-details-marker{ display:none; } .pdp-accordion summary::after{ content:""; position:absolute; right:2px; top:50%; width:8px; height:8px; border-right:2px solid #555; border-top:2px solid #555; transform:translateY(-50%) rotate(45deg); transition:transform .2s ease, border-color .2s ease; } .pdp-accordion[open] summary::after{ transform:translateY(-50%) rotate(-135deg); } .pdp-benefits{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; } .pdp-benefits .pill{ display:inline-flex; align-items:center; gap:8px; background:#111; color:#fff; border:2px solid #111; border-radius:999px; padding:10px 14px; font:600 13px "Futura Custom", Futura, sans-serif; } .pdp-benefits .pill svg{ width:16px; height:16px; } /* Base option button */ .opt-btn { border:1px solid #ccc; background:#fff; color:#111; border-radius:9999px; padding:9px 14px; font:13px "Futura Custom", Futura, sans-serif; cursor:pointer; transition:all .15s ease; } /* Hover (only inactive + enabled) */ .opt-btn:hover:not(.is-active):not(.is-disabled) { border-color:#111; } /* Active (selected) */ .opt-btn.is-active { background:#111 !important; color:#fff !important; border-color:#111 !important; box-shadow:0 0 0 2px rgba(0,0,0,.2); } /* Disabled (unavailable) */ .opt-btn.is-disabled { opacity:.35; cursor:not-allowed; background:#f5f5f5; border:1px solid #ddd; color:#999; } /* Limit product hero image height */ .pdp-hero img { max-height: 500px; /* adjust number: 500px, 550px, 600px depending on taste */ width: auto; height: auto; object-fit: contain; /* ensures it scales proportionally */ margin: 0 auto; display: block; } /* === PDP: mobile stack (image on top, details below) === */ @media (max-width: 980px){ .pdp-grid{ display: flex; /* override grid on mobile */ flex-direction: column; /* stack vertically */ gap: 14px; } .pdp-media{ order: 1; width: 100%; } .pdp-details{ order: 2; width: 100%; } /* keep hero non-sticky on mobile */ .pdp-hero{ position: relative !important; } /* optional: make thumbs scroll if they overflow */ .pdp-thumbs{ overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* PDP mobile safe padding */ @media (max-width: 980px){ .pdp-details, .pdp-media, .pdp-accordion, .pdp-atc-card, .pdp-grid { padding-left: 13px; padding-right: 13px; } /* tighten trust badges so they don’t stretch edge to edge */ .pdp-details .pdp-atc-card, .pdp-details .pdp-accordion { border-radius: 12px; } } /* === PDP mobile: luxe arrow polish (smaller + breathing room) === */ @media (max-width: 768px){ /* make frame allow arrows outside (you already did), then refine */ .pdp-hero-frame{ overflow: visible !important; } /* smaller, glassy buttons */ .pdp-hero-frame .pdp-nav{ width: 32px !important; height: 32px !important; font-size: 18px !important; background: rgba(255,255,255,.78) !important; /* glass look */ border: 1px solid rgba(0,0,0,.14) !important; box-shadow: 0 6px 16px rgba(0,0,0,.12) !important; backdrop-filter: blur(6px) saturate(140%); } /* generous invisible hit area so it still taps easily */ .pdp-hero-frame .pdp-nav::after{ content:""; position:absolute; inset:-8px; /* +8px all around */ border-radius:999px; } /* give 10px breathing room from the viewport edge (no hugging) */ .pdp-hero-frame .pdp-prev{ left: -18px !important; /* was -28px */ top: 50%; transform: translateY(-50%); } .pdp-hero-frame .pdp-next{ right: -18px !important; /* was -28px */ top: 50%; transform: translateY(-50%); } } /* ultra-small phones */ @media (max-width: 360px){ .pdp-hero-frame .pdp-nav{ width: 30px !important; height: 30px !important; font-size: 16px !important; } .pdp-hero-frame .pdp-prev{ left: -14px !important; } .pdp-hero-frame .pdp-next{ right: -14px !important; } } /* === MOBILE: keep ATC card non-sticky (hard override) === */ @media (max-width: 980px){ .pdp-atc-card, .pdp-atc-card.is-stuck, .pdp-atc-card.is-sticky { position: static !important; inset: auto !important; bottom: auto !important; top: auto !important; transform: none !important; box-shadow: 0 8px 20px rgba(0,0,0,.04); /* keep your nice shadow */ will-change: auto !important; } /* if a spacer was added for sticky behavior, kill it */ .pdp-atc-spacer { display:none !important; height:0 !important; } } /* ===== PDP • Add to Bag — Luxury Sizing ===== */ #pdpAdd{ border-width: 2px !important; border-radius: 9999px !important; font-weight: 700 !important; } /* Desktop: confident, not oversized */ @media (min-width: 1001px){ #pdpAdd{ height: 56px !important; min-width: 260px !important; padding: 0 24px !important; font-size: 17px !important; letter-spacing: .01em !important; } .pdp-atc-card{ padding: 16px 18px 14px !important; } } /* Mobile: full-width, thumb-friendly */ @media (max-width: 1000px){ #pdpAdd{ width: 100% !important; height: 56px !important; padding: 0 18px !important; font-size: 16px !important; } } /* === Desktop container padding / max-width fix === */ @media (min-width: 1100px){ .container{ max-width: 1280px; /* keeps it centered, like Farfetch/MyTheresa */ margin: 0 auto; /* center it */ padding-left: 40px; /* side gutters */ padding-right: 40px; } } @media (min-width: 1600px){ .container{ max-width: 1440px; /* prevent huge stretching on very large screens */ padding-left: 60px; padding-right: 60px; } } /* === PDP trust badges — desktop alignment only === */ @media (min-width: 1100px){ [class^="icon-block-container-"], [class*=" icon-block-container-"]{ max-width: var(--site-max); /* same width cap as product container */ margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); display: grid !important; grid-template-columns: repeat(4, 1fr); /* force 4 in one row */ gap: 24px; align-items: start; } } /* ===== PDP • Collapsible Size chooser ===== */ .size-acc { border: 1px solid #eee; border-radius: 12px; background: #fff; margin: 10px 0 6px; } .size-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font: 12px "Futura Custom", Futura, sans-serif; text-transform: uppercase; letter-spacing: .12em; color:#111; } .size-acc > summary::-webkit-details-marker { display:none } .size-acc > summary .acc-right { display: inline-flex; align-items:center; gap:10px; font: 13px/1.2 "Futura Custom", Futura, sans-serif; text-transform:none; letter-spacing:0; color:#333; } .size-acc > summary .chev { width: 8px; height: 8px; border-right:2px solid #555; border-top:2px solid #555; transform: rotate(45deg); transition: transform .2s ease; opacity:.75; } .size-acc[open] > summary .chev { transform: rotate(-135deg); } .size-acc .opt-row { padding: 10px 14px 14px; display:flex; flex-wrap:wrap; gap:8px; } /* keep your existing .opt-btn styles — no change needed */ /* --- Un Atelier: minimal top-right remove "×" --- */ .ua-remove__btn{ position:absolute; /* top-right pin */ top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font-size:18px; /* elegant, not loud */ line-height:1; background:transparent; border:0; cursor:pointer; opacity:.55; transition:opacity .18s ease, transform .18s ease; } .ua-remove__btn:hover, .ua-remove__btn:focus-visible{ opacity:1; transform:scale(1.04); outline:none; } /* ensure containing blocks are positioned for absolute child */ .cart-row, .drawer-line{ position:relative; } /* optional: smaller on tight mobile layouts */ @media (max-width:480px){ .ua-remove__btn{ top:8px; right:8px; width:24px; height:24px; font-size:16px; } } /* Drawer title anchor */ #CartDrawer .drawer-line .line-title, .cart-product{ white-space: normal; word-break: normal; overflow-wrap: anywhere; /* allows break on long unspaced strings */ hyphens: none; /* disable auto hyphenation */ } /* Laptop/desktop only — keep the half-faces visible */ @media (min-width: 1100px) { /* 1) Prioritize the top of each image (shows faces) */ img, .media img, .card img, .banner img { object-fit: cover; object-position: top center; /* <-- key line */ } /* 2) If you still want a tiny “zoom-out”, uncomment the next block and tune the scale (0.96–0.94). */ /* .media, .banner, .card, .gallery, .grid { transform: scale(0.96); transform-origin: top center; will-change: transform; } */ } /* Laptops — lock Loox badge under the WOMEN tile regardless of window width */ @media (min-width:1100px) and (max-width:1599.98px){ /* exact node from your DOM */ #loox-trust-badge-template--20307309625592__1757862348eebd804a{ display: inline-block !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; /* container-left + gutter + nudge */ margin-left: calc( (100vw - min(100vw, 1280px)) / 2 /* container left when max 1280 */ + 40px /* your .container left padding at ≥1100 */ + 0px /* small nudge; adjust 0–32px to taste */ ) !important; } } @media (min-width:1600px){ #loox-trust-badge-template--20307309625592__1757862348eebd804a{ display: inline-block !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; /* container-left + gutter + nudge for your ≥1600 rules */ margin-left: calc( (100vw - 1440px) / 2 /* your container becomes 1440 at ≥1600 */ + 60px /* your .container padding at ≥1600 */ + 16px /* same nudge; tune if you want */ ) !important; } } /* Raise New Arrivals carousel arrows higher into the image */ [id^="na-"].na .na-arrow { top: 38%; /* raised more */ transform: translateY(-38%); } @media (min-width: 1000px) { [id^="na-"].na .na-arrow { top: 40%; /* fine-tuned for desktop */ transform: translateY(-40%); } } /* ---- SAFETY GUTTER so arrows never cover items ---- */ #na-{{ section.id }}{ --na-edge: 56px; /* safe space at both sides (mobile/tablet) */ } @media (min-width:1000px){ #na-{{ section.id }}{ --na-edge: 64px; } /* a touch more on desktop */ } /* track wrapper: leave room for arrows */ #na-{{ section.id }} .na-track-wrap{ position: relative; padding: 0 var(--na-edge); /* was 0 28/32px – increase to the safe gutter */ } /* edge fade must start AFTER the safe gutter */ #na-{{ section.id }} .na-track{ mask-image: linear-gradient(to right, transparent 0, #000 var(--na-edge), #000 calc(100% - var(--na-edge)), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--na-edge), #000 calc(100% - var(--na-edge)), transparent 100%); } /* keep the arrows just inside that gutter */ #na-{{ section.id }} .na-prev{ left: 12px; } #na-{{ section.id }} .na-next{ right: 12px; } /* --- Prevent arrows from overlapping cards --- */ [id^="na-"].na { --na-gutter: 72px; /* safe space for arrows */ } [id^="na-"].na .na-track-wrap { padding: 0 var(--na-gutter); /* reserve gutter space on both sides */ } [id^="na-"].na .na-track { mask-image: linear-gradient(to right, transparent 0, #000 var(--na-gutter), #000 calc(100% - var(--na-gutter)), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--na-gutter), #000 calc(100% - var(--na-gutter)), transparent 100%); } [id^="na-"].na .na-prev { left: 16px; } [id^="na-"].na .na-next { right: 16px; } /* --- keep subtle fade but lighter --- */ [id^="na-"].na .na-track{ mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } /* --- edge spacers so first/last card never hide behind arrows --- */ [id^="na-"].na .na-track{ display: flex; /* already set, safe to repeat */ scroll-snap-type: x proximity; /* gentle snap to keep rows looking centered */ padding-inline: 4px; /* keep your tiny inner padding */ } [id^="na-"].na .na-track::before, [id^="na-"].na .na-track::after{ content:""; flex: 0 0 28px; /* ← width of the spacer = arrow radius+buffer */ } /* cards still align cleanly as you page */ [id^="na-"].na .na-card{ scroll-snap-align: start; } /* if you want a hair more breathing room on mobile, uncomment: @media (max-width: 999px){ [id^="na-"].na .na-track::before, [id^="na-"].na .na-track::after{ flex-basis: 32px; } } */ /* MOBILE: exactly 2 cards per view, no peek of a 3rd */ @media (max-width: 999px){ [id^="na-"].na .na-card{ /* two cards + one 18px gap = 100% */ flex: 0 0 calc((100% - 18px) / 2) !important; } /* make alignment crisp instead of drifting */ [id^="na-"].na .na-track{ scroll-snap-type: x mandatory; } [id^="na-"].na .na-card{ scroll-snap-align: start; } } /* MOBILE: no edge fade + snap to card boundaries */ @media (max-width:999px){ #na-{{ section.id }} .na-track{ -webkit-mask-image: none !important; mask-image: none !important; scroll-snap-type: x mandatory; scroll-padding-left: 4px; /* matches .na-track padding */ scroll-padding-right: 4px; } #na-{{ section.id }} .na-card{ scroll-snap-align: start; } } /* Mobile-only snap centering */ @media (max-width: 999px){ .na .na-track{ scroll-snap-type:x mandatory; } .na .na-card{ scroll-snap-align:center; scroll-snap-stop:always; } } /* Carousel: only cards should lay out inside the track */ .na .na-track > :not(.na-card){ display:none !important; } /* --- Pin ALL New Arrivals arrows (any section) --- */ [id^="na-"].na { isolation: isolate; } [id^="na-"].na .na-track-wrap{ position: relative !important; } [id^="na-"].na .na-track{ overflow-x: auto !important; overflow-y: hidden !important; } [id^="na-"].na .na-arrow{ position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: auto !important; z-index: 2147483647 !important; } [id^="na-"].na .na-prev{ left: 8px; } [id^="na-"].na .na-next{ right: 8px; } @media (min-width:1000px){ [id^="na-"].na .na-prev{ left: 14px; } [id^="na-"].na .na-next{ right: 14px; } } /* Desktop: always show the center nav on key templates (safe, non-mobile) */ @media (min-width:1001px){ /* ensure the center nav exists on desktop */ .Header__nav--center{ display:flex !important; } /* override any theme/page-level hides */ .template-product .Header__nav--center, .template-collection .Header__nav--center, .template-cart .Header__nav--center, /* cart */ .template-customers .Header__nav--center, /* account pages */ .template-page .Header__nav--center{ /* wishlist / static pages */ display:flex !important; visibility:visible !important; } } /* === CART PAGE: force-show desktop center nav (very high specificity) === */ @media (min-width:1001px){ /* cover common cart body classes & section context */ body.template-cart .Header__nav, body.template-cart .Header__nav--center, .template-cart #shopify-section-header-mega .Header__nav, .template-cart #shopify-section-header-mega .Header__nav--center, body.cart-page .Header__nav, body.cart-page .Header__nav--center, body.page-cart .Header__nav, body.page-cart .Header__nav--center, body[class*="template-cart"] .Header__nav, body[class*="template-cart"] .Header__nav--center{ display: flex !important; visibility: visible !important; } } /* Force the desktop center nav to display on the Cart page */ @media (min-width:1001px){ /* target the header section wrapper + both nav class variants */ #shopify-section-header-mega .Header__nav, #shopify-section-header-mega .Header__nav--center, .Header__nav--center{ display: flex !important; visibility: visible !important; } } /* UA: restore theme sticky header on homepage without changing visuals */ #shopify-section-header-mega, [id^="shopify-section-"][id*="header-mega"]{ position: -webkit-sticky; position: sticky; top: var(--header-top, 0px); z-index: 1000; background:#fff; } #shopify-section-header-mega > .Header, [id^="shopify-section-"][id*="header-mega"] > .Header{ position: relative !important; /* don’t force static; keeps theme spacing intact */ top: auto !important; } /* Predictive overlay z-index guard */ #searchOverlay .predictive-results, #searchOverlay .suggest-list { position: relative; z-index: 10001; } /* === UA – Bulletproof pagination (collections + search) === */ /* Center ANY pagination wrapper */ .ua-pagination, .ua-pagination *:where(.pagination, nav[role="navigation"]), .template-collection .pagination-wrapper, .template-collection .pagination, .template-search .pagination-wrapper, .template-search .pagination { display:flex !important; justify-content:center !important; align-items:center !important; gap:10px !important; float:none !important; text-align:center !important; margin:28px auto 48px !important; } /* If theme outputs UL/LIs */ .ua-pagination .pagination ul, .ua-pagination .pagination ol, .template-collection .pagination ul, .template-collection .pagination ol, .template-search .pagination ul, .template-search .pagination ol { list-style:none !important; margin:0 !important; padding:0 !important; display:contents !important; /* children become the flex items */ } .ua-pagination .pagination li, .template-collection .pagination li, .template-search .pagination li { display:contents !important; } /* Make every control a pill (covers Dawn/Prestige + generic markup) */ .ua-pagination a, .ua-pagination span, .ua-pagination .pagination a, .ua-pagination .pagination span, .ua-pagination .pagination__item, .template-collection .pagination a, .template-collection .pagination span, .template-collection .pagination__item, .template-search .pagination a, .template-search .pagination span, .template-search .pagination__item { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:40px !important; height:40px !important; padding:0 14px !important; border:1px solid #111 !important; border-radius:9999px !important; background:#fff !important; color:#111 !important; text-decoration:none !important; font:600 13px/1 "Futura Custom", Futura, sans-serif !important; white-space:nowrap !important; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease !important; } /* Current page (covers span.current, aria-current, and Dawn’s modifier) */ .ua-pagination .current, .ua-pagination [aria-current="page"], .ua-pagination .pagination__item--current, .template-collection .current, .template-collection [aria-current="page"], .template-collection .pagination__item--current, .template-search .current, .template-search [aria-current="page"], .template-search .pagination__item--current { background:#111 !important; color:#fff !important; border-color:#111 !important; } /* Hover */ .ua-pagination a:hover, .ua-pagination .pagination__item:hover, .template-collection .pagination a:hover, .template-collection .pagination__item:hover, .template-search .pagination a:hover, .template-search .pagination__item:hover { transform:translateY(-1px) !important; border-color:#111 !important; box-shadow:0 6px 16px rgba(0,0,0,.08) !important; } /* Prev/Next arrows, even if theme prints « » text */ .ua-pagination a.next::after, .template-collection .pagination a.next::after, .template-search .pagination a.next::after { content:"→"; margin-left:6px; } .ua-pagination a.prev::before, .template-collection .pagination a.prev::before, .template-search .pagination a.prev::before { content:"←"; margin-right:6px; } /* Kill decorative separators some themes inject */ .ua-pagination .deco, .template-collection .pagination .deco, .template-search .pagination .deco { display:none !important; } /* --- UA: Center collection pagination, kill right-floats --- */ .template-collection .pagination, .template-collection nav[role="navigation"], .template-collection .pagination-wrapper { display: flex !important; justify-content: center !important; align-items: center !important; /* neutralize theme alignment rules */ text-align: center !important; float: none !important; margin-left: auto !important; margin-right: auto !important; /* in case the wrapper is narrower */ width: 100% !important; align-self: center !important; gap: 10px; } /* if your theme uses