/*
 Ruumist Ruumi — Brand tokens
 Load order: after parent main.css and Woo overrides.
 Keep only :root tokens and brand assets here. No !important. Reuse existing components.
*/

:root {
  /* Typography */
  /* Example: override font if needed (else inherit parent) */
  /* --font-sans: "Albert Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; */

  /* Core colors (light) */
  /* Provide real values when available. Keep contrast WCAG AA. */
  --color-bg: #ffffff;
  --color-fg: #084253;
  --color-surface: #f6f9fa; /* brand surface */
  --wash: #F1F5F7; /* neutral wash */
  /* Cross-mode fixed surfaces (must be colors; used in color/text contexts) */
  --surface-dark: #06566E; /* mapped from requested gradient to a solid for compatibility */

  /* Brand gradient token reused for header top and footer top strip */
  --rr-header-gradient: linear-gradient(90deg, rgba(8,66,83,1) 0%, rgba(6,86,110,1) 100%);
  /* Parent footer background token mapping */
  --footer-bg: var(--rr-header-gradient);

  /* Borders and dividers */
  --border-color: #25697B1C;
  /* --border-divider: rgba(0,0,0,0.10); */
  /* --border-shell: rgba(0,0,0,0.08); */

  /* Accents and states */
  --badge-success: green;
  --badge-info: #5aadc5;
  --badge-danger: #ef4444; /* brand danger for error/negative states */
  /* --color-focus: #FFD84D; */

  /* Layout & shape */
  /* --container-max: 1440px; */
  /* --radius: 6px; */

  /* Buttons */
  /* --btn-primary-bg: var(--color-fg); */
  --btn-primary-hover: var(--surface-dark);

  /* Scrollbar */
  /* --scrollbar-thumb: var(--border-color); */
  /* --scrollbar-thumb-hover: var(--color-fg); */

  /* Tokens controlling layout from child */
  --shop-grid-cols-mobile: 2; /* parent reads this token at <=640px */
  --product-actions-cols-mobile: 1; /* stack primary card action buttons on mobile */
}

/* Payment logos marquee override (brand) — remove grayscale filter */
.bp-logos-track img { filter: none; }

/* Header (brand variant) — Ruumist Ruumi
   - Keep parent header markup/IDs/data hooks identical
   - Replace text brand with logo
   - Topbar background = var(--surface-dark); text = var(--color-bg)
   - Remove bottom border
*/
.site-topbar {
  background-color: var(--surface-dark);
  color: var(--color-bg);
  border-bottom: 0; /* remove baseline border */
}
header .header-top a { color: var(--color-bg); }
header .header-top .bp-desktop-only > ul > li > a,
header .header-top .bp-desktop-only .menu > li > a { 
  color: var(--color-bg); 
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Top row (header-top): gradient background per brand spec
   - Vertical padding 8px ONLY on <=760px
   - On wider screens, remove extra vertical padding (inherit parent spacing) */
header .header-top {
  background: var(--rr-header-gradient);
  padding-top: 8px;
  padding-bottom: 8px;
}
@media (min-width: 761px) {
  header .header-top { padding-top: 0; padding-bottom: 0; }
}

/* Footer top strip (brand): reuse the same gradient as header top */
.rr-footer-top { background: var(--rr-header-gradient); color: var(--color-bg); }

/* Footer (brand): cap logo size and ensure legal text is readable on gradient */
.site-footer .footer-logo img { max-width: 350px; width: 100%; height: auto; }
.site-footer .footer-legal { color: var(--color-bg); opacity: 0.95; }

/* Footer logo mobile sizing (brand) */
@media (max-width: 640px) {
  .site-footer .footer-logo img { max-width: 220px; }
}
@media (max-width: 480px) {
  .site-footer .footer-logo img { max-width: 180px; }
}

/* Header controls (brand):
   - Hide dark mode toggle for now
   - Give search icon a background for contrast on gradient */
header .header-top button.darkmode { display: none; }
header .header-top #bp-search-btn {
  color: var(--color-bg);
}
/* Header menu (hamburger) icon: force brand text color on gradient */
header .header-top .bp-mobile-only,
header .header-top .bp-mobile-only .icon,
header .header-top .bp-mobile-only svg { color: var(--color-bg); }
/* Increase specificity and set stroke explicitly to cover overrides */
.site-topbar .header-top .bp-mobile-only svg,
.site-topbar .header-top .bp-mobile-only svg path { stroke: var(--color-bg); }

