/* Mitzvah Items & Books (/shop/). Builds on site.css: .phead panel, .item rows, .btn, .back, .disp */
.shop-head{display:grid;gap:0}
.shop .ph-h{font-size:clamp(48px,6.4vw,96px);margin-bottom:20px}
.shop .ph-intro{max-width:56ch}
/* category cards: real product photos from each category, name and count; they jump to the section */
.cats{margin-top:clamp(20px,2.4vw,32px)}
.cc-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cc-g li[hidden]{display:none}
.cc{display:flex;flex-direction:column;height:100%;background:var(--card);color:var(--ink);border-radius:var(--r-lg);border:1.5px solid transparent;overflow:hidden;text-decoration:none;transition:border-color .15s}
.cc:hover{border-color:var(--ink)}
.cc:hover .cc-n{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.cc-ph{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:4/3;min-height:0;overflow:hidden;gap:8px;padding:16px 16px 0;background:var(--card)}
.cc-ph img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;background:#fff}
.cc-ph img:first-child{grid-row:1/3}
.cc-ph img:only-child{grid-column:1/3}
.cc-tx{display:grid;gap:2px;padding:16px 20px 20px}
.cc-n{font:400 clamp(26px,2.2vw,32px)/1 var(--f-disp);text-transform:uppercase;letter-spacing:.005em}
.cc-c{font-size:15px;color:var(--muted)}
.shop-tools{margin-top:16px}
.shop-tools .sf{background:var(--card);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px) clamp(20px,3vw,32px);margin-top:0}
.shop-tools .sf-status p,.shop-tools .sf-clear{margin-top:12px}
.sg-head{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.sg-head .sg-h{margin:0}
.sg-ph{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:12px;padding:4px;flex:none}
.sf{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto auto;gap:16px 20px;align-items:end;margin-top:20px}
.sf[hidden]{display:none}
.sf-f{display:grid;gap:6px}
.sf-f label{font-weight:600;font-size:15px}
.sf-in{position:relative;display:block}
.sf-in .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.sf input[type=search],.sf select{width:100%;min-height:48px;border-radius:12px;border:1.5px solid #c7cde0;background:#fff;color:var(--ink);font:400 16px/1.2 var(--f-body)}
.sf input[type=search]{padding:0 14px 0 46px}
.sf select{padding:0 40px 0 14px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.sf input[type=search]:hover,.sf select:hover{border-color:var(--ink)}
.sf input[type=search]:focus-visible,.sf select:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--ink)}
.sf-c{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-weight:600;cursor:pointer;white-space:nowrap}
.sf-c input{width:20px;height:20px;margin:0;accent-color:var(--blue);cursor:pointer}
.sf-saved{background:var(--card);cursor:pointer;white-space:nowrap}
.sf-saved[aria-pressed=true]{background:var(--blue);color:#fff}
.sf-saved[aria-pressed=true] .ic{fill:currentColor}
.sf-status{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:0}
.sf-status p:empty{display:none}
.sf-status p{margin-top:20px;font-weight:600}
.sf-clear{margin-top:20px;min-height:44px;padding:0;border:0;background:none;color:var(--blue);font:700 16px/1 var(--f-body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.sf-clear:hover{color:var(--ink)}

.shop-body{padding-top:clamp(32px,4vw,56px)}
.sg+.sg{margin-top:clamp(40px,5vw,64px)}
.sg[hidden]{display:none}
.sg-h{font-size:clamp(36px,4vw,56px);margin:0 0 20px}
section.sg{scroll-margin-top:84px}
.sl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.si{position:relative;min-width:0}
.si[hidden]{display:none}
.si-a{grid-template-columns:120px minmax(0,1fr);height:100%;padding-right:72px;align-items:center}
.si-noph .si-a{grid-template-columns:minmax(0,1fr);padding-left:24px}
.si-ph{width:120px;height:120px;object-fit:contain;border-radius:10px;background:#fff}
.si-n{margin:0;font:700 18px/1.25 var(--f-body);text-transform:none;letter-spacing:0;text-wrap:pretty}
.si-a:hover .si-n{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.si .item-s{opacity:1;color:var(--muted)}
.sv{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;padding:0;border:1.5px solid transparent;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s}
.sv:hover{border-color:var(--ink)}
.sv[aria-pressed=true]{color:var(--blue)}
.sv[aria-pressed=true] .ic{fill:currentColor}
.sv .ic{width:22px;height:22px}
.sv[hidden]{display:none}
.shop-empty{margin-top:8px;font-size:17px}

/* detail */
.shop .art{padding-top:clamp(16px,2vw,24px)}
.shop .art>.wrap:first-child{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.shop .back{margin-bottom:12px}
.dt-savedlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:12px;font-weight:700;text-decoration:none;color:var(--ink)}
.dt-savedlink:hover{text-decoration:underline;text-underline-offset:4px}
.dt-savedlink[hidden]{display:none}
.dt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start;background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,4vw,48px)}
.dt-noph{grid-template-columns:minmax(0,1fr)}
.dt-noph .dt-tx{max-width:68ch}
.dg{display:grid;gap:12px;min-width:0}
.dg-frame{position:relative;aspect-ratio:1/1;background:#fff;border-radius:var(--r-sm);border:1.5px solid color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.dg-main{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(12px,2vw,24px)}
.dg-ts{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
.dg-t{display:block;width:84px;height:84px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--ink) 15%,transparent);background:#fff;overflow:hidden}
.dg-t img{width:100%;height:100%;object-fit:contain;padding:6px}
.dg-t:hover{border-color:var(--ink)}
.dg-t[aria-current=true]{border-color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.dt-tx{display:grid;gap:16px;align-content:start;min-width:0}
.dt-h{font-size:clamp(40px,4.4vw,64px)}
.dt-seller{font-weight:700;color:var(--muted);font-size:18px;margin-top:-4px}
.dt-desc{font-size:clamp(17px,1.4vw,19px);max-width:62ch}
.dt-list{margin:0;padding:0 0 0 20px;display:grid;gap:6px;max-width:62ch}
.dt-list li::marker{color:var(--blue)}
.dt-about{font-size:16px}
.dt-about a{color:var(--blue);font-weight:600;text-underline-offset:3px}
.dt-about a:hover{color:var(--ink)}
.dt-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.dt-save{background:var(--card);cursor:pointer}
.dt-save[aria-pressed=true]{background:var(--blue);color:#fff}
.dt-save[aria-pressed=true] .ic{fill:currentColor}
.dt-save[hidden]{display:none}
.dr{margin-top:clamp(40px,5vw,64px)}
.dr-h{font-size:clamp(32px,3.4vw,48px);margin:0 0 20px}
.dr-all{margin-top:20px}
.dr-all a{font-weight:700;color:var(--blue);text-underline-offset:4px}
.dr-all a:hover{color:var(--ink)}

@media (max-width:1000px){
  .cc-g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sl{grid-template-columns:minmax(0,1fr)}
  .sf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sf-q{grid-column:1/-1}
}
@media (max-width:900px){
  .dt{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .cc-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:620px){
  .shop .ph-h{font-size:clamp(44px,12vw,60px)}
  .cc{border-radius:20px}
  .cc-ph{padding:10px 10px 0;gap:3px}
  .cc-tx{padding:10px 12px 14px}
  .cc-n{font-size:22px}
  .cc-c{font-size:14px}
  .shop-tools .sf{border-radius:24px;margin-inline:-8px;padding:20px}
  .sg-ph{width:48px;height:48px}
  .sf{grid-template-columns:minmax(0,1fr);gap:12px}
  .sf-saved{justify-self:start}
  .si-a{grid-template-columns:88px minmax(0,1fr);padding:10px 64px 10px 10px;min-height:0}
  .si-ph{width:88px;height:88px}
  .si-n{font-size:16.5px}
  .sv{right:8px}
  .dt{border-radius:24px;padding:20px;margin-inline:-8px}
  .dt-h{font-size:clamp(36px,10vw,48px)}
  .dt-act .btn{width:100%}
  .dg-t{width:72px;height:72px}
}