/* =========================================================
   RUGER DAYS PAGE
   Scoped to #ruger-days so it doesn't wreck Bootstrap 3 header/footer
   Palette matches the 2026 print/social graphics: crimson, black, silver
========================================================= */
#ruger-days {
    /* Palette from the Promos Handout PDF */
    --rd-crimson: #ce153e;        /* PDF red */
    --rd-crimson-dark: #a3102f;
    --rd-gold: #fac900;           /* PDF gold (CMYK 2/21/100/0) - swap for designer's web hex if provided */
    --rd-gold-dark: #d4a900;
    --rd-charcoal: #2c282a;       /* PDF charcoal */
    --rd-bg: #0f1115;
    --rd-surface: #181b21;
    --rd-surface-2: #20242c;
    --rd-text: #ffffff;
    --rd-text-soft: #cfd3da;
    --rd-text-muted: #9da4af;
    --rd-border: rgba(255,255,255,0.12);
    --rd-accent: var(--rd-crimson);
    --rd-accent-soft: rgba(206,21,62,0.16);
    --rd-accent-ink: #ffc9d1;     /* light pink-red for small text on dark */
    --rd-date: #ec2a47;           /* slightly brighter crimson so dates read on dark */
    --rd-shadow: 0 18px 45px rgba(0,0,0,0.28);
    --rd-radius-xl: 10px;
    --rd-radius-lg: 6px;
    background: var(--rd-bg);
    color: var(--rd-text);
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    overflow: hidden;
}
#ruger-days.theme-light {
    --rd-bg: #e9eaec;
    --rd-surface: #ffffff;
    --rd-surface-2: #f0f1f4;
    --rd-text: #1d1f24;
    --rd-text-soft: #424854;
    --rd-text-muted: #6f7783;
    --rd-border: rgba(0,0,0,0.10);
    --rd-accent-soft: rgba(206,21,62,0.08);
    --rd-accent-ink: var(--rd-crimson);
    --rd-date: var(--rd-crimson);
    --rd-shadow: 0 18px 45px rgba(0,0,0,0.10);
    /* Brushed-silver background like the graphics */
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #f3f3f4 0%, #dcdde0 100%);
}
#ruger-days * { box-sizing: border-box; }

#ruger-days .rd-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
}
#ruger-days .rd-section { padding: 60px 0; }

/* ---------- HERO ----------
   Background image path is relative to this stylesheet.
-------------------------------- */
#ruger-days .rd-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    color: var(--rd-text);
    background:
        linear-gradient(180deg, rgba(10,10,12,0.45) 0%, rgba(10,10,12,0.85) 100%),
        radial-gradient(circle at top left, rgba(206,21,62,0.35), transparent 60%),
        url('images/Ruger-BG.jpg') center / cover no-repeat, /* TODO: rifle photo from the graphics */
        #1a0c0c;
}
/* Light theme: image shows at full strength up top;
   a white fade only kicks in at the bottom behind the dates/button */
#ruger-days.theme-light .rd-hero {
    background:
        linear-gradient(180deg, rgba(250,248,246,0) 0%, rgba(250,248,246,0) 55%, rgba(250,248,246,0.85) 100%),
        radial-gradient(circle at top left, rgba(206,21,62,0.22), transparent 50%),
        url('images/Ruger-BG.jpg') center / cover no-repeat,
        #faf8f6;
}
/* Diagonal crimson stripe with silver edges (signature element from the graphics).
   Sits behind the logo. Delete this rule to remove the stripe. */
#ruger-days .rd-hero::before {
    content: "";
    position: absolute;
    left: -25%;
    right: -25%;
    top: 38%;
    height: 120px;
    background: linear-gradient(180deg, var(--rd-crimson) 0%, var(--rd-crimson-dark) 100%);
    border-top: 4px solid #d9dadc;
    border-bottom: 4px solid #d9dadc;
    transform: translateY(-50%) rotate(11deg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    opacity: .92;
}
/* Dates sit right under the logo, centered, with a big button below them,
   so everything fits above the fold */
