/* ==========================================================================
   HOUSE OF BAKERY — Diwali hampers page
   Loads after css/style.css and reuses its tokens, buttons, header and
   footer. Everything here is scoped to the hampers page.
   --------------------------------------------------------------------------
   01. Page tokens
   02. Hero (Hamper Section Video.mp4)
   03. Toolbar: filters, sort, count
   04. Hamper grid and cards
   05. Ordering section and terms
   06. Product modal
   07. Responsive
   ========================================================================== */

/* ==========================================================================
   01. PAGE TOKENS
   ========================================================================== */
.page-hampers {
  --burgundy: #6E1F2A;
  --burgundy-soft: rgba(110, 31, 42, 0.08);
}

/* 02. HERO — the shared .hero-carousel component is used here; see
   section 07c of css/style.css. Slides are set in hampers.html. */

/* ==========================================================================
   03. TOOLBAR
   ========================================================================== */
.hamper-note {
  max-width: 62ch;
  margin: 18px auto 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}
.hamper-note strong { color: var(--burgundy); }

/* the GST / delivery line that appears with the Diwali Hampers tab on the
   homepage, directly under the filter row */
.hamper-tab-note {
  max-width: 70ch;
  margin: 14px auto 0;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
}
.hamper-tab-note a {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hamper-tab-note[hidden] { display: none; }

.hamper-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.hamper-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hamper-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hamper-sort label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hamper-sort select {
  padding: 11px 38px 11px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236F625A' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px;
  appearance: none;
  -webkit-appearance: none;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}
.hamper-sort select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-tint);
}

.hamper-count {
  margin: 0 0 26px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Pagination ---- */
.hamper-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(32px, 4vw, 48px);
}
.hamper-page {
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.24s var(--ease), color 0.24s var(--ease),
    border-color 0.24s var(--ease);
}
.hamper-page:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-deep); }
.hamper-page.is-current {
  background: var(--choco);
  border-color: var(--choco);
  color: var(--cream);
}
.hamper-page:disabled { opacity: 0.35; cursor: default; }
.hamper-page--arrow { font-size: 1.1rem; line-height: 1; }
.hamper-page-gap { padding: 0 2px; color: var(--muted); }

.hamper-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--muted);
}
.link-button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--gold-deep);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ==========================================================================
   04. GRID AND CARDS
   ========================================================================== */
/* Same geometry as the Our Menu cards on the homepage: three per row, each
   400px tall, the row spilling only into spare page margin. */
.hamper-grid {
  --spill: min(53px, max(0px, (100vw - 1240px) / 2));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-inline: calc(-1 * var(--spill));
}

.hamper-card {
  display: flex;
  flex-direction: column;
  height: 400px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease), opacity 0.7s var(--ease);
}
.hamper-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-tint-2);
  box-shadow: var(--shadow-lg);
}
/* display:flex above would otherwise beat the hidden attribute */
.hamper-card[hidden],
.hamper-card.is-hidden { display: none !important; }

/* The Diwali tab inside Our Menu on the homepage reuses the product grid,
   so it only needs the hover hint off — the photograph itself opens the
   details there, and the three-per-row sizing already matches. */
.hamper-card--lg .hamper-card__hint { display: none; }

@media (max-width: 1024px) {
  .hamper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hamper-grid { gap: 14px; margin-inline: 0; }
  .hamper-card { height: 340px; }
}
@media (max-width: 430px) {
  .hamper-grid { grid-template-columns: minmax(0, 1fr); }
  .hamper-card { height: 320px; }
}

/* staggered entrance, batch by batch as you scroll */
.hamper-card.is-pending {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
.hamper-card.is-in {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* the photograph is the button — clicking it opens the details */
.hamper-card__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  flex: 1 1 auto;        /* fills whatever the price row leaves of the 400px */
  min-height: 0;
  background: var(--ink-tint);
  cursor: pointer;
}
.hamper-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.hamper-card:hover .hamper-card__media img { transform: scale(1.06); }

.hamper-card__hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translate(-50%, 8px);
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 253, 248, 0.94);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.hamper-card:hover .hamper-card__hint,
.hamper-card__media:focus-visible .hamper-card__hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* just the price under the photograph — everything else lives in the modal */
.hamper-card__foot {
  display: flex;
  flex: none;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 14px 18px 16px;
}
/* "Price: ₹1,499" — a small interface-font label then the amount. The same
   two parts are used in the modal, so both read identically. */
