/* ================================================================
   COMPONENTS.CSS — Lem Accessory v2
   Buttons · Product Card · Modal · Drawers · Filters
   ================================================================ */

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:.6875rem 1.375rem; font-family:var(--ff-body); font-size:var(--text-sm);
  font-weight:600; letter-spacing:0.02em; line-height:1; border-radius:var(--r-sm);
  border:1.5px solid transparent; transition:all var(--dur-base) var(--ease);
  cursor:pointer; white-space:nowrap; user-select:none; -webkit-tap-highlight-color:transparent;
}
.btn:disabled{opacity:.45;pointer-events:none}
.btn--primary { background:var(--c-brown); color:#fff; border-color:var(--c-brown); }
.btn--primary:hover { background:var(--c-brown-mid); transform:translateY(-1px); box-shadow:var(--sh-md); }
.btn--outline { background:transparent; color:var(--c-brown); border-color:var(--c-border-2); }
.btn--outline:hover { border-color:var(--c-brown); background:var(--c-brown-dim); }
.btn--ghost { background:transparent; border-color:transparent; color:var(--c-text-muted); }
.btn--ghost:hover { background:var(--c-brown-dim); color:var(--c-brown); }
.btn--wa { background:var(--c-wa); color:#fff; border-color:var(--c-wa); }
.btn--wa:hover { background:var(--c-wa-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,211,102,.3); }
.btn--sm { padding:.4375rem .875rem; font-size:var(--text-xs); }
.btn--lg { padding:.875rem 2rem; font-size:var(--text-base); }
.btn--xl { padding:1rem 2.5rem; font-size:var(--text-md); }
.btn--block { width:100%; justify-content:center; }

/* ── PRODUCT CARD — with hover 2nd photo ── */
.pcard {
  background:var(--c-white);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
  cursor:pointer;
  display:flex; flex-direction:column;
}
@media (hover: hover) and (pointer: fine) {
  .pcard:hover {
    box-shadow:var(--sh-lg);
    transform:translateY(-4px);
    border-color:var(--c-border-2);
  }
}

/* Photo container — 3:4 ratio */
.pcard__media {
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--c-bg-2);
}
/* Primary photo */
.pcard__img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:opacity .5s var(--ease-out), transform .65s var(--ease-out);
  z-index:1;
}
/* Secondary (hover) photo */
.pcard__img-2 {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:opacity .5s var(--ease-out);
  opacity:0; z-index:2;
}
.pcard:hover .pcard__img   { opacity:0; transform:scale(1.03); }
.pcard:hover .pcard__img-2 { opacity:1; }
/* fallback placeholder */
.pcard__placeholder {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--c-bg-2), var(--c-cream-dark));
}
.pcard__placeholder-icon { width:56px; height:56px; opacity:.25; }

/* Tags */
.pcard__tags { position:absolute; top:10px; left:10px; z-index:3; display:flex; gap:5px; flex-wrap:wrap; }
.pcard__tag {
  padding:3px 9px; font-family:var(--ff-body); font-size:var(--text-2xs);
  font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; border-radius:2px; line-height:1.5;
}
.pcard__tag--new  { background:var(--c-brown); }
.pcard__tag--sale { background:var(--c-red); }
.pcard__tag--hot  { background:var(--c-brown-mid); }

/* Discount badge */
.pcard__disc {
  position:absolute; top:10px; right:10px; z-index:3;
  padding:3px 8px; background:rgba(192,57,43,0.9); color:#fff;
  font-size:var(--text-2xs); font-weight:700; border-radius:2px;
}

