/* ==========================================================================
   COMPONENTS
   ========================================================================== */

.section{ padding-block:var(--sp-6); }
.section--tight{ padding-block:var(--sp-5); }
.section--dim{ background:var(--paper-dim); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--sp-5); gap:var(--sp-3); flex-wrap:wrap; }
.section-head h2{ margin-top:.4em; }
.section-head .view-all{ font-size:var(--text-xs); letter-spacing:var(--tracking-wide); text-transform:uppercase; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:.2em; white-space:nowrap; }

/* ---- Product Card ---- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4) var(--sp-3); }
@media (max-width:1100px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3) var(--sp-2); } }

.product-card{ position:relative; }
.product-card__frame{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--sand);
  isolation:isolate;
}
.product-card__frame img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s var(--ease), opacity .5s ease;
}
.product-card__frame img.img-b{ position:absolute; inset:0; opacity:0; }
.product-card:hover .img-a{ transform:scale(1.07); opacity:0; }
.product-card:hover .img-b{ opacity:1; transform:scale(1.07); }

.product-card__quick{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; gap:1px; background:var(--sand-line);
  transform:translateY(100%); transition:transform .4s var(--ease); z-index:3;
}
.product-card:hover .product-card__quick{ transform:translateY(0); }
.product-card__quick button{
  flex:1; background:var(--paper); border:none; padding:.85em .5em;
  font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:.4em;
  transition:background .25s, color .25s;
}
.product-card__quick button:hover{ background:var(--ink); color:var(--paper); }

@media (max-width:760px){
  .product-card__quick{ transform:translateY(0); }
  .product-card__quick button{
    font-size:.6rem; letter-spacing:.02em; padding:.65em .25em; white-space:nowrap; gap:.25em;
  }
}

.wishlist-btn{
  position:absolute; top:14px; right:14px; z-index:3;
  width:34px; height:34px; border-radius:50%; background:rgba(251,247,240,.9);
  display:flex; align-items:center; justify-content:center; border:none;
  color:var(--ink);
  box-shadow:0 1px 4px rgba(27,21,18,.18);
  transition:transform .3s var(--ease), background .3s;
}
.wishlist-btn svg{ width:16px; height:16px; }
.wishlist-btn:hover{ transform:scale(1.12); }
.wishlist-btn.is-active svg{ fill:var(--wine); stroke:var(--wine); }

.product-card__info{ padding-top:var(--sp-2); text-align:left; }
.product-card__cat{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); opacity:.65; }
.product-card__title{ font-family:var(--font-display); font-size:var(--text-md); margin-top:.25em; }
.product-card__price{ margin-top:.35em; font-size:var(--text-sm); display:flex; gap:.6em; align-items:center; }
.price-strike{ text-decoration:line-through; opacity:.5; }
.stars{ color:var(--gold); font-size:.75rem; letter-spacing:.1em; margin-top:.3em; }

/* ---- Category tiles (Shop by category) ---- */
.category-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-2); }
@media (max-width:980px){ .category-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .category-grid{ grid-template-columns:repeat(2,1fr); } }
.category-tile{ position:relative; aspect-ratio:3/4; overflow:hidden; display:block; }
.category-tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.category-tile:hover img{ transform:scale(1.08); }
.category-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(27,21,18,.72) 0%, rgba(27,21,18,0) 55%); }
.category-tile span{
  position:absolute; left:var(--sp-2); right:var(--sp-2); bottom:var(--sp-2); z-index:2;
  color:var(--paper); font-family:var(--font-display); font-size:var(--text-md);
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(251,247,240,.35); padding-top:.6em;
}
.category-tile span small{ font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); }

/* ---- Filters / Toolbar (collection page) ---- */
.collection-toolbar{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--sp-3); border-bottom:1px solid var(--sand-line); margin-bottom:var(--sp-4); flex-wrap:wrap; gap:var(--sp-2); }
.result-count{ font-size:var(--text-sm); color:var(--ink-soft); }
.toolbar-controls{ display:flex; gap:var(--sp-3); align-items:center; }
.select-fancy{ position:relative; }
.select-fancy select{
  appearance:none; background:none; border:none; border-bottom:1px solid var(--ink);
  padding:.4em 1.6em .4em 0; font-size:var(--text-sm); letter-spacing:.04em;
}
.select-fancy::after{ content:'↓'; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:.7rem; pointer-events:none; }

.collection-layout{ display:grid; grid-template-columns:240px 1fr; gap:var(--sp-5); align-items:start; }
@media (max-width:900px){ .collection-layout{ grid-template-columns:1fr; } .filter-sidebar{ display:none; } }

.filter-group{ border-bottom:1px solid var(--sand-line); padding-block:var(--sp-3); }
.filter-group summary{ cursor:pointer; font-weight:600; font-size:var(--text-sm); letter-spacing:.03em; display:flex; justify-content:space-between; list-style:none; }
.filter-group summary::-webkit-details-marker{ display:none; }
.filter-group summary::after{ content:'+'; font-size:1.1em; }
.filter-group[open] summary::after{ content:'–'; }
.filter-opt{ display:flex; align-items:center; gap:.6em; margin-top:.9em; font-size:var(--text-sm); cursor:pointer; }
.filter-opt input{ accent-color:var(--gold-deep); }

