/* Delicat Builder V9 Pro - Type & Token system.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * Audit of 9.2.0-pro.2, storefront sheets only:
 *   1487 font-size declarations across 275 distinct values
 *   925 distinct hex colours
 *   143 distinct border-radius values
 *   font-weight spread over 400/500/600/700/750/800/850/900/950
 *   .delicat-carousel__title and .delicat-testimonials__title forced to
 *   "Playfair Display", ui-serif, Georgia, serif while every other element
 *   is Inter - one page rendering two unrelated typefaces.
 *
 * This sheet is a correction layer, not a redesign. It does not move, hide
 * or restructure anything. It collapses size, weight, colour and radius onto
 * one scale so every surface agrees, the way the KryptoMate reference does.
 *
 * HARD CONSTRAINTS (all verified by build guards)
 * -----------------------------------------------
 *   NO calc()  - LiteSpeed's combiner strips whitespace around "+", which
 *                discards the whole declaration at parse time with no warning.
 *                That is what killed the alpha.4 type scale.
 *   NO clamp() - same reason.
 *   NO backdrop-filter.
 *   Fixed px steps per breakpoint instead.
 *
 * SPECIFICITY
 * -----------
 * The sheets this corrects use !important freely (383 !important font/colour
 * declarations counted). "html body" + !important is the minimum that wins
 * without raising specificity further than needed. This file is enqueued last.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* -- Type scale. Eight steps. Phone values first; the media queries below
        step them up. Measured against the KryptoMate reference at 440px. -- */
  --dt-1: 11px;   /* eyebrow, badge, bottom-nav label            */
  --dt-2: 12px;   /* meta, tag, caption                          */
  --dt-3: 13px;   /* secondary body, card subtitle               */
  --dt-4: 15px;   /* body, product name                          */
  --dt-5: 17px;   /* section title, card price                   */
  --dt-6: 20px;   /* block heading                               */
  --dt-7: 24px;   /* hero / page title                           */
  --dt-8: 28px;   /* display                                     */

  /* -- Line heights. Three, not thirty. -- */
  --dl-tight: 1.2;
  --dl-snug: 1.35;
  --dl-body: 1.5;

  /* -- Weights. Five, not nine. 750/850/950 are not real weights in most
        loaded faces; the browser synthesises them and the result differs
        between iOS and Android. -- */
  --dw-normal: 400;
  --dw-medium: 500;
  --dw-semi: 600;
  --dw-bold: 700;
  --dw-heavy: 800;

  /* -- Letter spacing -- */
  --dls-tight: -0.02em;
  --dls-normal: 0;
  --dls-wide: 0.08em;

  /* -- Colour. Structure taken from the reference, hues kept Delicat. -- */
  --dc-bg: #eceef1;          /* page background                   */
  --dc-surface: #ffffff;     /* cards, panels                     */
  --dc-surface-2: #f5f6f8;   /* inset, rails, chips               */
  --dc-ink: #101629;         /* primary text                      */
  --dc-ink-2: #475467;       /* secondary text                    */
  --dc-muted: #667085;       /* tertiary text, meta               */
  --dc-line: #e4e7ec;        /* borders                           */
  --dc-line-soft: #eef0f3;   /* hairlines                         */

  /* Brand. These four are the only place to change the store's colour. */
  --dc-accent: #ff5a1f;      /* Delicat orange - primary action    */
  --dc-accent-ink: #ffffff;
  --dc-brand: #284696;       /* Delicat royal blue                */
  --dc-navy: #0d1b4d;        /* Delicat navy - dark surfaces      */

  --dc-success: #0f9f6e;
  --dc-danger: #dc3d4f;
  --dc-warning: #f09b37;

  /* -- Radius. Five steps. -- */
  --dr-sm: 10px;
  --dr-md: 14px;
  --dr-lg: 18px;
  --dr-xl: 22px;
  --dr-full: 999px;

  /* -- Elevation. Three steps. -- */
  --de-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --de-2: 0 4px 12px rgba(16, 24, 40, 0.07);
  --de-3: 0 12px 32px rgba(16, 24, 40, 0.11);

  /* -- Rhythm -- */
  --ds-gutter: 14px;
  --ds-section: 28px;
  --ds-tap: 44px;

  /* -- Typeface. System stack FIRST.
        On a slow Haitian 3G link the store must paint before any webfont
        arrives; -apple-system and Roboto are already on the device. Inter is
        listed after as an enhancement for anyone who has it. -- */
  --dc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Inter, Arial, sans-serif;
}