/* Wishlist */
.pcard__wish {
  position:absolute; bottom:10px; right:10px; z-index:3;
  width:34px; height:34px; background:rgba(255,255,255,0.9);
  border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-sm); transition:all var(--dur-base) var(--ease);
  opacity:0;
}
.pcard:hover .pcard__wish, .pcard__wish.active { opacity:1; }
.pcard__wish svg { width:16px; height:16px; }
.pcard__wish:hover { background:#fff; transform:scale(1.12); }
.pcard__wish.active svg { fill:var(--c-red); stroke:var(--c-red); }

/* Quick view on hover */
.pcard__quick {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  padding:var(--sp-3) var(--sp-4);
  background:var(--c-brown);
  color:#fff; font-family:var(--ff-body); font-size:var(--text-sm); font-weight:600;
  text-align:center; letter-spacing:0.04em;
  transform:translateY(100%); transition:transform .3s var(--ease-out);
}
.pcard:hover .pcard__quick { transform:translateY(0); }

/* Card body */
.pcard__body { padding:14px 16px 18px; flex:1; display:flex; flex-direction:column; }
.pcard__cat {
  font-size:var(--text-xs); font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--c-brown-light); margin-bottom:4px;
}
.pcard__name {
  font-family:var(--ff-head); font-size:1rem; font-weight:600;
  color:var(--c-text); line-height:1.35; margin-bottom:var(--sp-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; min-height:2.7em;
}
.pcard__pricing { display:flex; align-items:baseline; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.pcard__price { font-family:var(--ff-head); font-size:1.1rem; font-weight:700; color:var(--c-brown); }
.pcard__old { font-size:var(--text-sm); color:var(--c-text-light); text-decoration:line-through; }
.pcard__cart-btn {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:100%; padding:.625rem; background:var(--c-brown); color:#fff;
  font-family:var(--ff-body); font-size:var(--text-xs); font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; border-radius:var(--r-sm);
  transition:all var(--dur-fast) var(--ease); border:1.5px solid var(--c-brown);
  margin-top:auto;
}
.pcard__cart-btn:hover { background:var(--c-brown-mid); transform:translateY(-1px); box-shadow:var(--sh-md); }

/* ── CART SECURE NOTE ── */
.cart-secure-note {
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:.7rem; color:var(--c-text-light); text-align:center;
  margin-top:var(--sp-3);
}

/* ── AUTH BADGE ── */
.auth-badge {
  background: var(--c-brown) !important;
  font-size: .55rem !important;
  width: 14px !important; height: 14px !important;
}

/* ── AUTH MODAL ── */
.auth-modal-bg {
  position:fixed; inset:0; z-index:1200;
  background:rgba(28,20,14,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease);
  padding:var(--pad-x);
}
.auth-modal-bg.open { opacity:1; pointer-events:all; }
.auth-modal {
  background:var(--c-bg); border-radius:var(--r-xl);
  width:100%; max-width:400px;
  padding: clamp(20px,5vw,40px) clamp(16px,5vw,36px);
  position:relative; box-shadow:var(--sh-xl);
  transform:translateY(16px); transition:transform var(--dur-slow) var(--ease);
  max-height:90svh; overflow-y:auto;
  box-sizing:border-box;
}
@media(max-width:480px){
  .auth-modal { border-radius:var(--r-lg) var(--r-lg) 0 0; margin-top:auto; margin-bottom:0; max-height:92svh; }
  .auth-modal-bg { align-items:flex-end; padding:0; }
}
.auth-modal-bg.open .auth-modal { transform:translateY(0); }
.auth-modal__close {
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:var(--r-full);
  background:var(--c-bg-2); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-text-muted); transition:background var(--dur-fast) var(--ease);
  z-index:2; flex-shrink:0;
}
.auth-modal__close:hover { background:var(--c-bg-3); }
.auth-tabs {
  display:flex; gap:0; margin-bottom:var(--sp-7);
  background:var(--c-bg-2); border-radius:var(--r-md); padding:3px;
}
.auth-tab {
  flex:1; padding:var(--sp-2) var(--sp-4); border-radius:calc(var(--r-md) - 2px);
  font-size:var(--text-sm); font-weight:600; color:var(--c-text-muted);
  background:transparent; border:none; cursor:pointer;
  transition:all var(--dur-fast) var(--ease);
}
.auth-tab.active { background:var(--c-white); color:var(--c-brown); box-shadow:var(--sh-sm); }
.auth-panel { display:none; }
.auth-panel.active { display:block; }
.auth-avatar {
  width:64px; height:64px; border-radius:var(--r-full);
  background:var(--c-bg-2); border:2px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--sp-4); color:var(--c-text-muted);
}
.auth-avatar--active { background:var(--c-brown-dim); border-color:var(--c-brown); color:var(--c-brown); }
.auth-modal__title { font-family:var(--ff-head); font-size:var(--text-xl); font-weight:700; color:var(--c-brown); text-align:center; margin-bottom:4px; }
.auth-modal__sub { font-size:var(--text-sm); color:var(--c-text-muted); text-align:center; margin-bottom:var(--sp-6); }
.auth-form { display:flex; flex-direction:column; gap:var(--sp-4); }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-field label { font-size:var(--text-xs); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-text-2); }
.auth-field input {
  padding:.75rem var(--sp-4); border:1.5px solid var(--c-border);
  border-radius:var(--r-sm); font-size:var(--text-sm); background:var(--c-white);
  color:var(--c-text); transition:border-color var(--dur-fast) var(--ease);
  font-family:var(--ff-body); width:100%; box-sizing:border-box;
}
.auth-field input:focus { outline:none; border-color:var(--c-brown); }
.auth-or { text-align:center; position:relative; color:var(--c-text-light); font-size:var(--text-xs); }
.auth-or::before,.auth-or::after { content:''; position:absolute; top:50%; width:40%; height:1px; background:var(--c-border); }
.auth-or::before { left:0; }
.auth-or::after { right:0; }
.auth-or span { background:var(--c-bg); padding:0 var(--sp-3); position:relative; }
.auth-google-btn { gap:var(--sp-3); font-weight:600; }
.auth-terms { font-size:.7rem; color:var(--c-text-light); text-align:center; }
.auth-terms a { color:var(--c-brown-mid); }
.auth-forgot { text-align:right; font-size:.72rem; color:var(--c-brown-mid); cursor:pointer; text-decoration:underline; margin-top:-8px; background:none; border:none; }
.auth-forgot:hover { color:var(--c-brown); }
.auth-success { color:var(--c-green,#38a169); font-size:.8rem; text-align:center; padding:10px; background:#f0fff4; border-radius:var(--r-sm); }
.auth-error  { color:var(--c-red,#e53e3e);   font-size:.8rem; text-align:center; padding:10px; background:#fff5f5; border-radius:var(--r-sm); }

/* ── PRODUCTS GRID ── */
.pgrid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4);
}
@media(min-width:640px){.pgrid{gap:var(--sp-5)}}
@media(min-width:768px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.pgrid{grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}}

/* ── PRODUCT CAROUSEL (desktop & mobile swipe) ── */
.pcarousel { position:relative; }
.pcarousel__btn {
  position: absolute; top: calc(50% - 20px); transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-white); border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--sh-md); color: var(--c-brown);
  transition: all .2s;
}
.pcarousel__btn:hover { background: var(--c-brown); color: var(--c-white); }
.pcarousel__prev { left: -22px; }
.pcarousel__next { right: -22px; }
@media(max-width:960px) {
  .pcarousel__btn { display: none !important; }
}

