/* ==========================================================================
   MUNARISH Academy — browse menu, flyer banner, shop and sign-in
   --------------------------------------------------------------------------
   Loaded alongside site.css on every public page. Kept as a second file rather
   than appended to the first because these are the pieces the shop introduced,
   and it is useful to be able to read them without scrolling past the whole
   marketing stylesheet.

   As everywhere on this site: no inline styles, because the CSP is
   `style-src 'self'` with no 'unsafe-inline'.
   ========================================================================== */

/* --- Browse menu: Academic / Non-academic --------------------------------- */
.has-menu { position: relative; }

.menu-panel {
  position: absolute; top: calc(100% + .5rem); left: 50%; transform: translateX(-50%);
  width: min(92vw, 720px); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 18px 50px rgba(18, 32, 58, .16);
  padding: 1.4rem; display: none; z-index: 60;
}
.menu-panel.open { display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr; }

@media (max-width: 880px) {
  .menu-panel {
    position: static; transform: none; width: auto;
    box-shadow: none; border: 0; padding: .4rem 0;
  }
  .menu-panel.open { grid-template-columns: 1fr; gap: 1rem; }
}

.menu-col h4 {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .2rem;
}
.menu-col > p { font-size: .84rem; color: var(--ink-faint); margin: 0 0 .8rem; }
.menu-links { display: grid; gap: .1rem; }
.menu-links a {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem;
  border-radius: 9px; text-decoration: none; color: var(--ink); font-size: .95rem;
}
.menu-links a:hover { background: var(--bg-tint); }
.menu-links .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.menu-links .label { display: flex; flex-direction: column; }
.menu-links .sub { font-size: .8rem; color: var(--ink-faint); }
.nav-caret { font-size: .7em; opacity: .6; margin-left: .2rem; }

/* --- Flyer banner --------------------------------------------------------- */
.flyer { background: #ffc20e; }
.flyer-inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem;
  align-items: center; padding: 2.5rem 0;
}
@media (max-width: 960px) { .flyer-inner { grid-template-columns: 1fr; gap: 1.5rem; } }

.flyer-art { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.flyer-art img { width: 100%; height: auto; display: block; }

.flyer-headline {
  font-family: var(--font-display); font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  color: #0d3b52; margin: 0; line-height: 1.05;
}
.flyer-sub {
  font-weight: 800; font-size: clamp(1.05rem, 2.6vw, 1.55rem); color: #c62828;
  margin: .35rem 0 0; text-transform: uppercase; letter-spacing: .01em;
}
.flyer-mode {
  font-weight: 700; font-size: clamp(.95rem, 2vw, 1.15rem);
  color: #123f8a; margin: .3rem 0 1.3rem;
}

/* The subject list from the flyer, as real linked text rather than pixels in a
   JPEG — indexable, translatable, and it survives being read aloud. */
.chip-grid {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.chip {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: .65rem .9rem; border-radius: 8px; color: #fff; font-weight: 800;
  font-size: .9rem; text-decoration: none; text-transform: uppercase;
  letter-spacing: .02em; box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  transition: transform .12s, filter .12s;
}
.chip:hover { transform: translateY(-2px); filter: brightness(1.08); }

.board-pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.2rem; align-items: center; }
.board-pill {
  background: #fff; border-radius: 999px; padding: .35rem 1rem;
  font-weight: 800; font-size: .88rem; color: var(--brand-dark);
}
.flyer-contact {
  margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1.2rem;
  font-weight: 700; color: #0d3b52;
}
.flyer-contact a { color: #0d3b52; text-decoration: none; }
.flyer-contact a:hover { text-decoration: underline; }

/* --- Shop layout ---------------------------------------------------------- */
.shop-layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 2.5rem; align-items: start;
}
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; gap: 1.5rem; } }

.filters { position: sticky; top: 100px; }
@media (max-width: 900px) { .filters { position: static; } }

.filter-group { margin-bottom: 1.6rem; }
.filter-group h4 {
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .6rem;
}
.filter-list { display: grid; gap: .1rem; }
.filter-list a {
  display: flex; justify-content: space-between; gap: .5rem; align-items: center;
  padding: .42rem .6rem; border-radius: 8px; text-decoration: none;
  color: var(--ink-soft); font-size: .92rem;
}
.filter-list a:hover { background: var(--bg-tint); color: var(--ink); }
.filter-list a.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 650; }
.filter-list .n { font-size: .8rem; color: var(--ink-faint); }

.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.shop-head select { padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: .92rem; background: var(--bg); color: var(--ink); }

.product-grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 225px), 1fr));
}

