/* ============================================================
   PUJA 2026 — Sharadiya Utsab theme  (module: themes/pujathemes)
   ------------------------------------------------------------
   Self-contained skin for the storefront. Nothing in the core
   site is edited; every rule here only overrides what the base
   assets/css/style.css already defines.

   Loaded AFTER assets/css/style.css, so equal-specificity rules
   here win by source order. No !important is used anywhere.

   Palette (client-supplied):
     primary red .......... #A71930
     deep red / maroon .... #721427
     footer bar ........... #4D0D1A
     cream background ..... #FFF7E8
     gold accent .......... #C99A2E
     dark text ............ #2B1B21
     white ................ #FFFFFF
   ============================================================ */

/* ------------------------------------------------------------
   1. Token remap
   The base stylesheet is entirely token-driven, so re-declaring
   these in :root repaints the whole site in one move.
   ------------------------------------------------------------ */
:root {
  /* Brand ramp: purple -> festive red / maroon */
  --brand: #A71930;
  --brand-500: #A71930;
  --brand-600: #8E1529;
  --brand-700: #721427;
  --brand-300: #D2788A;
  --brand-100: #F3DCD5;
  --brand-50: #FFF7E8;          /* cream — hero + tinted surfaces */

  /* Neutrals warmed up to sit on cream */
  --gray: #EDE2D2;
  --gray-dark: #DCC9A9;
  --white: #FFFFFF;             /* cards stay white for contrast */

  /* Text */
  --ink: #2B1B21;
  --muted: #7A5C58;
  --line: #EFE0C9;

  /* Feedback */
  --sale: #A71930;
  --sale-bg: #FCEBE4;
  --success: #2E9E6D;

  /* Gold family.
     --gold is the client-specified accent, used for borders, dots,
       badges, icon hovers and the CTA hover fill.
     --gold-bright is the legible-on-maroon variant (footer headings,
       link hovers) — 5.9:1 against #721427.
     --gold-ink is the legible-on-cream variant for gold TEXT (the hero
       highlight) — 3.5:1, AA for the large 2.1-3.4rem heading.
     Want the pure #C99A2E highlight in the hero instead? Change the
     single --gold-ink line below to #C99A2E. */
  --gold: #C99A2E;
  --gold-bright: #E0B457;
  --gold-ink: #A87D1C;

  /* Shadows re-tinted violet -> maroon */
  --shadow-card: 0 10px 26px -16px rgba(114, 20, 39, 0.32);
  --shadow-lift: 0 22px 40px -18px rgba(114, 20, 39, 0.42);
  --shadow-soft: 0 4px 14px rgba(114, 20, 39, 0.10);

  /* Slightly softer corners for a festive, ceremonial feel */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;

  /* Custom, theme-only tokens */
  --puja-cream: #FFF7E8;
  --puja-cream-deep: #FBEEDC;
  --puja-maroon: #721427;
  --puja-maroon-bar: #4D0D1A;
  --puja-red: #A71930;
  --puja-gold: #C99A2E;
  --puja-ink: #2B1B21;
  --puja-white: #FFFFFF;
}

/* ------------------------------------------------------------
   2. Page canvas — cream everywhere
   --white is left alone so product/order cards keep their
   white surfaces on top of the cream page.
   ------------------------------------------------------------ */
body {
  background: var(--puja-cream);
  color: var(--puja-ink);
}

/* ------------------------------------------------------------
   3. Site header — cream, gold hairline
   ------------------------------------------------------------ */
.site-header {
  background: var(--puja-cream);
  border-bottom: 1px solid rgba(201, 154, 46, 0.35);
  box-shadow: 0 6px 18px -14px rgba(114, 20, 39, 0.35);
}

.brand { color: var(--puja-red); }
.brand span { color: var(--puja-gold); }

.site-header__nav a { color: var(--muted); }
.site-header__nav a:hover {
  color: var(--puja-maroon);
  border-bottom-color: var(--puja-gold);
}

.cart-pill {
  background: var(--puja-white);
  border-color: rgba(201, 154, 46, 0.45);
  color: var(--puja-maroon);
  box-shadow: var(--shadow-soft);
}

/* Signature divider: red -> gold */
.section-divider {
  background: linear-gradient(90deg, var(--puja-red), var(--puja-gold));
}

/* Announcement bar: deep maroon with cream text */
.announce-bar {
  background: linear-gradient(90deg, var(--puja-maroon), var(--puja-red));
  color: var(--puja-cream);
  letter-spacing: 0.3px;
}

/* Badge above the hero headline */
.eyebrow {
  background: var(--puja-white);
  color: var(--puja-maroon);
  border: 1px solid rgba(201, 154, 46, 0.55);
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------
   4. Hero — "শারদীয় উৎসব ২০২৬"
   Base rules paint a violet glow; both the colour and the
   gradient have to be replaced, not just the token.
   ------------------------------------------------------------ */
.hero-modern {
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(167, 25, 48, 0.10), transparent 55%),
    radial-gradient(70% 110% at 100% 0%, rgba(201, 154, 46, 0.16), transparent 60%),
    var(--puja-cream);
}

