/* =============================================
   Mrs. Crafty — Shop Page Styles
   Warm Brutalist Artisan · mrscrafty.co.za
   ============================================= */

:root {
  --ink:       #0c0a09;
  --surface:   #171310;
  --surface-2: #201c19;
  --surface-3: #2a2420;
  --gold:      #e8a020;
  --gold-hi:   #f5be4a;
  --terra:     #c4622d;
  --cream:     #f2ede5;
  --cream-dim: #a89f95;
  --border:    rgba(232,160,32,.14);
  --font-d:    'Fraunces', Georgia, serif;
  --font-b:    'Syne', system-ui, sans-serif;
  --ease:      cubic-bezier(.16,1,.3,1);
}

/* ---- BASE ---- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  background: var(--surface);
  color: var(--cream);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}

/* Grain */
body::after {
  content:''; position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.035; pointer-events:none; z-index:9000;
}

a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img { display:block; max-width:100%; }
button, input, select, textarea { font-family:var(--font-b); }

.wrap { max-width:1300px; margin:0 auto; padding:0 2rem; }

/* ---- CURSOR ---- */
#cur   { position:fixed; width:10px; height:10px; background:var(--gold); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .2s,height .2s; }
#cur-r { position:fixed; width:38px; height:38px; border:1.5px solid var(--gold); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); opacity:.55; transition:width .25s var(--ease),height .25s var(--ease),border-color .25s; }
body.cur-hover #cur   { width:5px; height:5px; }
body.cur-hover #cur-r { width:58px; height:58px; border-color:var(--terra); }

/* ---- TOUCH DEVICE: disable custom cursor ---- */
@media (pointer: coarse) {
  body { cursor: auto; }
  #cur, #cur-r { display: none !important; }
  *, *::before, *::after { cursor: auto !important; }
  button, a, [role="button"], select,
  .cart-btn, .qty-btn, .remove-btn, .checkout-link,
  .submit-order-btn, .add-to-cart-btn, .filter-select,
  .filter-input, .quick-add { cursor: pointer !important; }
}

/* ---- NAV ---- */
#nav {
  position: fixed; inset:0 0 auto; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 2.5rem;
  background:rgba(12,10,9,.9);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.nav-brand { display:flex; align-items:center; gap:.75rem; }
.nav-brand img { height:38px; filter:brightness(0) invert(1); }
.nav-brand-name { font-family:var(--font-d); font-size:1.2rem; font-weight:800; letter-spacing:-.02em; }
.nav-right { display:flex; align-items:center; gap:1.5rem; }
.nav-back {
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream-dim); transition:color .2s; display:flex; align-items:center; gap:.4rem;
}
.nav-back:hover { color:var(--cream); }
.nav-back svg { width:13px; height:13px; }

.nav-hamburger {
  display: none;
  background: none; border: 1px solid var(--border); border-radius: 2px;
  color: var(--cream); padding: .45rem .6rem;
  cursor: pointer; transition: border-color .2s, color .2s; line-height: 0;
}
.nav-hamburger:hover { border-color: var(--gold); color: var(--gold); }
.nav-hamburger svg { width: 18px; height: 18px; display: block; }

.nav-mobile-drawer {
  position: fixed; top: 70px; left: 0; right: 0; z-index: 198;
  background: rgba(12,10,9,.97); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  max-height: 0; overflow: hidden;
  transition: max-height .3s cubic-bezier(.16,1,.3,1);
}
.nav-mobile-drawer.open { max-height: 240px; }
.nav-mobile-drawer-inner { padding: .5rem 1.5rem 1rem; }
.nav-mobile-drawer a {
  display: block; padding: .85rem 0;
  font-size: .9rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cream-dim); border-bottom: 1px solid var(--border);
  transition: color .2s;
}
.nav-mobile-drawer a:last-child { border-bottom: none; }
.nav-mobile-drawer a:active, .nav-mobile-drawer a:hover { color: var(--cream); }

.cart-btn {
  display:flex; align-items:center; gap:.5rem;
  background:none; border:1px solid var(--border); border-radius:2px;
  color:var(--cream); padding:.5rem 1rem;
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  cursor:none; transition:border-color .2s,color .2s;
}
.cart-btn:hover { border-color:var(--gold); color:var(--gold); }
.cart-btn svg { width:16px; height:16px; }
.cart-badge {
  background:var(--gold); color:var(--ink);
  font-size:.58rem; font-weight:800;
  width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease);
}
.cart-badge.bump { transform:scale(1.5); }

