/* ==========================================================================
   S.A. Attarwala — product styles
   Loaded on pages that show products: home and shop.
   Covers cards, filters, the cart drawer, the product detail view and the quiz.
   ========================================================================== */

/* ============================== Filters & search ============================== */

.shop-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
.search-wrap{
  display:flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--line);
  padding:8px 14px; border-radius:999px; width:260px; max-width:100%;
  transition:border-color .2s;
}
.search-wrap:focus-within{border-color:var(--gold-bright);}
.search-wrap svg{width:15px; height:15px; color:var(--muted); flex-shrink:0;}
.search-wrap input{
  background:transparent; border:none; outline:none; color:var(--ivory);
  font-family:'Jost', sans-serif; font-size:0.85rem; width:100%;
}
.search-wrap input::placeholder{color:var(--muted);}

.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;}
.filter-btn{
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
  letter-spacing:0.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:8px 16px; border-radius:999px; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.filter-btn:hover{color:var(--ivory); border-color:var(--gold-bright);}
.filter-btn.active{background:var(--gold); border-color:var(--gold); color:var(--ink);}

.result-count{
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
  margin-bottom:18px;
}

/* ============================== Grid & cards ============================== */

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px;}
.no-results{color:var(--muted); font-size:0.9rem; grid-column:1/-1; padding:20px 0;}
.grid-loading{
  color:var(--muted); grid-column:1/-1; padding:30px 0;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase;
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  position:relative;
  padding:18px 18px 16px;
  display:flex; flex-direction:column;
  transition:transform .25s, border-color .25s;
}
.card:hover{transform:translateY(-4px); border-color:var(--gold);}
.card::before, .card::after{
  content:""; position:absolute; width:10px; height:10px;
  border:1px solid var(--gold); opacity:.6; pointer-events:none;
}
.card::before{top:8px; left:8px; border-right:none; border-bottom:none;}
.card::after{bottom:8px; right:8px; border-left:none; border-top:none;}

/* the photo + title are one link, so the card works without JS and is crawlable */
.card-link{text-decoration:none; color:inherit; display:block;}

.card-media{
  width:100%; aspect-ratio:4/5; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:13px;
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.card-media svg{width:56%; opacity:.85;}
.card-media img{width:100%; height:100%; object-fit:contain;}

.discount-tag{
  position:absolute; top:8px; right:8px;
  background:var(--brick); color:var(--ivory);
  font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.05em;
  padding:3px 8px; border-radius:2px;
}
.best-tag{
  position:absolute; top:8px; left:8px;
  background:var(--gold); color:var(--ink);
  font-family:'IBM Plex Mono', monospace; font-size:0.6rem; letter-spacing:0.04em;
  padding:3px 8px; border-radius:2px;
  display:flex; align-items:center; gap:3px;
}

.card .fam{
  font-family:'IBM Plex Mono', monospace; font-size:0.62rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-bright);
  margin-bottom:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.khushboo-badge{
  color:var(--muted); border:1px solid var(--line);
  padding:1px 6px; border-radius:999px; font-size:0.56rem; letter-spacing:0.04em;
  text-transform:none; font-family:'IBM Plex Mono', monospace;
}
.card h3{font-size:1.3rem; margin:0 0 6px; color:var(--ivory); line-height:1.15;}
.card-link:hover h3{color:var(--gold-bright);}
.card .origin{color:var(--muted); font-size:0.8rem; margin-bottom:12px; line-height:1.45;}
.card .size-hint{
  font-family:'IBM Plex Mono', monospace; font-size:0.62rem;
  color:var(--muted); letter-spacing:0.06em; margin-bottom:8px;
}

.pyramid{margin:0 0 12px; display:flex; flex-direction:column; gap:4px;}
.pyramid-row{display:flex; align-items:flex-start; gap:8px;}
.pyramid-label{
  width:40px; flex-shrink:0; font-family:'IBM Plex Mono', monospace;
  font-size:0.58rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);
  padding-top:2px;
}
.pyramid-notes{font-size:0.78rem; color:var(--ivory); opacity:.9; line-height:1.3;}

