/* ========================================================================== Sable & Nour — Abaya store Palette: white / cream / near-black, sand-gold accent Type: Cormorant Garamond (display) + Jost (body/UI) ========================================================================== */ :root{ --color-white: #ffffff; --color-cream: #f6f1e9; --color-cream-deep: #ebe2d3; --color-black: #16140f; --color-charcoal: #4a4540; --color-sand: #b9a480; --color-sand-light: #ded2b6; --font-display: 'Cormorant Garamond', serif; --font-body: 'Jost', sans-serif; --radius: 2px; --max-width: 1180px; --transition: 220ms ease; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--color-white); color: var(--color-black); font-family: var(--font-body); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; animation: pageFadeIn 500ms ease both; } @keyframes pageFadeIn{ from{ opacity: 0; } to{ opacity: 1; } } /* ---- scroll-reveal: elements fade + rise into place as they enter view. Visible by default — only hides content once animations.js confirms (via the "reveal-ready" class on ) that it can actually reveal it again. If JS fails or the browser lacks IntersectionObserver, text just stays visible with no animation. Never invisible. ---- */ .reveal{ opacity: 1; transform: none; } html.reveal-ready .reveal{ opacity: 0; transform: translateY(18px); transition: opacity 650ms ease, transform 650ms ease; } html.reveal-ready .reveal.is-visible{ opacity: 1; transform: translateY(0); } /* staggered entrance for grid items */ .product-grid .reveal:nth-child(1), .category-grid .reveal:nth-child(1){ transition-delay: 0ms; } .product-grid .reveal:nth-child(2), .category-grid .reveal:nth-child(2){ transition-delay: 70ms; } .product-grid .reveal:nth-child(3), .category-grid .reveal:nth-child(3){ transition-delay: 140ms; } .product-grid .reveal:nth-child(4), .category-grid .reveal:nth-child(4){ transition-delay: 210ms; } .category-grid .reveal:nth-child(5){ transition-delay: 280ms; } .category-grid .reveal:nth-child(6){ transition-delay: 350ms; } .product-grid .reveal:nth-child(5){ transition-delay: 280ms; } .product-grid .reveal:nth-child(6){ transition-delay: 350ms; } .product-grid .reveal:nth-child(7){ transition-delay: 420ms; } .product-grid .reveal:nth-child(8){ transition-delay: 490ms; } .product-grid .reveal:nth-child(9){ transition-delay: 560ms; } .product-grid .reveal:nth-child(10){ transition-delay: 630ms; } .product-grid .reveal:nth-child(11){ transition-delay: 700ms; } .product-grid .reveal:nth-child(12){ transition-delay: 770ms; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } h1, h2, h3{ font-family: var(--font-display); font-weight: 500; margin: 0; color: var(--color-black); } .eyebrow{ font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-sand); margin: 0 0 0.9rem; font-weight: 500; } /* Focus visibility for keyboard users */ a:focus-visible, button:focus-visible{ outline: 2px solid var(--color-sand); outline-offset: 3px; } /* ========================= HEADER ========================= */ .site-header{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-cream-deep); } .header-inner{ max-width: var(--max-width); margin: 0 auto; padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .logo{ font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.02em; color: var(--color-black); white-space: nowrap; flex-shrink: 0; } .logo span{ color: var(--color-sand); } @media (max-width: 380px){ .logo{ font-size: 1.25rem; } } .nav-wrap{ display: flex; align-items: center; gap: 1.3rem; } .nav-toggle{ display: none; background: none; border: none; padding: 0.3rem; cursor: pointer; color: var(--color-black); } .nav-toggle svg{ width: 22px; height: 22px; display: block; transition: transform 220ms ease; } .nav-toggle.open svg{ transform: rotate(90deg); } .main-nav{ display: flex; gap: 2rem; font-size: 0.82rem; letter-spacing: 0.03em; flex-wrap: nowrap; } .main-nav a{ position: relative; padding-bottom: 4px; white-space: nowrap; } .main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--color-sand); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .main-nav a:hover::after{ transform: scaleX(1); } .header-cta{ border: 1px solid var(--color-black); padding: 0.55rem 1.2rem; font-size: 0.78rem; letter-spacing: 0.05em; white-space: nowrap; transition: background var(--transition), color var(--transition); } .header-cta:hover{ background: var(--color-black); color: var(--color-white); } .header-search{ display: flex; align-items: center; border: 1px solid var(--color-cream-deep); border-radius: var(--radius); overflow: hidden; background: var(--color-white); } .header-search input{ border: none; outline: none; padding: 0.5rem 0.7rem; font-family: var(--font-body); font-size: 0.82rem; width: 130px; background: transparent; color: var(--color-black); } .header-search button{ border: none; background: none; padding: 0.5rem 0.6rem; cursor: pointer; color: var(--color-charcoal); display: flex; align-items: center; transition: color var(--transition); } .header-search button:hover{ color: var(--color-black); } .header-search button svg{ width: 16px; height: 16px; } .lang-switch{ display: flex; gap: 0.35rem; } .currency-switch{ display: flex; gap: 0.35rem; } .currency-btn{ border: 1px solid var(--color-cream-deep); background: var(--color-white); color: var(--color-charcoal); font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.4rem 0.65rem; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); } .currency-btn:hover{ border-color: var(--color-sand); } .currency-btn.active{ background: var(--color-black); border-color: var(--color-black); color: var(--color-white); } .lang-btn{ border: 1px solid var(--color-cream-deep); background: var(--color-white); color: var(--color-charcoal); font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.4rem 0.65rem; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); } .lang-btn:hover{ border-color: var(--color-sand); } .lang-btn.active{ background: var(--color-black); border-color: var(--color-black); color: var(--color-white); } /* ---- mobile nav: collapses into a hamburger dropdown ---- */ @media (max-width: 1200px){ .nav-toggle{ display: flex; align-items: center; justify-content: center; } .nav-wrap{ display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 1rem; background: var(--color-white); border-bottom: 1px solid var(--color-cream-deep); padding: 1.2rem 1.5rem 1.6rem; box-shadow: 0 12px 20px rgba(22,20,15,0.06); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; } .nav-wrap.open{ opacity: 1; transform: translateY(0); pointer-events: auto; } .main-nav{ flex-direction: column; gap: 0.9rem; font-size: 0.95rem; } .header-cta{ text-align: center; } .lang-switch{ justify-content: center; } .currency-switch{ justify-content: center; } .header-search{ width: 100%; } .header-search input{ flex: 1; width: auto; } } /* ========================= HERO ========================= */ .hero{ position: relative; background: var(--color-cream); padding: 5.5rem 1.5rem 0; overflow: hidden; } .hero-text{ max-width: 720px; margin: 0 auto; text-align: center; padding-bottom: 4rem; position: relative; z-index: 2; } .hero h1{ font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.08; margin-bottom: 1.4rem; } .hero-sub{ max-width: 480px; margin: 0 auto 2.2rem; color: var(--color-charcoal); font-size: 1rem; } .btn{ display: inline-block; padding: 0.9rem 2.1rem; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius); transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition); border: 1px solid transparent; cursor: pointer; } .btn-primary{ background: var(--color-black); color: var(--color-white); } .btn-primary:hover{ background: var(--color-sand); color: var(--color-black); transform: translateY(-2px); } .hero-video-wrap{ max-width: clamp(260px, 34vw, 460px); margin: 2.8rem auto 0; aspect-ratio: 9 / 16; border-radius: calc(var(--radius) + 6px); overflow: hidden; box-shadow: 0 20px 45px rgba(22,20,15,0.18); animation: heroVideoGlow 4.5s ease-in-out infinite; transition: transform 400ms ease; } .hero-video-wrap:hover{ transform: scale(1.035); } @keyframes heroVideoGlow{ 0%, 100%{ box-shadow: 0 20px 45px rgba(22,20,15,0.18); } 50%{ box-shadow: 0 28px 62px rgba(22,20,15,0.26), 0 0 26px 3px rgba(185,164,128,0.28); } } .hero-video{ width: 100%; height: 100%; object-fit: cover; display: block; } /* Smartphones: video fills the entire screen, edge to edge */ @media (max-width: 640px){ .hero-video-wrap{ max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 2.4rem; aspect-ratio: auto; height: 100vh; height: 100svh; border-radius: 0; box-shadow: none; animation: none; background: var(--color-black); } .hero-video-wrap:hover{ transform: none; } .hero-video-wrap .hero-video{ object-fit: cover; } } .hero-drape{ display: block; width: 100%; height: 140px; } .hero-drape path:last-child{ animation: driftLine 7s ease-in-out infinite; transform-origin: center; } @keyframes driftLine{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } } .fold-divider{ background: var(--color-cream-deep); line-height: 0; } .fold-divider svg{ width: 100%; height: 40px; display: block; } /* ========================= COLLECTION ========================= */ .collection{ max-width: var(--max-width); margin: 0 auto; padding: 5rem 1.5rem 6rem; } .section-head{ text-align: center; max-width: 560px; margin: 0 auto 3.5rem; } .section-head h2{ font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: 0.9rem; } .section-note{ color: var(--color-charcoal); font-size: 0.95rem; margin: 0; } .product-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 1.8rem; } @media (max-width: 940px){ .product-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px){ .product-grid{ grid-template-columns: 1fr; } } /* ---- product card ---- */ .product-card{ display: flex; flex-direction: column; background: var(--color-white); cursor: pointer; transition: transform var(--transition); } .product-card:hover{ transform: translateY(-3px); } .product-card:hover .gallery{ box-shadow: 0 10px 24px rgba(22,20,15,0.08); } .view-btn{ display: inline-block; margin-top: 0.7rem; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-black); border-bottom: 1px solid var(--color-sand); padding-bottom: 2px; } .gallery{ position: relative; background: var(--color-cream); } .gallery-scroll{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 9 / 16; border-radius: var(--radius); } .gallery-scroll::-webkit-scrollbar{ display: none; } .gallery-scroll img{ flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; transition: transform 500ms ease; } .product-card:hover .gallery-scroll img{ transform: scale(1.04); } .gallery-dots{ position: absolute; bottom: 0.7rem; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; } .gallery-dot{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); border: 1px solid rgba(22,20,15,0.35); transition: background var(--transition), transform var(--transition); } .gallery-dot.active{ background: var(--color-black); transform: scale(1.15); } .gallery-badge{ position: absolute; top: 0.8rem; left: 0.8rem; background: var(--color-white); color: var(--color-black); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: var(--radius); } .product-info{ padding: 1.2rem 0.2rem 0; } .product-name{ font-size: 1.3rem; margin-bottom: 0.2rem; } .product-price{ font-size: 0.92rem; color: var(--color-sand); letter-spacing: 0.03em; margin-bottom: 1rem; } .option-label{ font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-charcoal); margin-bottom: 0.5rem; display: block; } .color-row{ display: flex; gap: 0.6rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .color-swatch{ width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-cream-deep); cursor: pointer; position: relative; padding: 0; transition: transform var(--transition), border-color var(--transition); } .color-swatch:hover{ transform: scale(1.08); } .color-swatch.selected{ border-color: var(--color-black); box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-black); animation: swatchPulse 320ms ease; } @keyframes swatchPulse{ 0%{ transform: scale(0.85); } 60%{ transform: scale(1.12); } 100%{ transform: scale(1); } } .size-row{ display: flex; gap: 0.5rem; margin-bottom: 1.4rem; flex-wrap: wrap; } .size-pill{ min-width: 38px; padding: 0.4rem 0.5rem; text-align: center; font-size: 0.75rem; letter-spacing: 0.03em; border: 1px solid var(--color-cream-deep); background: var(--color-white); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); } .size-pill:hover{ border-color: var(--color-sand); } .size-pill.selected{ background: var(--color-black); border-color: var(--color-black); color: var(--color-white); animation: pillPop 220ms ease; } @keyframes pillPop{ 0%{ transform: scale(0.92); } 100%{ transform: scale(1); } } .order-btn{ display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; padding: 0.85rem 1rem; background: var(--color-black); color: var(--color-white); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; border: none; border-radius: var(--radius); cursor: pointer; transition: background var(--transition), transform var(--transition); } .order-btn:hover{ background: #256b4e; } .order-btn:active{ transform: scale(0.98); } .order-btn svg{ width: 16px; height: 16px; flex-shrink: 0; } .order-hint{ font-size: 0.72rem; color: var(--color-charcoal); opacity: 0.75; text-align: center; margin-top: 0.55rem; min-height: 1em; } /* ========================= FOOTER ========================= */ .site-footer{ background: var(--color-black); color: var(--color-cream); margin-top: 2rem; } .footer-drape{ width: 100%; height: 30px; display: block; } .footer-inner{ max-width: var(--max-width); margin: 0 auto; padding: 2.5rem 1.5rem 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; } .footer-brand .logo{ color: var(--color-cream); } .footer-brand p{ margin: 0.4rem 0 0; color: var(--color-sand-light); font-size: 0.88rem; } .footer-brand .footer-label{ margin-top: 1.3rem; } .social-icons{ display: flex; gap: 0.6rem; } .social-icon{ width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-cream); transition: background var(--transition), border-color var(--transition), color var(--transition); } .social-icon svg{ width: 17px; height: 17px; } .social-icon:hover{ background: var(--color-sand); border-color: var(--color-sand); color: var(--color-black); } .footer-contact{ text-align: right; } @media (max-width: 560px){ .footer-contact{ text-align: left; } } .footer-address{ display: flex; align-items: flex-start; justify-content: flex-end; gap: 0.4rem; margin-top: 0.7rem; font-size: 0.85rem; color: var(--color-sand-light); transition: color var(--transition); max-width: 100%; } .footer-address span{ min-width: 0; word-break: break-word; } .footer-address:hover{ color: var(--color-cream); } .footer-address svg{ width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.15rem; } @media (max-width: 560px){ .footer-address{ justify-content: flex-start; } } .footer-label{ font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-sand); margin: 0 0 0.5rem; } .footer-whatsapp{ display: inline-block; border: 1px solid var(--color-cream-deep); padding: 0.7rem 1.4rem; border-radius: var(--radius); font-size: 0.85rem; transition: background var(--transition), color var(--transition); } .footer-whatsapp:hover{ background: var(--color-cream); color: var(--color-black); } .footer-note{ margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--color-sand-light); } .footer-bottom{ text-align: center; font-size: 0.72rem; color: var(--color-sand-light); opacity: 0.6; padding: 1.2rem 1.5rem 1.8rem; margin: 0; border-top: 1px solid rgba(255,255,255,0.08); } .main-nav a.active-link{ color: var(--color-sand); } .main-nav a.active-link::after{ transform: scaleX(1); } /* ========================= CATEGORY LANDING TILES ========================= */ .categories{ max-width: var(--max-width); margin: 0 auto; padding: 5rem 1.5rem 6rem; } .category-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem; } @media (max-width: 960px){ .category-grid{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px){ .category-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px){ .category-grid{ grid-template-columns: 1fr; } } .category-tile{ position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--color-cream); } .category-tile img{ width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .category-tile:hover img{ transform: scale(1.05); } .category-tile::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,20,15,0) 40%, rgba(22,20,15,0.55) 100%); } .category-tile-label{ position: absolute; left: 1.1rem; bottom: 1rem; z-index: 2; color: var(--color-white); font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.02em; } /* ========================= CATEGORY PAGE HERO ========================= */ .category-hero{ background: var(--color-cream); text-align: center; padding: 0 0 3rem; } .category-hero-media{ width: 100%; aspect-ratio: 21 / 9; overflow: hidden; margin-bottom: 2.2rem; } .category-hero-media img{ width: 100%; height: 100%; object-fit: cover; } @media (max-width: 620px){ .category-hero-media{ aspect-ratio: 4 / 3; } } .category-hero .eyebrow{ padding: 1.8rem 1.5rem 0; } .category-hero h1{ font-size: clamp(2rem, 4.5vw, 3rem); margin: 0.3rem 0 0.9rem; padding: 0 1.5rem; } .category-sub{ max-width: 480px; margin: 0 auto; color: var(--color-charcoal); font-size: 0.95rem; padding: 0 1.5rem; } /* ========================= FILTERS ========================= */ .filters-bar{ max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem 2.5rem; display: flex; flex-direction: column; gap: 1.1rem; } .filters-row{ display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; } .filters-search{ max-width: 480px; } .filters-search input{ flex: 1; border: 1px solid var(--color-cream-deep); border-radius: var(--radius); padding: 0.7rem 0.9rem; font-family: var(--font-body); font-size: 0.88rem; outline: none; background: var(--color-white); color: var(--color-black); } .filters-search input:focus{ border-color: var(--color-sand); } .filters-search button{ border: 1px solid var(--color-black); background: var(--color-black); color: var(--color-white); padding: 0.7rem 1.1rem; border-radius: var(--radius); font-size: 0.8rem; letter-spacing: 0.04em; cursor: pointer; transition: background var(--transition); } .filters-search button:hover{ background: var(--color-sand); color: var(--color-black); border-color: var(--color-sand); } .filters-label{ font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-charcoal); min-width: 70px; } .filter-pills{ display: flex; flex-wrap: wrap; gap: 0.5rem; } .filter-pill{ border: 1px solid var(--color-cream-deep); background: var(--color-white); color: var(--color-black); padding: 0.4rem 0.75rem; font-size: 0.78rem; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); } .filter-pill:hover{ border-color: var(--color-sand); } .filter-pill.active{ background: var(--color-black); border-color: var(--color-black); color: var(--color-white); } .filter-swatch{ width: 28px; height: 28px; } .filter-clear-btn{ align-self: flex-start; border: none; background: none; color: var(--color-charcoal); font-size: 0.78rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; } .filter-clear-btn:hover{ color: var(--color-black); } .no-results{ grid-column: 1 / -1; text-align: center; color: var(--color-charcoal); padding: 2.5rem 1rem; font-size: 0.95rem; } /* ========================= STOCK CODE ========================= */ .product-stock-code{ font-size: 0.72rem; color: var(--color-charcoal); opacity: 0.7; letter-spacing: 0.03em; margin: 0.15rem 0 0.4rem; } .detail-stock-code{ font-size: 0.8rem; color: var(--color-charcoal); opacity: 0.75; margin: 0 0 1rem; } .pagination-wrap{ margin-top: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; } .pagination{ display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; } .page-btn{ min-width: 38px; height: 38px; padding: 0 0.7rem; border: 1px solid var(--color-cream-deep); background: var(--color-white); color: var(--color-black); font-family: var(--font-body); font-size: 0.82rem; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); } .page-btn:hover:not(.disabled):not(.active){ border-color: var(--color-sand); } .page-btn.active{ background: var(--color-black); border-color: var(--color-black); color: var(--color-white); } .page-btn.disabled{ opacity: 0.35; cursor: not-allowed; } .page-ellipsis{ padding: 0 0.3rem; color: var(--color-charcoal); opacity: 0.6; } .pagination-status{ font-size: 0.78rem; color: var(--color-charcoal); opacity: 0.75; margin: 0; } /* ========================= PRODUCT DETAIL PAGE ========================= */ .breadcrumb-wrap{ max-width: var(--max-width); margin: 0 auto; padding: 1.6rem 1.5rem 0; } .breadcrumb-back{ font-size: 0.82rem; letter-spacing: 0.03em; color: var(--color-charcoal); border-bottom: 1px solid transparent; transition: border-color var(--transition), color var(--transition); } .breadcrumb-back:hover{ color: var(--color-black); border-color: var(--color-sand); } .product-detail{ max-width: var(--max-width); margin: 0 auto; padding: 2rem 1.5rem 5rem; } .detail-wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } @media (max-width: 780px){ .detail-wrap{ grid-template-columns: 1fr; gap: 2rem; } } .detail-gallery{ position: sticky; top: 90px; } .detail-gallery .gallery-scroll{ aspect-ratio: 9 / 16; } .detail-gallery .gallery-scroll img{ cursor: zoom-in; } @media (max-width: 780px){ .detail-gallery{ position: static; } } .detail-info{ padding-top: 0.4rem; } .detail-name{ font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin: 0.2rem 0 0.6rem; line-height: 1.15; } .detail-price{ font-size: 1.15rem; color: var(--color-sand); margin-bottom: 1.8rem; } .detail-info .color-row{ margin-bottom: 1.5rem; } .detail-info .size-row{ margin-bottom: 1.8rem; } .detail-info .color-swatch{ width: 32px; height: 32px; } .detail-info .size-pill{ min-width: 46px; padding: 0.55rem 0.6rem; } .detail-info .order-btn{ max-width: 340px; } /* ---- similar products ---- */ .similar-section{ max-width: var(--max-width); margin: 0 auto; padding: 1rem 1.5rem 6rem; border-top: 1px solid var(--color-cream-deep); } .similar-section .section-head{ margin-top: 3rem; } .similar-section .product-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; } @media (max-width: 940px){ .similar-section .product-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .similar-section .product-grid{ grid-template-columns: 1fr; } } /* ---- not found ---- */ .not-found{ text-align: center; max-width: 480px; margin: 4rem auto; } .not-found h1{ font-size: 1.9rem; margin-bottom: 0.8rem; } .not-found p{ color: var(--color-charcoal); margin-bottom: 1.6rem; } /* ========================= LIGHTBOX ========================= */ body.lightbox-lock{ overflow: hidden; } .lightbox-overlay{ position: fixed; inset: 0; z-index: 200; background: rgba(22,20,15,0.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 250ms ease; } .lightbox-overlay.open{ opacity: 1; visibility: visible; } .lightbox-image{ max-width: 88vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,0.4); } .lightbox-close{ position: absolute; top: 1.2rem; right: 1.5rem; background: none; border: none; color: var(--color-white); font-size: 2.2rem; line-height: 1; cursor: pointer; padding: 0.3rem 0.6rem; transition: opacity var(--transition); } .lightbox-close:hover{ opacity: 0.7; } .lightbox-nav{ position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); border: none; color: var(--color-white); width: 46px; height: 46px; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition); } .lightbox-nav:hover{ background: rgba(255,255,255,0.24); } .lightbox-prev{ left: 1rem; } .lightbox-next{ right: 1rem; } @media (max-width: 620px){ .lightbox-nav{ width: 38px; height: 38px; font-size: 1.5rem; } .lightbox-close{ top: 0.8rem; right: 1rem; font-size: 1.9rem; } } @media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; transition: none !important; animation: none !important; } .reveal{ opacity: 1 !important; transform: none !important; } body{ animation: none !important; } }