/* ============================================
   NAMOH ENTERPRISE — Products & Detail Pages
   Inherits palette from style.css
   ============================================ */

/* ---- Products page hero ---- */
.shop-hero{padding:180px 48px 60px;text-align:center}
.shop-hero .section-tag{margin-bottom:18px}
.shop-hero h1{font-family:var(--f-head);font-weight:400;font-size:clamp(2.6rem,7vw,5.5rem);letter-spacing:-1.5px;line-height:1.05}
.shop-hero h1 .italic{color:var(--clay-deep)}
.shop-hero p{max-width:520px;margin:24px auto 0;color:var(--ink-soft);font-size:1.05rem}

/* ---- Category tabs ---- */
.cat-tabs{display:flex;justify-content:center;gap:8px;margin:56px auto 0;flex-wrap:wrap;padding:0 24px}
.cat-tab{display:inline-flex;align-items:center;font-family:var(--f-body);font-size:.85rem;font-weight:600;letter-spacing:.3px;color:var(--ink-soft);background:transparent;border:1px solid var(--line);padding:12px 26px;border-radius:40px;cursor:none;transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.cat-tab:hover{border-color:var(--clay);color:var(--ink);background:var(--card);transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(38,36,31,.4)}
.cat-tab.active{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.cat-tab.active:hover{background:var(--ink);transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(38,36,31,.55)}
.cat-count{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--clay);color:var(--ivory);font-size:.64rem;font-weight:700;line-height:1;margin-left:9px;transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.cat-tab:hover .cat-count{transform:scale(1.12);box-shadow:0 0 0 4px rgba(168,139,106,.18)}

/* ---- Items-per-row toggle (shown on mobile only) ---- */
.view-toggle{display:none}

/* ---- Products grid ---- */
.shop-wrap{max-width:1280px;margin:0 auto;padding:70px 48px 140px}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 36px}
.empty-note{text-align:center;color:var(--ink-soft);padding:80px 0;font-family:var(--f-head);font-style:italic;font-size:1.4rem;grid-column:1/-1}

/* ---- Product card ---- */
.pcard{display:block;color:inherit;text-decoration:none;cursor:none;opacity:0;transform:translateY(30px)}
.pcard.in{opacity:1;transform:translateY(0);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pcard-media{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--ivory-2)}
.pcard-img{position:absolute;inset:0;transition:transform .9s var(--ease)}
@media(hover:hover){.pcard:hover .pcard-img{transform:scale(1.06)}}
.pcard-tag{position:absolute;top:16px;left:16px;font-size:.66rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:6px 12px;border-radius:30px;background:rgba(244,241,234,.85);backdrop-filter:blur(6px);color:var(--ink)}
.pcard-tag.past{color:var(--clay-deep)}

/* platform reveal popup */
.pcard-platforms{position:absolute;left:50%;bottom:16px;transform:translate(-50%,16px);display:flex;gap:8px;opacity:0;visibility:hidden;transition:all .45s var(--ease)}
@media(hover:hover){.pcard:hover .pcard-platforms{opacity:1;visibility:visible;transform:translate(-50%,0)}}
.pf-badge{display:flex;align-items:center;gap:7px;background:var(--ink);color:var(--ivory);padding:8px 14px;border-radius:30px;font-size:.74rem;font-weight:600;text-decoration:none;box-shadow:0 8px 24px rgba(38,36,31,.25);transition:transform .25s var(--ease),background .25s}
.pf-badge:hover{transform:translateY(-2px);background:var(--clay-deep)}
.pf-badge.sold{background:rgba(38,36,31,.7);cursor:none;backdrop-filter:blur(6px)}
.pf-badge.sold:hover{transform:none;background:rgba(38,36,31,.7)}
.pf-badge.sold .pf-mark{opacity:.7}
.pcard-status{font-family:var(--f-head);font-style:italic;font-size:1.3rem;color:var(--ivory);text-shadow:0 2px 12px rgba(38,36,31,.5);letter-spacing:.3px}
.pd-unavail{font-size:1.4rem;color:var(--ink-soft);font-style:italic}
.pd-status-tag{display:inline-block;font-family:var(--f-body);font-size:.82rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--clay-deep);background:rgba(168,139,106,.12);border:1px solid rgba(168,139,106,.28);padding:10px 20px;border-radius:30px}
.pf-badge .pf-mark{width:15px;height:15px;flex-shrink:0;-webkit-mask:var(--lg) center/contain no-repeat;mask:var(--lg) center/contain no-repeat;background-color:#C2A06C;transition:background-color .25s var(--ease)}
.pf-badge:hover .pf-mark{background-color:#F1E9D9}

/* card info */
.pcard-info{padding:20px 4px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pcard-name{font-family:var(--f-head);font-weight:500;font-size:1.18rem;line-height:1.3;letter-spacing:-.2px}
.pcard-price{text-align:right;white-space:nowrap}
.pcard-price .now{font-family:var(--f-head);font-size:1.15rem;color:var(--ink)}
.pcard-price .was{font-size:.82rem;color:var(--ink-soft);text-decoration:line-through;margin-left:6px}
.pcard-meta{padding:6px 4px 0;font-size:.86rem;color:var(--ink-soft)}

/* ---- Product detail page ---- */
.pd-wrap{max-width:1240px;margin:0 auto;padding:130px 48px 100px;display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:64px;align-items:start}
.pd-back{position:fixed;top:96px;left:48px;z-index:50;font-size:.82rem;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:8px;transition:color .3s}
.pd-back:hover{color:var(--clay-deep)}

/* gallery */
.pd-gallery{position:sticky;top:120px}
.pd-main{aspect-ratio:4/5;border-radius:20px;overflow:hidden;position:relative;background:var(--ivory-2)}
.pd-main-img{position:absolute;inset:0;transition:opacity .5s var(--ease)}
/* sold-out / restock stamp */
.pd-stamp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-9deg);z-index:3;
  font-family:var(--f-body);font-weight:800;font-size:1.6rem;letter-spacing:3px;text-transform:uppercase;
  color:#E5322D;border:3px solid #E5322D;border-radius:10px;padding:12px 30px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(2px);
  box-shadow:0 6px 24px rgba(229,50,45,.22);opacity:.95;white-space:nowrap;pointer-events:none}
.pd-stamp.restock{color:#F26B1D;border-color:#F26B1D;box-shadow:0 6px 24px rgba(242,107,29,.22)}
/* smaller stamp on the catalogue card */
.card-stamp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-9deg);z-index:3;
  font-family:var(--f-body);font-weight:800;font-size:1.05rem;letter-spacing:2px;text-transform:uppercase;
  color:#E5322D;border:2.5px solid #E5322D;border-radius:8px;padding:8px 18px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(2px);
  box-shadow:0 4px 18px rgba(229,50,45,.22);white-space:nowrap;pointer-events:none}