#ruger-days .rd-hero-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}
#ruger-days .rd-hero-logo {
    text-align: center;
    padding: 0 0 14px;
}
#ruger-days .rd-logo {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: inline-block;
    filter: drop-shadow(0 10px 25px rgba(0,0,0,0.45));
}
#ruger-days.theme-light .rd-logo { filter: drop-shadow(0 10px 25px rgba(0,0,0,0.25)); }
#ruger-days .rd-hero-dates-value {
    margin-top: 6px;
    font-size: 38px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    /* White + dark glow so the dates read over the dark part of the hero photo */
    color: #fff;
    text-shadow:
        0 2px 4px rgba(0,0,0,0.85),
        0 0 18px rgba(0,0,0,0.65);
}
/* "EVENT DATES" label in the handout gold */
#ruger-days .rd-hero .rd-heading-eyebrow {
    color: var(--rd-gold);
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}

/* Two date blocks side by side (VAC early access | open to everyone) */
#ruger-days .rd-hero-dates {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 14px;
}
#ruger-days .rd-hero-date-block { padding: 0 28px; }
#ruger-days .rd-hero-date-block + .rd-hero-date-block {
    border-left: 2px solid rgba(255,255,255,0.6);
}
#ruger-days .rd-hero-date-block .rd-hero-dates-value { font-size: 32px; }

/* VAC 2X points badge - big gold block, "2X POINTS" as the headline */
#ruger-days .rd-hero-points {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 36px 14px;
    border: 3px solid #fff;
    border-radius: 6px;
    background: var(--rd-gold);
    color: var(--rd-charcoal);
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    box-shadow: 0 0 0 4px var(--rd-charcoal), 0 14px 30px rgba(0,0,0,0.35);
    transform: rotate(-2deg);   /* slight tilt so it reads like a sticker/burst */
}
#ruger-days .rd-hero-points-big {
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
}
#ruger-days .rd-hero-points-label {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 2px solid rgba(44,40,42,0.4);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .08em;
}
/* Big, eye-catching hero button */
#ruger-days .rd-hero-action .rd-btn {
    margin: 0;
    padding: 20px 56px;
    font-size: 22px;
    letter-spacing: .1em;
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px var(--rd-crimson), 0 14px 30px rgba(0,0,0,0.35);
    animation: rdBtnPulse 2.4s ease-in-out infinite;
}
#ruger-days .rd-hero-action .rd-btn:hover { animation: none; }
@keyframes rdBtnPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    #ruger-days .rd-hero-action .rd-btn { animation: none; }
}

/* ---------- BUTTONS ---------- */
#ruger-days .rd-btn-row { margin-top: 28px; }
#ruger-days .rd-btn {
    display: inline-block;
    margin: 0 6px 12px;
    padding: 11px 22px;
    border-radius: 4px;
    border: 1px solid transparent;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    transition: background .2s ease, color .2s ease;
}
#ruger-days .rd-btn-lg { padding: 13px 28px; font-size: 15px; }
#ruger-days .rd-btn-primary {
    background: var(--rd-accent);
    color: #fff !important;
}
#ruger-days .rd-btn-primary:hover { background: var(--rd-crimson-dark); }
#ruger-days .rd-btn-light {
    background: #fff;
    color: #111 !important;
}
#ruger-days .rd-btn-light:hover { background: #e9e9e9; }

/* ---------- SECTION HEADINGS ---------- */
#ruger-days .rd-heading-row { margin-bottom: 26px; }
#ruger-days .rd-heading-eyebrow {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--rd-accent-ink);
    font-family: Arial, Helvetica, sans-serif;
}
#ruger-days .rd-heading {
    margin: 10px 0 0;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--rd-text);
}
#ruger-days .rd-heading-copy {
    margin: 12px 0 0;
    color: var(--rd-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}
#ruger-days .rd-instore-note a {
    color: var(--rd-accent-ink);
    font-weight: 700;
    text-decoration: underline;
}

/* ---------- IN-STORE DEAL CARDS ---------- */
/* Flex row so cards with different text lengths don't snag Bootstrap 3 floats;
   a short last row is centered */
