/*
 * DPL design system: the one set of tokens every component uses (redesign phase 2, batch 1;
 * .claude/rules/theme.md, "Design tokens"). Loaded right after base.css, before any component CSS,
 * so component files can use the variables and still win the cascade where they must.
 *
 * Change a value here, not in a component.
 */

:root {
  /* Colour: one accent, black and white, two tints. No gradients. */
  --dpl-accent: #FF9A01;
  --dpl-accent-hover: #E68A00;
  --dpl-accent-rgb: 255, 154, 1;
  --dpl-on-accent: #FFFFFF;
  --dpl-text: #0D0D0D;
  --dpl-text-body: #262626;
  --dpl-text-muted: #6B6B6B;
  --dpl-surface: #FFFFFF;
  --dpl-surface-grey: #F7F7F7;
  --dpl-surface-tint: #FFF5E6;
  --dpl-surface-dark: #0D0D0D;
  --dpl-on-dark: #FFFFFF;
  --dpl-border: #E5E5E5;
  --dpl-border-hover: rgba(var(--dpl-accent-rgb), 0.45);

  /* Type */
  --dpl-font-heading: 'IBM Plex Sans', Inter, system-ui, sans-serif;
  --dpl-font-body: 'Geist', 'IBM Plex Sans', system-ui, sans-serif;
  --dpl-weight-body: 400;
  --dpl-weight-heading: 500;
  --dpl-weight-strong: 600; /* titles and prices only */
  --dpl-text-size: 16px;
  --dpl-text-size-small: 14px;
  --dpl-h1: 28px;
  --dpl-h2: 24px;
  --dpl-h3: 18px;

  /* Radius */
  --dpl-radius-card: 20px;
  --dpl-radius-media: 20px;
  --dpl-radius-media-lg: 24px;
  --dpl-radius-btn-block: 12px; /* big full-width buttons */
  --dpl-radius-input: 12px;
  --dpl-radius-pill: 999px; /* other buttons, chips, badges */

  /* Buttons */
  --dpl-btn-height: 48px;
  --dpl-btn-height-lg: 52px;
  --dpl-btn-height-sm: 40px;
  --dpl-btn-padding: 0 24px;
  --dpl-btn-font-size: 15px;
  --dpl-btn-weight: 500;
  --dpl-btn-letter-spacing: 0;

  /* Shadows: soft, neutral */
  --dpl-shadow-card: 0 1px 2px rgba(13, 13, 13, 0.04), 0 4px 16px rgba(13, 13, 13, 0.05);
  --dpl-shadow-card-hover: 0 2px 4px rgba(13, 13, 13, 0.04), 0 16px 40px rgba(13, 13, 13, 0.1);
  --dpl-shadow-btn: 0 2px 6px rgba(13, 13, 13, 0.08);
  --dpl-shadow-btn-hover: 0 8px 20px rgba(13, 13, 13, 0.14);
  --dpl-shadow-btn-accent: 0 4px 14px rgba(var(--dpl-accent-rgb), 0.3);
  --dpl-shadow-btn-accent-hover: 0 10px 24px rgba(var(--dpl-accent-rgb), 0.4);
  --dpl-shadow-float: 0 8px 30px rgba(13, 13, 13, 0.08);

  /* Header pill (redesign batch 2) */
  --dpl-header-pill-bg: rgba(255, 255, 255, 0.85);
  --dpl-header-top-gap: 8px;

  /* Motion */
  --dpl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dpl-duration-btn: 0.2s;
  --dpl-duration-card: 0.28s;
  --dpl-lift-btn: translateY(-2px);
  --dpl-lift-card: translateY(-6px);

  /* Layout */
  --dpl-page-width: 1200px;
  --dpl-gutter: 20px;
  --dpl-section-padding: 40px;
  --dpl-grid-gap: 16px;
}

@media screen and (min-width: 750px) {
  :root {
    --dpl-gutter: 40px;
    --dpl-grid-gap: 24px;
    --dpl-h1: 36px;
    --dpl-h2: 28px;
    --dpl-h3: 20px;
  }
}

@media screen and (min-width: 990px) {
  :root {
    --dpl-section-padding: 64px;
    --dpl-h1: 42px;
    --dpl-h2: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dpl-duration-btn: 0s;
    --dpl-duration-card: 0s;
    --dpl-lift-btn: none;
    --dpl-lift-card: none;
  }
}

/* ==========================================================================
   Shared rule sets (batch 1). Component files do not repeat these declarations
   for the selectors below; they set only what is specific to their element.
   ========================================================================== */