/* Breadcrumbs (brand): soften text across the site */
.woocommerce-breadcrumb { opacity: .75; }

/* Prices (brand)
   - On sale: show the regular (del) price in brand info color */
.product-price-single .price del,
.product-card .product-price del { color: var(--badge-info); }

/* Single product: increase specificity to override parent's inline critical CSS */
body.single-product .product-summary .product-price-single .price del { color: var(--badge-info); }

/* Product cards: show sale price first, then regular; adjust opacity */
.product-card .product-price { display: inline-flex; align-items: flex-start; gap: 8px; }
.product-card .product-price ins { order: 1; text-decoration: none; }
.product-card .product-price del { order: 2; opacity: .8; margin-right: 6px; }

/* Product card title hover — keep clean (no underline) */
.product-card .product-title a.bp-cart-name-link { text-decoration: none; }
.product-card .product-title a.bp-cart-name-link:hover,
.product-card .product-title a.bp-cart-name-link:focus { text-decoration: none; }
.product-card.is-horizontal .product-title a.bp-cart-name-link:hover .bp-cart-name-text,
.product-card.is-horizontal .product-title a.bp-cart-name-link:focus .bp-cart-name-text { text-decoration: none; }
.product-card.is-horizontal .product-title a .bp-cart-name-text { padding-bottom: 0; }

/* Product gallery (child): remove background from thumbnails row */
.product-gallery .bp-thumbs-row { background: transparent; }

/* Product gallery (child): add subtle border to main image container */
.product-gallery .relative.aspect-square.bg-white { border: 1px solid var(--border-color); }

/* Product gallery (child): remove container vertical padding in simple layout */
.bp-gallery-wrap.is-simple { padding-block: 0; }

/* Single product summary (child): desktop-only padding */
@media (min-width: 1024px) {
  .bp-gallery-wrap.is-simple .product-summary { padding-top: 25px; padding-left: 25px; }
}

/* Same-brand scroller container (child):
   - Parent outputs: <div class="container-page is-simple mt-6 py-8"> with heading "VEEL SAMALT BRÄNDILT / TOOTJALT"
   - Increase top margin to mt-12 (3rem) on desktop only; keep mt-6 on smaller screens
   - Exclude collection grids container which has .bp-collection */
@media (min-width: 1024px) {
  .container-page.is-simple.mt-6.py-8:not(.bp-collection) { margin-top: 3rem; }
}

/* Product Description surface wrapper (child): full-width brand surface @ 0.75 opacity */
.bp-desc-surface { background: color-mix(in srgb, var(--color-surface) 75%, transparent); }
.bp-desc-surface > .container-page.is-simple { background: transparent; }

/* Product details aside (child): desktop-only left padding for better separation */
@media (min-width: 1024px) {
  .bp-desc-surface .bp-accordion { padding-left: 25px; }
}

/* Mini-cart (brand tweaks)
   - Set middle/body area background to --color-bg; keep header/footer unchanged */
#bp-mini-cart-drawer aside > .flex-1 {
  background-color: var(--color-bg);
}

/* Shop subcategory scroller (child):
   - Remove card background/border on tiles
   - Add border only to the image container */
.bp-subcats .ds-secondary-item { background: transparent; border: 0; box-shadow: none; }
.bp-subcats .ds-secondary-item .ds-thumb { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }

/* Categories grid variant (child): same visual rules */
.bp-cat-grid .ds-secondary-item { background: transparent; border: 0; box-shadow: none; }
.bp-cat-grid .ds-secondary-item .ds-thumb { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; background: transparent; }

/* Stronger scope for Shop and Category archives */
body.post-type-archive-product .bp-subcats .ds-secondary-item,
body.tax-product_cat .bp-subcats .ds-secondary-item,
body.post-type-archive-product .bp-cat-grid .ds-secondary-item,
body.tax-product_cat .bp-cat-grid .ds-secondary-item { background: transparent; border: 0; box-shadow: none; }
body.post-type-archive-product .bp-subcats .ds-secondary-item .ds-thumb,
body.tax-product_cat .bp-subcats .ds-secondary-item .ds-thumb,
body.post-type-archive-product .bp-cat-grid .ds-secondary-item .ds-thumb,
body.tax-product_cat .bp-cat-grid .ds-secondary-item .ds-thumb { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; background: transparent; }

/* Product cards (brand)
   - Remove shadows on primary (vertical) and secondary (horizontal) cards
   - Preserve borders and hover border-color from parent
   - Do NOT affect small cards or collection tiles (already shadowless)
*/
.product-card.is-vertical,
.product-card.is-horizontal { box-shadow: none; }
.product-card.is-vertical:hover,
.product-card.is-horizontal:hover { box-shadow: none; }

