@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Outfit:wght@300;400;500&display=swap');

:root {
  --bg: #FAFAF8;
  --white: #FFFFFF;
  --cream: #F2EDE5;
  --border: #E8E2D8;
  --tan: #C4B49A;
  --brown: #2C1A0E;
  --brown-mid: #6B4A2A;
  --text: #1A1208;
  --text-soft: #8A7A68;
  --radius: 4px;
  --shadow: 0 1px 12px rgba(44,26,14,0.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; font-weight: 300; }

/* ===== NAV — THINNER ===== */
nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.5rem 4%;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
}

.nav-left { display: flex; align-items: center; gap: 0.3rem; }
.nav-sep { color: var(--text-soft); font-size: 0.8rem; }

.lang-btn {
  background: none; border: none; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 400;
  color: var(--text-soft); padding: 0.2rem 0.3rem; letter-spacing: 0.08em; transition: color 0.2s;
}
.lang-btn.active, .lang-btn:hover { color: var(--brown); }

/* ===== LOGO — clean, no background ===== */
.logo-link {
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.nav-logo-img {
  height: 38px; width: auto;
  display: block;
  mix-blend-mode: multiply;
  image-orientation: from-image;
}

.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 1.8rem; }

.nav-link {
  text-decoration: none; color: var(--text-soft); font-size: 0.82rem; font-weight: 400;
  letter-spacing: 0.04em; transition: color 0.2s; border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.nav-link:hover { color: var(--brown); }

.cart-btn {
  background: none; border: none; cursor: pointer; color: var(--brown);
  display: flex; align-items: center; gap: 0.35rem; position: relative; transition: opacity 0.2s;
  font-family: 'Outfit', sans-serif; font-size: 0.82rem;
}
.cart-btn:hover { opacity: 0.65; }

.cart-count {
  font-size: 0.72rem; font-weight: 500; color: var(--brown); display: none;
}

.burger { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--brown); }

/* ===== HERO ===== */
.hero { position: relative; height: 88vh; overflow: hidden; }
.hero-img { width: 100%; height: 100%; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(26,18,8,0.18); gap: 1rem;
}
.hero-overlay h1 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 300; color: var(--white); letter-spacing: 0.25em; text-align: center;
}
.hero-tagline {
  font-size: 0.85rem; color: rgba(255,255,255,0.85);
  letter-spacing: 0.15em; text-transform: uppercase; font-weight: 300;
}
.hero-cta {
  display: inline-block; background: var(--white); color: var(--brown);
  padding: 0.9rem 2.8rem; text-decoration: none; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid transparent; transition: all 0.25s;
}
.hero-cta:hover { background: transparent; color: var(--white); border-color: var(--white); }

/* ===== SHOP ===== */
.shop { padding: 3rem 4% 5rem; }
.shop-header { text-align: center; margin-bottom: 3rem; }
.shop-header h2 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 400; color: var(--brown); letter-spacing: 0.04em;
}
.shop-sub { font-size: 0.8rem; color: var(--text-soft); letter-spacing: 0.08em; margin-top: 0.4rem; }

/* PRODUCT GRID — 3 cols, consistent size */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.product-card {
  cursor: pointer;
  position: relative;
  border: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card:hover .product-img img { transform: scale(1.03); }

/* ===== PRODUCT IMAGE — smaller, consistent, no emoji ===== */
.product-img {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--white);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.product-img img {
  width: 80%; height: 80%;
  object-fit: contain; object-position: center;
  transition: transform 0.5s ease;
}
/* HIDE the bread emoji fallback */
.product-img .fallback { display: none; }

.product-badge {
  position: absolute; top: 0.7rem; left: 0.7rem;
  background: var(--brown); color: var(--white); font-size: 0.65rem;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.6rem; z-index: 2;
}

.product-info {
  padding: 1rem 1rem 1.3rem;
  background: var(--white);
  border-top: 0.5px solid var(--border);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--brown);
  margin-bottom: 0.2rem;
  letter-spacing: 0.02em;
  text-align: center;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
}
.product-desc {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-bottom: 0.7rem;
  line-height: 1.5;
  text-align: center;
  flex: 1;
}
.product-footer { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-size: 0.88rem; color: var(--text); font-weight: 400; letter-spacing: 0.04em; }

