/* ==========================================================================
   Pokemon Supplier - premium design system
   Loaded by mu-plugin pps-premium-redesign.php, after the theme CSS.
   Scoped deliberately: tokens are global, overrides target theme classes.
   Remove the mu-plugin to revert everything.
   ========================================================================== */

:root {
  /* ---- ink & paper ---- */
  --pps-ink:        #0E0E10;
  --pps-body:       #2A2A2E;
  --pps-muted:      #5B5B62;
  --pps-hairline:   #E4E1DC;
  --pps-paper:      #FAF9F7;
  --pps-tile:       #F2F0EC;
  --pps-white:      #FFFFFF;

  /* ---- type scale ---- */
  --pps-h1:  clamp(2.5rem, 1.6rem + 2.6vw, 4rem);      /* 40 -> 64 */
  --pps-h2:  clamp(2rem,   1.5rem + 1.4vw, 2.5rem);    /* 32 -> 40 */
  --pps-h3:  clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); /* 22 -> 28 */
  --pps-h4:  1.125rem;
  --pps-text: 1.0625rem;                               /* 17px */

  /* ---- space ---- */
  --pps-section: clamp(56px, 7vw, 104px);
  --pps-gutter:  28px;
  --pps-radius:  14px;
}

/* ==========================================================================
   0. Retune the theme's own tokens
   DukaMarket declares its whole design system as custom properties on `body`.
   Overriding them here fixes colour and type at source, so the rest of this
   file needs far fewer overrides.
   ========================================================================== */

body {
  /* type */
  --main-fz:        1.0625rem;   /* was 14px */
  --main-lh:        1.6;         /* was 1.714  */
  --main-cl:        #2A2A2E;     /* was #666   */
  --default-color:  #0E0E10;     /* was #222   */
  --main-h-fw:      700;         /* was 500    */

  /* Brand palette left exactly as the theme ships it - these are the brand's
     colours and are deliberately NOT overridden here. Restraint is achieved
     through space, type and hierarchy instead of by removing hues. */

  /* softer geometry, roomier controls */
  --main-bora:      10px;
  --main-bora-2:    14px;
  --input-height:   46px;
  --input-padding:  10px 18px;
  --input-cl:       #5B5B62;
  --button-padding: 12px 28px;
}

/* ==========================================================================
   1. Foundations
   ========================================================================== */

body,
body.woocommerce,
.dukamarket-body {
  background-color: var(--pps-paper);
  color: var(--pps-body);
  font-size: var(--pps-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The theme sets 14px/#666 on a very large number of nodes. Lift the readable
   text without touching UI chrome (badges, counters, icon labels). */
body p,
body li,
body td,
body dd,
.entry-content,
.woocommerce-product-details__short-description,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-size: var(--pps-text);
  color: var(--pps-body);
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  color: var(--pps-ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: var(--pps-h1); }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: var(--pps-h2); }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: var(--pps-h3); }
h4, .elementor-widget-heading h4.elementor-heading-title { font-size: var(--pps-h4); letter-spacing: 0; }

/* Product titles must NOT inherit the display scale */
.product-title, .product-title a,
.woocommerce-loop-product__title,
.product-name, .product-name a {
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--pps-ink) !important;
}

