/* ══════════════════════════════
   SHOP — WALL ART
══════════════════════════════ */

.shop-hero{
  padding:6rem 5% 2.5rem;
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--steel);
}
.shop-hero h1{
  font-family:var(--fd);font-size:clamp(2.4rem,5.5vw,4.2rem);
  line-height:0.95;color:var(--white);letter-spacing:0.03em;
}
.shop-hero h1 span{
  background:linear-gradient(135deg,var(--silver3) 0%,var(--silver) 50%,var(--muted2) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.shop-hero-sub{
  color:var(--muted2);font-size:1rem;line-height:1.7;
  max-width:640px;margin-top:1rem;
}
.shop-hero-meta{
  display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.6rem;
  font-family:var(--fc);font-size:0.78rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--silver);
}
.shop-hero-meta div{display:flex;align-items:center;gap:8px}
.shop-hero-meta svg{width:16px;height:16px;opacity:0.7}

/* GRID */
.shop-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.4rem 1.2rem;padding:3rem 5%;
}
.shop-card{
  display:flex;flex-direction:column;gap:0.55rem;
  cursor:pointer;
}
.shop-card-img{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:var(--bg3);border:1px solid var(--steel);
  transition:border-color 0.25s;
}
.shop-card:hover .shop-card-img{border-color:var(--silver)}
.shop-card-img img{
  width:100%;height:100%;object-fit:contain;
  /* Mali padding da slika ne dodiruje ivice kartice */
  padding:6px;
  transition:transform 0.4s;
}
.shop-card:hover .shop-card-img img{transform:scale(1.04)}
.shop-card-sale{
  position:absolute;bottom:10px;left:10px;
  background:rgba(12,12,11,0.92);color:var(--white);
  font-family:var(--fc);font-size:0.7rem;font-weight:600;
  letter-spacing:0.1em;padding:5px 11px;border-radius:14px;
  text-transform:none;
}
.shop-card-mat{
  position:absolute;top:10px;right:10px;
  background:rgba(12,12,11,0.78);color:var(--silver3);
  font-family:var(--fc);font-size:0.62rem;letter-spacing:0.14em;
  text-transform:uppercase;padding:4px 9px;border:1px solid var(--silver-border);
}
.shop-card-id{
  font-family:var(--fc);font-size:0.85rem;letter-spacing:0.05em;
  color:var(--silver3);font-weight:500;padding-top:0.25rem;
}
.shop-card-name{
  font-family:var(--fb);font-size:0.85rem;color:var(--muted2);
  line-height:1.4;font-weight:300;
}
.shop-card-rating{
  display:flex;align-items:center;gap:6px;
  font-family:var(--fb);font-size:0.78rem;color:var(--muted);
}
.shop-card-stars{color:#f4b400;letter-spacing:1px;font-size:0.85rem}
.shop-card-price-row{
  display:flex;align-items:baseline;gap:0.6rem;flex-wrap:wrap;
  font-family:var(--fb);
}
.shop-card-price-old{
  font-size:0.85rem;color:var(--muted);text-decoration:line-through;
}
.shop-card-price-now{font-size:0.95rem;color:var(--silver3);font-weight:500}
.shop-card-price-from{font-size:0.7rem;color:var(--muted);margin-right:2px;text-transform:lowercase}
.shop-card-btn{
  margin-top:0.4rem;display:block;width:100%;
  background:transparent;color:var(--silver2);
  border:1px solid var(--steel2);
  font-family:var(--fc);font-size:0.78rem;font-weight:500;letter-spacing:0.1em;
  text-transform:none;padding:11px;cursor:pointer;
  transition:border-color 0.2s,color 0.2s,background 0.2s;
}
.shop-card-btn:hover{border-color:var(--silver);color:var(--white);background:var(--bg2)}

/* MODAL */
.shop-modal{
  display:none;position:fixed;inset:0;z-index:10500;
  background:rgba(0,0,0,0.88);
  align-items:center;justify-content:center;
  padding:1.2rem;overflow-y:auto;
}
.shop-modal.open{display:flex}
.shop-modal-box{
  background:var(--bg2);border:1px solid var(--steel2);
  max-width:880px;width:100%;
  max-height:calc(100vh - 2.4rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);
  position:relative;margin:auto;overflow:hidden;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.shop-modal-close{
  position:absolute;top:10px;right:12px;background:rgba(12,12,11,0.75);border:1px solid var(--silver-border);
  color:var(--silver3);font-size:1.1rem;cursor:pointer;line-height:1;z-index:10;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.shop-modal-close:hover{color:var(--white);background:rgba(12,12,11,0.95)}
.shop-modal-imgwrap{display:flex;flex-direction:column;background:#fff;min-width:0;max-height:calc(100vh - 2.4rem);overflow:hidden}
.shop-modal-img{flex:1;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0}
.shop-modal-img img{width:100%;height:100%;object-fit:contain;transition:opacity 0.15s;display:block;cursor:zoom-in}

/* ── FULLSCREEN IMAGE LIGHTBOX ── */
.shop-lightbox{
  display:none;position:fixed;inset:0;z-index:11000;
  background:rgba(0,0,0,0.97);
  align-items:center;justify-content:center;
  padding:1rem;
  -webkit-tap-highlight-color:transparent;
}
.shop-lightbox.open{display:flex}
.shop-lightbox-img{
  max-width:100%;max-height:96dvh;
  object-fit:contain;display:block;
  user-select:none;
  cursor:zoom-out;
}
.shop-lightbox-close{
  position:absolute;top:14px;right:14px;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.4);
  color:#fff;font-size:1.6rem;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s,transform 0.15s;
  z-index:5;
}
.shop-lightbox-close:hover{background:rgba(255,255,255,0.22);transform:scale(1.05)}

.shop-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:64px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.25);
  color:#fff;font-size:2rem;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s;
  z-index:5;font-family:var(--fc);
}
.shop-lightbox-nav:hover{background:rgba(255,255,255,0.18)}
.shop-lightbox-prev{left:14px;border-radius:0 6px 6px 0}
.shop-lightbox-next{right:14px;border-radius:6px 0 0 6px}
.shop-lightbox-counter{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.55);color:#fff;
  font-family:var(--fc);font-size:0.78rem;letter-spacing:0.12em;
  padding:6px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.15);
  z-index:5;
}
@media (max-width:480px){
  .shop-lightbox-nav{width:40px;height:54px;font-size:1.6rem}
  .shop-lightbox-prev{left:6px}
  .shop-lightbox-next{right:6px}
}
.shop-modal-thumbs{
  display:flex;gap:8px;padding:10px;background:var(--bg2);
  border-top:1px solid var(--steel);overflow-x:auto;flex-shrink:0;
}
.shop-thumb{
  flex:0 0 auto;width:72px;height:72px;padding:0;border:1px solid var(--steel2);
  background:var(--bg3);cursor:pointer;overflow:hidden;transition:border-color 0.2s,transform 0.15s;
}
.shop-thumb:active{transform:scale(0.96)}
.shop-thumb:hover{border-color:var(--silver2)}
.shop-thumb.active{border-color:var(--silver)}
.shop-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shop-modal-body{padding:1.4rem;display:flex;flex-direction:column;gap:0.85rem;overflow-y:auto;min-width:0;overscroll-behavior:contain}
.shop-modal-title{
  font-family:var(--fd);font-size:1.8rem;color:var(--white);letter-spacing:0.03em;line-height:1.05;
}
.shop-modal-desc{color:var(--muted2);font-size:0.92rem;line-height:1.65}
.shop-modal-meta{
  display:flex;gap:1rem;flex-wrap:wrap;
  font-family:var(--fc);font-size:0.72rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--silver);
  padding:0.6rem 0;border-top:1px solid var(--steel);border-bottom:1px solid var(--steel);
}
.shop-modal-meta b{color:var(--silver3);font-weight:500}