/* Type: body 400, colour from the token */
body {
  font-family: var(--dpl-font-body);
  font-weight: var(--dpl-weight-body);
  font-size: var(--dpl-text-size);
  color: var(--dpl-text-body);
}

h1, h2, h3, .h0, .h1, .h2, .h3 {
  font-weight: var(--dpl-weight-heading);
}

/* Strong text and prices: 600 at most (theme.md: nothing above 600) */
strong,
b {
  font-weight: var(--dpl-weight-strong);
}

/* Every button-like element without its own radius is round, never square (G4; icon buttons, text-link
   buttons and arrows included). Zero specificity, so any component radius still wins. */
:where(button, [role="button"], input[type="submit"], input[type="button"], [class*="btn"]) {
  border-radius: var(--dpl-radius-pill);
}

/* Icons: one thin line set in the accent colour (drawn by snippets/dpl-icon.php) */
.dpl-icon {
  color: var(--dpl-accent);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Buttons: the look (G1, G2, G4). Dark by default, pill, normal letters.
   Selector list: Dawn's .button family, this lane's buttons, the utility classes.
   -------------------------------------------------------------------------- */
.button,
.customer button,
input[type="submit"],
.dpl-btn,
.dpl-hero__btn,
.dpl-wa-banner__btn,
.dpl-glp-notice__btn,
.dpl-consent__btn,
.dpl-reviews .cr-show-more-button,
.dpl-reviews .cr-show-more-reviews-prd {
  --color-button-text: 255, 255, 255;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: var(--dpl-btn-height);
  padding: var(--dpl-btn-padding);
  border: 1px solid var(--dpl-surface-dark);
  border-radius: var(--dpl-radius-pill);
  background: var(--dpl-surface-dark);
  color: var(--dpl-on-dark);
  box-shadow: var(--dpl-shadow-btn);
  font-family: var(--dpl-font-body);
  font-size: var(--dpl-btn-font-size);
  font-weight: var(--dpl-btn-weight);
  letter-spacing: var(--dpl-btn-letter-spacing);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--dpl-duration-btn) var(--dpl-ease),
    box-shadow var(--dpl-duration-btn) var(--dpl-ease),
    background-color var(--dpl-duration-btn) var(--dpl-ease),
    border-color var(--dpl-duration-btn) var(--dpl-ease),
    color var(--dpl-duration-btn) var(--dpl-ease);
}

/* Dawn drew the button's outline and shadow with pseudo-elements; they would square the corners again. */
.button::before,
.button::after,
.customer button::before,
.customer button::after {
  content: none;
}

.button:focus-visible,
.customer button:focus-visible,
input[type="submit"]:focus-visible,
.dpl-btn:focus-visible,
.dpl-hero__btn:focus-visible,
.dpl-consent__btn:focus-visible {
  outline: 2px solid var(--dpl-accent);
  outline-offset: 2px;
  box-shadow: var(--dpl-shadow-btn);
}

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
input[type="submit"]:disabled,
.dpl-btn:disabled,
.dpl-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hover only where there is a hover (a tap on a phone must not leave a button lifted) */
@media (hover: hover) {
  .button:where(:not(:disabled):not([aria-disabled='true'])):hover,
  .customer button:where(:not(:disabled)):hover,
  input[type="submit"]:where(:not(:disabled)):hover,
  .dpl-btn:where(:not(:disabled):not([aria-disabled='true'])):hover,
  .dpl-hero__btn:hover,
  .dpl-wa-banner__btn:hover,
  .dpl-glp-notice__btn:hover,
  .dpl-consent__btn:hover,
  .dpl-reviews .cr-show-more-button:hover,
  .dpl-reviews .cr-show-more-reviews-prd:hover {
    transform: var(--dpl-lift-btn);
    box-shadow: var(--dpl-shadow-btn-hover);
    background-color: var(--dpl-text-body);
    border-color: var(--dpl-text-body);
  }
}

/* Secondary: transparent, thin border */
.button--secondary,
.button--tertiary,
.dpl-btn--secondary,
.dpl-hero__btn--secondary,
.dpl-wa-banner__btn,
.dpl-consent__btn--ghost,
.dpl-reviews .cr-show-more-button,
.dpl-reviews .cr-show-more-reviews-prd {
  --color-button-text: 13, 13, 13;
  background: transparent;
  color: var(--dpl-text);
  border-color: var(--dpl-border);
  box-shadow: none;
}

/* Primary: the accent */
.dpl-btn--primary,
.dpl-hero__btn--primary,
.dpl-consent__btn--solid {
  background: var(--dpl-accent);
  border-color: var(--dpl-accent);
  color: var(--dpl-on-accent);
  box-shadow: var(--dpl-shadow-btn-accent);
}