#ruger-days .rd-deals-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#ruger-days .rd-deals-row::before,
#ruger-days .rd-deals-row::after { display: none; }
#ruger-days .rd-deal {
    display: flex;          /* lets each card stretch to the tallest card in the row */
    margin-bottom: 24px;
}
#ruger-days .rd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 22px;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-xl);
    background: var(--rd-surface);
    box-shadow: var(--rd-shadow);
}
#ruger-days .rd-instore-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 3px;
    background: var(--rd-accent);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
/* Same image height on every card so titles start on the same line */
#ruger-days .rd-product-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: var(--rd-radius-lg);
}
#ruger-days .rd-img-placeholder {
    width: 100%;
    min-height: 200px;
    padding: 16px;
    border: 1px dashed var(--rd-border);
    border-radius: var(--rd-radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rd-text-muted);
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}
#ruger-days .rd-product-title {
    margin: 18px 0 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--rd-text);
}
#ruger-days .rd-product-desc {
    margin-top: 12px;
    color: var(--rd-text-soft);
    font-size: 15px;
    line-height: 1.7;
    font-family: Arial, Helvetica, sans-serif;
}
/* margin-top:auto pushes price + fine print to the bottom of the card,
   so prices line up across the row no matter how long the description is */
#ruger-days .rd-price-row {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
#ruger-days .rd-price {
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    color: var(--rd-text);
}
#ruger-days .rd-save {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 3px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
}
/* Purchase requirement under the price (e.g. "With purchase of any new Ruger rifle") */
/* Purchase requirement: solid red banner, like the print graphics */
#ruger-days .rd-offer-note {
    display: flex;          /* min-height keeps 1- and 2-line banners the same size */
    align-items: center;
    justify-content: center;
    min-height: 62px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 4px;
    background: var(--rd-crimson);
    color: #fff;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
}
/* Cards with no price: push the banner to the bottom
   so it lines up with the prices on neighboring cards */
#ruger-days .rd-product-desc { margin-bottom: 16px; }
#ruger-days .rd-product-desc + .rd-offer-note,
#ruger-days .rd-style + .rd-offer-note,
#ruger-days .rd-product-title + .rd-offer-note { margin-top: auto; }

/* Style / item number under the product name */
#ruger-days .rd-style {
    margin: 8px 0 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rd-text-muted);
    overflow-wrap: anywhere;   /* long numbers like RB-SG36-WS-BK-BULK wrap instead of overflowing */
}

/* Red/gold box stacks its lines (main text, then style numbers if any) */
#ruger-days .rd-offer-note { flex-direction: column; }
#ruger-days .rd-offer-style {
    display: block;
    margin-top: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    opacity: .9;
}
/* Small "EACH" after a price (GSL) */
#ruger-days .rd-price-each {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#ruger-days .rd-fine-print {
    margin: 14px 0 0;
    font-size: 12px;
    font-style: italic;
    color: var(--rd-text-muted);
    font-family: Arial, Helvetica, sans-serif;
}

/* ---------- CARD COLOR TYPES (matches the Promos Handout) ----------
   rd-card--receive : receive with purchase -> red
   rd-card--deal : buy this, get this  -> gold
-------------------------------- */
#ruger-days .rd-card--receive { border-top: 6px solid var(--rd-crimson); }
#ruger-days .rd-card--deal { border-top: 6px solid var(--rd-gold); }

/* Receive = red banner, white text (the default .rd-offer-note look) */
#ruger-days .rd-card--receive .rd-offer-note,
#ruger-days .rd-card--receive .rd-instore-tag {
    background: var(--rd-crimson);
    color: #fff;
}
/* Deal = gold banner, charcoal text (white on gold is too low-contrast) */
#ruger-days .rd-card--deal .rd-offer-note,
#ruger-days .rd-card--deal .rd-instore-tag {
    background: var(--rd-gold);
    color: var(--rd-charcoal);
}