.shop-mode-toggle{display:flex;gap:0;margin-top:0.4rem}
.shop-mode-btn{
  flex:1;background:transparent;border:1px solid var(--steel2);
  color:var(--muted2);font-family:var(--fc);font-size:0.78rem;
  letter-spacing:0.12em;text-transform:uppercase;
  padding:10px;cursor:pointer;transition:all 0.2s;
}
.shop-mode-btn.active{background:var(--silver);color:var(--bg);border-color:var(--silver)}
.shop-mode-btn:not(.active):hover{border-color:var(--silver);color:var(--white)}

.shop-sizes{display:flex;flex-direction:column;gap:0.5rem}
.shop-size-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.7rem 0.9rem;
  border:1px solid var(--steel2);background:var(--bg3);
  cursor:pointer;transition:border-color 0.2s,background 0.2s;
}
.shop-size-row:hover{border-color:var(--silver)}
.shop-size-row.selected{border-color:var(--silver);background:var(--bg4)}
.shop-size-label{font-family:var(--fc);font-size:0.92rem;letter-spacing:0.06em;color:var(--silver3)}
.shop-size-price{font-family:var(--fd);font-size:1.15rem;color:var(--white);letter-spacing:0.02em}

.shop-custom-form{display:flex;flex-direction:column;gap:0.8rem}
.shop-field{display:flex;flex-direction:column;gap:0.35rem}
.shop-field label{
  font-family:var(--fc);font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--silver);
}
.shop-field input,.shop-field select{
  background:var(--bg3);border:1px solid var(--steel2);color:var(--silver3);
  padding:9px 12px;font-family:var(--fb);font-size:0.92rem;
  outline:none;transition:border-color 0.2s;
}
.shop-field input:focus,.shop-field select:focus{border-color:var(--silver)}
.shop-field-row{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem}