.pcarousel__track.pgrid {
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-bottom:var(--sp-2);
}
.pcarousel__track.pgrid::-webkit-scrollbar { display:none; }
.pcarousel__track.pgrid > .pcard {
  scroll-snap-align:start;
}
@media(max-width:639px){
  .pcarousel__track.pgrid { gap:var(--sp-3); }
  .pcarousel__track.pgrid > .pcard {
    flex:0 0 calc(50% - var(--sp-3) / 2); min-width:calc(50% - var(--sp-3) / 2);
  }
}
@media(min-width:640px) and (max-width:1099px){
  .pcarousel__track.pgrid { gap:var(--sp-5); }
  .pcarousel__track.pgrid > .pcard {
    flex:0 0 calc(33.333% - var(--sp-5) * 2/3); min-width:calc(33.333% - var(--sp-5) * 2/3);
  }
}
@media(min-width:1100px){
  .pcarousel__track.pgrid { gap:var(--sp-6); }
  .pcarousel__track.pgrid > .pcard {
    flex:0 0 calc(25% - var(--sp-6) * 3/4); min-width:calc(25% - var(--sp-6) * 3/4);
  }
}

.pcarousel__dots {
  display:flex; justify-content:center; gap:8px;
  padding:var(--sp-4) 0 0;
}
.pcarousel__dot {
  width:8px; height:8px; border-radius:var(--r-full);
  background:var(--c-border-2); cursor:pointer;
  transition:all .3s var(--ease);
}
.pcarousel__dot.active {
  background:var(--c-brown); width:24px; border-radius:4px;
}

.pgrid--3{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.pgrid--3{grid-template-columns:repeat(3,1fr)}}

/* ── FILTER SIDEBAR CONTENT ── */
.filter-inner { padding: 24px 20px; }
.filter-inner__head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom:1px solid var(--c-border);
}
.filter-inner__title { font-family:var(--ff-head); font-size:1rem; font-weight:700; }
.filter-clear-btn {
  font-size: .75rem; font-weight: 600; color:var(--c-brown-light);
  letter-spacing:0.04em; text-decoration:underline; text-underline-offset:3px;
  padding: 4px 12px; border-radius: 100px; transition: all .2s ease;
}
.filter-clear-btn:hover { background: var(--c-brown-dim); color: var(--c-brown); }

.filter-group { margin-bottom: 28px; }
.filter-group__label {
  font-size: .65rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform:uppercase; color:var(--c-brown-light); margin-bottom: 12px;
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--c-bg-3);
}
.filter-group__toggle { font-size:.8rem; cursor:pointer; color:var(--c-text-muted); transition:transform var(--dur-base) var(--ease); }
.filter-group__toggle.is-closed { transform:rotate(-90deg); }

.filter-opts { display:flex; flex-direction:column; gap: 3px; }
.filter-opt {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px; border-radius: 10px;
  font-size: .84rem; font-weight: 500; color:var(--c-text-muted);
  cursor:pointer; transition:all .2s ease; border: 1px solid transparent;
}
.filter-opt:hover { background:var(--c-bg-2); color:var(--c-text); border-color: var(--c-border); }
.filter-opt.active {
  background: var(--c-brown); color:#fff; font-weight: 600;
  border-color: var(--c-brown); box-shadow: 0 2px 8px rgba(61,44,30,0.15);
}
.filter-opt__cnt {
  font-size: .68rem; padding: 2px 8px; font-weight: 600;
  background:rgba(0,0,0,0.05); border-radius: 100px; min-width: 22px; text-align: center;
}
.filter-opt.active .filter-opt__cnt { background:rgba(255,255,255,0.2); }

/* Price range */
.price-range { padding: 4px 4px 0; }
.price-range input[type=range] {
  width:100%; accent-color:var(--c-brown); height: 4px; cursor:pointer; border-radius: 2px;
}
.price-range__vals {
  display:flex; justify-content:space-between; margin-top: 10px;
  font-size: .75rem; color:var(--c-text-muted); font-weight: 600;
}