/* ---- SHOP MASTHEAD ---- */
.shop-masthead {
  padding:8rem 0 3.5rem;
  border-bottom:1px solid var(--border);
}
.shop-masthead h1 {
  font-family:var(--font-d);
  font-size:clamp(2.8rem,6vw,5.5rem);
  font-weight:900; letter-spacing:-.04em; line-height:.95;
  margin-bottom:.6rem;
}
.shop-masthead h1 em { color:var(--gold); font-style:italic; }
.shop-masthead p { font-size:.88rem; color:var(--cream-dim); }

/* ---- FILTER BAR ---- */
.filter-bar {
  padding:1.6rem 0;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
}
.filter-label {
  font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.filter-controls { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; flex:1; }

.filter-select, .filter-input {
  background:var(--surface-2); border:1px solid var(--border); border-radius:2px;
  color:var(--cream); padding:.6rem 1rem;
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  outline:none; transition:border-color .2s; cursor:none;
}
.filter-select:focus,.filter-input:focus { border-color:var(--gold); }
.filter-select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23a89f95' stroke-width='2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center;
  padding-right:2.2rem;
}
.filter-input { flex:1; min-width:160px; }
.filter-input::placeholder { color:rgba(168,159,149,.4); }

.results-bar {
  padding:.65rem 0;
  font-size:.68rem; color:var(--cream-dim); letter-spacing:.08em;
  border-bottom:1px solid var(--border);
}
.results-bar strong { color:var(--cream); }

/* ---- PRODUCTS GRID ---- */
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(265px,1fr));
  gap:1.5px; background:var(--border);
  margin:1.5px 0;
}

.product-card {
  background:var(--surface); position:relative; overflow:hidden;
  transition:background .3s; cursor:none;
}
.product-card:hover { background:var(--surface-2); }

/* Image area */
.product-card-img {
  position:relative; padding-top:100%; overflow:hidden;
  background:var(--surface-2);
}
.product-card-img img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.75); transition:transform .7s var(--ease),filter .5s;
}
.product-card:hover .product-card-img img { transform:scale(1.07); filter:saturate(1.05); }

.product-image-placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(232,160,32,.18);
}
.product-image-placeholder svg { width:44px; height:44px; }

/* Quick add hover strip */
.quick-add {
  position:absolute; bottom:0; left:0; right:0;
  background:var(--gold); color:var(--ink); border:none;
  padding:.6rem; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  cursor:none; display:flex; align-items:center; justify-content:center; gap:.4rem;
  transform:translateY(100%); transition:transform .35s var(--ease);
}
.quick-add svg { width:13px; height:13px; }
.product-card:hover .quick-add { transform:translateY(0); }
.quick-add:hover { background:var(--gold-hi); }

/* Badge */
.product-badge {
  position:absolute; top:.75rem; left:.75rem;
  background:var(--terra); color:var(--cream);
  font-size:.55rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.22rem .55rem; border-radius:1px;
}
.product-badge.new { background:var(--gold); color:var(--ink); }

