/* Typography scale and route handling. Loaded last so it settles the layout files that came before it. */ /* --- No intermediate page while a route loads ------------------------------- index.html ships the full homepage markup for every route, and catalog.js only replaces
after its fetch resolves. That made the homepage flash past on the way into a product and again on the way back, which reads as an extra page in the middle of the journey. The route class is set from an inline script in , before first paint, so the sections that do not belong to the current route are never painted at all. */ html.route-product main > section, html.route-list #home, html.route-list #collections, html.route-list #story, html.route-list #about, html.route-list #help, html.route-list #contact, html.route-contact #home, html.route-contact #collections, html.route-contact #shop, html.route-contact #story, html.route-checkout main > section:not(.checkout-page) { display: none !important; } /* A calm placeholder holds the viewport while the product fetch is in flight, instead of a flash of unrelated content. */ html.route-product main::before { content: ''; display: block; min-height: 60vh; } html.route-product main:has(.product-detail)::before { display: none; } html.route-checkout main::before { content:''; display:block; min-height:70vh; } html.route-checkout main:has(.checkout-page)::before { display:none; } /* --- Type scale ------------------------------------------------------------- The previous clamp() minimums were sized for desktop, so on a phone they never scaled down: the hero sat at 75px and section headings at 53px on a 375px screen. Lower minimums and gentler maximums keep the editorial feel while staying elegant on small screens. */ h1 { font-size: clamp(40px, 8vw, 104px); letter-spacing: -.035em; } .section h2, .shop h2 { font-size: clamp(28px, 4.4vw, 54px); letter-spacing: -.03em; } .story-copy h2 { font-size: clamp(28px, 4.2vw, 52px); } .hero-sub { font-size: clamp(13px, 1.2vw, 15px); } .section-intro { font-size: clamp(12px, 1.1vw, 14px); } /* Product page: the name ran to 78px, which dwarfed the rest of the panel. */ .product-detail h1 { font-size: clamp(23px, 2.9vw, 40px); line-height: 1.1; } /* Marketplace-style names run past 130 characters and swamped the panel at the size that suits a short one. Scale by name length so both read well. */ .product-detail h1.is-long { font-size: clamp(18px, 2vw, 27px); line-height: 1.26; } .product-detail .detail-lead { font-size: clamp(13px, 1.15vw, 15px); } .product-detail .detail-price { font-size: clamp(19px, 1.7vw, 24px); } /* --- Photographs fill their frames ------------------------------------------ Catalogue photography is prepared as portrait imagery. Use one full-bleed 3:4 frame so there are no exposed mats or white bands at the sides/edges. `cover` fills the frame without distorting the source proportions. */ .category-card img { object-fit: cover; object-position: center; } .product-image { aspect-ratio: 3 / 4; height: auto; background: var(--sand, #f7ece9); } .product-image img { object-fit: cover; object-position: 50% 50%; } .product-image.has-image:hover img { transform: scale(1.015); } /* --- Card titles ------------------------------------------------------------ Product names are marketplace-style SEO strings, pipe-separated and well past 100 characters. catalog.js now shows only the descriptive first segment; this keeps that to two tidy lines at a size that suits a card rather than a heading. */ .product-info h3 { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.3; } .product-info h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The stage was a fixed height with object-fit:contain, so any photograph whose proportions differed from the box was letterboxed - a landscape shot left wide empty bands above and below it. catalog.js now sets aspect-ratio from the decoded image, so the frame hugs the photo and the gaps disappear. The ratio below is only the placeholder used before the image decodes. */ .product-detail-stage { min-height: 0; aspect-ratio: 1 / 1; max-height: 74vh; } @media (max-width: 800px) { .shop-head { margin-bottom: 28px; padding-bottom: 22px; } .section { padding: 56px 20px; } } /* --- Catalogue card alignment ---------------------------------------------- Names wrap to two lines on some pieces and one on others, so prices collided with long names and the enquiry links landed at different heights across a row. Make each card a column of equal height with the action pinned to the bottom, and stop the price from being squeezed. */ .product-card { display: flex; flex-direction: column; height: 100%; } .product-info { gap: 14px; align-items: baseline; } .product-info > div { min-width: 0; } .product-info h3 { overflow-wrap: anywhere; } .price { white-space: nowrap; } .sale-price { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:4px 8px; } .sale-price del { color:#8f837d; font-size:.86em; font-weight:400; text-decoration-thickness:1px; } .sale-price strong { color:#7b294b; font-weight:700; } .sale-price small { flex-basis:100%; color:#986c20; font:600 8px/1.2 var(--sans); letter-spacing:.11em; text-align:right; text-transform:uppercase; } .product-detail .sale-price { justify-content:flex-start; gap:5px 13px; } .product-detail .sale-price small { flex-basis:auto; padding:4px 7px; border:1px solid rgba(152,108,32,.28); border-radius:999px; text-align:left; } .catalog-actions { margin-top: auto; padding-top: 10px; } .product-grid { align-items: stretch; } @media (max-width: 600px) { /* Price under the name rather than fighting it for width. */ .product-info { display: block; } .product-info .price { display: block; margin-top: 6px; } } /* --- Mobile header ---------------------------------------------------------- styles.css hides the desktop nav below 800px, but brand-header.css loads afterwards and sets `.nav-left,.nav-right,...{display:flex}` with no media query, so that unconditional rule won and the desktop links stayed on screen overlapping the centred wordmark. Restore the intended mobile behaviour: the hamburger drives navigation there. */ @media (max-width: 800px) { .nav-left, .nav-right .text-button, .profile { display: none !important; } .site-header { height: 70px; padding: 0 18px; } .brand { font-size: 30px; } /* Keep customer access visible without opening the hamburger menu. The earlier mobile rule hides every `.nav-right > a`, which unintentionally included the feature-flagged account entry. */ .nav-right { gap: 7px; } .nav-right > .account-link { display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 42px; min-height: 42px; padding: 0; border: 0; color: #fffaf2; font-size: 7px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; } .nav-right > .account-link::before { content: ""; width: 16px; height: 16px; border: 1.35px solid currentColor; border-radius: 50%; background: radial-gradient(circle at 50% 35%, currentColor 0 2.4px, transparent 2.7px), radial-gradient(ellipse at 50% 105%, transparent 0 4.5px, currentColor 4.8px 5.7px, transparent 6px); box-shadow: 0 0 0 4px rgba(197,160,89,.08); } .nav-right > .account-link::after { display: none; } /* The header is absolutely positioned, so page content has to clear it. */ .product-detail { padding-top: 118px; } .product-detail-back { margin-bottom: 18px; } } @media (max-width: 360px) { .site-header { padding-inline: 13px; } .brand span { font-size: 27px; } .brand { margin-inline: 5px; } .nav-right > .account-link { width: 38px; font-size: 6.5px; } } /* catalog.css pins `.product-detail-media img { aspect-ratio:.78/1; object-fit:cover }`, which forced every product photograph into a portrait box regardless of its real shape - a 16:9 image was laid out 333x427 inside a 333x186 frame. That forced ratio is what produced the empty bands. The stage now takes its ratio from the decoded image (see fitStage in catalog.js), so the photo just fills its frame. */ .product-detail-media img { aspect-ratio: auto; } .product-zoom-trigger img { width: 100%; height: 100%; object-fit: contain; } /* --- Inquiry dialog --------------------------------------------------------- The heading was clamp(43px,5vw,63px) - sized for a two-word product name, so a real one filled the dialog and pushed the form out of view. The name shown is the shortened form now, and this brings the heading to a size a sentence can live at. */ .inquiry-modal h2 { font-size: clamp(21px, 2.4vw, 32px); line-height: 1.12; margin: 10px 0 16px; } .inquiry-modal { max-height: 88vh; } @media (max-width: 800px) { .inquiry-modal h2 { font-size: clamp(19px, 5.4vw, 26px); } } /* --- Product assurance badges ---------------------------------------------- Care guidance and service promises, configured in Amyeèra Website → Settings. Three across on desktop, two on a phone, so the labels never crowd. */ .product-assurances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; margin: 30px 0 4px; padding: 26px 0 4px; border-top: 1px solid var(--line); } .assurance { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .assurance svg { width: 42px; height: 42px; fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .assurance span { color: var(--muted); font-size: 11px; line-height: 1.45; letter-spacing: .04em; } @media (max-width: 600px) { .product-assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .assurance svg { width: 36px; height: 36px; } } /* --- Offer strip ------------------------------------------------------------ Live coupons on the product page. Orders arrive over WhatsApp, so the code is the thing the customer has to carry - it gets the emphasis. */ .offer-strip { display: grid; gap: 10px; margin: 26px 0 4px; } .offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 13px 16px; border: 1px dashed var(--gold); background: rgba(232, 194, 210, .22); } .offer-amount { color: var(--gold); font-weight: 600; font-size: 13px; letter-spacing: .02em; } .offer-title { color: var(--onyx); font-size: 12px; } .offer-code { margin-left: auto; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .offer-code b { color: var(--onyx); font-weight: 700; letter-spacing: .12em; } .offer small { flex-basis: 100%; color: var(--muted); font-size: 11px; } @media (max-width: 600px) { .offer-code { margin-left: 0; flex-basis: 100%; } } /* Launch offer: restrained editorial dialog, sized for phones first. */ .offer-popup { position:relative; width:min(448px,calc(100vw - 32px)); max-width:calc(100vw - 32px); padding:clamp(34px,8vw,58px) clamp(24px,7vw,54px) clamp(30px,7vw,46px); border:1px solid rgba(197,160,89,.62); border-radius:18px; background:linear-gradient(145deg,#fffdf9 0%,#fff8ef 100%); color:var(--onyx); box-shadow:0 28px 100px rgba(35,24,27,.34),0 0 0 8px rgba(255,250,245,.18); text-align:center; overflow:hidden; } .offer-popup::before { content:""; position:absolute; inset:10px; border:1px solid rgba(197,160,89,.2); border-radius:11px; pointer-events:none; } .offer-popup::backdrop { background:rgba(35,24,27,.48); backdrop-filter:blur(5px); } .offer-popup-close { position:absolute; top:12px; right:14px; border:0; background:none; color:var(--muted); font-size:24px; line-height:1; cursor:pointer; } .offer-popup-gift { position:relative; margin:0 0 18px; color:var(--gold); font:600 10px/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; } .offer-popup-kicker { margin:0 0 6px; color:var(--gold); font:600 12px/1.4 var(--sans); letter-spacing:.13em; text-transform:uppercase; } .offer-popup h2 { margin:0 auto 14px; max-width:330px; font:400 clamp(30px,7vw,44px)/1.02 var(--serif); } .offer-popup-copy { margin:0 auto 28px; max-width:320px; color:var(--muted); font-size:13px; line-height:1.75; } .offer-popup-code { display:inline-flex; align-items:center; gap:14px; margin:4px 0 10px; padding:13px 18px; border:1px dashed var(--gold); border-radius:6px; background:rgba(232,194,210,.2); } .offer-popup-code span { color:var(--muted); font:10px var(--sans); letter-spacing:.1em; text-transform:uppercase; } .offer-popup-code strong { color:var(--onyx); font:700 15px var(--sans); letter-spacing:.18em; } .offer-popup>small { display:block; margin-bottom:24px; color:var(--muted); font-size:10px; } .offer-popup .button { display:inline-flex; } .offer-popup-form { position:relative; z-index:1; margin:0 auto; max-width:320px; text-align:left; } .offer-popup-form label { display:block; margin-bottom:9px; color:var(--muted); font:10px var(--sans); letter-spacing:.1em; text-transform:uppercase; } .offer-popup-form input { display:block; width:100%; box-sizing:border-box; padding:14px 13px; border:1px solid rgba(35,24,27,.2); border-radius:5px; background:#fff; color:var(--onyx); font:13px var(--sans); } .offer-popup-form input:focus { outline:2px solid rgba(197,160,89,.45); outline-offset:1px; } .offer-popup-form .button { width:100%; justify-content:center; margin-top:10px; padding:14px 14px; border-radius:5px; font-size:10px; } .offer-popup-form .button:disabled { opacity:.6; cursor:wait; } .offer-popup-status { min-height:16px; margin:8px 0 0; color:var(--muted); font-size:11px; } .offer-popup-success { margin:0 0 14px; color:var(--muted); font-size:12px; } .offer-popup-unlocked { text-align:center; } @media (max-width: 520px) { .offer-popup { border-radius:14px; } } /* Payment-neutral cart and checkout foundation. */ .catalog-actions { display:flex; align-items:center; gap:12px; min-height:28px; } .wishlist-toggle,.wishlist-button { border:0; background:none; color:var(--gold); cursor:pointer; font-size:22px; line-height:1; } .wishlist-toggle.is-saved,.wishlist-button.is-saved { color:#9a4268; } .add-cart { border:0; background:none; cursor:pointer; padding:0; } .cart-line { grid-template-columns:64px 1fr auto; } .cart-line-image { width:64px; height:78px; display:grid; place-items:center; overflow:hidden; background:#eee8de; color:var(--muted); font:10px var(--sans); text-align:center; } .cart-line-image img { width:100%; height:100%; object-fit:cover; } .cart-quantity { display:flex; align-items:center; gap:10px; margin-top:8px; color:var(--muted); } .cart-quantity button { width:22px; height:22px; padding:0; border:1px solid var(--line); background:transparent; } .cart-secure-note { color:var(--muted); font-size:10px; line-height:1.5; } .checkout-heading { max-width:620px; margin:45px auto 58px; text-align:center; } .checkout-heading h1 { font-size:clamp(58px,8vw,100px); } .checkout-heading>p:last-child { max-width:420px; margin:24px auto 0; color:var(--muted); line-height:1.8; } .checkout-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.72fr); gap:clamp(28px,7vw,100px); max-width:1050px; margin:auto; } .checkout-review,.checkout-form { padding:clamp(22px,4vw,42px); border:1px solid var(--line); background:#fffdf9; } .checkout-form { background:#f3eee6; } .checkout-form h2 { margin:0 0 28px; font-size:48px; } .checkout-form label { display:block; margin-top:16px; color:var(--muted); font:10px var(--sans); letter-spacing:.1em; text-transform:uppercase; } .checkout-form input,.checkout-form textarea { display:block; width:100%; margin-top:7px; padding:12px; border:1px solid var(--line); background:#fffdf9; color:var(--onyx); font:13px var(--sans); } .checkout-form textarea { min-height:90px; resize:vertical; } .checkout-form .button { margin-top:24px; } .checkout-security,.checkout-status,.checkout-expiry { color:var(--muted); font-size:11px; line-height:1.6; } .checkout-shipping-status { display:block; margin-top:7px; color:var(--muted); font-size:10px; line-height:1.45; letter-spacing:.02em; } .checkout-shipping-status.is-success { color:#32704b; } .checkout-shipping-status.is-error { color:#a63d4f; } .checkout-delivery-estimate { margin:14px 0 0; padding:11px 13px; border:1px solid rgba(180,128,39,.22); border-radius:10px; background:rgba(212,175,55,.07); color:#6f5360; font-size:11px; } .checkout-lines { border-top:1px solid var(--line); } .checkout-line { display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); } .checkout-line strong,.checkout-line small { display:block; } .checkout-line strong { font-family:var(--serif); font-size:22px; font-weight:500; } .checkout-line small { margin-top:4px; color:var(--muted); font-size:10px; letter-spacing:.08em; } .checkout-total { display:flex; justify-content:space-between; margin-top:26px; font-family:var(--serif); font-size:27px; } .checkout-total strong { font-family:var(--sans); font-size:15px; } .checkout-loading { color:var(--muted); } @media (max-width:800px) { .checkout-layout { grid-template-columns:1fr; } .checkout-heading { margin-top:30px; margin-bottom:38px; } } /* Keep commerce actions with their product card instead of stretching them to the tallest card in the grid. */ .catalog-layout { align-items:start; } .filter-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 0 16px; color:var(--muted); font-size:9px; letter-spacing:.12em; text-transform:uppercase; } .filter-panel-head button { padding:5px 0; border:0; border-bottom:1px solid var(--gold); background:transparent; color:#875719; font-size:9px; letter-spacing:.1em; text-transform:uppercase; } .filter-panel-head button:disabled { border-color:transparent; color:#b6ada6; cursor:default; } .catalog-filter-group { border-top:1px solid var(--line); } .catalog-filter-group summary { position:relative; display:flex; flex-direction:column; gap:3px; padding:17px 25px 16px 0; cursor:pointer; list-style:none; font:500 20px/1.1 var(--serif); text-transform:capitalize; } .catalog-filter-group summary::-webkit-details-marker { display:none; } .catalog-filter-group summary::after { content:"+"; position:absolute; top:16px; right:4px; color:#9a6a28; font:400 18px/1 var(--sans); transition:transform .2s ease; } .catalog-filter-group[open] summary::after { transform:rotate(45deg); } .catalog-filter-group summary small { overflow:hidden; color:#8a767e; font:500 8px/1.35 var(--sans); letter-spacing:.08em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; } .filter-panel .catalog-filter-group fieldset { border-top:0; padding:2px 0 16px; } .filter-panel .catalog-filter-group fieldset label { margin:8px 0; } .filter-panel .filter-all-option { color:#875719; font-weight:600; } @media (min-width:801px) { .filters { position:sticky; top:118px; max-height:calc(100vh - 142px); overflow-y:auto; padding-right:12px; scrollbar-color:rgba(171,119,52,.45) transparent; scrollbar-width:thin; } .filters::-webkit-scrollbar { width:4px; } .filters::-webkit-scrollbar-thumb { border-radius:9px; background:rgba(171,119,52,.38); } } .product-grid { align-self:start; align-content:start; align-items:start; row-gap:42px; } .product-card { height:auto; align-self:start; padding-bottom:5px; } .product-card .product-info { min-height:84px; } .product-card .catalog-actions { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:11px; align-items:center; min-height:0; margin:4px 0 0; padding:0; } .product-card .catalog-actions.secondary-action { display:block; margin-top:11px; padding:0 2px; } .product-card .catalog-actions.secondary-action .text-link { margin:0; } .product-card .wishlist-toggle { position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid rgba(158,102,28,.55); border-radius:50%; background:linear-gradient(145deg,#fffdf8 8%,#f0e3cf 100%); color:#8c571b; box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -2px -2px 4px rgba(113,68,20,.10),0 5px 10px rgba(83,50,24,.14); transition:transform .25s ease,box-shadow .25s ease,color .25s ease; } .product-card .catalog-actions .wishlist-toggle { grid-column:2; } .product-card .wishlist-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; } .product-card .wishlist-toggle:hover { transform:translateY(-2px); color:#6f193d; box-shadow:inset 1px 1px 0 #fff,0 9px 18px rgba(83,50,24,.20); } .product-card .wishlist-toggle:active { transform:translateY(1px); box-shadow:inset 1px 2px 4px rgba(83,50,24,.16); } .product-card .add-cart { position:relative; display:flex; align-items:center; justify-content:space-between; min-width:0; min-height:44px; padding:0 15px 0 17px; overflow:hidden; border:1px solid #9d651c; border-radius:5px; background:linear-gradient(145deg,#d9b45d 0%,#b57a24 46%,#8c571b 100%); color:#2f1722; box-shadow:inset 1px 1px 0 rgba(255,243,190,.72),inset -2px -3px 5px rgba(78,36,9,.22),0 7px 15px rgba(83,50,24,.20); font:600 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; transition:transform .25s ease,box-shadow .25s ease,filter .25s ease; } .product-card .add-cart::before { content:""; position:absolute; inset:1px 2px auto; height:42%; border-radius:4px 4px 50% 50%; background:linear-gradient(rgba(255,255,255,.20),transparent); pointer-events:none; } .product-card .add-cart-label,.product-card .add-cart-mark { position:relative; z-index:1; } .product-card .add-cart-mark { margin-left:10px; font:400 17px/1 var(--sans); } .product-card .add-cart:hover { transform:translateY(-2px); filter:saturate(1.08) brightness(1.03); box-shadow:inset 1px 1px 0 rgba(255,243,190,.8),0 11px 22px rgba(83,50,24,.28); } .product-card .add-cart:active { transform:translateY(1px); box-shadow:inset 1px 2px 5px rgba(65,30,8,.27),0 3px 7px rgba(83,50,24,.16); } .product-detail .wishlist-button { display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid rgba(158,102,28,.55); border-radius:50%; background:linear-gradient(145deg,#fffdf8,#f0e3cf); color:#8c571b; box-shadow:inset 1px 1px 0 #fff,0 6px 14px rgba(83,50,24,.15); } .product-detail .wishlist-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; } .product-detail .wishlist-button:hover { transform:translateY(-2px); color:#6f193d; } @media (max-width:600px) { .filter-panel-head { padding-top:14px; } .catalog-filter-group summary { padding-top:15px; padding-bottom:14px; font-size:19px; } .product-grid { row-gap:30px; } .product-card .product-info { min-height:104px; padding-top:11px; } .product-card .catalog-actions { grid-template-columns:minmax(0,1fr) 39px; gap:7px; margin-top:2px; } .product-card .add-cart { min-height:39px; padding:0 9px 0 11px; font-size:8px; letter-spacing:.10em; } .product-card .add-cart-mark { margin-left:5px; font-size:14px; } .product-card .wishlist-toggle { width:39px; height:39px; } .product-card .wishlist-toggle svg { width:18px; height:18px; } .product-card .catalog-actions.secondary-action { margin-top:8px; } .product-card .catalog-actions.secondary-action .text-link { font-size:7.5px; letter-spacing:.08em; } } /* Complete checkout: resilient, editorial and deliberately payment-neutral. */ .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } .checkout-route { background:linear-gradient(145deg,#fffaf5 0%,#f8eeea 52%,#f2e5de 100%); } .checkout-route .announcement { position:relative; z-index:8; } .checkout-route .site-header { position:absolute; top:30px; color:#4a2134; border-bottom:1px solid rgba(122,60,88,.14); background:rgba(255,250,247,.84); backdrop-filter:blur(16px); } .checkout-route .checkout-page { min-height:100vh; padding-top:clamp(150px,14vw,200px); } .checkout-route .product-detail-back { color:#6a3b50; } .checkout-heading { max-width:720px; margin:45px auto 64px; } .checkout-heading h1 { color:#4a2134; text-shadow:0 2px 0 #fff; } .checkout-heading h1 i,.checkout-form h2 i { color:#a56a31; } .checkout-layout { grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); align-items:start; gap:clamp(26px,5vw,70px); max-width:1180px; } .checkout-summary-column { display:grid; gap:22px; } .checkout-review,.checkout-coupon,.checkout-form { border:1px solid rgba(122,60,88,.16); border-radius:18px; background:rgba(255,253,249,.94); box-shadow:0 24px 70px rgba(79,38,53,.09),inset 0 1px 0 #fff; } .checkout-review,.checkout-coupon { padding:clamp(24px,3.5vw,40px); } .checkout-form { position:sticky; top:104px; padding:clamp(27px,3.8vw,44px); background:linear-gradient(150deg,rgba(252,246,241,.98),rgba(242,225,220,.97)); } .checkout-card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; } .checkout-card-heading .eyebrow { margin-bottom:7px; } .checkout-card-heading h2,.checkout-coupon h2 { color:#4a2134; font-size:clamp(30px,3vw,42px); line-height:1; } .checkout-card-heading>a { padding-bottom:4px; border-bottom:1px solid rgba(165,106,49,.55); color:#805c42; font-size:9px; letter-spacing:.12em; text-transform:uppercase; } .checkout-lines { border-color:rgba(122,60,88,.12); } .checkout-line { align-items:center; padding:19px 0; border-color:rgba(122,60,88,.12); } .checkout-line>span { color:#4a2134; font-weight:600; white-space:nowrap; } .checkout-totals { margin-top:22px; } .checkout-totals>div { display:flex; justify-content:space-between; gap:20px; padding:7px 0; color:var(--muted); } .checkout-totals>div strong { color:#4a2134; font-size:12px; } .checkout-totals .checkout-discount,.coupon-status.is-success { color:#32704b; } .checkout-totals .checkout-discount strong { color:#32704b; } .checkout-totals .checkout-total { margin-top:13px; padding-top:18px; border-top:1px solid rgba(122,60,88,.18); color:#4a2134; } .checkout-totals .checkout-total strong { font-size:16px; } .checkout-expiry { margin:18px 0 0; } .checkout-coupon>p { margin:0 0 18px; color:var(--muted); } .coupon-entry { display:grid; grid-template-columns:1fr auto; border:1px solid rgba(122,60,88,.23); border-radius:9px; overflow:hidden; background:#fffdfa; transition:border-color .2s,box-shadow .2s; } .coupon-entry:focus-within { border-color:#a56a31; box-shadow:0 0 0 3px rgba(165,106,49,.12); } .coupon-entry input { min-width:0; height:48px; padding:0 16px; border:0; outline:0; background:transparent; color:#4a2134; font:600 12px var(--sans); letter-spacing:.16em; text-transform:uppercase; } .coupon-entry button { min-width:105px; border:0; background:linear-gradient(145deg,#c99a55,#946026); color:#fffaf2; font:600 9px var(--sans); letter-spacing:.14em; text-transform:uppercase; } .coupon-entry button:disabled { opacity:.6; cursor:wait; } .coupon-status { min-height:18px; margin:10px 0 0; color:var(--muted); font-size:11px; } .coupon-status.is-error,.checkout-status.is-error { color:#a13f4f; } .checkout-form h2 { margin-bottom:14px; color:#4a2134; font-size:clamp(42px,4vw,58px); line-height:.9; } .checkout-form-intro { margin:0 0 25px; color:#725f67; font-size:11px; line-height:1.6; } .checkout-address-book { margin:0 0 20px; padding:16px; border:1px solid rgba(122,60,88,.14); border-radius:10px; background:rgba(255,253,250,.64); } .checkout-address-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; } .checkout-address-heading strong { color:#4a2134; font:600 17px var(--serif); } .checkout-address-heading button,.checkout-address-edit { padding:0; border:0; background:none; color:#8f5d2d; font:600 8px var(--sans); letter-spacing:.1em; text-transform:uppercase; } [data-checkout-addresses]>p { margin:12px 0 0; color:#725f67; font-size:10px; line-height:1.6; } [data-checkout-addresses] a { color:#6f2949; font-weight:600; } .checkout-address-options { display:grid; gap:8px; margin-top:12px; } .checkout-address-option { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:10px 11px; border:1px solid rgba(122,60,88,.14); border-radius:8px; background:#fffdfa; } .checkout-address-option.default { border-color:rgba(165,106,49,.35); } .checkout-address-option.selected { border-color:#a56a31; box-shadow:0 0 0 2px rgba(165,106,49,.1); } .checkout-address-option>[data-checkout-address-use] { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; padding:0; border:0; background:none; color:#4a2134; text-align:left; } .checkout-address-option strong { font:600 15px var(--serif); } .checkout-address-option small { align-self:center; color:#9a711f; font:700 7px var(--sans); letter-spacing:.1em; text-transform:uppercase; } .checkout-address-option span { grid-column:1/-1; color:#725f67; font:9px var(--sans); } .checkout-address-save { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:12px; margin:18px 0 4px; padding:15px; border:1px dashed rgba(122,60,88,.22); border-radius:9px; } .checkout-address-save[hidden] { display:none!important; } .checkout-address-save label { margin-top:0; } .checkout-default-address { display:flex!important; align-items:center; gap:9px; min-height:45px; padding-top:17px; text-transform:none!important; letter-spacing:0!important; } .checkout-default-address input { width:16px!important; height:16px!important; margin:0!important; } .checkout-address-save button { min-height:42px; border:0; border-radius:6px; background:#6f2949; color:#fff; font:600 8px var(--sans); letter-spacing:.1em; text-transform:uppercase; } .checkout-address-save p { grid-column:1/-1; min-height:14px; margin:0; color:#32704b; font-size:10px; } .checkout-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } .checkout-field-wide { grid-column:1/-1; } .checkout-form label { margin-top:14px; color:#684757; font-weight:600; } .checkout-form input,.checkout-form select,.checkout-form textarea { display:block; width:100%; margin-top:7px; padding:0 12px; border:1px solid rgba(122,60,88,.18); border-radius:6px; outline:0; background:rgba(255,253,250,.94); color:#39232d; font:13px var(--sans); text-transform:none; transition:border-color .2s,box-shadow .2s; } .checkout-form input,.checkout-form select { height:45px; } .checkout-form textarea { min-height:82px; padding-top:12px; resize:vertical; } .checkout-form input:focus,.checkout-form select:focus,.checkout-form textarea:focus { border-color:#a56a31; box-shadow:0 0 0 3px rgba(165,106,49,.10); } .checkout-form input:user-invalid,.checkout-form select:user-invalid { border-color:#a13f4f; } .checkout-consent { display:flex!important; align-items:flex-start; gap:10px; margin-top:23px!important; font-size:10px!important; line-height:1.55; letter-spacing:.04em!important; text-transform:none!important; } .checkout-consent input { flex:0 0 16px; width:16px; height:16px; margin:1px 0 0; accent-color:#8f5d2d; } .checkout-form .button { min-height:51px; border-radius:7px; background:linear-gradient(145deg,#5e2942,#3c192b); color:#fffaf2; box-shadow:inset 0 1px rgba(255,255,255,.2),0 12px 25px rgba(62,25,43,.18); } .checkout-form .whatsapp-checkout { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:11px; width:100%; border-color:#176b49; background:linear-gradient(145deg,#2fbd78,#148953 55%,#106b43); color:#fff; text-align:center; } .checkout-form .whatsapp-checkout svg { width:22px; height:22px; fill:currentColor; } .checkout-form .whatsapp-checkout span:nth-child(2) { font:600 10px var(--sans); letter-spacing:.14em; text-transform:uppercase; } .checkout-security strong { color:#5e2942; } .checkout-security { display:flex; gap:9px; margin:16px 2px 0; } .checkout-security span { color:#a56a31; } .checkout-status { min-height:20px; margin:12px 0 0; font-weight:500; } .checkout-upi { margin-top:24px; padding:22px; border:1px solid rgba(165,106,49,.35); border-radius:14px; background:linear-gradient(145deg,#fffdf8,#f5e8db); box-shadow:0 18px 45px rgba(75,33,48,.1); } .checkout-upi-heading h3 { margin:4px 0 8px; color:#4a2134; font:600 31px/1 var(--serif); } .checkout-upi-heading>p:last-child { margin:0; color:#725f67; font-size:11px; line-height:1.55; } .checkout-account-notice { margin:18px 0 0; padding:14px 16px; border:1px solid rgba(165,106,49,.22); border-radius:10px; background:rgba(255,253,248,.72); color:#725f67; font-size:11px; line-height:1.65; } .checkout-account-notice strong { color:#5e2942; } .checkout-upi-body { display:grid; grid-template-columns:180px minmax(0,1fr); gap:22px; align-items:center; margin-top:20px; } .checkout-upi-qr { display:grid; place-items:center; padding:12px; border:1px solid rgba(122,60,88,.14); border-radius:12px; background:#fff; } .checkout-upi-qr img { display:block; width:154px; height:154px; } .checkout-upi-qr small { margin-top:7px; color:#806c73; font-size:8px; letter-spacing:.1em; text-transform:uppercase; } .checkout-upi-details>span { display:block; color:#806c73; font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .checkout-upi-details>strong { display:block; margin:4px 0 13px; color:#4a2134; font:600 36px/1 var(--serif); } .checkout-upi-details dl { margin:0 0 14px; } .checkout-upi-details dl div { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid rgba(122,60,88,.1); font-size:10px; } .checkout-upi-details dt { color:#806c73; } .checkout-upi-details dd { margin:0; color:#4a2134; font-weight:700; } .checkout-upi .button { display:flex; justify-content:center; align-items:center; gap:10px; min-height:45px; margin-top:9px; text-decoration:none; } .checkout-upi-open { background:linear-gradient(145deg,#a56a31,#805022)!important; } .checkout-upi-warning { margin:17px 0 0; padding-top:14px; border-top:1px solid rgba(122,60,88,.13); color:#725f67; font-size:10px; line-height:1.55; } .checkout-upi-warning strong { color:#8d3f4d; } .checkout-loading { min-height:170px; display:grid; place-items:center; } @media (max-width:900px) { .checkout-layout { grid-template-columns:1fr; max-width:680px; } .checkout-form { position:static; } } @media (max-width:600px) { .checkout-route .site-header { height:72px; padding:0 18px; } .checkout-route .checkout-page { padding:130px 18px 70px; } .checkout-heading { margin:35px auto 40px; } .checkout-heading h1 { font-size:52px; } .checkout-review,.checkout-coupon,.checkout-form { border-radius:13px; } .checkout-review,.checkout-coupon,.checkout-form { padding:23px 19px; } .checkout-card-heading { margin-bottom:18px; } .checkout-card-heading h2 { font-size:31px; } .checkout-field-grid { grid-template-columns:1fr; } .checkout-address-heading { align-items:flex-start; flex-direction:column; } .checkout-address-save { grid-template-columns:1fr; } .checkout-field-wide { grid-column:auto; } .checkout-form h2 { font-size:44px; } .checkout-line strong { font-size:19px; } .checkout-line { gap:12px; } .checkout-upi { padding:18px 14px; } .checkout-upi-body { grid-template-columns:1fr; } .checkout-upi-qr { width:180px; max-width:100%; margin:auto; box-sizing:border-box; } .coupon-entry button { min-width:86px; } } /* My Amyeèra entry and contextual sign-in. The heart keeps the customer in the shopping moment: authentication happens in this compact editorial dialog, then the requested piece is saved without a page change. */ .customer-reviews{padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,120px);border-top:1px solid rgba(122,60,88,.13);background:linear-gradient(145deg,#fffaf5,#f8eceb)} .overall-reviews{margin-top:clamp(50px,8vw,110px)} .reviews-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:38px}.reviews-heading h2{margin:7px 0 0;color:#4a2134;font:500 clamp(42px,5vw,72px)/.92 var(--serif)}.reviews-heading h2 i{color:#a56a31;font-weight:500} .reviews-summary{display:flex;align-items:center;gap:16px;min-width:220px;padding:16px 20px;border:1px solid rgba(165,106,49,.25);border-radius:14px;background:rgba(255,255,255,.58);box-shadow:0 12px 35px rgba(79,38,53,.07)}.reviews-summary>strong{color:#4a2134;font:600 35px/1 var(--serif)}.reviews-summary>span{display:block}.reviews-summary small{display:block;margin-top:5px;color:#806c73;font-size:9px;letter-spacing:.08em;text-transform:uppercase} .review-star-fill,.review-star-empty{font-family:Arial,sans-serif;font-size:15px;letter-spacing:.12em}.review-star-fill{color:#b77a20}.review-star-empty{color:#d8c9bd} .review-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.review-card{display:flex;flex-direction:column;min-height:250px;padding:25px;border:1px solid rgba(122,60,88,.14);border-radius:17px;background:#fffdf9;box-shadow:0 16px 44px rgba(62,25,43,.07)}.review-card h3{margin:14px 0 9px;color:#4a2134;font:600 25px/1.05 var(--serif)}.review-card>p{flex:1;margin:0;color:#735f67;font-size:12px;line-height:1.75}.review-card footer{display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;margin-top:21px;padding-top:15px;border-top:1px solid rgba(122,60,88,.1);font-size:9px}.review-card footer strong{color:#4a2134;font-size:11px}.review-card footer span{padding:4px 7px;border-radius:999px;background:#e3efe7;color:#387150;font-weight:700}.review-card footer time{margin-left:auto;color:#927d84} .review-compose{max-width:760px;margin:28px auto 0;border:1px solid rgba(165,106,49,.27);border-radius:14px;background:rgba(255,253,249,.72)}.review-compose summary{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;color:#5e2942;cursor:pointer;font:600 14px var(--sans);list-style:none}.review-compose summary::-webkit-details-marker{display:none}.review-compose[open] summary span{transform:rotate(45deg)}.review-compose form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:4px 22px 24px;border-top:1px solid rgba(122,60,88,.1)}.review-compose fieldset{grid-column:1/-1;margin:18px 0 0;padding:0;border:0}.review-compose legend,.review-compose label{color:#6b4758;font:700 9px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}.review-compose input[type=text],.review-compose input:not([type]),.review-compose textarea{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:13px;border:1px solid rgba(122,60,88,.2);border-radius:8px;background:#fff;color:#39232d;font:13px/1.5 var(--sans);letter-spacing:0;text-transform:none}.review-compose textarea{min-height:115px;resize:vertical}.review-compose .button{align-self:end;min-height:48px}.review-compose form>small{grid-column:1/-1;color:#8a7580;font-size:9px;line-height:1.55}.review-compose [data-review-status]{align-self:center;margin:0;color:#3d7254;font-size:11px}.review-compose [data-review-status].is-error{color:#a13f4f} .review-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:5px}.review-rating label{cursor:pointer}.review-rating input{position:absolute;opacity:0;pointer-events:none}.review-rating span{display:block;padding:8px 11px;border:1px solid #dbc9bd;border-radius:999px;background:#fff;color:#816a72;font-size:9px}.review-rating input:checked~span,.review-rating label:hover span{border-color:#a56a31;background:#f1dfbd;color:#6b421b} .product-review-invite{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:18px 0 4px;padding:15px 16px;border:1px solid rgba(165,106,49,.25);border-radius:13px;background:linear-gradient(125deg,#fffdf9,#f9eeea);box-shadow:0 10px 26px rgba(79,38,53,.06)}.product-review-invite-stars{color:#b77a20;font:15px Arial,sans-serif;letter-spacing:.08em}.product-review-invite div{display:grid;gap:3px}.product-review-invite strong{color:#4a2134;font:600 17px/1.1 var(--serif)}.product-review-invite small{color:#806c73;font:10px/1.45 var(--sans)}.product-review-invite button{min-height:38px;padding:0 13px;border:1px solid #a56a31;border-radius:999px;background:#fffaf4;color:#6b421b;font:700 10px var(--sans);letter-spacing:.05em;cursor:pointer;white-space:nowrap}.product-review-invite button:hover,.product-review-invite button:focus-visible{background:#5e2942;border-color:#5e2942;color:#fff} @media(max-width:900px){.review-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.customer-reviews{padding-left:18px;padding-right:18px}.reviews-heading{display:block}.reviews-summary{margin-top:22px}.review-cards{grid-template-columns:1fr}.review-card{min-height:0}.review-compose form{grid-template-columns:1fr}.review-rating{display:grid;grid-template-columns:repeat(3,1fr)}.review-rating span{text-align:center}.review-compose [data-review-status]{min-height:18px}.product-review-invite{grid-template-columns:1fr;gap:9px}.product-review-invite-stars{font-size:13px}.product-review-invite button{width:100%;min-height:44px}} .account-link { display:inline-flex; align-items:center; min-height:31px; padding:0 13px; border:1px solid rgba(74,43,54,.32); border-radius:999px; color:#4a2b36!important; background:rgba(255,253,249,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .account-link::after { display:none!important; } .account-link:hover { border-color:var(--gold); color:#8a5f22!important; background:rgba(197,160,89,.14); } .customer-signin { position:relative; width:min(470px,calc(100vw - 30px)); max-width:calc(100vw - 30px); padding:clamp(38px,6vw,60px) clamp(26px,6vw,56px) 34px; border:1px solid rgba(165,106,49,.5); border-radius:24px; background: radial-gradient(circle at 92% 3%,rgba(213,174,105,.22),transparent 31%), linear-gradient(145deg,#fffdf9 0%,#f8eee5 100%); color:#402432; box-shadow:0 34px 110px rgba(42,18,31,.42),inset 0 0 0 9px rgba(255,255,255,.38); overflow:hidden; } .customer-signin::before { content:""; position:absolute; inset:10px; border:1px solid rgba(165,106,49,.17); border-radius:16px; pointer-events:none; } .customer-signin::backdrop { background:rgba(40,18,29,.54); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); } .customer-signin-close { position:absolute; z-index:2; top:15px; right:18px; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:rgba(74,33,52,.07); color:#715665; font:300 25px/1 var(--sans); } .customer-signin-mark { position:absolute; top:-42px; right:22px; color:rgba(165,106,49,.075); font:500 190px/.8 var(--serif); pointer-events:none; } .customer-signin>.eyebrow { position:relative; margin-bottom:15px; } .customer-signin h2 { position:relative; margin:0 0 18px; font:500 clamp(38px,7vw,53px)/.92 var(--serif); letter-spacing:-.025em; } .customer-signin h2 i { color:#a56a31; font-weight:500; } .customer-signin-intro { position:relative; max-width:345px; margin:0 0 27px; color:#79636d; font-size:12px; line-height:1.75; } .customer-signin form { position:relative; display:grid; gap:14px; } .customer-signin label { color:#6b4758; font:600 9px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; } .customer-signin input { display:block; width:100%; height:49px; margin-top:7px; padding:0 14px; border:1px solid rgba(122,60,88,.2); border-radius:8px; outline:0; background:rgba(255,255,255,.82); color:#39232d; font:13px var(--sans); letter-spacing:0; text-transform:none; transition:border-color .2s,box-shadow .2s; } .customer-signin input:focus { border-color:#a56a31; box-shadow:0 0 0 3px rgba(165,106,49,.11); } .customer-signin .button { width:100%; min-height:51px; margin-top:4px; border-radius:8px; background:linear-gradient(145deg,#69314c,#431c31); color:#fffaf2; box-shadow:inset 0 1px rgba(255,255,255,.2),0 12px 27px rgba(62,25,43,.2); } .customer-signin .button:disabled { opacity:.62; cursor:wait; } .customer-signin-status { min-height:17px; margin:0; color:#79636d; font-size:11px; text-align:center; } .customer-signin-status.is-error { color:#a13f4f; } .customer-signin-footer { position:relative; display:flex; justify-content:center; gap:7px; margin:17px 0 7px; color:#79636d; font-size:11px; } .customer-signin-footer a { color:#815024; border-bottom:1px solid rgba(165,106,49,.45); font-weight:600; } .customer-signin-help { position:relative; display:block; width:max-content; margin:0 auto; color:#8a7580; font-size:10px; } @media (max-width:600px) { .customer-signin { padding:43px 23px 28px; border-radius:18px; } .customer-signin h2 { font-size:40px; } .customer-signin-intro { margin-bottom:22px; } .customer-signin-footer { flex-direction:column; align-items:center; gap:3px; } } /* Unlocked-offer picker in checkout. Only rendered when the visitor revealed a code with their email, so it must read as a considered part of the form rather than an empty control. */ .coupon-picker{display:block;margin:0 0 14px} .coupon-picker span{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .coupon-picker select{width:100%;padding:12px;border:1px solid var(--line);background:transparent;color:var(--onyx);font:13px var(--sans)}