/* Size pills */
.size-opts { display:flex; flex-wrap:wrap; gap: 8px; }
.size-opt {
  padding: 7px 16px; border: 1.5px solid var(--c-border);
  border-radius: 100px; font-size: .78rem; font-weight: 600;
  color:var(--c-text-muted); cursor:pointer; transition:all .2s ease; user-select:none;
}
.size-opt:hover { border-color:var(--c-brown-light); color:var(--c-brown); background: var(--c-brown-dim); }
.size-opt.active { border-color:var(--c-brown); background:var(--c-brown); color:#fff; box-shadow: 0 2px 8px rgba(61,44,30,0.12); }

/* Color dots */
.color-opts { display:flex; flex-wrap:wrap; gap: 10px; }
.color-opt {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid transparent; cursor:pointer; position:relative;
  transition: all .2s ease; box-shadow: 0 0 0 1px var(--c-border);
}
.color-opt:hover { transform:scale(1.15); box-shadow: 0 0 0 1px var(--c-brown-light); }
.color-opt.active { box-shadow: 0 0 0 2.5px var(--c-brown); transform: scale(1.1); }

/* ── SHOP TOPBAR ── */
.shop-topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; padding: 20px 24px 16px;
  border-bottom:1px solid var(--c-border); flex-wrap:wrap;
}
.shop-topbar__left { display:flex; align-items:center; gap: 12px; flex-wrap: wrap; }
.shop-topbar__heading { font-family:var(--ff-head); font-size:var(--text-xl); font-weight:700; }
.shop-topbar__count { font-size:var(--text-sm); color:var(--c-text-muted); }
.filter-toggle {
  display:flex; align-items:center; gap: 8px; padding: 9px 18px;
  border: 1.5px solid var(--c-border); border-radius: 100px;
  font-size: .82rem; font-weight: 600; color:var(--c-text-2); transition:all .2s ease;
}
.filter-toggle svg { width: 16px; height: 16px; }
.filter-toggle:hover { border-color:var(--c-brown); color:var(--c-brown); background: var(--c-brown-dim); }
@media(min-width:1100px){.filter-toggle{display:none}}

/* Sort select */
.sort-select {
  padding: 9px 14px; border: 1.5px solid var(--c-border);
  border-radius: 10px; font-size: .82rem; font-weight: 500;
  background:var(--c-surface); color:var(--c-text-2); cursor:pointer; outline:none;
  transition:border-color .2s ease;
}
.sort-select:focus { border-color:var(--c-brown); }

/* Active filter chips */
.active-chips { display:flex; flex-wrap:wrap; gap: 8px; padding: 12px 24px 0; }
.chip {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:4px 10px 4px 12px;
  background:var(--c-bg-2); border:1px solid var(--c-border-2);
  border-radius:var(--r-full); font-size:var(--text-xs); font-weight:600;
  color:var(--c-text-2);
}
.chip__rm { color:var(--c-text-muted); transition:color var(--dur-fast) var(--ease); }
.chip__rm:hover { color:var(--c-red); }

/* ── SIDE DRAWER (Cart / Wishlist) ── */
.sdrawer {
  position:fixed; top:0; right:0; bottom:0;
  width:min(460px,100vw);
  background:var(--c-white);
  z-index:1100; display:flex; flex-direction:column;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--dur-drawer) var(--ease-out), visibility 0s var(--dur-drawer);
  box-shadow:var(--sh-xl);
}
.sdrawer.open { transform:translateX(0); visibility:visible; transition:transform var(--dur-drawer) var(--ease-out), visibility 0s 0s; }
.sdrawer__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--c-border); flex-shrink:0;
}
.sdrawer__title { font-family:var(--ff-head); font-size:1.05rem; font-weight:700; }
.sdrawer__close {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-full); color:var(--c-text-muted);
  transition:all var(--dur-fast) var(--ease);
}
.sdrawer__close:hover { background:var(--c-bg-2); color:var(--c-brown); }
.sdrawer__body {
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3);
}
.sdrawer__foot {
  padding:var(--sp-5) var(--sp-6); border-top:1px solid var(--c-border);
  flex-shrink:0; display:flex; flex-direction:column; gap:var(--sp-3);
}
.sdrawer__total {
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--text-base);
}
.sdrawer__total-lbl { font-weight:500; color:var(--c-text-muted); }
.sdrawer__total-amt { font-family:var(--ff-head); font-size:1.35rem; font-weight:700; color:var(--c-brown); }

