/* Public catalog (decision 2026-10-14). Loaded only on /catalog/ pages, after site.css. */

/* ---------- Hero: copy + a mosaic of real pieces ---------- */
.catalog .cat-sample{display:inline-block;margin-bottom:22px;font-size:14px;line-height:1.4;padding:8px 12px;border-radius:6px;background:#FFF4E5;color:#7A4B00}
.cat-hero{background:var(--ink);color:var(--white);padding-block:clamp(48px,7vw,88px);overflow:hidden}
.cat-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
.cat-hero h1{font-size:clamp(38px,5.4vw,70px);letter-spacing:-.035em;line-height:1.03;max-width:14ch}
.cat-hero .lead{margin-top:20px;font-size:clamp(17px,1.5vw,20px);color:#CBD2DC;max-width:48ch}
.cat-hero .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn-ghost{color:var(--white);border-color:#3A4354}
.btn-ghost:hover{border-color:var(--white)}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:12px}
.m-tile{display:block;border-radius:12px;overflow:hidden;background:var(--white);aspect-ratio:1}
.m-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.m-tile:hover img{transform:scale(1.06)}
.m-tile:first-child{grid-column:span 2;grid-row:span 2}

@media (max-width:880px){.cat-hero .wrap{grid-template-columns:1fr}.mosaic{grid-template-columns:repeat(4,1fr)}.m-tile:first-child{grid-column:span 2;grid-row:span 2}.m-tile:nth-child(6){display:none}}
@media (prefers-reduced-motion:no-preference){
  .m-tile{animation:tile-in .6s ease both}
  .m-tile:nth-child(2){animation-delay:.08s}.m-tile:nth-child(3){animation-delay:.16s}.m-tile:nth-child(4){animation-delay:.24s}
  .m-tile:nth-child(5){animation-delay:.32s}.m-tile:nth-child(6){animation-delay:.4s}
}
@keyframes tile-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Sticky filter bar ---------- */
.cat-bar{position:sticky;top:var(--site-header-height);z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.cat-bar .wrap{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}
.cat-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-right:auto}
.tab{font:600 15px/1 var(--sans);padding:12px;border:0;background:none;color:var(--slate);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--red)}
.cat-tools{display:flex;gap:10px;align-items:center}
.cat-search input{font:400 15px/1.2 var(--sans);padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;width:200px;min-height:42px}
.cat-search input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(230,33,30,.25)}
.cat-shuffle{font:600 15px/1 var(--sans);padding:10px 14px;border-radius:8px;border:1.5px solid #C9CFD8;background:var(--white);cursor:pointer;min-height:42px}
.cat-shuffle:hover{border-color:var(--ink)}
.cat-shuffle::before{content:"↻ "}

.cat-main{padding-block:28px clamp(56px,8vw,96px)}
.cat-filters{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 14px/1 var(--sans);padding:10px 12px;border-radius:8px;border:1.5px solid var(--border);background:var(--white);color:var(--slate);cursor:pointer;min-height:40px}
.chip:hover{border-color:#C9CFD8;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.etsy-switch{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;cursor:pointer;user-select:none}
.etsy-switch input{position:absolute;opacity:0;width:1px;height:1px}
.sw{width:42px;height:24px;border-radius:12px;background:#D5DAE1;position:relative;transition:background .15s;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--white);transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.etsy-switch input:checked+.sw{background:#1E7A4C}
.etsy-switch input:checked+.sw::after{transform:translateX(18px)}
.etsy-switch input:focus-visible+.sw{outline:3px solid var(--red);outline-offset:2px}
.cat-count{margin-top:18px;font-size:15px;font-weight:600}
.cat-count span{font-weight:400;color:var(--muted);margin-left:6px}
.cat-empty{padding:48px 0;text-align:center;color:var(--slate)}
.cat-empty .btn{margin-top:16px}

/* ---------- Product cards ---------- */
.c-grid{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px 20px}
.c-card a{display:flex;flex-direction:column;height:100%;text-decoration:none}
.c-photo{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:#F4F4F2}
.c-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .35s ease}
.c-alt{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.c-card a:hover .c-photo>img{transform:scale(1.04)}
.c-card a:hover .c-alt{opacity:1}
.c-body{padding:14px 2px 0;display:flex;flex-direction:column;gap:5px;flex:1}
.c-fam{font-size:13px;font-weight:600;color:var(--muted)}
.c-body h3{font-size:19px;letter-spacing:-.01em}
.c-card a:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.c-price{font-size:15px;color:var(--slate)}
.c-meth{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.c-meth li{font-size:12.5px;line-height:1;padding:6px 8px;border-radius:6px;background:var(--mist);color:var(--slate)}
.etsy-badge{align-self:flex-start;font:600 13px/1 var(--sans);padding:7px 9px;border-radius:6px}
.c-body .etsy-badge{margin-top:8px}
.etsy-badge.yes{background:#E7F5EE;color:#155C3A}
.etsy-badge.yes::before{content:"✓ "}
.etsy-badge.no{background:#F1F2F4;color:#4A5364}
.etsy-badge.no::before{content:"✕ ";font-size:11px}
.c-card[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.c-photo img,.c-alt,.m-tile img{transition:none}.c-card a:hover .c-photo>img,.m-tile:hover img{transform:none}}

/* ---------- Product page ---------- */
.product .wrap{padding-top:clamp(28px,4vw,44px)}
.crumbs{display:flex;gap:10px;font-size:14px;color:var(--muted);margin-bottom:24px}
.crumbs a{color:var(--ink);font-weight:600}
.p-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.p-media{position:sticky;top:96px}
.p-stage{aspect-ratio:1;max-width:min(100%,calc(100vh - 220px));border-radius:var(--radius);overflow:hidden;background:#F4F4F2}
.p-stage img{width:100%;height:100%;object-fit:cover}
.p-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumb{width:76px;height:76px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#F4F4F2;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb[aria-pressed="true"]{border-color:var(--ink)}
@media (max-width:880px){.p-grid{grid-template-columns:1fr}.p-media{position:static}.p-stage{max-width:100%}}
.p-info h1{font-size:clamp(32px,4vw,48px);margin-top:6px}
.p-price{margin-top:14px;font:700 22px/1.2 var(--display)}
.p-calc{margin-top:6px;font-size:14px;color:var(--muted);max-width:52ch}
.p-desc{margin-top:16px;font-size:18px;color:var(--slate);max-width:52ch}
.p-facts{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.p-facts li{font-size:14px;padding:8px 10px;border-radius:6px;background:var(--mist)}
.p-info h2{font-size:18px;letter-spacing:-.01em;margin-bottom:12px}
.p-axes,.p-pers{margin-top:30px;padding-top:24px;border-top:1px solid var(--divider)}
.axis+.axis{margin-top:14px}
.axis-name{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.axis-vals{display:flex;flex-wrap:wrap;gap:8px}
.opt{font:500 15px/1 var(--sans);padding:11px 14px;border-radius:8px;border:1.5px solid var(--border);background:var(--white);cursor:pointer;min-height:42px;color:var(--ink)}
.opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.p-pers ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.p-pers li{display:grid;grid-template-columns:28px 1fr;gap:2px 12px;align-items:center}
.p-pers li b{font-weight:600}
.p-pers li span:last-child{grid-column:2;font-size:14px;color:var(--muted)}
.p-none{color:var(--slate)}
.pm{grid-row:span 2;width:28px;height:28px;border-radius:7px;background:var(--mist);position:relative}
.pm::after{position:absolute;inset:0;display:grid;place-items:center;font:700 13px/1 var(--display);color:var(--ink)}
.pm-text::after{content:"Aa"}.pm-file::after{content:"▣"}.pm-predesign::after{content:"✦"}.pm-birthstone::after{content:"◆";color:#8E3BB8}.pm-enamel::after{content:"●";color:var(--red)}
.p-etsy{margin-top:30px;padding:20px 22px;border-radius:12px;border:1px solid var(--border)}
.p-etsy.yes{background:#F3FAF6;border-color:#CDE9DA}
.p-etsy.no{background:var(--mist)}
.p-etsy p{margin-top:10px;font-size:15px;color:var(--slate)}
.p-etsy a{display:inline-block;margin-top:10px;font-size:15px;font-weight:600}
.p-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.p-more{margin-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.p-more h2{font-size:clamp(26px,3vw,36px)}

/* ---------- Closing band ---------- */
.cat-band{background:var(--ink);color:var(--white);padding-block:clamp(48px,7vw,80px)}
.cat-band h2{font-size:clamp(28px,3.6vw,44px);max-width:22ch}
.cat-band p{margin-top:14px;color:#CBD2DC;max-width:56ch}
.cat-band .row{margin-top:26px}
.cat-band .etsy-notice{margin-top:36px;font-size:13px;color:#8E97A6}

@media (max-width:560px){
  .cat-bar{position:static}
  .cat-bar .wrap{gap:8px;padding-block:6px}
  .cat-tools{width:100%}.cat-search{flex:1}.cat-search input{width:100%}
  .c-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .c-body h3{font-size:16px}.c-price{font-size:14px}
  .c-meth{display:none}
  .etsy-badge{font-size:12px}
}
.p-facts li.in{background:#E7F5EE;color:#155C3A}
.p-facts li.out{background:#FDF3F3;color:var(--red-dark)}

/* Launch state: catalog page without published products */
.cat-soon .cat-hero .wrap{grid-template-columns:1fr}
.soon-box{max-width:720px;padding:clamp(28px,4vw,44px);border:1px solid var(--border);border-radius:var(--radius);background:var(--mist)}
.soon-box h2{font-size:clamp(26px,3vw,34px)}
.soon-box p{margin-top:12px;color:var(--slate)}
.soon-box .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}