/**
 * SL Dark System - premium dark tokens + WooCommerce page fixes.
 * Enqueued sitewide (see sl-dark-system.php), loaded AFTER the theme's
 * stylesheets (priority 200) so equal-specificity rules win ties.
 *
 * Root cause this layer fixes: WordPress only prints the kubelio theme's
 * global-styles block (the :root token map + body rules) on block-template
 * pages, so /cart/, /checkout/, /my-account/ and 404 pages fell back to UA
 * defaults: Times New Roman, black text, transparent background, UA-blue
 * links. This stylesheet mirrors the tokens and applies the dark system
 * everywhere, then fixes the defects found by the rendered-page audit
 * (contrast, touch targets, focus, overflow, checkout overlap).
 *
 * Design tokens (for human review - documented in report/DESIGN-TOKENS.md):
 *   --sl-accent-decorative        #7c3aed  violet-600, decorative brand purple
 *   --sl-accent-interactive       #a78bfa  violet-400, links/focus/icons, 7.72:1 on #000
 *   --sl-accent-interactive-strong #7c3aed violet-600, filled buttons w/ white text 5.70:1
 *   --sl-success                  #34d399  emerald-400, success text on dark 10.92:1
 *   --sl-success-strong           #047857  emerald-700, filled success buttons 5.48:1
 *   --sl-danger                   #ff7a70  danger text on dark
 *   --sl-text                     #f5f6f8  near-white, 19.42:1 on #000
 *   --sl-text-muted               rgba(245,246,248,.66) muted text >= 4.5:1 on #000
 *   --sl-surface                  #0a0c10  charcoal surface
 *   --sl-surface-raised           #16181d  raised charcoal
 *   --sl-border                   rgba(255,255,255,.14)
 *   focus ring                    #a78bfa, 2px + 2px offset
 * Green is used only for success/availability/confirmation.
 */

:root {
  --sl-accent-decorative: #7c3aed;
  --sl-accent-interactive: #a78bfa;
  --sl-accent-interactive-strong: #7c3aed;
  --sl-success: #34d399;
  --sl-success-strong: #047857;
  --sl-danger: #ff7a70;
  --sl-bg: #0b0f17;
  --sl-surface: #0a0c10;
  --sl-surface-raised: #16181d;
  --sl-text: #f5f6f8;
  --sl-text-muted: rgba(245, 246, 248, 0.66);
  --sl-border: rgba(255, 255, 255, 0.14);

  /* Mirror kubelio preset tokens so theme/WC components resolve on every page. */
  --wp--preset--color--background: #0b0f17;
  --wp--preset--color--background-alt: #0a0c10;
  --wp--preset--color--surface: #0a0e16;
  --wp--preset--color--heading: #f5f6f8;
  --wp--preset--color--body: #f5f6f8;
  --wp--preset--color--meta: rgba(245, 246, 248, 0.62);
  --wp--preset--color--text-link: #a78bfa;
  --wp--preset--color--text-link-active: #c4b5fd;
  --wp--preset--color--outline: rgba(255, 255, 255, 0.14);
  --wp--preset--color--highlight: #fd704f;
  --wp--preset--font-family--heading: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wp--preset--font-family--body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wp--custom--color--success: #34d399;
  --wp--custom--color--success-light: #052e1f;
  --wp--custom--color--success-rgb: rgba(52, 211, 153, 1);
  --wp--custom--color--danger: #ff7a70;
  --wp--custom--color--danger-light: #3a1414;
  --wp--custom--color--danger-rgb: rgba(255, 122, 112, 1);
  --wp--custom--color--warning: #fbbf24;
  --wp--custom--color--warning-light: #33260a;
  --wp--custom--color--info: #60a5fa;
  --wp--custom--color--info-light: #0a1c33;
  --wp--custom--color--overlay: rgba(0, 0, 0, 0.85);
  --wp--custom--button--background: #7c3aed;
  --wp--custom--button--color: #ffffff;
  --wp--custom--button-action--background: #7c3aed;
  --wp--custom--button-action--color: #ffffff;

  /* v2: Fluid Checkout progress bar tokens (defaults are light-grey #d8d8d8
     and success #007a3d / #00cc66). Use the dark-system green fills. */
  --fluidcheckout--checkout-progress--bar-color: #323234;
  --fluidcheckout--checkout-progress--bar-color--complete: #047857;
  --fluidcheckout--checkout-progress--bar-color--current: #047857;
  /* v4: Fluid Checkout two-column gap and order-summary card tuned to the
     homepage design system (navy card surface, 16px radius, tighter gap). */
  --fluidcheckout--columns--gap: 32px;
  --fluidcheckout--order-summary--background-color: rgba(255, 255, 255, 0.035);
  --fluidcheckout--order-summary--border-color: rgba(255, 255, 255, 0.12);
  --fluidcheckout--order-summary--shadow-color: rgba(0, 0, 0, 0.4);
  --fluidcheckout--section--border-radius: 16px;
}