/* Cart item */
.cart-item {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-4); background:var(--c-bg); border-radius:var(--r-md);
  border:1px solid var(--c-border);
}
.cart-item__img {
  width:72px; height:96px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--c-bg-2); flex-shrink:0; border:1px solid var(--c-border);
}
.cart-item__img img { width:100%; height:100%; object-fit:cover; }
.cart-item__placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.cart-item__placeholder svg { width:28px; height:28px; opacity:.25; }
.cart-item__info { flex:1; min-width:0; }
.cart-item__name { font-family:var(--ff-head); font-size:var(--text-sm); font-weight:600; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-item__meta { font-size:var(--text-xs); color:var(--c-text-muted); margin-bottom:var(--sp-3); }
.cart-item__price { font-family:var(--ff-head); font-size:var(--text-base); font-weight:700; color:var(--c-brown); }
.cart-item__actions { display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); }
.qty-btn {
  width:26px; height:26px; border:1px solid var(--c-border); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  color:var(--c-text-muted); transition:all var(--dur-fast) var(--ease);
}
.qty-btn:hover { border-color:var(--c-brown); color:var(--c-brown); }
.qty-num { font-size:var(--text-sm); font-weight:700; min-width:20px; text-align:center; }
.cart-item__rm { margin-left:auto; color:var(--c-text-light); transition:color var(--dur-fast) var(--ease); }
.cart-item__rm:hover { color:var(--c-red); }

/* ── WISHLIST ITEM ── */
.wl-item {
  padding:var(--sp-4); background:var(--c-bg); border-radius:var(--r-md);
  border:1px solid var(--c-border); transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wl-item:hover { border-color:var(--c-border-2); box-shadow:var(--sh-sm); }
.wl-item__top { display:flex; align-items:flex-start; gap:var(--sp-3); }
.wl-item__img {
  width:72px; height:96px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--c-bg-2); flex-shrink:0; border:1px solid var(--c-border); cursor:pointer;
  transition:opacity var(--dur-fast) var(--ease);
}
.wl-item__img:hover { opacity:.85; }
.wl-item__img img { width:100%; height:100%; object-fit:cover; }
.wl-item__info { flex:1; min-width:0; }
.wl-item__name {
  font-family:var(--ff-head); font-size:var(--text-sm); font-weight:600;
  margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:pointer; transition:color var(--dur-fast) var(--ease);
}
.wl-item__name:hover { color:var(--c-brown); }
.wl-item__meta { font-size:var(--text-xs); color:var(--c-text-muted); margin-bottom:var(--sp-2); }
.wl-item__price { font-family:var(--ff-head); font-size:var(--text-base); font-weight:700; color:var(--c-brown); display:flex; align-items:baseline; gap:var(--sp-2); }
.wl-item__old { font-size:var(--text-xs); color:var(--c-text-light); text-decoration:line-through; font-weight:500; }
.wl-item__remove {
  width:28px; height:28px; border-radius:var(--r-full); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-text-light); background:transparent;
  border:1px solid transparent; transition:all var(--dur-fast) var(--ease);
  cursor:pointer; margin-top:2px;
}
.wl-item__remove:hover { background:rgba(192,57,43,0.08); color:var(--c-red); border-color:rgba(192,57,43,0.15); }
.wl-item__actions {
  display:flex; gap:var(--sp-2); margin-top:var(--sp-3);
  padding-top:var(--sp-3); border-top:1px solid var(--c-border);
}
.wl-item__cart-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:8px 12px; background:var(--c-brown); color:#fff;
  font-family:var(--ff-body); font-size:var(--text-xs); font-weight:700;
  letter-spacing:0.04em; border-radius:var(--r-sm);
  border:1.5px solid var(--c-brown); transition:all var(--dur-fast) var(--ease);
  cursor:pointer;
}
.wl-item__cart-btn:hover { background:var(--c-brown-mid); transform:translateY(-1px); box-shadow:var(--sh-sm); }
.wl-item__view-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:8px 12px; background:transparent; color:var(--c-brown);
  font-family:var(--ff-body); font-size:var(--text-xs); font-weight:600;
  letter-spacing:0.03em; border-radius:var(--r-sm);
  border:1.5px solid var(--c-border-2); transition:all var(--dur-fast) var(--ease);
  cursor:pointer;
}
.wl-item__view-btn:hover { border-color:var(--c-brown); background:var(--c-brown-dim); }
.wl-shop-btn { margin-top:var(--sp-4); }

/* ── PRODUCT MODAL ── */
.pmodal-bg {
  position:fixed; inset:0; background:rgba(28,20,14,0.6);
  z-index:1300; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4); opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.pmodal-bg.open { opacity:1; pointer-events:all; }
.pmodal {
  background:var(--c-white); border-radius:var(--r-lg);
  width:100%; max-width:940px; max-height:94svh; overflow-y:auto;
  position:relative;
  transform:scale(0.96) translateY(10px);
  transition:transform var(--dur-slow) var(--ease-spring);
  box-shadow:var(--sh-xl); overscroll-behavior:contain;
}
.pmodal-bg.open .pmodal { transform:scale(1) translateY(0); }
.pmodal__close {
  position:absolute; top:14px; right:14px; z-index:5;
  width:34px; height:34px; background:var(--c-bg-2); border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-text-muted); font-size:.9rem;
  transition:all var(--dur-fast) var(--ease);
}
.pmodal__close:hover { background:var(--c-red); color:#fff; }
.pmodal__layout { display:grid; grid-template-columns:1fr; }
@media(min-width:640px){.pmodal__layout{grid-template-columns:1fr 1fr}}

/* Photo gallery */
.pmodal__gallery { position:relative; background:var(--c-bg-2); }
.pmodal__main-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; height:100%; }
.pmodal__main-img { width:100%; aspect-ratio:3/4; object-fit:cover; scroll-snap-align:start; flex-shrink:0; }
@media(min-width:640px){
  .pmodal__gallery { height: 100%; }
  .pmodal__main-img { aspect-ratio: auto; height: 100%; }
}

