/* ========================================================================== Forever Sehat storefront ========================================================================== */ :root{ --ink:#1c1c1c; --ink-soft:#4a4a4a; --muted:#767676; --line:#e6e6e6; --line-strong:#c9c9c9; --bg:#ffffff; --bg-soft:#f6f6f4; --accent:#2e6b46; --danger:#b3261e; --radius:0px; --pill:999px; --container:1440px; --gutter:clamp(16px,4vw,56px); --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --header-h:76px; } /* A class with a display value outranks the browser's own rule for [hidden], which quietly leaves "hidden" elements on screen. Settle it once here. */ [hidden]{display:none!important} /* Read by search engines and screen readers, off the screen for everyone else. Not display:none, which would take it out of the accessibility tree too. */ .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font);font-size:15.5px;font-weight:400;line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:0} ul{margin:0;padding:0;list-style:none} hr{border:0;border-top:1px solid var(--line);margin:24px 0} :focus-visible{outline:2px solid var(--ink);outline-offset:2px} .site-main{min-height:50vh} .section{padding:clamp(40px,6vw,72px) var(--gutter);max-width:var(--container);margin:0 auto} .section--tight{padding-top:8px} .section--narrow{max-width:1120px} .section__head{text-align:center;margin-bottom:clamp(24px,4vw,40px)} .section__title{font-size:clamp(19px,2.2vw,25px);letter-spacing:.08em;text-transform:uppercase} .section__foot{text-align:center;margin-top:44px} .page-title{font-size:clamp(22px,2.6vw,29px);letter-spacing:.07em;text-transform:uppercase;margin-bottom:28px} .empty-note{color:var(--muted);text-align:center;padding:40px 0} .rte p{margin:0 0 16px} /* Article body: headings, lists, tables and links, sized to read easily on a phone as well as a desktop. */ .rte{font-size:16.5px;line-height:1.7;color:var(--ink-soft)} .rte h2{font-size:clamp(19px,2.4vw,24px);line-height:1.3;color:var(--ink);margin:34px 0 12px} .rte h3{font-size:clamp(16.5px,2vw,19px);line-height:1.35;color:var(--ink);margin:26px 0 10px} .rte h2:first-child,.rte h3:first-child{margin-top:0} .rte a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .rte a:hover{color:var(--ink)} .rte ul,.rte ol{margin:0 0 18px;padding-left:22px} .rte li{margin-bottom:8px} .rte strong{color:var(--ink);font-weight:600} .rte blockquote{ margin:22px 0;padding:14px 18px;border-left:3px solid var(--accent); background:var(--bg-soft);font-size:15.5px; } .rte blockquote p:last-child{margin-bottom:0} /* A wide table has to scroll inside its own box, never drag the page sideways */ .rte .tablescroll{overflow-x:auto;margin:0 0 20px} .rte table{border-collapse:collapse;width:100%;font-size:15px} .rte th,.rte td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left} .rte th{color:var(--ink);font-weight:600;white-space:nowrap} .rte td a{white-space:nowrap} /* ------------------------------------------------------------- buttons ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 30px;border:1px solid var(--ink);background:transparent;color:var(--ink); font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1; transition:background .18s ease,color .18s ease,opacity .18s ease; } .btn--dark{background:var(--ink);color:#fff} .btn--dark:hover{background:#000} .btn--light{background:#fff;border-color:#fff;color:var(--ink)} .btn--light:hover{background:rgba(255,255,255,.85)} .btn--ghost{background:transparent} .btn--ghost:hover{background:var(--ink);color:#fff} .btn--block{display:flex;width:100%;margin-top:10px} .btn--lg{padding:17px 40px} .btn--link{border:0;padding:0;text-transform:none;letter-spacing:0;font-size:15.5px;text-decoration:underline;background:none} .btn:disabled{opacity:.45;cursor:not-allowed} /* -------------------------------------------------------- announcement ---- */ .announcement{background:#fff;border-bottom:1px solid var(--line);overflow:hidden;padding:9px 0} .announcement__track{display:flex;width:max-content;animation:marquee 38s linear infinite} .announcement:hover .announcement__track{animation-play-state:paused} .announcement__group{display:flex;align-items:center} .announcement__item,.announcement__sep{font-weight:500; font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);white-space:nowrap;padding:0 26px; } .announcement__sep{color:var(--line-strong);padding:0} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* --------------------------------------------------------------- header --- */ .header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)} .header__inner{ max-width:var(--container);margin:0 auto;padding:0 var(--gutter); height:var(--header-h);display:flex;align-items:center;gap:clamp(14px,2.4vw,38px); } .header__logo{ margin-right:auto;font-size:clamp(18px,2.2vw,25px);letter-spacing:.12em; font-weight:600;white-space:nowrap; } /* The bar is a fixed height, so the logo is capped just under it and never pushes it taller. width:auto keeps the artwork's own proportions. */ .header__logo{display:flex;align-items:center;min-width:0} .header__logo img{display:block;height:auto;max-height:58px;max-width:min(360px,44vw);width:auto;object-fit:contain} .header__actions{display:flex;align-items:center;gap:6px;flex:none} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;color:var(--ink);position:relative} .icon-btn svg{width:23px;height:23px} /* The magnifier is an open outline while the bag is a closed shape, so equal pixel sizes read unequal. Give search a little more to match optically. */ .icon-btn--search svg{width:25px;height:25px} .cart-count{ position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px; background:var(--ink);color:#fff;border-radius:var(--pill); font-size:10px;line-height:17px;text-align:center; } /* An SVG rather than three bare spans: spans with no width of their own can collapse to nothing if the flex row is ever squeezed, and flex:none stops the button itself from being shrunk away on a narrow phone. */ .header__burger{ display:none;align-items:center;justify-content:center;flex:none; width:40px;height:40px;border:0;background:none;padding:0;color:var(--ink); } .header__burger svg{width:25px;height:25px;display:block} .nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)} .nav__item{position:relative} .nav__item > a{ display:inline-flex;align-items:center;gap:6px;padding:26px 0;white-space:nowrap; font-size:13px;letter-spacing:.07em;text-transform:uppercase; } .nav__caret{width:9px;height:6px;transition:transform .2s ease} .nav__item:hover .nav__caret{transform:rotate(180deg)} .nav__dropdown{ position:absolute;top:100%;left:-18px;min-width:230px;background:#fff;border:1px solid var(--line); padding:14px 0;opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .18s ease,transform .18s ease,visibility .18s;box-shadow:0 18px 40px rgba(0,0,0,.07); } .nav__item:hover .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)} .nav__dropdown a{display:block;padding:10px 22px;font-size:14.5px;color:var(--ink-soft)} .nav__dropdown a:hover{background:var(--bg-soft);color:var(--ink)} /* -------------------------------------------------------------- drawers --- */ .overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;visibility:hidden;transition:.25s;z-index:80} body.is-locked{overflow:hidden} body.has-drawer .overlay{opacity:1;visibility:visible} .drawer{ position:fixed;top:0;bottom:0;width:min(430px,92vw);background:#fff;z-index:90; display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1); } .drawer--right{right:0;transform:translateX(100%)} .drawer--left{left:0;transform:translateX(-100%)} .drawer.is-open{transform:translateX(0)} .drawer__head{ display:flex;align-items:center;justify-content:space-between; padding:20px 24px;border-bottom:1px solid var(--line); font-size:12px;letter-spacing:.09em;text-transform:uppercase; } .drawer__close{border:0;background:none;font-size:26px;line-height:1;color:var(--ink)} .drawer__body{flex:1;overflow-y:auto;padding:22px 24px} /* --------------------------------------------------------------- search --- */ .search-overlay{ position:fixed;top:0;left:0;right:0;background:#fff;z-index:95; box-shadow:0 18px 50px rgba(0,0,0,.12); max-height:100vh;overflow-y:auto; transform:translateY(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1); } .search-overlay.is-open{transform:translateY(0)} .search-overlay__inner{max-width:720px;margin:0 auto;padding:22px var(--gutter) 28px} .search-overlay__form{position:relative;display:flex;align-items:center} .search-overlay__icon{ position:absolute;left:20px;width:20px;height:20px;color:var(--muted);pointer-events:none; } .search-overlay__form input{ width:100%;border:1.5px solid var(--line);border-radius:var(--pill);background:var(--bg-soft); padding:16px 52px 16px 52px;font-family:inherit;font-size:17px;letter-spacing:0;color:var(--ink); } .search-overlay__form input::placeholder{color:var(--muted)} .search-overlay__form input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none} .search-overlay__form input:focus{outline:0;border-color:var(--ink);background:#fff} .search-overlay__close{ position:absolute;right:8px;width:36px;height:36px;border-radius:50%;border:0;background:none; font-size:22px;line-height:1;color:var(--muted); } .search-overlay__close:hover{background:var(--bg-soft);color:var(--ink)} .search-results{margin-top:18px} .search-results__list{display:flex;flex-direction:column;gap:2px} .search-results__row{ display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px; padding:9px 8px;border-radius:9px;text-decoration:none; } .search-results__row:hover{background:var(--bg-soft)} .search-results__row img{width:52px;height:52px;object-fit:cover;background:var(--bg-soft);border-radius:6px} .search-results__title{font-size:14.5px;color:var(--ink);line-height:1.35} .search-results__price{font-size:14px;color:var(--ink-soft);white-space:nowrap} .search-results__price s{color:var(--muted);margin-left:6px;font-size:12.5px} .search-results__viewall{ display:block;margin-top:10px;padding:13px 8px 6px;border-top:1px solid var(--line); font-size:13px;letter-spacing:0;text-transform:uppercase;color:var(--ink);text-decoration:underline; } .search-results__empty{padding:18px 8px;color:var(--muted);font-size:14.5px} .search-results__loading{padding:18px 8px;color:var(--muted);font-size:14.5px} .search-inline{display:flex;gap:10px;max-width:520px;margin:18px auto 0} .search-inline input{flex:1;border:1px solid var(--line);padding:14px 16px;font-family:inherit;font-size:16.5px} .search-count{color:var(--muted);font-size:14.5px;margin-top:12px} /* ----------------------------------------------------------------- hero --- */ .hero{position:relative;overflow:hidden;background:var(--bg-soft)} .hero__slide{display:none;position:relative} .hero__slide.is-active{display:block;animation:fade .5s ease} @keyframes fade{from{opacity:.35}to{opacity:1}} .hero__slide img{width:100%;height:clamp(320px,58vw,640px);object-fit:cover} /* The banner is a third shorter on a desktop so the products below it are on screen without scrolling. Phones and tablets keep the taller crop. */ @media (min-width:1024px){ /* The shop owner sets this height, as a share of the page width, so the same amount of a picture shows on every desktop size. Tied to the element's own width rather than the viewport, so a scrollbar cannot shift the crop. */ .hero__slide img{height:auto;aspect-ratio:var(--hero-ar,3.448)} } .hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 45%,rgba(0,0,0,.4) 100%);pointer-events:none} .hero__content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:var(--gutter);color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.3)} .hero__content--center{align-items:center;text-align:center} .hero__content--left{align-items:flex-start;text-align:left} .hero__content--right{align-items:flex-end;text-align:right} .hero__sub{margin:0;font-size:12px;letter-spacing:.07em;text-transform:uppercase} .hero__title{font-size:clamp(26px,4.4vw,50px);letter-spacing:-.01em;max-width:16ch;line-height:1.15} .hero__arrow{ position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0; background:rgba(255,255,255,.85);color:var(--ink);font-size:24px;line-height:1;border-radius:var(--pill); } .hero__arrow--prev{left:18px} .hero__arrow--next{right:18px} .hero__dots{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:8px} .hero__dot{width:8px;height:8px;padding:0;border:0;border-radius:var(--pill);background:rgba(255,255,255,.55)} .hero__dot.is-active{background:#fff;width:22px} /* ---------------------------------------------------- collection strip ---- */ .collection-strip{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(14px,1.8vw,26px); } .collection-strip__item{position:relative;display:block;background:var(--bg-soft);aspect-ratio:4/3;overflow:hidden} .collection-strip__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .collection-strip__item:hover img{transform:scale(1.04)} .collection-strip__item span{ position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#fff; font-size:12px;letter-spacing:.06em;text-shadow:0 1px 10px rgba(0,0,0,.45); } /* tiles with no image yet: dark text on the soft ground, centred */ .collection-strip__item--plain{display:flex;align-items:center;justify-content:center;aspect-ratio:16/7;border:1px solid var(--line);background:var(--bg-soft)} .collection-strip__item--plain span{position:static;color:var(--ink);text-shadow:none} .collection-strip__item--plain:hover{background:#efefec} /* ---------------------------------------------------------------- grid ---- */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px)} .card{display:flex;flex-direction:column} /* Square: the product shots are 3:2 landscape, and the old 3:4 portrait frame threw away half their width. */ .card__media{position:relative;display:block;overflow:hidden;background:var(--bg-soft);aspect-ratio:1/1} .card__img{width:100%;height:100%;object-fit:cover;transition:opacity .4s ease,transform .6s ease} .card__img--hover{position:absolute;inset:0;opacity:0} .card__media:hover .card__img--hover{opacity:1} .card__media:hover .card__img{transform:scale(1.03)} .badge{ position:absolute;top:12px;left:12px;background:var(--ink);color:#fff; font-size:11px;letter-spacing:.06em;padding:5px 10px; } .badge--muted{background:#fff;color:var(--ink);border:1px solid var(--line)} .card__body{padding:16px 4px 0;display:flex;flex-direction:column;gap:7px} .card__title{font-size:15.5px;letter-spacing:0;line-height:1.45} .card__rating{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)} .card__rating:hover{color:var(--ink)} .card__price{ display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 9px; font-size:15.5px;font-variant-numeric:tabular-nums; } /* Each amount stays whole: without this "PKR 12,500" broke after "PKR". */ .card__price > *{white-space:nowrap} .card__price s{color:var(--muted);font-size:14px} .card__add{ margin-top:4px;padding:11px;border:1px solid var(--ink);background:#fff;color:var(--ink); font-size:12.5px;letter-spacing:.07em;transition:.18s; } .card__add:hover{background:var(--ink);color:#fff} /* ---------------------------------------------------------- breadcrumb ---- */ .breadcrumb{ max-width:var(--container);margin:0 auto;padding:20px var(--gutter) 0; display:flex;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap; } .breadcrumb a:hover{color:var(--ink)} /* ---------------------------------------------------- collection header --- */ .collection-hero{max-width:var(--container);margin:0 auto;padding:clamp(24px,4vw,44px) var(--gutter) 0;text-align:center} .collection-hero__title{font-size:clamp(21px,3vw,31px);letter-spacing:.08em} .collection-hero p{color:var(--muted);max-width:620px;margin:12px auto 0} /* -------------------------------------------------------------- toolbar --- */ .toolbar{ max-width:var(--container);margin:0 auto;padding:clamp(20px,3vw,34px) var(--gutter) 6px; display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px; } .filter-btn{ display:inline-flex;align-items:center;gap:26px;padding:14px 26px;border:1px solid var(--ink); background:#fff;border-radius:var(--pill);font-size:14.5px;letter-spacing:0; } .filter-btn:hover{background:var(--ink);color:#fff} .toolbar__count{font-size:13.5px;line-height:1.35;color:var(--muted)} .toolbar__count strong{display:block;color:var(--ink);font-weight:400} .toolbar__sort select{ appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:var(--pill); padding:14px 46px 14px 24px;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c1c1c' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 22px center; background-size:11px;font-family:inherit;font-size:14.5px;min-width:200px; } .filter-form .filter-group{margin-bottom:26px} .filter-form h4{font-size:12px;letter-spacing:.08em;margin-bottom:12px;color:var(--muted)} .filter-list li a{display:block;padding:8px 0;font-size:15.5px;color:var(--ink-soft)} .filter-list li a.is-active,.filter-list li a:hover{color:var(--ink);text-decoration:underline} .filter-price{display:flex;align-items:center;gap:10px} .filter-price input{width:100%;border:1px solid var(--line);padding:11px 12px;font-family:inherit} .filter-check{display:flex;align-items:center;gap:10px;font-size:15.5px} /* ----------------------------------------------------------- pagination --- */ .pagination{display:flex;justify-content:center;gap:8px;margin-top:52px;flex-wrap:wrap} .pagination a{min-width:42px;padding:11px 13px;border:1px solid var(--line);text-align:center;font-size:14.5px} .pagination a.is-active,.pagination a:hover{background:var(--ink);color:#fff;border-color:var(--ink)} /* ----------------------------------------------------------------- pdp ---- */ .pdp{max-width:var(--container);margin:0 auto;padding:24px var(--gutter) clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.95fr);gap:clamp(24px,3vw,58px);align-items:start} .pdp__gallery{min-width:0} /* dense: a full-width image cannot start halfway along a row, so without this it drops to the next row and leaves the space beside its neighbour empty. Dense lets a later square image fill that gap instead of stranding it. */ .pdp__media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;gap:8px;min-width:0} .pdp__dots{display:none} /* Square on desktop, whatever shape the file is: the mosaic reads as one grid only when every cell matches. The phone slider overrides this to 3:2 further down, where a single image gets the full width to itself. */ .pdp__figure{margin:0;background:var(--bg-soft);aspect-ratio:1/1;overflow:hidden} .pdp__figure img{width:100%;height:100%;object-fit:cover} .pdp__figure:first-child:last-child{grid-column:1/-1} /* Marked "full width" in the admin: both columns, and the shape the photo was taken at, so nothing is cropped away. */ .pdp__figure--wide{grid-column:1/-1;aspect-ratio:3/2} /* An image restricted to one side. The cut is 1024px rather than the 749px the slider switches at, because a tablet counts as mobile here: 768, 810, 820 and 834 wide devices all sit below it. */ .pdp__figure--mobile{display:none} @media (max-width:1024px){ .pdp__figure--mobile{display:block} .pdp__figure--desktop{display:none} } .pdp__sticky{position:sticky;top:calc(var(--header-h) + 20px);min-width:0} .pdp__title{font-size:clamp(20px,2.4vw,27px);letter-spacing:.06em;line-height:1.35} .pdp__subtitle{ margin:10px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-soft);letter-spacing:.01em; } .pdp__price{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap} .pdp__price-now{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:0} .pdp__price-was{color:var(--muted)} .pdp__save{background:var(--accent);color:#fff;font-size:10px;letter-spacing:.07em;padding:5px 9px} .pdp__cod{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14.5px;color:var(--ink-soft)} .pdp__cod-tag{background:var(--ink);color:#fff;font-size:10px;letter-spacing:.08em;padding:5px 9px;border-radius:3px} .pdp__short{color:var(--ink-soft);font-size:17px;line-height:1.6;margin:18px 0 0} .pdp__rule{margin:26px 0 20px} /* The tiles already sit in their own bordered pills, so the usual gap above the rule reads as a hole under them. */ .signals + .pdp__rule{margin-top:14px} .pdp__desc{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)} /* ------------------------------------------------------------------ upsells --- */ /* Two cards fill the row; the rest are reached by swiping or by the arrows. */ .upsells{margin:26px 0 4px;padding-top:22px;border-top:1px solid var(--line)} .upsells__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .upsells__title{ font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--ink);margin:0; } .upsells__nav{display:flex;gap:6px;flex:none} .upsells__arrow{ width:30px;height:30px;display:grid;place-items:center;padding:0; border:1px solid var(--line-strong);border-radius:50%;background:#fff; color:var(--ink);cursor:pointer; } .upsells__arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .upsells__arrow:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)} .upsells__arrow:disabled{opacity:.3;cursor:default} .upsells__track{ display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-webkit-overflow-scrolling:touch; } .upsells__track::-webkit-scrollbar{display:none} .upsell{ flex:0 0 calc(50% - 6px);min-width:0;scroll-snap-align:start; display:flex;flex-direction:column; } .upsell__media{display:block;background:#f5f5f5;border:1px solid var(--line);border-radius:8px;overflow:hidden} .upsell__media img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block} .upsell__body{padding-top:9px;display:flex;flex-direction:column;gap:5px;flex:1} .upsell__name{margin:0;font-size:13.5px;font-weight:500;line-height:1.35} .upsell__price{display:flex;align-items:baseline;gap:7px;font-size:13.5px;font-weight:600} .upsell__price s{font-weight:400;color:var(--ink-soft);font-size:12.5px} .upsell__add{ margin-top:auto;display:block;width:100%;padding:9px 10px; border:1px solid var(--ink);border-radius:4px;background:transparent; color:var(--ink);font:inherit;font-size:11.5px;font-weight:600; letter-spacing:.09em;text-align:center;cursor:pointer; } .upsell__add:hover:not(:disabled){background:var(--ink);color:#fff} .upsell__add:disabled{opacity:.4;cursor:default} .pdp__desc-title{ font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--ink);margin:0 0 14px; } .pdp__sku{ font-size:13px;letter-spacing:0;color:var(--muted); margin-top:22px;padding-top:18px;border-top:1px solid var(--line); } .pdp__option{margin-bottom:24px} .pdp__option-label{font-size:12px;letter-spacing:.08em;margin-bottom:12px} .pdp__swatches{display:flex;flex-wrap:wrap;gap:10px} .swatch input{position:absolute;opacity:0;pointer-events:none} .swatch span{ display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:44px;padding:0 18px; border:1px solid var(--line);border-radius:var(--pill);font-size:14.5px;transition:.16s; } .swatch:hover span{border-color:var(--ink)} .swatch input:checked + span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .swatch input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px} .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--pill);height:46px} .qty__btn{width:44px;height:100%;border:0;background:none;font-size:17px;color:var(--ink)} .qty__input{width:46px;height:100%;border:0;text-align:center;font-family:inherit;font-size:15.5px;background:none} .qty__input:focus{outline:0} .qty--sm{height:34px} .qty--sm .qty__btn{width:32px;font-size:14px} .qty--sm .qty__input{width:34px;font-size:13px} .pdp__note{font-size:13px;color:var(--muted);margin-top:16px;text-align:center} /* Collapsible description. The script adds .is-ready once it has measured the text; until then nothing is clamped, so a visitor without JavaScript reads the whole thing rather than a permanently cut-off paragraph. */ .desc__text{position:relative} .desc.is-ready .desc__text{ overflow:hidden; max-height:var(--desc-clamp, 6.8em); transition:max-height .42s cubic-bezier(.4,0,.2,1); } .desc.is-ready.is-open .desc__text{max-height:var(--desc-full, none)} /* Fades the last line out instead of slicing it in half. */ .desc.is-ready .desc__text::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:1.5em;pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg) 92%); opacity:1;transition:opacity .3s ease; } .desc.is-ready.is-open .desc__text::after{opacity:0} .desc__more{ display:inline-flex;align-items:center;gap:8px;margin-top:10px; padding:9px 18px;border:1px solid var(--ink);border-radius:var(--pill); background:transparent;color:var(--ink);font-family:inherit;font-size:12px;font-weight:600; letter-spacing:.05em;text-transform:uppercase;cursor:pointer; transition:background .16s ease,color .16s ease; } .desc__more:hover{background:var(--ink);color:#fff} .desc__more svg{width:11px;height:7px;transition:transform .32s cubic-bezier(.4,0,.2,1)} .desc.is-open .desc__more svg{transform:rotate(180deg)} @media (prefers-reduced-motion: reduce){ .desc.is-ready .desc__text,.desc__more,.desc__more svg, .desc.is-ready .desc__text::after{transition:none} } /* ------------------------------------------------------------ cart page --- */ .ship-bar{background:var(--bg-soft);padding:15px 18px;font-size:14.5px;margin-bottom:26px} .ship-bar__track{height:3px;background:var(--line);margin-top:10px} .ship-bar__track i{display:block;height:100%;background:var(--accent)} .ship-bar--done{border-left:3px solid var(--accent)} .cart-empty{text-align:center;padding:50px 0;display:flex;flex-direction:column;align-items:center;gap:20px;color:var(--muted)} .cart-table__head{ display:grid;grid-template-columns:1fr 190px 130px;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line); font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted); } .cart-table__head span:last-child{text-align:right} .cart-row{display:grid;grid-template-columns:1fr 190px 130px;gap:16px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)} .cart-row__product{display:flex;gap:18px;align-items:flex-start} .cart-row__media{width:88px;flex:none;background:var(--bg-soft);aspect-ratio:1/1;overflow:hidden} .cart-row__media img{width:100%;height:100%;object-fit:cover} .cart-row__title{font-size:16px;letter-spacing:0} .cart-row__variant,.cart-row__price{font-size:14.5px;color:var(--muted);margin-top:5px} .cart-row__qty{display:flex;flex-direction:column;align-items:flex-start;gap:9px} .cart-row__remove{border:0;background:none;padding:0;font-size:13.5px;color:var(--muted);text-decoration:underline} .cart-row__remove:hover{color:var(--danger)} .cart-row__total{text-align:right;font-size:16px} .cart-foot{display:grid;grid-template-columns:1fr 380px;gap:40px;margin-top:34px;align-items:start} .cart-foot__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .summary{border:1px solid var(--line);padding:26px} .summary__title{font-size:13px;letter-spacing:.08em;margin-bottom:18px} .summary__row{display:flex;justify-content:space-between;padding:10px 0;font-size:15.5px;font-variant-numeric:tabular-nums;color:var(--ink-soft)} .summary__row--total{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;font-size:19px;color:var(--ink)} .summary__note{font-size:13px;color:var(--muted);margin:12px 0 0;text-align:center} /* ---------------------------------------------------------- cart drawer --- */ .cart-drawer__empty{text-align:center;padding:40px 0;display:flex;flex-direction:column;gap:20px;align-items:center;color:var(--muted)} .cart-lines{display:flex;flex-direction:column} .cart-line{display:grid;grid-template-columns:78px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)} .cart-line__media{background:var(--bg-soft);aspect-ratio:1/1;overflow:hidden} .cart-line__media img{width:100%;height:100%;object-fit:cover} .cart-line__title{font-size:15px;line-height:1.45;display:block} .cart-line__variant{font-size:13.5px;color:var(--muted);margin-top:3px} .cart-line__price{font-size:14px;color:var(--muted);margin:6px 0 9px} .cart-line__side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px} .cart-line__total{font-size:15px} .cart-line__remove{border:0;background:none;padding:0;font-size:13.5px;color:var(--muted);text-decoration:underline} .cart-drawer__foot{padding-top:20px} .cart-drawer__row{display:flex;justify-content:space-between;padding:7px 0;font-size:16.5px} .cart-drawer__row--muted{color:var(--muted);font-size:14.5px} .cart-drawer__note{font-size:13.5px;color:var(--muted);margin:10px 0 16px} /* ------------------------------------------------------------- checkout --- */ .checkout-body{background:#fff} .checkout{display:grid;grid-template-columns:1fr 1fr;min-height:100vh} .checkout__main{border-right:1px solid var(--line);display:flex;justify-content:flex-end} .checkout__inner{width:100%;max-width:620px;padding:clamp(28px,4vw,56px) clamp(20px,4vw,54px)} .checkout__logo{display:inline-block;font-size:21px;font-weight:600;letter-spacing:.12em;margin-bottom:22px} .checkout__crumbs{display:flex;gap:8px;font-size:13.5px;color:var(--ink-soft);margin-bottom:32px} .checkout__crumbs strong{color:var(--ink);font-weight:400} .checkout__crumbs a{text-decoration:underline} .checkout__block{margin-bottom:34px} /* Sentence case and bold, the way a checkout reads - the tracked caps used elsewhere on the site were too shouty for a form this long. */ .checkout__block h2{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:16px} /* The label rests centred in the field and floats up once there is a value, so an empty field reads as a placeholder sitting where you expect it. */ .field{position:relative;margin-bottom:13px} .field input,.field select,.field textarea{ width:100%;height:56px;border:1px solid #c9ccd0;border-radius:9px; padding:22px 14px 6px;font-family:var(--font);font-size:15.5px; background:#fff;color:var(--ink);transition:border-color .12s ease,box-shadow .12s ease; } .field textarea{height:auto;min-height:76px;padding-top:26px;resize:vertical;line-height:1.5} .field select{ appearance:none;-webkit-appearance:none; background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234a4a4a' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center; background-size:11px;padding-right:40px; } .field label{ position:absolute;left:15px;top:50%;transform:translateY(-50%); font-size:15.5px;color:#6b7075;pointer-events:none; transition:top .13s ease,font-size .13s ease,transform .13s ease; } .field textarea ~ label{top:26px;transform:none} .field input:hover,.field select:hover,.field textarea:hover{border-color:#a9adb2} .field input:focus,.field select:focus,.field textarea:focus{ outline:0;border-color:var(--accent);box-shadow:0 0 0 2px rgba(46,107,70,.18); } .field input:focus + label,.field input:not(:placeholder-shown) + label, .field textarea:focus ~ label,.field textarea:not(:placeholder-shown) ~ label, .field select + label{top:10px;transform:none;font-size:12px;color:#6b7075} .field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger)} .field.has-error input:focus,.field.has-error select:focus{box-shadow:0 0 0 2px rgba(179,38,30,.16)} .field small{display:block;color:var(--danger);font-size:13px;margin-top:5px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .field-row .field{margin-bottom:13px} .alert{padding:14px 16px;border-radius:9px;font-size:15px;margin-bottom:20px} .checkout__block:last-of-type{margin-bottom:0} .alert--error{background:#fdeceb;color:var(--danger);border:1px solid #f3c9c6} .pay-option{border:1px solid var(--accent);border-radius:9px;overflow:hidden} .pay-option label{display:flex;align-items:center;gap:10px;cursor:pointer} .pay-option__title{font-size:15.5px;font-weight:600;color:var(--ink)} .pay-option__desc{margin:9px 0 0 26px;font-size:14.5px;color:var(--muted)} .checkout__actions{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:8px} .checkout__aside{background:var(--bg-soft);border-left:1px solid var(--line)} .checkout__aside-inner{position:sticky;top:0;max-width:520px;padding:clamp(28px,4vw,56px) clamp(20px,4vw,54px)} .checkout-lines{display:flex;flex-direction:column;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--line)} .checkout-line{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center} .checkout-line__media{position:relative;width:64px} .checkout-line__media img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line);border-radius:7px;background:#fff} .checkout-line__qty{ position:absolute;top:-8px;right:-8px;min-width:21px;height:21px;background:#6f6f6f;color:#fff; border-radius:var(--pill);font-size:11px;line-height:21px;text-align:center; } .checkout-line__title{font-size:15px;line-height:1.4;color:var(--ink)} .checkout-line__variant{font-size:13.5px;color:var(--muted);margin-top:3px} .checkout-line__price{font-size:15px;font-weight:500;white-space:nowrap;color:var(--ink)} .checkout-totals{padding-top:20px} .checkout-totals__row{display:flex;justify-content:space-between;padding:8px 0;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink-soft)} .checkout-totals__row > span:last-child{color:var(--ink);font-weight:500} .checkout-totals__row--total{font-size:16px;color:var(--ink);padding-top:16px;margin-top:10px;border-top:1px solid var(--line);align-items:baseline} .checkout-totals__row--total > span:last-child{font-size:24px;font-weight:600;letter-spacing:-.01em} .checkout-totals__row--total small{font-size:13px;color:var(--muted);margin-right:4px} /* ------------------------------------------------------------ thank you --- */ .thankyou{max-width:640px;margin:0 auto;text-align:center} .thankyou__icon{color:var(--accent);width:58px;margin:0 auto 18px} .thankyou__eyebrow{font-size:13px;letter-spacing:.08em;color:var(--muted);margin:0} .thankyou__title{font-size:clamp(23px,3vw,30px);letter-spacing:-.01em;margin:8px 0 12px} .thankyou__lead{color:var(--ink-soft);font-size:17px;margin:0 0 30px} .thankyou__card{border:1px solid var(--line);padding:24px;text-align:left;margin-bottom:22px} .thankyou__card h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px} .thankyou__card address{font-style:normal;color:var(--ink-soft);line-height:1.8} /* --------------------------------------------- what our customers say --- */ .says__score{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 0;font-size:15px;color:var(--muted)} .says__score strong{font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.01em} .says__wrap{position:relative} /* A scroll-snapping row rather than a slider: it works with a swipe, a trackpad and the arrow buttons, with no library and nothing to break. */ .says__track{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr); gap:18px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none; } .says__track::-webkit-scrollbar{display:none} .saycard{scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff} /* The ratio sits on the image: as a flex item the wrapper was taking its height from the card instead and the photo stretched with the row. */ .saycard__media{flex:none;background:var(--bg-soft)} .saycard__media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover} .saycard__body{flex:1;padding:16px 18px 20px;text-align:center} .saycard__stars{margin-bottom:8px} .saycard__date{margin:0 0 8px;font-size:13px;color:var(--muted)} .saycard__title{font-size:16px;font-weight:600;margin:0 0 8px} /* Clamped so one long review cannot set the height of the whole row. */ .saycard__text{ margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-soft); display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; } .saycard__who{margin:12px 0 0;font-size:13px;color:var(--muted)} .says__arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; display:flex;align-items:center;justify-content:center;width:38px;height:38px; border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink); box-shadow:0 4px 14px rgba(20,26,22,.1); } .says__arrow svg{width:18px;height:18px} .says__arrow:hover{border-color:var(--ink-soft)} .says__arrow:disabled{opacity:.35;cursor:default;box-shadow:none} .says__arrow--prev{left:-19px} .says__arrow--next{right:-19px} @media (max-width:1100px){ .says__arrow{display:none} .says__track{grid-auto-columns:minmax(230px,1fr)} } @media (max-width:560px){ .says__track{grid-auto-columns:78%;gap:14px} .saycard__body{padding:14px 15px 18px} } /* ------------------------------------------------------- journal posts --- */ .postlist{display:grid;gap:clamp(28px,4vw,44px)} .postcard{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:start} /* Without this a post with no cover leaves an empty 240px column. */ .postcard--noimage{grid-template-columns:1fr} .postcard__media{display:block;overflow:hidden;background:var(--bg-soft);aspect-ratio:4/3} .postcard__media img{width:100%;height:100%;object-fit:cover} .postcard__date{margin:0 0 8px;font-size:13px;color:var(--muted)} .postcard__title{font-size:20px;line-height:1.35;margin:0 0 10px} .postcard__title a:hover{text-decoration:underline} .postcard__excerpt{margin:0 0 12px;color:var(--ink-soft);line-height:1.7} .postcard__more{font-size:13px;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px} .post{max-width:760px} .post__date{margin:0 0 10px;font-size:13px;color:var(--muted)} .post__title{font-size:clamp(24px,3.2vw,34px);line-height:1.25;margin:0 0 24px} .post__hero{width:100%;margin-bottom:28px;background:var(--bg-soft)} .post__body{font-size:16.5px;line-height:1.8;color:var(--ink-soft)} .post__back{margin-top:34px;font-size:14.5px} .post__back a:hover{text-decoration:underline} @media (max-width:749px){ .postcard{grid-template-columns:1fr;gap:14px} .postcard__title{font-size:18.5px} } /* --------------------------------------------------- live sales popup --- */ /* The bottom offset is a base only: store.js lifts the whole thing clear of whatever the browser has parked at the bottom of the screen. */ .salespop{ position:fixed;left:18px;bottom:18px;z-index:70; width:min(384px,calc(100vw - 32px));pointer-events:none; transition:transform .2s ease; } .salespop__card{ display:none;align-items:center;gap:13px;padding:13px 13px 13px 13px; background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:0 14px 34px rgba(20,26,22,.16);pointer-events:auto;position:relative; } .salespop__card.is-shown{display:flex;animation:salespopIn .42s cubic-bezier(.2,.7,.3,1)} .salespop__card.is-leaving{animation:salespopOut .32s ease forwards} @keyframes salespopIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes salespopOut{to{opacity:0;transform:translateY(10px)}} .salespop__thumb{flex:none;width:54px;height:54px;border-radius:8px;overflow:hidden;background:var(--bg-soft)} .salespop__thumb img{width:100%;height:100%;object-fit:cover} .salespop__body{flex:1;min-width:0} .salespop__text{margin:0 22px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink)} .salespop__text strong{font-weight:600} /* Time on the left, button on the right, so a long product name wraps above them both instead of squeezing the button. */ .salespop__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px} .salespop__time{font-size:12px;color:var(--muted)} .salespop__cta{ flex:none;padding:7px 13px;border-radius:var(--pill); background:var(--accent);color:#fff;font-size:12px;font-weight:500;white-space:nowrap; } .salespop__cta:hover{filter:brightness(1.07)} .salespop__close{ position:absolute;top:5px;right:7px;border:0;background:none;padding:2px 5px; font-size:18px;line-height:1;color:var(--muted); } .salespop__close:hover{color:var(--ink)} @media (max-width:560px){ .salespop{left:12px;bottom:22px;width:calc(100vw - 24px)} .salespop__card{gap:11px;padding:11px} .salespop__thumb{width:46px;height:46px} .salespop__text{font-size:13px} .salespop__cta{padding:7px 11px;font-size:11.5px} } @media (prefers-reduced-motion: reduce){ .salespop__card.is-shown,.salespop__card.is-leaving{animation:none} } /* -------------------------------------------------------- signal tiles --- */ .signals{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px} .signal{ display:inline-flex;align-items:center;gap:7px;padding:7px 12px; background:#fff;border:1px solid var(--line);border-radius:10px; font-size:13.5px;line-height:1.3;color:var(--ink-soft); } .signal__icon{width:15px;height:15px;flex:none;fill:none;stroke:var(--ink-soft);stroke-width:1.7; stroke-linejoin:round;stroke-linecap:round} .signal__icon{animation:signalBlink 3.4s ease-in-out infinite} .signal__icon--bolt{width:10px;animation-delay:1.7s} @keyframes signalBlink{0%,88%,100%{opacity:1}93%{opacity:.25}} .signal strong{ display:inline-block;font-size:inherit;font-weight:600;color:var(--ink); font-variant-numeric:tabular-nums; } .signal > span{white-space:nowrap} .signal strong.is-changing{animation:signalRoll .42s ease} @keyframes signalRoll{ 0%{transform:translateY(0);opacity:1} 45%{transform:translateY(-9px);opacity:0} 55%{transform:translateY(9px);opacity:0} 100%{transform:translateY(0);opacity:1} } @media (prefers-reduced-motion: reduce){ .signal__icon{animation:none} } /* ---------------------------------------------------------------- stars --- */ .stars{display:inline-flex;gap:2px;vertical-align:middle} .stars__star{width:15px;height:15px;fill:#f5a623} .stars__star.is-off{fill:#dcdfda} .stars--sm .stars__star{width:13px;height:13px} .pdp__rating{display:inline-flex;align-items:center;gap:9px;margin-top:12px;font-size:14.5px;color:var(--ink-soft)} .pdp__rating:hover{color:var(--ink);text-decoration:underline} /* -------------------------------------------------------- review teaser --- */ .rteaser{position:relative;margin-top:22px;min-width:0} .rteaser__slide{ display:none;width:100%;min-width:0;max-width:100%;overflow:hidden;text-align:left; background:#fff;border:1px solid var(--line); border-radius:10px;padding:14px 16px;font-family:inherit;cursor:pointer; } .rteaser__slide.is-active{display:block;animation:teaserIn .45s ease} @keyframes teaserIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .rteaser__slide:hover{border-color:var(--line-strong)} .rteaser__head{display:flex;align-items:center;gap:10px;margin-bottom:7px} .rteaser__date{font-size:13px;color:var(--muted)} .rteaser__body{ display:block;font-size:15px;color:var(--ink);line-height:1.5; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .rteaser__author{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13.5px;color:var(--ink-soft)} .rteaser__tick{width:14px;height:14px;fill:var(--ink)} .rteaser__verified{color:var(--muted)} /* ---------------------------------------------------------- review modal -- */ .rmodal{ position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center; padding:20px;background:rgba(0,0,0,.45); } .rmodal.is-open{display:flex} .rmodal__panel{ position:relative;background:#fff;border-radius:12px;padding:26px 28px; width:min(560px,100%);max-height:86vh;overflow-y:auto;animation:modalIn .22s ease; } @keyframes modalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .rmodal__close{ position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%; border:1px solid var(--line);background:#fff;font-size:20px;line-height:1;color:var(--ink-soft); } .rmodal__close:hover{background:var(--bg-soft)} .rmodal__eyebrow{margin:0;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .rmodal__product{font-size:17px;font-weight:600;margin:4px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line)} .rmodal__person{display:flex;align-items:center;gap:11px;margin-bottom:12px} .rmodal__avatar{ display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%; background:var(--bg-soft);font-size:14px;font-weight:600;color:var(--ink-soft); } .rmodal__name{font-size:16px;font-weight:500} .rmodal__tick{width:16px;height:16px;fill:var(--ink)} .rmodal__meta{display:flex;align-items:center;gap:10px;margin-bottom:14px} .rmodal__date{font-size:13.5px;color:var(--muted)} .rmodal__title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;margin:0 0 8px} .rmodal__body{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-soft)} .rmodal__foot{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:20px;padding-top:14px;border-top:1px solid var(--line); } .rmodal__nav{ width:38px;height:38px;flex:none;display:grid;place-items:center;padding:0; border:1px solid var(--line-strong);border-radius:50%;background:#fff; color:var(--ink);cursor:pointer;transition:background .16s ease,color .16s ease; } .rmodal__nav svg{width:15px;height:15px} .rmodal__nav:hover{background:var(--ink);color:#fff;border-color:var(--ink)} /* --------------------------------------------------------- picture viewer --- */ .lightbox{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center} .lightbox__scrim{position:absolute;inset:0;background:rgba(16,18,16,.92)} .lightbox__panel{ position:relative;z-index:1;width:100%;height:100%; display:grid;align-items:center; grid-template-columns:64px minmax(0,1fr) 64px; padding:56px 0 60px; } .lightbox__stage{grid-column:2;margin:0;display:flex;align-items:center;justify-content:center;height:100%;min-height:0} .lightbox__stage img{ max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; display:block;background:none; } /* Dark rather than a pale wash: on a phone these sit on top of the picture itself, and a white button on a white product shot is invisible. */ .lightbox__nav{ width:46px;height:46px;justify-self:center;display:grid;place-items:center;padding:0; border:1px solid rgba(255,255,255,.35);border-radius:50%; background:rgba(16,18,16,.62);color:#fff;cursor:pointer; transition:background .16s ease; } .lightbox__nav svg{width:20px;height:20px} .lightbox__nav:hover{background:rgba(16,18,16,.85)} .lightbox__nav--prev{grid-column:1} .lightbox__nav--next{grid-column:3} .lightbox__close{ position:absolute;top:14px;right:14px;z-index:2; width:42px;height:42px;display:grid;place-items:center;padding:0; border:1px solid rgba(255,255,255,.35);border-radius:50%; background:rgba(16,18,16,.62);color:#fff;cursor:pointer; } .lightbox__close svg{width:19px;height:19px} .lightbox__close:hover{background:rgba(16,18,16,.85)} .lightbox__bar{ position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:center;pointer-events:none; } .lightbox__count{ background:rgba(16,18,16,.62);border:1px solid rgba(255,255,255,.25); color:#fff;border-radius:var(--pill); padding:6px 16px;font-size:13.5px;letter-spacing:.03em; } /* The button that opens it, resting on the picture. */ .pdp__figure{position:relative} .pdp__zoom{ position:absolute;right:10px;bottom:10px;z-index:2; width:38px;height:38px;display:grid;place-items:center;padding:0; border:0;border-radius:50%;background:rgba(255,255,255,.86);color:var(--ink); cursor:pointer;opacity:0;transition:opacity .18s ease,background .16s ease; } .pdp__zoom svg{width:19px;height:19px} .pdp__figure:hover .pdp__zoom,.pdp__zoom:focus-visible{opacity:1} .pdp__zoom:hover{background:#fff} @media (max-width:1023px){ /* No hover on a touch screen, so the button is simply always there. */ .pdp__zoom{opacity:1;width:34px;height:34px} } @media (max-width:749px){ /* Arrows move off the sides and onto the picture, which is the full width. */ .lightbox__panel{grid-template-columns:1fr;padding:52px 0 64px} .lightbox__stage{grid-column:1;padding:0 8px} .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px} .lightbox__nav--prev{left:8px;grid-column:1} .lightbox__nav--next{right:8px;grid-column:1} } @media (prefers-reduced-motion: reduce){ .lightbox__nav,.lightbox__close,.pdp__zoom,.rmodal__nav{transition:none} } .rmodal__count{font-size:13px;color:var(--muted)} /* ------------------------------------------------------- reviews section -- */ /* Summary, write button and sort live in a column beside the list on desktop, and stack above it on a phone. */ .reviews__grid{display:grid;grid-template-columns:296px minmax(0,1fr);gap:clamp(28px,4vw,58px);align-items:start} .reviews__side{position:sticky;top:calc(var(--header-h) + 20px)} .reviews__summary{ display:flex;flex-direction:column;gap:18px; padding:22px 24px;border:1px solid var(--line);border-radius:12px; } .reviews__score{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center} .reviews__score strong{font-size:38px;font-weight:600;line-height:1;letter-spacing:-.02em} .reviews__score span{font-size:13.5px;color:var(--muted)} .reviews__bars{display:flex;flex-direction:column;gap:6px;min-width:0} .reviews__bar{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft)} .reviews__bar:hover .reviews__bar-track{background:#e2e6e0} .reviews__bar.is-active{font-weight:600;color:var(--ink)} .reviews__bar-track{height:7px;background:var(--bg-soft);border-radius:var(--pill);overflow:hidden} .reviews__bar-track i{display:block;height:100%;background:#f5a623;border-radius:var(--pill)} .reviews__bar-count{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums} .reviews__filtered{margin:0;font-size:13px;color:var(--muted);text-align:center} .reviews__filtered a{text-decoration:underline;color:var(--ink)} .reviews__actions{display:flex;flex-direction:column;gap:10px;margin-top:16px} .reviews__write{width:100%;padding:14px 22px} /* One control, two shapes: a labelled dropdown in the desktop column, a plain icon button on a phone where it sits beside the write button. */ .rsort{position:relative} .rsort__trigger{ display:flex;align-items:center;gap:9px;width:100%; border:1px solid var(--line-strong);border-radius:var(--pill); background:#fff;color:var(--ink);padding:13px 16px;font-size:14.5px; } .rsort__trigger:hover{border-color:var(--ink-soft)} .rsort__icon{width:17px;height:17px;flex:none} .rsort__label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rsort__caret{width:10px;height:6px;flex:none;color:var(--muted)} .rsort__menu{ position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:100%; background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px; box-shadow:0 14px 34px rgba(20,26,22,.14); } .rsort__menu a{display:block;padding:10px 14px;border-radius:7px;font-size:14.5px;color:var(--ink-soft);white-space:nowrap} .rsort__menu a:hover{background:var(--bg-soft);color:var(--ink)} .rsort__menu a.is-active{color:var(--ink);font-weight:600} .rlist{display:flex;flex-direction:column} .rlist__item{ display:grid;grid-template-columns:172px minmax(0,1fr);gap:clamp(14px,2vw,28px); padding:17px 0;border-top:1px solid var(--line); } .rlist__item:first-child{padding-top:0;border-top:0} .rlist__who{display:flex;flex-direction:column;gap:4px;font-size:13.5px} .rlist__name{font-size:15px;font-weight:600;color:var(--ink)} .rlist__verified{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--accent)} .rlist__verified svg{width:14px;height:14px;fill:var(--accent);flex:none} /* The votes sit at the right of this row, level with the stars. */ .rlist__meta{display:flex;align-items:center;gap:10px;margin-bottom:5px} .rlist__date{font-size:13.5px;color:var(--muted)} .rlist__votes{display:flex;gap:2px;margin-left:auto;flex:none} .rlist__title{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600;margin:0 0 4px} /* The icon sits on the line with the words and never squashes with them. */ .hicon{flex:none;width:18px;height:18px;color:var(--accent)} .rlist__body{margin:0;font-size:15px;line-height:1.55;color:var(--ink-soft)} .rlist__vote{ display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;border-radius:var(--pill); background:none;padding:4px 8px;color:var(--muted);font-size:13px;font-family:inherit;cursor:pointer; } .rlist__vote svg{width:16px;height:16px} .rlist__vote:hover{background:var(--bg-soft);color:var(--ink)} .rlist__vote.is-voted{color:var(--accent)} /* --------------------------------------------------------- review pager --- */ .rpager{display:flex;align-items:center;gap:6px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .rpager a{ min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center; padding:0 9px;border:1px solid var(--line-strong);border-radius:6px; font-size:14px;color:var(--ink); } .rpager a:hover{border-color:var(--ink)} .rpager__num.is-on{background:var(--ink);border-color:var(--ink);color:#fff;cursor:default} .rpager__gap{padding:0 2px;color:var(--muted);font-size:14px} .rpager__step svg{width:15px;height:15px} .rpager__step.is-off{opacity:.35;pointer-events:none} /* The page being fetched fades rather than jumping to empty. */ .reviews__main.is-loading{opacity:.5;transition:opacity .12s ease} /* ------------------------------------------------------- write a review --- */ .wreview{margin-top:6px} .wreview__label{display:block;font-size:13.5px;font-weight:500;margin:14px 0 6px} .wreview__input{ width:100%;border:1px solid var(--line-strong);border-radius:7px;padding:11px 13px; font-family:inherit;font-size:15.5px; } .wreview__input:focus{outline:0;border-color:var(--ink)} .wreview__stars{display:inline-flex;flex-direction:row-reverse;gap:4px} .wreview__stars input{position:absolute;opacity:0;pointer-events:none} .wreview__stars label{cursor:pointer} .wreview__stars svg{width:26px;height:26px;fill:#dcdfda;transition:fill .12s} .wreview__stars label:hover svg, .wreview__stars label:hover ~ label svg, .wreview__stars input:checked ~ label svg{fill:#f5a623} .wreview__note{font-size:13px;color:var(--muted);margin:14px 0 10px} .wreview__result{margin:12px 0 0;font-size:14.5px} .wreview__result.is-ok{color:var(--accent-ink,#175639)} .wreview__result.is-error{color:var(--danger)} /* ----------------------------------------------------------------- faqs --- */ .faqs__lead{color:var(--muted);margin:8px 0 0;font-size:15px} .faqs__list{max-width:900px;margin:0 auto;border-top:1px solid var(--line)} .faqs__item{border-bottom:1px solid var(--line)} .faqs__item summary{ list-style:none;cursor:pointer;padding:20px 0;font-size:16px;letter-spacing:.01em; display:flex;justify-content:space-between;align-items:center;gap:18px; } .faqs__item summary::-webkit-details-marker{display:none} .faqs__item summary::after{content:'+';font-size:20px;color:var(--muted);flex:none} .faqs__item[open] summary::after{content:'\2013'} .faqs__answer{padding:0 0 20px;color:var(--ink-soft);font-size:15.5px;line-height:1.7;max-width:72ch} /* ------------------------------------------------------------------ usp --- */ .usp{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--bg-soft);margin-top:clamp(32px,5vw,56px); } .usp__inner{ max-width:var(--container);margin:0 auto;padding:clamp(28px,4vw,44px) var(--gutter); display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px); } .usp__item{ display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center; padding:0 clamp(8px,2vw,24px);position:relative; } .usp__item + .usp__item::before{ content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line); } .usp__icon{width:26px;height:26px;color:var(--accent);margin-bottom:2px} .usp__title{font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} .usp__text{font-size:15px;color:var(--muted);max-width:28ch} /* --------------------------------------------------------------- footer --- */ .footer{border-top:1px solid var(--line);margin-top:40px;background:#fff} .footer__inner{ max-width:var(--container);margin:0 auto;padding:clamp(36px,5vw,64px) var(--gutter); display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,50px); } .footer__brand{font-size:17.5px;font-weight:600;letter-spacing:.1em;margin-bottom:14px} .footer__col p{color:var(--muted);font-size:15px;margin:0 0 14px} .footer__col h4{font-size:12px;letter-spacing:.08em;margin-bottom:16px} .footer__col li{margin-bottom:9px} .footer__col a{font-size:15px;color:var(--ink-soft)} .footer__col a:hover{color:var(--ink);text-decoration:underline} .footer__wa{font-size:15px;text-decoration:underline} .footer__social{display:flex;gap:16px;margin-top:14px} .footer__bar{ border-top:1px solid var(--line);padding:18px var(--gutter);display:flex;justify-content:space-between;gap:12px; max-width:var(--container);margin:0 auto;font-size:13px;color:var(--muted);flex-wrap:wrap; } /* ---------------------------------------------------------------- toast --- */ .toast{ position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:120; background:var(--ink);color:#fff;padding:14px 22px;font-size:15px;border-radius:4px; box-shadow:0 12px 30px rgba(0,0,0,.2);animation:toastIn .3s ease; } .toast--error{background:var(--danger)} @keyframes toastIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}} /* ----------------------------------------------------------- mobile nav --- */ .mobile-nav > li{border-bottom:1px solid var(--line)} .mobile-nav__row{display:flex;align-items:center;justify-content:space-between} .mobile-nav__row a{display:block;padding:15px 0;font-size:14px;letter-spacing:.07em} .mobile-nav__toggle{border:0;background:none;font-size:20px;width:40px;color:var(--muted)} .mobile-nav__sub{display:none;padding:0 0 12px 14px} .mobile-nav__sub.is-open{display:block} .mobile-nav__sub a{display:block;padding:10px 0;font-size:15px;color:var(--ink-soft)} /* ----------------------------------------------------------- responsive --- */ @media (max-width:1100px){ .checkout{grid-template-columns:1fr} .checkout__main{order:2;border-right:0} .checkout__aside{order:1;border-left:0;border-bottom:1px solid var(--line)} .checkout__inner,.checkout__aside-inner{max-width:none;margin:0 auto} .checkout__aside-inner{position:static} } @media (max-width:1180px){ .grid{grid-template-columns:repeat(3,1fr)} } /* With five menu items beside the wordmark, the desktop header needs more room than it did at the smaller type size - collapse to the burger sooner. */ @media (max-width:1180px){ .header__inner{gap:clamp(12px,1.8vw,24px)} } @media (max-width:1199px){ .header__nav{display:none} .header__burger{display:flex} .header__logo{font-size:21px} .header__logo img{max-height:52px;max-width:min(280px,40vw)} } @media (max-width:989px){ .rlist__item{grid-template-columns:1fr;gap:9px;padding:15px 0} .rlist__who{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px} .reviews__grid{grid-template-columns:1fr;gap:24px} .reviews__side{position:static} /* Write button takes the row, sort collapses to the icon on its right. */ .reviews__actions{flex-direction:row;align-items:stretch;gap:10px} .reviews__write{width:auto;flex:1} .rsort__trigger{width:auto;justify-content:center;padding:13px;aspect-ratio:1/1} .rsort__label,.rsort__caret{display:none} .rsort__icon{width:20px;height:20px} .rsort__menu{left:auto;right:0;min-width:190px} .collection-strip{grid-template-columns:repeat(2,1fr)} .usp__inner{grid-template-columns:1fr;gap:26px} .usp__item + .usp__item::before{display:none} .usp__item + .usp__item{border-top:1px solid var(--line);padding-top:24px} .pdp{grid-template-columns:minmax(0,1fr)} .pdp__sticky{position:static} .cart-foot{grid-template-columns:1fr} .footer__inner{grid-template-columns:1fr 1fr} } @media (max-width:749px){ body{font-size:15px} /* keep the burger, wordmark and icons on one line without overflowing */ .header__inner{gap:6px;padding:0 14px} .header__logo{font-size:15px;letter-spacing:.07em} .header__logo img{max-height:52px;max-width:min(200px,44vw)} .header__burger{width:38px;margin-left:-7px} .icon-btn{width:38px} .search-overlay__inner{padding:18px 16px 22px} .search-overlay__form input{padding:14px 48px;font-size:16px} .search-overlay__icon{left:16px} .search-overlay__close{right:4px} .grid{grid-template-columns:repeat(2,1fr);gap:14px} .collection-strip{grid-template-columns:repeat(2,1fr)} .toolbar{grid-template-columns:1fr auto;row-gap:12px} .toolbar__count{grid-column:1/-1;order:3} .toolbar__sort select{min-width:0;width:100%;padding:12px 40px 12px 16px} .filter-btn{padding:12px 20px;gap:14px} /* Phone gallery: one image per screen, swiped, edge to edge. The negative margin cancels the section padding exactly - scroll-padding keeps the snap points aligned with the images rather than the bled edge. */ .pdp__media{ display:flex;gap:0; margin-inline:calc(var(--gutter) * -1); overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-behavior:smooth; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .pdp__media::-webkit-scrollbar{display:none} .pdp__figure{flex:0 0 100%;aspect-ratio:3/2;scroll-snap-align:center;scroll-snap-stop:always} .pdp__figure:first-child:last-child{grid-column:auto} /* Only once the script is driving the slider - dots that do nothing would be worse than no dots. */ .pdp__gallery.is-ready .pdp__dots{ display:flex;justify-content:center;align-items:center;gap:2px; margin-top:8px; } /* The dot itself stays 8px, but the button around it is 24px so it can actually be tapped - the visible size and the target size are not the same thing. */ .pdp__dot{ width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer; display:grid;place-items:center; } .pdp__dot::before{ content:"";width:8px;height:8px;border-radius:50%; background:var(--line-strong); transition:background .2s ease,transform .2s ease; } .pdp__dot.is-active::before{background:var(--ink);transform:scale(1.25)} /* Sized off the viewport so the pair always shares one row: at 13px with real Inter they came to 373px against 358px of space and the second tile dropped below. */ .signals{gap:6px} .signal{padding:6px 8px;gap:5px;font-size:clamp(11px,3.1vw,12.8px)} .signal__icon{width:14px;height:14px} .signal__icon--bolt{width:9.5px} .card__rating{font-size:12.5px;gap:6px} .card__price{font-size:14.5px;gap:2px 7px} .card__price s{font-size:13px} .cart-table__head{display:none} .cart-row{grid-template-columns:1fr auto;row-gap:14px} .cart-row__product{grid-column:1/-1} .cart-row__total{text-align:right} .footer__inner{grid-template-columns:1fr} .field-row{grid-template-columns:1fr} .hero__arrow{width:36px;height:36px;font-size:19px} .section{padding-left:16px;padding-right:16px} } /* ------------------------------------------------------- checkout rebuild --- */ .checkout__logo img{max-height:44px;width:auto} .checkout__hint{margin:-8px 0 14px;font-size:14px;color:var(--muted)} .alert--ok{background:#e8f4ed;color:var(--accent);border:1px solid #bfdfcd} /* one flat method, shown the way a chooser would look */ .ship-option{ display:flex;align-items:center;gap:12px; border:1px solid var(--accent);border-radius:9px;padding:16px;background:#f4f9f6; } .ship-option__radio{ flex:none;width:18px;height:18px;border-radius:50%;border:5px solid var(--accent);background:#fff; } .ship-option__name{flex:1;font-size:15.5px;color:var(--ink)} .ship-option__price{font-size:15.5px;font-weight:600;white-space:nowrap;color:var(--ink)} .pay-option__head{padding:16px;background:#f4f9f6;border-bottom:1px solid #cfe0d6} .pay-option__body{padding:15px 16px;font-size:14.5px;color:var(--ink-soft);line-height:1.6} .pay-option__body p{margin:0} .bill-options{border:1px solid #c9ccd0;border-radius:9px;overflow:hidden} .bill-option{ display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer; font-size:15.5px;color:var(--ink);border-bottom:1px solid #dfe1e3; transition:background .14s ease; } .bill-option:last-of-type{border-bottom:0} .bill-option input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--accent)} .bill-option.is-selected{background:#f4f9f6} /* Opens on its own grid row so the height can animate; the padding sits on the inner box because a collapsed row does not clip it. */ .bill-fields{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1); } .bill-fields.is-open{grid-template-rows:1fr} .bill-fields__inner{min-height:0;overflow:hidden;padding:0 16px} .bill-fields__inner > .field:first-child{margin-top:16px} .bill-fields__inner > .field:last-child{margin-bottom:16px} .btn-order{ display:block;width:100%;margin-top:30px;padding:19px 24px;border:0;border-radius:9px; background:var(--accent);color:#fff;font-family:inherit;font-size:16px;font-weight:600; letter-spacing:.01em;text-align:center;cursor:pointer;transition:background .14s ease; } .btn-order:hover{background:#265838} .btn-order--inline{width:auto;margin:0;padding:15px 30px} .checkout__legal{display:flex;flex-wrap:wrap;gap:20px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)} .checkout__legal a{font-size:13.5px;color:var(--muted);text-decoration:underline} .checkout__legal a:hover{color:var(--ink)} /* discount box in the summary column */ .discount{display:flex;gap:10px;margin:22px 0 4px} .discount input{ flex:1;min-width:0;height:48px;border:1px solid #c9ccd0;border-radius:9px;padding:0 14px; font-family:inherit;font-size:15px;color:var(--ink);background:#fff; } .discount input::placeholder{color:#6b7075} .discount input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px rgba(46,107,70,.18)} .discount button{ flex:none;height:48px;padding:0 22px;border:1px solid #c9ccd0;border-radius:9px; background:#eceeed;color:var(--ink-soft);font-family:inherit;font-size:15px;font-weight:500; transition:background .14s ease,color .14s ease; } .discount button:hover{background:#e2e6e3;color:var(--ink)} .discount__drop{border:0;background:none;color:var(--muted);font-size:16px;line-height:1;padding:0 2px} .discount__drop:hover{color:var(--danger)} .checkout-totals__row--off{color:var(--accent)} .checkout-totals__row--off > span{color:var(--accent)} .checkout-totals__row--off .tagline{ display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--pill); background:#e8f4ed;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase; } /* The summary collapses behind a bar on narrow screens, the way a Shopify checkout does; on desktop the two wrappers step out of the way entirely so the sticky column is unaffected. */ .checkout__summary,.checkout__summary-clip{display:contents} .summary-toggle{ display:none;width:100%;align-items:center;justify-content:space-between;gap:16px; padding:17px var(--gutter);border:0;border-bottom:1px solid var(--line); background:var(--bg-soft);font-family:inherit;font-size:15px;color:var(--accent);text-align:left; } .summary-toggle__label{display:inline-flex;align-items:center;gap:8px} .summary-toggle__label svg{width:11px;height:7px;transition:transform .28s cubic-bezier(.4,0,.2,1)} .summary-toggle[aria-expanded="true"] .summary-toggle__label svg{transform:rotate(180deg)} .summary-toggle__total{font-size:17px;font-weight:600;color:var(--ink)} @media (max-width:1100px){ .summary-toggle{display:flex} .checkout__summary{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1); } .checkout__summary.is-open{grid-template-rows:1fr} .checkout__summary-clip{display:block;min-height:0;overflow:hidden} } /* ------------------------------------------------ videos beside the faqs --- */ /* The clips and the questions sit below the reviews on a wide screen, and the flow container exists so order can say so - the sections are siblings, not nested, which is the only way CSS will reorder them. */ .pdp-flow{display:flex;flex-direction:column} /* On a wide screen the product itself ends on its own generous padding, and a full section's worth on top of that pushed the heading a long way down. Restored below 1024px, where the row above it is a different one. */ .pdp-related{padding-top:clamp(20px,2.2vw,34px)} /* .section carries margin:0 auto, and auto side margins stop a flex item stretching - every child would otherwise collapse to fit-content. A definite width restores full width while leaving the margins to centre the section above the container width, exactly as they do outside this container. */ .pdp-flow > *{width:100%} .pdp-related{order:1} .reviews{order:2} .pdp-duo{order:3} .pdp-duo{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px);align-items:start; /* The reviews above already end on their own padding, so a full section's worth here stacked into a gap far bigger than the row itself needed. */ padding-top:clamp(8px,1.4vw,20px); padding-bottom:clamp(28px,3.5vw,48px); } /* With only one of the two present it should not sit in a half-width column. */ .pdp-duo--one{grid-template-columns:minmax(0,1fr);max-width:900px} .pdp-duo .section__title{text-align:center;margin-bottom:6px} .pdp-duo .faqs__lead{text-align:center;margin-bottom:20px} .pdp-duo .faqs__list{max-width:none;margin-top:0} /* Phone order: clips, related products, reviews, then the questions last. display:contents dissolves the duo row so its two halves become siblings of the sections below and order can place them; each half then carries the section padding the row was providing. */ @media (max-width:1024px){ .pdp-related{padding-top:clamp(40px,6vw,72px)} } @media (max-width:899px){ .pdp-duo{display:contents} .tiktok,.faqs{padding:0 var(--gutter)} .tiktok{order:1} .pdp-related{order:2} .reviews{order:3} .faqs{order:4;padding-bottom:clamp(40px,6vw,72px)} } /* --------------------------------------------- product description copy --- */ /* Classes for the description field, so a description can be written with structure without carrying its own