.shop-swatches{
  display:grid;grid-template-columns:repeat(10,1fr);gap:5px;
  padding:8px;background:var(--bg3);border:1px solid var(--steel2);
  max-height:120px;overflow-y:auto;
}
.shop-swatch{
  width:100%;aspect-ratio:1/1;padding:0;cursor:pointer;
  border:1px solid var(--steel2);outline:0;
  transition:transform 0.12s,border-color 0.15s,box-shadow 0.15s;
}
.shop-swatch:hover{transform:scale(1.12);border-color:var(--silver2);z-index:2}
.shop-swatch.selected{
  border:2px solid var(--silver3);
  box-shadow:0 0 0 2px var(--bg2),0 0 0 3px var(--silver),0 4px 10px rgba(0,0,0,0.5);
  transform:scale(1.08);
}
@media (max-width:520px){
  .shop-swatches{grid-template-columns:repeat(8,1fr)}
}

.shop-custom-price{
  margin-top:0.4rem;padding:0.8rem;background:var(--bg3);border:1px solid var(--steel2);
  display:flex;align-items:baseline;justify-content:space-between;
}
.shop-custom-price-lbl{
  font-family:var(--fc);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted2);
}
.shop-custom-price-val{font-family:var(--fd);font-size:1.6rem;color:var(--silver3)}

.shop-add-btn{
  background:linear-gradient(135deg,var(--silver2),var(--silver));color:var(--bg);
  font-family:var(--fc);font-size:0.85rem;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;padding:14px;border:none;cursor:pointer;
  transition:opacity 0.2s,transform 0.15s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.shop-add-btn:hover{opacity:0.88;transform:translateY(-2px)}
.shop-add-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}

/* CART BUTTON IN NAV */
.cart-btn{
  position:relative;display:flex;align-items:center;gap:7px;
  font-family:var(--fc);font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;
  padding:8px 14px;background:transparent;color:var(--silver2);
  border:1px solid var(--steel2);cursor:pointer;text-decoration:none;
  transition:border-color 0.2s,color 0.2s;border-radius:3px;
}
.cart-btn:hover{border-color:var(--silver);color:var(--white)}
.cart-badge{
  display:none;position:absolute;top:-6px;right:-6px;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--silver);color:var(--bg);
  font-family:var(--fc);font-size:0.68rem;font-weight:700;
  border-radius:9px;align-items:center;justify-content:center;line-height:1;
}
.cart-btn.has-items .cart-badge{display:flex}