.pmodal__thumbs {
  position:absolute; bottom:var(--sp-4); left:50%; transform:translateX(-50%);
  display:flex; gap:var(--sp-2); z-index:10;
}
.pmodal__thumb {
  width:8px; height:8px; border-radius:var(--r-full);
  background:rgba(255,255,255,0.4); border:1px solid rgba(0,0,0,0.1);
  transition:all var(--dur-fast) var(--ease); cursor:pointer;
}
.pmodal__thumb.active { background:#fff; transform:scale(1.2); box-shadow:0 1px 4px rgba(0,0,0,0.2); }

/* Modal body */
.pmodal__body { padding:var(--sp-6) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4); }
@media(min-width:768px){.pmodal__body{padding:var(--sp-8) var(--sp-6); gap:var(--sp-5);}}
.pmodal__cat { font-size:var(--text-xs); font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-brown-light); }
.pmodal__name { font-family:var(--ff-head); font-size:clamp(1.3rem,2.5vw,1.75rem); font-weight:700; line-height:1.2; overflow-wrap:break-word; word-break:break-word; }
.pmodal__pricing { display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; }
.pmodal__price { font-family:var(--ff-head); font-size:1.65rem; font-weight:800; color:var(--c-brown); }
.pmodal__old { font-size:1rem; color:var(--c-text-light); text-decoration:line-through; font-weight:500; }
.pmodal__save { padding:4px 10px; background:rgba(192,57,43,0.08); color:var(--c-red); font-size:var(--text-xs); font-weight:700; border-radius:var(--r-full); }
.pmodal__desc { font-size:.85rem; color:var(--c-text-muted); line-height:1.7; overflow-wrap:break-word; word-break:break-word; }

.pmodal__section-label { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--c-text-muted); margin-bottom:10px; }

/* Color selector */
.pmodal__colors { display:flex; gap:12px; flex-wrap:wrap; }
.pmodal__color {
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
}
.pmodal__color-dot {
  width:28px; height:28px; border-radius:var(--r-full);
  border:2px solid transparent; transition:all var(--dur-fast) var(--ease);
  box-shadow:0 0 0 1px var(--c-border);
}
.pmodal__color.active .pmodal__color-dot { box-shadow:0 0 0 2.5px var(--c-brown); }
.pmodal__color-name { font-size:10px; font-weight:600; color:var(--c-text-muted); white-space:nowrap; }

/* Size selector */
.pmodal__sizes { display:flex; flex-wrap:wrap; gap:8px; }
.pmodal__size {
  padding:8px 14px; border:1px solid var(--c-border); border-radius:var(--r-sm);
  font-size:13px; font-weight:600; color:var(--c-text-2);
  transition:all var(--dur-fast) var(--ease); background:var(--c-bg);
}
.pmodal__size:hover { border-color:var(--c-brown-light); color:var(--c-brown-mid); }
.pmodal__size.active { background:var(--c-brown); border-color:var(--c-brown); color:#fff; box-shadow:0 2px 6px rgba(61,44,30,0.15); }
.pmodal__size.oos { opacity:.4; text-decoration:line-through; cursor:not-allowed; }
.pmodal__size-err { font-size:11px; color:var(--c-red); display:none; margin-top:6px; font-weight:500; }
.pmodal__size-err.show { display:block; }

/* Attributes */
.pmodal__attrs { display:flex; flex-direction:column; gap:8px; padding:12px 16px; background:var(--c-bg-2); border-radius:var(--r-md); border:1px solid rgba(0,0,0,0.03); }
.pmodal__attr { display:flex; align-items:flex-start; gap:12px; font-size:12px; }
.pmodal__attr-key { font-weight:700; color:var(--c-text-2); min-width:85px; flex-shrink:0; }
.pmodal__attr-val { color:var(--c-text-muted); line-height:1.4; }

/* Actions */
.pmodal__actions { display:flex; gap:12px; margin-top:8px; }
.pmodal__cart-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; background:var(--c-brown); color:#fff; font-family:var(--ff-body); font-size:14px; font-weight:700; letter-spacing:0.04em; border-radius:var(--r-sm); border:none; transition:all var(--dur-base) var(--ease); box-shadow:0 4px 12px rgba(61,44,30,0.15); }
.pmodal__cart-btn:hover { background:var(--c-brown-mid); transform:translateY(-2px); box-shadow:0 6px 16px rgba(61,44,30,0.25); }
.pmodal__wish-btn {
  width:50px; border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-bg);
  display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast) var(--ease);
}
.pmodal__wish-btn:hover, .pmodal__wish-btn.active { border-color:var(--c-red); background:rgba(192,57,43,0.04); }
.pmodal__wish-btn.active svg { fill:var(--c-red); stroke:var(--c-red); }