/* Headline sits in deep maroon on cream — 10.7:1 */
.hero-modern__content h1 {
  color: var(--puja-maroon);
  letter-spacing: 0.2px;
}

/* Markup is: <h1> <em>শারদীয়</em> উৎসব <em>২০২৬</em></h1>
   so the first em is "শারদীয়" (red) and the last em is the year
   "২০২৬" — highlighted in gold, exactly as briefed. */
.hero-modern__content h1 em { color: var(--puja-red); }
.hero-modern__content h1 em:last-of-type {
  color: var(--gold-ink);
  font-weight: 700;
}

.hero-modern__content p { color: var(--muted); }

.hero-stats strong { color: var(--puja-red); }
.hero-stats span { color: var(--muted); }

.hero-collage img {
  border-color: var(--puja-white);
  box-shadow: 0 22px 40px -18px rgba(114, 20, 39, 0.45);
}

.hero-collage__badge {
  background: var(--puja-white);
  color: var(--puja-maroon);
  border: 1px solid rgba(201, 154, 46, 0.6);
}

/* ------------------------------------------------------------
   5. Buttons
   The base .btn-gold is despite its name a PURPLE gradient —
   it has to be fully replaced. Brief: deep red fill, white
   text, gold tone on hover.
   ------------------------------------------------------------ */
.btn-primary {
  background: var(--puja-red);
  color: var(--puja-white);
  box-shadow: 0 10px 20px -10px rgba(114, 20, 39, 0.55);
}
.btn-primary:hover { background: var(--puja-maroon); }

.btn-gold {
  background: var(--puja-maroon);
  color: var(--puja-white);
  border-color: var(--puja-maroon);
  box-shadow: 0 12px 24px -10px rgba(114, 20, 39, 0.6);
}
.btn-gold:hover {
  background: var(--puja-gold);
  border-color: var(--puja-gold);
  color: var(--puja-ink);
  filter: none;               /* replace the base brightness bump */
  box-shadow: 0 12px 24px -10px rgba(201, 154, 46, 0.65);
}

.btn-outline {
  background: var(--puja-white);
  border-color: rgba(114, 20, 39, 0.45);
  color: var(--puja-maroon);
}
/* ------------------------------------------------------------
   6. Footer - the client's own artwork, full width, responsive
   modules/themes/pujathemes/background.svg is the supplied
   2448 x 432 framed banner: lace borders top and bottom, Durga
   face at the centre, shiuli flowers, lotus scrollwork.

   It is NOT recoloured. The base tone sampled out of the
   artwork is #77212F, and the supplied palette maroon is
   #721427 - the same maroon family - so the artwork drops
   straight into the theme exactly as delivered.

   DESKTOP: sized to the footer's full width with its own 5.67:1
   ratio kept. Nothing is stretched and nothing is cropped: all
   four lace borders survive and the Durga face keeps the shape
   it was drawn in. background-position: center top pins it to
   the top edge, and background-color is the artwork's own base
   tone, so the strip left underneath blends away invisibly.

   MOBILE: this banner is very wide, so at full width it would
   squash into a 66px hairline on a phone. Below the footer's
   own breakpoints (860px = 2 columns, 560px = 1 column) the
   artwork is therefore sized by HEIGHT instead. It keeps its
   full height - both lace borders stay visible - and shows the
   centre of the design with the sides cropped. That reads as a
   proper ornamental band on a phone instead of a thin line.

   Below it sits the darker #4D0D1A copyright bar.
   ------------------------------------------------------------ */
.site-footer {
  background-color: #77212F;
  background-image: url("background.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  color: var(--puja-cream);
}

/* Tablet: footer becomes 2 columns. Taller band, centre crop. */
@media (max-width: 860px) {
  .site-footer {
    background-size: auto 200px;
  }
}

/* Phone: footer becomes 1 column. Shorter band so it stays a
   banner and does not eat the top of the footer. Change 120px
   up or down to taste. */
@media (max-width: 560px) {
  .site-footer {
    background-size: auto 120px;
  }
}

.site-footer__brand strong { color: var(--puja-cream); }
.site-footer__brand strong span {
  color: var(--puja-gold);
  opacity: 1;
}
.site-footer__brand p { color: rgba(255, 247, 232, 0.80); }

/* Social icons — gold on hover, exactly as briefed */
.site-footer__social a {
  background: rgba(255, 247, 232, 0.12);
  border: 1px solid rgba(201, 154, 46, 0.35);
  color: var(--puja-cream);
}
.site-footer__social a:hover {
  background: var(--puja-gold);
  border-color: var(--puja-gold);
  color: var(--puja-ink);
  transform: translateY(-2px);
}

/* Column headings: cream, with a short gold rule underneath */
.site-footer__col h4 {
  color: var(--puja-cream);
  position: relative;
  padding-bottom: 10px;
}
.site-footer__col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--puja-gold);
}

