:root{
  --bg:#D9B79F;
  --surface:#FFF9F5;
  --surface-soft:#E8CEC1;
  --accent:#C99A42;
  --accent-hover:brightness(0.92);
  --text:#342821;
  --muted:#76645A;
  --line:#DDC5B8;
  --shadow:0 10px 24px rgba(78,60,48,.08);
}
*{box-sizing:border-box}
html,body{margin:0;font-family:Manrope,system-ui,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.shell{max-width:1240px;margin:0 auto;padding:24px}
.ticker{width:100%;overflow:hidden;background:#D9B79F;border-bottom:1px solid var(--line);height:36px;display:flex;align-items:center}
.ticker-track{display:flex;gap:28px;white-space:nowrap;will-change:transform;animation:ticker-move 28s linear infinite;padding-left:100%}
.ticker-track span{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text);flex:0 0 auto}
.ticker-track span:nth-child(2n){opacity:.75}
@keyframes ticker-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sticky{position:sticky;top:0;z-index:20;background:#D9B79F;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;max-width:1240px;margin:0 auto;position:relative}
.brand{font-weight:800;letter-spacing:.02em;color:var(--text)}
.brand-tag{position:absolute;left:50%;transform:translateX(-50%);font-weight:800;white-space:nowrap;font-size:1.05rem;letter-spacing:.03em;color:var(--text)}
.nav,.filters{display:flex;gap:10px;flex-wrap:wrap}
.chip,.sorter,.search,.btn,.qty-btn,.ghost{border:1px solid var(--line);background:var(--accent);border-radius:999px}
.chip,.sorter{padding:10px 14px}
.chip.active,.btn.primary{background:var(--accent);color:#2F241E;border-color:var(--accent)}
.btn,.ghost,.qty-btn{padding:12px 16px;font-weight:700;cursor:pointer;color:#2F241E}
.btn:hover,.qty-btn:hover,.ghost:hover,.chip.active:hover,.btn.primary:hover{filter:brightness(0.92);border-color:var(--accent);color:#2F241E}
.btn.secondary,.ghost{background:transparent}
.icon-btn{min-width:48px}
.hero{padding:28px 0 14px}
.hero h1{font-size:clamp(2.7rem,7vw,5.9rem);line-height:.88;margin:0 0 24px;max-width:12ch;text-wrap:balance;color:var(--text)}
.hero p{max-width:46rem;color:var(--muted);font-size:1.08rem;margin-top:18px;line-height:1.68}
.hero .intro-label{display:inline-block;font-size:.86rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:10px}
.panel{background:var(--bg);border:1px solid var(--line);border-radius:28px;padding:20px}
.control-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin:22px 0}
.search{width:100%;padding:16px 18px;font-size:1rem;background:var(--accent);color:#2F241E}
.filters{overflow:auto;padding-bottom:4px}
.sorter{padding:14px 16px;background:var(--accent);color:#2F241E}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.card,.summary,.checkout,.success{background:var(--bg);border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:var(--shadow)}
.card{display:flex;flex-direction:column;min-height:100%}
.card img{aspect-ratio:1/1;object-fit:contain;border-radius:18px;background:var(--bg);max-height:290px}
.status{display:inline-flex;align-self:flex-start;background:var(--surface-soft);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:.82rem;font-weight:800}
.card h3,.product h1,.checkout h1,.success h1{margin:12px 0 8px;font-size:1.35rem;line-height:1.08;color:var(--text)}
.meta,.small{color:var(--muted);font-size:1rem;line-height:1.55}
.price{font-size:1.3rem;font-weight:800;margin:10px 0;color:var(--accent)}
.card-actions,.product-actions,.cart-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.product{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.product-image{padding:18px;background:var(--surface-soft);border-radius:30px;border:1px solid var(--line)}
.product-image img{aspect-ratio:1/1;object-fit:contain;max-height:430px}
.product-close-wrap{display:flex;justify-content:flex-start;margin-top:14px}
.product .panel p,.product .panel li{font-size:1rem;line-height:1.7}
.product h3{margin:20px 0 10px;color:var(--text)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.qty-btn{border:none;border-radius:0;background:transparent;min-width:44px}
.qty span{min-width:42px;text-align:center;font-weight:800}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.cart-item,.order-item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.cart-item img,.order-item img{width:72px;height:72px;object-fit:contain;border-radius:14px;background:#fbf4ef}
.checkout form{display:grid;gap:14px}
.field{display:grid;gap:6px}
label{font-weight:700;color:var(--text)}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--accent);color:#2F241E}
textarea{min-height:120px;resize:vertical}
.error{color:var(--accent-hover);font-size:.92rem}
.footer{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding:22px 0;color:var(--muted)}
.empty{padding:42px;text-align:center}
.sr-only{position:absolute;left:-9999px}
@media (max-width: 1080px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}.product,.grid-2{grid-template-columns:1fr}}
@media (max-width: 720px){.ticker{height:32px}.shell,.topbar{padding-left:14px;padding-right:14px}.control-row{grid-template-columns:1fr}.products{grid-template-columns:1fr}.hero h1{max-width:none}.cart-item,.order-item{grid-template-columns:64px 1fr}.cart-item .cart-qty,.cart-item .cart-price,.order-item .cart-price{grid-column:2 / -1}}

/* Mobile header: prevent brand names from overlapping */
@media (max-width: 720px){
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 12px;
    align-items:center;
    padding-top:12px;
    padding-bottom:10px;
  }
  .brand{
    min-width:0;
    font-size:.86rem;
    line-height:1.2;
    white-space:nowrap;
  }
  .nav{
    justify-self:end;
    flex-wrap:nowrap;
    font-size:.86rem;
    white-space:nowrap;
  }
  .brand-tag{
    position:static;
    transform:none;
    grid-column:1 / -1;
    width:100%;
    text-align:center;
    font-size:.86rem;
    line-height:1.2;
    white-space:nowrap;
  }
}