/* Trust badges */
.pmodal__trust { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.pdp__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--c-bg-2);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-item__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-brown);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.trust-item__icon svg { width:20px; height:20px; stroke-width: 1.8; }
.trust-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.trust-item__body strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brown);
  line-height: 1.1;
}
.trust-item__body span {
  font-size: 11.5px;
  color: var(--c-text-muted);
  line-height: 1.2;
}

/* Cross-sell (Kombini Tamamla) */
.pmodal__cross-sell { margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--c-border); }
.pmodal__cross-title { font-family:var(--ff-head); font-size:.95rem; font-weight:800; color:var(--c-brown); margin-bottom:var(--sp-4); }
.pmodal__cross-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.pcross-card { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1.5px solid var(--c-border); border-radius:var(--r-md); background:var(--c-bg); cursor:pointer; transition:all var(--dur-fast) var(--ease); }
.pcross-card:hover { border-color:var(--c-brown-light); box-shadow:var(--sh-sm); transform:translateY(-2px); }
.pcross-card__img { width:48px; height:60px; border-radius:var(--r-sm); overflow:hidden; background:var(--c-bg-2); flex-shrink:0; }
.pcross-card__img img { width:100%; height:100%; object-fit:cover; }
.pcross-card__info { flex:1; min-width:0; }
.pcross-card__name { font-size:.78rem; font-weight:600; color:var(--c-text-2); margin-bottom:2px; }
.pcross-card__price { font-family:var(--ff-head); font-size:.85rem; font-weight:800; color:var(--c-brown); }
.pcross-card__add { width:30px; height:30px; border-radius:var(--r-full); background:var(--c-brown-dim); color:var(--c-brown); display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; flex-shrink:0; transition:all .2s; }
.pcross-card__add:hover { background:var(--c-brown); color:#fff; transform:scale(1.1); box-shadow:0 4px 12px rgba(61,44,30,0.15); }

/* ── SEARCH OVERLAY ── */
.search-overlay {
  position:fixed; inset:0; background:rgba(250,248,245,0.97);
  z-index:1200; display:flex; flex-direction:column; align-items:center;
  padding:80px var(--sp-4) var(--sp-12);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease); overflow-y:auto;
}
.search-overlay.open { opacity:1; pointer-events:all; }
.search-overlay__inner { width:100%; max-width:680px; }
.search-bar-wrap {
  display:flex; align-items:center; gap:var(--sp-4);
  border-bottom:2px solid var(--c-brown); padding-bottom:var(--sp-4); margin-bottom:var(--sp-8);
}
.search-bar-wrap svg { color:var(--c-text-muted); flex-shrink:0; }
.search-input {
  flex:1; background:none; border:none; outline:none;
  font-family:var(--ff-head); font-size:clamp(1.4rem,4vw,2rem); font-weight:600;
  color:var(--c-text); letter-spacing:-0.02em;
}
.search-input::placeholder { color:var(--c-text-light); }
.search-close { color:var(--c-text-muted); transition:color var(--dur-fast) var(--ease); }
.search-close:hover { color:var(--c-brown); }
.search-result-card {
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4); border-radius:var(--r-md); cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
  border:1px solid transparent;
}
.search-result-card:hover { background:var(--c-bg-2); border-color:var(--c-border); }
.search-result-card__img {
  width:56px; height:72px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--c-bg-2); flex-shrink:0; border:1px solid var(--c-border);
}
.search-result-card__img img { width:100%; height:100%; object-fit:cover; }
.search-result-card__name { font-family:var(--ff-head); font-size:var(--text-base); font-weight:600; color:var(--c-text); margin-bottom:2px; }
.search-result-card__cat { font-size:var(--text-xs); color:var(--c-text-muted); margin-bottom:var(--sp-2); }
.search-result-card__price { font-family:var(--ff-head); font-size:var(--text-base); font-weight:700; color:var(--c-brown); }

/* ── EMPTY STATE ── */
.empty-state { grid-column:1/-1; text-align:center; padding:var(--sp-20) var(--sp-4); }
.empty-state__icon { margin-bottom:var(--sp-5); }
.empty-state__icon svg { width:64px; height:64px; margin:0 auto; color:var(--c-text-light); opacity:.5; }
.empty-state h3 { font-family:var(--ff-head); font-size:var(--text-2xl); font-weight:700; margin-bottom:var(--sp-2); }
.empty-state p { font-size:var(--text-base); color:var(--c-text-muted); margin-bottom:var(--sp-6); }