.card-footer{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-top:12px; border-top:1px dashed var(--line);
}
.price{
  font-family:'IBM Plex Mono', monospace; font-size:1.05rem; color:var(--gold-bright);
  display:flex; align-items:baseline; gap:8px;
}
.price .strike{color:var(--muted); font-size:0.78rem; text-decoration:line-through;}
.price-enquire{font-family:'IBM Plex Mono', monospace; font-size:0.85rem; color:var(--muted);}

.order-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--gold); color:var(--gold-bright);
  padding:9px 14px; text-decoration:none; border-radius:999px;
  font-family:'IBM Plex Mono', monospace; font-size:0.66rem;
  letter-spacing:0.08em; text-transform:uppercase;
  transition:background .2s, color .2s; cursor:pointer; white-space:nowrap;
}
.order-btn:hover{background:var(--gold); color:var(--ink);}
.order-btn svg{width:13px; height:13px; flex-shrink:0;}
/* Quantity stepper — replaces Add to Cart once the product is in the order */
.cart-control{display:inline-flex;}
.stepper{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--gold); border-radius:999px;
  padding:5px 10px; background:transparent;
}
.stepper .qty-btn{
  width:26px; height:26px; border-color:var(--gold);
  color:var(--gold-bright); font-size:1rem;
}
.stepper .qty-btn:hover{background:var(--gold); color:var(--ink); border-color:var(--gold);}
.stepper .qty-value{
  min-width:18px; font-size:0.9rem; color:var(--ivory);
}

/* Featured strip on the home page */
.featured-card{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold);}

/* ============================== Product detail ============================== */

.detail-overlay{
  position:fixed; inset:0; background:rgba(8,5,10,0.88);
  backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:93;
}
.detail-overlay.open{opacity:1; pointer-events:auto;}

.detail-modal{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%, -48%) scale(0.97);
  width:min(880px, 94vw); max-height:88vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--gold);
  z-index:94; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.detail-modal.open{opacity:1; pointer-events:auto; transform:translate(-50%, -50%) scale(1);}

.detail-close{
  position:absolute; top:16px; right:16px; z-index:2;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.detail-close:hover{color:var(--gold-bright); border-color:var(--gold-bright);}

.detail-inner{display:grid; grid-template-columns:1fr 1fr; align-items:stretch;}
.detail-media{
  background:var(--surface-2); border-right:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  padding:26px; min-height:360px; overflow:hidden;
}
.detail-media img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.detail-media svg{width:50%;}
.detail-body{padding:32px 30px 28px; display:flex; flex-direction:column;}
.detail-body .fam{
  font-family:'IBM Plex Mono', monospace; font-size:0.65rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-bright);
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px;
}
.detail-body h2{font-size:2.2rem; margin:0 0 6px; color:var(--ivory); line-height:1.1;}
.detail-meta{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem;
  color:var(--muted); letter-spacing:0.06em; margin-bottom:18px;
}
.detail-body .price{font-size:1.5rem; margin-bottom:20px;}
.detail-desc{color:var(--muted); font-size:0.94rem; margin:0 0 20px; line-height:1.6;}

.detail-section-label{
  font-family:'IBM Plex Mono', monospace; font-size:0.6rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  padding-top:16px; border-top:1px dashed var(--line); margin-bottom:10px;
}
.note-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px;}
.note-chip{
  border:1px solid var(--line); color:var(--ivory);
  padding:5px 11px; border-radius:999px; font-size:0.76rem;
}
/* pinned to the bottom right of the right-hand pane */
.detail-actions{
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:flex-end; margin-top:auto; padding-top:24px;
}
.detail-actions .order-btn{padding:13px 20px; font-size:0.7rem;}

/* ============================== Cart drawer ============================== */

.cart-overlay{
  position:fixed; inset:0; background:rgba(10,7,12,0.6);
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:90;
}
.cart-overlay.open{opacity:1; pointer-events:auto;}