/* Card body */
.product-info { padding:1.2rem 1.4rem 1.5rem; }
.product-category {
  font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.35rem;
}
.product-name {
  font-family:var(--font-d); font-size:1rem; font-weight:700; letter-spacing:-.01em;
  line-height:1.2; margin-bottom:.45rem; color:var(--cream);
}
.product-name-link { text-decoration:none; display:block; }
.product-name-link:hover .product-name { color:var(--gold); }
.product-description {
  font-size:.78rem; color:var(--cream-dim); line-height:1.6; margin-bottom:.9rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-footer {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.product-price {
  font-family:var(--font-d); font-size:1.1rem; font-weight:700;
}
.price-original {
  font-size:.75rem; color:var(--cream-dim); text-decoration:line-through; margin-left:.2rem;
}
.add-to-cart-btn {
  background:none; border:1px solid var(--border); color:var(--cream-dim);
  width:32px; height:32px; border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  cursor:none; transition:border-color .2s,color .2s,background .2s; flex-shrink:0;
}
.add-to-cart-btn:hover { border-color:var(--gold); color:var(--gold); background:rgba(232,160,32,.08); }
.add-to-cart-btn svg { width:14px; height:14px; }

/* Out of stock */
.product-card.out-of-stock .add-to-cart-btn { opacity:.35; pointer-events:none; }
.product-card.out-of-stock .quick-add { display:none; }

/* States */
.btn-load-more {
  background: var(--surface-2);
  color: var(--cream);
  border: 1px solid rgba(255,255,255,.12);
  padding: .8rem 2.5rem;
  border-radius: 99px;
  font-family: var(--font-b);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn-load-more:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.btn-load-more:disabled { opacity: .5; cursor: default; }

.products-empty {
  grid-column:1/-1; background:var(--surface); padding:5rem 2rem; text-align:center;
}
.products-empty h3 { font-family:var(--font-d); font-size:1.4rem; font-weight:700; margin-bottom:.6rem; }
.products-empty p { font-size:.85rem; color:var(--cream-dim); }

.products-loading {
  grid-column:1/-1; background:var(--surface); padding:5rem 2rem; text-align:center;
  color:var(--cream-dim); font-size:.82rem; letter-spacing:.1em;
}

/* Skeleton */
.skeleton-card { background:var(--surface); animation:shimmer 1.5s infinite; }
.skeleton-img { padding-top:100%; background:var(--surface-2); }
.skeleton-body { padding:1.2rem 1.4rem 1.5rem; }
.s-line { background:var(--surface-3); border-radius:1px; margin-bottom:.55rem; }
.s-line.sm { height:9px; width:38%; }
.s-line.md { height:13px; width:72%; }
.s-line.lg { height:13px; width:90%; }
.s-line.xl { height:17px; width:55%; }
@keyframes shimmer { 0%{opacity:1} 50%{opacity:.55} 100%{opacity:1} }

/* ---- CART DRAWER ---- */
.cart-overlay {
  position:fixed; inset:0; background:rgba(12,10,9,.65); z-index:300;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.cart-overlay.open { opacity:1; pointer-events:all; }

.cart-drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(440px,100vw);
  background:var(--surface-2); z-index:301;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .4s var(--ease);
  border-left:1px solid var(--border);
}
.cart-drawer.open { transform:translateX(0); }

.cart-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 1.75rem; border-bottom:1px solid var(--border);
}
.cart-head-title { font-family:var(--font-d); font-size:1.15rem; font-weight:700; }
.cart-close-btn {
  background:none; border:none; color:var(--cream-dim);
  font-size:1.3rem; line-height:1; cursor:none; transition:color .2s;
}
.cart-close-btn:hover { color:var(--cream); }

.cart-body { flex:1; overflow-y:auto; padding:1.4rem 1.75rem; }
.cart-body::-webkit-scrollbar { width:3px; }
.cart-body::-webkit-scrollbar-track { background:transparent; }
.cart-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

.cart-empty-state {
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:1rem; color:var(--cream-dim);
}
.cart-empty-state svg { width:48px; height:48px; color:rgba(232,160,32,.22); }
.cart-empty-state h3 { font-family:var(--font-d); font-size:1rem; font-weight:700; color:var(--cream); }
.cart-empty-state p { font-size:.82rem; }
.cart-empty-state a {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); margin-top:.5rem;
}

.cart-item {
  display:grid; grid-template-columns:68px 1fr; gap:1rem; align-items:start;
  padding:.9rem 0; border-bottom:1px solid var(--border);
}
.cart-item:last-child { border-bottom:none; }
.cart-item-img { width:68px; height:68px; object-fit:cover; border-radius:1px; background:var(--surface-3); }
.cart-item-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; margin-bottom:.25rem; }
.cart-item-name { font-size:.85rem; font-weight:700; line-height:1.25; }
.cart-item-price { font-family:var(--font-d); font-size:.9rem; font-weight:700; white-space:nowrap; flex-shrink:0; }
.cart-item-variant { font-size:.7rem; color:var(--cream-dim); margin-bottom:.4rem; }
.cart-item-controls { display:flex; align-items:center; justify-content:space-between; }
.cart-qty { display:flex; align-items:center; gap:.4rem; }
.qty-btn {
  background:var(--surface-3); border:1px solid var(--border);
  color:var(--cream); width:22px; height:22px; border-radius:1px;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; cursor:none; transition:border-color .2s,color .2s;
}
.qty-btn:hover { border-color:var(--gold); color:var(--gold); }
.qty-val { font-size:.8rem; font-weight:700; min-width:18px; text-align:center; }
.remove-btn {
  background:none; border:none; color:rgba(168,159,149,.45);
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:none; transition:color .2s;
}
.remove-btn:hover { color:var(--terra); }

