nav{background:rgba(7,46,36,.97);backdrop-filter:blur(14px)}
.nav-back{white-space:nowrap}
.nav-logo-img{height:130px}
.nav-back{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--au);border:1px solid rgba(201,168,76,.4);padding:.42rem 1rem;background:transparent;text-decoration:none;transition:all .3s;display:inline-flex;align-items:center;gap:.4rem}
.nav-back:hover{background:var(--au);color:var(--g)}
.shop-hero{background:var(--g);padding:10.5rem 3.5rem 4rem;position:relative;overflow:hidden}
.shop-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(201,168,76,.06) 0%,transparent 65%);pointer-events:none}
.shop-hero-inner{position:relative;z-index:1}
.shop-breadcrumb{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(201,168,76,.5);margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.shop-breadcrumb a{color:rgba(201,168,76,.5);text-decoration:none;transition:color .3s}
.shop-breadcrumb a:hover{color:var(--au)}
.shop-breadcrumb span{color:var(--au)}
.shop-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.5rem,5vw,4.5rem);font-weight:300;color:#fff;line-height:1}
.shop-title em{font-style:italic;color:var(--al)}
.shop-subtitle{font-size:.8rem;color:rgba(255,255,255,.45);letter-spacing:.08em;margin-top:.8rem}
.cat-tabs-wrap{background:var(--g)}
.cat-tabs{background:var(--g);border-bottom:1px solid rgba(201,168,76,.15);padding:.4rem 3.5rem;display:flex;flex-wrap:wrap;gap:0}
.cat-tab{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(201,168,76,.5);padding:1.1rem 1.6rem;border-bottom:2px solid transparent;transition:all .3s;white-space:nowrap;text-decoration:none;display:inline-block;flex-shrink:0}
.cat-tab:hover,.cat-tab.active{color:var(--au);border-bottom-color:var(--au)}
.shop-body{padding:3rem 3.5rem 5rem;background:var(--cr)}
.shop-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.shop-count{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tl)}
.shop-count strong{color:var(--g);font-weight:500}
.shop-sort{display:flex;align-items:center;gap:.6rem;font-size:.7rem;color:var(--tl)}
.shop-sort select{border:1px solid #ddd;padding:.4rem .7rem;font-family:'Jost',sans-serif;font-size:.72rem;color:var(--tx);outline:none;background:var(--cr);cursor:pointer}
.shop-sort select:focus{border-color:var(--au)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.6rem}
.scard{background:#fff;border:1px solid #e8e2d8;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;cursor:pointer;position:relative}
.scard:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(14,74,58,.12)}
.scard-img{aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.scard-img svg{width:100%;height:100%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.scard:hover .scard-img svg{transform:scale(1.05)}
.scard-badge{position:absolute;top:.8rem;left:.8rem;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;background:var(--au);color:var(--g);padding:.24rem .7rem;font-weight:500;z-index:2}
.scard-oos{position:absolute;top:.8rem;right:.8rem;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(200,50,50,.88);color:#fff;padding:.24rem .65rem;z-index:2}
.bs-star{position:absolute;top:.8rem;left:.8rem;z-index:2;display:inline-flex;align-items:center;gap:.3rem;background:var(--au);color:var(--g);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;padding:.24rem .7rem;font-weight:500}
.scard-body{padding:1.2rem 1.3rem 1.5rem}
.scard-cat{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g3);margin-bottom:.4rem;display:block}
.scard-name{font-family:'Cormorant Garamond',serif;font-size:1.12rem;font-weight:400;color:var(--g);margin-bottom:.6rem;line-height:1.3}
.scard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.8rem}
.scard-price{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--g2);font-weight:300}
.scard-btn{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--g2);background:transparent;color:var(--g2);padding:.45rem .9rem;cursor:pointer;transition:all .3s}
.scard-btn:hover:not([disabled]){background:var(--g2);color:#fff}
.scard-btn[disabled]{opacity:.35;cursor:not-allowed;border-color:#ccc;color:#ccc}
.shop-empty{text-align:center;padding:6rem 2rem;grid-column:1/-1}
.shop-empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.3}
.shop-empty-title{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;color:var(--g);margin-bottom:.5rem}
.shop-empty-sub{font-size:.8rem;color:var(--tl)}
.shop-footer{background:var(--g);color:rgba(245,233,200,.6);padding:3rem 3.5rem;text-align:center;border-top:1px solid rgba(201,168,76,.1)}
.sf-links{display:flex;justify-content:center;gap:2.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.sf-links a{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(201,168,76,.55);text-decoration:none;transition:color .3s}
.sf-links a:hover{color:var(--au)}
.sf-copy{font-size:.68rem;color:rgba(201,168,76,.3);letter-spacing:.08em}

/* ── Cart FAB + Sidebar (all devices) ───────────────── */
#cart-fab{display:none;position:fixed;bottom:calc(1.4rem + env(safe-area-inset-bottom,0px));right:calc(1.2rem + env(safe-area-inset-right,0px));z-index:900;background:var(--au);color:var(--g);padding:.95rem 1.6rem;cursor:pointer;font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;align-items:center;gap:.6rem;box-shadow:0 8px 26px rgba(0,0,0,.28);touch-action:manipulation;user-select:none}
#cart-fab:active{transform:scale(.96)}
#cart-count{background:var(--g);color:var(--au);border-radius:50%;min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.68rem;padding:0 4px}
#cart-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:997}
#cart-overlay.open{display:block}
#cart-sidebar{position:fixed;top:0;right:0;width:min(340px,100vw);height:100vh;height:100dvh;background:var(--g);border-left:1px solid rgba(201,168,76,.3);z-index:998;padding:1.6rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .3s cubic-bezier(.16,1,.3,1);visibility:hidden}
#cart-sidebar.open{transform:translateX(0);visibility:visible}
@media (max-width:480px){
  #cart-sidebar{width:100vw;border-left:none}
  #cart-fab{left:calc(1.2rem + env(safe-area-inset-left,0px));right:calc(1.2rem + env(safe-area-inset-right,0px));justify-content:center}
}

/* ── Product Popup + Gallery ────────────────────────── */
#pp-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100}
#pp-overlay.active{display:block}
#prod-popup{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;z-index:1101;max-height:92vh;max-height:92dvh;border-radius:20px 20px 0 0;overflow-y:auto;-webkit-overflow-scrolling:touch;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
#prod-popup.active{display:flex;animation:pp-up .32s cubic-bezier(.16,1,.3,1)}
@keyframes pp-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pp-close{position:absolute;top:.9rem;right:1rem;background:rgba(0,0,0,.07);border:none;font-size:1.1rem;color:#444;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;z-index:10;transition:background .2s}
.pp-close:hover{background:rgba(0,0,0,.14)}
/* Gallery */
#pp-img-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#f2efe8;overflow:hidden;flex-shrink:0;max-height:58vw}
.pp-slides{display:flex;height:100%;transition:transform .38s cubic-bezier(.16,1,.3,1)}
.pp-slide{min-width:100%;height:100%;overflow:hidden;flex-shrink:0}
.pp-slide img{width:100%;height:100%;object-fit:cover;display:block}
.pp-slide svg{width:100%;height:100%}
.pp-dots{position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);display:flex;gap:.45rem;z-index:3}
.pp-dot{width:8px;height:8px;border-radius:50%;border:5px solid transparent;background:rgba(255,255,255,.45);background-clip:padding-box;box-sizing:content-box;cursor:pointer;padding:0;transition:background .2s;flex-shrink:0}
.pp-dot.active{background:#fff;background-clip:padding-box}
.pp-arr{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.88);border:none;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;color:#072e24;transition:background .2s;line-height:1}
.pp-arr:hover{background:#fff}
.pp-prev{left:.65rem}
.pp-next{right:.65rem}
/* Body */
.pp-body{padding:1.4rem 1.5rem 3rem}
.pp-cat-lbl{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#888;display:block;margin-bottom:.45rem}
.pp-name{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:400;color:#072e24;line-height:1.2;margin-bottom:.5rem}
.pp-price{font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:#0e4a3a}
.pp-status{font-size:.72rem;color:#c0392b;margin-top:.3rem;letter-spacing:.04em}
.pp-add-btn{width:100%;padding:.88rem;background:#072e24;color:#C9A84C;border:none;font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .3s;margin-top:1.3rem;display:block}
.pp-add-btn:hover:not([disabled]){background:#0e4a3a}
.pp-add-btn[disabled]{opacity:.38;cursor:not-allowed}
body.popup-open{overflow:hidden}
@media (min-width:640px){
  #prod-popup{bottom:auto;top:50%;left:50%;right:auto;border-radius:8px;max-width:500px;width:92%;max-height:88vh;transform:translate(-50%,-50%)}
  #prod-popup.active{animation:pp-fade .26s ease}
  @keyframes pp-fade{from{opacity:0;transform:translate(-50%,-50%) scale(.93)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  #pp-img-wrap{aspect-ratio:4/3;max-height:320px}
}

/* ══════════════════════════════════
   SHOP RESPONSIVE
══════════════════════════════════ */

/* Tablet (769px – 1024px) */
@media (max-width: 1024px) {
  .nav-logo-img { height: 110px; }
  .shop-hero { padding: 9rem 2.5rem 3.5rem; }
  .cat-tabs { padding: 0 2rem; }
  .shop-body { padding: 2.5rem 2.5rem 4rem; }
  .shop-footer { padding: 2.5rem 2.5rem; }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .nav-logo-img { height: 90px; }
  .nav-back { font-size: .6rem; padding: .5rem .8rem; }
  .shop-hero { padding: 7.5rem 1.4rem 2.5rem; }
  .shop-title { font-size: clamp(1.9rem,7vw,2.8rem); }
  /* Tabs become one swipeable row (app-like) instead of wrapping */
  .cat-tabs { padding: 0 0.8rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tab { padding: 1rem 1rem; font-size: .62rem; }
  .shop-body { padding: 2rem 1.4rem 3.5rem; }
  .shop-meta { flex-direction: column; align-items: flex-start; gap: .8rem; }
  /* Prevent iOS auto-zoom on the sort dropdown */
  .shop-sort select { font-size: 16px; padding: .5rem .7rem; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
  .scard-body { padding: .9rem 1rem 1.1rem; }
  .scard-name { font-size: 1rem; }
  .scard-price { font-size: 1.05rem; }
  /* Comfortable thumb-size tap targets */
  .scard-btn { padding: .6rem 1rem; font-size: .62rem; }
  .pp-arr { width: 42px; height: 42px; }
  .pp-close { width: 40px; height: 40px; }
  .shop-footer { padding: 2.5rem 1.4rem; }
  .sf-links { gap: 1.2rem; }
}

/* Small phones (≤480px) */
@media (max-width: 480px) {
  .nav-logo-img { height: 76px; }
  .shop-hero { padding: 7rem 1rem 2rem; }
  .shop-body { padding: 1.8rem 1rem 3rem; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .cat-tabs { padding: 0 0.5rem; }
  .cat-tab { padding: .9rem .7rem; font-size: .6rem; letter-spacing: .1em; }
  .shop-footer { padding: 2rem 1rem; }
  .sf-links { gap: .8rem; }
}

/* Landscape phones — popup fits without cutting off the buy button */
@media (max-width: 900px) and (orientation: landscape) and (pointer: coarse) {
  #prod-popup { bottom: auto; top: 50%; left: 50%; right: auto; transform: translate(-50%,-50%); max-width: 640px; width: 94%; border-radius: 10px; flex-direction: row; max-height: 94dvh; }
  #pp-img-wrap { width: 46%; max-height: none; aspect-ratio: auto; }
  .pp-body { flex: 1; padding: 1.2rem 1.3rem 1.4rem; }
}

/* Ultra-wide desktops — keep content comfortably centered */
@media (min-width: 1800px) {
  .shop-hero, .cat-tabs, .shop-body, .shop-footer { padding-left: calc((100vw - 1640px) / 2); padding-right: calc((100vw - 1640px) / 2); }
}