/* ============================================================
   FROLLEIN S — shop layer
   Real <img> elements (class .shot) replacing the design-tool
   <image-slot> placeholders, mirroring every original rule so the
   live, database-driven store looks pixel-identical to the design.
   Also: empty-media state, cart drawer, toast, flash messages.
   ============================================================ */

/* ---- universal product image ---- */
.shot {
  display: block;
  object-fit: cover;
  width: 100%;
  background: var(--beige);
}

/* ---- collection cards (mirror .collection-card image-slot) ---- */
.collection-card .shot { width: 100%; transition: transform 1.2s var(--ease); }
.collection-card:hover .shot { transform: scale(1.045); }
.collection-card .tall .shot { height: clamp(440px, 62vw, 860px); }
.collection-card .short .shot { height: clamp(440px, 30vw, 415px); }

/* ---- arrivals / product cards (mirror .product-card image-slot) ---- */
.product-card .shot {
  width: 100%; height: 100%;
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}
.product-card:hover .shot { transform: scale(1.05); }

/* ---- lookbook (mirror .lb image-slot) ---- */
.lb .shot { width: 100%; transition: transform 1.2s var(--ease); }
.lb:hover .shot { transform: scale(1.04); }
.lb-a .shot { height: clamp(380px, 46vw, 680px); }
.lb-b .shot { height: clamp(420px, 52vw, 760px); }
.lb-c .shot { height: clamp(360px, 42vw, 600px); }
.lb-d .shot { height: clamp(320px, 38vw, 540px); }

/* ---- product detail gallery (mirror product.css) ---- */
.thumb .shot { width: 100%; height: 100%; pointer-events: none; }
.gallery-main .shot { width: 100%; height: clamp(460px, 64vw, 920px); }

/* ---- empty-media state: when a product has no image yet, keep the
   beige media box from the design and show a quiet maison label so the
   card never looks broken (this mirrors the original unfilled slot). ---- */
.shot-empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    repeating-linear-gradient(135deg,
      oklch(0.9 0.01 85) 0, oklch(0.9 0.01 85) 12px,
      oklch(0.88 0.012 85) 12px, oklch(0.88 0.012 85) 24px);
  color: oklch(0.45 0.01 70);
  font-size: var(--t-label); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
}
.collection-card .tall .shot-empty { height: clamp(440px, 62vw, 860px); }
.collection-card .short .shot-empty { height: clamp(440px, 30vw, 415px); }
.product-card .shot-empty { width: 100%; height: 100%; }
.lb-a .shot-empty { height: clamp(380px, 46vw, 680px); }
.lb-b .shot-empty { height: clamp(420px, 52vw, 760px); }
.lb-c .shot-empty { height: clamp(360px, 42vw, 600px); }
.lb-d .shot-empty { height: clamp(320px, 38vw, 540px); }
.gallery-main .shot-empty { height: clamp(460px, 64vw, 920px); }
.thumb .shot-empty { width: 100%; height: 100%; font-size: 0; }

/* ---- responsive parity with styles.css ---- */
@media (max-width: 860px) {
  .collection-card .short .shot,
  .collection-card .short .shot-empty { height: clamp(320px, 60vw, 460px); }
  .lb .shot,
  .lb .shot-empty { height: clamp(360px, 90vw, 560px) !important; }
}
@media (max-width: 980px) {
  .gallery-main .shot,
  .gallery-main .shot-empty { height: clamp(460px, 120vw, 760px); }
}

/* ============================================================
   CART DRAWER + TOAST  (added by the shop, on-brand)
   ============================================================ */
.cart-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0.1 0.004 70 / 0.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(420px, 92vw);
  background: var(--bone); color: var(--ink);
  transform: translateX(100%); transition: transform 0.5s var(--ease);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px oklch(0 0 0 / 0.18);
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.6rem clamp(1.4rem, 3vw, 2rem); border-bottom: 1px solid var(--line-light);
}
.cart-head h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.cart-close { background: none; border: none; cursor: pointer; color: var(--ink);
  font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase; }
.cart-items { flex: 1; overflow-y: auto; padding: clamp(1rem, 2vw, 1.6rem); }
.cart-empty { opacity: 0.5; text-align: center; padding: 3rem 1rem; font-family: var(--serif);
  font-style: italic; font-size: 1.2rem; }
.cart-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: center;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line-light); }
.cart-row img, .cart-row .ci-noimg { width: 64px; height: 84px; object-fit: cover; background: var(--beige); }
.cart-row .ci-name { font-family: var(--serif); font-size: 1.05rem; }
.cart-row .ci-meta { font-size: var(--t-label); letter-spacing: 0.06em; opacity: 0.55; margin-top: 0.2rem; }
.cart-row .ci-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-row .ci-remove { display: block; margin-top: 0.4rem; font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; cursor: pointer; background:none;border:none;color:inherit; }
.cart-row .ci-remove:hover { opacity: 0.9; }
.cart-foot { padding: clamp(1.2rem, 3vw, 1.8rem); border-top: 1px solid var(--line-light); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.1rem;
  font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; }
.cart-total b { font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
.cart-foot .btn--ink { width: 100%; justify-content: center; }

.toast {
  position: fixed; left: 50%; bottom: 2.2rem; transform: translateX(-50%) translateY(140%);
  z-index: 300; background: var(--ink); color: var(--bone);
  padding: 1em 1.6em; border-radius: 4px; font-size: var(--t-label);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  transition: transform 0.5s var(--ease); box-shadow: 0 20px 50px oklch(0 0 0 / 0.3);
}
.toast.show { transform: translateX(-50%) translateY(0); }