.cart-foot { padding:1.4rem 1.75rem; border-top:1px solid var(--border); }
.cart-subtotals { margin-bottom:1.1rem; }
.subtotal-row {
  display:flex; justify-content:space-between;
  font-size:.8rem; color:var(--cream-dim); margin-bottom:.45rem;
}
.subtotal-row.total-row {
  font-family:var(--font-d); font-size:1.05rem; font-weight:700; color:var(--cream);
  margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--border);
}
.shipping-note {
  font-size:.64rem; color:var(--gold); text-align:center; margin-bottom:.9rem;
}
.checkout-link {
  display:block; width:100%; background:var(--gold); color:var(--ink);
  border:none; border-radius:2px; padding:.95rem;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:none; text-align:center; transition:background .2s,transform .2s;
}
.checkout-link:hover { background:var(--gold-hi); transform:translateY(-1px); }

/* ---- TOAST ---- */
.toast {
  position:fixed; bottom:2rem; left:50%;
  transform:translateX(-50%) translateY(50px);
  background:var(--surface-3); border:1px solid var(--border);
  color:var(--cream); padding:.7rem 1.4rem;
  border-radius:2px; font-size:.8rem; font-weight:600;
  z-index:9999; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:transform .4s var(--ease),opacity .4s;
  display:flex; align-items:center; gap:.5rem;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast-icon { color:var(--gold); }

/* ---- CHECKOUT STYLES ---- */
.checkout-page { padding:8rem 0 4rem; }
.checkout-page h1 {
  font-family:var(--font-d);
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:900; letter-spacing:-.03em;
  margin-bottom:.5rem;
}
.checkout-page h1 em { color:var(--gold); font-style:italic; }
.checkout-page .back-link {
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-dim); display:inline-flex; align-items:center; gap:.35rem;
  margin-bottom:2.5rem; transition:color .2s;
}
.checkout-page .back-link:hover { color:var(--cream); }
.checkout-page .back-link svg { width:12px; height:12px; }

.checkout-grid {
  display:grid; grid-template-columns:1fr 380px;
  gap:3rem; align-items:start; margin-top:2.5rem;
}

.checkout-form { display:flex; flex-direction:column; gap:1.1rem; }
.checkout-section-title {
  font-family:var(--font-d); font-size:1rem; font-weight:700;
  letter-spacing:-.01em; margin:1.5rem 0 .75rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--border);
}
.checkout-section-title:first-child { margin-top:0; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group label {
  font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-dim);
}
.form-group input,
.form-group select,
.form-group textarea {
  background:var(--surface-2); border:1px solid var(--border); border-radius:2px;
  padding:.75rem 1rem; color:var(--cream);
  font-family:var(--font-b); font-size:.88rem; outline:none; transition:border-color .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--gold); }
.form-group input::placeholder,.form-group textarea::placeholder { color:rgba(168,159,149,.35); }
.form-group textarea { resize:vertical; min-height:90px; }
.form-group select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23a89f95' stroke-width='2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.2rem;
}

.order-summary-box {
  background:var(--surface-2); border:1px solid var(--border); border-radius:2px;
  padding:1.75rem; position:sticky; top:6rem;
}
.order-summary-box h3 {
  font-family:var(--font-d); font-size:1rem; font-weight:700;
  margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid var(--border);
}
.order-item-row {
  display:flex; justify-content:space-between; gap:.5rem;
  font-size:.82rem; color:var(--cream-dim); margin-bottom:.55rem;
}
.order-item-row span:first-child { flex:1; }
.order-total-section { margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--border); }
.order-row {
  display:flex; justify-content:space-between;
  font-size:.82rem; color:var(--cream-dim); margin-bottom:.45rem;
}
.order-row.grand {
  font-family:var(--font-d); font-size:1.1rem; font-weight:700; color:var(--cream);
  margin-top:.65rem; padding-top:.65rem; border-top:1px solid var(--border);
}

