/*
 * seasonal.css — Base template for Systweak seasonal campaign pages.
 *
 * HOW TO USE FOR A NEW CAMPAIGN:
 * 1. Link this file first in your campaign EJS view.
 * 2. Create one small override file (e.g. css/systweak-offer/campaign-name/override.css).
 * 3. In the override file, redefine only the CSS variables below under :root {}.
 * 4. Link the override file after this one. Do NOT duplicate layout/component styles.
 *
 * WHAT TO OVERRIDE PER CAMPAIGN:
 * - --season-primary       : main brand/accent colour (buttons, highlights)
 * - --season-primary-dark  : darker shade for button borders / hover states
 * - --season-bg            : page or banner background colour
 * - --season-banner-img    : banner background image URL
 * - --season-cta-text      : CTA button label colour (usually #fff)
 * - --season-heading-color : h1/h2 colour on banner
 * - --season-font          : campaign-specific font family (optional)
 */

/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --season-primary:       #ed1161;
  --season-primary-dark:  #a20031;
  --season-bg:            #01113f;
  --season-banner-img:    none;
  --season-cta-text:      #ffffff;
  --season-heading-color: #ffffff;
  --season-font:          'Google Sans', sans-serif;
}

/* ─── Base reset (shared across all campaign pages) ──────────────────────── */
*, body, dl, ol, ul { padding: 0; margin: 0; }
html { height: 100%; }
body {
  font-family: var(--season-font);
  font-size: 15px;
  font-weight: 400;
  color: #242329;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}
a { text-decoration: none; outline: 0 !important; }
b, strong { font-weight: 700; }
li { list-style: none; }
img { max-width: 100%; border: none; }
p { margin-top: 0; margin-bottom: 0; }
[class*="col-"] { float: left; }
.clearfix { clear: both; }

/* ─── Banner ─────────────────────────────────────────────────────────────── */
.season-banner {
  position: relative;
  background-image: var(--season-banner-img);
  background-color: var(--season-bg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  text-align: center;
  padding-top: 70px;
  min-height: 500px;
}
.season-banner h1 {
  font-size: 35px;
  color: var(--season-heading-color);
  font-weight: 500;
  margin-bottom: 20px;
}
.season-banner p {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 19px;
  line-height: 26px;
  max-width: 770px;
  margin: 0 auto;
}

/* ─── CTA Button ─────────────────────────────────────────────────────────── */
.season-btn {
  display: inline-block;
  background: var(--season-primary);
  color: var(--season-cta-text);
  border: 1px solid transparent;
  border-bottom: 4px solid var(--season-primary-dark);
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, .3);
}
.season-btn:hover {
  background: var(--season-primary-dark);
  color: var(--season-cta-text);
}

/* ─── Product card ───────────────────────────────────────────────────────── */
.season-product-item {
  position: relative;
  background-color: #fff;
  padding: 10px 16px 7px;
  border: 1px solid #d1d3da;
  text-align: left;
}
.season-product-item::before {
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100.4%;
  background-color: var(--season-primary);
}
.season-product-name {
  font-size: 22px;
  color: #000;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid #e1e1e1;
}
.season-product-category {
  font-size: 15px;
  font-weight: 400;
  color: #73737c;
  margin-bottom: 0;
}
.season-product-desc {
  font-size: 15px;
  color: #000;
  font-weight: 400;
  padding-bottom: 5px;
  margin-bottom: 0;
}

/* ─── Pricing ────────────────────────────────────────────────────────────── */
.season-price-old {
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  position: relative;
  margin-bottom: 9px;
  text-decoration: line-through;
  color: #888;
}
.season-price-new {
  font-size: 30px;
  font-weight: 700;
  color: var(--season-primary);
  display: inline-block;
  line-height: 22px;
}

/* ─── Cart ───────────────────────────────────────────────────────────────── */
.season-cart {
  background: #fff;
  box-shadow: 0 5px 10px -5px rgba(0,0,0,.1), 0 10px 40px -10px rgba(0,0,0,.25);
  border-top: 3px solid var(--season-primary);
  display: none;
  opacity: 0;
  padding: 1rem 1rem 1.5rem 2rem;
  position: absolute;
  right: 0;
  top: 79px;
  transition: opacity .5s;
  width: 310px;
}
.season-cart.is-open { display: block; opacity: 1; }
.season-cart-headline {
  border-bottom: 3px solid var(--season-primary);
  display: inline-block;
  padding-bottom: .25em;
  font-size: 21px;
  font-weight: 500;
  color: #000;
}

/* ─── Header / Nav ───────────────────────────────────────────────────────── */
.season-header {
  width: 100%;
  float: left;
  background-color: #fff;
  padding: 16px 15px;
  position: relative;
}
.season-cart-btn {
  background-color: var(--season-primary);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  min-width: 181px;
  border-radius: 4px;
  text-align: center;
  padding: 9px 7px;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.season-footer { background-color: #142b51; width: 100%; float: left; }
.season-footer-top { background-color: #20365a; padding: 16px 0; display: inline-block; width: 100%; }
.season-footer ul li { display: inline-block; color: #637499; margin-right: 15px; }
.season-footer ul li a { color: #fff; text-decoration: none; }
.season-copy-right { padding: 25px 0; text-align: center; }
.season-copy-right p { color: #8f9ec3; font-size: 14px; line-height: 22px; margin-bottom: 10px; }

/* ─── Offer badge ────────────────────────────────────────────────────────── */
.season-offer-badge {
  background-color: var(--season-primary);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 63px;
  height: 63px;
  font-size: 18px;
  position: absolute;
  top: -28px;
  left: -5px;
}

/* ─── Countdown timer ────────────────────────────────────────────────────── */
.season-timer { text-align: center; width: 100%; }
.season-timer .digit {
  display: inline-block;
  color: var(--season-heading-color);
  width: 60px;
  font-size: 34px;
  font-weight: 700;
  text-align: center;
}
.season-timer .label { font-size: 12px; color: var(--season-heading-color); display: block; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 991.99px) {
  .season-banner { padding: 60px 15px 30px; min-height: auto; }
  .season-banner h1 { font-size: 28px; }
  .season-banner p { font-size: 17px; }
}
@media screen and (max-width: 767.99px) {
  .season-product-name { font-size: 17px; }
  .season-footer ul { text-align: center; }
}
@media screen and (max-width: 575.99px) {
  .season-banner h1 { font-size: 24px; }
  .season-banner { padding-top: 40px; padding-bottom: 40px; }
  .season-btn { font-size: 16px; padding: 10px 18px; }
}
@media screen and (max-width: 479.99px) {
  .season-banner h1 { font-size: 20px; }
  .season-price-new { font-size: 26px; }
}