.add-btn {
  background: var(--brown); color: var(--white); border: none;
  padding: 0.4rem 0.9rem; font-family: 'Outfit', sans-serif; font-size: 0.7rem;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.2s;
}
.add-btn:hover { background: var(--brown-mid); }
.add-btn.added { background: var(--tan); }

/* SIZE BUTTONS */
.size-options { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.size-btn {
  flex: 1; min-width: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 8px; background: none; border: 1.5px solid var(--border);
  border-radius: 100px; cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.size-btn:hover { background: var(--brown); border-color: var(--brown); }
.size-btn:hover .size-label, .size-btn:hover .size-price { color: white; }
.size-btn.added { background: var(--tan); border-color: var(--tan); }
.size-label { font-size: 0.66rem; font-weight: 600; color: var(--text-soft); letter-spacing: 0.05em; text-transform: uppercase; }
.size-price { font-size: 0.84rem; font-weight: 500; color: var(--brown); }

/* ===== CART ===== */
.cart-overlay { display: none; position: fixed; inset: 0; background: rgba(26,18,8,0.2); z-index: 300; }
.cart-overlay.open { display: block; }
.cart-sidebar {
  position: fixed; top: 0; right: -420px; width: 400px; max-width: 96vw; height: 100vh;
  background: var(--white); z-index: 301; display: flex; flex-direction: column;
  border-left: 1px solid var(--border); transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
}
.cart-sidebar.open { right: 0; }
.cart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--border);
}
.cart-header h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 400; color: var(--brown); letter-spacing: 0.1em; text-transform: uppercase; }
.cart-close { background: none; border: none; font-size: 0.88rem; cursor: pointer; color: var(--text-soft); }
.cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart-empty { text-align: center; color: var(--text-soft); margin-top: 3rem; font-size: 0.85rem; }
.cart-item { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.cart-item-img { width: 60px; height: 60px; background: var(--cream); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; position: relative; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: var(--brown); margin-bottom: 2px; }
.cart-item-meta { font-size: 0.75rem; color: var(--text-soft); margin-bottom: 4px; }
.cart-item-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
}
.cart-item-qty {
  font-size: 0.78rem;
  color: var(--brown);
  font-weight: 500;
  background: var(--cream);
  padding: 2px 7px;
  border-radius: 10px;
}
.cart-item-total {
  font-size: 0.85rem;
  color: var(--brown);
  font-weight: 500;
}
.cart-item-controls { display: flex; align-items: center; gap: 0.4rem; }
.qty-btn { background: none; border: 1px solid var(--border); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; color: var(--brown); transition: all 0.2s; }
.qty-btn:hover { background: var(--cream); }
.qty-num { font-size: 0.85rem; min-width: 18px; text-align: center; }
.cart-footer { padding: 1.3rem 1.5rem; border-top: 1px solid var(--border); }
.cart-total { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 1rem; color: var(--brown); letter-spacing: 0.06em; text-transform: uppercase; }
.cart-total strong { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; }

/* ===== BUTTONS ===== */
.btn-dark {
  display: inline-block; background: var(--brown); color: var(--white);
  padding: 0.8rem 2rem; font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; border: none; cursor: pointer; text-decoration: none; transition: all 0.2s;
}
.btn-dark:hover { background: var(--brown-mid); }
.btn-dark.full { width: 100%; text-align: center; display: block; }
.btn-outline {
  display: inline-block; background: transparent; color: var(--brown);
  padding: 0.8rem 2rem; font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; text-align: center;
}
.btn-outline:hover { border-color: var(--brown); }
.btn-outline.full { width: 100%; display: block; }