a { color: var(--pps-ink); }
a:hover { color: var(--main-color-3, #cc1414); }   /* brand red */

/* ==========================================================================
   2. Controls
   Brand colours are inherited from the theme tokens - only shape, weight and
   motion are adjusted here.
   ========================================================================== */

.button, .btn, button,
.single_add_to_cart_button,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: background-color .18s ease-out, color .18s ease-out, transform .18s ease-out;
}

/* CTA colour comes from the brand tokens (--main-color / --main-color-b);
   only the hover lift is added. */
.single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.add_to_cart_button:hover {
  transform: translateY(-1px);
}

/* ==========================================================================
   3. Header - collapse to two rows
   ========================================================================== */

.header-topbar,
.topbar,
.header-top,
.header-transparent .header-topbar {
  display: none !important;          /* row 1 of 3: language/currency/links */
}

.header-middle,
.header-main {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

header .header-inner,
.header-wrapper {
  border-bottom: 1px solid var(--pps-hairline);
}

/* compare is dead weight on a B2B catalogue */
.compare, .compare-button, .yith-woocompare-open,
a.compare.button, .woocommerce a.compare {
  display: none !important;
}

/* ==========================================================================
   4. Discount-store signals
   ========================================================================== */

/* percentage-off starbursts */
.onsale, span.onsale,
.product-label .sale, .product-label span.sale,
.badge-sale, .sale-badge, .product-badge.sale,
.woocommerce span.onsale {
  display: none !important;
}

/* "HOT" flames and hard-sell chips */
.product-label .hot, .label-hot, .badge-hot, .product-badge.hot {
  display: none !important;
}

/* fake scarcity: "Sold: 0/Unlimit" */
.product-sold, .sold-count, .stock-progress,
.product-progress, .progress-sold, .ovic-sold-bar {
  display: none !important;
}

/* empty vendor line */
.sold-by-meta:empty,
.product-vendor:empty,
.sold-by:empty { display: none !important; }

/* quiet strike-through instead of a badge */
del, del .amount, .price del {
  color: var(--pps-muted) !important;
  font-weight: 400 !important;
  opacity: 1;
}
ins, .price ins { text-decoration: none !important; }
.price, .price ins .amount {
  color: var(--pps-ink) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   5. Product cards - room to breathe
   ========================================================================== */

.product-inner,
li.product .product-wrapper,
.product-item .product-inner {
  background: var(--pps-white);
  border: 1px solid var(--pps-hairline) !important;
  border-radius: var(--pps-radius);
  overflow: hidden;
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.product-inner:hover,
li.product .product-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(14,14,16,.08);
}

.product-thumbnail, .product-image, .product-inner .thumbnail {
  background: var(--pps-tile);
}
.product-thumbnail img, .product-image img {
  mix-blend-mode: multiply;          /* unifies mixed-source cut-outs */
  transition: transform .2s ease-out;
}
.product-inner:hover .product-thumbnail img { transform: scale(1.03); }

.product-info, .product-content, .product-inner .caption {
  padding: 18px 18px 20px !important;
}

/* ==========================================================================
   6. Sections & banners - one system
   ========================================================================== */

.elementor-top-section > .elementor-container,
.elementor-section.elementor-top-section {
  padding-top: 0;
}

.elementor-top-section {
  padding-block: clamp(28px, 3.5vw, 56px);
}

/* every promo banner shares one shell */
.banner, .banner-item, .ovic-banner, .banner-image,
.elementor-widget-image .elementor-image,
.dukamarket-banner {
  border-radius: var(--pps-radius);
  overflow: hidden;
}

.banner img, .banner-item img, .ovic-banner img, .dukamarket-banner img {
  border-radius: var(--pps-radius);
  display: block;
  width: 100%;
  height: auto;
}

/* banner copy: scrim block, not a drop shadow */
.banner-content, .banner-caption, .ovic-banner .content {
  padding: clamp(20px, 3vw, 34px) !important;
}
.banner-content h2, .banner-content h3,
.banner-caption h2, .banner-caption h3 {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  letter-spacing: -0.02em;
}
.banner-content .btn, .banner-caption .btn {
  border-radius: 8px !important;
}

/* countdowns: keep, de-noise */
.countdown, .deal-countdown, .ovic-countdown {
  letter-spacing: 0.02em;
}

/* ==========================================================================
   7. Motion restraint
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .product-inner, .banner, .elementor-button { transition-duration: .18s; }
}
.blink, .flash, .animated-badge { animation: none !important; }

/* ==========================================================================
   8. Mobile
   ========================================================================== */

@media (max-width: 767px) {
  :root { --pps-section: 48px; --pps-gutter: 16px; }
  body { font-size: 1rem; }
  .product-info, .product-content { padding: 14px !important; }
  .elementor-top-section { padding-block: 24px; }
}

/* ==========================================================================
   9. Dark chrome guard
   The header sits on the brand navy and the footer on a near-black gradient.
   The foundational ink colours in section 1 must never leak into either, or
   text goes dark-on-dark. Inherit instead, so the theme's own light colours
   (and the brand palette) keep control of this chrome.
   ========================================================================== */

header p, header li, header td, header dd, header span, header a, header div,
.header p, .header li, .header td, .header dd, .header span, .header a,
footer p, footer li, footer td, footer dd, footer span, footer a, footer div,
.footer p, .footer li, .footer td, .footer dd, .footer span, .footer a {
  color: inherit;
}

/* Footer headings stay white, as the theme intends.
   NOT applied to the header: it contains light panels (the slide-out cart,
   the search dropdown) where white headings would vanish. Header text on the
   navy bands is already handled by the `inherit` rule above. */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
  color: #fff;
}

/* links in the dark chrome brighten on hover rather than turning ink */
footer a:hover, .footer a:hover { color: #fff; }

/* the header promo line and the footer mission copy were the two casualties */
.header-message, .header-message *,
.pksf-mission { color: inherit !important; }