:root {
  --ink: #281a12;
  --brown: #3b2015;
  --cream: #f7efdc;
  --sand: #ead398;
  --gold: #c49535;
  --green: #647438;
  --line: rgba(40, 26, 18, .16);
  --white: #fffdf7;
  --radius-panel: 20px;
  --radius-card: 14px;
  --radius-control: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; }
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

.site-header { height: 84px; padding: 0 clamp(20px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; background: rgba(247,239,220,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; letter-spacing: .12em; font-size: 12px; }
.brand small { display: block; font-size: 7px; margin-top: 3px; opacity: .65; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid; border-radius: 50%; font-family: "Playfair Display", serif; font-size: 20px; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.desktop-nav { display: flex; gap: 30px; font-size: 13px; }
.desktop-nav a:hover { color: var(--green); }
.desktop-nav a[aria-current="page"] { color: var(--green); }
.menu-toggle, .mobile-nav { display: none; }
.cart-pill { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cart-pill b { min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: var(--brown); color: white; }

.hero { min-height: calc(100vh - 84px); display: grid; grid-template-columns: 1fr 1fr; background: var(--sand); overflow: hidden; }
.hero-copy { padding: clamp(70px, 10vw, 150px) clamp(30px, 7vw, 110px); align-self: center; }
.eyebrow { margin: 0 0 16px; color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
h1, h2, h3 { font-family: "Playfair Display", serif; font-weight: 500; }
h1 { margin: 0; font-size: clamp(54px, 6vw, 96px); line-height: .98; letter-spacing: -.04em; }
h1 em { color: var(--green); font-weight: 500; }
.hero-text { max-width: 540px; margin: 30px 0; line-height: 1.75; opacity: .76; }
.primary-button { width: fit-content; min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 30px; border: 0; background: var(--brown); color: white; cursor: pointer; transition: .2s ease; }
.primary-button:hover { transform: translateY(-2px); background: #523020; }
.hero-art { position: relative; min-height: 600px; display: flex; align-items: center; justify-content: center; background: #d9bd74; }
.sun { position: absolute; width: 450px; height: 450px; border-radius: 50%; background: #f4dfaa; }
.bag { width: 32%; max-width: 240px; aspect-ratio: .72; position: absolute; display: grid; place-items: center; background: linear-gradient(135deg,#332820,#090807 48%,#2a211c); clip-path: polygon(7% 0,93% 0,100% 9%,96% 100%,4% 100%,0 9%); filter: drop-shadow(0 28px 22px rgba(54,31,13,.28)); }
.bag::before { content: ""; position: absolute; left: 7%; right: 7%; top: 9%; height: 2px; border-top: 2px dashed rgba(255,255,255,.45); }
.bag span { width: 62%; padding: 26px 10px; background: #f0e5cb; text-align: center; font-family: "Playfair Display", serif; font-size: clamp(17px, 2vw, 28px); line-height: 1; box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.bag-left { transform: translate(-65%,12%) rotate(-8deg); z-index: 2; }
.bag-center { transform: translateY(-10%); z-index: 3; }
.bag-right { transform: translate(65%,12%) rotate(8deg); z-index: 2; }

.how-it-works { padding: 78px clamp(24px,6vw,90px) 0; color: #fff6e3; background: var(--brown); }
.how-heading { margin-bottom: 38px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.how-heading > p { margin: 0 0 5px; color: #d8b76c; font-size: 8px; font-weight: 600; letter-spacing: .17em; }
.how-heading h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(40px,5vw,62px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.how-steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid rgba(255,255,255,.13); list-style: none; }
.how-steps li { min-width: 0; padding: 28px clamp(16px,3vw,38px) 30px 0; display: flex; gap: 18px; border-right: 1px solid rgba(255,255,255,.13); }
.how-steps li:not(:first-child) { padding-left: clamp(16px,3vw,38px); }
.how-steps li:last-child { padding-right: 0; border-right: 0; }
.how-steps li > span { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border: 1px solid rgba(216,183,108,.48); border-radius: 50%; color: #dfc27c; font-size: 9px; font-weight: 600; }
.how-steps h3 { margin: 0 0 7px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; font-weight: 600; line-height: 1; }
.how-steps p { margin: 0; color: rgba(255,246,227,.62); font-size: 10px; line-height: 1.6; }
.how-includes { min-height: 65px; display: flex; align-items: center; justify-content: center; gap: clamp(20px,5vw,65px); color: #d8b76c; font-size: 9px; font-weight: 600; letter-spacing: .05em; }
.how-includes span { position: relative; }
.how-includes span:not(:first-child)::before { content: ""; width: 4px; height: 4px; position: absolute; top: 50%; left: -28px; border-radius: 50%; background: var(--green); transform: translate(-50%,-50%); }

.intro { max-width: 710px; margin: 0 auto; padding: 110px 24px 55px; text-align: center; }
.intro h2, .builder h2, .story h2 { margin: 0 0 18px; font-size: clamp(42px,5vw,68px); line-height: 1; }
.intro > p:last-child { line-height: 1.7; opacity: .7; }
.collection-filters { max-width: 1320px; margin: 0 auto 27px; padding: 0 24px; }
.filter-heading { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.filter-heading span { color: var(--green); font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.filter-heading b { font-size: 9px; font-weight: 500; opacity: .55; }
.filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-options button { min-height: 44px; padding: 0 21px; border: 1px solid rgba(42,22,13,.17); border-radius: 999px; color: var(--ink); background: rgba(255,249,238,.45); font-size: 10px; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.filter-options button:hover { transform: translateY(-1px); border-color: var(--brown); }
.filter-options button[aria-pressed="true"] { border-color: var(--brown); color: #fff8e7; background: var(--brown); box-shadow: 0 7px 18px rgba(42,22,13,.15); }
.product-grid { max-width: 1320px; margin: auto; padding: 0 24px 120px; display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.product-card { border: 1px solid var(--line); background: rgba(255,255,255,.32); }
.product-visual { aspect-ratio: 1.05; display: grid; place-items: center; overflow: hidden; position: relative; background: var(--visual-bg); }
.product-visual .mini-bag { width: 44%; height: 68%; display: grid; place-items: center; background: linear-gradient(140deg,#3b332e,#12100f 52%,#392e28); clip-path: polygon(6% 0,94% 0,100% 8%,96% 100%,4% 100%,0 8%); filter: drop-shadow(0 18px 15px rgba(0,0,0,.25)); transform: rotate(var(--bag-rotate)); transition: transform .45s ease; }
.product-card:hover .mini-bag { transform: rotate(0) scale(1.05); }
.mini-bag span { width: 70%; padding: 18px 5px; background: var(--label); text-align: center; font-family: "Playfair Display",serif; font-size: 18px; line-height: 1.05; }
.product-price { position: absolute; top: 16px; right: 16px; background: var(--cream); padding: 8px 10px; font-size: 11px; }
.product-info { padding: 22px; }
.product-info h3 { margin: 0 0 8px; font-size: 27px; }
.product-info > p { margin: 0 0 20px; color: var(--green); font-size: 11px; letter-spacing: .1em; font-weight: 700; }
.meta { display: grid; grid-template-columns: 70px 1fr; gap: 8px; font-size: 12px; }
.meta span { opacity: .5; font-size: 9px; letter-spacing: .08em; }
.product-action {
  width: 100%;
  min-height: 46px;
  margin-top: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--brown);
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.product-action span { font-size: 20px; font-weight: 400; transition: transform .2s ease; }
.product-action:hover span { transform: rotate(90deg); }
.product-card.sold-out .product-photo { opacity: .56; filter: grayscale(.25); }
.product-unavailable { color: rgba(42,22,13,.58); cursor: not-allowed; }
.product-unavailable:hover { color: rgba(42,22,13,.58); }

.builder { padding: 110px clamp(20px,5vw,76px) 130px; background: #efdca9; }
.builder-intro { max-width: 760px; margin: auto; text-align: center; }
.builder-intro > p:not(.eyebrow) { line-height: 1.7; opacity: .75; }
.tiers { display: grid; grid-template-columns: repeat(5,1fr); margin: 35px 0 20px; border: 1px solid var(--line); }
.tiers div { padding: 17px 8px; border-right: 1px solid var(--line); display: grid; }
.tiers div:last-child { border: 0; }
.tiers b { font-family: "Playfair Display",serif; font-size: 19px; }
.tiers span, .tiers small { font-size: 9px; letter-spacing: .12em; opacity: .65; }
.tiers strong { margin-top: 10px; font-size: 19px; }
.tiers strong i { font-family: "Montserrat", sans-serif; font-size: .45em; font-style: normal; font-weight: 600; letter-spacing: .08em; }
.tiers small { margin-top: 9px; }
.pricing-note { margin: -5px 0 18px !important; font-size: 11px; opacity: .68 !important; }
.perks { display: flex; justify-content: center; gap: 24px; color: var(--green); font-size: 12px; }
.box-tabs-wrap { max-width: 1100px; margin: 70px auto 18px; display: flex; align-items: center; gap: 10px; }
.box-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.box-tab-wrap { display: flex; border: 1px solid rgba(40,26,18,.2); }
.box-tab, .new-box { padding: 11px 16px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.box-tab-wrap.active { background: var(--green); color: white; border-color: var(--green); }
.box-tab-wrap.active .box-tab { color: white; }
.remove-box { width: 34px; padding: 0; border: 0; border-left: 1px solid rgba(40,26,18,.16); color: inherit; background: transparent; cursor: pointer; font-size: 17px; }
.remove-box:hover { color: white; background: var(--brown); }
.new-box { border-style: dashed; color: var(--green); }
.build-layout { max-width: 1100px; margin: auto; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr); gap: 22px; align-items: start; }
.box-panel, .summary-card { padding: 28px; border: 1px solid var(--line); background: rgba(255,255,255,.28); }
.box-panel-header { display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.box-panel-header h3, .summary-card h3 { margin: 0; font-size: 29px; }
.box-panel-header p { margin: 5px 0 0; font-size: 12px; opacity: .65; }
.box-panel-header strong { color: var(--green); font-size: 18px; }
.box-items { display: grid; gap: 9px; margin: 18px 0; }
.selected-item, .picker-item { min-height: 66px; padding: 9px; display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.35); }
.coffee-thumb { width: 46px; height: 48px; display: grid; place-items: center; background: var(--thumb); color: white; font-family: "Playfair Display",serif; font-size: 18px; }
.item-copy strong { display: block; font-family: "Playfair Display",serif; font-size: 15px; }
.item-copy small { display: block; margin-top: 3px; opacity: .55; font-size: 8px; letter-spacing: .08em; }
.quantity { display: flex; align-items: center; gap: 10px; }
.quantity button, .add-button { min-width: 32px; height: 32px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.add-button { min-width: 48px; }
.add-button:hover, .quantity button:hover { background: var(--brown); color: white; }
.picker { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.picker-title { display: flex; justify-content: space-between; font-size: 12px; }
.picker-title span { opacity: .55; }
.summary-card { position: sticky; top: 104px; }
.summary-title-row { padding-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.summary-title-row .eyebrow { margin-bottom: 7px; }
.summary-card h3 { margin: 0; padding: 0; border: 0; }
.summary-title-row > button { padding: 7px 0; border: 0; color: inherit; background: transparent; opacity: .58; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.summary-title-row > button:hover { opacity: 1; }
.summary-title-row > button:disabled { opacity: .22; cursor: default; }
.summary-box { padding: 16px 0; border-bottom: 1px solid var(--line); }
.summary-box-header { display: flex; justify-content: space-between; margin-bottom: 9px; }
.summary-box-header strong { font-family: "Playfair Display",serif; }
.summary-box ul { margin: 0; padding: 0; list-style: none; font-size: 12px; opacity: .7; line-height: 1.7; }
.empty-summary { padding: 45px 0; text-align: center; opacity: .5; font-size: 13px; }
.summary-totals { padding: 17px 0; display: grid; gap: 10px; font-size: 11px; }
.summary-totals > div { display: flex; align-items: center; justify-content: space-between; }
.summary-totals > div:not(.total-row) strong { font-size: 11px; font-weight: 500; }
.total-row { margin-top: 5px; padding: 17px 0 0; display: flex; justify-content: space-between; font-size: 18px; }
.secure-note { margin: 13px 0 0; text-align: center; font-size: 8px; line-height: 1.55; opacity: .55; }
.full { width: 100%; }
.full:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.story { padding: 110px clamp(24px,8vw,130px); display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: end; }
.story p:last-child { line-height: 1.8; opacity: .68; }
footer { padding: 70px clamp(24px,6vw,90px) 25px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; background: var(--brown); color: #f8edd8; }
.footer-brand { font-family: "Playfair Display",serif; font-size: 36px; line-height: .85; }
.footer-identity { display: flex; align-items: flex-start; gap: 20px; }
.footer-logo { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; }
footer p { opacity: .65; font-size: 12px; }
.footer-label { color: #d3aa57; font-size: 10px; letter-spacing: .18em; }
footer a { display: block; margin: 12px 0; font-size: 13px; opacity: .8; }
.copyright { grid-column: 1/-1; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.12); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-trap {
  position: fixed !important;
  left: -100vw !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.form-grid label { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.form-grid .wide { grid-column: 1/-1; }
input, textarea, select { width: 100%; margin-top: 7px; padding: 13px; border: 1px solid var(--line); border-radius: 0; background: var(--white); color: var(--ink); outline: none; font: inherit; }
input:focus, textarea:focus, select:focus { border-color: var(--green); }
.whatsapp-button { width: 100%; margin-top: 22px; padding: 15px; border: 0; background: #237b4b; color: white; cursor: pointer; }
.form-note { text-align: center; line-height: 1.5; font-size: 10px; opacity: .55; }
.form-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 50; padding: 12px 18px; color: white; background: var(--brown); transform: translate(-50%,120px); transition: .25s ease; font-size: 13px; }
.toast.show { transform: translate(-50%,0); }
.mobile-order-bar { display: none; }
.reveal { animation: reveal .8s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 850px) {
  .site-header { height: 70px; }
  .desktop-nav { display: none; }
  .menu-toggle {
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    display: grid;
    place-content: center;
    gap: 4px;
    border: 0;
    border-radius: 50%;
    color: currentColor;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle > span { width: 19px; height: 1.5px; display: block; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .menu-toggle[aria-expanded="true"] > span:first-child { transform: translateY(5.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] > span:last-child { transform: translateY(-5.5px) rotate(-45deg); }
  .mobile-nav {
    padding: 7px 18px 10px;
    position: fixed;
    top: calc(70px + env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    z-index: 31;
    display: grid;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-panel);
    color: #fff8e7;
    background: rgba(36,20,13,.98);
    box-shadow: 0 24px 70px rgba(28,13,7,.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-9px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .mobile-nav[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-nav a { min-height: 53px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.1); font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; font-weight: 600; }
  .mobile-nav a:last-child { border-bottom: 0; }
  .mobile-nav a span { color: #d8b76c; font-family: "Montserrat", sans-serif; font-size: 7px; font-weight: 600; letter-spacing: .12em; }
  .mobile-nav a[aria-current="page"] { color: #dfc27c; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding: 70px 24px 55px; }
  .hero-art { min-height: 480px; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .build-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .story { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .brand strong { font-size: 10px; }
  .cart-pill span { display: none; }
  h1 { font-size: 50px; }
  .hero-art { min-height: 390px; }
  .sun { width: 310px; height: 310px; }
  .bag { width: 38%; }
  .product-grid { grid-template-columns: 1fr; padding-inline: 14px; }
  .builder { padding-inline: 14px; }
  .tiers strong { font-size: 15px; }
  .tiers div { padding-inline: 3px; }
  .perks { flex-direction: column; gap: 6px; }
  .box-tabs-wrap { align-items: flex-start; flex-direction: column; }
  .box-panel, .summary-card { padding: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  footer { grid-template-columns: 1fr 1fr; }
  footer > div:first-child { grid-column: 1/-1; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 16px; }
  body { overflow-x: hidden; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  button, a { touch-action: manipulation; }

  .site-header {
    height: calc(62px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
  }
  .mobile-nav { top: calc(62px + env(safe-area-inset-top)); }

  .brand { gap: 8px; letter-spacing: .1em; }
  .brand strong { font-size: 9px; }
  .brand small { font-size: 6px; }
  .cart-pill { min-width: 44px; min-height: 44px; justify-content: flex-end; }
  .cart-pill b { min-width: 31px; height: 31px; }

  .hero {
    min-height: 100svh;
    min-height: 100dvh;
    background-position: 50% 0;
  }

  .hero-copy { width: 100%; padding-inline: 12px; transform: translateY(-4svh); }
  .hero h1 { max-width: 100%; font-size: clamp(47px, 15.4vw, 68px); letter-spacing: -.06em; }
  .hero-tagline { font-size: clamp(20px, 6.2vw, 26px); }
  .scroll-cue { bottom: calc(86px + env(safe-area-inset-bottom)); }

  .how-it-works { padding: 58px 18px 0; }
  .how-heading { margin-bottom: 28px; display: block; text-align: center; }
  .how-heading > p { margin-bottom: 8px; }
  .how-heading h2 { font-size: clamp(40px,11.5vw,50px); }
  .how-steps { grid-template-columns: 1fr; }
  .how-steps li, .how-steps li:not(:first-child) { min-height: 92px; padding: 20px 4px; align-items: center; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.11); }
  .how-steps li:last-child { border-bottom: 0; }
  .how-steps li > span { width: 38px; height: 38px; flex-basis: 38px; }
  .how-steps h3 { font-size: 24px; }
  .how-steps p { font-size: 10px; }
  .how-includes { padding: 19px 0 21px; min-height: 0; flex-wrap: wrap; gap: 10px 23px; font-size: 8px; line-height: 1.4; text-align: center; }
  .how-includes span:not(:first-child)::before { left: -12px; }

  .intro { padding-inline: 20px; }
  .intro h2 { line-height: 1.05; }

  .collection-filters { margin-bottom: 18px; padding: 0; }
  .filter-heading { margin: 0 16px 8px; }
  .filter-options { padding: 0 14px 3px; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .filter-options::-webkit-scrollbar { display: none; }
  .filter-options button { min-height: 40px; padding-inline: 17px; flex: 0 0 auto; scroll-snap-align: start; }

  .product-grid { width: 100%; }
  .product-card { min-width: 0; }
  .product-visual { width: 100%; }
  .product-info h3 { overflow-wrap: anywhere; }
  .meta { grid-template-columns: 72px minmax(0,1fr); }

  .builder { padding: 76px 12px 90px; }
  .builder-intro { padding-inline: 7px; }
  .builder-intro h2 { font-size: clamp(41px, 13vw, 58px); }
  .builder-intro > p:not(.eyebrow) { font-size: 13px; }

  .tiers {
    width: calc(100% + 10px);
    margin-left: -5px;
    grid-template-columns: repeat(5,minmax(0,1fr));
  }
  .tiers div { min-width: 0; padding: 14px 2px; }
  .tiers b { font-size: 17px; }
  .tiers strong { font-size: 14px; }
  .tiers span, .tiers small { font-size: 7px; }
  .tiers small { min-height: 18px; line-height: 1.25; }
  .tiers strong i { display: block; margin-top: 2px; font-size: 7px; }
  .pricing-note { padding-inline: 8px; font-size: 10px !important; line-height: 1.5 !important; }

  .box-tabs-wrap { margin-top: 52px; }
  .box-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .box-tabs::-webkit-scrollbar { display: none; }
  .box-tab, .new-box { min-height: 44px; white-space: nowrap; }

  .build-layout { display: block; }
  .box-panel, .summary-card { width: 100%; }
  .summary-card { margin-top: 16px; }
  .selected-item, .picker-item { grid-template-columns: 44px minmax(0,1fr) auto; gap: 9px; }
  .coffee-thumb { width: 44px; height: 48px; }
  .item-copy { min-width: 0; }
  .item-copy strong { overflow-wrap: anywhere; line-height: 1.15; }
  .quantity { gap: 5px; }
  .quantity button, .add-button { min-width: 44px; height: 44px; }
  .quantity b { min-width: 14px; text-align: center; }

  .story { padding: 78px 20px; }
  .story h2 { font-size: clamp(40px,12vw,55px); }
  footer { padding: 65px 20px calc(35px + env(safe-area-inset-bottom)); gap: 36px 18px; }
  footer a { min-height: 30px; }

  .form-grid { gap: 13px; }
  input, textarea { min-height: 48px; padding: 13px 12px; font-size: 16px; }
  .whatsapp-button { min-height: 52px; }

  .mobile-order-bar {
    min-height: 68px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: #fff;
    background: rgba(43,21,12,.97);
    border-top: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 -8px 30px rgba(30,14,7,.18);
    backdrop-filter: blur(14px);
  }
  .mobile-order-bar div { display: grid; gap: 2px; }
  .mobile-order-bar small { color: #dcbf70; font-size: 7px; letter-spacing: .17em; }
  .mobile-order-bar strong { font-size: 17px; }
  .mobile-order-bar button { min-width: 148px; min-height: 48px; padding: 0 18px; border: 0; color: var(--brown); background: var(--cream); font-weight: 600; cursor: pointer; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 24px); text-align: center; }
}

.collection-cta {
  padding: 85px 24px 105px;
  display: grid;
  justify-items: center;
  text-align: center;
  background: #e8cb84;
}
.collection-cta h2 { max-width: 720px; margin: 0 0 30px; font-size: clamp(38px, 5vw, 68px); }
.collection-cta .primary-button { border-radius: var(--radius-control); }
.faq { padding: 95px clamp(20px,6vw,90px) 110px; display: grid; grid-template-columns: minmax(220px,.65fr) minmax(0,1.35fr); gap: clamp(45px,8vw,120px); align-items: start; background: #f5e6c0; }
.faq-heading { position: sticky; top: 115px; }
.faq-heading h2 { margin: 0 0 17px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(42px,5vw,64px); font-weight: 600; letter-spacing: -.03em; line-height: .98; }
.faq-heading > p:last-child { max-width: 360px; margin: 0; font-size: 12px; line-height: 1.7; opacity: .65; }
.faq-list { border-top: 1px solid rgba(42,22,13,.18); }
.faq-list details { border-bottom: 1px solid rgba(42,22,13,.18); }
.faq-list summary { min-height: 74px; padding: 19px 3px; display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; font-weight: 600; line-height: 1.15; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid rgba(42,22,13,.2); border-radius: 50%; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 400; transition: transform .2s ease, color .2s ease, background .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); color: #fff; background: var(--brown); }
.faq-list details > p { max-width: 650px; margin: -5px 50px 23px 3px; font-size: 12px; line-height: 1.75; opacity: .7; }

@media (max-width: 767px) {
  .faq { padding: 70px 18px 85px; grid-template-columns: 1fr; gap: 38px; }
  .faq-heading { position: static; text-align: center; }
  .faq-heading h2 { font-size: clamp(42px,12vw,54px); }
  .faq-heading > p:last-child { margin-inline: auto; }
  .faq-list summary { min-height: 68px; padding: 17px 2px; gap: 14px; font-size: 21px; }
  .faq-list summary span { width: 32px; height: 32px; flex-basis: 32px; }
  .faq-list details > p { margin: -3px 43px 21px 2px; font-size: 12px; }
}

.builder-page .site-header {
  position: sticky;
  top: 0;
  color: #fff;
  background: rgba(43,21,12,.96);
  backdrop-filter: blur(14px);
}
.builder-page .builder { padding-top: 65px; }
.builder-page .builder-intro h1 { margin: 0 0 18px; font-size: clamp(48px, 6vw, 78px); line-height: 1; }
.builder-page .back-link { margin-bottom: 34px; display: inline-block; color: rgba(44,18,7,.62); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.builder-page .back-link:hover { color: var(--green); }
.builder-page .step-heading h2 { margin: 0; font-size: clamp(28px,3vw,39px); line-height: 1; }
.builder-page .summary-card h2 { margin: 0; font-size: 29px; font-weight: 500; }

@media (max-width: 767px) {
  .builder-page .builder { padding-top: 34px; }
  .builder-page .back-link { margin-bottom: 25px; }
  .builder-page .step-heading h2 { font-size: 29px; }
}

@media (max-width: 359px) {
  .hero h1 { font-size: 45px; }
  .hero-tagline { font-size: 19px; }
  .builder { padding-inline: 9px; }
  .box-panel, .summary-card { padding: 15px; }
  .selected-item, .picker-item { grid-template-columns: 40px minmax(0,1fr) auto; gap: 7px; }
  .coffee-thumb { width: 40px; }
  .item-copy strong { font-size: 13px; }
  .item-copy small { font-size: 7px; }
  .mobile-order-bar button { min-width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Premium reference-matched visual system */
:root {
  --ink: #2c1207;
  --brown: #2b150c;
  --cream: #f0d99d;
  --sand: #f0d99d;
  --green: #57b824;
  --line: rgba(61, 31, 15, .22);
  --white: #fffdf8;
}

body {
  background: var(--cream);
  font-family: "Montserrat", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-mark, .footer-brand, .tiers b, .coffee-thumb, .item-copy strong, .summary-box-header strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
}

.site-header {
  height: 72px;
  color: #fff;
  background: linear-gradient(to bottom, rgba(10,5,2,.68), transparent);
  border: 0;
  backdrop-filter: none;
  position: absolute;
  inset: 0 0 auto;
}

.brand-mark { width: 46px; height: 46px; border: 2px solid rgba(255,255,255,.72); background: #f7e4bd; box-shadow: 0 3px 18px rgba(0,0,0,.25); overflow: hidden; }
.site-header nav a { text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.cart-pill b { color: var(--brown); background: var(--cream); }

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  position: relative;
  color: white;
  text-align: center;
  background-color: #1a0c05;
  background-image: url("assets/coffee-hero.webp");
  background-position: center top;
  background-size: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,5,2,.2) 0%, transparent 35%, rgba(22,10,3,.16) 58%, transparent 85%);
  pointer-events: none;
}

.hero-copy {
  padding: 0 18px;
  position: relative;
  z-index: 2;
  transform: translateY(-8vh);
}

.hero-place {
  margin: 0 0 14px;
  font-size: clamp(11px, 1.1vw, 15px);
  font-weight: 500;
  letter-spacing: .16em;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

.hero h1 {
  margin: 0;
  color: white;
  font-size: clamp(60px, 9vw, 142px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.055em;
  text-shadow: 0 3px 18px rgba(0,0,0,.5);
}

.hero-tagline {
  margin: 20px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(24px, 3vw, 44px);
  font-style: italic;
  font-weight: 600;
  text-shadow: 0 2px 14px rgba(0,0,0,.75);
}

.scroll-cue {
  position: absolute;
  bottom: 26px;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 9px;
  font-size: 8px;
  letter-spacing: .24em;
}

.scroll-cue i { width: 1px; height: 30px; background: rgba(44,18,7,.55); }

.intro {
  max-width: 780px;
  padding: 92px 24px 72px;
}

.intro h2 {
  margin-bottom: 18px;
  color: var(--ink);
  font-size: clamp(45px, 5vw, 76px);
  font-weight: 500;
  letter-spacing: -.045em;
}

.intro > p:last-child {
  margin: 0;
  color: var(--ink);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.7;
  opacity: .9;
}

.product-grid {
  max-width: 1260px;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 46px;
  padding-bottom: 145px;
}

.product-card {
  border: 0;
  background: transparent;
}

.product-visual {
  aspect-ratio: 3 / 4;
  background: #fff;
  overflow: hidden;
}

.product-image-empty { width: 100%; height: 100%; background: #fff; }
.product-photo { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-photo { transform: scale(1.018); }
.coffee-thumb { object-fit: contain; background: #fff; border: 1px solid rgba(40,26,18,.1); }

.bag-photo-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  place-items: center;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.product-card:hover .bag-photo-wrap { transform: scale(1.025); }
.bag-photo-wrap img { width: 86%; height: 92%; object-fit: contain; }

.bag-label {
  width: 44%;
  min-height: 18%;
  padding: 12px 8px 9px;
  position: absolute;
  left: 28%;
  top: 54%;
  display: grid;
  place-content: center;
  gap: 4px;
  color: #17110c;
  text-align: center;
  background: #f5ead6;
  overflow: hidden;
}

.bag-label::after {
  content: "";
  width: 38px;
  height: 38px;
  position: absolute;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: var(--label-accent, #7e923b);
  opacity: .75;
}

.bag-label small { color: #5ba82f; font-size: clamp(4px,.55vw,7px); letter-spacing: .08em; }
.bag-label b { font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(9px,1.2vw,17px); font-weight:600; line-height: 1.05; }
.bag-label span { font-size: clamp(4px,.5vw,6px); }
.cocoa { --label-accent:#6b3328; }
.gold { --label-accent:#d4a835; }
.oasis { --label-accent:#8ea16b; }
.almond { --label-accent:#9d684c; }
.pistachio { --label-accent:#788343; }
.caramel { --label-accent:#c38248; }
.berry { --label-accent:#b85d63; }

.product-price {
  top: 18px;
  right: 18px;
  z-index: 3;
  padding: 11px 14px;
  color: var(--ink);
  background: #f1dfad;
  font-size: 12px;
  font-weight: 500;
}

.product-info { padding: 27px 0 0; }
.product-info > p { margin-bottom: 12px; color: var(--green); font-size: 10px; letter-spacing: .22em; }
.product-info h3 { margin-bottom: 17px; font-size: clamp(28px,3vw,42px); letter-spacing: -.035em; }
.meta { grid-template-columns: 85px 1fr; gap: 9px; font-size: 11px; }
.meta span { font-size: 8px; letter-spacing: .12em; }

.builder { background: #e9ce8a; border-top: 1px solid rgba(50,25,10,.12); }
.builder h2 { letter-spacing: -.04em; }
.tiers div { background: rgba(255,255,255,.12); }
.box-tab.active { background: var(--green); border-color: var(--green); }
.new-box { color: #398c20; }
.primary-button { background: var(--brown); }
.story { background: #f0d99d; }

@media (max-width: 850px) {
  .site-header nav { display: none; }
  .hero { min-height: 100svh; }
  .hero-copy { padding: 0 14px; transform: translateY(-5vh); }
  .product-grid { gap: 55px 20px; }
}

@media (max-width: 560px) {
  .site-header { height: 62px; padding-inline: 16px; }
  .brand-mark { width: 33px; height: 33px; }
  .footer-identity { display: flex; }
  .footer-logo { width: 78px; height: 78px; }
  .hero { min-height: 100svh; background-position: center top; }
  .hero h1 { font-size: clamp(52px, 15.8vw, 72px); white-space: nowrap; }
  .hero-tagline { margin-top: 13px; font-size: 23px; }
  .hero-place { margin-bottom: 11px; font-size: 10px; }
  .scroll-cue { bottom: 15px; color: var(--ink); }
  .intro { padding: 68px 18px 70px; }
  .intro h2 { font-size: 43px; }
  .intro > p:last-child { font-size: 14px; line-height: 1.65; }
  .product-grid { grid-template-columns: 1fr; gap: 70px; padding: 0 16px 100px; }
  .product-visual { aspect-ratio: 3 / 4; }
  .bag-photo-wrap img { width: 94%; height: 94%; }
  .bag-label { width: 48%; left: 26%; top: 55%; padding: 10px 6px 8px; }
  .bag-label small { font-size: 5px; }
  .bag-label b { font-size: 13px; }
  .bag-label span { font-size: 5px; }
  .product-info { padding-top: 25px; }
  .product-info h3 { font-size: 31px; }
  .product-price { top: 15px; right: 15px; }
}

@media (max-width: 767px) {
  .site-header {
    height: calc(62px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
  }
  .hero { min-height: 100dvh; }
  .hero-copy { padding-inline: 12px; transform: translateY(-4svh); }
  .hero h1 { font-size: clamp(47px, 15.4vw, 68px); }
  .scroll-cue { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .product-grid { grid-template-columns: 1fr; }
}

@media (max-width: 359px) {
  .hero h1 { font-size: 45px; }
  .hero-tagline { font-size: 19px; }
}

/* Guided premium box builder */
.builder { padding-top: 105px; background: #e8cb84; }
.builder-intro { max-width: 680px; }
.builder-intro > p:not(.eyebrow) { max-width: 560px; margin-inline: auto; }
.perks { margin-top: 24px; }

.box-tabs-wrap { max-width: 1180px; margin-top: 62px; }
.box-tabs { gap: 9px; }
.box-tab {
  min-width: 112px;
  min-height: 52px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,.38);
  box-shadow: inset 0 0 0 1px rgba(53,25,11,.1);
}
.box-tab span { font-family: "Cormorant Garamond",Georgia,serif; font-size: 19px; font-weight:600; }
.box-tab small { font-size: 9px; opacity: .68; }
.box-tab.active { color: #fff8e7; background: var(--brown); box-shadow: 0 8px 22px rgba(49,24,11,.18); }
.new-box {
  min-height: 48px;
  padding-inline: 18px;
  border: 0;
  border-radius: 999px;
  color: var(--brown);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(53,25,11,.22);
}
.new-box:disabled { opacity: .35; cursor: not-allowed; }

.build-layout { max-width: 1180px; grid-template-columns: minmax(0,1.45fr) minmax(310px,.55fr); gap: 18px; }
.box-panel {
  padding: clamp(24px,4vw,48px);
  border: 0;
  border-radius: 2px;
  background: #f6e6ba;
  box-shadow: 0 22px 55px rgba(66,34,13,.12);
}
.size-step { padding-bottom: 36px; border-bottom: 1px solid rgba(55,26,12,.14); }
.step-heading { display: flex; align-items: center; gap: 15px; }
.step-heading > span {
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(55,26,12,.25);
  border-radius: 50%;
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
}
.step-heading p { margin: 0 0 4px; color: var(--green); font-size: 8px; font-weight: 600; letter-spacing: .18em; }
.step-heading h3 { margin: 0; font-size: clamp(28px,3vw,39px); line-height: 1; }

.size-options {
  margin-top: 24px;
  padding: 3px 1px 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px,1fr);
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}
.size-options::-webkit-scrollbar { display: none; }
.size-option {
  min-height: 116px;
  padding: 15px 12px;
  display: grid;
  align-content: center;
  gap: 5px;
  scroll-snap-align: start;
  border: 1px solid rgba(55,26,12,.14);
  border-radius: 2px;
  color: var(--ink);
  background: rgba(255,255,255,.38);
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.size-option:hover { transform: translateY(-2px); }
.size-option > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.size-option small { margin-top: 5px; font-size: 7px; letter-spacing: .11em; opacity: .6; }
.size-option strong { font-family: "Cormorant Garamond",Georgia,serif; font-size: 26px; font-weight:600; }
.size-option strong i { font-family: "Montserrat",sans-serif; font-size: 7px; font-style: normal; letter-spacing: .08em; }
.size-option.active { color: #fff8e7; background: var(--brown); border-color: var(--brown); box-shadow: 0 12px 25px rgba(51,24,10,.2); }
.size-option.active::after { content: "SELECTED ✓"; margin-top: 5px; color: #d9b75d; font-size: 7px; letter-spacing: .12em; }

.box-panel-header { margin-top: 37px; padding: 0; align-items: center; border: 0; }
.box-panel-header > strong { min-width: 72px; padding: 10px 12px; border-radius: 999px; color: #fff; background: var(--green); text-align: center; font-size: 13px; }
.progress-track { height: 4px; margin: 23px 0 28px; background: rgba(55,26,12,.1); overflow: hidden; }
.progress-track i { width: 0; height: 100%; display: block; background: var(--green); transition: width .3s ease; }
.selected-heading, .flavor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.selected-heading b, .flavor-heading b { font-family: "Cormorant Garamond",Georgia,serif; font-size: 21px; font-weight:600; }
.selected-heading span, .flavor-heading span { color: rgba(55,26,12,.56); font-size: 9px; letter-spacing: .04em; }

.box-items { margin: 15px 0 37px; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.filled-slot, .empty-slot { min-width: 0; min-height: 164px; position: relative; border-radius: 2px; overflow: hidden; }
.filled-slot { display: flex; flex-direction: column; background: #fff; box-shadow: 0 7px 18px rgba(55,26,12,.08); }
.filled-slot img { width: 100%; aspect-ratio: 3/4; display: block; object-fit: contain; background: #fff; }
.filled-slot div { padding: 9px; display: grid; gap: 3px; }
.filled-slot div small { color: var(--green); font-size: 6px; letter-spacing: .12em; }
.filled-slot div strong { font-family: "Cormorant Garamond",Georgia,serif; font-size: 14px; line-height: 1.08; font-weight:600; }
.filled-slot > button {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 6px;
  right: 6px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(43,21,12,.9);
  cursor: pointer;
}
.empty-slot { display: grid; place-content: center; justify-items: center; gap: 7px; border: 1px dashed rgba(55,26,12,.24); color: rgba(55,26,12,.4); background: rgba(255,255,255,.18); }
.empty-slot span { font-size: 23px; font-weight: 300; }
.empty-slot small { font-size: 7px; letter-spacing: .12em; }
.size-required { min-height: 118px; padding: 22px; grid-column: 1/-1; display: flex; align-items: center; justify-content: center; gap: 15px; border: 1px dashed rgba(55,26,12,.22); border-radius: var(--radius-card); color: rgba(55,26,12,.62); background: rgba(255,255,255,.16); text-align: left; }
.size-required > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(55,26,12,.22); border-radius: 50%; color: var(--green); font-size: 10px; font-weight: 600; }
.size-required div { display: grid; gap: 4px; }
.size-required strong { font-family: "Cormorant Garamond",Georgia,serif; font-size: 21px; font-weight:600; }
.size-required small { font-size: 8px; }

.flavor-heading { padding-top: 27px; border-top: 1px solid rgba(55,26,12,.14); }
.picker { margin-top: 15px; padding: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; border: 0; }
.flavor-option {
  min-width: 0;
  min-height: 106px;
  padding: 9px 11px 9px 8px;
  display: grid;
  grid-template-columns: 67px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 2px;
  color: var(--ink);
  background: rgba(255,255,255,.68);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(55,26,12,.08);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.flavor-option:hover:not(:disabled) { transform: translateY(-2px); background: #fff; box-shadow: 0 9px 20px rgba(55,26,12,.1); }
.flavor-option:active:not(:disabled) { transform: scale(.985); }
.flavor-option:disabled { opacity: .44; cursor: not-allowed; }
.flavor-option.sold-out { opacity: .58; }
.flavor-option img { width: 67px; height: 88px; object-fit: contain; background: #fff; }
.flavor-copy { min-width: 0; display: grid; gap: 6px; }
.flavor-copy strong { font-family: "Cormorant Garamond",Georgia,serif; font-size: 18px; font-weight:600; line-height: 1.08; }
.flavor-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; opacity: .58; }
.flavor-price { display: grid; justify-items: end; gap: 9px; }
.flavor-price b { font-size: 9px; white-space: nowrap; }
.flavor-price i { min-width: 55px; padding: 9px 8px; border-radius: 999px; color: #fff; background: var(--brown); text-align: center; font-size: 8px; font-style: normal; white-space: nowrap; }

.summary-card { padding: 32px 27px; border: 0; color: #fff6e3; background: var(--brown); box-shadow: 0 22px 55px rgba(55,26,12,.16); }
.summary-card .eyebrow { color: #d9b75d; }
.summary-card h3 { border-color: rgba(255,255,255,.13); }
.summary-box { border-color: rgba(255,255,255,.13); }
.summary-box-header b { color: #e1c573; font-size: 12px; }
.summary-status { margin: -3px 0 8px; color: #d7b75f; font-size: 8px; letter-spacing: .08em; }
.summary-status.complete { color: #94bf6d; }
.summary-box ul { color: #fff6e3; opacity: .66; }
.total-row { border-top: 1px solid rgba(255,255,255,.13); }
.summary-card .primary-button { color: var(--brown); background: #e8cb84; }
.summary-card .primary-button:disabled { color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); }

@media (max-width: 900px) {
  .build-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; margin-top: 18px; }
}

@media (max-width: 767px) {
  .builder { padding: 76px 12px 88px; }
  .box-tabs-wrap { margin-top: 44px; }
  .box-tabs { max-width: 100%; }
  .box-tab { min-width: 106px; }
  .new-box { min-height: 44px; }
  .box-panel { padding: 25px 14px 20px; }
  .size-step { padding-bottom: 29px; }
  .step-heading { gap: 11px; }
  .step-heading > span { flex-basis: 34px; width: 34px; height: 34px; }
  .step-heading h3 { font-size: 29px; }
  .size-options { margin-right: -14px; grid-auto-columns: 108px; }
  .size-option { min-height: 110px; }
  .box-panel-header { margin-top: 29px; }
  .box-panel-header > strong { min-width: 62px; }
  .progress-track { margin: 19px 0 24px; }
  .box-items { margin-bottom: 30px; gap: 6px; }
  .filled-slot, .empty-slot { min-height: 128px; }
  .filled-slot div { padding: 6px; }
  .filled-slot div strong { font-size: 9px; }
  .filled-slot > button { width: 25px; height: 25px; top: 4px; right: 4px; }
  .picker { grid-template-columns: 1fr; gap: 8px; }
  .flavor-option { min-height: 100px; grid-template-columns: 63px minmax(0,1fr) auto; }
  .flavor-option img { width: 63px; height: 82px; }
  .flavor-copy strong { font-size: 16px; }
  .flavor-copy small { max-width: 135px; }
  .summary-card { padding: 28px 20px; }
}

@media (max-width: 359px) {
  .box-panel { padding-inline: 10px; }
  .filled-slot, .empty-slot { min-height: 118px; }
  .flavor-option { grid-template-columns: 57px minmax(0,1fr) auto; gap: 8px; padding-inline: 7px; }
  .flavor-option img { width: 57px; height: 76px; }
  .flavor-copy strong { font-size: 14px; }
  .flavor-copy small { max-width: 105px; }
  .flavor-price b { font-size: 8px; }
  .flavor-price i { min-width: 48px; padding-inline: 6px; }
}

/* Storefront usability polish */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--green);
}

.box-tab-wrap {
  min-height: 52px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  box-shadow: inset 0 0 0 1px rgba(53,25,11,.1);
}
.box-tab-wrap .box-tab { min-width: 100px; background: transparent; box-shadow: none; }
.box-tab-wrap.active { color: #fff8e7; background: var(--brown); box-shadow: 0 8px 22px rgba(49,24,11,.18); }
.box-tab-wrap.active .box-tab { color: inherit; }
.box-tab-wrap .remove-box { width: 38px; border-left-color: rgba(53,25,11,.12); }
.box-tab-wrap.active .remove-box { border-left-color: rgba(255,255,255,.17); }

.summary-title-row { border-color: rgba(255,255,255,.13); }
.summary-title-row > button { color: #fff6e3; }
.summary-totals { color: rgba(255,246,227,.72); }
.summary-totals strong { color: #fff6e3; }
.summary-totals .total-row { color: #fff6e3; }
.summary-totals .total-row strong { color: #e8cb84; }

@media (max-width: 767px) {
  .box-tab-wrap { flex: 0 0 auto; min-height: 44px; }
  .box-tab-wrap .box-tab { min-width: 88px; min-height: 44px; }
  .box-tab-wrap .remove-box { width: 36px; min-height: 44px; }
  .product-action { min-height: 52px; }
}

/* Consistent premium corner system */
.product-visual { border-radius: var(--radius-panel); }
.product-price { border-radius: var(--radius-control); }
.primary-button, .whatsapp-button { border-radius: var(--radius-control); }
.box-panel, .summary-card { border-radius: var(--radius-panel); }
.size-option, .filled-slot, .empty-slot, .flavor-option { border-radius: var(--radius-card); }
.filled-slot img { border-radius: var(--radius-card) var(--radius-card) 0 0; }
input, textarea, select { border-radius: var(--radius-control); }
.toast { border-radius: 999px; }

/* Clear cart label */
.cart-pill { padding: 4px 5px 4px 12px; border-radius: 999px; background: rgba(20,8,3,.32); backdrop-filter: blur(8px); }
.cart-pill b { min-width: auto; padding-inline: 11px; white-space: nowrap; font-size: 10px; letter-spacing: .03em; }

@media (max-width: 560px) {
  .cart-pill { gap: 7px; padding-left: 10px; font-size: 9px; }
  .cart-pill span { display: inline; }
  .cart-pill b { min-width: auto; height: 31px; padding-inline: 9px; font-size: 9px; }
}

/* Dedicated order review */
.cart-page .site-header {
  position: sticky;
  top: 0;
  color: #fff;
  background: rgba(43,21,12,.96);
  backdrop-filter: blur(14px);
}
.cart-main { min-height: 100vh; padding: 64px clamp(18px,5vw,76px) 110px; background: #efd999; }
.cart-heading { max-width: 720px; margin: 0 auto 55px; text-align: center; }
.cart-heading h1 { margin: 0 0 14px; font-size: clamp(48px,7vw,82px); line-height: 1; }
.cart-heading > p:last-child { opacity: .68; }
.cart-heading .back-link { margin-bottom: 34px; display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.cart-layout { max-width: 1180px; margin: auto; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(310px,.65fr); gap: 20px; align-items: start; }
.cart-boxes { display: grid; gap: 18px; }
.cart-box-card { overflow: hidden; border-radius: var(--radius-panel); background: #f8e9c1; box-shadow: 0 18px 45px rgba(66,34,13,.1); }
.cart-box-card > header { padding: 23px 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(55,26,12,.12); }
.cart-box-card > header p { margin: 0 0 5px; color: var(--green); font-size: 8px; font-weight: 600; letter-spacing: .18em; }
.cart-box-card > header h2 { margin: 0; font-size: clamp(25px,3vw,35px); }
.cart-box-card > header > div:last-child { display: grid; justify-items: end; gap: 7px; white-space: nowrap; }
.cart-box-card > header > div:last-child > strong { font-size: 13px; }
.cart-box-status { color: #a05d31; font-size: 8px; letter-spacing: .07em; }
.cart-box-status.ready { color: #4a9928; }
.cart-product-list { display: grid; }
.cart-product { min-width: 0; padding: 15px 24px; display: grid; grid-template-columns: 94px minmax(0,1fr) auto; gap: 20px; align-items: center; border-bottom: 1px solid rgba(55,26,12,.1); background: rgba(255,255,255,.28); }
.cart-product img { width: 94px; height: 122px; object-fit: contain; border-radius: var(--radius-control); background: #fff; }
.cart-product div { min-width: 0; }
.cart-product small { color: var(--green); font-size: 7px; font-weight: 600; letter-spacing: .14em; }
.cart-product h3 { margin: 5px 0 7px; font-size: clamp(22px,2.5vw,31px); }
.cart-product p { margin: 0; font-size: 9px; opacity: .58; }
.cart-product div > span { margin-top: 8px; display: block; color: #9b5a30; font-size: 8px; }
.cart-product.unavailable { background: rgba(163,61,43,.06); }
.cart-product.unavailable div > span { color: #8d2f22; font-weight: 600; }
.stock-warning { margin-bottom: 14px; padding: 15px 17px; display: grid; gap: 4px; border: 1px solid rgba(141,47,34,.24); border-radius: var(--radius-card); background: #f8dfce; color: #672218; }
.stock-warning strong { font-size: 12px; }
.stock-warning span { font-size: 10px; line-height: 1.5; }
.cart-product > strong { min-width: 37px; font-size: 12px; }
.cart-edit { min-height: 51px; padding: 0 26px; display: flex; align-items: center; justify-content: flex-end; color: var(--green); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cart-total-card { padding: 31px 27px; position: sticky; top: 92px; border-radius: var(--radius-panel); color: #fff6e3; background: var(--brown); box-shadow: 0 22px 55px rgba(55,26,12,.16); }
.cart-total-card .eyebrow { margin-bottom: 8px; color: #d9b75d; }
.cart-total-card h2 { margin: 0 0 25px; padding-bottom: 21px; border-bottom: 1px solid rgba(255,255,255,.13); font-size: 32px; }
.cart-price-lines { margin-bottom: 23px; display: grid; gap: 13px; }
.cart-price-lines > div { display: flex; justify-content: space-between; gap: 15px; font-size: 11px; color: rgba(255,246,227,.7); }
.cart-price-lines strong { color: #fff6e3; }
.discount-total-line { color: #dfc27c !important; }
.discount-total-line strong { color: #dfc27c !important; }
.discount-total-line button { margin-left: 7px; padding: 0; border: 0; color: inherit; background: none; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.discount-form { margin: 0 0 22px; padding: 17px 0 20px; border-top: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.discount-form label { margin-bottom: 8px; display: block; color: rgba(255,246,227,.72); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.discount-form > div { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.discount-form input { width: 100%; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid rgba(255,255,255,.2); border-right: 0; border-radius: var(--radius-control) 0 0 var(--radius-control); color: #fff6e3; background: rgba(255,255,255,.08); font-size: 16px; text-transform: uppercase; outline: none; }
.discount-form input:focus { border-color: #dfc27c; }
.discount-form button { min-width: 72px; border: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; color: var(--brown); background: #dfc27c; font-size: 10px; font-weight: 600; cursor: pointer; }
.discount-form button:disabled { opacity: .55; cursor: wait; }
.discount-form p { min-height: 15px; margin: 8px 0 0; color: rgba(255,246,227,.68); font-size: 9px; line-height: 1.5; }
.discount-form p.success { color: #a9db8e; }
.discount-form p.error { color: #ffb9a9; }
.cart-price-lines .cart-grand-total { margin-top: 6px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.13); color: #fff6e3; font-size: 18px; }
.cart-grand-total strong { color: #e8cb84; }
.cart-total-card .primary-button { color: var(--brown); background: #e8cb84; }
.cart-total-card .primary-button:disabled { color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); cursor: not-allowed; }
.edit-order-link { padding: 17px 0 2px; display: block; text-align: center; font-size: 9px; opacity: .6; }
.cart-empty { padding: 65px 30px; border-radius: var(--radius-panel); background: #f8e9c1; text-align: center; }
.cart-empty h2 { margin: 0 0 12px; font-size: clamp(34px,5vw,53px); }
.cart-empty > p:not(.eyebrow) { margin-bottom: 27px; opacity: .65; }
.cart-empty .primary-button { margin: auto; }

/* Make selected bags readable at every box size */
.box-items[data-capacity="1"] { grid-template-columns: minmax(170px,220px); }
.box-items[data-capacity="2"] { grid-template-columns: repeat(2,minmax(150px,220px)); }
.box-items[data-capacity="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
.box-items[data-capacity="4"] { grid-template-columns: repeat(4,minmax(0,1fr)); }

@media (max-width: 800px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-total-card { position: static; }
}

@media (max-width: 767px) {
  .cart-main { padding: 35px 12px 100px; }
  .cart-heading { margin-bottom: 32px; padding-inline: 10px; }
  .cart-heading .back-link { margin-bottom: 24px; }
  .cart-box-card > header { padding: 20px 17px; }
  .cart-box-card > header h2 { font-size: 25px; }
  .cart-product { padding: 12px 15px; grid-template-columns: 78px minmax(0,1fr) auto; gap: 13px; }
  .cart-product img { width: 78px; height: 104px; }
  .cart-product h3 { font-size: 22px; }
  .cart-edit { padding-inline: 18px; }
  .cart-total-card { padding: 27px 20px; }

  .box-items,
  .box-items[data-capacity="1"],
  .box-items[data-capacity="2"],
  .box-items[data-capacity="3"],
  .box-items[data-capacity="4"] { grid-template-columns: 1fr; }
  .filled-slot { min-height: 108px; display: grid; grid-template-columns: 82px minmax(0,1fr); align-items: center; }
  .filled-slot img { width: 82px; height: 108px; aspect-ratio: auto; border-radius: var(--radius-card) 0 0 var(--radius-card); }
  .filled-slot div { padding: 13px; }
  .filled-slot div strong { font-size: 16px; }
  .empty-slot { min-height: 76px; }
}

/* Brand-aligned color refinement */
:root {
  --ink: #2a160d;
  --brown: #24140d;
  --gold: #b88732;
  --green: #4e5826;
  --white: #fff9ee;
}

.builder, .collection-cta { background: #e5cc91; }
.box-panel { background: #f4e6c3; }
.cart-main { background: #f0ddb0; }
.cart-box-card, .cart-empty { background: #f7e9c7; }
.product-info > p, .bag-label small, .new-box, .cart-edit { color: var(--green); }
.cart-box-status.ready { color: var(--green); }
.summary-status.complete { color: #bdca92; }
.progress-track i, .box-panel-header > strong { background: var(--green); }
.summary-card .eyebrow, .cart-total-card .eyebrow { color: #d8b76c; }
.summary-card .primary-button, .cart-total-card .primary-button { background: #dfc27c; }

/* Readable editorial typography */
.intro h2,
.product-info h3,
.collection-cta h2,
.builder-page .builder-intro h1,
.builder-page .step-heading h2,
.selected-heading b,
.flavor-heading b,
.filled-slot div strong,
.flavor-copy strong,
.summary-card h2,
.summary-card h3,
.summary-box-header strong,
.story h2,
.cart-heading h1,
.cart-box-card > header h2,
.cart-product h3,
.cart-total-card h2,
.cart-empty h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: -.02em;
}

.product-info h3 { font-size: clamp(32px,3.2vw,46px); line-height: 1.06; }
.meta { gap: 11px; font-size: 13px; line-height: 1.35; }
.meta span { font-size: 9px; font-weight: 500; letter-spacing: .1em; opacity: .72; }
.meta b { font-weight: 600; }
.product-info > p { font-size: 11px; font-weight: 600; }
.product-action { font-size: 11px; }
.step-heading p { font-size: 9px; }
.selected-heading b, .flavor-heading b { font-size: 23px; }
.selected-heading span, .flavor-heading span { font-size: 10px; opacity: .82; }
.flavor-copy strong { font-size: 18px; line-height: 1.08; }
.flavor-copy small { font-size: 9px; line-height: 1.35; opacity: .7; }
.flavor-price b { font-size: 10px; }
.summary-box ul { font-size: 13px; opacity: .78; }
.summary-status { font-size: 9px; }
.cart-product p { font-size: 10px; line-height: 1.45; opacity: .7; }
.cart-product small, .cart-product div > span { font-size: 9px; }

@media (max-width: 767px) {
  .product-info h3 { font-size: 36px; }
  .meta { grid-template-columns: 78px minmax(0,1fr); font-size: 13px; }
  .meta span { font-size: 9px; }
  .filled-slot div strong { font-size: 18px; }
  .flavor-copy strong { font-size: 19px; }
  .flavor-copy small { font-size: 9px; }
  .cart-product h3 { font-size: 25px; }
}

/* Clear collection item grouping */
.product-grid { gap: 34px; }
.product-card {
  overflow: hidden;
  border: 1px solid rgba(42,22,13,.1);
  border-radius: var(--radius-panel);
  background: rgba(255,249,238,.72);
  box-shadow: 0 16px 42px rgba(66,34,13,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 22px 52px rgba(66,34,13,.12); }
.product-visual { border-radius: 0; border-bottom: 1px solid rgba(42,22,13,.08); }
.product-info { padding: 27px 28px 20px; }
.product-action { margin-top: 24px; }

@media (max-width: 767px) {
  .product-grid { gap: 24px; }
  .product-card { border-radius: 18px; }
  .product-info { padding: 24px 20px 16px; }
  .product-action { margin-top: 22px; }
}

/* Direct order editing */
.cart-box-column { min-width: 0; display: grid; gap: 16px; }
.cart-add-box {
  min-height: 56px;
  padding: 0 22px;
  border: 1px dashed rgba(42,22,13,.3);
  border-radius: var(--radius-card);
  color: var(--green);
  background: rgba(255,249,238,.32);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cart-add-box:hover:not(:disabled) { background: rgba(255,249,238,.62); }
.cart-add-box:disabled { opacity: .45; cursor: not-allowed; }
.cart-remove-box { padding: 4px 0; border: 0; color: #8a4d2d; background: transparent; font-size: 8px; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-quantity { display: flex; align-items: center; gap: 8px; }
.cart-quantity button { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(42,22,13,.17); border-radius: 50%; color: var(--ink); background: rgba(255,249,238,.7); cursor: pointer; }
.cart-quantity button:hover:not(:disabled) { color: #fff; background: var(--brown); }
.cart-quantity button:disabled { opacity: .28; cursor: not-allowed; }
.cart-quantity strong { min-width: 15px; text-align: center; font-size: 12px; }
.cart-mobile-bar { display: none; }

@media (max-width: 767px) {
  .cart-page { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .cart-product { grid-template-columns: 76px minmax(0,1fr); }
  .cart-product img { grid-row: 1; }
  .cart-product > div:not(.cart-quantity) { grid-row: 1; }
  .cart-quantity { grid-column: 1/-1; padding-top: 2px; justify-content: flex-end; }
  .cart-quantity button { width: 42px; height: 42px; }
  .cart-remove-box { min-height: 30px; }
  .cart-mobile-bar { display: flex; }
  .cart-mobile-bar button:disabled { opacity: .48; cursor: not-allowed; }
}

/* Dedicated delivery details */
.checkout-page .site-header {
  position: sticky;
  top: 0;
  color: #fff;
  background: rgba(36,20,13,.96);
  backdrop-filter: blur(14px);
}
.checkout-main { min-height: 100vh; padding: 58px clamp(18px,5vw,76px) 110px; background: #f0ddb0; }
.checkout-heading { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.checkout-heading .back-link { margin-bottom: 30px; display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.checkout-heading h1 { margin: 0 0 14px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(46px,6.5vw,76px); font-weight: 600; letter-spacing: -.03em; line-height: .98; }
.checkout-heading > p:last-child { margin-inline: auto; max-width: 590px; font-size: 13px; line-height: 1.65; opacity: .68; }
.order-progress { max-width: 760px; margin: 0 auto 40px; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); list-style: none; }
.order-progress li { position: relative; display: flex; align-items: center; gap: 10px; }
.order-progress li:not(:last-child)::after { content: ""; height: 1px; position: absolute; left: 48px; right: 12px; top: 19px; background: rgba(42,22,13,.2); }
.order-progress li > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid rgba(42,22,13,.24); border-radius: 50%; background: #f0ddb0; font-size: 10px; font-weight: 600; z-index: 1; }
.order-progress li > div { display: grid; gap: 2px; }
.order-progress small { color: rgba(42,22,13,.48); font-size: 7px; letter-spacing: .13em; }
.order-progress strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; line-height: 1; }
.order-progress .complete > span { border-color: var(--green); color: #fff; background: var(--green); }
.order-progress .complete > span::before { content: "✓"; }
.order-progress .complete > span { font-size: 0; }
.order-progress .complete > span::before { font-size: 12px; }
.order-progress .current > span { border-color: var(--brown); color: #fff; background: var(--brown); }
.builder-page .order-progress { margin-top: 38px; margin-bottom: -14px; }
.cart-page .order-progress { margin-top: -18px; margin-bottom: 38px; }
.order-contents { max-width: 1100px; margin: 0 auto 20px; padding: 25px 27px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(190px,.55fr) minmax(0,1.45fr); align-items: center; gap: 28px; border-radius: var(--radius-panel); color: #fff6e3; background: var(--brown); box-shadow: 0 18px 45px rgba(66,34,13,.12); }
.order-contents::before { content: ""; width: 280px; height: 280px; position: absolute; right: -115px; top: -150px; border: 1px solid rgba(223,194,124,.16); border-radius: 50%; box-shadow: 0 0 0 33px rgba(223,194,124,.035), 0 0 0 68px rgba(223,194,124,.025); pointer-events: none; }
.order-contents-heading { position: relative; z-index: 1; }
.order-contents-heading p { margin: 0 0 5px; color: #d8b76c; font-size: 7px; font-weight: 600; letter-spacing: .16em; }
.order-contents-heading h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 31px; font-weight: 600; line-height: 1; }
.contents-pattern { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.contents-pattern article { min-width: 0; padding: 5px 18px; display: flex; align-items: center; gap: 12px; border-left: 1px solid rgba(255,255,255,.13); }
.contents-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid rgba(223,194,124,.4); border-radius: 50%; color: #dfc27c; background: rgba(255,255,255,.04); }
.contents-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.contents-pattern article > div { min-width: 0; display: grid; gap: 3px; }
.contents-pattern strong { color: #fff8e8; font-size: 12px; white-space: nowrap; }
.contents-pattern small { color: rgba(255,246,227,.62); font-size: 8px; line-height: 1.35; }
.checkout-layout { max-width: 1100px; margin: auto; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 20px; align-items: start; }
.delivery-card { padding: clamp(25px,4vw,42px); border-radius: var(--radius-panel); background: #f7e9c7; box-shadow: 0 18px 45px rgba(66,34,13,.1); }
.delivery-card-heading { margin-bottom: 28px; padding-bottom: 24px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid rgba(42,22,13,.12); }
.delivery-card-heading > span { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px solid rgba(42,22,13,.2); border-radius: 50%; color: var(--green); font-size: 10px; font-weight: 600; }
.delivery-card-heading p { margin: 0 0 3px; color: var(--green); font-size: 8px; font-weight: 600; letter-spacing: .16em; }
.delivery-card-heading h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 600; line-height: 1; }
.delivery-card .form-grid { gap: 18px 16px; }
.delivery-card .form-grid label { display: block; color: rgba(42,22,13,.78); font-size: 10px; font-weight: 600; letter-spacing: .05em; }
.delivery-card .form-grid label > small { float: right; font-size: 8px; font-weight: 500; opacity: .52; }
.delivery-card input, .delivery-card textarea, .delivery-card select { min-height: 52px; border-color: rgba(42,22,13,.16); background: #fffaf0; font-size: 16px; }
.delivery-card textarea { resize: vertical; line-height: 1.5; }
.delivery-card input::placeholder, .delivery-card textarea::placeholder { color: rgba(42,22,13,.38); }
.delivery-card input[aria-invalid="true"], .delivery-card textarea[aria-invalid="true"], .delivery-card select[aria-invalid="true"] { border-color: #a33d2b; box-shadow: 0 0 0 2px rgba(163,61,43,.1); }
.field-error { min-height: 15px; margin-top: 5px; display: block; color: #8f3022; font-size: 9px; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.field-error:empty { min-height: 0; margin-top: 0; }
.form-status { min-height: 17px; margin: 17px 0 -10px; color: #8f3022; text-align: center; font-size: 10px; font-weight: 600; line-height: 1.4; }
.delivery-card .whatsapp-button { min-height: 57px; margin-top: 27px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 12px; font-weight: 600; }
.delivery-card .whatsapp-button span { font-size: 18px; }
.delivery-card .whatsapp-button:disabled { cursor: wait; opacity: .72; }
.checkout-summary { padding: 31px 27px; position: sticky; top: 92px; border-radius: var(--radius-panel); color: #fff6e3; background: var(--brown); box-shadow: 0 22px 55px rgba(55,26,12,.16); }
.checkout-summary .eyebrow { margin-bottom: 8px; color: #d8b76c; }
.checkout-summary > h2 { margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.13); font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; font-weight: 600; }
.checkout-box { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.checkout-box > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
.checkout-box > div span { grid-column: 1/-1; color: #d8b76c; font-size: 7px; font-weight: 600; letter-spacing: .14em; }
.checkout-box > div strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; font-weight: 600; }
.checkout-box > div b { font-size: 10px; }
.checkout-box ul { margin: 9px 0 0; padding: 0; display: grid; gap: 5px; list-style: none; color: rgba(255,246,227,.68); font-size: 10px; }
.checkout-price-lines { display: grid; gap: 13px; }
.checkout-price-lines > div { display: flex; justify-content: space-between; gap: 15px; color: rgba(255,246,227,.7); font-size: 11px; }
.checkout-price-lines strong { color: #fff6e3; }
.checkout-price-lines .checkout-grand-total { margin-top: 6px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.13); color: #fff6e3; font-size: 18px; }
.checkout-grand-total strong { color: #dfc27c; }
.checkout-edit { padding: 19px 0 1px; display: block; text-align: center; font-size: 9px; opacity: .62; }
.checkout-mobile-bar { display: none; }

@media (max-width: 800px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
}

@media (max-width: 767px) {
  .checkout-page { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .checkout-main { padding: 34px 12px 100px; }
  .checkout-heading { margin-bottom: 27px; padding-inline: 8px; }
  .checkout-heading .back-link { margin-bottom: 23px; }
  .checkout-heading h1 { font-size: clamp(42px,12.5vw,54px); }
  .checkout-heading > p:last-child { padding-inline: 5px; font-size: 12px; }
  .order-progress { margin-bottom: 28px; padding-inline: 4px; }
  .order-progress li { gap: 7px; }
  .order-progress li:not(:last-child)::after { left: 35px; right: 7px; top: 16px; }
  .order-progress li > span { width: 32px; height: 32px; flex-basis: 32px; }
  .order-progress strong { font-size: 15px; }
  .order-progress small { font-size: 6px; }
  .builder-page .order-progress { margin: 28px 5px -8px; }
  .cart-page .order-progress { margin: -5px 5px 28px; }
  .order-contents { margin-bottom: 12px; padding: 22px 16px 17px; display: block; }
  .order-contents-heading { margin-bottom: 17px; text-align: center; }
  .order-contents-heading h2 { font-size: 30px; }
  .contents-pattern { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .contents-pattern article { padding: 5px 8px; flex-direction: column; gap: 8px; border-left: 0; border-right: 1px solid rgba(255,255,255,.13); text-align: center; }
  .contents-pattern article:last-child { border-right: 0; }
  .contents-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .contents-pattern strong { font-size: 11px; }
  .contents-pattern small { font-size: 7px; }
  .delivery-card { padding: 25px 16px 22px; }
  .delivery-card-heading { margin-bottom: 23px; padding-bottom: 20px; }
  .delivery-card-heading h2 { font-size: 31px; }
  .delivery-card .form-grid { gap: 15px; grid-template-columns: 1fr; }
  .delivery-card .form-grid .wide { grid-column: auto; }
  .delivery-card input, .delivery-card textarea, .delivery-card select { min-height: 52px; padding: 14px 12px; font-size: 16px; }
  .checkout-summary { padding: 27px 20px; }
  .checkout-mobile-bar { display: flex; }
}

@media (max-width: 359px) {
  .order-progress li > div { display: none; }
  .order-progress li:not(:last-child)::after { left: 35px; right: 3px; }
  .order-progress li { justify-content: flex-start; }
  .order-progress li:last-child { justify-content: flex-end; }
  .order-progress li:nth-child(2) { justify-content: center; }
}

/* Delivery and replacement policy */
.policy-page .site-header { position: sticky; top: 0; color: #fff; background: rgba(36,20,13,.96); backdrop-filter: blur(14px); }
.policy-main { min-height: calc(100vh - 84px); padding: 62px clamp(18px,6vw,90px) 100px; background: #f0ddb0; }
.policy-heading { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.policy-heading .back-link { margin-bottom: 31px; display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.policy-heading h1 { margin: 0 0 15px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(50px,7vw,80px); font-weight: 600; letter-spacing: -.035em; line-height: .96; }
.policy-heading > p:last-child { margin: 0; font-size: 13px; opacity: .65; }
.policy-grid { max-width: 1020px; margin: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.policy-card { min-width: 0; min-height: 390px; padding: clamp(29px,4vw,44px); position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--radius-panel); background: #f7e9c7; box-shadow: 0 18px 45px rgba(66,34,13,.1); }
.policy-number { margin-bottom: 62px; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(42,22,13,.2); border-radius: 50%; color: var(--green); font-size: 9px; font-weight: 600; }
.policy-card .eyebrow { margin-bottom: 9px; font-size: 8px; }
.policy-card h2 { margin: 0 0 16px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(38px,5vw,55px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.policy-card > p:not(.eyebrow) { max-width: 440px; margin: 0 0 27px; font-size: 12px; line-height: 1.8; opacity: .7; }
.policy-fact { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(42,22,13,.14); font-size: 10px; }
.policy-fact span { opacity: .6; }
.policy-fact strong { font-size: 13px; }
.policy-contact { min-height: 48px; margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(42,22,13,.14); color: var(--green); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.policy-contact span { font-size: 18px; }
.policy-help { max-width: 1020px; margin: 18px auto 0; padding: 30px 35px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-radius: var(--radius-panel); color: #fff6e3; background: var(--brown); }
.policy-help .eyebrow { margin-bottom: 5px; color: #d8b76c; font-size: 8px; }
.policy-help h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; font-weight: 600; }
.policy-help .primary-button { color: var(--brown); background: #dfc27c; }

@media (max-width: 767px) {
  .policy-main { min-height: calc(100vh - 62px); padding: 35px 12px 85px; }
  .policy-heading { margin-bottom: 31px; padding-inline: 8px; }
  .policy-heading .back-link { margin-bottom: 24px; }
  .policy-heading h1 { font-size: clamp(46px,13.5vw,58px); }
  .policy-heading > p:last-child { font-size: 12px; }
  .policy-grid { grid-template-columns: 1fr; gap: 12px; }
  .policy-card { min-height: 0; padding: 27px 20px; }
  .policy-number { margin-bottom: 37px; }
  .policy-card h2 { font-size: 43px; }
  .policy-card > p:not(.eyebrow) { font-size: 12px; }
  .policy-help { margin-top: 12px; padding: 27px 20px; align-items: stretch; flex-direction: column; text-align: center; }
  .policy-help .primary-button { width: 100%; }
}

/* Branded not-found page */
.not-found-page { min-height: 100vh; min-height: 100svh; background: var(--brown); }
.not-found-main { min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); padding: 44px 20px; display: grid; place-items: center; position: relative; isolation: isolate; overflow: hidden; background: url("assets/coffee-hero.webp") center 22% / cover no-repeat; }
.not-found-main::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg,rgba(30,12,6,.92),rgba(30,12,6,.67)); }
.not-found-card { width: min(620px,100%); padding: clamp(31px,6vw,58px); border: 1px solid rgba(239,215,155,.26); border-radius: var(--radius-panel); color: #fff8e8; background: rgba(43,21,12,.82); box-shadow: 0 28px 80px rgba(0,0,0,.3); backdrop-filter: blur(9px); }
.not-found-card > img { width: 92px; height: 92px; margin-bottom: 27px; border-radius: 50%; object-fit: cover; }
.not-found-code { margin: 0 0 15px; color: #e1c477; font-size: 9px; font-weight: 600; letter-spacing: .19em; }
.not-found-card h1 { max-width: 520px; margin: 0; font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(48px,7vw,76px); font-weight: 600; letter-spacing: -.035em; line-height: .94; }
.not-found-card > p:not(.not-found-code) { max-width: 520px; margin: 24px 0 0; color: rgba(255,248,232,.7); font-size: 13px; line-height: 1.75; }
.not-found-actions { margin-top: 33px; display: flex; align-items: center; gap: 18px; }
.not-found-actions .primary-button { color: var(--brown); background: #e8cb84; }
.not-found-actions .primary-button:hover { background: #f0d99d; }
.not-found-secondary { min-height: 52px; padding: 0 8px; display: inline-flex; align-items: center; border-bottom: 1px solid rgba(255,248,232,.42); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.not-found-secondary:hover { color: #e8cb84; border-color: #e8cb84; }

@media (max-width: 560px) {
  .not-found-main { min-height: calc(100svh - 62px); padding: 22px 12px; background-position: 46% top; }
  .not-found-card { padding: 30px 22px 26px; }
  .not-found-card > img { width: 76px; height: 76px; margin-bottom: 23px; }
  .not-found-card h1 { font-size: 49px; }
  .not-found-card > p:not(.not-found-code) { margin-top: 19px; font-size: 12px; }
  .not-found-actions { margin-top: 27px; display: grid; gap: 9px; }
  .not-found-actions .primary-button, .not-found-secondary { width: 100%; }
  .not-found-secondary { justify-content: center; border: 1px solid rgba(255,248,232,.26); border-radius: var(--radius-control); }
}

/* High-legibility order pages */
.cart-page, .checkout-page { font-weight: 500; }
.cart-heading > p:last-child,
.checkout-heading > p:last-child { opacity: .82; }
.cart-heading .back-link,
.checkout-heading .back-link { font-size: 11px; font-weight: 600; opacity: .78; }
.cart-box-card > header p,
.cart-box-status,
.cart-product small,
.cart-product div > span,
.cart-edit,
.cart-remove-box,
.edit-order-link,
.checkout-edit { font-size: 10px; font-weight: 600; }
.cart-product p { font-size: 11px; font-weight: 500; opacity: .78; }
.cart-box-card > header > div:last-child > strong,
.cart-quantity strong { font-weight: 600; }
.cart-price-lines > div,
.checkout-price-lines > div { color: rgba(255,246,227,.84); font-size: 12px; font-weight: 500; }
.cart-price-lines strong,
.checkout-price-lines strong { font-weight: 600; }
.discount-form label { color: rgba(255,246,227,.86); font-size: 10px; font-weight: 600; }
.discount-form button { font-size: 11px; font-weight: 600; }
.discount-form p { font-size: 10px; font-weight: 600; }
.order-progress small { color: rgba(42,22,13,.66); font-size: 8px; font-weight: 600; }
.order-progress strong { font-weight: 600; }
.order-contents-heading p,
.checkout-box > div span { font-size: 8px; font-weight: 600; }
.contents-pattern strong { font-size: 13px; font-weight: 600; }
.contents-pattern small { color: rgba(255,246,227,.78); font-size: 9px; font-weight: 500; }
.delivery-card-heading p { font-size: 9px; font-weight: 600; }
.delivery-card .form-grid label { color: rgba(42,22,13,.9); font-size: 11px; font-weight: 600; }
.delivery-card .form-grid label > small { font-size: 9px; font-weight: 500; opacity: .7; }
.checkout-box > div b { font-size: 11px; font-weight: 600; }
.checkout-box ul { color: rgba(255,246,227,.82); font-size: 11px; font-weight: 500; }
.checkout-page .form-note { font-size: 11px; font-weight: 500; opacity: .72; }

@media (max-width: 767px) {
  .cart-product p { font-size: 11px; }
  .order-progress small { font-size: 7px; }
  .cart-main, .checkout-main { padding-inline: 10px; }
  .cart-heading, .checkout-heading { padding-inline: 12px; }
  .cart-box-card > header { align-items: flex-start; }
  .cart-box-card > header > div:last-child { min-width: 90px; }
  .cart-product { grid-template-columns: 72px minmax(0,1fr); gap: 12px; }
  .cart-product img { width: 72px; height: 96px; }
  .cart-quantity { padding-top: 8px; }
  .cart-quantity button { width: 44px; height: 44px; }
  .cart-add-box { min-height: 54px; }
  .cart-total-card, .checkout-summary { padding: 25px 18px; border-radius: 18px; }
  .discount-form input, .discount-form button { min-height: 50px; }
  .order-contents { padding: 22px 18px 12px; }
  .contents-pattern { grid-template-columns: 1fr; }
  .contents-pattern article { min-height: 64px; padding: 10px 2px; flex-direction: row; justify-content: flex-start; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); text-align: left; }
  .contents-pattern article:last-child { border-bottom: 0; }
  .contents-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .contents-pattern strong { font-size: 13px; }
  .contents-pattern small { font-size: 10px; }
  .delivery-card { border-radius: 18px; }
  .delivery-card input, .delivery-card textarea, .delivery-card select { width: 100%; font-weight: 500; }
  .checkout-mobile-bar, .cart-mobile-bar { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 380px) {
  .cart-box-card > header { gap: 10px; }
  .cart-box-card > header h2 { font-size: 23px; }
  .cart-box-card > header > div:last-child { min-width: 82px; }
  .cart-total-card, .checkout-summary, .delivery-card { padding-inline: 15px; }
  .order-progress { padding-inline: 0; }
}

.payment-result-page { min-height: 100vh; min-height: 100svh; color: var(--brown); background: #f0ddb0; }
.payment-result-main { min-height: 100vh; min-height: 100svh; padding: 28px 16px; display: grid; place-items: center; }
.payment-result-card { width: min(580px,100%); padding: clamp(30px,7vw,58px); border-radius: var(--radius-panel); text-align: center; background: #f7e9c7; box-shadow: 0 24px 70px rgba(66,34,13,.16); }
.payment-result-card > img { width: 76px; height: 76px; margin-bottom: 23px; border-radius: 50%; object-fit: cover; }
.payment-result-icon { width: 58px; height: 58px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-family: "Montserrat",sans-serif; font-size: 25px; font-weight: 600; }
.payment-result-card .eyebrow { margin-bottom: 9px; color: var(--green); font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.payment-result-card h1 { margin: 0; font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(43px,8vw,63px); font-weight: 600; letter-spacing: -.035em; line-height: .96; }
.payment-result-card > p:not(.eyebrow) { max-width: 440px; margin: 19px auto 0; color: rgba(42,22,13,.76); font-size: 13px; font-weight: 500; line-height: 1.7; }
.payment-result-details { margin: 28px 0 0; padding: 18px 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(42,22,13,.13); border-bottom: 1px solid rgba(42,22,13,.13); }
.payment-result-details[hidden] { display: none; }
.payment-result-details div { display: grid; gap: 5px; }
.payment-result-details div + div { border-left: 1px solid rgba(42,22,13,.13); }
.payment-result-details dt { color: rgba(42,22,13,.6); font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.payment-result-details dd { margin: 0; font-size: 15px; font-weight: 600; }
.payment-result-actions { margin-top: 29px; display: grid; gap: 10px; }
.payment-result-actions .primary-button { width: 100%; min-height: 54px; color: #fff; background: var(--brown); }
.payment-contact { min-height: 50px; display: grid; place-items: center; border: 1px solid rgba(42,22,13,.18); border-radius: var(--radius-control); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.payment-result-page[data-payment-state="error"] .payment-result-icon { background: #963d2e; }

@media (max-width: 480px) {
  .payment-result-main { padding: 12px; }
  .payment-result-card { padding: 30px 20px 24px; border-radius: 18px; }
  .payment-result-card h1 { font-size: 46px; }
  .payment-result-card > p:not(.eyebrow) { font-size: 12px; }
}

@media (max-width: 767px) {
  .order-progress { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .order-progress li { display:grid; grid-template-columns:1fr; justify-items:center; gap:8px; text-align:center; }
  .order-progress li > span { width:36px; height:36px; flex-basis:36px; }
  .order-progress li > div { display:grid; gap:3px; }
  .order-progress li:not(:last-child)::after { left:calc(50% + 22px); right:calc(-50% + 22px); top:18px; }
  .order-progress small { font-size:8px; line-height:1; }
  .order-progress strong { font-size:17px; line-height:1.05; }
}

@media (max-width: 359px) {
  .order-progress li > div { display:grid; }
  .order-progress small { font-size:7px; }
  .order-progress strong { font-size:15px; }
}

/* Site-wide mobile clarity and touch audit */
body {
  font-weight: 500;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
.footer-brand,
.tiers b,
.coffee-thumb,
.item-copy strong,
.summary-box-header strong,
.bag-label b,
.box-tab span,
.size-option strong,
.selected-heading b,
.flavor-heading b,
.filled-slot div strong,
.size-required strong,
.flavor-copy strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
}

.brand strong,
.product-action,
.footer-label,
.filter-heading,
.step-heading p,
.selected-heading span,
.flavor-heading span,
.policy-card .eyebrow,
.not-found-code { font-weight: 700; }

.product-info,
.flavor-copy,
.filled-slot div,
.cart-product > div,
.checkout-box > div { min-width: 0; }

.product-info h3,
.flavor-copy strong,
.filled-slot strong,
.cart-product h3,
.checkout-box li,
.policy-card p,
footer a { overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .brand strong { font-size: 10px; }
  .brand small { font-size: 8px; opacity: .78; }
  .mobile-nav a span { font-size: 9px; }

  .hero-place { font-size: 11px; font-weight: 600; }
  .scroll-cue { font-size: 10px; font-weight: 600; }

  .how-heading > p,
  .filter-heading span,
  .step-heading p,
  .policy-card .eyebrow,
  .policy-help .eyebrow,
  .not-found-code { font-size: 10px; }
  .how-steps li > span { font-size: 10px; }
  .how-steps p { color: rgba(255,246,227,.8); font-size: 12px; }
  .how-includes { color: #ead18d; font-size: 10px; }

  .filter-heading b { font-size: 10px; opacity: .72; }
  .filter-options button { min-height: 46px; font-size: 12px; }
  .product-price { font-size: 13px; font-weight: 600; }
  .product-info > p { font-size: 11px; }
  .meta { grid-template-columns: 82px minmax(0,1fr); font-size: 13px; line-height: 1.45; }
  .meta span { font-size: 10px; font-weight: 600; opacity: .72; }
  .product-action { min-height: 54px; font-size: 12px; }

  .tiers {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(126px,1fr);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
  .tiers::-webkit-scrollbar { display: none; }
  .tiers div { min-width: 0; padding: 16px 10px; scroll-snap-align: start; }
  .tiers span,
  .tiers small { font-size: 10px; opacity: .78; }
  .tiers strong i { font-size: 9px; }
  .pricing-note { font-size: 12px; opacity: .78 !important; }
  .perks { font-size: 13px; }

  .box-tab small { font-size: 10px; opacity: .82; }
  .size-option small,
  .size-option strong i,
  .size-option.active::after { font-size: 9px; opacity: .82; }
  .selected-heading span,
  .flavor-heading span { font-size: 10px; color: rgba(55,26,12,.72); }
  .filled-slot div small,
  .empty-slot small,
  .size-required small { font-size: 9px; }
  .filled-slot div strong { font-size: 11px; }
  .filled-slot > button { width: 40px; height: 40px; top: 5px; right: 5px; }
  .flavor-copy small {
    max-width: none;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-size: 11px;
    line-height: 1.35;
    opacity: .76;
  }
  .flavor-price b { font-size: 11px; }
  .flavor-price i { min-height: 40px; min-width: 62px; display: grid; place-items: center; font-size: 10px; }
  .summary-status { font-size: 10px; }
  .summary-box ul { font-size: 12px; opacity: .82; }
  .secure-note { font-size: 10px; opacity: .72; }

  .policy-heading .back-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 11px; opacity: .78; }
  .policy-heading > p:last-child { font-size: 14px; opacity: .78; }
  .policy-number { font-size: 10px; }
  .policy-card > p:not(.eyebrow) { font-size: 14px; line-height: 1.65; opacity: .8; }
  .policy-fact,
  .policy-contact { min-height: 48px; font-size: 11px; }

  .not-found-code { font-size: 10px; }
  .not-found-card > p:not(.not-found-code) { color: rgba(255,248,232,.82); font-size: 14px; }

  footer { gap: 34px 22px; }
  footer p { font-size: 13px; opacity: .78; line-height: 1.55; }
  .footer-label { font-size: 11px; }
  footer a { min-height: 44px; margin: 3px 0; display: flex; align-items: center; font-size: 14px; opacity: .9; }
  .copyright { font-size: 12px; }
  .toast { max-width: calc(100% - 24px); font-size: 12px; text-align: center; }
}

@media (max-width: 359px) {
  .brand small { display: none; }
  .flavor-option { grid-template-columns: 55px minmax(0,1fr) auto; }
  .flavor-copy strong { font-size: 14px; }
  .flavor-copy small { font-size: 10px; }
}