.card-stamp.restock{color:#F26B1D;border-color:#F26B1D;box-shadow:0 4px 18px rgba(242,107,29,.22)}
.pd-thumbs{display:flex;gap:12px;margin-top:16px}
.pd-thumb{width:74px;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:none;border:2px solid transparent;transition:border-color .3s;position:relative}
.pd-thumb.active{border-color:var(--clay)}

/* info column */
.pd-status{font-size:.74rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--clay-deep);margin-bottom:16px}
.pd-name{font-family:var(--f-head);font-weight:400;font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;letter-spacing:-1px;margin-bottom:18px}
.pd-short{font-size:1.08rem;color:var(--ink-soft);line-height:1.7;margin-bottom:32px;max-width:480px}
.pd-price-row{display:flex;align-items:baseline;gap:16px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pd-now{font-family:var(--f-head);font-size:2.4rem;color:var(--ink)}
.pd-was{font-size:1.1rem;color:var(--ink-soft);text-decoration:line-through}
.pd-off{font-size:.8rem;font-weight:700;letter-spacing:.5px;color:var(--clay-deep);background:rgba(168,139,106,.14);padding:6px 12px;border-radius:30px}

/* buy on platforms */
.pd-buy-label{font-size:.74rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);margin:32px 0 16px}
.pd-platforms{display:flex;flex-direction:column;gap:12px}
.pd-pf{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border:1px solid var(--line);border-radius:14px;background:transparent;transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.pd-pf:not(.sold):hover{background:var(--ink);border-color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 32px -16px rgba(38,36,31,.5)}
.pd-pf:not(.sold):hover .pd-pf-mark{background-color:var(--ivory)}
.pd-pf:not(.sold):hover .pd-pf-name{color:var(--ivory)}
.pd-pf:not(.sold):hover .pd-pf-go{color:var(--clay)}
.pd-pf.sold{cursor:none;opacity:.85}
.pd-pf.sold:hover{border-color:var(--line);background:transparent;transform:none}
.pd-pf-soldout{font-size:.78rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#b04a3a;background:rgba(176,74,58,.1);padding:6px 12px;border-radius:30px}
.pd-restock{margin-top:16px;font-size:.92rem;color:var(--clay-deep);background:rgba(168,139,106,.1);border:1px solid rgba(168,139,106,.25);border-radius:12px;padding:14px 18px}
.pd-pf-left{display:flex;align-items:center;gap:14px}
.pd-pf-mark{width:26px;height:26px;flex-shrink:0;-webkit-mask:var(--lg) center/contain no-repeat;mask:var(--lg) center/contain no-repeat;background-color:var(--clay-deep);transition:background-color .4s var(--ease)}
.pd-pf-name{font-weight:600;font-size:1rem;transition:color .4s var(--ease)}
.pd-pf-go{font-size:.8rem;font-weight:600;color:var(--clay-deep);display:flex;align-items:center;gap:6px;transition:color .4s var(--ease)}

/* specs + details */
.pd-section{max-width:1240px;margin:0 auto;padding:0 48px 100px}
.pd-section h3{font-family:var(--f-head);font-weight:500;font-size:1.6rem;margin-bottom:24px}
.pd-detail-text{font-size:1.05rem;color:var(--ink-soft);line-height:1.85;max-width:760px;margin-bottom:56px}
.pd-specs{display:grid;grid-template-columns:repeat(2,1fr);column-gap:56px;row-gap:0;max-width:760px;border-top:1px solid var(--line)}
.pd-spec{display:flex;justify-content:space-between;gap:24px;padding:18px 4px;border-bottom:1px solid var(--line)}
.pd-spec .k{color:var(--ink-soft);font-size:.95rem}
.pd-spec .v{font-weight:600;font-size:.95rem}

@media(max-width:900px){
  .shop-hero{padding:140px 24px 40px}
  .shop-wrap{padding:50px 24px 100px}
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:32px 20px}
  /* category tabs in one line */
  .cat-tabs{flex-wrap:nowrap;justify-content:center;gap:4px;padding:0 8px;margin-top:40px}
  .cat-tab{display:inline-flex;align-items:center;padding:8px 11px;font-size:.63rem;white-space:nowrap;flex:0 1 auto;min-width:0}
  .cat-count{width:16px;height:16px;font-size:.5rem;margin-left:6px}
  /* tap feedback animation for the count ring on touch (no hover) */
  .cat-tab:active .cat-count{transform:scale(1.14);box-shadow:0 0 0 4px rgba(168,139,106,.2)}
  /* items-per-row toggle — clean segmented control */
  .view-toggle{display:inline-flex;gap:4px;margin:22px auto 0;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:inset 0 1px 2px rgba(38,36,31,.04)}
  .vt-btn{display:flex;align-items:center;justify-content:center;width:42px;height:32px;border:none;background:transparent;border-radius:10px;color:var(--ink-soft);transition:background .3s var(--ease),color .3s var(--ease),box-shadow .35s var(--ease)}
  .vt-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .vt-btn:not(.active):active{background:rgba(168,139,106,.16);color:var(--clay-deep)}
  .vt-btn.active{background:var(--ink);color:var(--ivory);box-shadow:0 5px 14px -6px rgba(38,36,31,.45)}
  /* user-chosen columns override the default mobile grid */
  .shop-grid[data-cols="1"]{grid-template-columns:1fr;gap:36px}
  .shop-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr);gap:28px 16px}
  .shop-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr);gap:18px 9px}
  /* keep card text tidy in multi-column layouts */
  .shop-grid[data-cols="2"] .pcard-info,.shop-grid[data-cols="3"] .pcard-info{flex-direction:column;align-items:flex-start;gap:3px;padding-top:12px}
  .shop-grid[data-cols="2"] .pcard-price,.shop-grid[data-cols="3"] .pcard-price{text-align:left}
  .shop-grid[data-cols="2"] .pcard-name{font-size:1rem}
  .shop-grid[data-cols="3"] .pcard-name{font-size:.82rem;line-height:1.25}
  .shop-grid[data-cols="3"] .pcard-price .now{font-size:.88rem}
  .shop-grid[data-cols="3"] .pcard-price .was{font-size:.7rem;margin-left:0}
  .shop-grid[data-cols="3"] .pcard-tag{font-size:.56rem;padding:4px 8px;top:8px;left:8px}
  /* sold-out / restock stamp scales with the card so it never spills outside */
  .shop-grid[data-cols="1"] .card-stamp{font-size:1.15rem;letter-spacing:2px;padding:8px 16px;border-width:2.5px}
  .shop-grid[data-cols="2"] .card-stamp{font-size:.74rem;letter-spacing:.9px;padding:6px 12px;border-width:2px;border-radius:7px}
  .shop-grid[data-cols="3"] .card-stamp{font-size:.5rem;letter-spacing:.4px;padding:3px 7px;border-width:1.5px;border-radius:5px}
  .pd-wrap{grid-template-columns:1fr;gap:40px;padding:120px 24px 60px}
  .pd-gallery{position:relative;top:0}
  .pd-back{position:static;margin:0 0 20px}
  .pd-section{padding:0 24px 80px}
  .pd-specs{grid-template-columns:1fr}
}
@media(max-width:560px){
  .shop-grid{grid-template-columns:1fr;gap:36px}
}