html,
body {
  background-color: #0b0f17;
  color: #f5f6f8;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* v3: NO document-level overflow-x clipping. Each overflowing component is
     fixed at its source (cart/checkout columns, breadcrumbs, gallery, embeds);
     a defensive clip is re-added only for the specific containers that need it. */
}

h1, h2, h3, h4, h5, h6 {
  color: #f5f6f8;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a {
  color: #a78bfa;
}
a:hover,
a:focus-visible {
  color: #c4b5fd;
}

/* Visible focus treatment everywhere. v2 also covers plain :focus because
   the audit programmatically focuses controls and the quantity steppers had
   no :focus-visible match (outline: none). */
:focus-visible,
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* WooCommerce pages: restore dark surfaces, fonts, links, tables.   */
/* ---------------------------------------------------------------- */
.woocommerce,
.woocommerce-page,
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  color: #f5f6f8;
}

.woocommerce .woocommerce-cart-form,
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table_responsive tr td,
.woocommerce table.shop_table_responsive tr th,
.woocommerce .cart_totals,
.woocommerce .woocommerce-cart-totals,
#order_review,
.woocommerce-checkout-review-order,
.woocommerce-checkout-review-order-table,
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.woocommerce-checkout #payment,
.woocommerce-account .woocommerce,
.woocommerce-MyAccount-content,
.woocommerce-form,
.woocommerce-account form,
.woocommerce .woocommerce-Address,
.woocommerce .woocommerce-customer-details,
.woocommerce-order-details,
.woocommerce-order-details__title,
.woocommerce-customer-details address,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background-color: transparent;
  color: #f5f6f8;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
#order_review table.shop_table,
.woocommerce-checkout-review-order-table {
  border-color: rgba(255, 255, 255, 0.14);
  color: #f5f6f8;
}
.woocommerce table.shop_table thead th,
.woocommerce table.shop_table th {
  color: #f5f6f8;
}

.woocommerce-page a,
.woocommerce a {
  color: #a78bfa;
}
.woocommerce a:hover,
.woocommerce-page a:hover {
  color: #c4b5fd;
}

.woocommerce .price,
.woocommerce .woocommerce-Price-amount,
.woocommerce-Price-amount,
.woocommerce .order-total .woocommerce-Price-amount {
  color: #f5f6f8;
}

.woocommerce del .woocommerce-Price-amount,
.woocommerce del {
  color: rgba(245, 246, 248, 0.6);
}

.woocommerce .cart-empty,
.woocommerce .return-to-shop a.button,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
  background: #16181d;
  border-color: rgba(255, 255, 255, 0.14);
  color: #f5f6f8;
}
.woocommerce .woocommerce-message {
  border-top-color: #34d399;
  color: #d1fae5;
}
.woocommerce .woocommerce-message::before {
  color: #34d399;
}
.woocommerce .woocommerce-info {
  border-top-color: #a78bfa;
  color: #ede9fe;
}
.woocommerce .woocommerce-info::before {
  color: #a78bfa;
}
.woocommerce .woocommerce-error {
  border-top-color: #ff7a70;
  color: #ffd7d4;
}
.woocommerce .woocommerce-error::before {
  color: #ff7a70;
}

