/* ERP1 Website E-commerce Store add-on - storefront styles (uses the site's accent colour) */
.sh-wrap{ max-width:1180px; margin:0 auto; padding:28px 24px 50px; }
.sh-wrap h1{ margin:0 0 14px; font-size:30px; }
.sh-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; align-items:start; }
@media (max-width:860px){ .sh-layout{ grid-template-columns:1fr; } }
.sh-side{ border:1px solid var(--site-border); border-radius:10px; padding:16px; background:#fff; }
.sh-side h4{ margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--site-ink-soft); }
.sh-side ul{ list-style:none; margin:0 0 16px; padding:0; } .sh-side li a{ display:block; padding:5px 0; text-decoration:none; color:var(--site-ink); font-size:14.5px; }
.sh-side li a.on{ color:var(--site-accent); font-weight:700; } .sh-side li ul{ margin:0 0 0 12px; }
.sh-side input[type=text], .sh-side input[type=number], .sh-side select{ width:100%; padding:7px 9px; border:1px solid var(--site-border); border-radius:6px; font:inherit; margin-bottom:8px; }
.sh-bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; color:var(--site-ink-soft); font-size:14px; }
.sh-bar select{ padding:6px 8px; border:1px solid var(--site-border); border-radius:6px; font:inherit; }
.sh-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.sh-card{ display:flex; flex-direction:column; border:1px solid var(--site-border); border-radius:10px; overflow:hidden; background:#fff; text-decoration:none; color:var(--site-ink); transition:box-shadow .15s, transform .15s; }
.sh-card:hover{ box-shadow:0 8px 22px rgba(0,0,0,.1); transform:translateY(-2px); }
.sh-img{ position:relative; aspect-ratio:1/1; background:#f3f1ec; display:flex; align-items:center; justify-content:center; font-size:46px; color:#b8ae97; font-weight:700; overflow:hidden; }
.sh-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-off, .sh-oos{ position:absolute; top:10px; left:10px; background:#c0392b; color:#fff; font-style:normal; font-size:12px; font-weight:700; padding:3px 9px; border-radius:12px; }
.sh-oos{ left:auto; right:10px; background:#555; }
.sh-body{ padding:12px 14px 16px; } .sh-body h3{ margin:0 0 6px; font-size:16px; line-height:1.3; }
.sh-price{ font-weight:700; color:var(--site-accent); } .sh-price s{ color:var(--site-ink-soft); font-weight:400; font-size:13px; margin-left:4px; }
.sh-stars{ color:#e6a700; letter-spacing:1px; } .sh-stars .off{ color:#ddd; } .sh-rate{ font-size:13px; margin-bottom:4px; }
.sh-btn, button.sh-btn{ display:inline-block; padding:11px 22px; background:var(--site-accent); color:#fff; border:0; border-radius:6px; text-decoration:none; font:inherit; font-weight:600; cursor:pointer; }
.sh-btn:hover{ filter:brightness(.93); } .sh-btn.alt{ background:#fff; color:var(--site-ink); border:1px solid var(--site-border); } .sh-btn.small{ padding:6px 12px; font-size:13px; } .sh-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.sh-pager{ display:flex; gap:6px; justify-content:center; margin-top:26px; flex-wrap:wrap; } .sh-pager a, .sh-pager span{ padding:7px 13px; border:1px solid var(--site-border); border-radius:6px; text-decoration:none; color:var(--site-ink); font-size:14px; }
.sh-pager .on{ background:var(--site-accent); border-color:var(--site-accent); color:#fff; }
.sh-cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; } .sh-cat{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; border:1px solid var(--site-border); border-radius:10px; text-decoration:none; color:var(--site-ink); font-weight:600; background:#fff; }
.sh-cat img{ width:100%; max-height:110px; object-fit:cover; border-radius:8px; }
.sh-detail{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:38px; align-items:start; margin-bottom:30px; } @media (max-width:800px){ .sh-detail{ grid-template-columns:1fr; } }
.sh-big{ background:#f3f1ec; border-radius:10px; overflow:hidden; } .sh-big img{ width:100%; display:block; }
.sh-thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; } .sh-thumbs img{ width:70px; height:70px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; } .sh-thumbs img.on{ border-color:var(--site-accent); }
.sh-info h1{ font-size:30px; margin:4px 0 8px; } .sh-info .sh-price{ font-size:26px; margin:8px 0; }
.sh-stock-ok{ color:#2e7d32; font-weight:600; } .sh-stock-no{ color:#c0392b; font-weight:600; }
.sh-buy{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:16px 0; } .sh-buy input[type=number], .sh-buy select{ padding:10px; border:1px solid var(--site-border); border-radius:6px; font:inherit; }
.sh-buy input[type=number]{ width:84px; }
.sh-tabs h2{ border-bottom:1px solid var(--site-border); padding-bottom:8px; } .sh-desc{ line-height:1.65; } .sh-desc img{ max-width:100%; height:auto; }
.sh-review{ border-bottom:1px solid var(--site-border); padding:12px 0; } .sh-review small{ color:var(--site-ink-soft); }
.sh-form label{ display:block; font-weight:600; font-size:14px; margin:10px 0 4px; } .sh-form input[type=text], .sh-form input[type=email], .sh-form input[type=password], .sh-form input[type=tel], .sh-form input[type=number], .sh-form select, .sh-form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--site-border); border-radius:6px; font:inherit; background:#fff; }
.sh-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } @media (max-width:640px){ .sh-cols{ grid-template-columns:1fr; } }
.sh-table{ width:100%; border-collapse:collapse; } .sh-table th{ text-align:left; font-size:13px; color:var(--site-ink-soft); border-bottom:2px solid var(--site-border); padding:8px 6px; } .sh-table td{ border-bottom:1px solid var(--site-border); padding:10px 6px; vertical-align:middle; }
.sh-table .num{ text-align:right; } .sh-table img{ width:56px; height:56px; object-fit:cover; border-radius:6px; vertical-align:middle; margin-right:10px; }
.sh-two{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start; } @media (max-width:900px){ .sh-two{ grid-template-columns:1fr; } }
.sh-box{ border:1px solid var(--site-border); border-radius:10px; padding:18px; background:#fff; margin-bottom:18px; } .sh-box h3{ margin:0 0 10px; }
.sh-sum div{ display:flex; justify-content:space-between; padding:5px 0; } .sh-sum .tot{ border-top:2px solid var(--site-border); margin-top:6px; padding-top:10px; font-size:19px; font-weight:700; }
.sh-msg{ padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:14.5px; } .sh-msg.ok{ background:#e9f6ec; color:#1e6b34; } .sh-msg.err{ background:#fdecea; color:#a52a1f; } .sh-msg.info{ background:#fff6e0; color:#7a5a00; }
.sh-pay label{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--site-border); border-radius:8px; margin-bottom:8px; cursor:pointer; font-weight:500; } .sh-pay input{ margin-top:4px; width:auto; }
.sh-steps{ display:flex; gap:0; margin:18px 0 24px; flex-wrap:wrap; } .sh-steps div{ flex:1; min-width:90px; text-align:center; padding:8px 4px; font-size:13px; border-bottom:4px solid var(--site-border); color:var(--site-ink-soft); } .sh-steps div.on{ border-color:var(--site-accent); color:var(--site-ink); font-weight:700; }
.sh-heart{ background:none; border:1px solid var(--site-border); border-radius:6px; padding:9px 12px; cursor:pointer; font-size:17px; color:#999; } .sh-heart.on{ color:#d6336c; }
.sh-cartlink{ position:relative; text-decoration:none; color:var(--site-ink); font-weight:600; white-space:nowrap; } .sh-cartlink b{ background:var(--site-accent); color:#fff; border-radius:10px; padding:1px 7px; font-size:12px; margin-left:3px; }
.sh-topright{ display:flex; gap:16px; align-items:center; font-size:14px; } .sh-topright a{ text-decoration:none; color:var(--site-ink); }