/* ============================================================= StockBox — Design System V2 Ported verbatim from the approved prototype (handoff stockbox-claude-handoff-v2-final-2026-08-26, prototype/src/styles.css). DO NOT restyle. Tokens, spacing, type scale and component anatomy are locked by CLAUDE-IMPLEMENTATION-HANDOFF.md §4. Prototype-only surfaces (brand board, design index, demo fill, prototype jump button) are intentionally excluded. Fonts are linked from each page , not @import-ed. ============================================================= */ :root { --ink: #17363f; --ink-2: #244952; --teal: #0e7c86; --teal-soft: #d9ecec; --canvas: #fcfaf7; --paper: #ffffff; --sand: #ede7de; --sand-2: #f4f0ea; --sale: #d96830; --success: #2f725b; --danger: #a83f35; --muted: #6e7c7f; --line: #ddd8d0; --shadow: 0 14px 42px rgba(23, 54, 63, .09); --shell: 1240px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; min-height: 100vh; font-family: "Heebo", system-ui, sans-serif; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button { color: inherit; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; } .section { padding-block: 88px; } .section--tint { background: var(--sand-2); } .section--dark { background: var(--ink); color: white; } .eyebrow { display: block; margin-bottom: 13px; color: var(--teal); font: 800 12px/1.2 "Manrope", sans-serif; letter-spacing: .13em; text-transform: uppercase; } .button { min-height: 52px; padding: 0 24px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; cursor: pointer; transition: .2s ease; } .button:hover { transform: translateY(-1px); } .button:focus-visible, .icon-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(14,124,134,.35); outline-offset: 3px; } .button--dark { background: var(--ink); color: white; } .button--dark:hover { background: var(--teal); } .button--light { background: #fff; color: var(--ink); } .button--light:hover { background: var(--teal-soft); } .button--outline { border-color: #aeb9ba; background: transparent; color: var(--ink); } .button--outline:hover { border-color: var(--ink); } .button--outline-light { border-color: rgba(255,255,255,.55); color: white; } .icon-button { width: 44px; height: 44px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .announcement { height: 31px; padding-inline: 24px; background: var(--ink); color: #dbe9e9; display: flex; align-items: center; justify-content: center; gap: 70px; font-size: 12px; } .site-header { position: sticky; top: 0; z-index: 50; height: 74px; background: rgba(252,250,247,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); } .site-header__inner { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 42px; } .logo { display: inline-flex; align-items: center; direction: ltr; width: max-content; } .logo img { display: block; height: auto; object-fit: contain; } .logo__lockup { width: 172px; } .logo__mark { width: 54px; } .logo--inverse img { filter: brightness(0) invert(1); opacity: .96; } .desktop-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; } .desktop-nav a { position: relative; } .desktop-nav a::after { content: ""; position: absolute; right: 0; left: 100%; bottom: -8px; height: 2px; background: var(--teal); transition: .2s; } .desktop-nav a:hover::after { left: 0; } .desktop-nav .nav-muted { color: var(--muted); } .header-actions { display: flex; align-items: center; gap: 2px; direction: ltr; } .cart-button { position: relative; } .cart-count { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 20px; display: grid; place-items: center; background: var(--teal); color: white; font: 700 11px/1 "Manrope", sans-serif; } .header-mobile-action { display: none; } .hero { min-height: 650px; position: relative; overflow: hidden; background: var(--ink); } .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 61%; } .hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,27,33,.13) 0%, rgba(10,27,33,.36) 48%, rgba(10,27,33,.91) 100%); } .hero__content { position: relative; min-height: 650px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: white; } .hero__kicker { color: #a7d5d6; font: 700 12px/1 "Manrope", sans-serif; letter-spacing: .22em; } .hero h1 { max-width: 650px; margin: 22px 0 18px; font-size: clamp(56px, 6vw, 86px); line-height: .98; letter-spacing: -.055em; } .hero p { max-width: 560px; margin: 0 0 33px; color: #e8eeee; font-size: 19px; line-height: 1.7; font-weight: 300; } .hero__actions { display: flex; align-items: center; gap: 25px; } .hero__secondary { color: white; border-bottom: 1px solid rgba(255,255,255,.5); padding-block: 5px; } /* ---- Clearance campaign, approved 2026-09-10 ------------------------- */ .campaign-strip { min-height: 46px; padding: 8px 24px; display: flex; align-items: center; justify-content: center; gap: 18px; background: var(--teal-soft); color: var(--ink); border-bottom: 1px solid rgba(14,124,134,.18); } .campaign-strip span { font-weight: 800; } .campaign-strip b { color: var(--teal); font-size: 13px; } .campaign-strip small { display: inline-flex; align-items: center; gap: 5px; border-bottom: 1px solid rgba(23,54,63,.4); font-weight: 700; } .campaign-strip:hover small { border-bottom-color: var(--teal); color: var(--teal); } .campaign-banner { padding: 42px 0 44px; background: var(--sand-2); scroll-margin-top: 120px; } .campaign-banner__header { margin-bottom: 22px; display: grid; grid-template-columns: 230px minmax(0,1fr) 300px; align-items: center; gap: 28px; } .campaign-banner__logo { width: 172px; height: auto; justify-self: start; } .campaign-banner__headline { text-align: center; line-height: 1.05; } .campaign-banner__headline span { display: block; margin-bottom: 6px; color: var(--teal); font-size: 14px; font-weight: 800; letter-spacing: .035em; } .campaign-banner__headline h2 { margin: 0; font-size: 38px; line-height: 1; letter-spacing: -.04em; } .campaign-banner__header > p { max-width: 285px; margin: 0; justify-self: end; color: var(--ink-2); font-size: 15px; line-height: 1.55; } .campaign-banner__offers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .campaign-offer { height: 360px; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(23,54,63,.14); border-radius: 26px; background: var(--ink); color: white; } .campaign-offer__image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; } .campaign-offer__shade { position: absolute; z-index: 1; inset: 0; } .campaign-offer--roma .campaign-offer__image { object-position: center 54%; } .campaign-offer--roma .campaign-offer__shade { background: linear-gradient(90deg, rgba(23,54,63,.12) 0%, rgba(23,54,63,.58) 50%, rgba(23,54,63,.97) 100%); } .campaign-offer--coolers .campaign-offer__image { object-position: center center; } .campaign-offer--coolers .campaign-offer__shade { background: linear-gradient(90deg, rgba(23,54,63,.97) 0%, rgba(23,54,63,.82) 43%, rgba(23,54,63,.10) 80%); } .campaign-offer__content { position: absolute; z-index: 2; inset: 0 0 0 auto; width: 62%; padding: 32px 34px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .campaign-offer--coolers .campaign-offer__content { inset: 0 auto 0 0; width: 60%; } .campaign-offer__title { margin: 0 0 4px; font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; } .campaign-offer__price { margin-bottom: 16px; display: flex; align-items: baseline; gap: 13px; white-space: nowrap; } .campaign-offer__price strong { font: 800 57px/1 "Manrope", "Heebo", sans-serif; letter-spacing: -.045em; direction: ltr; } .campaign-offer__price span { font-size: 16px; font-weight: 500; } .campaign-offer__price del { text-decoration-thickness: 2px; } .campaign-coupon { min-width: 220px; min-height: 50px; padding: 10px 14px; border: 1px dashed rgba(255,255,255,.72); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(23,54,63,.56); color: white; cursor: pointer; backdrop-filter: blur(7px); transition: background .2s ease, border-color .2s ease; } .campaign-coupon:hover { background: rgba(14,124,134,.84); border-color: white; } .campaign-coupon:focus-visible { outline: 3px solid rgba(217,236,236,.75); outline-offset: 3px; } .campaign-coupon span { font-size: 14px; font-weight: 600; } .campaign-coupon b { font: 800 19px/1 "Manrope", sans-serif; letter-spacing: .08em; } .campaign-coupon.is-copied { background: var(--success); border-style: solid; } .campaign-offer__link { min-height: 44px; margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid currentColor; font-size: 15px; font-weight: 700; } .campaign-banner__terms { margin: 14px 0 0; color: var(--muted); font-size: 12px; text-align: center; } .campaign-inline { min-height: 104px; margin-top: 34px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--teal-soft); border: 1px solid rgba(14,124,134,.22); } .campaign-inline > div { display: flex; flex-direction: column; } .campaign-inline > div > span, .product-campaign > span { color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .campaign-inline strong { margin-top: 3px; font-size: 20px; } .campaign-inline small { margin-top: 2px; color: var(--muted); } .campaign-coupon--ink { min-width: 210px; border-color: rgba(23,54,63,.5); background: var(--ink); } .campaign-coupon--ink:hover { background: var(--teal); } .product-campaign { margin: 22px 0 4px; padding: 19px 20px; border-right: 4px solid var(--teal); background: var(--teal-soft); } .product-campaign > div { margin: 6px 0 13px; display: flex; align-items: baseline; gap: 10px; } .product-campaign > div strong { font: 800 32px/1 "Manrope", sans-serif; } .product-campaign > div small { color: var(--ink-2); } .product-campaign > p { margin: 11px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; } [data-sb-campaign][hidden] { display: none !important; } .promise-band { background: var(--teal); color: white; } .promise-band__grid { min-height: 92px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; } .promise-band__grid > div { min-height: 44px; padding-inline: 26px; display: flex; align-items: center; gap: 12px; border-left: 1px solid rgba(255,255,255,.2); } .promise-band__grid > div:first-child { padding-right: 0; } .promise-band__grid > div:last-child { border: 0; } .promise-band__grid span { display: flex; flex-direction: column; } .promise-band__grid strong { font-size: 14px; } .promise-band__grid small { color: #cfe7e7; font-size: 12px; } .section-heading { margin-bottom: 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; } .section-heading h2 { max-width: 760px; margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.035em; } .section-heading p { max-width: 720px; margin: 15px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; } .text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--teal); font-weight: 700; border-bottom: 1px solid rgba(14,124,134,.35); white-space: nowrap; } .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .category-tile { height: 480px; position: relative; overflow: hidden; background: var(--ink); } .category-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .category-tile:hover img { transform: scale(1.035); } .category-tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,33,40,.05) 20%, rgba(13,33,40,.92) 100%); } .category-tile__copy { position: absolute; inset: auto 0 0; padding: 28px; color: white; } .category-tile__copy > span { color: #a9d4d6; font: 700 11px/1 "Manrope", sans-serif; letter-spacing: .13em; } .category-tile__copy h3 { margin: 9px 0 7px; font-size: 28px; } .category-tile__copy p { min-height: 52px; margin: 0 0 17px; color: #dce7e8; font-size: 14px; line-height: 1.55; } .category-tile__copy b { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; } .need-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .need-grid a { min-height: 200px; padding: 27px 28px 26px; position: relative; border-left: 1px solid var(--line); } .need-grid a:last-child { border-left: 0; } .need-grid span { color: var(--teal); font: 700 12px/1 "Manrope", sans-serif; } .need-grid h3 { margin: 22px 0 8px; font-size: 22px; } .need-grid p { margin: 0; color: var(--muted); font-size: 14px; } .need-grid svg { position: absolute; left: 27px; bottom: 27px; } .need-grid a:hover { background: #fff; } .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 18px; row-gap: 42px; } .product-card { min-width: 0; } .product-card__image { height: 330px; position: relative; display: block; overflow: hidden; background: #f2efea; } .product-card__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; } .product-card:hover .product-card__image img { transform: scale(1.025); } .product-card--out .product-card__image img { opacity: .57; filter: saturate(.55); } .stock-badge { position: absolute; top: 14px; right: 14px; padding: 7px 10px 6px; background: var(--teal); color: white; font-size: 11px; font-weight: 700; line-height: 1; } .stock-badge--sale { background: var(--sale); } .stock-badge--out { background: var(--ink); } .favorite-button { position: absolute; top: 10px; left: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); cursor: pointer; } .product-card__body { padding-top: 16px; } .product-card__category { color: var(--teal); font-size: 12px; font-weight: 700; } .product-card__name { margin-top: 5px; display: block; font-size: 18px; font-weight: 700; line-height: 1.35; } .product-card__body p { min-height: 45px; margin: 7px 0 10px; color: var(--muted); font-size: 14px; line-height: 1.55; } .product-card__base { display: flex; align-items: center; gap: 5px; color: var(--success); font-size: 12px; font-weight: 700; } .product-card__bottom { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } .price-block { display: flex; flex-direction: column; } .price-block strong { font: 800 23px/1.1 "Manrope", sans-serif; } .price-block del { margin-top: 3px; color: #8c9697; font-size: 13px; } .card-action { padding: 4px 0; border: 0; border-bottom: 1px solid var(--teal); background: transparent; color: var(--teal); font-size: 13px; font-weight: 700; cursor: pointer; } .editorial { min-height: 650px; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--sand); } .editorial__image img { width: 100%; height: 100%; object-fit: cover; } .editorial__copy { max-width: 610px; padding: 85px 9vw 75px 70px; align-self: center; } .editorial__copy h2 { margin: 0 0 20px; font-size: 48px; line-height: 1.08; letter-spacing: -.035em; } .editorial__copy > p { color: #5e6f72; font-size: 17px; line-height: 1.75; } .editorial__copy ul { margin: 24px 0; padding: 0; list-style: none; display: grid; gap: 9px; } .editorial__copy li { display: flex; align-items: center; gap: 9px; } .editorial__price { margin-bottom: 25px; display: flex; align-items: baseline; gap: 13px; } .editorial__price strong { font: 800 39px/1 "Manrope", sans-serif; } .editorial__price del { color: #879193; font-size: 18px; } .calm-proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); } .calm-proof__grid > div { padding: 32px 0 0 55px; } .calm-proof__grid span { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--teal); font: 700 13px/1 "Manrope"; } .calm-proof__grid h3 { margin: 18px 0 8px; font-size: 20px; } .calm-proof__grid p { margin: 0; color: var(--muted); line-height: 1.65; } .footer { padding: 70px 0 24px; background: #112a31; color: #a9b8bb; } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 70px; } .footer__grid h3 { margin: 0 0 18px; color: white; font-size: 14px; } .footer__grid > div:not(.footer__brand) { display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .footer__grid a:hover { color: white; } .footer__brand p { max-width: 360px; margin: 20px 0 16px; line-height: 1.75; } .footer__contact { display: flex; align-items: center; gap: 8px; font-size: 13px; } .footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; font-size: 11px; color: #779095; } .page-hero { padding: 88px 0 70px; background: var(--sand); } .page-hero h1, .page-title h1 { margin: 0; font-size: 58px; line-height: 1; letter-spacing: -.04em; } .page-hero p, .page-title p { max-width: 700px; margin: 18px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; } .catalog-layout { padding-block: 32px 95px; } .filter-bar { min-height: 68px; margin-bottom: 45px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--line); } .filter-tabs { display: flex; align-self: stretch; gap: 26px; overflow-x: auto; } .filter-tabs { scrollbar-width: none; -ms-overflow-style: none; } .filter-tabs::-webkit-scrollbar { display: none; } .filter-tabs button { position: relative; border: 0; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; white-space: nowrap; } .filter-tabs button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 100%; height: 2px; background: var(--teal); transition: .2s; } .filter-tabs button.active { color: var(--ink); font-weight: 700; } .filter-tabs button.active::after { left: 0; } .filter-meta { display: flex; align-items: center; gap: 22px; font-size: 13px; color: var(--muted); } .filter-meta label { display: flex; align-items: center; gap: 6px; } .filter-meta select { border: 0; background: transparent; color: var(--ink); font-weight: 600; } .catalog-help { padding: 45px 0; background: var(--teal-soft); } .catalog-help .shell { display: flex; align-items: center; justify-content: space-between; gap: 30px; } .catalog-help h2 { margin: 0 0 4px; font-size: 28px; } .catalog-help p { margin: 0; color: var(--muted); } .category-hero { min-height: 550px; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--sand); } .category-hero__media img { width: 100%; height: 100%; object-fit: cover; } .category-hero__copy { padding: 68px clamp(45px, 8vw, 130px) 60px 50px; align-self: center; } .breadcrumbs { display: block; margin-bottom: 55px; color: #728083; font-size: 12px; } .breadcrumbs a { color: var(--teal); } .category-hero h1 { margin: 0 0 18px; font-size: 60px; line-height: 1; } .category-hero p { max-width: 600px; color: var(--muted); font-size: 18px; line-height: 1.7; } .category-hero__facts { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px; } .category-hero__facts span { display: flex; align-items: center; gap: 6px; font-size: 13px; } .category-toolbar { margin-bottom: 38px; display: flex; align-items: end; justify-content: space-between; } .category-toolbar h2 { margin: 0; font-size: 36px; } .category-toolbar p { margin: 3px 0 0; color: var(--muted); } .buying-guide { padding-block: 82px; } .buying-guide__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: start; } .buying-guide h2 { margin: 0; font-size: 42px; line-height: 1.12; } .buying-guide p { color: var(--muted); font-size: 17px; line-height: 1.7; } .guide-steps { display: grid; } .guide-steps > div { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 56px 1fr; gap: 15px; } .guide-steps b { color: var(--teal); font: 700 12px/1 "Manrope"; } .guide-steps span { display: flex; flex-direction: column; } .guide-steps strong { font-size: 18px; } .guide-steps small { margin-top: 4px; color: var(--muted); font-size: 14px; } .product-page { padding-bottom: 90px; } .product-breadcrumbs { padding-block: 24px; } .product-detail { display: grid; grid-template-columns: 1.08fr .92fr; gap: 78px; align-items: start; } .gallery { display: grid; grid-template-columns: 80px 1fr; gap: 14px; direction: ltr; } .gallery__main { height: 650px; position: relative; grid-column: 2; grid-row: 1; background: #f1eeea; } .gallery__main img { width: 100%; height: 100%; object-fit: contain; } .gallery__thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; } .gallery__thumbs button { width: 80px; height: 90px; padding: 0; border: 1px solid var(--line); background: #f1eeea; cursor: pointer; } .gallery__thumbs button.active { border: 2px solid var(--teal); } .gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; } .product-info { padding-top: 16px; } .product-info__category { color: var(--teal); font-size: 12px; font-weight: 700; } .product-info h1 { margin: 11px 0 15px; font-size: 46px; line-height: 1.08; letter-spacing: -.035em; } .product-info__intro { color: var(--muted); font-size: 17px; line-height: 1.75; } .product-price { margin: 25px 0 24px; display: flex; align-items: baseline; gap: 13px; } .product-price strong { font: 800 42px/1 "Manrope"; } .product-price del { color: #8d9899; font-size: 19px; } .product-price small { color: var(--muted); } .product-assurances { padding-block: 18px; border-block: 1px solid var(--line); display: grid; gap: 16px; } .product-assurances > div { display: flex; align-items: flex-start; gap: 11px; } .product-assurances svg { color: var(--teal); margin-top: 2px; } .product-assurances span { display: flex; flex-direction: column; } .product-assurances strong { font-size: 14px; } .product-assurances small { color: var(--muted); font-size: 12px; } .purchase-box { margin-top: 25px; display: grid; grid-template-columns: 110px 1fr; gap: 10px; } .quantity { height: 54px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; } .quantity button { height: 100%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; } .quantity span { text-align: center; font: 700 14px/1 "Manrope"; } .purchase-button { min-height: 54px; } .secure-line { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 12px; } .product-help { margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 15px; color: var(--muted); font-size: 13px; } .product-help a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); border-bottom: 1px solid #9fb5b8; } .notify-form { margin-top: 25px; } .notify-form > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; } .notify-form > div { display: grid; grid-template-columns: 1fr auto; } .notify-form input { min-height: 52px; padding: 0 14px; border: 1px solid var(--line); background: white; direction: ltr; } .mobile-purchase-bar { display: none; } .form-success { display: flex; align-items: center; gap: 6px; color: var(--success); font-size: 13px; } .product-details-grid { margin-top: 90px; padding-top: 60px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 100px; } .product-details-grid h2 { margin: 0 0 18px; font-size: 30px; } .product-details-grid p, .product-details-grid li { color: var(--muted); line-height: 1.75; } /* content-restore-01 — restored description, benefit/use-case lists and the warranty paragraph inside the left column. */ .product-details-grid p { margin: 0 0 16px; } .product-details-grid h3 { margin: 24px 0 10px; font-size: 17px; font-weight: 700; color: var(--ink); } .product-details-grid ul { margin: 0 0 16px; padding-right: 20px; } .product-details-grid li { margin: 8px 0; } .product-details-grid li strong { color: var(--ink); font-weight: 700; } .product-warranty__title { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); } .spec-table > div { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; } .spec-table span { color: var(--muted); } .page-title { padding: 65px 0 40px; } .cart-layout { padding-bottom: 95px; display: grid; grid-template-columns: 1fr 390px; gap: 68px; align-items: start; } .shipping-progress { margin-bottom: 22px; padding: 18px 20px; background: var(--teal-soft); display: flex; align-items: center; gap: 14px; } .shipping-progress > div { flex: 1; } .shipping-progress strong { display: block; font-size: 14px; } .shipping-progress span { height: 4px; margin-top: 9px; display: block; overflow: hidden; background: rgba(14,124,134,.15); } .shipping-progress i { height: 100%; display: block; background: var(--teal); } .shipping-progress.complete { background: #dcece3; } .cart-row { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 130px 1fr auto; gap: 22px; } .cart-row > a img { width: 130px; height: 140px; object-fit: contain; background: #f1eeea; } .cart-row__copy { display: flex; flex-direction: column; align-items: flex-start; } .cart-row__copy > span { color: var(--teal); font-size: 11px; font-weight: 700; } .cart-row__copy > a { margin: 5px 0; font-size: 17px; font-weight: 700; } .cart-row__copy small { display: flex; align-items: center; gap: 5px; color: var(--success); } .quantity--small { width: 100px; height: 37px; margin-top: auto; } .cart-row__price { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } .cart-row__price strong { font: 800 19px/1 "Manrope"; } .cart-row__price button { border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; } .back-to-shop { margin-top: 25px; } .order-summary { padding: 28px; position: sticky; top: 105px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); } .order-summary h2 { margin: 0 0 22px; font-size: 24px; } .order-summary > div:not(.summary-trust) { padding: 8px 0; display: flex; justify-content: space-between; } .order-summary__total { margin-top: 15px; padding-top: 20px !important; border-top: 1px solid var(--line); font-size: 20px; } .order-summary__total b { font: 800 24px/1 "Manrope"; } .order-summary > small { margin: 8px 0 20px; display: block; color: var(--muted); line-height: 1.55; } .order-summary .button { width: 100%; } .summary-trust { margin-top: 17px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 11px; } .empty-state { min-height: 630px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .empty-state > svg { margin-bottom: 22px; color: var(--teal); } .empty-state h1 { margin: 0; font-size: 47px; } .empty-state p { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.7; } .checkout-page { min-height: 100vh; background: #f5f2ed; } .checkout-top { min-height: 76px; padding: 0 42px; border-bottom: 1px solid var(--line); background: var(--canvas); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .checkout-top > div { display: flex; align-items: center; gap: 10px; color: #899294; font-size: 12px; } .checkout-top > div .active { color: var(--ink); font-weight: 700; } .checkout-top > div i { width: 34px; height: 1px; background: var(--line); } .checkout-top > span { justify-self: end; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; } .checkout-layout { padding-block: 55px 90px; display: grid; grid-template-columns: 1fr 390px; gap: 70px; align-items: start; } .checkout-heading h1 { margin: 0; font-size: 44px; line-height: 1.05; } .checkout-heading p { margin: 12px 0 30px; color: var(--muted); } .shipping-methods { padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .shipping-methods legend { margin-bottom: 10px; font-weight: 700; } .shipping-methods label { min-height: 84px; padding: 16px; border: 1px solid var(--line); background: #fff; display: grid; grid-template-columns: 17px 27px 1fr auto; align-items: center; gap: 10px; cursor: pointer; } .shipping-methods label.selected { border: 2px solid var(--teal); padding: 15px; background: #f5fbfb; } .shipping-methods input { accent-color: var(--teal); } .shipping-methods label > span { display: flex; flex-direction: column; } .shipping-methods strong { font-size: 14px; } .shipping-methods small { margin-top: 2px; color: var(--muted); font-size: 11px; } .shipping-methods b { font-size: 12px; } .checkout-section { margin-top: 34px; padding-top: 27px; border-top: 1px solid var(--line); } .checkout-section h2 { margin: 0 0 15px; font-size: 22px; } .checkout-section__head { display: flex; align-items: center; justify-content: space-between; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .field { display: flex; flex-direction: column; align-items: stretch; } .field--full { grid-column: 1 / -1; } .field > span { margin-bottom: 5px; font-size: 12px; font-weight: 700; } .field input, .field textarea { min-height: 50px; padding: 10px 12px; border: 1px solid #cfd3d2; background: #fff; color: var(--ink); } .field textarea { resize: vertical; } .field--error input { border-color: var(--danger); background: #fff8f7; } .field > small { margin-top: 4px; color: var(--danger); font-size: 11px; } .arava-note { margin-bottom: 16px; padding: 14px; background: #f7e8de; display: flex; align-items: center; gap: 8px; color: #75503d; font-size: 12px; } .payment-placeholder { padding: 18px; border: 1px solid var(--line); background: #fff; display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: 10px; } .payment-placeholder > div { display: flex; flex-direction: column; } .payment-placeholder strong { font-size: 13px; } .payment-placeholder small { color: var(--muted); font-size: 11px; } .checkout-summary { padding: 27px; position: sticky; top: 24px; background: #fff; box-shadow: var(--shadow); } .checkout-summary h2 { margin: 0 0 18px; } .checkout-item { padding: 12px 0 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 12px; } .checkout-item img { width: 70px; height: 70px; object-fit: contain; background: #f1eeea; } .checkout-item span { display: flex; flex-direction: column; } .checkout-item strong { font-size: 12px; line-height: 1.35; } .checkout-item small { color: var(--muted); font-size: 11px; } .checkout-item > b { font: 700 13px/1 "Manrope"; } .summary-lines { padding-block: 16px; } .summary-lines > div { padding: 6px 0; display: flex; justify-content: space-between; font-size: 13px; } .summary-lines .total { margin-top: 10px; padding-top: 17px; border-top: 1px solid var(--line); font-size: 16px; } .summary-lines .total b { font: 800 20px/1 "Manrope"; } .checkout-error { margin-bottom: 12px; padding: 11px; background: #f9e6e3; color: var(--danger); display: flex; align-items: center; gap: 7px; font-size: 12px; } .checkout-submit { width: 100%; } .checkout-summary > p { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font-size: 10px; } .thank-you { min-height: 750px; padding-block: 85px 110px; text-align: center; } .thank-you__icon { margin-bottom: 22px; color: var(--teal); } .thank-you h1 { margin: 0; font-size: 56px; letter-spacing: -.04em; } .thank-you > p { max-width: 650px; margin: 18px auto 45px; color: var(--muted); font-size: 17px; line-height: 1.75; } .thank-you__grid { max-width: 900px; margin: 0 auto 38px; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); } .thank-you__grid > div { padding: 28px; border-left: 1px solid var(--line); } .thank-you__grid > div:last-child { border: 0; } .thank-you__grid span { color: var(--teal); font: 700 11px/1 "Manrope"; } .thank-you__grid h2 { margin: 11px 0 5px; font-size: 17px; } .thank-you__grid p { margin: 0; color: var(--muted); font-size: 13px; } .thank-you__summary { max-width: 650px; margin: 0 auto; padding: 14px 18px; background: #fff; display: flex; align-items: center; justify-content: space-between; text-align: right; } .thank-you__summary > div { display: flex; align-items: center; gap: 12px; } .thank-you__summary img { width: 65px; height: 65px; object-fit: contain; background: #f1eeea; } .thank-you__summary span { display: flex; flex-direction: column; } .thank-you__summary small { color: var(--muted); } .thank-you__summary > b { font: 800 18px/1 "Manrope"; } .thank-you__actions { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 25px; } .b2b-hero { padding-block: 95px; background: var(--ink); color: white; } .b2b-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 100px; align-items: center; } .b2b-hero h1 { max-width: 690px; margin: 15px 0 20px; font-size: 62px; line-height: 1.03; letter-spacing: -.04em; } .b2b-hero p { max-width: 640px; color: #c7d4d5; font-size: 18px; line-height: 1.7; } .b2b-hero__actions { margin-top: 30px; display: flex; align-items: center; gap: 24px; } .b2b-hero__actions > a:last-child { border-bottom: 1px solid #76979b; } .b2b-card { padding: 18px 30px; border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.04); } .b2b-card > div { padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 15px; } .b2b-card > div:last-child { border: 0; } .b2b-card svg { color: #63bdc2; } .b2b-card span { display: flex; flex-direction: column; } .b2b-card small { color: #a8babc; } .b2b-form-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; } .b2b-form-section h2 { margin: 0 0 10px; font-size: 46px; } .b2b-form-section > div > p { color: var(--muted); font-size: 17px; line-height: 1.7; } .b2b-proof { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 14px; } .b2b-form-section form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .b2b-form-section form .button { justify-self: start; } .b2b-form-section form .form-success { grid-column: 1 / -1; } .brand-section .section-heading { margin-bottom: 46px; } .drawer-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden; } .drawer-layer.open { pointer-events: auto; visibility: visible; } .drawer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(7,23,29,.55); opacity: 0; transition: .25s; } .drawer-layer.open .drawer-backdrop { opacity: 1; } .mini-cart, .mobile-menu { position: absolute; top: 0; right: 0; width: min(92vw, 430px); height: 100%; background: var(--canvas); transform: translateX(105%); transition: .28s ease; display: flex; flex-direction: column; } .drawer-layer.open .mini-cart, .drawer-layer.open .mobile-menu { transform: translateX(0); } .drawer-head { min-height: 75px; padding: 0 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .drawer-head > div { display: flex; flex-direction: column; } .drawer-head > div span { font-size: 20px; font-weight: 700; } .drawer-head > div small { color: var(--muted); } .mini-cart__items { flex: 1; padding: 5px 22px; overflow-y: auto; } .mini-cart__row { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 82px 1fr 25px; gap: 13px; } .mini-cart__row > img { width: 82px; height: 90px; object-fit: contain; background: #f1eeea; } .mini-cart__row > div { display: flex; flex-direction: column; align-items: flex-start; } .mini-cart__row strong { font-size: 13px; line-height: 1.35; } .mini-cart__row small { color: var(--muted); } .quantity--mini { width: 85px; height: 29px; margin-top: auto; } .mini-remove { align-self: start; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .mini-cart__footer { padding: 20px 22px 25px; border-top: 1px solid var(--line); background: #fff; } .mini-cart__footer > div { display: flex; justify-content: space-between; } .mini-cart__footer > small { margin: 4px 0 15px; display: block; color: var(--teal); } .mini-cart__footer .button { width: 100%; } .mini-checkout { margin-top: 12px; display: block; text-align: center; color: var(--teal); font-size: 12px; text-decoration: underline; } .mini-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .mobile-menu nav { padding: 20px 24px; display: flex; flex-direction: column; } .mobile-menu nav a { min-height: 54px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 600; } .mobile-menu__foot { margin-top: auto; padding: 22px 24px; background: var(--sand-2); display: grid; gap: 13px; } .mobile-menu__foot a { display: flex; align-items: center; gap: 9px; } .search-layer { position: fixed; inset: 0; z-index: 110; padding-top: 60px; background: rgba(10,29,35,.82); opacity: 0; visibility: hidden; transition: .22s; } .search-layer.open { opacity: 1; visibility: visible; } .search-panel { width: min(calc(100% - 40px), 780px); min-height: 260px; margin: auto; padding: 35px; position: relative; background: var(--canvas); box-shadow: var(--shadow); } .search-close { position: absolute; left: 18px; top: 18px; } .search-input { margin-top: 15px; border-bottom: 2px solid var(--ink); display: flex; align-items: center; gap: 10px; } .search-input input { width: 100%; min-height: 60px; border: 0; background: transparent; font-size: 24px; } .search-results { margin-top: 20px; } .search-results a { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 12px; } .search-results img { width: 60px; height: 60px; object-fit: contain; background: #f1eeea; } .search-results span { display: flex; flex-direction: column; } .search-results small { color: var(--muted); } .footer__legal { display: flex; gap: 14px; } .footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .mobile-menu__search { min-height: 52px; margin: 18px 24px 0; padding: 0 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-weight: 700; cursor: pointer; } .content-hero { background: var(--sand-2); } .content-hero .shell { max-width: 980px; margin-inline: auto; } .content-hero p { max-width: 700px; } .content-sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); } .content-sections article { min-height: 390px; padding: 38px 34px; background: var(--canvas); } .content-sections article > span, .legal-sections section > span { color: var(--teal); font: 800 13px/1 "Manrope"; letter-spacing: .08em; } .content-sections h2 { margin: 72px 0 14px; font-size: 28px; } .content-sections p { color: var(--muted); line-height: 1.75; } .content-sections ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .content-sections li { display: flex; align-items: flex-start; gap: 8px; } .content-sections li svg { flex: 0 0 auto; margin-top: 4px; color: var(--teal); } .content-sections--faq { max-width: 900px; grid-template-columns: 1fr; background: transparent; } .content-sections--faq details { border-bottom: 1px solid var(--line); background: var(--canvas); } .content-sections--faq summary { min-height: 76px; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; font-size: 21px; font-weight: 700; cursor: pointer; } .content-sections--faq summary::after { content: "+"; color: var(--teal); font: 400 28px/1 "Manrope"; } .content-sections--faq details[open] summary::after { content: "−"; } .content-sections--faq details p { max-width: 720px; margin: 0; padding: 0 4px 26px; color: var(--muted); line-height: 1.75; } .content-cta { padding: 54px 0; background: var(--ink); color: #fff; } .content-cta .shell { display: flex; align-items: center; justify-content: space-between; gap: 30px; } .content-cta h2 { max-width: 690px; margin: 8px 0 0; font-size: 31px; } .content-cta .eyebrow { color: #8fcfd2; } .contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; } .contact-cards { display: grid; align-content: start; gap: 1px; background: var(--line); } .contact-cards > * { min-height: 105px; padding: 24px; background: #fff; display: flex; align-items: center; gap: 17px; color: var(--ink); } .contact-cards svg { color: var(--teal); } .contact-cards span { display: flex; flex-direction: column; gap: 4px; } .contact-cards small { color: var(--muted); } .contact-form { padding: 38px; background: #fff; box-shadow: var(--shadow); display: grid; gap: 18px; } .contact-form h2 { margin: 0 0 6px; font-size: 30px; } .contact-form textarea { width: 100%; padding: 13px; border: 1px solid var(--line); background: #fff; resize: vertical; font: inherit; } .contact-form .button { justify-self: start; } .legal-layout { max-width: 980px; } .legal-sections { border-top: 1px solid var(--line); } .legal-sections section { padding: 32px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 70px 1fr; gap: 24px; } .legal-sections h2 { margin: 0 0 8px; font-size: 25px; } .legal-sections p { margin: 0 0 12px; color: var(--muted); line-height: 1.8; } .legal-sections p:last-child { margin-bottom: 0; } /* content-restore-01 — the restored legal text is real document copy: sub-headings, lists, retention tables and highlighted notes. */ .legal-meta { margin: 0 0 26px; padding: 13px 18px; background: var(--teal-soft); color: var(--ink); font-size: 14px; } .legal-lead { margin-bottom: 8px; } .legal-lead p { margin: 0 0 16px; color: var(--muted); line-height: 1.8; } .legal-sections h3 { margin: 22px 0 10px; font-size: 17px; font-weight: 700; color: var(--ink); } .legal-sections ul { margin: 0 0 14px; padding-right: 22px; color: var(--muted); line-height: 1.8; } .legal-sections li { margin: 6px 0; } .legal-sections ul ul { margin: 6px 0 0; } .legal-sections strong { color: var(--ink); font-weight: 700; } .legal-sections a, .legal-lead a { color: var(--teal); font-weight: 600; } .legal-block { margin: 18px 0; padding: 18px 22px; border-right: 4px solid var(--teal); background: var(--sand-2); color: var(--muted); font-size: 14px; line-height: 1.9; } .legal-block strong { color: var(--ink); } .legal-block ul { margin: 10px 0 0; } .legal-note { margin: 18px 0; padding: 16px 22px; border-right: 4px solid #d89526; background: #fff4db; color: #6a5126; line-height: 1.7; } .legal-note strong { color: #92400e; } .legal-table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: 14px; } .legal-table th { padding: 12px 16px; background: var(--ink); color: #fff; text-align: right; font-weight: 700; } .legal-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.6; } .legal-table tr:last-child td { border-bottom: none; } .legal-see-also { margin: 30px 0 0; padding: 15px 20px; background: var(--sand-2); text-align: center; font-size: 14px; } .legal-see-also a { color: var(--teal); font-weight: 600; } .legal-updated { margin: 18px 0 0; color: var(--muted); font-size: 13px; text-align: center; font-style: italic; } .checkout-empty .empty-state { min-height: calc(100vh - 82px); } .not-found { min-height: 650px; } .not-found__code { margin-bottom: 8px; color: var(--line); font: 800 100px/1 "Manrope"; } .thank-you__summary { display: block; } .thank-you__summary > .thank-you__items { display: grid; } .thank-you__item { padding-block: 12px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 65px 1fr auto; align-items: center; gap: 12px; } .thank-you__summary .thank-you__item > span { display: flex; } .thank-you__total { padding-top: 16px; display: flex; align-items: center; justify-content: space-between; } .thank-you__total b, .thank-you__item > b { font: 800 18px/1 "Manrope"; } @media (max-width: 1050px) { .desktop-nav { gap: 16px; font-size: 12px; } .site-header__inner { gap: 20px; } .campaign-banner__header { grid-template-columns: 180px minmax(0,1fr) 230px; gap: 20px; } .campaign-banner__headline h2 { font-size: 34px; } .campaign-offer__content { width: 68%; padding-inline: 28px; } .campaign-offer--coolers .campaign-offer__content { width: 65%; } .category-grid, .product-grid { grid-template-columns: repeat(2, 1fr); } .category-tile { height: 430px; } .need-grid { grid-template-columns: repeat(2, 1fr); } .need-grid a:nth-child(2) { border-left: 0; } .need-grid a:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .editorial { grid-template-columns: 1fr 1fr; } .editorial__copy { padding: 60px 45px; } .cart-layout, .checkout-layout { grid-template-columns: 1fr 340px; gap: 35px; } .shipping-methods { grid-template-columns: 1fr; } } @media (max-width: 820px) { .shell { width: min(calc(100% - 36px), var(--shell)); } .announcement { height: 28px; justify-content: center; font-size: 10px; } .announcement span:not(:nth-child(2)) { display: none; } .campaign-strip { min-height: 44px; padding-inline: 18px; gap: 10px; } .campaign-strip b { display: none; } .campaign-strip small { margin-right: auto; } .campaign-banner { padding-block: 34px 38px; } .campaign-banner__header { grid-template-columns: 1fr; gap: 11px; } .campaign-banner__logo { width: 160px; } .campaign-banner__headline { text-align: right; } .campaign-banner__headline h2 { font-size: 44px; } .campaign-banner__headline span { font-size: 16px; } .campaign-banner__header > p { display: none; } .campaign-banner__offers { grid-template-columns: 1fr; gap: 18px; } .campaign-offer { height: 460px; } .campaign-offer__content, .campaign-offer--coolers .campaign-offer__content { width: 72%; padding: 34px; } .campaign-offer--roma .campaign-offer__image { object-position: center center; } .campaign-offer--coolers .campaign-offer__content { width: 65%; } .campaign-inline { align-items: flex-start; flex-direction: column; } .site-header { height: 64px; } .site-header__inner { grid-template-columns: 1fr auto 1fr; } .header-mobile-action { display: block; } .desktop-nav, .header-hide-mobile { display: none; } .header-actions { justify-self: end; } .site-header .logo__lockup { width: 146px; } .hero, .hero__content { min-height: 590px; } .hero__image { object-position: 42% center; } .hero__shade { background: linear-gradient(180deg, rgba(10,27,33,.08), rgba(10,27,33,.84) 75%, rgba(10,27,33,.94)); } .hero__content { justify-content: flex-end; padding-bottom: 46px; } .hero h1 { font-size: 53px; } .hero p { max-width: 520px; font-size: 17px; } .promise-band__grid { padding-block: 16px; grid-template-columns: repeat(2, 1fr); gap: 15px 0; } .promise-band__grid > div { min-height: 38px; padding-inline: 16px; } .section { padding-block: 65px; } .section-heading { align-items: flex-start; } .section-heading h2 { font-size: 38px; } .product-detail { grid-template-columns: 1fr; gap: 35px; } .gallery { grid-template-columns: 1fr; } .gallery__main { grid-column: 1; height: 520px; } .gallery__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; } .product-info { max-width: 650px; } .cart-layout, .checkout-layout { grid-template-columns: 1fr; } .order-summary, .checkout-summary { position: static; } .checkout-top { padding: 0 18px; grid-template-columns: 1fr auto; } .checkout-top > div { display: none; } .b2b-hero__grid, .b2b-form-section { grid-template-columns: 1fr; gap: 50px; } .content-sections { grid-template-columns: 1fr; } .content-sections article { min-height: auto; } .content-sections h2 { margin-top: 38px; } .contact-layout { grid-template-columns: 1fr; gap: 38px; } } @media (max-width: 600px) { .shell { width: calc(100% - 32px); } .section { padding-block: 54px; } .campaign-strip { font-size: 13px; } .campaign-strip small { font-size: 11px; white-space: nowrap; } .campaign-banner__header { margin-bottom: 20px; } .campaign-banner__logo { width: 146px; } .campaign-banner__headline h2 { font-size: 39px; } .campaign-banner__headline span { font-size: 13px; } .campaign-offer { height: 430px; border-radius: 22px; } .campaign-offer__content, .campaign-offer--coolers .campaign-offer__content { width: 78%; padding: 28px 24px; } .campaign-offer--coolers .campaign-offer__content { width: 72%; } .campaign-offer__title { font-size: 25px; } .campaign-offer__price { gap: 9px; } .campaign-offer__price strong { font-size: 49px; } .campaign-offer__price span { font-size: 14px; } .campaign-coupon { width: min(100%, 260px); min-width: 0; } .campaign-banner__terms { line-height: 1.5; } .campaign-inline { width: calc(100% - 32px); margin-top: 24px; padding: 18px; } .campaign-inline strong { font-size: 18px; line-height: 1.4; } .campaign-inline .campaign-coupon { width: 100%; } .product-campaign { padding: 17px 16px; } .product-campaign > div { align-items: flex-start; flex-direction: column; gap: 5px; } .product-campaign .campaign-coupon { width: 100%; } .hero, .hero__content { min-height: 575px; } .hero__image { object-position: 39% center; } .hero h1 { margin-top: 16px; font-size: 46px; } .hero p { margin-bottom: 24px; font-size: 16px; } .hero__actions { width: 100%; align-items: stretch; flex-direction: column; gap: 14px; } .hero__secondary { align-self: center; } .promise-band__grid { grid-template-columns: 1fr; } .promise-band__grid > div { border-left: 0; } .section-heading { margin-bottom: 28px; flex-direction: column; } .section-heading h2 { font-size: 32px; } .section-heading p { font-size: 15px; } .category-grid, .product-grid { grid-template-columns: 1fr; } .category-tile { height: 430px; } .category-tile__copy p { min-height: auto; } .need-grid { grid-template-columns: 1fr; } .need-grid a { min-height: 160px; border-left: 0; border-bottom: 1px solid var(--line); } .product-grid { row-gap: 36px; } .product-card__image { height: 390px; } .product-card__body p { min-height: auto; } .editorial { grid-template-columns: 1fr; } .editorial__image { height: 390px; } .editorial__copy { padding: 43px 22px 52px; } .editorial__copy h2 { font-size: 36px; } .calm-proof__grid { grid-template-columns: 1fr; } .calm-proof__grid > div { padding: 25px 0; border-bottom: 1px solid var(--line); } .footer { padding-top: 50px; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 28px; } .footer__brand { grid-column: 1 / -1; } .footer__bottom { align-items: flex-start; flex-direction: column; gap: 7px; } .footer__legal { flex-wrap: wrap; } .page-hero { padding: 58px 0 45px; } .page-hero h1, .page-title h1 { font-size: 45px; } .filter-bar { align-items: flex-start; flex-direction: column; } .filter-tabs { width: 100%; min-height: 55px; } .filter-meta { width: 100%; padding-bottom: 12px; justify-content: space-between; } .catalog-layout { padding-top: 15px; } .catalog-help .shell { align-items: flex-start; flex-direction: column; } .category-hero { grid-template-columns: 1fr; } .category-hero__media { height: 360px; } .category-hero__copy { padding: 35px 22px 50px; } .breadcrumbs { margin-bottom: 30px; } .category-hero h1 { font-size: 47px; } .category-toolbar h2 { font-size: 28px; } .category-toolbar .button { min-height: 45px; padding: 0 15px; } .buying-guide__grid { grid-template-columns: 1fr; gap: 25px; } .buying-guide h2 { font-size: 34px; } .product-breadcrumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery__main { height: 420px; } .gallery__thumbs button { width: 72px; height: 72px; } .product-info h1 { font-size: 36px; } .product-price strong { font-size: 36px; } .purchase-box { grid-template-columns: 100px 1fr; } .product-help { align-items: flex-start; flex-direction: column; } .product-page { padding-bottom: 82px; } .mobile-purchase-bar { min-height: 70px; padding: 9px 14px; position: fixed; right: 0; bottom: 0; left: 0; z-index: 48; border-top: 1px solid var(--line); background: rgba(252,250,247,.98); box-shadow: 0 -7px 24px rgba(23,54,63,.1); display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: 12px; } .mobile-purchase-bar > div { display: flex; flex-direction: column; } .mobile-purchase-bar small { color: var(--muted); font-size: 10px; } .mobile-purchase-bar strong { font: 800 21px/1.2 "Manrope"; } .mobile-purchase-bar .button { min-height: 50px; padding-inline: 14px; } .product-details-grid { margin-top: 60px; padding-top: 40px; grid-template-columns: 1fr; gap: 35px; } .page-title { padding-top: 48px; } .cart-row { grid-template-columns: 95px 1fr; gap: 14px; } .cart-row > a img { width: 95px; height: 110px; } .cart-row__price { grid-column: 2; align-items: flex-start; flex-direction: row; } .order-summary { padding: 22px; } .checkout-top .logo__lockup { width: 146px; } .checkout-layout { padding-top: 35px; } .checkout-heading h1 { font-size: 36px; } .shipping-methods label { grid-template-columns: 17px 25px 1fr auto; } .form-grid { grid-template-columns: 1fr; } .field--full { grid-column: auto; } .thank-you { padding-top: 60px; } .thank-you h1 { font-size: 42px; } .thank-you__grid { grid-template-columns: 1fr; } .thank-you__grid > div { border-left: 0; border-bottom: 1px solid var(--line); } .thank-you__actions { align-items: stretch; flex-direction: column; } .thank-you__item { grid-template-columns: 58px 1fr; } .thank-you__item img { width: 58px; height: 58px; } .thank-you__item > b { grid-column: 2; } .b2b-hero { padding-block: 65px; } .b2b-hero h1 { font-size: 45px; } .b2b-hero__actions { align-items: stretch; flex-direction: column; } .b2b-form-section form { grid-template-columns: 1fr; } .content-cta .shell { align-items: flex-start; flex-direction: column; } .content-cta h2 { font-size: 27px; } .content-sections--faq summary { min-height: 68px; font-size: 18px; } .contact-form { padding: 26px 20px; } .legal-sections section { grid-template-columns: 44px 1fr; gap: 14px; } .not-found__code { font-size: 76px; } .search-panel { padding: 30px 20px; } .search-input input { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* ============================================================= Production-only additions Same tokens, same rhythm. Documented per handoff §22. ============================================================= */ /* Screen-reader-only text. Must NOT use left:-9999px: in an RTL document that extends the scrollable width and breaks the no-horizontal-overflow gate. Clip-based hiding takes no layout space at all. */ .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; } /* Skip link — production pages need a keyboard entry point that the single-page prototype did not require. */ .skip-link { position: absolute; top: -60px; right: 16px; z-index: 200; padding: 12px 18px; background: var(--ink); color: #fff; font-weight: 700; transition: top .18s; } .skip-link:focus { top: 12px; } /* Toast confirming add-to-cart on pages where the drawer is not the first feedback the user sees. Uses --success and the drawer z-index band. */ .sb-toast { position: fixed; inset-inline: 16px; bottom: 20px; z-index: 120; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); padding: 13px 18px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .22s ease; } .sb-toast.show { opacity: 1; transform: translateY(0); } /* Stale-catalog notice (tier-3 cache). Mirrors .arava-note styling. */ .sb-stale { margin-bottom: 16px; padding: 14px; background: #f7e8de; color: #75503d; display: flex; align-items: center; gap: 8px; font-size: 13px; } /* Inline field-level server errors on B2B / contact, matching .field > small. */ .form-error { display: flex; align-items: center; gap: 6px; color: var(--danger); font-size: 13px; } /* Category tiles are anchors in production (the prototype used a router). */ a.category-tile { display: block; } /* Utility used by the header cart count before hydration. */ [hidden] { display: none !important; } /* ---- Touch-target compliance (handoff §17: 44x44 minimum on mobile) ---- Three controls inherit a smaller box from the prototype, which was only ever measured on desktop. Raised at the mobile breakpoint ONLY, so the desktop rendering stays identical to the approved design (handoff §22 documented deviation): .site-header .logo 146x28 -> 44 tall .quantity--mini buttons 28x28 -> 44 tall .mobile-menu__foot a ...x23 -> 44 tall .quantity--small 100x37 -> 44 tall (cart rows) .card-action ...x27 -> 44 tall .mini-remove 25x25 -> 44x44 .purchase-box qty col 100px -> 140px (product page) */ @media (max-width: 820px) { .site-header .logo, .checkout-top .logo { min-height: 44px; } .mobile-menu__foot a { min-height: 44px; } .quantity--mini { height: 44px; } .quantity--mini button { min-height: 44px; min-width: 44px; } .quantity--small { width: 140px; height: 46px; } .filter-tabs button { min-width: 44px; } .purchase-box { grid-template-columns: 140px 1fr; } .quantity--small button { min-height: 44px; } /* Secondary card action and the mini-cart remove control are the last two touch targets under the floor; both keep their visual treatment. */ .card-action { min-height: 44px; display: inline-flex; align-items: center; } .mini-remove { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -8px -12px 0 0; } } /* ---- Touch-target compliance, round 2 (audit P1, 2026-08-27) ------------- The first pass only covered controls that looked like buttons. The audit measured 390px and found text links under the floor as well: footer navigation, the legal row, section "לכל המוצרים" links, the hero secondary link and product-card titles. These are TYPE, not chrome. §22 locks the type scale, so nothing here changes a font-size, a colour or a weight — only the size of the box that receives the tap, and only at the mobile breakpoint. Desktop renders exactly as the approved prototype does. Card titles use an overlay instead of a taller box, because growing them would push the card body and break the grid rhythm. The overlay only ever covers the card's own image link and its (non-interactive) description, so it cannot steal a tap from a different destination. */ @media (max-width: 820px) { .footer__grid > div a { min-height: 44px; display: flex; align-items: center; } .footer__brand .logo { min-height: 44px; } .footer__contact a { min-height: 44px; display: inline-flex; align-items: center; } /* Spaced so the 44px areas in this inline row do not overlap each other. */ .footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; } .footer__legal a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* .text-link is always a standalone CTA, never inline in a sentence. */ .text-link, .hero__secondary { min-height: 44px; display: inline-flex; align-items: center; } .product-card__name { position: relative; } .product-card__name::after { content: ""; position: absolute; inset: -10px 0; } /* Sort control on the catalog: the select itself, not just its wrapper. */ .catalog-sort select, .sort-select, select { min-height: 44px; } } /* ---- Touch targets, round 2b: navigation vs. prose --------------------- */ @media (max-width: 820px) { /* Breadcrumbs are navigation, so they get real boxes, not overlays: adjacent overlays would sit on top of each other and a tap could land on the wrong destination. Wrapping keeps them inside 390px. */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; } .breadcrumbs a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .product-breadcrumbs { padding-block: 8px; } /* Text CTAs standing next to a button. */ .b2b-hero__actions > a:not(.button) { min-height: 44px; display: inline-flex; align-items: center; } .product-help a { min-height: 44px; } /* A link inside a sentence keeps its type; only the hit area grows behind it. WCAG 2.5.8 exempts inline links outright, but the handoff asks for 44px everywhere and an overlay satisfies both. Used only where nothing else interactive sits within the padded area. */ .hit-pad { position: relative; } .hit-pad::after { content: ""; position: absolute; inset: -13px -3px; } } /* ---- Drawer focus fix (audit P1 / keyboard QA, 2026-08-27) -------------- The ported rule is `.mini-cart, .mobile-menu { transition: .28s ease }`, which is shorthand for `transition-property: all`. `visibility` is animatable, and the drawer inherits its visibility from `.drawer-layer.open`, so opening the drawer made the panel's visibility animate hidden -> visible over 280ms, flipping only at the halfway point. openDrawer() moves focus into the panel 30ms after opening. At 30ms the panel was still visibility:hidden, so .focus() failed silently: the drawer opened, but focus stayed on the cart button and the focus trap never engaged. Escape and focus-return still worked, which is why it looked fine. Scoping the transition to `transform` — the only thing that was ever meant to animate — makes visibility flip with the parent, immediately. The animation is visually identical. Verified in-browser: focus now lands inside the drawer, and Tab / Shift+Tab wrap correctly. */ .mini-cart, .mobile-menu { transition: transform .28s ease; } /* Same defect on the search overlay: `transition: .22s` means "all", so its own visibility animated hidden -> visible and the panel was not focusable when openDrawer() reached for the search input 30ms later. Opacity is the only thing that should fade; visibility must switch immediately. */ .search-layer { transition: opacity .22s; }