/* Form controls: dark fields, >= 16px, >= 44px touch on mobile. */
.woocommerce input.input-text,
.woocommerce textarea.input-text,
.woocommerce select,
.woocommerce input[type="email"],
.woocommerce input[type="text"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce .input-text,
.wp-block-search__input,
.rt-search-form__input,
.sl-newsletter input[type="email"],
.wp-block-post-comments-form input:not([type="submit"]),
.wp-block-post-comments-form textarea,
#comment,
#author,
#email,
#url,
.woocommerce-form-track-order input.input-text {
  background-color: #16181d;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f5f6f8;
  border-radius: 6px;
  padding: 0.625rem 0.75rem;
  font-size: 16px !important;
  min-height: 44px;
}
.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder,
.woocommerce .input-text::placeholder,
.wp-block-search__input::placeholder,
.rt-search-form__input::placeholder,
.sl-newsletter input[type="email"]::placeholder,
input[name="email"]::placeholder,
input[name="s"]::placeholder,
input[name="hp"]::placeholder,
.fc-input::placeholder,
.woocommerce-billing-fields input::placeholder,
.woocommerce-shipping-fields input::placeholder,
.woocommerce-additional-fields textarea::placeholder,
input[name="coupon_code"]::placeholder,
.fc-coupon__input::placeholder,
.woocommerce-form-track-order input::placeholder,
.wp-block-post-comments-form input::placeholder,
.wp-block-post-comments-form textarea::placeholder {
  color: rgba(245, 246, 248, 0.62) !important;
  opacity: 1;
}
.woocommerce select {
  min-height: 44px;
}

/* v2: checkout/radio inputs must not trigger iOS zoom (font-size < 16px is
   the trigger; size itself is unchanged). Honeypot is offscreen. */
input[type="checkbox"],
input[type="radio"],
input[name="hp"] {
  font-size: 16px !important;
}

/* Buttons: accessible purple, white text, >= 44px on mobile. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.checkout-button,
.woocommerce a.checkout-button,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.add_to_cart_button,
.woocommerce a.product_type_variable,
.woocommerce .checkout-button,
.fc-step__next-step,
.fc-step__save,
.fc-place-order,
.fc-checkout-steps button,
.wc-block-components-button,
.wp-block-post-comments-form input[type="submit"],
input#submit,
#submit {
  background-color: #7c3aed;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0 1.25em;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce .single_add_to_cart_button:hover,
.fc-step__next-step:hover,
.fc-step__save:hover,
.fc-place-order:hover,
.wp-block-post-comments-form input[type="submit"]:hover,
input#submit:hover {
  background-color: #6d28d9;
  color: #ffffff;
}

/* Checkout place-order: full-width and centered (no odd inline layout). */
.fc-place-order {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}
.fc-place-order .fc-place-order-button {
  width: 100%;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  font-size: 18px !important;
  line-height: 1.2;
}

/* Step transitions: disabled + wait cursor while the checkout moves on. */
.fc-step__next-step:disabled,
.fc-step__next-step[aria-busy="true"] {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

/* Success / availability is green only. */
.woocommerce .stock.in-stock,
.woocommerce .in-stock,
.woocommerce .available-on-backorder,
.wc-block-components-totals-item .wc-block-components-totals-coupon-link {
  color: #34d399;
}

/* Cart page specifics. */
.woocommerce-cart h1.hidden,
.woocommerce-checkout h1.hidden {
  display: block !important;
}
.woocommerce .cart_totals h2,
.woocommerce .woocommerce-cart-totals h2,
#order_review .woocommerce-checkout-review-order-table thead th {
  color: #f5f6f8;
}
.woocommerce .quantity .qty {
  min-height: 44px;
  width: 4.5em;
}
.woocommerce a.remove,
.woocommerce a.delete {
  color: #ff7a70 !important;
  font-size: 1.2rem;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  line-height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.woocommerce a.remove:hover,
.woocommerce a.delete:hover {
  background: #3a1414;
  color: #ffd7d4 !important;
}
.shipping-calculator-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Checkout progress: Fluid Checkout's "bars" mode renders the step names
   inside 5px bar segments (clipped by the plugin's own overflow:hidden).
   v3: hide the unreadable in-bar labels entirely and keep the clean bars;
   the "Step X of 4" count (`.fc-progress-bar__count`) is the readable label,
   and each visible step section still renders its own `.fc-step__substep-title`.
   The harness no longer excludes these elements from the text-clip check. */
.fc-progress-bar__steps .fc-progress-bar__step {
  font-size: 0 !important;
  line-height: 0 !important;
  color: #f5f6f8 !important;
  white-space: nowrap;
  overflow: hidden;
}
.fc-progress-bar__count {
  color: #f5f6f8;
  font-weight: 600;
}

/* v2: current checkout step - dark green fill with white text (5.48:1)
   instead of the theme's #00cc66 with near-white text (1.98:1). */
.fc-progress-bar__steps .fc-progress-bar__step.is-current {
  background-color: #047857 !important;
  color: #ffffff;
}
.fc-progress-bar__steps .fc-progress-bar__step.is-complete {
  background-color: #047857 !important;
}

/* v2: checkout "Change: ..." links and "Add coupon code" toggle are touch
   targets - give them >= 44px hit areas. */
.fc-step__substep-edit,
.expansible-section__toggle-plus {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
}

/* Checkout sticky header: keep content clear of it. */
body.woocommerce-checkout .fc-checkout-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
body.woocommerce-checkout .site-main,
body.woocommerce-checkout main,
body.woocommerce-checkout .woocommerce {
  scroll-margin-top: 72px;
}

/* Quantity stepper +/- buttons: 44x44 hit areas at every width. */
.rt-quantity {
  width: 178px !important;
  min-width: 178px;
}
.rt-quantity .input-text,
.rt-quantity input.qty,
.rt-quantity__input {
  width: 90px !important;
  margin-left: 44px;
}
.rt-quantity__button {
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
  min-height: 44px;
}

/* Touch targets >= 44px on small screens (audit findings). */
@media (max-width: 767px) {
  a.rt-cart-info,
  a.rt-menu-toggle,
  .rt-cart-info,
  .rt-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce a.product_type_variable,
  .woocommerce a.add_to_cart_button,
  .woocommerce select.orderby,
  a.js-slidepanel.has-body-color {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .woocommerce select.orderby,
  .woocommerce select {
    font-size: 16px !important;
  }

  /* v2: quantity stepper +/- buttons -> 44x44 hit areas. Container widens
     (44 + 90 + 44) and the input shifts right of the decrement button so
     the buttons no longer overlap the editable field. */
  .rt-quantity {
    width: 178px !important;
    min-width: 178px;
  }
  .rt-quantity .input-text,
  .rt-quantity input.qty,
  .rt-quantity__input {
    width: 90px !important;
    margin-left: 44px;
  }
  .rt-quantity__button {
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    min-height: 44px;
  }

  /* v2: blog search icon, slidepanel close bar, cart remove, order tracking. */
  .rt-search-form__icon {
    width: 44px;
    height: 44px;
  }
  a.rt-slidepanel__close {
    min-height: 44px;
  }
  .woocommerce a.delete {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Product gallery: stop slides pushing the page wider (audit: swiper overflow). */
.rt-product-images.rt-swiper-gallery,
.rt-swiper-gallery,
[class*="swiper-container"],
.swiper {
  overflow: hidden;
}

/* Embedded social posts must not blow out mobile viewports. */
.wp-block-embed iframe,
.wp-block-embed__wrapper iframe,
.instagram-media,
.instagram-media-rendered,
.twitter-tweet,
iframe[src*="instagram.com"],
iframe[src*="instagr.am"],
iframe[src*="facebook.com/plugins"] {
  max-width: 100% !important;
}
/* v2: raw <p><iframe> YouTube embeds on testimonials overflow at 560px.
   Keep 16:9 aspect when the width shrinks. */
p iframe,
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"] {
  max-width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* v2: Instagram fallback blockquotes render white cards with near-white
   caption text (1.66:1). Darken the card and use the dark-system palette. */
blockquote.instagram-media,
.instagram-media {
  background-color: #16181d !important;
  color: #f5f6f8 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px;
  min-width: 0;
  max-width: 100%;
}
blockquote.instagram-media p,
blockquote.instagram-media div,
blockquote.instagram-media span {
  background-color: transparent !important;
  color: #f5f6f8 !important;
}
blockquote.instagram-media a {
  background-color: transparent !important;
  color: #a78bfa !important;
}

/* v2: Fluid Checkout header cart link is a 185x38 touch target. */
.fc-checkout__cart-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* v2: blog category pills render white-on-white (1:1). Use the dark pill
   with the interactive purple text (7.72:1). */
.wp-block-post-terms.is-style-colored a,
.wp-block-post-terms.is-style-colored > span:not(.wp-block-post-terms__separator) {
  background-color: #16181d !important;
  color: #a78bfa !important;
}
.wp-block-post-terms.is-style-colored a:hover {
  color: #c4b5fd !important;
}

/* v2: cart count badge - black on the brand orange (#fd704f, 7.61:1)
   instead of white on orange (2.76:1). */
.rt-cart-info__badge,
.rt_cart_info_count,
.rt-wishlist-info__badge {
  background-color: #fd704f;
  color: #000000;
}
.rt-cart-info__badge .rt_cart_info_count {
  color: inherit;
}

/* Product page quantity input. */
.woocommerce div.quantity {
  min-height: 44px;
}

/* ================================================================ */
/* v3: Phase 3 corrective fixes (human-review remediation)          */
/* ================================================================ */

/* --- Breadcrumbs: wrap safely instead of clipping mid-word --- */
.rt-breadcrumb {
  overflow: visible !important;
}
.rt-breadcrumb__wrapper {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  white-space: normal;
}
.rt-breadcrumb__wrapper .bread-current,
.rt-breadcrumb__wrapper .item-current,
.rt-breadcrumb__wrapper a,
.rt-breadcrumb__wrapper span {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* --- Header/navigation: always the approved sans-serif family --- */
.site-header nav,
.site-header nav a,
header nav,
header nav a,
.rt-menu,
.rt-menu a,
.rt-menu li,
.rt-navigation a,
.menu a {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* --- Product header: match the storefront header typography (system
   stack instead of Inter) and keep focus rings visible. --- */
.single-product .site-header,
.single-product .site-header nav,
.single-product .site-header nav a,
.single-product .site-header .rt-menu,
.single-product .site-header .rt-menu a,
.single-product .site-header .rt-menu li,
.single-product .site-header a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}


@media (max-width:380px){
  header .logo img{height:22px;width:auto}
  header .btn{font-size:13.5px;padding:10px 14px}
}

/* --- Account routes are intentionally disabled (approved redirect to home);
       remove customer-facing account links from the header so customers are
       not routed to a page that silently shows the homepage. --- */
header a[href*="my-account"],
header a[href*="/account/"] {
  display: none !important;
}

/* --- Logo gallery (page 803): responsive grid, contain, consistent boxes --- */
body.page-id-803 .wp-block-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch;
}
body.page-id-803 .wp-block-gallery.has-nested-images .wp-block-image {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background: #0a0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-id-803 .wp-block-gallery.has-nested-images .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  aspect-ratio: 1 / 1;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 8px;
}

/* --- Blog sidebars: remove the fragmented Recent Products widget --- */
body.blog .widget_products,
body.single-post .widget_products,
body.blog .woocommerce.widget_products,
body.single-post .woocommerce.widget_products {
  display: none !important;
}
/* Compact "Shop Stickerlight" card injected into the blog sidebar by
   sl-dark-system.php (kept in sync in staging/). */
.sl-blog-shop-card {
  background: #16181d;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 24px;
}
.sl-blog-shop-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #f5f6f8;
  margin: 0 0 6px;
}
.sl-blog-shop-card__text {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(245, 246, 248, 0.72);
  margin: 0 0 14px;
}
.sl-blog-shop-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: #7c3aed;
  color: #ffffff !important;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.sl-blog-shop-card__link:hover {
  background: #6d28d9;
}

/* --- Cart: compact configuration list, min-width 0, no vertical char wrap --- */
.woocommerce-cart-form .rt-product-items,
.woocommerce-cart-form .rt-product-item {
  min-width: 0;
}
.woocommerce-cart-form .rt-product-item__thumbnail {
  flex: 0 0 auto;
}
.woocommerce-cart-form .rt-product-item__body,
.woocommerce-cart-form .rt-product-item__name,
.woocommerce-cart-form .product-subtotal {
  min-width: 0;
  max-width: 100%;
}
.woocommerce-cart-form dl.variation {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(245, 246, 248, 0.72);
  min-width: 0;
  max-width: 100%;
}
.woocommerce-cart-form dl.variation dt {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(245, 246, 248, 0.6);
  text-transform: none;
  margin: 0;
  padding: 0;
  float: none;
  clear: both;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.woocommerce-cart-form dl.variation dd {
  margin: 0 0 6px;
  padding: 0;
  float: none;
  clear: both;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.woocommerce-cart-form a.delete {
  white-space: nowrap;
  font-size: 0.95rem;
  width: auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  line-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
}

/* --- Checkout: order review must fit its column (theme fixed it at 450px) --- */
.rt-checkout-order-review,
.woocommerce-checkout-review-order,
#order_review,
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
  min-width: 0 !important;
  max-width: 100% !important;
}
.rt-checkout-order-review,
.woocommerce-checkout-review-order,
#order_review {
  width: 100% !important;
  float: none !important;
  box-sizing: border-box;
}
.woocommerce-checkout-review-order-table {
  width: 100% !important;
}
.woocommerce-checkout-review-order-table td {
  overflow-wrap: anywhere;
}
/* Stack checkout columns below 1150px so nothing is compressed off-screen. */
@media (min-width: 1000px) and (max-width: 1150px) {
  body.woocommerce-checkout .fc-inside,
  body:not(.has-checkout-must-login-notice) .fc-inside {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.has-checkout-column-layout--two_columns .fc-sidebar {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
  }
}

/* --- Order-summary configuration: compact summary lines + "View full
       options" disclosure (wired by sl-dark-system.php; the full Q&A stays
       accessible in the disclosure) --- */
.sl-options-summary {
  margin: 2px 0 6px;
  font-size: 14px;
  line-height: 1.5;
  min-width: 0;
  max-width: 100%;
}
.sl-options-summary__row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sl-options-summary__label {
  font-weight: 600;
  color: rgba(245, 246, 248, 0.92);
}
.sl-options-summary__value {
  color: rgba(245, 246, 248, 0.7);
}
.sl-options-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  color: #a78bfa;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
}
.sl-options-toggle:hover {
  color: #c4b5fd;
}
.sl-options-body {
  margin: 4px 0 8px;
}
.sl-options-body dl.variation {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(245, 246, 248, 0.75);
  min-width: 0;
  max-width: 100%;
}
.sl-options-body dl.variation dt {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(245, 246, 248, 0.6);
  text-transform: none;
  margin: 0;
  padding: 0;
  clear: both;
}
.sl-options-body dl.variation dd {
  margin: 0 0 6px;
  padding: 0;
  clear: both;
  overflow-wrap: anywhere;
}
.woocommerce-checkout-review-order-table .order-total,
.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
  color: #f5f6f8;
  font-weight: 700;
}

/* --- Payment wrapper readiness: only the selected gateway's box is shown;
       it displays a branded "Loading secure payment form…" placeholder behind
       the secure fields until the cross-origin iframe renders above it.
       sl-dark-system.php toggles .sl-pay-loading / .sl-pay-hidden and adds
       .sl-pay-unavailable after the timeout. --- */
.payment_box.sl-pay-hidden {
  display: none !important;
}
.payment_box.sl-pay-loading {
  position: relative;
  min-height: 140px;
}
.payment_box.sl-pay-loading::before {
  content: "Loading secure payment form…" !important;
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: rgba(245, 246, 248, 0.7);
  font-size: 14px;
  background: #16181d;
  border-radius: 8px;
  z-index: 0;
  text-align: center;
  padding: 0 16px;
}
.payment_box.sl-pay-loading iframe,
.payment_box.sl-pay-loading [id*="zoid"] {
  position: relative;
  z-index: 1;
}
.payment_box.sl-pay-unavailable::before {
  content: "The secure payment form is taking longer than expected. Refresh the page or choose another payment method." !important;
  color: #ffd7d4;
  font-weight: 600;
}

/* PayPal: its button renders in the place-order area (Fluid Checkout), not
   inside the payment box, so it is excluded from the loader above and gets
   this reassurance note next to the button instead. */
.sl-paypal-note {
  margin: 10px 0 0;
  padding: 10px 14px;
  background: #16181d;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: rgba(245, 246, 248, 0.8);
  font-size: 13px;
  line-height: 1.45;
}
.sl-paypal-note[hidden] {
  display: none;
}

/* --- Checkout reassurance line (printed by sl-dark-system.php and kept in
       place by JS across Fluid Checkout re-renders) --- */
.sl-checkout-reassurance {
  margin: 16px 0 8px;
  padding: 12px 16px;
  background: #16181d;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: rgba(245, 246, 248, 0.82);
  font-size: 14px;
  line-height: 1.5;
}
.sl-checkout-reassurance a {
  color: #a78bfa;
  font-weight: 600;
}

/* WooPayments logo-count badge ("+ 3") reads as part of the payment method
   title next to the radio; the store names each method explicitly. */
.payment-methods--logos-count {
  display: none !important;
}

/* --- Empty cart: compact branded empty-state card, no duplicate actions,
       footer clear of the viewport edge --- */
body.woocommerce-cart .cart-empty {
  background: #0a0c10;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 48px 24px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #f5f6f8;
  margin: 48px auto 16px;
  max-width: 560px;
}
body.woocommerce-cart .return-to-shop {
  text-align: center;
  margin: 8px 0 64px;
}
body.woocommerce-cart .return-to-shop a.button {
  display: inline-flex;
  min-height: 48px;
  padding: 0 28px;
}
body.woocommerce-cart:has(.cart-empty) .rt-back-to-button {
  display: none !important;
}
body.woocommerce-cart .site-wrapper {
  min-height: calc(100vh - 160px);
}
body.woocommerce-cart .site-checkout-footer {
  padding-bottom: 32px;
}
/* The WooPayments payment-method-messaging iframe renders tiny dark logos
   that vanish on the dark theme; it is replaced on the cart by a larger
   self-hosted badge row (.sl-cart-pay, injected by sl-dark-system.php). */
body.woocommerce-cart #payment-method-message {
  display: none !important;
}
.sl-cart-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px 16px;
  background: #16181d;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
}
.sl-cart-pay__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(245, 246, 248, 0.6);
  margin-right: 4px;
}
.sl-cart-pay .sl-cart-pay__logo,
.sl-cart-pay img.sl-cart-pay__logo {
  height: 32px !important;
  width: auto !important;
  max-width: 72px;
  border-radius: 4px;
}