.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(400px, 92vw);
  background:var(--surface); border-left:1px solid var(--line);
  z-index:91; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s ease;
}
.cart-drawer.open{transform:translateX(0);}

.cart-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--line);
}
.cart-header h2{margin:0; font-size:1.5rem; color:var(--ivory);}
.cart-close{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  font-size:0.85rem; transition:color .2s, border-color .2s;
}
.cart-close:hover{color:var(--gold-bright); border-color:var(--gold-bright);}

.cart-body{flex:1; overflow-y:auto; padding:20px 24px;}
.cart-empty{color:var(--muted); font-size:0.9rem;}

.cart-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:14px 0; border-bottom:1px dashed var(--line);
}
.cart-row-name{font-family:'Cormorant Garamond', Georgia, serif; font-size:1.15rem; color:var(--ivory);}
.cart-row-price{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--muted); margin-top:4px;}
.cart-row-controls{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.qty-btn{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ivory); cursor:pointer; font-size:0.9rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.qty-btn:hover{border-color:var(--gold-bright); color:var(--gold-bright);}
.qty-value{font-family:'IBM Plex Mono', monospace; font-size:0.8rem; min-width:14px; text-align:center;}
.remove-btn{
  background:transparent; border:none; color:var(--muted); cursor:pointer;
  font-size:0.75rem; margin-left:4px; transition:color .2s;
}
.remove-btn:hover{color:var(--brick);}

.cart-footer{
  padding:20px 24px 24px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px;
}
.cart-name-label{
  font-family:'IBM Plex Mono', monospace; font-size:0.65rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.cart-name-input{
  background:var(--surface-2); border:1px solid var(--line); color:var(--ivory);
  padding:10px 12px; border-radius:var(--radius);
  font-family:'Jost', sans-serif; font-size:0.9rem;
}
.cart-total-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'IBM Plex Mono', monospace; color:var(--gold-bright); font-size:1.1rem;
  padding-top:6px;
}
.checkout-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:13px 18px; border-radius:var(--radius); border:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase;
  cursor:pointer; transition:background .2s, border-color .2s, color .2s;
  background:transparent; color:var(--ivory);
}
.checkout-whatsapp{background:var(--gold); color:var(--ink); border-color:var(--gold);}
.checkout-whatsapp:hover{background:var(--gold-bright);}
.checkout-email:hover{border-color:var(--gold-bright); color:var(--gold-bright);}

/* ============================== Sticky order bar ============================== */

.cart-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px max(16px, calc((100vw - var(--wrap)) / 2 + 16px));
  background:rgba(36,27,43,0.97);
  border-top:1px solid var(--gold);
  backdrop-filter:blur(8px);
}
.cart-bar[hidden]{display:none;}

/* the page needs room so the bar never covers the footer */
body.has-cart-bar{padding-bottom:86px;}

.cart-bar-summary{
  display:flex; align-items:center;
  background:transparent; border:none; cursor:pointer;
  color:var(--ivory); text-align:left; padding:4px;
}
.cart-bar-text{display:flex; align-items:center; gap:14px; line-height:1.25;}
.cart-bar-count{
  font-family:'IBM Plex Mono', monospace; font-size:0.66rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}
.cart-bar-total{
  font-family:'IBM Plex Mono', monospace; font-size:1.1rem; color:var(--gold-bright);
  padding-left:14px; border-left:1px solid var(--line);
}
.cart-bar-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}

.cart-bar-view{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  background:transparent; border:1px solid var(--line); color:var(--ivory);
  cursor:pointer; flex-shrink:0;
  transition:border-color .2s, color .2s;
}
.cart-bar-view svg{width:19px; height:19px;}
.cart-bar-view:hover{border-color:var(--gold-bright); color:var(--gold-bright);}

.cart-bar-send{width:auto; flex-shrink:0; padding:12px 24px;}

@media (max-width:600px){
  .cart-bar{padding:10px 14px; gap:10px;}
  .cart-bar-view{width:40px; height:40px;}
  .cart-bar-send{padding:12px 16px; font-size:0.68rem;}
  .cart-bar-send svg{display:none;}
  body.has-cart-bar{padding-bottom:78px;}
}