/* ===== MODAL ===== */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(26,18,8,0.45); z-index: 400; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.open { display: flex; }
.modal { background: var(--white); padding: 2.5rem; width: 100%; max-width: 450px; max-height: 90vh; overflow-y: auto; position: relative; animation: fadeUp 0.25s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.modal h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 400; color: var(--brown); letter-spacing: 0.06em; margin-bottom: 1.4rem; }
.modal-close { position: absolute; top: 1.1rem; right: 1.1rem; background: none; border: none; font-size: 0.88rem; cursor: pointer; color: var(--text-soft); }
.order-summary { background: var(--bg); padding: 0.9rem 1rem; margin-bottom: 1.3rem; font-size: 0.83rem; color: var(--text-soft); line-height: 1.9; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.7rem; font-weight: 500; color: var(--text-soft); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.35rem; }
.form-group input, .form-group textarea { width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--border); background: var(--bg); font-family: 'Outfit', sans-serif; font-size: 0.92rem; font-weight: 400; color: var(--text); outline: none; transition: border-color 0.2s; border-radius: 0; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--brown); }
.form-group textarea { min-height: 80px; resize: vertical; }
.step-note { font-size: 0.85rem; color: var(--text-soft); margin-bottom: 1.3rem; line-height: 1.65; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.qr-placeholder { width: 180px; height: 180px; border: 1.5px dashed var(--tan); display: flex; align-items: center; justify-content: center; background: var(--bg); text-align: center; color: var(--text-soft); font-size: 0.8rem; padding: 1rem; }
.pay-total { font-size: 0.9rem; color: var(--brown); display: flex; gap: 0.5rem; align-items: center; }
.pay-total strong { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; }

/* ===== ABOUT PAGE ===== */
.page-hero { background: var(--cream); padding: 4rem 8% 3rem; border-bottom: 1px solid var(--border); }
.page-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; color: var(--brown); letter-spacing: 0.12em; text-transform: uppercase; }
.page-hero p { margin-top: 0.6rem; color: var(--text-soft); font-size: 0.85rem; letter-spacing: 0.06em; }
.about-section { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); }
.about-img { overflow: hidden; min-height: 500px; background: var(--cream); display: flex; align-items: center; justify-content: center; }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-img .fallback { font-size: 8rem; opacity: 0.25; }
.about-text { padding: 5rem 6%; display: flex; flex-direction: column; justify-content: center; }
.about-text h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 400; color: var(--brown); letter-spacing: 0.06em; margin-bottom: 1.2rem; }
.about-text p { color: var(--text-soft); margin-bottom: 1rem; font-size: 0.92rem; line-height: 1.8; }
.perks-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
.perk-item { padding: 2.5rem 1.5rem; border-right: 1px solid var(--border); text-align: center; }
.perk-item:last-child { border-right: none; }
.perk-icon { font-size: 1.4rem; margin-bottom: 0.8rem; }
.perk-item h4 { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 500; color: var(--brown); margin-bottom: 0.4rem; }
.perk-item p { font-size: 0.76rem; color: var(--text-soft); line-height: 1.55; }

/* ===== CONTACT PAGE ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); }
.contact-left { padding: 5rem 6%; background: var(--bg); border-right: 1px solid var(--border); }
.contact-left h2 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 400; color: var(--brown); letter-spacing: 0.06em; margin-bottom: 2rem; }
.contact-item { margin-bottom: 1.8rem; }
.contact-item h4 { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 0.3rem; }
.contact-item p, .contact-item a { color: var(--brown); font-size: 0.9rem; text-decoration: none; }
.contact-item a:hover { color: var(--brown-mid); }
.contact-right { padding: 5rem 6%; }
.contact-right h2 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 400; color: var(--brown); letter-spacing: 0.06em; margin-bottom: 1.8rem; }
.form-submit { width: 100%; padding: 0.8rem; background: var(--brown); color: var(--white); font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.2s; }
.form-submit:hover { background: var(--brown-mid); }
.success-msg { display: none; background: #f0f7f0; color: #2d6a2d; padding: 0.9rem; margin-top: 0.9rem; font-size: 0.82rem; }

/* ===== FOOTER ===== */
footer { border-top: 1px solid var(--border); background: var(--brown); padding: 2rem 4%; }
.footer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand { display: flex; align-items: center; }
.footer-logo-img { height: 48px; width: auto; object-fit: contain; filter: brightness(10); image-orientation: from-image; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.8rem; letter-spacing: 0.06em; transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.footer-bottom p { font-size: 0.75rem; color: rgba(255,255,255,0.4); }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .about-section, .contact-grid { grid-template-columns: 1fr; }
  .about-img { min-height: 300px; }
  .perks-strip { grid-template-columns: repeat(2, 1fr); }
  .hero { height: 70vh; }
  .hero-overlay h1 { font-size: clamp(2.8rem, 10vw, 6rem); }
}