/* ---------- SHOPPABLE (LINKED) CARDS ----------
   Gold cards are wrapped in <a class="rd-card-link">.
   The whole card is clickable; a "Shop Now" line is added at the bottom.
-------------------------------- */
#ruger-days .rd-card-link {
    display: flex;          /* keeps the card stretching to the row height */
    width: 100%;
    color: inherit;
    text-decoration: none !important;
}
#ruger-days .rd-card-link .rd-card {
    transition: transform .2s ease, box-shadow .2s ease;
}
#ruger-days .rd-card-link:hover .rd-card,
#ruger-days .rd-card-link:focus-visible .rd-card {
    transform: translateY(-3px);
    box-shadow: 0 22px 45px rgba(0,0,0,0.18);
}
#ruger-days .rd-card-link .rd-card::after {
    content: "Shop Now \203A";
    display: block;
    margin-top: 12px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rd-charcoal);
}
#ruger-days .rd-card-link:hover .rd-card::after { text-decoration: underline; }

/* ---------- REP SCHEDULE ----------
   One card per day, styled after the "Meet the Ruger Reps" poster:
   black day header, crimson date, store + hours below.
-------------------------------- */
#ruger-days .rd-reps-section {
    background: var(--rd-surface-2);
    border-top: 1px solid var(--rd-border);
}
#ruger-days.theme-light .rd-reps-section {
    background: rgba(255,255,255,0.35);
}
#ruger-days .rd-reps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
#ruger-days .rd-rep-card {
    overflow: hidden;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: var(--rd-surface);
    box-shadow: var(--rd-shadow);
    text-align: center;
}
#ruger-days .rd-rep-day {
    padding: 12px 20px;
    background: var(--rd-charcoal);
    border-bottom: 4px solid var(--rd-crimson);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#ruger-days .rd-rep-body { padding: 18px 20px 22px; }
#ruger-days .rd-rep-date {
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--rd-date);
}
/* Stores for the same day sit side by side with a thin divider between them */
#ruger-days .rd-rep-stores {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#ruger-days .rd-rep-store {
    padding: 8px 16px;
    font-family: Arial, Helvetica, sans-serif;
}
#ruger-days .rd-rep-store + .rd-rep-store { border-left: 1px solid var(--rd-text-muted); }
#ruger-days .rd-rep-store-name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rd-text);
}
#ruger-days .rd-rep-store-time {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    color: var(--rd-text-muted);
}

/* ---------- DEALS PAGE CTA ----------
   Black / crimson diagonal split with a silver seam, like the banners
-------------------------------- */
#ruger-days .rd-cta-band {
    /* Seam kept left of center so the centered heading/button sit fully on the red */
    background: linear-gradient(110deg, var(--rd-charcoal) 0%, var(--rd-charcoal) 22%, #d9dadc 22%, #d9dadc 22.5%, var(--rd-crimson) 22.5%, var(--rd-crimson-dark) 100%);
    text-align: center;
}
/* Single big button in the band */
#ruger-days .rd-cta-band .rd-btn {
    margin: 0;
    padding: 20px 44px;
    font-size: 20px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}
#ruger-days .rd-cta-band .rd-heading {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* ---------- LEGAL / FINE PRINT ---------- */
#ruger-days .rd-legal {
    padding: 30px 0 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--rd-text-muted);
}
#ruger-days .rd-legal p { margin: 0 0 6px; }
#ruger-days .rd-legal-lead {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--rd-date);
}
#ruger-days .rd-legal-strong {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--rd-text-soft);
}

/* ---------- COUNTDOWN SPLASH (before deals are revealed) ---------- */
#ruger-days .rd-teaser {
    position: relative;
    overflow: hidden;
    padding: 50px 0 60px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at top left, rgba(206,21,62,0.45), transparent 55%),
        radial-gradient(circle at bottom right, rgba(250,201,0,0.18), transparent 50%),
        linear-gradient(180deg, #1a1718 0%, var(--rd-charcoal) 100%);
}
#ruger-days .rd-teaser .rd-logo { max-width: 260px; }
#ruger-days .rd-teaser-eyebrow {
    margin: 22px 0 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rd-gold);
}
#ruger-days .rd-countdown {
    display: flex;
    justify-content: center;
    gap: 14px;
}
#ruger-days .rd-countdown-unit {
    min-width: 104px;
    padding: 14px 10px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,0.45);
    border-top: 4px solid var(--rd-crimson);
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
#ruger-days .rd-countdown-num {
    display: block;
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;   /* digits don't jiggle as they change */
}
#ruger-days .rd-countdown-label {
    display: block;
    margin-top: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