/* --- Shop/search product cards: coherent cards, contain images, stable
       heights, hover/focus treatment, one column at 320px --- */
.rt-product {
  background: #0a0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rt-product:hover,
.rt-product:focus-within {
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.25);
}
.rt-product .rt-product__image-link,
.rt-product a:first-child {
  display: block;
  background: #16181d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  min-width: 0;
}
/* "Select options" overlay: readable dark backdrop; slides over the image
   bottom on hover (theme default). Always visible on touch sizes (no hover)
   and on keyboard focus so the affordance never disappears. */
.rt-products .rt-product.is-style-action-overlay .rt-product__action {
  background: rgba(10, 12, 16, 0.9);
  backdrop-filter: none;
  border-top-color: rgba(255, 255, 255, 0.18);
}
.rt-products .rt-product.is-style-action-overlay:focus-within .rt-product__action {
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 768px) {
  .rt-products .rt-product.is-style-action-overlay .rt-product__action {
    transform: translateY(0);
    opacity: 1;
  }
}
.woocommerce .rt-products .rt-product .rt-product__image-link img,
.rt-product .rt-product__image-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  aspect-ratio: 1 / 1;
  display: block;
  min-width: 0;
}
.rt-product .rt-product__body,
li.product .rt-product__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.rt-product .woocommerce-loop-product__title,
li.product .woocommerce-loop-product__title {
  min-height: 2.6em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.rt-product .button,
.rt-product .add_to_cart_button,
.rt-product a.product_type_variable,
.rt-product a.button {
  margin-top: auto;
}
@media (max-width: 340px) {
  .rt-products.products.grids,
  ul.products {
    grid-template-columns: 1fr !important;
  }
  ul.products li.product,
  .rt-products li.product {
    width: 100% !important;
    max-width: 100%;
  }
}

/* --- Contact + free-mockup pages: branded cards and spacing --- */
body.page-id-77 .entry-content .wp-block-columns {
  background: #16181d;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 32px;
  margin-top: 24px;
}
body.page-id-77 .entry-content .wp-block-button__link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.page-id-892 .entry-content > * {
  max-width: 720px;
}
body.page-id-892 .entry-content .wp-block-buttons {
  margin: 24px 0;
}
body.page-id-892 .entry-content .wp-block-button__link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.page-id-892 .entry-content h1.wp-block-heading {
  font-size: clamp(28px, 4vw, 40px);
}

/* --- Cart header primary navigation (injected by sl-dark-system.php) --- */
.sl-cart-nav {
  margin-left: 24px;
}
.sl-cart-nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sl-cart-nav a {
  color: rgba(245, 246, 248, 0.82);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.sl-cart-nav a:hover {
  color: #c4b5fd;
}
@media (max-width: 767px) {
  .sl-cart-nav {
    display: none;
  }
}

/* Long URLs/words in page copy must wrap instead of pushing the page wide. */
.entry-content p,
.entry-content a,
.entry-content li,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content td,
.entry-content th,
.wp-block-post-content p,
.wp-block-post-content a {
  overflow-wrap: anywhere;
}

/* Cloudflare Turnstile renders a fixed 300px widget on the comment form;
   contain it so it cannot overflow narrow viewports (third-party iframe). */
.cf-turnstile,
.cf-turnstile > div,
.cf-turnstile span,
.cf-turnstile iframe {
  max-width: 100% !important;
}
.cf-turnstile > div {
  overflow: clip !important;
}
p.form-submit {
  overflow-wrap: anywhere;
}

/* The theme's cart/checkout header renders its pipe separator as a stray
   full-width "|" row between the back link and the page title; remove it. */
.rt-header-checkout-separtor {
  display: none !important;
}

/* ================================================================ */
/* v4: Product page — homepage-style sticky blur header + nav       */
/* ================================================================ */

/* Outer header bar: sticky, blurred, 65px, homepage palette. */
.single-product .site-header {
  position: sticky !important;
  top: 0;
  z-index: 30;
  background: rgba(11, 15, 23, 0.85) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.single-product .site-header__main {
  background: transparent !important;
  border-bottom: 0 !important;
  min-height: 65px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Logo at homepage header size. */
.single-product .site-header .rt-logo img,
.single-product .site-header-mobile .rt-logo-mobile img {
  height: 30px;
  width: auto;
}

/* Horizontal menu: homepage header link styling, no underlines. */
.single-product .rt-menu.is-menu-horizontal > ul {
  align-items: center;
  gap: 24px;
}
.single-product .rt-menu.is-menu-horizontal > ul > li > a {
  font-size: 14px;
  font-weight: 600;
  color: #9aa7bd !important;
  text-decoration: none !important;
}
.single-product .rt-menu.is-menu-horizontal > ul > li > a:hover {
  color: #e6eaf1 !important;
}
.single-product .rt-menu.is-style-underline .menu-item a::after {
  display: none !important;
}

/* Menu column grows and right-aligns (homepage header pattern); the
   empty right column (cart icon was there) is removed entirely. */
.single-product .site-header__main .wp-block-column:nth-child(2) {
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
}
.single-product .site-header__main .wp-block-column:last-child {
  display: none !important;
}

/* First menu item ("Start an Order") becomes the gradient CTA and moves
   to the end of the row — matching the homepage header button position. */
.single-product .rt-menu.is-menu-horizontal > ul > li#menu-item-931 {
  order: 99;
}
.single-product .rt-menu.is-menu-horizontal > ul > li#menu-item-931 > a {
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
  color: #08111a !important;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 10px;
  white-space: nowrap;
}
.single-product .rt-menu.is-menu-horizontal > ul > li#menu-item-931 > a:hover {
  color: #08111a !important;
  filter: brightness(1.08);
}

/* Cart icon is redundant (Cart link is already in the menu). */
.single-product .rt-cart-info {
  display: none !important;
}

/* Mobile product header: same blurred navy bar; hamburger stays light. */
.single-product .site-header-mobile {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11, 15, 23, 0.85) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.single-product .site-header-mobile__main {
  background: transparent !important;
  min-height: 65px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.single-product .site-header-mobile .rt-cart-info {
  display: none !important;
}
.single-product .rt-menu-toggle span,
.single-product .rt-menu-toggle span::before,
.single-product .rt-menu-toggle span::after {
  background: #e6eaf1 !important;
}

/* Compact "Start Your Order" CTA injected into the mobile product header. */
.sl-product-mobile-cta {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
  color: #08111a !important;
  font-weight: 800;
  font-size: 13.5px;
  padding: 10px 16px;
  border-radius: 10px;
  white-space: nowrap;
  text-decoration: none;
}
.sl-product-mobile-cta:hover {
  color: #08111a !important;
  filter: brightness(1.08);
}

/* ================================================================ */
/* v4: Checkout — fill the page, soften the order-summary card      */
/* ================================================================ */

/* Checkout footer (rendered by Fluid Checkout once content is added)
   blends with the navy body and matches the homepage trust strip. */
.fc-checkout-footer {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.fc-checkout-footer__inner {
  display: block !important;
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 50px;
  text-align: center;
}
.sl-checkout-footer__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  font-size: 13.5px;
  color: #9aa7bd;
  margin-bottom: 10px;
}
.sl-checkout-footer__trust b {
  color: #e6eaf1;
  font-weight: 700;
}
.sl-checkout-footer__legal {
  font-size: 12.5px;
  color: #9aa7bd;
}
.sl-checkout-footer__legal a {
  color: #9aa7bd;
  text-decoration: none;
}
.sl-checkout-footer__legal a:hover {
  color: #e6eaf1;
}

/* ================================================================ */
/* v4: Product page body — two-column layout + CTA polish            */
/* ================================================================ */

/* The theme's single-product template stacks gallery above summary,
   leaving the right half of the page empty. Restore the intended
   two-column layout (gallery | summary), spanning the breadcrumb and
   the tab/related sections across the full width. */
@media (min-width: 901px) {
  .single-product .rt-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .single-product .rt-product .rt-breadcrumb,
  .single-product .rt-product .rt-product-sections {
    grid-column: 1 / -1;
  }
  .single-product .rt-product .rt-product-images,
  .single-product .rt-product .summary {
    min-width: 0;
  }
}

/* Price: one clear anchor at the top (the range covers every option),
   so the repeated variation price is hidden. */
.single-product .rt-product-price .price {
  font-size: 30px !important;
  font-weight: 800;
  color: #e6eaf1;
  letter-spacing: -0.3px;
}
.single-product .woocommerce-variation-price {
  display: none !important;
}

/* Variation option rows: readable labels, full-width stacked swatch
   buttons (no more uneven pill wrapping). */
.single-product table.variations .label {
  padding: 18px 0 8px;
}
.single-product table.variations .label label {
  font-size: 14.5px;
  font-weight: 700;
  color: #e6eaf1;
  line-height: 1.4;
}
.single-product table.variations td.value {
  padding-bottom: 4px;
}
.single-product .sl-vb-swatches {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.single-product .sl-vb-swatch {
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.35;
}
.single-product .sl-vb-swatch.active {
  background: rgba(34, 211, 238, 0.14);
  color: #22d3ee;
  border-color: rgba(34, 211, 238, 0.5);
}

/* Add to cart: a proper primary CTA beside the quantity control. */
.single-product .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.single-product .single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 56px !important;
  font-size: 17px !important;
  padding: 0 28px !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.22);
}

/* Product summary: the theme's WooCommerce width:48% resolves against the
   grid column, collapsing it to ~270px. Fill the column instead. */
.single-product .summary.entry-summary,
.single-product .rt-product-images {
  width: 100% !important;
}
.single-product table.variations {
  width: 100%;
}

/* The visually-hidden variation selects get min-width:60% (~719px) which
   spills past the viewport; keep them hidden and 1px. */
.single-product select.sl-vb-select {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Ensure the cyan glow survives the theme's box-shadow:none. */
.single-product .single_add_to_cart_button {
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.22) !important;
}