@media (max-width: 640px) {
  /* === NAVIGATION === */
  nav {
    grid-template-columns: auto 1fr auto;
    padding: 0.5rem 4%;
    gap: 0.5rem;
  }
  .nav-left { gap: 0.3rem; flex-shrink: 0; }
  .nav-center { justify-self: center; }
  .nav-right { gap: 0.5rem; }
  .nav-right .nav-link { display: none; }
  .burger { display: block; }
  .nav-logo-img { height: 28px; }
  .lang-btn { font-size: 0.7rem; padding: 4px 6px; }

  /* === HERO === */
  .hero { height: 65vh; min-height: 420px; }
  .hero-overlay { padding: 0 1rem; }
  .hero-overlay h1 { font-size: clamp(2.2rem, 12vw, 3.5rem); letter-spacing: 0.1em; }
  .hero-tagline { font-size: 0.7rem; letter-spacing: 0.15em; }
  .hero-cta {
    padding: 0.85rem 2rem;
    font-size: 0.75rem;
    margin-top: 1.5rem;
  }

  /* === SHOP === */
  .shop { padding: 1.5rem 3% 2.5rem; }
  .shop-header { margin-bottom: 1.5rem; }
  .shop-header h2 { font-size: 1.5rem; }
  .shop-sub { font-size: 0.7rem; margin-top: 0.3rem; }

  /* === SCHEDULE BANNER === */
  .schedule-banner {
    padding: 1.1rem 0.9rem;
    margin: 0 0 1.8rem;
    border-radius: 12px;
  }
  .schedule-title { font-size: 1.2rem; }
  .schedule-note { font-size: 0.75rem; line-height: 1.55; }
  .schedule-logo-icon { width: 40px; height: 40px; }
  .schedule-steps { gap: 0.3rem; }
  .schedule-step { padding: 0.7rem 0.5rem; min-width: 0; }
  .step-arrow { display: none; }
  .step-icon { font-size: 1.2rem; }
  .step-label { font-size: 0.78rem; }
  .step-days { font-size: 0.6rem; letter-spacing: 0.08em; }
  .step-time { font-size: 0.55rem; }
  .schedule-cutoff {
    padding: 0.7rem 0.9rem;
    font-size: 0.72rem;
    line-height: 1.55;
  }

  /* === PRODUCT GRID — single column on phones === */
  .products-grid { grid-template-columns: 1fr; gap: 0; }
  .product-card {
    border-bottom: 0.5px solid var(--border);
    border-right: none !important;
  }
  .product-card:last-child { border-bottom: none; }
  .product-img { aspect-ratio: 16/10; }
  .product-info { padding: 1rem 1.2rem 1.4rem; }
  .product-name { font-size: 1.15rem; }
  .product-desc { font-size: 0.78rem; line-height: 1.55; margin-bottom: 0.8rem; }

  /* Size pills more elegant on mobile */
  .size-pill { padding: 4px 4px 3px; }
  .size-pill .pill-price { font-size: 0.72rem; }
  .size-pill .pill-weight { font-size: 0.72rem; }
  .single-size { padding: 4px 12px 3px; }
  .single-price { font-size: 0.85rem; }

  .order-btn { font-size: 0.82rem; padding: 10px 12px; }

  /* === CART SIDEBAR === */
  .cart-sidebar { width: 100vw; right: -100vw; max-width: 100%; }

  /* === CHECKOUT MODAL === */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    padding: 1.5rem 1.2rem 1.8rem;
    max-height: 92vh;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
  .modal h2 { font-size: 1.4rem; margin-bottom: 1rem; }
  .form-group label { font-size: 0.65rem; }
  .form-group input, .form-group textarea {
    font-size: 1rem; /* prevent iOS auto-zoom */
    padding: 0.75rem 0.9rem;
  }

  /* === PAYMENT METHODS === */
  .pay-methods-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .pay-method-card { padding: 1.2rem 1rem; }

  /* === FOOTER === */
  .footer-top { flex-direction: column; gap: 0.8rem; text-align: center; padding: 2rem 5%; }
  .footer-links { justify-content: center; flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.2rem 5%; font-size: 0.72rem; }

  /* === CONTACT PAGE === */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-left, .contact-right { padding: 2.5rem 6%; }
  .contact-left { border-right: none; border-bottom: 1px solid var(--border); }
  .contact-left h2 { font-size: 1.6rem; }
  .page-hero { padding: 2.5rem 5% 2rem; }
  .page-hero h1 { font-size: 1.8rem; }

  /* === PERKS STRIP === */
  .perks-strip { grid-template-columns: repeat(2, 1fr); }
  .perk-item { padding: 1.5rem 1rem; }
}