.pagination{ display:flex; justify-content:center; gap:.5em; margin-top:var(--sp-5); }
.pagination button{ width:38px; height:38px; border:1px solid var(--sand-line); background:none; font-size:var(--text-sm); transition:.25s; }
.pagination button.is-active,.pagination button:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---- Quick view modal ---- */
.modal-scrim{ position:fixed; inset:0; background:rgba(27,21,18,.55); backdrop-filter:blur(3px); z-index:950; opacity:0; visibility:hidden; transition:.4s; }
.modal-scrim.is-open{ opacity:1; visibility:visible; }
.quick-view{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(880px,92vw); max-height:88vh; overflow:auto;
  background:var(--paper); z-index:960; opacity:0; visibility:hidden; transition:.4s var(--ease);
  display:grid; grid-template-columns:1fr 1fr; box-shadow:var(--shadow-lift);
}
.quick-view.is-open{ opacity:1; visibility:visible; transform:translate(-50%,-50%); }
.quick-view img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.quick-view__body{ padding:var(--sp-4); position:relative; }
.quick-view__close{
  position:absolute; top:var(--sp-2); right:var(--sp-2); z-index:2;
  width:34px; height:34px; border-radius:50%; background:rgba(251,247,240,.9);
  display:flex; align-items:center; justify-content:center; border:none; font-size:1.2rem; line-height:1;
}
@media (max-width:700px){
  .quick-view{
    top:4vh; left:50%; transform:translateX(-50%); width:92vw; max-height:92vh;
    grid-template-columns:1fr;
  }
  .quick-view.is-open{ transform:translateX(-50%); }
  .quick-view img{ height:230px; }
  .quick-view__body{ padding:var(--sp-3); }
  .quick-view__close{ top:var(--sp-2); right:var(--sp-2); }
}

/* ---- Trust badges strip ---- */
.trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--sand-line); border-bottom:1px solid var(--sand-line); }
.trust-item{ padding:var(--sp-4) var(--sp-3); text-align:center; border-right:1px solid var(--sand-line); }
.trust-item:last-child{ border-right:none; }
.trust-item svg{ width:26px; height:26px; margin-bottom:.8em; color:var(--gold-deep); }
.trust-item h4{ font-family:var(--font-body); font-size:var(--text-sm); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.trust-item p{ font-size:var(--text-sm); color:var(--ink-soft); margin-top:.4em; }
@media (max-width:760px){ .trust-strip{ grid-template-columns:1fr 1fr; } .trust-item:nth-child(2){ border-right:none; } .trust-item{ border-bottom:1px solid var(--sand-line); } }

/* ---- Accordion (product info) ---- */
.accordion-item{ border-bottom:1px solid var(--sand-line); }
.accordion-item summary{ cursor:pointer; padding:1.1em 0; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); font-size:var(--text-md); list-style:none; }
.accordion-item summary::-webkit-details-marker{ display:none; }
.accordion-item summary::after{ content:'+'; font-size:1.3rem; color:var(--gold-deep); }
.accordion-item[open] summary::after{ content:'–'; }
.accordion-item .accordion-body{ padding-bottom:1.4em; color:var(--ink-soft); font-size:var(--text-sm); line-height:1.8; }

/* ---- Forms ---- */
.field{ margin-bottom:var(--sp-3); }
.field label{ display:block; font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.6em; font-weight:600; }
.field input,.field select,.field textarea{
  width:100%; border:1px solid var(--sand-line); background:var(--paper);
  padding:.95em 1em; font-size:var(--text-base); transition:border-color .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold-deep); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }

/* ---- Reviews ---- */
.review{ padding:var(--sp-3) 0; border-bottom:1px solid var(--sand-line); }
.review-head{ display:flex; justify-content:space-between; align-items:center; }
.review-name{ font-weight:700; font-size:var(--text-sm); }
.review-date{ font-size:var(--text-xs); color:var(--ink-soft); }
.review p{ margin-top:.6em; font-size:var(--text-sm); color:var(--ink-soft); line-height:1.8; }

/* ---- Toast ---- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--paper); padding:1em 1.6em; font-size:var(--text-sm);
  opacity:0; visibility:hidden; transition:.4s var(--ease); z-index:1000; letter-spacing:.02em;
  display:flex; align-items:center; gap:.6em;
}
.toast.is-visible{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* ---- Breadcrumb ---- */
.breadcrumb{ font-size:var(--text-xs); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); padding-block:var(--sp-3); display:flex; flex-wrap:wrap; align-items:center; gap:.4em; row-gap:.35em; }
.breadcrumb span{ overflow-wrap:anywhere; }
@media (max-width:640px){ .breadcrumb{ font-size:.68rem; letter-spacing:.04em; } }
.breadcrumb a:hover{ color:var(--gold-deep); }

/* ---- Loader ---- */
.page-loader{
  position:fixed; inset:0; z-index:2000; background:var(--paper);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem;
  transition:opacity .6s var(--ease), visibility .6s;
}
.page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ width:46px; height:46px; position:relative; }
.loader-mark span{
  position:absolute; inset:0; border:1px solid var(--gold);
  transform:rotate(45deg); animation:loader-spin 1.6s var(--ease) infinite;
}
.loader-mark span:nth-child(2){ animation-delay:.3s; opacity:.6; }
@keyframes loader-spin{ 0%{ transform:rotate(45deg) scale(.4); opacity:0; } 50%{ opacity:1; } 100%{ transform:rotate(225deg) scale(1); opacity:0; } }
.loader-word{ font-family:var(--font-display); letter-spacing:.3em; text-transform:uppercase; font-size:var(--text-sm); }

/* ---- Empty state ---- */
.empty-state{ text-align:center; padding:var(--sp-7) var(--sp-3); }
.empty-state h3{ margin-bottom:.6em; }
.empty-state p{ color:var(--ink-soft); margin-bottom:var(--sp-3); }