.submit-order-btn {
  width:100%; background:var(--gold); color:var(--ink); border:none; border-radius:2px;
  padding:1rem; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:none; transition:background .2s,transform .2s; margin-top:1.25rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.submit-order-btn:hover { background:var(--gold-hi); transform:translateY(-1px); }
.submit-order-btn svg { width:14px; height:14px; transition:transform .2s; }
.submit-order-btn:hover svg { transform:translateX(3px); }

@media(max-width:900px) {
  .checkout-grid { grid-template-columns:1fr; }
  .order-summary-box { position:static; }
}
@media(max-width:500px) {
  .form-row { grid-template-columns:1fr; }
}

/* ---- ALERTS ---- */
.alert {
  padding:.9rem 1.2rem; border-radius:2px; font-size:.85rem; font-weight:600;
  margin-bottom:1.25rem; display:flex; align-items:flex-start; gap:.65rem;
}
.alert-success { background:rgba(100,180,80,.12); border:1px solid rgba(100,180,80,.3); color:#8fce7a; }
.alert-error   { background:rgba(196,98,45,.12);  border:1px solid rgba(196,98,45,.3);  color:#e08060; }
.alert-info    { background:rgba(232,160,32,.1);   border:1px solid var(--border);       color:var(--gold); }

/* ---- ORDER SUCCESS ---- */
.success-page { padding:10rem 0 5rem; text-align:center; max-width:560px; margin:0 auto; }
.success-icon { margin:0 auto 2rem; width:72px; height:72px; border:2px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); }
.success-icon svg { width:32px; height:32px; }
.success-page h1 { font-family:var(--font-d); font-size:2.5rem; font-weight:900; letter-spacing:-.03em; margin-bottom:.75rem; }
.success-page p { color:var(--cream-dim); font-size:.95rem; line-height:1.8; margin-bottom:2rem; }
.success-page .order-ref { font-family:var(--font-d); font-size:1.1rem; color:var(--gold); margin-bottom:2rem; }

/* ---- FOOTER ---- */
.shop-footer { background:var(--ink); border-top:1px solid var(--border); padding:2.2rem 0; }
.shop-footer-row { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.shop-footer-copy { font-size:.75rem; color:var(--cream-dim); }
.shop-footer-copy a { color:var(--gold); }
.shop-footer-links { display:flex; gap:1.5rem; }
.shop-footer-links a { font-size:.7rem; color:var(--cream-dim); transition:color .2s; }
.shop-footer-links a:hover { color:var(--gold); }

/* ---- RESPONSIVE ---- */
@media (max-width: 800px) {
  .filter-bar { gap: .9rem; }
  .filter-input { min-width: 130px; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (max-width: 640px) {
  /* Nav */
  #nav { padding: 1rem 1.25rem; }
  .nav-hamburger { display: block; }
  .nav-desktop { display: none !important; }

  /* Wrap */
  .wrap { padding: 0 1rem; }

  /* Masthead */
  .shop-masthead { padding: 5.5rem 0 2rem; }
  .shop-masthead h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); }

  /* Filters — stack vertically */
  .filter-bar { flex-direction: column; align-items: stretch; gap: .6rem; padding: 1rem 0; }
  .filter-label { margin-bottom: .2rem; }
  .filter-controls { flex-direction: column; align-items: stretch; gap: .5rem; }
  .filter-select, .filter-input { width: 100%; min-width: unset; }

  /* Products */
  .products-grid { grid-template-columns: 1fr 1fr; gap: 1.5px; }
  .product-info { padding: .875rem .875rem 1.1rem; }
  .product-name { font-size: .9rem; }
  .product-description { display: none; }

  /* Quick add: always show on touch since hover doesn't work */
  .quick-add { transform: translateY(0); font-size: .6rem; padding: .5rem; }

  /* Cart drawer */
  .cart-drawer { width: 100vw; }

  /* Toast */
  .toast { white-space: normal; text-align: center; width: calc(100vw - 2rem); left: 1rem; transform: translateY(50px); }
  .toast.show { transform: translateY(0); }

  /* Checkout */
  .checkout-page { padding: 6rem 0 3rem; }
  .checkout-grid { grid-template-columns: 1fr; }
  .order-summary-box { position: static; }
}

@media (max-width: 400px) {
  .products-grid { grid-template-columns: 1fr; }
  .product-card-img { padding-top: 75%; }
}