@media (max-width: 380px) {
  .hero-overlay h1 { font-size: 2rem; letter-spacing: 0.08em; }
  .schedule-step { padding: 0.5rem 0.3rem; }
  .step-label { font-size: 0.7rem; }
  .step-days { font-size: 0.55rem; }
  .step-time { font-size: 0.5rem; }
}

/* ===== SCHEDULE BANNER ===== */


.schedule-header {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.schedule-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-top: 2px;
}

.schedule-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: #2C1A0E;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.schedule-note {
  font-size: 0.82rem;
  color: #8A7A68;
  line-height: 1.5;
}

.schedule-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.schedule-step {
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E8E2D8;
  border-radius: 10px;
  padding: 1rem 1.4rem;
  min-width: 120px;
  flex: 1;
  max-width: 180px;
}

.step-days {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C4B49A;
  margin-bottom: 0.5rem;
}

.step-icon {
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

.step-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #2C1A0E;
  letter-spacing: 0.02em;
}

.step-arrow {
  font-size: 1.2rem;
  color: #C4B49A;
  font-weight: 300;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .schedule-steps { gap: 0.5rem; }
  .schedule-step { min-width: 90px; padding: 0.8rem; }
  .step-arrow { display: none; }
  .schedule-banner { padding: 1.3rem; }
}

/* ===== PICKUP DATE in checkout confirmation ===== */
.pickup-date {
  background: #F0E6D0;
  border-left: 4px solid #C8956A;
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #3A200A;
  line-height: 1.6;
}
.pickup-date strong {
  font-size: 1.1rem;
  color: #C8956A;
}

/* ===== SCHEDULE BANNER ===== */
.schedule-banner {
  background: #FBF6EE;
  border: 1px solid #DDD0B5;
  border-radius: 14px;
  padding: 1.4rem 1.6rem 1.2rem;
  margin: 0 auto 2.5rem;
  max-width: 760px;
  text-align: center;
}

.schedule-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.schedule-intro-icon {
  display: flex; align-items: center; justify-content: center;
}
.schedule-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 400;
  color: #2C1A0E; letter-spacing: 0.04em;
}
.schedule-note {
  font-size: 0.82rem; color: #8A7A68;
  line-height: 1.6; max-width: 520px;
  margin: 0 auto;
  font-family: 'Outfit', sans-serif; font-weight: 300;
}

.schedule-steps {
  display: flex; align-items: center;
  justify-content: center;
  gap: 0.5rem; flex-wrap: nowrap;
  margin-bottom: 1.2rem;
}

.schedule-step {
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E8E2D8;
  border-radius: 12px;
  padding: 0.9rem 1rem 0.8rem;
  flex: 1; min-width: 0; max-width: 180px;
  display: flex; flex-direction: column;
  align-items: center; gap: 0.25rem;
}

