/* ===== Catalog page — strings-first, mobile-first ===== */

body.catalog-page{padding-bottom:88px;}

.cat-hero{
  position:relative; overflow:hidden;
  padding:28px 0 22px;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(47,82,51,.10), transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(183,206,99,.14), transparent 50%),
    var(--bg);
}
.cat-hero-inner{max-width:560px;}
.cat-hero h1{
  font-size:28px; font-weight:800; line-height:1.18;
  margin:0 0 10px; letter-spacing:-.02em;
}
.cat-hero-sub{font-size:14.5px; color:var(--muted); margin:0; max-width:42ch;}

/* sticky category tabs */
.cat-tabs{
  position:sticky; top:57px; z-index:20;
  background:rgba(250,248,242,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
@media (max-width:767px){
  .cat-tabs{top:96px;}
}
.cat-tabs-inner{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  padding:10px 20px;
}
.cat-tabs-inner::-webkit-scrollbar{display:none;}
.cat-tab{
  flex-shrink:0; font:inherit; font-size:12.5px; font-weight:700;
  padding:8px 14px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:var(--muted); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.cat-tab span{opacity:.5; font-weight:600; margin-left:4px; font-size:11px;}
.cat-tab:hover{border-color:var(--p-sage); color:var(--ink);}
.cat-tab.on{
  background:var(--p-forest); border-color:var(--p-forest); color:#faf5e6;
}
.cat-tab.on span{opacity:.7; color:#faf5e6;}

.cat-main{padding-bottom:24px;}
.cat-section{padding:28px 0 8px;}
.cat-section-plain{padding-top:20px;}
.cat-sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
.cat-sec-head h2{font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 4px;}
.cat-sec-head p{font-size:13px; color:var(--muted); margin:0;}
.cat-sec-count{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted-2); white-space:nowrap;
}

/* string toolbar */
.str-toolbar{margin-bottom:16px;}
.str-search{position:relative; margin-bottom:10px;}
.str-search svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted-2); pointer-events:none;
}
.str-search input{
  width:100%; font:inherit; font-size:14.5px;
  padding:12px 14px 12px 38px; border-radius:10px;
  border:1.5px solid var(--border); background:#fff; color:var(--ink);
  min-height:46px; outline:none;
}
.str-search input:focus{border-color:var(--primary);}
.str-filters{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
}
.str-filters::-webkit-scrollbar{display:none;}
.str-chip{
  flex-shrink:0; font:inherit; font-size:12px; font-weight:600;
  padding:7px 12px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:var(--muted); cursor:pointer;
}
.str-chip.on{background:var(--ink); border-color:var(--ink); color:#fff;}

/* featured string cards */
.str-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}
.str-card{
  display:grid; grid-template-columns:104px 1fr; gap:0;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow);
  text-align:left; cursor:pointer; font:inherit; color:inherit; width:100%;
  padding:0; transition:border-color .15s, transform .12s;
}
.str-card:active{transform:scale(.992);}
.str-card:hover{border-color:var(--p-sage);}
.str-card-media{
  position:relative; background:#efeade; min-height:124px;
}
.str-card-media img{
  width:100%; height:100%; object-fit:cover; min-height:124px;
}
.str-card-badge{
  position:absolute; left:8px; bottom:8px;
  font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 7px; border-radius:6px;
  background:rgba(28,32,27,.78); color:#faf5e6; backdrop-filter:blur(4px);
}
.str-card-body{
  padding:12px 12px 12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0;
}
.str-card-brand{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--p-forest);
}
.str-card-name{
  font-size:15px; font-weight:800; letter-spacing:-.015em; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.str-card-meta{
  display:flex; flex-wrap:wrap; gap:5px;
}
.str-tag{
  font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:6px;
  background:#f2f0e6; color:var(--muted);
}
.str-tag.type-poly{background:#e8efe4; color:var(--p-forest);}
.str-tag.type-multi{background:#eef2f8; color:#3b5b8a;}
.str-tag.type-gut{background:#f8efe6; color:#8a5a2b;}
.str-card-blurb{
  font-size:12px; color:var(--muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.str-card-foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:4px;
}
.str-card-price{font-size:15px; font-weight:800; letter-spacing:-.01em;}
.str-card-stock{font-size:11px; color:var(--muted-2); font-weight:600;}
.str-card-stock.low{color:var(--p-brick);}

.cat-skeleton{
  height:124px; border-radius:14px; background:linear-gradient(90deg,#efeade,#f7f3e8,#efeade);
  background-size:200% 100%; animation:sk 1.2s ease infinite;
}
@keyframes sk{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
.cat-empty{
  text-align:center; padding:28px 12px; font-size:13.5px; color:var(--muted);
}

/* plain product list */
.prod-list{display:flex; flex-direction:column; gap:8px;}
.prod-row{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:10px; width:100%; text-align:left; font:inherit; color:inherit;
  cursor:pointer; box-shadow:0 1px 2px rgba(30,25,10,.03);
}
.prod-row:hover{border-color:var(--p-sage);}
.prod-row img{
  width:56px; height:56px; border-radius:9px; object-fit:cover;
  background:#efeade; flex-shrink:0; border:1px solid var(--border-soft);
}
.prod-row-ph{
  width:56px; height:56px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(140deg, var(--p-sage), var(--p-forest));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800;
}
.prod-row-info{flex:1; min-width:0;}
.prod-row-name{font-size:14px; font-weight:700; line-height:1.3;}
.prod-row-meta{font-size:11.5px; color:var(--muted); margin-top:2px;}
.prod-row-price{font-size:13.5px; font-weight:800; flex-shrink:0;}

/* detail sheet */
.cd-overlay{
  position:fixed; inset:0; z-index:220;
  background:rgba(24,28,22,.48); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center;
}
.cd-overlay[hidden]{display:none;}
.cd-sheet{
  position:relative; width:100%; max-width:520px; max-height:92vh;
  background:#fff; border-radius:18px 18px 0 0;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 -16px 48px rgba(0,0,0,.2);
  animation:cdUp .24s ease;
}
@keyframes cdUp{from{transform:translateY(28px); opacity:.5;} to{transform:none; opacity:1;}}
.cd-grab{
  width:36px; height:4px; border-radius:99px; background:#ddd;
  margin:10px auto 0; flex-shrink:0;
}
.cd-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted);
}
.cd-close svg{width:15px; height:15px;}
.cd-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 20px 16px;}
.cd-foot{
  display:flex; gap:8px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border-soft); background:#faf8f2;
}
.cd-foot .btn{flex:1;}

.cd-hero{
  margin:0 -20px 16px; aspect-ratio:16/11; background:#efeade; overflow:hidden;
}
.cd-hero img{width:100%; height:100%; object-fit:cover;}
.cd-kicker{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--p-forest); margin-bottom:6px;
}
.cd-title{font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin:0 0 8px;}
.cd-price-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:14px;
}
.cd-price{font-size:22px; font-weight:800;}
.cd-unit{font-size:12.5px; color:var(--muted);}
.cd-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
.cd-lead{font-size:14.5px; color:var(--ink); line-height:1.55; margin:0 0 18px;}
.cd-block{margin-bottom:16px;}
.cd-block h4{
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted-2); margin:0 0 8px;
}
.cd-block p{font-size:13.5px; color:var(--muted); line-height:1.55; margin:0;}
.cd-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.cd-spec{
  background:var(--bg); border:1px solid var(--border-soft); border-radius:10px; padding:10px 12px;
}
.cd-spec b{display:block; font-size:13.5px; font-weight:700; margin-top:2px;}
.cd-spec span{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2);}
.cd-bullets{margin:0; padding:0; list-style:none;}
.cd-bullets li{
  position:relative; padding:6px 0 6px 18px; font-size:13.5px; color:var(--muted); line-height:1.45;
  border-bottom:1px solid var(--border-soft);
}
.cd-bullets li:last-child{border-bottom:none;}
.cd-bullets li::before{
  content:""; position:absolute; left:0; top:12px; width:8px; height:8px; border-radius:50%;
  background:var(--p-lime);
}

@media (min-width:720px){
  .cat-hero{padding:48px 0 36px;}
  .cat-hero h1{font-size:40px;}
  .cat-hero-sub{font-size:16px;}
  .cat-tabs{top:53px;}
  .str-grid{grid-template-columns:1fr 1fr; gap:14px;}
  .str-card{grid-template-columns:128px 1fr;}
  .str-card-media, .str-card-media img{min-height:148px;}
  .prod-list{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .cd-overlay{align-items:center; padding:24px;}
  .cd-sheet{border-radius:16px; max-height:86vh;}
  .cd-grab{display:none;}
}

@media (min-width:980px){
  .str-grid{grid-template-columns:1fr 1fr;}
  .cat-sec-head h2{font-size:26px;}
}

@media (prefers-reduced-motion: reduce){
  .str-card, .cd-sheet, .cat-skeleton{animation:none; transition:none;}
}