.product {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform .16s, box-shadow .16s;
}
.product:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(18, 32, 58, .14); }
.product-cover { aspect-ratio: 3 / 4; background: var(--bg-tint); position: relative; }
.product-cover img { width: 100%; height: 100%; object-fit: cover; }
.product-kind {
  position: absolute; top: .6rem; left: .6rem; background: rgba(255, 255, 255, .95);
  border-radius: 999px; padding: .22rem .7rem; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--brand-dark);
}
.product-owned {
  position: absolute; top: .6rem; right: .6rem; background: var(--ok);
  color: #fff; border-radius: 999px; padding: .22rem .7rem; font-size: .68rem; font-weight: 700;
}
.product-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; gap: .3rem; }
.product-body h3 { font-size: .97rem; margin: 0; line-height: 1.3; }
.product-meta { font-size: .8rem; color: var(--ink-faint); }
.product-foot { margin-top: auto; padding-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.price { font-weight: 800; font-size: 1.05rem; color: var(--brand-dark); }

/* --- Product detail ------------------------------------------------------- */
.detail-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 3rem; align-items: start; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; gap: 1.8rem; } }
.detail-cover { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.detail-cover img { width: 100%; display: block; }
.spec { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.4rem; font-size: .94rem; margin: 1.3rem 0; }
.spec dt { color: var(--ink-faint); }
.spec dd { margin: 0; font-weight: 600; }
.buy-box { background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.buy-price { font-size: 1.9rem; font-weight: 800; color: var(--brand-dark); line-height: 1; margin-bottom: .3rem; }

/* --- Basket --------------------------------------------------------------- */
.cart-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800;
  margin-left: .35rem;
}
.cart-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.cart-row img { width: 64px; height: 84px; object-fit: cover; border-radius: 7px; }
.cart-row h3 { font-size: .96rem; margin: 0 0 .2rem; }
.cart-total { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 0; font-size: 1.2rem; font-weight: 800; }
.qty { display: flex; align-items: center; gap: .4rem; }
.qty select { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: .9rem; background: var(--bg); color: var(--ink); }

.library-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* --- Sign in with a code -------------------------------------------------- */
.otp-tabs { display: flex; gap: .3rem; background: var(--bg-tint); padding: .3rem; border-radius: 11px; margin-bottom: 1.4rem; }
.otp-tabs button {
  flex: 1; padding: .6rem; border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-weight: 600; font-size: .93rem; color: var(--ink-soft); cursor: pointer;
}
.otp-tabs button[aria-selected="true"] { background: var(--bg); color: var(--brand); box-shadow: var(--shadow); }

.code-input {
  letter-spacing: .45em; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.code-input.code-input { font-size: 1.4rem; }

/* Shown only outside production, where the code is returned in the response
   so the flow can be exercised without a mail or SMS provider. */
.dev-code {
  background: #fff8e1; border: 1px dashed var(--accent); border-radius: 9px;
  padding: .7rem .9rem; font-size: .88rem; margin-bottom: 1rem; color: #7a5c00;
}
.dev-code strong { font-size: 1.1rem; letter-spacing: .15em; }

.divider { display: flex; align-items: center; gap: .9rem; margin: 1.6rem 0; color: var(--ink-faint); font-size: .85rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* --- Programme pages ------------------------------------------------------ */
.programme-hero { padding: clamp(2.5rem, 6vw, 4rem) 0; color: #fff; }
.programme-hero h1 { color: #fff; margin-bottom: .3rem; }
.programme-hero p { color: rgba(255, 255, 255, .9); max-width: 60ch; margin: 0; }
.programme-hero .badge { background: rgba(255, 255, 255, .2); color: #fff; }
.stream-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.stream-card {
  display: block; padding: 1.5rem; border-radius: var(--radius); text-decoration: none;
  color: inherit; background: var(--bg); border: 1px solid var(--line);
  box-shadow: var(--shadow); border-top: 4px solid var(--line);
  transition: transform .16s, box-shadow .16s;
}
.stream-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(18, 32, 58, .13); }
.stream-card h3 { margin-bottom: .3rem; }
.stream-card p { color: var(--ink-soft); font-size: .93rem; margin: 0 0 .8rem; }
.stream-card .meta { font-size: .82rem; color: var(--ink-faint); }

/* Used by scripts to show and hide fields. */
.hidden { display: none !important; }
.btn-sm { padding: .42rem .85rem; font-size: .86rem; }
.mb-2 { margin-bottom: 1.2rem; }
.mt-1 { margin-top: .6rem; }

/* --- Tax breakdown at the basket ------------------------------------------
   The buyer sees what the invoice will say before paying, not after. */
.cart-options { padding: 1rem 0 .2rem; border-bottom: 1px solid var(--line); }
.field-check { display: flex; align-items: center; gap: .55rem; margin-bottom: .3rem; }
.field-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.field-check label { font-weight: 600; font-size: .95rem; margin: 0; }
.gst-details { margin-top: .9rem; }
.gst-details summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--accent); }
.gst-details > .field { margin-top: .7rem; }
.cart-tax { padding: 1rem 0 .4rem; border-bottom: 1px solid var(--line); }
.cart-line { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; font-size: .95rem; }
.cart-line.muted { color: var(--ink-2); font-size: .87rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }