/* Mesta online store — customer-facing.
   Layout: white header with logo + cart; maroon welcome band; sticky search/categories; photo product grid by category; cart drawer with checkout. */
.shop{min-height:100vh;display:flex;flex-direction:column;background:#fff}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}

/* header */
.s-head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.s-head .wrap{display:flex;align-items:center;gap:16px;padding-block:10px}
.s-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.s-brand img{width:52px;height:52px;object-fit:contain;flex:none}
.s-brand b{display:block;font-family:var(--f-display);font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--maroon);white-space:nowrap}
.s-brand small{display:block;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.s-call{margin-left:auto;font-weight:600;font-size:14px;color:var(--ink-2);white-space:nowrap}
.s-call b{font-family:var(--f-mono);color:var(--maroon)}
.cart-btn{display:inline-flex;align-items:center;gap:10px;background:var(--maroon);color:#fff;border:0;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer;white-space:nowrap}
.cart-btn:hover{background:var(--maroon-600)}
.cart-btn .ic{width:20px;height:20px}
.cart-btn em{font-style:normal;background:#fff;color:var(--maroon);border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;font-size:13px;padding:0 7px}

/* welcome band */
.hero{background:linear-gradient(120deg,var(--maroon-900) 0%,var(--maroon-800) 38%,var(--maroon) 100%);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -120px -160px auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 65%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:center;padding-block:48px 52px}
.hero h1{font-family:var(--f-display);font-weight:800;font-size:clamp(32px,4.6vw,54px);line-height:1.04;letter-spacing:-.02em;max-width:16ch}
.hero p{margin-top:14px;font-size:17px;opacity:.88;max-width:48ch}
.perks{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.perk{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 14px;font-size:14px}
.perk .ic{width:22px;height:22px;flex:none}
.perk b{display:block;font-size:15px}
.perk span{opacity:.8;font-size:13px}
.hero-cta{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.btn-white{background:#fff;color:var(--maroon);border-color:#fff;font-weight:700}
.btn-white:hover{background:var(--maroon-50);color:var(--maroon)}
.hero-art{justify-self:end;margin-right:clamp(0px,3vw,40px);width:min(230px,100%);aspect-ratio:1;background:#fff;border-radius:28px;display:grid;place-items:center;padding:20px;box-shadow:0 24px 56px rgba(0,0,0,.32);transform:rotate(-3deg)}
.hero-art img{width:100%;height:100%;object-fit:contain}
.closed{background:var(--warn-50);color:var(--warn);font-weight:600;text-align:center;padding:12px 20px;border-bottom:1px solid #f1dcb5}
.last-order{background:var(--maroon-50);border-bottom:1px solid var(--maroon-100);font-size:14px}
.last-order .wrap{display:flex;align-items:center;gap:12px;padding-block:10px;flex-wrap:wrap}
.last-order button{margin-left:auto}

/* catalogue */
.filters{position:sticky;top:73px;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.filters .wrap{display:flex;gap:12px;align-items:center;padding-block:12px}
.filters .search{flex:0 1 320px}
.filters .search input{height:44px;font-size:15px}
.filters .cats{flex:1;min-width:0}
.catalog-s{padding-block:28px 64px;display:grid;gap:40px}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-h h2{font-family:var(--f-display);font-size:24px;font-weight:700;letter-spacing:-.01em}
.grid-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.pcard:hover{box-shadow:0 12px 32px rgba(61,12,21,.12);transform:translateY(-2px)}
.pimg{position:relative;aspect-ratio:1;background:var(--surface-2);overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pimg .ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(145deg,var(--maroon-50),var(--maroon-100));color:var(--maroon);font-family:var(--f-display);font-weight:800;font-size:44px;letter-spacing:-.02em}
.pimg .tag{position:absolute;left:10px;top:10px;background:#fff;color:var(--ink);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pimg .tag.out{background:var(--ink);color:#fff}
.pimg .tag.few{color:var(--warn)}
.pbody{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pbody h3{font-size:16px;font-weight:700;line-height:1.3}
.pbody p{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pfoot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.pprice{font-family:var(--f-mono);font-weight:600;font-size:19px;color:var(--maroon)}
.add{border:0;background:var(--maroon);color:#fff;border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer}
.add:hover{background:var(--maroon-600)}
.add:disabled{background:var(--line-2);color:var(--muted);cursor:not-allowed}
.pstep{display:inline-flex;align-items:center;background:var(--maroon-50);border-radius:999px;overflow:hidden}
.pstep button{width:36px;height:36px;border:0;background:transparent;color:var(--maroon);font-size:20px;font-weight:700;cursor:pointer}
.pstep span{min-width:26px;text-align:center;font-family:var(--f-mono);font-weight:700;color:var(--maroon)}

/* footer */
.s-foot{background:var(--maroon-900);color:rgba(255,255,255,.8);margin-top:auto}
.s-foot .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:28px;padding-block:40px}
.s-foot img{width:64px;height:64px;background:#fff;border-radius:14px;padding:5px;object-fit:contain}
.s-foot h4{margin:0 0 8px;color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.s-foot p{font-size:14px;line-height:1.6}
.s-foot .fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;font-size:12px;opacity:.6}

/* cart drawer */
.drawer-ov{position:fixed;inset:0;background:rgba(29,18,20,.5);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;z-index:41;display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:var(--f-display);font-size:22px;font-weight:700}
.drawer-body{flex:1;overflow:auto;padding:4px 20px 20px}
.drawer-foot{border-top:1px solid var(--line);padding:16px 20px 20px;display:grid;gap:12px;background:var(--surface-2)}
.cline{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cline .cimg{width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--maroon-50);display:grid;place-items:center;color:var(--maroon);font-weight:800}
.cline .cimg img{width:100%;height:100%;object-fit:cover}
.cline b{display:block;font-size:15px}
.cline .sub{display:block}
.cline .right{display:grid;justify-items:end;gap:6px}
.cline .rm{padding:0;margin:0}
.methods{display:grid;gap:8px}
.method{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fff}
.method input{width:18px;height:18px;accent-color:var(--maroon)}
.method b{display:block;font-size:15px}
.method span{font-size:13px;color:var(--muted)}
.method .num{font-weight:600}
.method:has(input:checked){border-color:var(--maroon);box-shadow:inset 0 0 0 1px var(--maroon);background:var(--maroon-50)}
.steps{display:flex;gap:6px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:14px 0 6px}
.steps span[aria-current="step"]{color:var(--maroon)}
.done{display:grid;gap:16px;padding-top:18px}
.tick{width:64px;height:64px;border-radius:50%;background:var(--good-50);color:var(--good);display:grid;place-items:center}
.tick svg{width:34px;height:34px}
.done h3{font-family:var(--f-display);font-size:26px;font-weight:700}
.paybox{border:1px solid var(--maroon-100);background:var(--maroon-50);border-radius:14px;padding:16px;display:grid;gap:10px}
.payrow{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px}
.payrow span{color:var(--muted)}
.payrow b{font-family:var(--f-mono);font-weight:600;word-break:break-all}
.mobile-cart{display:none}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-block:32px 36px}
  .hero-art{display:none}
  .s-call{display:none}
  .cart-btn{margin-left:auto}
  .filters{top:73px}
  .filters .wrap{flex-direction:column;align-items:stretch;gap:10px}
  .filters .search{flex:none}
  .grid-p{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pbody{padding:12px}
  .pbody h3{font-size:15px}
  .pfoot{flex-wrap:wrap}
  .s-foot .wrap{grid-template-columns:1fr}
  .mobile-cart{display:block;position:sticky;bottom:0;z-index:15;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line)}
}
@media (max-width:420px){ .s-brand small{display:none} .s-brand b{font-size:18px} .cart-btn span{display:none} .payrow{grid-template-columns:96px minmax(0,1fr) auto} }

/* accounts */
.acct-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 14px 6px 6px;font-weight:700;cursor:pointer;white-space:nowrap;margin-left:auto}
.acct-btn:hover{border-color:var(--maroon-200);background:var(--maroon-50)}
.acct-btn>span:only-child{padding-left:8px}
.s-call+.acct-btn{margin-left:0}
.cart-btn{margin-left:0}
.avatar-s{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--maroon);color:#fff;font-size:12px;font-weight:800;flex:none}
.avatar-s.lg{width:48px;height:48px;font-size:16px}
.seg-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg-tabs button{border:0;background:transparent;border-radius:9px;padding:10px;font-weight:700;color:var(--muted);cursor:pointer}
.seg-tabs button[aria-selected="true"]{background:#fff;color:var(--maroon);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.link-btn{border:0;background:none;color:var(--maroon);font-weight:600;cursor:pointer;padding:4px;text-decoration:underline;justify-self:center}
.acct-card{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface-2)}
.acct-card b{display:block;font-size:16px}
.acct-card .sub{display:block}
.order-row{display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;cursor:pointer}
.order-row:hover{border-color:var(--maroon-200);background:var(--maroon-50)}
.order-row .sub,.order-row .pill{display:block;margin-top:4px}
.order-row .pill{display:inline-flex}
@media (max-width:900px){ .acct-btn{margin-left:auto} }
@media (max-width:420px){ .acct-btn>span:not(.avatar-s){display:none} .acct-btn{padding:6px} .acct-btn>span:only-child{display:inline;padding:0 6px} }

/* promotions space */
.promos{background:linear-gradient(180deg,var(--maroon-50),#fff);border-bottom:1px solid var(--line)}
.promos .wrap{padding-block:26px 28px;display:grid;gap:14px}
.promo-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.promo-head h2{font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:-.01em}
.promo-nav{display:flex;gap:6px}
.promo-nav .btn{width:38px;height:38px;padding:0;font-size:20px;border-radius:50%}
.promo-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 8px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.promo-track::-webkit-scrollbar{display:none}
.promo{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:14px;align-items:center;border-radius:18px;padding:20px 20px 20px 22px;color:#fff;min-height:190px;position:relative;overflow:hidden;background:linear-gradient(130deg,var(--maroon-800),var(--maroon))}
.promo.k-discount{background:linear-gradient(130deg,#8a1c1c,#c2410c)}
.promo.k-new{background:linear-gradient(130deg,#14532d,#1f7a4a)}
.promo.k-offer{background:linear-gradient(130deg,#3d0c15,#7a1e2c 60%,#a15c00)}
.promo.k-notice{background:linear-gradient(130deg,#1e293b,#334155)}
.promo-kind{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.promo h3{font-family:var(--f-display);font-size:23px;font-weight:700;line-height:1.15;margin-top:4px}
.promo p{font-size:14px;opacity:.9;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.promo-price{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.promo-price b{font-family:var(--f-mono);font-size:24px}
.promo-price s{font-family:var(--f-mono);opacity:.7}
.promo-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.promo-cta .btn{padding:9px 16px}
.promo-ends,.promo-sold{font-size:12px;font-weight:700;opacity:.85}
.promo-art{position:relative;width:150px;height:150px;border-radius:16px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.promo-art img{width:100%;height:100%;object-fit:cover}
.promo-art .promo-logo{object-fit:contain;padding:16px}
.promo-badge{position:absolute;top:8px;right:8px;background:#ffd84d;color:#3d0c15;font-weight:800;font-size:12px;border-radius:999px;padding:4px 10px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
@media (max-width:900px){
  .promo-track{grid-auto-columns:88%}
  .promo{grid-template-columns:minmax(0,1fr) 104px;min-height:170px;padding:16px}
  .promo-art{width:104px;height:104px}
  .promo h3{font-size:19px}
  .promo-nav{display:none}
}
@media (max-width:480px){
  .s-head .wrap{gap:8px}
  .s-brand{gap:8px;flex:1 1 auto}
  .s-brand img{width:40px;height:40px}
  .s-brand b{font-size:16px;overflow:hidden;text-overflow:ellipsis}
  .s-brand small{display:none}
  .acct-btn{margin-left:0;padding:6px 10px;font-size:14px}
  .cart-btn{padding:8px 12px;gap:6px}
}

/* outer island shipping */
.island-box{display:grid;gap:8px;border:1px solid var(--maroon-100);background:var(--maroon-50);border-radius:12px;padding:12px 14px;margin-top:-2px}

/* ---------- One grid with sorting and filters ---------- */
.refine{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:0 12px}
.ref-sort{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;font-weight:600;color:var(--muted)}
.ref-sort select{height:38px;padding:0 32px 0 10px;border:1px solid var(--line);border-radius:10px;background-color:#fff;font:inherit;font-weight:600;color:var(--ink);min-width:0}
.ref-chk{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink)}
.ref-chk input{width:18px;height:18px;accent-color:var(--maroon)}
.ref-count{margin-left:auto;font-size:14px;color:var(--muted)}
button.pimg{border:0;padding:0;width:100%;cursor:pointer;display:block;font:inherit}
.ptags{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pview .ptags{position:static;flex-direction:row}
.tag.offer,.tag.hot{position:static;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.tag.offer{background:var(--maroon);color:#fff}
.tag.hot{background:#fff4e0;color:#8a4b00}
.pcat{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pname{border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pname:hover{color:var(--maroon);text-decoration:underline}
.pprice s,.pview-price s{color:var(--muted);font-size:.72em;margin-left:6px;font-weight:500}
.pview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.pview-img{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.pview-img img{width:100%;height:100%;object-fit:cover;display:block}
.pview-img .ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(145deg,var(--maroon-50),var(--maroon-100));color:var(--maroon);font-family:var(--f-display);font-weight:800;font-size:64px}
.pview-info{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pview-price{font-family:var(--f-mono);font-weight:700;font-size:30px;color:var(--maroon)}
.pview-stock{font-weight:700;margin:0}
.pview-info p{margin:0;line-height:1.55}
.pview-cart{display:flex;align-items:center;gap:12px;font-weight:600}
@media (max-width:760px){
  .filters .refine{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
  .ref-sort span{display:none}
  .ref-sort select{height:36px;font-size:13px;width:100%}
  .ref-chk{font-size:13px}
  .ref-count{grid-column:1/-1;margin-left:0;order:9;font-size:13px}
  .filters{position:static}
  .pview{grid-template-columns:1fr;gap:16px}
  .pview-img{max-height:300px;aspect-ratio:auto;height:260px}
}

/* ---------- Compact headline area ---------- */
.hero .wrap{padding-block:26px 28px;gap:28px;grid-template-columns:minmax(0,1fr) auto}
.hero h1{font-size:clamp(26px,3.1vw,38px);max-width:30ch;line-height:1.08}
.hero p{max-width:70ch}
.hero p{margin-top:8px;font-size:15.5px}
.perks{margin-top:14px;gap:8px}
.perk{padding:7px 12px;border-radius:10px;gap:8px}
.perk .ic{width:18px;height:18px}
.perk b{font-size:14px}
.perk span{font-size:12px}
.hero-cta{margin-top:16px}
.hero-cta .btn-lg{height:42px;padding-inline:18px;font-size:15px}
.hero-art{width:min(150px,100%);border-radius:22px;padding:14px}
.hero::before{width:380px;height:380px}
@media (max-width:900px){
  .hero .wrap{padding-block:18px 20px}
  .hero h1{font-size:24px;max-width:none}
  .hero p{font-size:14px}
  .perks{display:grid;grid-template-columns:1fr 1fr;margin-top:12px}
  .perk{padding:6px 10px}
  .perk span{display:none}
  .perk b{font-size:12.5px;line-height:1.25}
  .hero-cta{margin-top:12px}
  .hero-cta .btn-lg{height:40px;flex:1;font-size:14px}
}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr;gap:0} }