/* ============================== Quiz ============================== */

.quiz-overlay{
  position:fixed; inset:0; background:rgba(10,7,12,0.72);
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:95;
}
.quiz-overlay.open{opacity:1; pointer-events:auto;}

.quiz-modal{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%, -48%) scale(0.96);
  width:min(560px, 92vw); max-height:86vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--gold);
  z-index:96; padding:30px 28px 26px;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.quiz-modal.open{opacity:1; pointer-events:auto; transform:translate(-50%, -50%) scale(1);}

.quiz-close{
  position:absolute; top:16px; right:16px;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.quiz-close:hover{color:var(--gold-bright); border-color:var(--gold-bright);}

.quiz-progress{display:flex; gap:6px; margin:22px 0 24px;}
.quiz-progress-dot{height:3px; flex:1; background:var(--line); border-radius:2px;}
.quiz-progress-dot.done{background:var(--gold);}

.quiz-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.65rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-bright);
  margin-bottom:10px; display:block;
}
.quiz-question{font-size:1.7rem; margin:0 0 24px; color:var(--ivory); line-height:1.2;}

.quiz-options{display:flex; flex-direction:column; gap:10px;}
.quiz-option{
  text-align:left;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ivory);
  padding:14px 18px; border-radius:var(--radius); cursor:pointer;
  font-family:'Jost', sans-serif; font-size:0.95rem;
  transition:border-color .2s, background .2s;
}
.quiz-option:hover{border-color:var(--gold-bright); background:var(--surface);}

.quiz-result-tag{
  font-family:'IBM Plex Mono', monospace; font-size:0.65rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-bright);
  margin-bottom:8px; display:block;
}
.quiz-result-name{font-size:1.8rem; margin:0 0 6px; color:var(--ivory);}
.quiz-result-why{color:var(--muted); font-size:0.88rem; margin:0 0 18px; max-width:46ch; line-height:1.5;}

.quiz-result-card{
  display:flex; align-items:center; gap:14px;
  background:var(--surface-2); border:1px solid var(--gold);
  padding:14px 16px; border-radius:var(--radius);
}
.quiz-result-media{
  width:60px; height:60px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line); overflow:hidden;
}
.quiz-result-media img{width:100%; height:100%; object-fit:contain;}
.quiz-result-media svg{width:60%;}
.quiz-result-card-info{flex:1; min-width:0;}
.quiz-result-card-info .name{
  font-family:'Cormorant Garamond', Georgia, serif; font-size:1.1rem; color:var(--ivory);
}
.quiz-result-card-price{
  display:flex; align-items:baseline; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-size:0.95rem;
  color:var(--gold-bright); margin-top:2px;
}
.quiz-result-card-price .strike{color:var(--muted); font-size:0.72rem; text-decoration:line-through;}

.quiz-result-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}
.quiz-retake{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:12px 18px; border-radius:var(--radius); cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem;
  letter-spacing:0.08em; text-transform:uppercase;
  transition:border-color .2s, color .2s;
}
.quiz-retake:hover{border-color:var(--gold-bright); color:var(--gold-bright);}

/* ============================== Responsive ============================== */

@media (max-width:860px){
  .detail-inner{grid-template-columns:1fr;}
  .detail-media{
    border-right:none; border-bottom:1px solid var(--line);
    min-height:0; aspect-ratio:4/3; padding:18px;
  }
  .detail-body{padding:26px 22px 24px;}
  .detail-body h2{font-size:1.8rem;}
}

@media (max-width:600px){
  .grid{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px;}
  .card{padding:14px 14px 12px;}
  .card h3{font-size:1.1rem;}
  .card-footer{flex-direction:column; align-items:stretch; gap:8px;}
  .order-btn{justify-content:center;}
  .quiz-modal{padding:28px 20px 24px;}
  .quiz-question{font-size:1.4rem;}
}