.step-days {
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #C4B49A;
}
.step-icon { font-size: 1.4rem; }
.step-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem; font-weight: 500;
  color: #2C1A0E; line-height: 1.2;
}
.step-time {
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem; color: #C8956A;
  font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.step-arrow {
  font-size: 0.9rem; color: #C4B49A;
  flex-shrink: 0;
}
.schedule-cutoff {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: #FFF9F0; border: 1px solid #DDD0B5;
  border-radius: 8px; padding: 0.75rem 1rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem; color: #6B4A2A;
  line-height: 1.6; text-align: left;
}
.cutoff-icon { font-size: 0.9rem; flex-shrink: 0; margin-top: 2px; }

/* Mobile schedule */
@media (max-width: 560px) {
  .schedule-steps { gap: 0.3rem; }
  .schedule-step { padding: 0.7rem 0.6rem; }
  .step-arrow { display: none; }
  .step-icon { font-size: 1.2rem; }
  .step-label { font-size: 0.85rem; }
  .schedule-banner { padding: 1.1rem 1rem; }
}

/* ===== PICKUP NOTICE in checkout ===== */
.pickup-notice {
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.6;
}
.pickup-notice.ok {
  background: #F0E6D0;
  border-left: 4px solid #C8956A;
  color: #3A200A;
}
.pickup-notice.ok strong { color: #C8956A; font-size: 1rem; }
.pickup-notice.warn {
  background: #FFF3E0;
  border-left: 4px solid #E65100;
  color: #4E2500;
}
.pickup-date.warn {
  background: #FFF3E0;
  border-left: 4px solid #E65100;
  color: #4E2500;
}

/* ===== KASPI QR ===== */


/* Schedule logo icon */
.schedule-logo-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Scroll offset — lands just above bread grid with breathing room */
#shop {
  scroll-margin-top: 80px;
}

/* ===== CART PICKUP REMINDER ===== */
.cart-pickup-reminder {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: #FBF6EE;
  border: 1px solid #DDD0B5;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.9rem;
  font-size: 0.82rem;
  color: #6B4A2A;
  line-height: 1.4;
}
.cart-pickup-reminder strong {
  color: #C8956A;
  font-weight: 600;
}
.cart-reminder-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}







/* ===== PAYMENT METHODS GRID ===== */
.pay-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.pay-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.4rem 1rem;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Outfit', sans-serif;
  text-decoration: none;
  color: inherit;
}
.pay-method-card:hover {
  border-color: var(--brown);
  background: var(--bg);
  transform: translateY(-2px);
}
.pay-method-card:active { transform: translateY(0); }
.pay-method-icon { font-size: 2rem; }
.pay-method-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brown);
}
.pay-method-subtitle {
  font-size: 0.78rem;
  color: var(--text-soft);
  font-weight: 400;
}
.pay-method-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--tan);
  margin-top: 0.3rem;
}

@media (max-width: 560px) {
  .pay-methods-grid { grid-template-columns: 1fr; }
}

/* ===== UNIFIED PRODUCT CARD ===== */
.size-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 0.7rem;
  flex-wrap: nowrap;
}
.size-pill {
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  font-family: 'Outfit', sans-serif;
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
.size-pill .pill-price {
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brown);
  letter-spacing: 0.01em;
  line-height: 1;
}
.size-pill .pill-weight {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  line-height: 1;
}
.size-pill .pill-sep {
  color: var(--border);
  font-size: 0.75rem;
}
.size-pill:hover { border-color: var(--brown); }
.size-pill.active {
  background: var(--brown);
  border-color: var(--brown);
}
.size-pill.active .pill-price { color: white; }
.size-pill.active .pill-weight { color: rgba(255,255,255,0.7); }
.size-pill.active .pill-sep { color: rgba(255,255,255,0.4); }

.single-size {
  font-family: 'Outfit', sans-serif;
  margin-bottom: 0.7rem;
  padding: 6px 10px;
  background: transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--border);
}
.single-price {
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brown);
  letter-spacing: 0.01em;
  line-height: 1;
}
.single-weight {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ===== ORDER BUTTON on each card ===== */
.order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 11px 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--brown);
  color: white;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.04em;
}
.order-btn:hover {
  background: var(--brown-mid);
  transform: translateY(-1px);
}
.order-btn-icon {
  font-size: 1rem;
  line-height: 1;
}
.order-btn-label {
  line-height: 1;
}

/* ===== QTY POPUP ===== */
.qty-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 8, 0.45);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.qty-overlay.open {
  display: flex;
  animation: fadeIn 0.18s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.qty-popup {
  position: relative;
  background: white;
  border-radius: 18px;
  padding: 2rem 1.6rem 1.4rem;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  animation: popUp 0.2s ease;
}
@keyframes popUp {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.qty-popup-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--text-soft);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.qty-popup-close:hover { color: var(--brown); }

.qty-popup-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--brown);
  margin-bottom: 0.3rem;
  letter-spacing: 0.02em;
}
.qty-popup-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: 1.4rem;
}