.hamper-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.price-label {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-value { white-space: nowrap; }
.hamper-card__price .price-label { font-size: 0.8rem; }
.hamper-card__price small {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   05. ORDERING AND TERMS
   ========================================================================== */
.hamper-enquiry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.hamper-enquiry__address {
  margin-top: 24px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
}

.hamper-terms {
  padding: clamp(22px, 3vw, 32px);
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
/* Open, the full terms run far taller than the panel beside them, so the
   list scrolls inside its own box and the panel stays in proportion with
   the column next to it. Every term is still there — nothing is cut. */
.hamper-terms__scroll {
  max-height: min(58vh, 430px);
  margin-top: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;        /* the page does not scroll with it */
  -webkit-overflow-scrolling: touch;   /* momentum scrolling on iOS */
  scrollbar-width: thin;
  /* a hint that there is more below */
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}
.hamper-terms__scroll:focus-visible { outline-offset: 6px; }
.hamper-terms__scroll::-webkit-scrollbar { width: 6px; }
.hamper-terms__scroll::-webkit-scrollbar-thumb {
  background: var(--gold-tint-2);
  border-radius: 3px;
}
.hamper-terms summary {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.hamper-terms summary::marker { color: var(--gold); }
.hamper-terms ul {
  margin: 0;
  padding: 0 14px 0 1.1em;
  display: grid;
  gap: 12px;
}
.hamper-terms li {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
}
.hamper-terms strong { color: var(--ink); }

/* ==========================================================================
   06. MODAL
   ========================================================================== */
.hamper-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 44px);
  background: rgba(22, 14, 10, 0.86);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.hamper-modal.is-open { display: flex; opacity: 1; }

.hamper-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  width: min(960px, 100%);
  max-height: min(88vh, 760px);
  overflow: hidden;
  background: var(--cream);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(18px) scale(0.985);
  transition: transform 0.4s var(--ease);
}
.hamper-modal.is-open .hamper-modal__panel { transform: none; }

.hamper-modal__figure {
  margin: 0;
  background: var(--ink-tint);
}
.hamper-modal__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hamper-modal__body {
  padding: clamp(24px, 3vw, 40px);
  overflow-y: auto;
}
/* the price is the modal heading — the catalogue prints no hamper names */
.hamper-modal__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 700;
}
.hamper-modal__title .price-label { font-size: 0.85rem; }
.hamper-modal__group { margin-bottom: 18px; }
.hamper-modal__group h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.hamper-modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.hamper-modal__list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--muted);
}
.hamper-modal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.hamper-modal__note {
  margin: 10px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
}
.hamper-modal__tax {
  margin: 0 0 20px;
  font-size: 0.78rem;
  color: var(--muted);
}

.hamper-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.94);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.hamper-modal__close:hover { background: var(--ink); color: var(--cream); }
.hamper-modal__close svg { width: 18px; height: 18px; }

/* ==========================================================================
   07. RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .hamper-enquiry { grid-template-columns: minmax(0, 1fr); }
  .hamper-modal__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .hamper-modal__figure { max-height: 34vh; }
}

@media (max-width: 760px) {
  .hamper-card__foot { padding: 12px 12px 14px; }
  .hamper-card__price { font-size: 1.02rem; }
  .hamper-card__hint { font-size: 0.6rem; padding: 7px 14px; opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 640px) {

  .hamper-toolbar {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;   /* column + wrap would lay the rows out side by side */
  }
  .hamper-toolbar > * { min-width: 0; }   /* let the scrolling filter row shrink */
  .hamper-filters {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .hamper-filters::-webkit-scrollbar { display: none; }
  .hamper-filters .filter-btn { flex: none; }
  .hamper-sort { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .hamper-card.is-pending { opacity: 1; transform: none; }
  .hamper-card:hover { transform: none; }
  .hamper-card:hover .hamper-card__media img { transform: none; }
}

/* ==========================================================================
   09. TYPE COLOUR AND SCALE (matches section 22 of css/style.css)
   This file loads after style.css, so the black copy and the 40px modal
   heading are restated here to land on top of the rules above.
   ========================================================================== */
.hamper-card__price,
.hamper-card__hint,
.hamper-note strong,
.hamper-modal__title,
.hamper-terms summary,
.hamper-terms strong,
.hamper-terms li,
.hamper-note,
.hamper-tab-note,
.hamper-count,
.hamper-page,
.hamper-sort select,
.hamper-modal__close { color: #000; }

.hamper-modal__title { font-size: 40px; line-height: 1.2; }
.hamper-note,
.hamper-tab-note,
.hamper-terms p,
.hamper-terms li { font-size: 20px; line-height: 1.65; }