@media (hover: hover) {
  .button--secondary:not(:disabled):hover,
  .button--tertiary:not(:disabled):hover,
  .dpl-btn--secondary:not(:disabled):hover,
  .dpl-hero__btn--secondary:hover,
  .dpl-wa-banner__btn:hover,
  .dpl-consent__btn--ghost:hover,
      .dpl-reviews .cr-show-more-button:hover,
  .dpl-reviews .cr-show-more-reviews-prd:hover {
    background: transparent;
    border-color: var(--dpl-text);
    color: var(--dpl-text);
    box-shadow: none;
  }

  .dpl-btn--primary:not(:disabled):hover,
  .dpl-hero__btn--primary:hover,
  .dpl-consent__btn--solid:hover {
    background: var(--dpl-accent-hover);
    border-color: var(--dpl-accent-hover);
    color: var(--dpl-on-accent);
    box-shadow: var(--dpl-shadow-btn-accent-hover);
  }
}

/* Dark: the black button, for markup that wants it stated */
.dpl-btn--dark {
  background: var(--dpl-surface-dark);
  border-color: var(--dpl-surface-dark);
  color: var(--dpl-on-dark);
  box-shadow: var(--dpl-shadow-btn);
}

/* Sizes and block */
.dpl-btn--lg { min-height: var(--dpl-btn-height-lg); }
.dpl-btn--sm,
.button--tertiary,
.dpl-wa-banner__btn,
.dpl-glp-notice__btn { min-height: var(--dpl-btn-height-sm); }
.dpl-btn--block,
.button--full-width {
  display: flex;
  width: 100%;
}
.dpl-btn--block { border-radius: var(--dpl-radius-btn-block); }

/* Dawn's loading spinner colour follows the button text */
.button.loading { color: transparent; }

/* --------------------------------------------------------------------------
   Cards: the look (G3, G11). One card, one hover. The image does not zoom.
   Lane B's card selectors are added to this list at merge.
   -------------------------------------------------------------------------- */
.dpl-card,
.dpl-surface-card,
.product-card-wrapper,
.article-card-wrapper,
.dpl-cat-square,
.dpl-cat-bar__card,
.dpl-blog-latest__card {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: var(--dpl-surface);
  border: 1px solid var(--dpl-border);
  border-radius: var(--dpl-radius-card);
  box-shadow: var(--dpl-shadow-card);
  transition: transform var(--dpl-duration-card) var(--dpl-ease),
    box-shadow var(--dpl-duration-card) var(--dpl-ease),
    border-color var(--dpl-duration-card) var(--dpl-ease);
}

@media (hover: hover) {
  .dpl-card:hover,
  .dpl-surface-card:hover,
  .product-card-wrapper:hover,
  .article-card-wrapper:hover,
  .dpl-cat-square:hover,
  .dpl-cat-bar__card:hover,
  .dpl-blog-latest__card:hover {
    transform: var(--dpl-lift-card);
    box-shadow: var(--dpl-shadow-card-hover);
    border-color: var(--dpl-border-hover);
  }
}

/* Inside a card the image fills the top edge; the card's own radius clips it. */
.dpl-card img,
.dpl-blog-latest__card img,
.product-card-wrapper .card__inner,
.product-card-wrapper .card__media,
.product-card-wrapper .media,
.product-card-wrapper img,
.article-card-wrapper .card__inner,
.article-card-wrapper .card__media,
.article-card-wrapper .media,
.article-card-wrapper img {
  border-radius: 0;
}

.product-card-wrapper .card--standard > .card__content,
.article-card-wrapper .card--standard > .card__content {
  padding: 0 16px 16px;
}

/* --------------------------------------------------------------------------
   Smooth scrolling: Lenis (assets/lenis.min.js, assets/dpl-smooth-scroll.js)
   -------------------------------------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   Layout: one content width, one gutter, one section gap
   -------------------------------------------------------------------------- */
.dpl-container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--dpl-page-width) + 2 * var(--dpl-gutter));
  margin-inline: auto;
  padding-inline: var(--dpl-gutter);
}

.dpl-section {
  padding-block: var(--dpl-section-padding);
}

/* --------------------------------------------------------------------------
   Reduced motion: every transition and animation off, smooth scrolling included
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    /* Not 0s: some scripts wait for transitionend, which never fires at 0s. */
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* CusRev's review date line ships at weight 300; the design's text is 400-600 (home, checkout, reviews page). */
.cr-reviews-grid .cr-review-card .middle-row .datetime,
.cr-reviews-slider .cr-review-card .middle-row .datetime {
  font-weight: var(--dpl-weight-body);
}