.qty-popup-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.qty-popup-btn {
  width: 48px;
  height: 48px;
  background: var(--cream);
  color: var(--brown);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-popup-btn:hover {
  background: var(--brown);
  color: white;
  border-color: var(--brown);
}
.qty-popup-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--brown);
  min-width: 60px;
}

.qty-popup-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.9rem 0.6rem;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  margin-bottom: 1.2rem;
  font-family: 'Outfit', sans-serif;
}
.qty-popup-total-label {
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.qty-popup-total {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--brown);
}

.qty-popup-confirm {
  width: 100%;
  padding: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  background: var(--brown);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.18s;
}
.qty-popup-confirm:hover {
  background: var(--brown-mid);
}

@media (max-width: 480px) {
  .qty-popup { padding: 1.6rem 1.2rem 1.2rem; }
  .qty-popup-name { font-size: 1.25rem; }
  .qty-popup-num { font-size: 2.2rem; }
  .qty-popup-btn { width: 44px; height: 44px; }
}

/* ===== ORDER RECEIPT (confirmation step) ===== */
.receipt {
  text-align: left;
  font-family: 'Outfit', sans-serif;
}
.receipt-num {
  text-align: center;
  font-size: 0.65rem;
  color: var(--text-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed var(--border);
  opacity: 0.8;
}
.receipt-num strong {
  display: block;
  margin-top: 0.3rem;
  font-family: 'Outfit', sans-serif;
  color: var(--brown);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: none;
  opacity: 1;
}
.receipt-pickup {
  text-align: center;
  background: var(--cream);
  border-radius: 10px;
  padding: 0.8rem 1.2rem;
  margin-bottom: 1rem;
}
.receipt-pickup-label {
  font-size: 0.58rem;
  color: var(--text-soft);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
  opacity: 0.75;
}
.receipt-pickup-date {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--brown);
  letter-spacing: 0;
}
.receipt-section { margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px dashed var(--border); }
.receipt-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.receipt-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.25rem 0;
}
.receipt-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--brown);
  font-weight: 400;
}
.receipt-item-meta {
  font-family: 'Outfit', sans-serif;
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.receipt-total strong {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--brown);
  letter-spacing: 0;
  text-transform: none;
}
.receipt-row {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
  font-size: 0.8rem;
}
.receipt-row span:first-child {
  color: var(--text-soft);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.receipt-row span:last-child { color: var(--text); font-weight: 400; text-align: right; }
.receipt-warn {
  background: #FFF3E0;
  border-left: 3px solid #E65100;
  border-radius: 0 8px 8px 0;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  color: #4E2500;
  line-height: 1.55;
}

/* ===== ORDER NUMBER HERO ===== */
.order-num-hero {
  background: linear-gradient(180deg, var(--cream) 0%, #F2EDE5 100%);
  border: 1.5px solid var(--tan);
  border-radius: 14px;
  padding: 1.4rem 1.2rem 1rem;
  margin-bottom: 1.2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.order-num-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tan);
}
.order-num-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.order-num-big {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--brown);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 0.9rem;
}
.order-num-copy {
  background: white;
  color: var(--brown);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.18s;
}
.order-num-copy:hover {
  background: var(--brown);
  color: white;
  border-color: var(--brown);
}
.order-num-copy.copied {
  background: #2E7D32;
  color: white;
  border-color: #2E7D32;
}

/* "Save to WhatsApp" button on receipt */
.receipt-share-btn {
  display: block;
  text-align: center;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: #25D366;
  color: white !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px;
  transition: opacity 0.2s, transform 0.15s;
  letter-spacing: 0.02em;
}
.receipt-share-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ===== UNAVAILABLE PRODUCTS ===== */
.product-unavailable { opacity: 0.6; pointer-events: none; }
.product-unavailable .product-img img { filter: grayscale(60%); }

.unavailable-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.55);
  color: white;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
}
.unavailable-btn {
  width: 100%;
  margin-top: auto;
  padding: 11px 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--border);
  color: var(--text-soft);
  border-radius: 9px;
  text-align: center;
  letter-spacing: 0.04em;
}