@media (min-width: 601px) {
  :root {
    --dt-3: 14px;
    --dt-5: 18px;
    --dt-6: 22px;
    --dt-7: 28px;
    --dt-8: 34px;
    --ds-gutter: 18px;
    --ds-section: 36px;
  }
}

@media (min-width: 1025px) {
  :root {
    --dt-1: 12px;
    --dt-2: 13px;
    --dt-3: 14px;
    --dt-4: 16px;
    --dt-5: 18px;
    --dt-6: 24px;
    --dt-7: 32px;
    --dt-8: 40px;
    --ds-gutter: 24px;
    --ds-section: 48px;
  }
}

/* ==========================================================================
   2. ONE TYPEFACE
   ========================================================================== */

/* V9 sets --delicat-font and --delicat-font-display in two places with two
   different values. Both are pointed at the same stack here so the aliases
   used across the older sheets resolve identically. */
html body.dbp-type {
  --delicat-font: var(--dc-font);
  --delicat-font-display: var(--dc-font);
  --dcn-font: var(--dc-font);
  --dnp-font: var(--dc-font);
  font-family: var(--dc-font) !important;
  font-size: var(--dt-4) !important;
  line-height: var(--dl-body) !important;
  -webkit-font-smoothing: antialiased;
  /* font-synthesis inherits, so one declaration here covers every descendant.
     pro.4 did this with five [class*="..."] selectors, which forced a
     substring test against every element's class list on each style
     recalculation - the most expensive thing in the sheet, on the cheapest
     phones. */
  font-synthesis-weight: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

html body.dbp-type h1,
html body.dbp-type h2,
html body.dbp-type h3,
html body.dbp-type h4,
html body.dbp-type h5,
html body.dbp-type h6,
html body.dbp-type button,
html body.dbp-type input,
html body.dbp-type select,
html body.dbp-type textarea,
html body.dbp-type .delicat-carousel__title,
html body.dbp-type .delicat-testimonials__title,
html body.dbp-type .dlc-review-title,
html body.dbp-type .delicat-builder-hero__title {
  font-family: var(--dc-font) !important;
}

/* ==========================================================================
   3. ONE HEADING SCALE
   ========================================================================== */

html body.dbp-type h1 {
  font-size: var(--dt-7) !important;
  line-height: var(--dl-tight) !important;
  font-weight: var(--dw-heavy) !important;
  letter-spacing: var(--dls-tight) !important;
}

html body.dbp-type h2 {
  font-size: var(--dt-6) !important;
  line-height: var(--dl-tight) !important;
  font-weight: var(--dw-bold) !important;
  letter-spacing: var(--dls-tight) !important;
}

html body.dbp-type h3 {
  font-size: var(--dt-5) !important;
  line-height: var(--dl-snug) !important;
  font-weight: var(--dw-bold) !important;
  letter-spacing: var(--dls-tight) !important;
}

html body.dbp-type h4 {
  font-size: var(--dt-4) !important;
  line-height: var(--dl-snug) !important;
  font-weight: var(--dw-semi) !important;
}

html body.dbp-type h5,
html body.dbp-type h6 {
  font-size: var(--dt-3) !important;
  line-height: var(--dl-snug) !important;
  font-weight: var(--dw-semi) !important;
}

html body.dbp-type p,
html body.dbp-type li,
html body.dbp-type dd,
html body.dbp-type label {
  font-size: var(--dt-4);
  line-height: var(--dl-body);
}

html body.dbp-type small {
  font-size: var(--dt-2);
  line-height: var(--dl-snug);
}

/* ==========================================================================
   4. SECTION HEADINGS - the eight V9 section families, one size each
   ========================================================================== */

/* Verified against the live DOM. Every builder section renders an optional
   eyebrow, a title and an optional subtitle; before this they rendered the
   title at seven different sizes across one page. */

html body.dbp-type .delicat-carousel__eyebrow,
html body.dbp-type .delicat-category-chips__eyebrow,
html body.dbp-type .delicat-why__eyebrow,
html body.dbp-type .delicat-fav__eyebrow,
html body.dbp-type .delicat-bk__eyebrow,
html body.dbp-type .delicat-legal__eyebrow,
html body.dbp-type .delicat-builder-hero__eyebrow,
html body.dbp-type .delicat-archive-builder-header__eyebrow {
  font-size: var(--dt-1) !important;
  line-height: var(--dl-tight) !important;
  font-weight: var(--dw-heavy) !important;
  letter-spacing: var(--dls-wide) !important;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.62;
}

html body.dbp-type .delicat-carousel__title,
html body.dbp-type .delicat-category-chips__title,
html body.dbp-type .delicat-process__title,
html body.dbp-type .delicat-why__title,
html body.dbp-type .delicat-testimonials__title,
html body.dbp-type .delicat-faq__title,
html body.dbp-type .delicat-fav__title,
html body.dbp-type .delicat-bk__title,
html body.dbp-type .delicat-builder-text__title,
html body.dbp-type .delicat-newsletter h2 {
  font-size: var(--dt-5) !important;
  line-height: var(--dl-snug) !important;
  font-weight: var(--dw-bold) !important;
  letter-spacing: var(--dls-tight) !important;
}

html body.dbp-type .delicat-carousel__subtitle,
html body.dbp-type .delicat-category-chips__subtitle,
html body.dbp-type .delicat-process__subtitle,
html body.dbp-type .delicat-why__subtitle,
html body.dbp-type .delicat-testimonials__subtitle,
html body.dbp-type .delicat-faq__subtitle,
html body.dbp-type .delicat-fav__subtitle,
html body.dbp-type .delicat-bk__subtitle,
html body.dbp-type .delicat-archive-builder-header__subtitle {
  font-size: var(--dt-3) !important;
  line-height: var(--dl-body) !important;
  font-weight: var(--dw-normal) !important;
  letter-spacing: var(--dls-normal) !important;
  color: inherit;
  opacity: 0.68;
}

html body.dbp-type .delicat-carousel__view-all,
html body.dbp-type .delicat-why__cta {
  font-size: var(--dt-3) !important;
  font-weight: var(--dw-semi) !important;
  letter-spacing: var(--dls-normal) !important;
}

/* Hero title is the one step above a section title, never two. */
html body.dbp-type .delicat-builder-hero__title {
  font-size: var(--dt-7) !important;
  line-height: var(--dl-tight) !important;
  font-weight: var(--dw-heavy) !important;
  letter-spacing: var(--dls-tight) !important;
}

html body.dbp-type .delicat-builder-hero__cta {
  font-size: var(--dt-4) !important;
  font-weight: var(--dw-bold) !important;
  min-height: var(--ds-tap);
}

/* ==========================================================================
   5. PRODUCT SURFACES
   ========================================================================== */

/* pro.5 correction.
 *
 * pro.4 set color:var(--dc-ink) here. The product card is NOT a light
 * surface - V9 renders it at background:#0d1232 with color:#fff, and
 * .delicat-product-card__name carries color:#fff!important. Overriding that
 * with #101629 put near-black text on a near-black card and made every
 * product title on the storefront invisible.
 *
 * The card's own colour is correct on both themes. Type rules never assert a
 * colour on anything that sits inside a surface; they set size, weight and
 * spacing and inherit the colour the surface already established. */

html body.dbp-type .delicat-product-card__name,
html body.dbp-type .woocommerce-loop-product__title,
html body.dbp-type .delicat-woo-product-card .woocommerce-loop-product__title {
  font-size: var(--dt-4) !important;
  line-height: var(--dl-snug) !important;
  font-weight: var(--dw-semi) !important;
  letter-spacing: var(--dls-normal) !important;
}

/* The price row is a container: "À partir de" in the muted colour, the amount
   in a <strong> with the accent. An opacity on the row would fade the amount
   too, so the row keeps V9's colour and only the type is normalised. */
html body.dbp-type .delicat-product-card__price,
html body.dbp-type .delicat-mobile-purchase__price {
  font-size: var(--dt-3) !important;
  line-height: var(--dl-tight) !important;
  font-weight: var(--dw-medium) !important;
  letter-spacing: var(--dls-normal) !important;
}

html body.dbp-type .delicat-product-card__price strong,
html body.dbp-type .delicat-mobile-purchase__price strong {
  font-size: var(--dt-5) !important;
  font-weight: var(--dw-heavy) !important;
  letter-spacing: var(--dls-tight) !important;
}

html body.dbp-type .delicat-product-card__tag,
html body.dbp-type .delicat-product-card__status,
html body.dbp-type .delicat-bk__badge,
html body.dbp-type .dlx-item__badge,
html body.dbp-type .dsb8-header__badge,
html body.dbp-type .dbn-badge {
  font-size: var(--dt-1) !important;
  line-height: 1 !important;
  font-weight: var(--dw-heavy) !important;
  letter-spacing: var(--dls-normal) !important;
}

html body.dbp-type .delicat-product-card__cta,
html body.dbp-type .delicat-archive-product-cta {
  font-size: var(--dt-3) !important;
  font-weight: var(--dw-bold) !important;
  min-height: var(--ds-tap);
}

html body.dbp-type .product_title,
html body.dbp-type .dnp-hero h1 {
  font-size: var(--dt-6) !important;
  line-height: var(--dl-snug) !important;
  font-weight: var(--dw-heavy) !important;
  letter-spacing: var(--dls-tight) !important;
}

/* ==========================================================================
   6. CHROME - header, drawer, bottom nav, cart
   ========================================================================== */

html body.dbp-type .dsb8-header__brand {
  font-size: var(--dt-5) !important;
  font-weight: var(--dw-heavy) !important;
  letter-spacing: var(--dls-tight) !important;
}

html body.dbp-type .dsb8-icon-menu__item,
html body.dbp-type .dsb8-icon-menu__label {
  font-size: var(--dt-2) !important;
  line-height: var(--dl-tight) !important;
  font-weight: var(--dw-semi) !important;
}

html body.dbp-type .dbn-item,
html body.dbp-type .dbn-label {
  font-size: var(--dt-1) !important;
  line-height: var(--dl-tight) !important;
  font-weight: var(--dw-medium) !important;
  letter-spacing: var(--dls-normal) !important;
}

html body.dbp-type .dbn-item.is-active .dbn-label {
  font-weight: var(--dw-semi) !important;
}

html body.dbp-type .dlx-brand__copy strong,
html body.dbp-type .dlx-account__copy strong,
html body.dbp-type .dlx-item__copy strong {
  font-size: var(--dt-4) !important;
  font-weight: var(--dw-semi) !important;
  letter-spacing: var(--dls-normal) !important;
}

html body.dbp-type .dlx-brand__copy small,
html body.dbp-type .dlx-account__copy small,
html body.dbp-type .dlx-item__copy small,
html body.dbp-type .dlx-wallet__copy small {
  font-size: var(--dt-2) !important;
  font-weight: var(--dw-normal) !important;
  color: inherit;
  opacity: 0.66;
}

html body.dbp-type .dlx-section__title,
html body.dbp-type .dlx-section__toggle {
  font-size: var(--dt-1) !important;
  font-weight: var(--dw-heavy) !important;
  letter-spacing: var(--dls-wide) !important;
  color: inherit;
  opacity: 0.62;
}

html body.dbp-type .dlx-wallet__copy strong {
  font-size: var(--dt-6) !important;
  font-weight: var(--dw-heavy) !important;
  letter-spacing: var(--dls-tight) !important;
}

html body.dbp-type .dlx-quick__tile,
html body.dbp-type .dlx-theme,
html body.dbp-type .dlx-foot__links {
  font-size: var(--dt-2) !important;
  font-weight: var(--dw-medium) !important;
}

html body.dbp-type .dsb8-cart-panel__head strong {
  font-size: var(--dt-5) !important;
  font-weight: var(--dw-bold) !important;
}

html body.dbp-type .dsb8-cart-item__copy > a {
  font-size: var(--dt-3) !important;
  font-weight: var(--dw-semi) !important;
}

html body.dbp-type .dsb8-cart-item__copy small,
html body.dbp-type .dsb8-cart-empty,
html body.dbp-type .dsb8-cart-panel__foot span {
  font-size: var(--dt-2) !important;
  font-weight: var(--dw-normal) !important;
  color: inherit;
  opacity: 0.66;
}

html body.dbp-type .dsb8-cart-item__copy b,
html body.dbp-type .dsb8-cart-panel__foot strong {
  font-size: var(--dt-3) !important;
  font-weight: var(--dw-bold) !important;
}

html body.dbp-type .dsb8-cart-panel__foot > a {
  font-size: var(--dt-3) !important;
  font-weight: var(--dw-bold) !important;
}

/* ==========================================================================
   7. WEIGHT COLLAPSE
   ========================================================================== */

/* 750, 850 and 950 are synthesised, not real. They render differently on iOS
   and Android and are a large part of why the store looks uneven between
   devices. Anything the older sheets set to those values is pulled onto the
   nearest real weight. */

/* Hoisted onto body.dbp-type above. font-synthesis-weight is inherited, so
   the five [class*="..."] selectors this replaced bought nothing and cost a
   substring match against every element on every style recalculation. */

/* ==========================================================================
   8. COLOUR NORMALISATION
   ========================================================================== */

html body.dbp-type {
  --dlc-bg: var(--dc-bg);
  --dlc-bg-elevated: var(--dc-surface);
  --dlc-text: var(--dc-ink);
  --dlc-text-soft: var(--dc-ink-2);
  --dlc-muted: var(--dc-muted);
  --dlc-radius: var(--dr-lg);
  --dlc-radius-sm: var(--dr-md);
  --dlx-text: var(--dc-ink);
  --dlx-muted: var(--dc-muted);
  --dlx-line: var(--dc-line);
  --dlx-card: var(--dc-surface);
  --dlx-bg: var(--dc-bg);
  --dbn-text: var(--dc-muted);
  --delicat-text: var(--dc-ink);
  --delicat-muted: var(--dc-muted);
  --delicat-surface: var(--dc-surface);
  --dbv9-info-title: var(--dc-ink);
  --dbv9-info-subtitle: var(--dc-muted);
  --dbv9-home-heading: var(--dc-ink);
  --dbv9-home-subtitle: var(--dc-muted);
}

/* Muted text was written as eleven near-identical greys. It is now one
   relative value. Relative, not absolute, because these elements appear on
   the light page AND inside dark panels - an absolute grey is only ever
   right on one of them. 62% of the surface's own text colour reads as
   #5b6274 on the light page and #a7a9bb on a dark card, which is where the
   hand-written greys were already aiming. */
html body.dbp-type .delicat-process__card p,
html body.dbp-type .delicat-why__card p,
html body.dbp-type .delicat-testimonials__copy,
html body.dbp-type .delicat-faq__answer,
html body.dbp-type .woocommerce-result-count,
html body.dbp-type .woocommerce-breadcrumb,
html body.dbp-type .delicat-category-tile__copy small {
  color: inherit;
  opacity: 0.66;
}

/* ==========================================================================
   9. RADIUS NORMALISATION
   ========================================================================== */

html body.dbp-type .delicat-product-card,
html body.dbp-type .delicat-process__card,
html body.dbp-type .delicat-why__card,
html body.dbp-type .delicat-testimonials__card,
html body.dbp-type .delicat-faq__item,
html body.dbp-type .woocommerce ul.products li.product {
  border-radius: var(--dr-lg) !important;
}

html body.dbp-type .delicat-category-tile,
html body.dbp-type .dlx-quick__tile,
html body.dbp-type .dsb8-cart-item {
  border-radius: var(--dr-md) !important;
}

html body.dbp-type .delicat-product-card__tag,
html body.dbp-type .delicat-product-card__status,
html body.dbp-type .dbn-badge,
html body.dbp-type .dsb8-header__badge {
  border-radius: var(--dr-full) !important;
}

/* ==========================================================================
   10. FORMS - 16px on phones or iOS zooms the page on focus
   ========================================================================== */

@media (max-width: 820px) {
  html body.dbp-type input,
  html body.dbp-type select,
  html body.dbp-type textarea {
    font-size: 16px !important;
  }

  html body.dbp-type button,
  html body.dbp-type .button,
  html body.dbp-type [role="button"],
  html body.dbp-type a.wp-element-button {
    min-height: var(--ds-tap);
    font-size: var(--dt-3) !important;
    font-weight: var(--dw-bold) !important;
  }
}

/* ==========================================================================
   11. SLOW CONNECTION AND LOW-END DEVICE PATH
   ========================================================================== */

/* The target profile is a cheap Android handset on Haitian 3G. Shadows,
   gradients and long transitions are the frame-rate cost that shows up first
   on that hardware. */

html.delicat-save-data body.dbp-type,
html.delicat-low-power body.dbp-type {
  --de-1: none;
  --de-2: none;
  --de-3: none;
}

/* pro.5: this was `body.dbp-type *`. A universal selector under a class on
   <html> still walks every node once the class is present, which is exactly
   the moment the device can least afford it. Named surfaces instead - they
   are the only elements in the markup carrying a shadow. */
html.delicat-save-data body.dbp-type .delicat-product-card,
html.delicat-save-data body.dbp-type .delicat-category-tile,
html.delicat-save-data body.dbp-type .delicat-process__card,
html.delicat-save-data body.dbp-type .delicat-why__card,
html.delicat-save-data body.dbp-type .delicat-testimonials__card,
html.delicat-save-data body.dbp-type .delicat-bottom-nav,
html.delicat-save-data body.dbp-type .dsb8-header,
html.delicat-low-power body.dbp-type .delicat-product-card,
html.delicat-low-power body.dbp-type .delicat-category-tile,
html.delicat-low-power body.dbp-type .delicat-process__card,
html.delicat-low-power body.dbp-type .delicat-why__card,
html.delicat-low-power body.dbp-type .delicat-testimonials__card,
html.delicat-low-power body.dbp-type .delicat-bottom-nav,
html.delicat-low-power body.dbp-type .dsb8-header {
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.dbp-type *,
  html body.dbp-type *::before,
  html body.dbp-type *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}