/* CART DRAWER */
.cart-drawer{
  display:none;position:fixed;inset:0;z-index:10600;
  background:rgba(0,0,0,0.7);
}
.cart-drawer.open{display:block}
.cart-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);
  background:var(--bg2);border-left:1px solid var(--steel2);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 0.25s ease-out;
}
.cart-drawer.open .cart-panel{transform:translateX(0)}
.cart-head{
  padding:1.4rem;border-bottom:1px solid var(--steel);
  display:flex;align-items:center;justify-content:space-between;
}
.cart-head h2{
  font-family:var(--fd);font-size:1.5rem;color:var(--white);letter-spacing:0.04em;
}
.cart-close{
  background:none;border:none;color:var(--silver);font-size:1.5rem;cursor:pointer;line-height:1;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
}
.cart-close:hover{color:var(--white)}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.4rem;overscroll-behavior:contain}
.cart-empty{
  text-align:center;color:var(--muted);padding:3rem 1rem;
  font-family:var(--fc);letter-spacing:0.12em;text-transform:uppercase;font-size:0.85rem;
}
.cart-item{
  display:grid;grid-template-columns:64px 1fr auto;gap:0.9rem;
  padding:0.9rem 0;border-bottom:1px solid var(--steel);
}
.cart-item-img{width:64px;height:64px;background:var(--bg3);overflow:hidden}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{display:flex;flex-direction:column;gap:0.2rem;min-width:0}
.cart-item-name{
  font-family:var(--fc);font-size:0.88rem;font-weight:600;color:var(--white);
  letter-spacing:0.04em;text-transform:uppercase;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cart-item-meta{font-size:0.78rem;color:var(--muted2);line-height:1.4}
.cart-item-price{font-family:var(--fd);font-size:1.1rem;color:var(--silver3);align-self:center}
.cart-item-actions{display:flex;align-items:center;gap:0.4rem;margin-top:0.3rem}
.cart-qty{
  display:flex;align-items:center;border:1px solid var(--steel2);
}
.cart-qty button{
  background:transparent;border:none;color:var(--silver);
  width:24px;height:24px;cursor:pointer;font-size:0.95rem;
}
.cart-qty button:hover{color:var(--white)}
.cart-qty span{
  min-width:24px;text-align:center;font-family:var(--fc);
  font-size:0.82rem;color:var(--silver3);
}
.cart-item-remove{
  background:none;border:none;color:var(--muted);font-size:0.72rem;
  font-family:var(--fc);letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;padding:0;
}
.cart-item-remove:hover{color:#e15c5c}

.cart-foot{
  padding:1.2rem 1.4rem;border-top:1px solid var(--steel);
  background:var(--bg);display:flex;flex-direction:column;gap:0.6rem;
}
.cart-row{display:flex;justify-content:space-between;font-size:0.92rem;color:var(--muted2)}
.cart-row.total{
  padding-top:0.6rem;border-top:1px solid var(--steel);
  font-family:var(--fc);font-size:1rem;letter-spacing:0.06em;color:var(--silver3);
}
.cart-row.total b{font-family:var(--fd);font-size:1.5rem;color:var(--white);font-weight:400}
.cart-checkout{
  background:linear-gradient(135deg,var(--silver2),var(--silver));color:var(--bg);
  font-family:var(--fc);font-size:0.85rem;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;padding:14px;border:none;cursor:pointer;
  margin-top:0.6rem;transition:opacity 0.2s,transform 0.15s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.cart-checkout:hover{opacity:0.88;transform:translateY(-2px)}

/* CHECKOUT FORM */
.checkout-form{display:flex;flex-direction:column;gap:0.8rem;padding:1.4rem;overflow-y:auto;flex:1}
.checkout-form h3{
  font-family:var(--fc);font-size:0.78rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--silver);margin-top:0.6rem;
}
.checkout-form h3:first-child{margin-top:0}
.checkout-back{
  background:none;border:none;color:var(--silver);
  font-family:var(--fc);font-size:0.78rem;letter-spacing:0.12em;
  text-transform:uppercase;cursor:pointer;padding:0;align-self:flex-start;
  display:flex;align-items:center;gap:6px;margin-bottom:0.4rem;
}
.checkout-back:hover{color:var(--white)}
.checkout-summary{
  background:var(--bg3);border:1px solid var(--steel);padding:0.9rem;
  font-size:0.88rem;color:var(--muted2);
}
.checkout-summary div{display:flex;justify-content:space-between;padding:0.18rem 0}
.checkout-summary div.total{
  font-family:var(--fc);color:var(--silver3);letter-spacing:0.05em;
  border-top:1px solid var(--steel);margin-top:0.5rem;padding-top:0.5rem;
}
.checkout-summary div.total b{font-family:var(--fd);font-size:1.3rem;color:var(--white);font-weight:400}

.success-screen{
  padding:3rem 1.5rem;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:1rem;flex:1;justify-content:center;
}
.success-icon{
  width:64px;height:64px;border-radius:50%;
  background:rgba(178,184,192,0.15);border:1px solid var(--silver);
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;color:var(--silver3);
}
.success-screen h2{
  font-family:var(--fd);font-size:1.8rem;color:var(--white);letter-spacing:0.04em;
}
.success-screen p{color:var(--muted2);max-width:320px;line-height:1.65;font-size:0.92rem}

/* Hide floating page widgets while a shop overlay is open */
body.shop-overlay-open #wa-bubble,
body.shop-overlay-open #wa-float,
body.shop-overlay-open #back-to-top,
body.shop-overlay-open #cookie-banner{
  display:none !important;
}

/* RESPONSIVE */
@media (max-width:860px){
  .shop-modal{padding:0;align-items:stretch;justify-content:stretch}
  .shop-modal-box{
    display:flex;flex-direction:column;
    grid-template-columns:none;
    max-width:none;width:100%;
    height:100dvh;max-height:100dvh;
    overflow:hidden;       /* box itself doesn't scroll — body does */
    border:none;
  }
  .shop-modal-imgwrap{flex-shrink:0;max-height:38dvh}
  .shop-modal-img{aspect-ratio:auto;max-height:38dvh;min-height:0}
  .shop-modal-img img{max-height:38dvh;width:auto;max-width:100%;object-fit:contain}
  .shop-modal-body{
    flex:1 1 auto;min-height:0;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:1.1rem 1.1rem 1.1rem;
    gap:0.7rem;
  }
  .shop-modal-thumbs{padding:6px 8px}
  .shop-swatches{grid-template-columns:repeat(7,1fr);max-height:none}
  /* Sticky CTA — pinned to bottom of body's scroll container */
  .shop-add-btn{
    position:sticky;bottom:-1.1rem;
    margin:0.6rem -1.1rem -1.1rem;
    padding:16px 14px;font-size:0.92rem;
    z-index:6;
    box-shadow:0 -8px 16px rgba(12,12,11,0.55);
  }
  .cart-panel{width:100%}
  .shop-grid{padding:2rem 5%;gap:1.2rem}
  .shop-hero{padding:5rem 5% 2rem}
  .shop-modal-title{font-size:1.4rem}
  .shop-modal-close{
    top:10px;right:10px;width:42px;height:42px;font-size:1.5rem;
    background:rgba(12,12,11,0.92);border:1px solid var(--silver-border);
    box-shadow:0 4px 14px rgba(0,0,0,0.6);z-index:50;
  }
  .shop-modal-imgwrap{max-height:42dvh}
  .shop-modal-img{max-height:42dvh}
  .shop-modal-img img{max-height:42dvh}
}