/* ── BREADCRUMB ── */
.breadcrumb { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--text-xs); color:var(--c-text-muted); flex-wrap:wrap; }
.breadcrumb__item { transition:color var(--dur-fast) var(--ease); cursor:pointer; overflow-wrap:break-word; word-break:break-word; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.breadcrumb__sep { color:var(--c-text-light); }
.breadcrumb__item { transition:color var(--dur-fast) var(--ease); cursor:pointer; }
.breadcrumb__item:hover { color:var(--c-brown); }
.breadcrumb__item.current { color:var(--c-text-2); font-weight:500; }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:var(--sp-6); left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--c-brown); color:#fff;
  padding:.6875rem 1.375rem; border-radius:var(--r-full);
  font-size:var(--text-sm); font-weight:500;
  opacity:0; pointer-events:none;
  transition:all .3s var(--ease);
  z-index:9999; white-space:nowrap;
  max-width:calc(100vw - 2rem); box-shadow:var(--sh-lg);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error { background:var(--c-red); }

/* ── CONFIRM MODAL ── */
.confirm-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(28,20,14,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
  opacity:0; animation:confirmFadeIn .25s var(--ease) forwards;
}
.confirm-overlay.closing { animation:confirmFadeOut .2s var(--ease) forwards; }

.confirm-box {
  background:var(--c-white);
  border-radius:var(--r-xl);
  width:100%; max-width:380px;
  padding:clamp(28px,5vw,40px) clamp(24px,4vw,36px) clamp(20px,4vw,28px);
  box-shadow:0 25px 60px rgba(28,20,14,0.2), 0 0 0 1px rgba(61,44,30,0.06);
  text-align:center;
  transform:scale(0.92) translateY(12px);
  animation:confirmSlideIn .3s var(--ease) .05s forwards;
  opacity:0;
}
.confirm-overlay.closing .confirm-box {
  animation:confirmSlideOut .2s var(--ease) forwards;
}

.confirm-box__icon {
  width:56px; height:56px; border-radius:var(--r-full);
  background:linear-gradient(135deg, rgba(192,57,43,0.08), rgba(192,57,43,0.15));
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.confirm-box__icon svg {
  width:26px; height:26px; color:var(--c-red, #c0392b);
}
.confirm-box__icon--info {
  background:linear-gradient(135deg, rgba(61,44,30,0.06), rgba(61,44,30,0.12));
}
.confirm-box__icon--info svg {
  color:var(--c-brown);
}

.confirm-box__title {
  font-family:var(--ff-head); font-size:1.15rem; font-weight:700;
  color:var(--c-text); margin-bottom:8px; line-height:1.3;
}
.confirm-box__msg {
  font-size:var(--text-sm); color:var(--c-text-muted);
  line-height:1.65; margin-bottom:24px;
}

.confirm-box__actions {
  display:flex; gap:10px;
}
.confirm-box__btn {
  flex:1; padding:.75rem 1.25rem;
  font-family:var(--ff-body); font-size:var(--text-sm); font-weight:600;
  border-radius:var(--r-md); cursor:pointer;
  transition:all .2s var(--ease); border:1.5px solid transparent;
  letter-spacing:0.01em;
}
.confirm-box__btn--cancel {
  background:var(--c-bg-2); color:var(--c-text-muted);
  border-color:var(--c-border);
}
.confirm-box__btn--cancel:hover {
  background:var(--c-bg-3, #e8e4df); color:var(--c-text-2);
  border-color:var(--c-border-2);
}
.confirm-box__btn--confirm {
  background:var(--c-red, #c0392b); color:#fff;
  border-color:var(--c-red, #c0392b);
  box-shadow:0 4px 14px rgba(192,57,43,0.2);
}
.confirm-box__btn--confirm:hover {
  background:#a93226; transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(192,57,43,0.3);
}
.confirm-box__btn--primary {
  background:var(--c-brown); color:#fff;
  border-color:var(--c-brown);
  box-shadow:0 4px 14px rgba(61,44,30,0.15);
}
.confirm-box__btn--primary:hover {
  background:var(--c-brown-mid); transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(61,44,30,0.25);
}

@keyframes confirmFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes confirmFadeOut { from{opacity:1} to{opacity:0} }
@keyframes confirmSlideIn  { from{opacity:0;transform:scale(0.92) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes confirmSlideOut { from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(0.95) translateY(6px)} }

@media(max-width:480px) {
  .confirm-overlay { align-items:flex-end; padding:0; }
  .confirm-box {
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    max-width:100%;
    animation:confirmSlideUp .3s var(--ease) .05s forwards;
  }
  .confirm-overlay.closing .confirm-box {
    animation:confirmSlideDown .2s var(--ease) forwards;
  }
  @keyframes confirmSlideUp { from{opacity:0;transform:translateY(100%)} to{opacity:1;transform:translateY(0)} }
  @keyframes confirmSlideDown { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(100%)} }
}

/* ── WA FLOAT ── */
.wa-float {
  position:fixed; bottom:var(--sp-6); right:var(--sp-5);
  width:54px; height:54px; background:var(--c-wa); border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.45); z-index:500;
  transition:all var(--dur-base) var(--ease);
}
.wa-float:hover { transform:scale(1.08); box-shadow:0 8px 30px rgba(37,211,102,.55); }
@media(min-width:768px){.wa-float{bottom:var(--sp-8);right:var(--sp-8)}}

/* ── LAZY LOAD ── */
img.lazy { opacity:0; transition:opacity 0.6s var(--ease); }
img.loaded { opacity:1; }