/* SHOP STYLES */
/* ══ PAGES & TRANSITIONS ══ */
.page{display:none;padding-bottom:40px}
.page.active{display:block}

/* ══ SHOP PAGE ══ */
.shop-full{padding:0 24px 40px}
.shop-layout{display:grid;grid-template-columns:240px 1fr;gap:20px;margin-top:20px}
.shop-sidebar{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px;position:sticky;top:80px;height:fit-content}
.ss-title{font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--text-light);margin-bottom:14px;font-weight:600}
.ss-cat{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(212,200,168,0.3);cursor:pointer;transition:color var(--tr)}
.ss-cat:last-child{border-bottom:none}
.ss-cat:hover .ss-cat-name,.ss-cat.active .ss-cat-name{color:var(--forest);font-weight:600}
.ss-cat.active .ss-mark{background:var(--forest)}
.ss-mark{width:7px;height:7px;border-radius:2px;background:var(--beige-dark);transform:rotate(45deg);flex-shrink:0;transition:background var(--tr)}
.ss-cat-name{font-size:12px;color:var(--text-mid);transition:color var(--tr)}
.ss-cnt{font-size:10px;color:var(--text-light);background:var(--beige);padding:2px 8px;border-radius:20px}
.price-range-row{display:flex;justify-content:space-between;margin-bottom:10px}
.price-val{font-size:12px;color:var(--text-mid)}
.price-val b{color:var(--forest);font-weight:600}
input[type=range]{width:100%;-webkit-appearance:none;height:4px;background:linear-gradient(to right,var(--forest) 0%,var(--forest) var(--val,100%),var(--beige) var(--val,100%),var(--beige) 100%);border-radius:2px;outline:none;cursor:pointer;margin-top:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--forest);border:3px solid var(--warm-white);box-shadow:0 3px 10px rgba(29,77,46,0.4);cursor:pointer}
.shop-main{}
.shop-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.shop-count{font-size:13px;color:var(--text-light)}
.sort-select{background:var(--bg-card);border:2px solid var(--border);color:var(--text-dark);padding:9px 16px;font-family:'Outfit',sans-serif;font-size:12px;border-radius:8px;outline:none;cursor:pointer;transition:border-color var(--tr)}
.sort-select:focus{border-color:var(--forest)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}

/* ══ 3D BUTTONS ══ */
.btn-3d{
  position:relative;background:linear-gradient(145deg,var(--gold-light),var(--gold));color:var(--ink);
  border:none;padding:14px 32px;font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:0.22em;font-weight:700;
  text-transform:uppercase;cursor:pointer;border-radius:8px;transform-style:preserve-3d;
  transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 7px 0 var(--gold),0 11px 0 rgba(0,0,0,0.12),0 14px 20px rgba(0,0,0,0.18);
}
.btn-3d::before{content:'';position:absolute;inset:0;border-radius:8px;background:linear-gradient(to bottom,rgba(255,255,255,0.3),transparent 50%);pointer-events:none}
.btn-3d:hover{transform:translateY(-4px);box-shadow:0 11px 0 var(--gold),0 16px 0 rgba(0,0,0,0.08),0 20px 28px rgba(0,0,0,0.22)}
.btn-3d:active{transform:translateY(4px);box-shadow:0 3px 0 var(--gold),0 5px 0 rgba(0,0,0,0.08),0 7px 12px rgba(0,0,0,0.14)}
.btn-3d-forest{background:linear-gradient(145deg,var(--forest-mid),var(--forest-deep));color:var(--olive-light);box-shadow:0 7px 0 var(--forest-deep),0 11px 0 rgba(0,0,0,0.15),0 14px 20px rgba(0,0,0,0.2)}
.btn-3d-forest:hover{box-shadow:0 11px 0 var(--forest-deep),0 16px 0 rgba(0,0,0,0.1),0 20px 28px rgba(0,0,0,0.25)}
.btn-3d-forest:active{box-shadow:0 3px 0 var(--forest-deep),0 5px 0 rgba(0,0,0,0.08),0 7px 12px rgba(0,0,0,0.12)}