/* -----------------------------------------------------------------------
   TOKENS
----------------------------------------------------------------------- */
:root{
  --cream:      #F8EFD8;
  --cream-2:    #F3E7C9;
  --ink:        #2B2620;
  --orange:     #E2571C;
  --mustard:    #C08A1E;
  --lavender:   #C9AEDE;
  --blue:       #CBE3F5;
  --pink:       #F1CBD8;
  --tulip:      #E7B9C6;
  --tulip-dk:   #D9A9B8;

  --font-display: 'Fraunces', serif;
  --font-round:   'Baloo 2', sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow-soft: 0 6px 18px rgba(43,38,32,0.08);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; }

.section{
  max-width:1200px;
  margin:0 auto;
  padding:44px 40px 90px;
}
.section-title{
  font-family:var(--font-round);
  font-weight:700;
  text-transform:lowercase;
  letter-spacing:0.5px;
  font-size:1.5rem;
  margin-bottom:28px;
}

/* -----------------------------------------------------------------------
   HEADER
----------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--cream);
  border-bottom:1px solid rgba(43,38,32,0.06);
}
.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:22px 40px 14px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
}
.logo-mark{ grid-row:1; grid-column:1; justify-self:start; display:flex; }
.wordmark{
  grid-row:1; grid-column:2;
  justify-self:center;
  font-size:2rem;
  font-weight:500;
  font-style:italic;
}
.header-icons{
  grid-row:1; grid-column:3;
  justify-self:end;
  display:flex;
  gap:16px;
}
.icon-btn{
  background:none; border:none; cursor:pointer;
  color:var(--ink); position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:4px;
}
.bag-count{
  position:absolute; top:-6px; right:-8px;
  background:var(--orange); color:#fff;
  font-family:var(--font-round); font-size:0.65rem; font-weight:700;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.bag-count[hidden]{ display:none; }
.main-nav{
  grid-row:2; grid-column:1 / -1;
  display:flex; justify-content:center; gap:36px;
  padding-top:6px;
  font-family:var(--font-display);
  font-size:1rem;
}
.main-nav a{ opacity:0.85; transition:opacity .15s; }
.main-nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }

.search-bar{ max-width:1200px; margin:0 auto; padding:0 40px 16px; }
.search-bar input{
  width:100%; max-width:420px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(43,38,32,0.2);
  background:#fff;
  font-family:var(--font-display);
  font-size:0.95rem;
}

/* -----------------------------------------------------------------------
   HERO
----------------------------------------------------------------------- */
.hero{
  text-align:center;
  padding:36px 40px 16px;
}
.hero-tagline{
  font-size:1.6rem;
  font-style:italic;
  color:var(--ink);
  margin:0;
}

/* -----------------------------------------------------------------------
   PRODUCT GRID
----------------------------------------------------------------------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.product-card{
  border-radius:var(--radius-lg);
  padding:22px;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease;
}
.product-card:hover{ transform:translateY(-4px); }
.product-card.bg-blue{ background:var(--blue); }
.product-card.bg-lavender{ background:var(--lavender); }
.product-card.bg-orange{ background:var(--orange); color:#fff; }
.product-card.bg-pink{ background:var(--pink); }

.product-photo{
  background:#fff;
  border-radius:var(--radius-md);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  margin-bottom:16px;
  position:relative;
}
.photo-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:26px; height:26px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.85);
  color:var(--ink);
  font-size:1.1rem;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
  opacity:0;
  transition:opacity .15s ease;
}
.product-photo:hover .photo-arrow{ opacity:1; }
.photo-arrow-prev{ left:8px; }
.photo-arrow-next{ right:8px; }
@media (hover: none){
  .photo-arrow{ opacity:1; }
}
.product-photo img{ width:100%; height:100%; object-fit:cover; }
.product-photo.coming-soon{
  font-family:var(--font-round);
  font-weight:700;
  text-transform:uppercase;
  font-size:0.95rem;
  color:var(--ink);
  text-align:center;
  line-height:1.3;
}

.product-thumbs{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-bottom:12px;
}
.thumb-btn{
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid rgba(43,38,32,0.35);
  background:rgba(255,255,255,0.6);
  padding:0;
  cursor:pointer;
}
.thumb-btn.active{ background:var(--ink,#2b2620); border-color:transparent; }
.product-thumbs-placeholder{ height:8px; }

.product-name{
  font-family:var(--font-round);
  font-weight:700;
  text-transform:uppercase;
  font-size:0.95rem;
  line-height:1.3;
  margin-bottom:4px;
}
.bg-orange .product-name{ color:#fff; }

.product-tagline{
  font-size:0.9rem;
  font-style:italic;
  opacity:0.85;
  margin-bottom:10px;
  flex-grow:1;
}
.product-price{
  font-family:var(--font-round);
  font-weight:600;
  margin-bottom:10px;
}
.product-select{
  width:100%;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(43,38,32,0.25);
  background:#fff;
  font-family:var(--font-display);
  font-size:0.85rem;
  margin-bottom:10px;
}
.product-actions{ display:flex; gap:8px; }
.btn{
  font-family:var(--font-round);
  font-weight:700;
  text-transform:lowercase;
  border:none;
  border-radius:999px;
  padding:10px 18px;
  cursor:pointer;
  font-size:0.85rem;
  transition:opacity .15s, transform .1s;
}
.btn:active{ transform:scale(0.97); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-add{ background:var(--ink); color:#fff; flex:1; }
.btn-dark{ background:var(--ink); color:#fff; width:100%; padding:14px; }
.btn-checkout{ background:var(--lavender); color:var(--ink); width:100%; padding:14px; margin-top:14px;}
.btn-buy-now{
  display:block; width:100%; text-align:center;
  background:var(--lavender); color:var(--ink);
  margin-top:8px;
  padding:10px 18px;
}
.bg-orange .btn-buy-now{ background:var(--pink); color:var(--ink); }
.bg-lavender .btn-buy-now{ background:var(--blue); color:var(--ink); }
.bg-pink .btn-buy-now{ background:var(--orange); color:#fff; }

/* -----------------------------------------------------------------------
   FAQ + CONTACT (split media/body sections)
----------------------------------------------------------------------- */
.faq-section, .contact-section{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  align-items:start;
}
.polaroid{
  background:#111; padding:14px 14px 20px;
  border-radius:18px;
}
.polaroid img{
  width:100%; display:block; border-radius:4px;
  aspect-ratio:1/1; object-fit:cover;
}
.caption{ margin-top:10px; font-style:italic; }