#ruger-days .rd-teaser-when {
    margin: 18px 0 26px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
@media (max-width: 767px) {
    #ruger-days .rd-countdown         { gap: 8px; }
    #ruger-days .rd-countdown-unit    { min-width: 0; flex: 1 1 0; padding: 10px 4px 8px; }
    #ruger-days .rd-countdown-num     { font-size: 34px; }
    #ruger-days .rd-countdown-label   { font-size: 10px; letter-spacing: .1em; }
    #ruger-days .rd-teaser-when       { font-size: 17px; }
}

/* ---------- COMING SOON SPLASH (old, unused) ---------- */
#ruger-days .rd-logo-wrap-splash {
    position: relative;
    height: 500px;
    text-align: center;
}
#ruger-days .rd-splash-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.9);
    z-index: 5;
    overflow: hidden;
}
#ruger-days .rd-splash-overlay::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(206,21,62,0.25), transparent 40%);
    animation: rdGlowMove 6s linear infinite;
}
#ruger-days .rd-splash-overlay span {
    position: relative;
    z-index: 2;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(255,255,255,0.6), 0 0 15px rgba(255,255,255,0.4), 0 0 30px rgba(255,255,255,0.3);
    animation: rdPulseText 2s ease-in-out infinite;
}
@keyframes rdGlowMove {
    0%   { transform: translate(-25%, -25%); }
    50%  { transform: translate(25%, 25%); }
    100% { transform: translate(-25%, -25%); }
}
@keyframes rdPulseText {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
    #ruger-days .rd-heading           { font-size: 32px; }
    #ruger-days .rd-hero-dates-value  { font-size: 30px; }
    #ruger-days .rd-hero-date-block .rd-hero-dates-value { font-size: 24px; }
    #ruger-days .rd-hero-date-block   { padding: 0 18px; }
}
@media (max-width: 767px) {
    #ruger-days .rd-logo              { max-width: 220px; }
    #ruger-days .rd-hero-logo         { padding: 0 0 8px; }
    #ruger-days .rd-hero-action .rd-btn { padding: 16px 20px; font-size: 18px; }
    #ruger-days .rd-hero::before      { height: 70px; top: 30%; transform: translateY(-50%) rotate(20deg); }
    #ruger-days .rd-hero-bar          { flex-direction: column; text-align: center; }
    #ruger-days .rd-hero-action,
    #ruger-days .rd-hero-action .rd-btn { width: 100%; }
    #ruger-days .rd-hero-dates-value,
    #ruger-days .rd-hero-date-block .rd-hero-dates-value { font-size: 24px; }
    /* stack the two date blocks on phones, no divider */
    #ruger-days .rd-hero-date-block   { padding: 0; width: 100%; }
    #ruger-days .rd-hero-date-block + .rd-hero-date-block { border-left: 0; }
    #ruger-days .rd-hero-points       { padding: 10px 22px 12px; }
    #ruger-days .rd-hero-points-big   { font-size: 40px; }
    #ruger-days .rd-hero-points-label { font-size: 14px; }
    #ruger-days .rd-section           { padding: 42px 0; }
    #ruger-days .rd-heading           { font-size: 28px; }
    #ruger-days .rd-card              { padding: 20px; }
    #ruger-days .rd-btn               { display: block; margin: 0 0 12px; text-align: center; }
    #ruger-days .rd-cta-band          { background: linear-gradient(160deg, var(--rd-charcoal) 0%, var(--rd-charcoal) 35%, var(--rd-crimson) 35%, var(--rd-crimson-dark) 100%); }
}
