/* ==========================================================================
   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 {
  color: inherit;
}

/* The footer used to be in the rule above. `inherit` there walked up to body,
   resolved to --main-cl (#2A2A2E) and rendered dark ink on the dark panel at
   1.47:1. Footer colour is now set explicitly in epc-redesign/footer.css. */

/* 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; }

/* ==========================================================================
   10. Product-card cleanup - corrected selectors
   Section 4 guessed at these class names and missed. The real markup is:
     a.by-vendor-name-link   -> renders "Sold by" with no vendor name after it,
                                on every card, because this store is effectively
                                single-vendor (all products author 1).
     div.process-valiable    -> the fake scarcity bar reading "Sold: 0/Unlimit".
                                (the misspelling is the theme's own)
   ========================================================================== */

.product-inner .by-vendor-name-link,
li.product-item .by-vendor-name-link,
.product-info .by-vendor-name-link { display: none !important; }

.product-inner .process-valiable,
li.product-item .process-valiable,
.product-info .process-valiable { display: none !important; }

/* ==========================================================================
   11. Pokeball chat button - clear the mobile bottom bar
   The mobile template pins a 55px-tall bar to the bottom of the viewport
   (Home | Menu | Sidebar | Top). The chat widget is fixed at bottom:24px, so
   on a phone it sat directly on top of that bar's "Top" button and swallowed
   the tap - elementFromPoint at the button's centre returned the Pokeball.
   Lift it clear: 55px bar + 15px breathing room.
   ========================================================================== */

@media (max-width: 991px) {
  #ps-chat-wrap { bottom: 70px !important; }
}

/* Note for future work: do NOT try to raise #ps-chat-wrap above tawk.to.
   While a chat is OPEN, tawk's iframe (z-index 1000003) sits inside a container
   at z-index 2000000000, so no value here can win - and it should not, because
   the visitor is actively chatting at that moment. Tawk's onChatMinimized calls
   hideWidget(), which returns the Pokeball to normal; verified clickable again
   after minimise. A z-index:1000010 rule was tried here and removed as a no-op. */