.faq-list{ margin:0; }
.faq-item{ margin-bottom:26px; text-align:left; }
.faq-item dt{ font-weight:600; margin-bottom:4px; }
.faq-item dd{ margin:0; opacity:0.9; }

.contact-form{ display:flex; flex-direction:column; gap:14px; max-width:520px; }
.form-row{ display:flex; gap:14px; }
.form-row input, .contact-form textarea{
  font-family:var(--font-display);
  padding:14px 16px;
  border-radius:16px;
  border:1.5px solid var(--ink);
  background:transparent;
  font-size:1rem;
  resize:vertical;
}
.form-row input{ flex:1; }
.form-status{ font-family:var(--font-round); font-size:0.85rem; min-height:1.2em; }

/* -----------------------------------------------------------------------
   BAG DRAWER
----------------------------------------------------------------------- */
.bag-overlay{
  position:fixed; inset:0; background:rgba(43,38,32,0.35); z-index:50;
}
.bag-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(400px, 90vw);
  background:var(--cream-2); z-index:51;
  box-shadow:-8px 0 24px rgba(0,0,0,0.15);
  overflow-y:auto;
}
.bag-drawer-inner{ padding:32px 26px; position:relative; }
.bag-close{
  position:absolute; top:20px; right:22px;
  background:none; border:none; font-size:1.6rem; cursor:pointer; line-height:1;
}
.bag-items{ list-style:none; padding:0; margin:0 0 20px; }
.bag-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid rgba(43,38,32,0.12);
  font-size:0.92rem;
}
.bag-item .remove-btn{
  background:none; border:none; cursor:pointer; opacity:0.6; font-size:0.85rem;
  text-decoration:underline;
}
.bag-empty{ font-style:italic; opacity:0.75; }
.bag-total-row{
  display:flex; justify-content:space-between; font-family:var(--font-round);
  font-weight:700; margin-top:12px; font-size:1.05rem;
}
.bag-note{ text-align:center; font-size:0.75rem; opacity:0.65; margin-top:10px; }

/* -----------------------------------------------------------------------
   FOOTER
----------------------------------------------------------------------- */
.site-footer{
  text-align:center;
  padding:40px;
  font-size:0.85rem;
  opacity:0.7;
}

/* -----------------------------------------------------------------------
   RESPONSIVE
----------------------------------------------------------------------- */
@media (max-width: 900px){
  .product-grid{ grid-template-columns:repeat(2, 1fr); }
  .faq-section, .contact-section{ grid-template-columns:1fr; }
  .header-inner{ grid-template-columns:auto 1fr auto; }
  .main-nav{ gap:20px; flex-wrap:wrap; }
}
@media (max-width: 520px){
  .product-grid{ grid-template-columns:1fr; }
  .section{ padding:60px 20px; }
  .form-row{ flex-direction:column; }
}