/* Password Protected Page Styling */
.post-password-form {
    max-width: 420px;
    margin: 60px auto;
    padding: 32px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.post-password-form p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.post-password-form label {
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
    color: #222;
}

.post-password-form input[type="password"] {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.post-password-form input[type="password"]:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.post-password-form input[type="submit"] {
    margin-top: 16px;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.post-password-form input[type="submit"]:hover {
    background: #222;
    transform: translateY(-1px);
}


/* =====================================================================
   REBEL EDIBLES: SITE-WIDE DESIGN SYSTEM v2 ("black & white + pops"), Oct 2026
   Paste into Appearance › Customize › Additional CSS  (or Elementor › Site Settings › Custom CSS).
   Fonts: Roboto is already loaded by Elementor on every page. Roboto Condensed (labels) is optional:
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Condensed:wght@700;800&display=swap" rel="stylesheet">

   HOUSE RULES
   - The site is black & white. Colour appears only as a "pop": one product-line colour per page/section,
     taken from that line's packaging, plus the house yellow for site-wide highlights.
   - REBEL GUMMIEZ IS THE ONLY EXCEPTION. Its wine/pink/gold + Titan One kit lives inside its own scoped
     snippets (.rgz, .rgp, .rg-fountain, .rgb-banner, locator .rsl-gz) and is never used anywhere else.
     Nothing in this file targets those classes.
   - Layout is never touched: no widths, columns, flex/grid or container margins.
   - Base type uses :where() (zero specificity), so per-widget Elementor settings still win.
   ===================================================================== */

/* 1. TOKENS ------------------------------------------------------------ */
:root{
  /* core: black & white (from the live site: #000000 / #FFFFFF / #121213 / #EBEBEB / #7A7A7A) */
  --rebel-black:#000000; --rebel-ink:#121213; --rebel-white:#FFFFFF;
  --rebel-grey:#EBEBEB;  --rebel-mid:#7A7A7A;  --rebel-line:rgba(0,0,0,.12); --rebel-line-dark:rgba(255,255,255,.18);
  /* house pop: the live site's highlight yellow */
  --rebel-pop:#F2E600;
  /* product-line pops, each sampled from that line's packaging */
  --pop-rozzies:#C92F92;   --pop-rozzies-soft:#FFD4E8;   /* Rozzies jar label magenta (also the live footer pink) */
  --pop-pebbles:#2BB8EE;   --pop-pebbles-soft:#BFE8F6;   /* 2026 Pebbles Hybrid pouch sky blue */
  --pop-pebbles-indica:#733C7A; --pop-pebbles-sativa:#FAB22C; --pop-pebbles-hybrid:#2BB8EE;
  --pop-caramels:#A3216E;  --pop-caramels-soft:#F6D9E8;  /* Caramels pouch magenta */
  --pop-cream:#2F5B4C;     --pop-cream-soft:#E6EFE9;     /* Transdermal Relief Cream box/jar green */
  /* Rebel Gummiez: listed for reference only. Use ONLY inside Gummiez snippets. */
  --gummiez-pink:#EE2655; --gummiez-gold:#F3AA0D; --gummiez-wine:#75151C;
  --rebel-accent:var(--rebel-pop);   /* switched per product page below */
  --rebel-on-accent:#000000;         /* text colour on the accent */

  /* type: Roboto, as on the live site */
  --rebel-font:"Roboto","Helvetica Neue",Arial,sans-serif;
  --rebel-font-label:"Roboto Condensed","Roboto","Arial Narrow",sans-serif;
  --rebel-fs-xs:.8125rem; --rebel-fs-sm:.9375rem; --rebel-fs-base:1.0625rem; --rebel-fs-lg:1.25rem;
  --rebel-fs-h4:clamp(1.125rem,1rem + .5vw,1.375rem);
  --rebel-fs-h3:clamp(1.5rem,1.2rem + 1vw,2rem);
  --rebel-fs-h2:clamp(2.25rem,1.6rem + 2.6vw,3.5rem);
  --rebel-fs-h1:clamp(3rem,2rem + 5vw,6rem);
  --rebel-fs-display:clamp(3.5rem,2rem + 8vw,8rem);   /* hero words, marquees */
  /* space (8-pt) + shape (pill buttons and 22px cards come from the live site) */
  --rebel-s1:.5rem; --rebel-s2:1rem; --rebel-s3:1.5rem; --rebel-s4:2rem; --rebel-s5:3rem; --rebel-s6:4.5rem; --rebel-s7:6rem;
  --rebel-radius:22px; --rebel-radius-sm:11px; --rebel-pill:150px;
  --rebel-max:1200px;

  /* map onto Elementor globals so widgets set to "Global" follow the system */
  --e-global-color-primary:#000000;
  --e-global-color-secondary:#121213;
  --e-global-color-text:#000000;
  --e-global-color-accent:var(--rebel-accent);
  --e-global-typography-primary-font-family:"Roboto";   --e-global-typography-primary-font-weight:900;
  --e-global-typography-secondary-font-family:"Roboto"; --e-global-typography-secondary-font-weight:700;
  --e-global-typography-text-font-family:"Roboto";      --e-global-typography-text-font-weight:400;
  --e-global-typography-accent-font-family:"Roboto";    --e-global-typography-accent-font-weight:700;
}
/* one pop per product page (WordPress page IDs) */
body.page-id-326,body.page-id-621{--rebel-accent:var(--pop-rozzies);--rebel-on-accent:#FFFFFF}   /* Rozzies, Rozzies bracket */
body.page-id-363{--rebel-accent:var(--pop-pebbles);--rebel-on-accent:#000000}                     /* Pebbles */
body.page-id-431{--rebel-accent:var(--pop-caramels);--rebel-on-accent:#FFFFFF}                    /* Caramels */
body.page-id-448{--rebel-accent:var(--pop-cream);--rebel-on-accent:#FFFFFF}                       /* Joint & Muscle Cream */

/* 2. BASE TYPE (zero specificity). Headings inside the Rebel Gummiez snippets (and the locator) are excluded, so they keep their own kit. */
:where(body){font-family:var(--rebel-font);font-size:var(--rebel-fs-base);line-height:1.55;color:var(--rebel-black);background:var(--rebel-white)}
:where(h1,h2,h3,.elementor-heading-title):where(:not(.rgz *,.rgp *,.rg-fountain *,.rgb-banner *,.rsl *)){font-family:var(--rebel-font);font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:-.01em}
:where(h4,h5,h6):where(:not(.rgz *,.rgp *,.rg-fountain *,.rgb-banner *,.rsl *)){font-family:var(--rebel-font-label);font-weight:800;text-transform:uppercase;letter-spacing:.08em;line-height:1.2}
:where(h1){font-size:var(--rebel-fs-h1)} :where(h2){font-size:var(--rebel-fs-h2)} :where(h3){font-size:var(--rebel-fs-h3)} :where(h4){font-size:var(--rebel-fs-h4)}
:where(.entry-content,.elementor-widget-text-editor) a:not([class]){color:inherit;text-decoration:underline;text-decoration-color:var(--rebel-accent);text-decoration-thickness:3px;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--rebel-accent);outline-offset:3px}

/* 3. BUTTONS: black pill on light, white pill on dark, pop pill for the one key action */
.elementor-button,.wp-block-button__link,.ast-button,.ast-custom-button,.wpcf7-submit,.rebel-btn{
  font-family:var(--rebel-font)!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.06em;
  border-radius:var(--rebel-pill)!important;padding:1em 2.1em;line-height:1;
  background-color:var(--rebel-black);color:var(--rebel-white);border:2px solid var(--rebel-black);box-shadow:none;
  transition:background-color .2s,color .2s,border-color .2s}
.elementor-button:hover,.wp-block-button__link:hover,.ast-button:hover,.rebel-btn:hover,
.elementor-button:focus-visible,.wp-block-button__link:focus-visible,.rebel-btn:focus-visible{
  background-color:var(--rebel-accent);border-color:var(--rebel-black);color:var(--rebel-on-accent)}
/* add CSS class "rebel-btn-pop" (Advanced › CSS Classes) to the ONE main action in a section */
.rebel-btn-pop .elementor-button,.rebel-btn.pop{background-color:var(--rebel-accent)!important;color:var(--rebel-on-accent)!important;border-color:var(--rebel-accent)!important}
.rebel-btn-pop .elementor-button:hover,.rebel-btn.pop:hover{background-color:var(--rebel-white)!important;color:var(--rebel-black)!important;border-color:var(--rebel-black)!important}
/* outline */
.rebel-btn-ghost .elementor-button,.rebel-btn.ghost,.is-style-outline .wp-block-button__link{background:transparent!important;color:currentColor!important;border-color:currentColor!important}
/* on black sections, plain buttons flip to white */
.rebel-dark .elementor-button,.rebel-dark .rebel-btn:not(.pop):not(.ghost){background-color:var(--rebel-white);color:var(--rebel-black);border-color:var(--rebel-white)}

/* 4. SECTION + CARD PATTERNS (opt-in by class) -------------------------- */
.rebel-section{padding-block:var(--rebel-s6)}
.rebel-dark{background:var(--rebel-black);color:var(--rebel-white)}
.rebel-dark :where(h1,h2,h3,.elementor-heading-title){color:var(--rebel-white)}
.rebel-light{background:var(--rebel-white);color:var(--rebel-black)}
.rebel-grey{background:var(--rebel-grey);color:var(--rebel-black)}
.rebel-popbg{background:var(--rebel-accent);color:var(--rebel-on-accent)}
.rebel-kicker,.rebel-kicker .elementor-heading-title{font-family:var(--rebel-font-label)!important;font-weight:800!important;font-size:var(--rebel-fs-sm)!important;letter-spacing:.22em!important;text-transform:uppercase}
.rebel-hl{background:linear-gradient(transparent 58%,var(--rebel-accent) 58%);padding:0 .08em}   /* marker highlight on a word */
.rebel-card,.rebel-card>.elementor-widget-wrap,.rebel-card>.e-con-inner{background:var(--rebel-white);color:var(--rebel-black);border:2px solid var(--rebel-black);border-radius:var(--rebel-radius);box-shadow:8px 8px 0 var(--rebel-accent)}
.rebel-marquee{background:var(--rebel-accent);color:var(--rebel-on-accent);border-block:2px solid var(--rebel-black);font-weight:900;text-transform:uppercase}
.rebel-legal,.rebel-legal p{font-size:var(--rebel-fs-xs);letter-spacing:.02em;opacity:.75}

/* 5. HEADER + FOOTER (Elementor Pro theme parts: 215 = header, 312 = footer) */
.elementor-location-header{background:var(--rebel-black)}
.elementor-location-header .elementor-nav-menu a,.elementor-location-header .elementor-item{font-family:var(--rebel-font);font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--rebel-white)}
.elementor-location-header .elementor-item:hover,.elementor-location-header .elementor-item.elementor-item-active{color:var(--rebel-pop)}
.elementor-location-header .elementor-nav-menu--main .elementor-item:after{background-color:var(--rebel-pop)}
.elementor-location-header .elementor-nav-menu--dropdown{background:var(--rebel-black);border:1px solid var(--rebel-line-dark)}
.elementor-location-header .elementor-nav-menu--dropdown a{color:var(--rebel-white)}
.elementor-location-header .elementor-nav-menu--dropdown a:hover,.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active{background:var(--rebel-white);color:var(--rebel-black)}
.elementor-location-footer{background:var(--rebel-black);color:var(--rebel-white)}
.elementor-location-footer a{color:var(--rebel-white)} .elementor-location-footer a:hover{color:var(--rebel-pop)}
.elementor-location-footer :where(h2,h3,h4,.elementor-heading-title){color:var(--rebel-white)}

/* 6. MOTION -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.elementor-invisible{visibility:visible!important}.animated{animation:none!important}}