/* ==========================================================================
   Plugpoint — palette (2026-08-23)
   Warm espresso structure + cream grounds + a single hot-orange CTA,
   matching the artwork the client supplied (cream/peach fields, orange
   accents, dark brown headings — not the cool navy this mirror started with).

   Two shades of the one accent, because contrast demands it:
     --pp-accent      #FF6A00  fills only. Espresso label on it = 5.9:1.
     --pp-accent-text #C2410C  the same hue for TEXT on white = 4.8:1.
   White on #FF6A00 is 2.9:1 and fails, which is why buttons carry a dark
   label rather than the obvious white one.
   ========================================================================== */
:root{
  --pp-dark:#241A14;
  --pp-dark-rgb:36,26,20;
  --pp-cream:#FDF4EC;
  --pp-accent:#FF6A00;
  --pp-accent-rgb:255,106,0;
  --pp-accent-hover:#FF8124;
  --pp-accent-text:#C2410C;

  /* kept as aliases so older rules referencing the navy names still resolve */
  --pp-navy:var(--pp-dark);
  --pp-navy-rgb:36,26,20;
}

/* --------------------------------------------------------------------------
   1. Structural surfaces.
   `.color-accent-1` drives both the buttons and the big bands. The bands are
   pulled back to the dark tone here so the accent is left to the CTAs alone.
   -------------------------------------------------------------------------- */
.announcement-bar.color-accent-1,
.header__active-menu-item-v2.color-accent-1{
  --color-background:var(--pp-dark-rgb);
  --gradient-background:var(--pp-dark);
  --color-foreground:255,255,255;
}

/* --------------------------------------------------------------------------
   2. Section transitions — static, no waves.
   The theme shipped a three-layer animated wave here. It read as a heavy dark
   band cutting the page in half, so the SVG is dropped and replaced with a
   single flat diagonal in the cream ground. Applies on every page, product
   pages included.
   -------------------------------------------------------------------------- */
.section-divider__svg{display:none !important;}

[class*="_divider"][class*="-top-padding"],
[class*="_divider"][class*="-bottom-padding"]{
  display:none !important;
}

/* A flat rule, not a shape. Two attempts at a clipped diagonal rendered as
   crossing hairlines because the wedge edge and the accent edge could not be
   kept on the same angle across viewport widths. A rule cannot go wrong, is
   static as asked, and reads as a deliberate break between sections. */
.section-divider{
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-top:3px solid var(--pp-accent) !important;
  line-height:0;
  overflow:visible;
}
.section-divider::before,
.section-divider::after{display:none !important;}

/* --------------------------------------------------------------------------
   3. Primary CTAs — the only accent-filled elements on the page.
   -------------------------------------------------------------------------- */
.button:not(.button--secondary):not(.button--tertiary),
.product-form__submit,
.shopify-payment-button__button--unbranded,
.cart__checkout-button,
.quantity-breaks__submit,
.card__cta{
  background:var(--pp-accent);
  background-color:var(--pp-accent);
  border-color:var(--pp-accent);
  color:var(--pp-dark);
  font-weight:700;
}
.button:not(.button--secondary):not(.button--tertiary):hover,
.product-form__submit:hover,
.shopify-payment-button__button--unbranded:hover,
.cart__checkout-button:hover,
.quantity-breaks__submit:hover{
  background:var(--pp-accent-hover);
  background-color:var(--pp-accent-hover);
  border-color:var(--pp-accent-hover);
  color:var(--pp-dark);
}
.button:not(.button--secondary):not(.button--tertiary)::after,
.product-form__submit::after{box-shadow:none;}

/* --------------------------------------------------------------------------
   4. Urgency + discount chips sit on the accent, so their text goes dark too.
   -------------------------------------------------------------------------- */
.urgency-text.color-accent-1,
.quantity-break__badge.color-accent-1,
.color-accent-1 .badge{
  --color-foreground:var(--pp-dark-rgb);
  color:var(--pp-dark);
  font-weight:700;
}

/* --------------------------------------------------------------------------
   5. Prices read as orange text on white, so they take the darker shade.
   -------------------------------------------------------------------------- */
.price,
.price .price-item,
.price__regular .price-item--regular,
.price__sale .price-item--sale{
  color:var(--pp-accent-text);
}

/* --------------------------------------------------------------------------
   6. Review stars.
   -------------------------------------------------------------------------- */
:root,.color-custom{--star-color:var(--pp-accent);}

/* --------------------------------------------------------------------------
   7. The page moves up and down only.
   Something wider than the viewport let the whole layout be dragged sideways
   on a phone. `clip` is used rather than `hidden` on purpose: `hidden` turns
   the root into a scroll container and kills the sticky product column, while
   `clip` just cuts the overflow off. `hidden` stays first as the fallback for
   browsers that do not know `clip`; the sliders inside the page keep their own
   horizontal scrolling, which is unaffected.
   -------------------------------------------------------------------------- */
html,body{
  overflow-x:hidden;
  overflow-x:clip;
  overscroll-behavior-x:none;
  max-inline-size:100%;
}