/* Category tiles (shop/category archives, child):
   - Remove tile background and border
   - Keep a subtle border only on the image
   - Targets default Woo markup: ul.products > li.product-category
*/
body.post-type-archive-product ul.products li.product-category,
body.tax-product_cat ul.products li.product-category {
  background: transparent;
  border: 0;
}
body.post-type-archive-product ul.products li.product-category a img,
body.tax-product_cat ul.products li.product-category a img {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

/* Badges (brand)
   - Use brand dark surface for filled discount/sale badges */
.badge.discount,
.badge.sale {
  background: var(--surface-dark);
  color: var(--color-bg);
  border-color: var(--surface-dark);
}

/* Brand logo: reuse the existing brand anchor; hide its text and show provided SVG
   Size (square):
   - Mobile (default): 50x50
   - Tablet (>=768px): 80x80
   - Desktop (>=1024px): 90x90
*/
.site-topbar .flex > a[aria-label] {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url('https://ruumistruumi.ee/wp-content/uploads/2024/10/Ruumist-Ruumi-logo-valge.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .site-topbar .flex > a[aria-label] { width: 80px; height: 80px; }
}
@media (min-width: 1024px) {
  .site-topbar .flex > a[aria-label] { width: 90px; height: 90px; }
}
.site-topbar .flex > a[aria-label] span { display: none; }

/* Optional dark mode specifics — keep minimal, only if brand requires */
html.dark {
  --color-dark-bg: #0E0E0E;
  /* --color-dark-surface: #161616; */
  /* --color-dark-fg: #EDEDED; */
  /* --border-dark-color: #ffffff1a; */
}

/* Mobile (≤640px): consolidated — stack primary actions, padding 5px, small type; DS grid = 2-up with 5px gutter + edge bleed */
@media (max-width: 640px) {
  /* Primary card layout */
  .product-card.is-vertical .product-actions { grid-template-columns: repeat(var(--product-actions-cols-mobile, 1), minmax(0, 1fr)); row-gap: 8px; }
  .product-card.is-vertical .product-actions .btn { width: 100%; height: 32px; min-height: 32px; padding-block: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
  .product-card.is-vertical .product-actions .btn .icon,
  .product-card.is-vertical .product-actions .btn svg { width: 16px; height: 16px; }
  .product-card.is-vertical .product-body { padding: 5px; }
  .product-card.is-vertical .product-actions { padding: 5px; }

  /* Woo default loop card (archive grids) */
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 12px; font-weight: 600; line-height: 1.2; }
  .woocommerce ul.products li.product .price { font-size: 0.85rem; line-height: 1.2; }
  /* If a category label/meta is rendered in the loop, keep it a touch smaller */
  .woocommerce ul.products li.product .product-category,
  .woocommerce ul.products li.product .product_meta,
  .woocommerce ul.products li.product .posted_in { font-size: 10px; line-height: 1.15; }

  /* DS primary product card (if used in grids) */
  .product-card.is-vertical .product-title,
  .product-card.is-vertical .product-title a { font-size: 12px; font-weight: 600; line-height: 110%; }
  .product-card.is-vertical .product-price { font-size: 0.85rem; line-height: 1.2; }

  /* Micro spacing + tracking for category/sku line below title */
  .product-title + .product-sku { margin-top: 3px; }
  .product-sku { letter-spacing: .04em; }

  /* DS Primary grid: 2-up with small gutter and container bleed */
  body.post-type-archive-product .ds-primary-grid,
  body.tax-product_cat .ds-primary-grid,
  body.tax-product_tag .ds-primary-grid,
  body.tax-product_brand .ds-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-left: -10px; width: calc(100% + 20px); }
}

/* Mobile (≤480px): actions on one row — fixed 32px add-to-cart (icon-only) + flexible view with text (9px label, 3px icon gap) */
@media (max-width: 480px) {
  .product-card.is-vertical .product-actions { display: grid; grid-template-columns: 32px 1fr; column-gap: 2px; align-items: stretch; }
  .product-card.is-vertical .product-actions .btn { width: 100%; height: 32px; min-height: 32px; padding-block: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
  /* Typography: SKU/category line on product card */
  .product-card .product-sku { font-size: .65rem; line-height: 1.1; }
  /* Add-to-cart icon-only: target first button and Woo classes explicitly */
  .product-card.is-vertical .product-actions .btn:first-child,
  .product-card.is-vertical .product-actions a.add_to_cart_button,
  .product-card.is-vertical .product-actions a.ajax_add_to_cart,
  .product-card.is-vertical .product-actions a.product_type_variable { padding: 0; display: grid; place-items: center; text-align: center; }
  /* Hide only the add-to-cart label (keep icon visible) */
  .product-card.is-vertical .product-actions a.add_to_cart_button .btn-label,
  .product-card.is-vertical .product-actions a.ajax_add_to_cart .btn-label,
  .product-card.is-vertical .product-actions a.product_type_variable .btn-label,
  .product-card.is-vertical .product-actions .btn:first-child .btn-label { display: none; }
  /* Center icon and remove icon-right spacing when no label */
  .product-card.is-vertical .product-actions a.add_to_cart_button .icon-right,
  .product-card.is-vertical .product-actions a.ajax_add_to_cart .icon-right,
  .product-card.is-vertical .product-actions a.product_type_variable .icon-right,
  .product-card.is-vertical .product-actions .btn:first-child .icon-right { margin: 0; }
  .product-card.is-vertical .product-actions .btn:first-child svg,
  .product-card.is-vertical .product-actions .btn:first-child .icon,
  .product-card.is-vertical .product-actions a.add_to_cart_button svg,
  .product-card.is-vertical .product-actions a.add_to_cart_button .icon,
  .product-card.is-vertical .product-actions a.ajax_add_to_cart svg,
  .product-card.is-vertical .product-actions a.ajax_add_to_cart .icon,
  .product-card.is-vertical .product-actions a.product_type_variable svg,
  .product-card.is-vertical .product-actions a.product_type_variable .icon { width: 16px; height: 16px; text-indent: 0; }
  /* View button: fixed 11px text; border = var(--border-color); 5px icon gap; slightly smaller icon */
  .product-card.is-vertical .product-actions a.btn.btn-secondary { height: 32px; min-height: 32px; padding-inline: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; background-color: var(--color-surface) !important; border-color: var(--border-color) !important; }
  .product-card.is-vertical .product-actions a.btn.btn-secondary .btn-label { white-space: nowrap; line-height: 1; font-size: 10px; }
  .product-card.is-vertical .product-actions a.btn.btn-secondary .icon-right { margin-left: 5px; }
  .product-card.is-vertical .product-actions a.btn.btn-secondary .icon { width: 14px; height: 14px; }
  /* Ensure add-to-cart icon is perfectly centered */
  .product-card.is-vertical .product-actions a.add_to_cart_button,
  .product-card.is-vertical .product-actions a.ajax_add_to_cart,
  .product-card.is-vertical .product-actions a.product_type_variable { justify-content: center; align-items: center; text-align: center; }
  /* Price spans full row above buttons */
  .product-card.is-vertical .product-actions .product-price { grid-column: 1 / -1; }
}
/* Product card titles (650px): tighten tracking (child) */
@media (max-width: 640px) {
  .product-card .product-title,
  .product-card .product-title a,
  .product-card .product-title .bp-cart-name-text { letter-spacing: -0.01em; }
}

/* Mobile (640px)  brand overrides for inline badges */
@media (max-width: 640px) {
  /* Tighter spacing for inline badges */
  .product-card .badges-inline-sm { gap: 3px; }
  /* Keep discount badge color same as desktop (brand) */
  .product-card .badges-inline-sm .badge-txt.discount {
    background: var(--surface-dark);
    border-color: var(--surface-dark);
    color: var(--color-bg);
  }
}
/* Mobile (640px)  inline badge typography + sizing (child) */
@media (max-width: 640px) {
  .product-card .badges-inline-sm .badge-txt {
    font-weight: 400;
    border-radius: 2px;
    padding: 2px 3px;
    font-size: 8px;
  }
}
/* Mobile (480px)  hide out-of-stock loop button label same as add-to-cart */
@media (max-width: 480px) {
  .product-card.is-vertical .product-actions a.button .btn-label { display: none; }
}
/* Mobile (480px)  center primary action icon for out-of-stock (loop) */
@media (max-width: 480px) {
  .product-card.is-vertical .product-actions a.button {
    height: 32px;
    min-height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    text-align: center;
  }
  .product-card.is-vertical .product-actions a.button .icon-right {
    margin: 0;
  }
  .product-card.is-vertical .product-actions a.button .icon {
    width: 16px;
    height: 16px;
  }
}

/* --------------------------------------------------------------------------
   Blog numbered header (.bp-numblock)
   Scope: content fragments used in WP posts.
   Structure:
     .bp-numblock > .bp-wrap (grid columns)
     .bp-numblock .bp-num    (big number '1.')
     .bp-numblock .bp-title  (section title)
     .bp-numblock .bp-kicker (small uppercase label)
   Notes:
   - No inline styles; reuse design tokens and responsive clamp().
   - Keep minimal to avoid clashes; class names are narrowly scoped.
---------------------------------------------------------------------------- */
.bp-numblock {
  margin-bottom: 2rem;
  margin-top: 6rem;
}
.bp-numblock .bp-wrap {
  display: grid;
  grid-template-columns: minmax(72px, 140px) 1fr;
  gap: 1rem;
  align-items: start;
}
.bp-numblock .bp-num {
  font-weight: 900;
  line-height: 0.85;
  color: var(--color-accent);
  font-size: clamp(48px, 12vw, 140px);
}
.bp-numblock .bp-title {
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.15;
  margin: 0 0 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}
.bp-numblock .bp-kicker {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin: 0.75rem 0 0.5rem;
}
@media (max-width: 768px) {
  .bp-numblock .bp-wrap {
    grid-template-columns: 1fr;
  }
  .bp-numblock .bp-num {
    margin-bottom: 0.25rem;
  }
}