.site-footer__col a,
.site-footer__col span { color: rgba(255, 247, 232, 0.82); }
.site-footer__col a:hover { color: var(--gold-bright); }

/* Copyright bar — darker maroon, cream text */
.site-footer__bottom {
  background: var(--puja-maroon-bar);
  border-top: 1px solid rgba(201, 154, 46, 0.28);
}
.site-footer__bottom small { color: var(--puja-cream); opacity: 0.92; }

/* ------------------------------------------------------------
   7. Remaining surfaces + hard-coded violet shadows
   These five shadows are literal rgba(92, 80, 162, ...) values in
   the base sheet, so a token remap cannot reach them.
   ------------------------------------------------------------ */
.trust-strip {
  background: var(--puja-cream-deep);
  border-bottom: 1px solid rgba(201, 154, 46, 0.28);
}
.trust-item .ico {
  background: rgba(201, 154, 46, 0.16);
  color: var(--puja-maroon);
}

.style-choices input:checked + .style-card {
  box-shadow: 0 8px 20px -10px rgba(114, 20, 39, 0.45);
}

.thankyou__badge {
  box-shadow: 0 16px 30px -12px rgba(114, 20, 39, 0.50);
}

/* ------------------------------------------------------------
   8. Small polish
   Focus rings are deliberately left as the base --brand (now the
   red #A71930, 7:1 on cream). Gold would only reach 2.4:1, so it
   is used for decoration and never for functional focus states.
   ------------------------------------------------------------ */
::selection {
  background: rgba(201, 154, 46, 0.35);
  color: var(--puja-ink);
}

/* Give white cards a warm hairline so they read well on cream */
.product-card,
.order-card,
.style-card {
  border-color: var(--line);
}

/* ------------------------------------------------------------
   9. Product page - its own hard-coded purple
   product.php carries an inline <style> block for the size
   chips, the gift-box option and the combo options. Those rules
   use literal purple hex values (#5c4a9e, #8d7ac5, #cfc4ee,
   #ddd6f3, #f0ecff, #faf8ff, #f7f5fd, #d5d2df) plus literal
   rgba(92, 74, 158, ...) shadows, so the :root token remap
   cannot reach them and the product page would otherwise stay
   purple inside a red theme.

   Every selector below is prefixed with "body" on purpose. The
   inline block is printed by the page itself, i.e. after this
   stylesheet, so an equally specific rule could not win on
   source order alone. One extra type selector raises
   specificity by exactly one step, which beats the inline block
   without touching !important.
   ------------------------------------------------------------ */

/* Size chips */
body .kids-size-option span {
  border-color: var(--line);
  color: var(--puja-ink);
}
body .kids-size-option input:checked + span {
  border-color: var(--puja-red);
  background: var(--puja-red);
  box-shadow: 0 4px 12px rgba(114, 20, 39, 0.28);
}
body .kids-size-option input:focus-visible + span {
  outline: 3px solid rgba(167, 25, 48, 0.35);
}
body .kids-size-option--out-of-stock span {
  border-color: var(--gray-dark);
  background: var(--gray);
  color: var(--muted);
}

/* Gift box option */
body .gift-box-option {
  border-color: rgba(201, 154, 46, 0.45);
  background: #FFFDF8;
}
body .gift-box-option:hover {
  border-color: var(--puja-gold);
  box-shadow: 0 5px 16px rgba(114, 20, 39, 0.18);
}
body .gift-box-option__image { border-color: var(--line); }
body .gift-box-option__title { color: var(--puja-ink); }
body .gift-box-option input:checked + .gift-box-option__content {
  background: var(--puja-cream-deep);
}
body .gift-box-option input:checked + .gift-box-option__content .gift-box-option__check {
  border-color: var(--puja-red);
  background: var(--puja-red);
}
body .gift-box-option input:focus-visible + .gift-box-option__content {
  outline: 3px solid rgba(167, 25, 48, 0.35);
}

/* Combo options */
body .combo-option { border-color: var(--line); }
body .combo-option:hover {
  border-color: var(--puja-gold);
  box-shadow: 0 6px 16px rgba(114, 20, 39, 0.18);
}
body .combo-option__image { background: #FFFDF8; }
body .combo-option__label { color: var(--puja-ink); }
body .combo-option input:checked + .combo-option__content {
  background: var(--puja-cream-deep);
  outline: 3px solid var(--puja-red);
}
body .combo-option input:checked + .combo-option__content .combo-option__label {
  color: var(--puja-red);
}
body .combo-option input:checked + .combo-option__content::after {
  background: var(--puja-red);
  box-shadow: 0 3px 10px rgba(114, 20, 39, 0.30);
}
body .combo-option input:focus-visible + .combo-option__content {
  outline: 3px solid rgba(167, 25, 48, 0.35);
}