/*
 * TehranSpeaker semantic theme layer.
 *
 * This file intentionally loads after route-specific styles. It maps the
 * legacy color variables to stable surface/content roles and keeps dark-mode
 * corrections in one place.
 */

:root {
  color-scheme: light;
  --brand-navy: #002864;
  --brand-lime: #b6e30c;
  --brand-navy-ink: #061f38;
  --surface-page: #ffffff;
  --surface-card: #ffffff;
  --surface-raised: #f7f9fa;
  --surface-subtle: #f0f3f5;
  --surface-navigation: var(--brand-navy);
  --surface-control: #f3f6f8;
  --surface-control-hover: #e9eef1;
  --text-strong: #102a43;
  --text-body: #334e68;
  --text-muted: #5f7283;
  --text-on-brand: #f7fbff;
  --text-on-accent: #09213a;
  --border-subtle: #dce3e8;
  --border-control: #c8d3db;
  --content-heading-color: var(--brand-navy);
  --content-link-color: #315a7d;
  --content-link-hover-color: var(--brand-navy);
  --theme-accent: var(--brand-lime);
  --focus-ring: #6f8900;
  --state-danger: #c92b55;
  --state-danger-surface: #fff0f4;
  --state-success: #21762a;
  --state-success-surface: #eaf7eb;
  --state-warning: #a85f00;
  --state-warning-surface: #fff5e7;
  --state-info: #176a9b;
  --state-info-surface: #eaf4fa;
  --state-purple: #7442a8;
  --state-purple-surface: #f4edfb;
  --state-neutral: #526674;
  --state-neutral-surface: #edf1f3;
  --surface-overlay: rgb(0 20 40 / 0.56);
  --shadow-color: rgb(16 42 67 / 0.12);
  --shadow-soft: 0 14px 42px var(--shadow-color);
  --commerce-page: var(--surface-page);
  --commerce-panel: var(--surface-card);
  --commerce-raised: var(--surface-raised);
  --commerce-subtle: var(--surface-subtle);
  --commerce-control: var(--surface-control);
  --commerce-control-hover: var(--surface-control-hover);
  --commerce-navigation: var(--surface-navigation);
  --commerce-heading: var(--content-heading-color);
  --commerce-text: var(--text-body);
  --commerce-muted: var(--text-muted);
  --commerce-border: var(--border-subtle);
  --commerce-border-control: var(--border-control);
  --commerce-accent: var(--theme-accent);
  --commerce-on-navigation: var(--text-on-brand);
  --commerce-on-accent: var(--text-on-accent);
  --tooltip-background: #ffffff;
  --tooltip-border: #d7dfe4;
  --tooltip-text: #263846;
  --reading-text: #2f3d46;
  --reading-heading: #12344c;
  --reading-muted: #687983;
  --reading-link: #17618f;
  --reading-link-hover: #003f68;
  --reading-surface: #ffffff;
  --reading-surface-raised: #f5f8f9;
  --reading-border: #dbe4e8;
  --reading-separator: #d9e2e6;
  --reading-quote-surface: #f3f7f9;
  --reading-quote-border: #7897aa;
  --reading-code-surface: #edf2f4;
  --reading-code-text: #1d4358;
  --reading-table-head: #eaf0f3;
  --reading-table-row: #ffffff;
  --reading-table-row-alt: #f7f9fa;
  --reading-selection-background: #dceab4;
  --reading-selection-text: #102a43;
  --reading-font-size: 16px;
  --reading-line-height: 2.15;
  --reading-radius: 14px;
  --theme-motion-duration: 320ms;
  --theme-motion-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

body.dark {
  color-scheme: dark;
  --surface-page: #07121d;
  --surface-card: #0d1d29;
  --surface-raised: #132634;
  --surface-subtle: #192d3c;
  --surface-navigation: var(--brand-navy-ink);
  --surface-control: #152c3b;
  --surface-control-hover: #1b3748;
  --text-strong: #edf4f7;
  --text-body: #c8d4da;
  --text-muted: #92a4ae;
  --border-subtle: #29404f;
  --border-control: #365265;
  --content-heading-color: #edf4f7;
  --content-link-color: #9dcce8;
  --content-link-hover-color: #c6e4f2;
  --theme-accent: var(--brand-lime);
  --focus-ring: var(--brand-lime);
  --state-danger: #ff7597;
  --state-danger-surface: #3a1825;
  --state-success: #8dd697;
  --state-success-surface: #173421;
  --state-warning: #f2bd68;
  --state-warning-surface: #3a2a16;
  --state-info: #8ac9ee;
  --state-info-surface: #142f42;
  --state-purple: #c5a0e8;
  --state-purple-surface: #2c2039;
  --state-neutral: #b4c1c8;
  --state-neutral-surface: #253640;
  --surface-overlay: rgb(0 0 0 / 0.68);
  --shadow-color: rgb(0 0 0 / 0.32);
  --commerce-page: var(--surface-page);
  --commerce-panel: var(--surface-card);
  --commerce-raised: var(--surface-raised);
  --commerce-subtle: var(--surface-subtle);
  --commerce-control: var(--surface-control);
  --commerce-control-hover: var(--surface-control-hover);
  --commerce-navigation: var(--surface-navigation);
  --commerce-heading: var(--content-heading-color);
  --commerce-text: var(--text-body);
  --commerce-muted: var(--text-muted);
  --commerce-border: var(--border-subtle);
  --commerce-border-control: var(--border-control);
  --commerce-accent: var(--theme-accent);
  --commerce-on-navigation: var(--text-on-brand);
  --commerce-on-accent: var(--text-on-accent);
  --tooltip-background: var(--surface-raised);
  --tooltip-border: var(--border-control);
  --tooltip-text: #edf4f7;
  --reading-text: #c8d4da;
  --reading-heading: #edf4f7;
  --reading-muted: #92a4ae;
  --reading-link: #9dcce8;
  --reading-link-hover: #c6e4f2;
  --reading-surface: var(--surface-card);
  --reading-surface-raised: var(--surface-raised);
  --reading-border: var(--border-subtle);
  --reading-separator: var(--border-subtle);
  --reading-quote-surface: #102533;
  --reading-quote-border: #739cb2;
  --reading-code-surface: #050e15;
  --reading-code-text: #c5e0ec;
  --reading-table-head: #193246;
  --reading-table-row: #0d2130;
  --reading-table-row-alt: #132a3a;
  --reading-selection-background: #385566;
  --reading-selection-text: #ffffff;
  --reading-product-surface: var(--surface-card);
  --reading-product-border: var(--border-control);

  /* Compatibility mapping for existing theme components. */
  --body-bg: var(--surface-page);
  --text-color: var(--text-body);
  --white-dark: var(--surface-card);
  --black-white: var(--text-strong);
  --d9-secondary: var(--border-subtle);
  --d9-dark: var(--border-subtle);
  --d9-text-color-70: var(--border-subtle);
  --text-color-70-white: var(--text-muted);
  --secondary-dark: var(--surface-navigation);
  --white-secondary-dark: var(--surface-card);
  --f5-dark: var(--surface-raised);
  --f9-dark: var(--surface-raised);
  --f5-secondary: var(--surface-card);
  --f5-secondary-001: var(--surface-subtle);
  --white-body-bg: var(--surface-page);
  --product-simple-card-small-color: var(--text-body);

  background-color: var(--surface-page);
  color: var(--text-body);
}

/* 21st.dev Theme Button: calm native icon swap driven by the shared runtime. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 28px;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0 !important;
  border: 0;
  background: transparent;
  appearance: none;
  line-height: 0;
  color: var(--content-heading-color);
  cursor: pointer;
  overflow: visible;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}

.theme-toggle:focus:not(:focus-visible) {
  outline: none !important;
}

.theme-toggle__icons {
  display: grid;
  place-items: center;
}

.theme-toggle__icon {
  grid-area: 1 / 1;
  width: 15px;
  height: 15px;
  display: block;
  overflow: visible;
  transform-box: view-box;
  transform-origin: center;
  transition:
    opacity 180ms ease-out,
    transform 180ms ease-out;
}

.theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(-30deg) scale(0.82);
}

body.dark .theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(30deg) scale(0.82);
}

body.dark .theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Header alignment: cross-axis centering belongs to the shared flex rows. */
body #site-header .header-box .quick-access > ul {
  align-items: center;
}

body #site-header .header-box .quick-access > ul > li {
  min-height: 32px;
}

body #site-header .header-box .quick-access > ul > li:not(.header-action-separator)::after {
  display: none;
}

.header-action-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 0;
  box-sizing: border-box;
  width: 0;
  min-width: 0;
  min-height: 32px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  pointer-events: none;
}

.header-action-separator::before,
.header-action-separator::after {
  display: none !important;
}

.header-action-separator__line {
  display: block;
  flex: 0 0 2px;
  width: 2px;
  height: 18px;
  background: var(--text-on-brand);
  opacity: 0.22;
}

body #site-header .header-box .quick-access > ul > li.desktop-theme-switch-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding-inline: 12px 0;
  margin: 0;
}

#site-header .quick-access .cart-btn {
  gap: 8px;
  border-radius: 8px;
}

#site-header .quick-access .cart-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

#site-header .quick-access .cart-icon-stack {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 20px;
  transition: transform 160ms var(--theme-motion-ease);
}

#site-header .quick-access .cart-icon-stack > .icon-cart {
  display: block;
  margin: 0;
}

#site-header .quick-access .cart-count-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 17px;
  height: 17px;
  margin: 0 !important;
  padding: 0 4px;
  border: 2px solid var(--surface-navigation);
  border-radius: 999px;
  background: var(--theme-accent);
  color: #062a42;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transform-origin: center;
  transition:
    opacity 150ms var(--theme-motion-ease),
    transform 180ms var(--theme-motion-ease),
    visibility 150ms var(--theme-motion-ease);
}

#site-header .quick-access .cart-count-badge.is-empty {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.65);
}

@media (hover: hover) {
  #site-header .quick-access .cart-btn:hover .cart-icon-stack {
    transform: translateY(-1px);
  }
}

html:not(.theme-runtime-ready) #site-header .desktop-theme-control .theme-toggle[data-tooltip]::before,
html:not(.theme-runtime-ready) #site-header .desktop-theme-control .theme-toggle[data-tooltip]::after {
  position: absolute;
  z-index: 100001;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 160ms var(--theme-motion-ease),
    transform 180ms var(--theme-motion-ease),
    visibility 160ms var(--theme-motion-ease);
}

html:not(.theme-runtime-ready) #site-header .desktop-theme-control .theme-toggle[data-tooltip]::before {
  content: "";
  top: calc(100% + 2px);
  left: 50%;
  border: 5px solid transparent;
  border-bottom-color: var(--tooltip-background);
  transform: translate(-50%, -3px);
}

html:not(.theme-runtime-ready) #site-header .desktop-theme-control .theme-toggle[data-tooltip]::after {
  content: attr(data-tooltip);
  top: calc(100% + 12px);
  left: 50%;
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border: 1px solid var(--tooltip-border);
  border-radius: 8px;
  background: var(--tooltip-background);
  color: var(--tooltip-text);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  direction: rtl;
  transform: translate(-50%, -3px);
}

@media (hover: hover) {
  html:not(.theme-runtime-ready) #site-header .desktop-theme-control .theme-toggle[data-tooltip]:hover::before,
  html:not(.theme-runtime-ready) #site-header .desktop-theme-control .theme-toggle[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}

html:not(.theme-runtime-ready) #site-header .desktop-theme-control .theme-toggle[data-tooltip]:focus-visible::before,
html:not(.theme-runtime-ready) #site-header .desktop-theme-control .theme-toggle[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Source: assets/scss/components/_theme-runtime-tooltip.scss */
[data-tooltip]:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}

body.single-product .wbs-panel header .wbs-tooltip-trigger i {
  margin: 0;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
}

body.single-product .additional-panel li > button.simple-btn {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  color: inherit;
  font: inherit;
  cursor: inherit;
}

.wbs-tooltip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wbs-tooltip-trigger {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--surface-control);
  color: var(--content-link-color);
  font: inherit;
  line-height: 1;
  cursor: help;
  transition:
    background-color 160ms var(--theme-motion-ease),
    border-color 160ms var(--theme-motion-ease),
    color 160ms var(--theme-motion-ease);
}

.wbs-tooltip-trigger:hover {
  border-color: var(--content-link-color);
  background: var(--surface-control-hover);
  color: var(--content-link-hover-color);
}

.wbs-tooltip-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.wbs-tooltip-trigger i {
  margin: 0;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
}

#wbs-runtime-tooltip.wbs-tooltip {
  position: fixed;
  z-index: 100000;
  display: none;
  align-items: center;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  min-height: 30px;
  padding: 7px 10px 8px;
  border: 1px solid var(--tooltip-border);
  border-radius: 10px;
  background: var(--tooltip-background);
  color: var(--tooltip-text);
  direction: rtl;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: center;
  transition:
    opacity 180ms var(--theme-motion-ease),
    transform 180ms var(--theme-motion-ease);
}

#wbs-runtime-tooltip.wbs-tooltip::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 8px;
  height: 8px;
  border: solid var(--tooltip-border);
  border-width: 0 1px 1px 0;
  background: var(--tooltip-background);
  transform: rotate(45deg);
}

#wbs-runtime-tooltip.wbs-tooltip.top-side::before {
  bottom: -5px;
  left: calc(50% - 4px);
}

#wbs-runtime-tooltip.wbs-tooltip.bottom-side::before {
  top: -5px;
  left: calc(50% - 4px);
  transform: rotate(225deg);
}

#wbs-runtime-tooltip.wbs-tooltip.left-side::before {
  right: -5px;
  top: calc(50% - 4px);
  transform: rotate(-45deg);
}

#wbs-runtime-tooltip.wbs-tooltip.right-side::before {
  left: -5px;
  top: calc(50% - 4px);
  transform: rotate(135deg);
}

#wbs-runtime-tooltip.wbs-tooltip::after {
  content: none !important;
  display: none !important;
}

#wbs-runtime-tooltip.wbs-tooltip.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  #wbs-runtime-tooltip.wbs-tooltip {
    transition: none;
  }
}

/*
 * Commerce and customer-area semantic surfaces.
 *
 * Checkout and dashboard bundles predate the shared theme layer and contain
 * literal light colors. These selectors load last so those routes consume the
 * same surface, content, border, state, and brand roles as the rest of the UI.
 */
body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info) {
  background: var(--commerce-page);
  color: var(--commerce-text);
}

body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info)
  :where(input, select, textarea) {
  border-color: var(--commerce-border-control);
  background-color: var(--commerce-control);
  color: var(--commerce-text);
}

body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info)
  :where(input, select, textarea)::placeholder {
  color: var(--commerce-muted);
  opacity: 1;
}

body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info)
  :where(input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--focus-ring);
}

body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info)
  .select2-container--default
  .select2-selection--single,
body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info)
  .select2-dropdown,
body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info)
  .select2-search__field {
  border-color: var(--commerce-border-control);
  background: var(--commerce-control);
  color: var(--commerce-text);
}

body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info)
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--commerce-text);
}

body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info)
  .select2-results__option {
  color: var(--commerce-text);
}

body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info)
  .select2-results__option--highlighted[aria-selected],
body:is(.woocommerce-checkout, .page-template-dashboard, .page-template-account-info)
  .select2-results__option--selected {
  background: var(--commerce-navigation);
  color: var(--commerce-on-navigation);
}

/* Checkout: fields, summary, payment methods, notices, and order receipt. */
body.woocommerce-checkout .woocommerce-checkout {
  color: var(--commerce-text);
}

body.woocommerce-checkout .woocommerce-checkout h2:not(#site-footer h2),
body.woocommerce-checkout .woocommerce-checkout #wc_checkout_add_ons .form-row > label {
  border: 1px solid var(--commerce-border);
  background: var(--commerce-raised);
  color: var(--commerce-heading);
}

body.woocommerce-checkout
  .woocommerce-checkout
  .checkout-fields
  .woocommerce-billing-fields__field-wrapper {
  border-color: var(--commerce-border);
  background: var(--commerce-panel);
}

body.woocommerce-checkout
  .wbs-checkout-form
  .form-row
  input:not([type="radio"]),
body.woocommerce-checkout
  .wbs-checkout-form
  .form-row
  .select2-container,
body.woocommerce-checkout
  .wbs-checkout-form
  .form-row
  .select2-selection__rendered,
body.woocommerce-checkout
  .woocommerce-checkout
  #order_review
  .coupon-inline-form
  input.input-text {
  border-color: var(--commerce-border-control);
  background: var(--commerce-control);
  color: var(--commerce-text);
}

body.woocommerce-checkout
  .wbs-checkout-form
  .form-row
  input[disabled="disabled"] {
  background: var(--commerce-subtle);
  color: var(--commerce-muted);
}

body.woocommerce-checkout
  .woocommerce-checkout
  #order_review
  .woocommerce-checkout-review-order-table
  tbody {
  border: 1px solid var(--commerce-border);
  background: var(--commerce-raised);
}

body.woocommerce-checkout
  .woocommerce-checkout
  #order_review
  .woocommerce-checkout-review-order-table
  tbody
  tr:not(:last-child) {
  border-bottom-color: var(--commerce-border);
}

body.woocommerce-checkout .woocommerce-checkout .wc_payment_methods li {
  border-color: var(--commerce-border);
  background: var(--commerce-panel);
}

body.woocommerce-checkout
  .woocommerce-checkout
  .wc_payment_methods
  li
  .payment_box {
  border: 1px solid var(--commerce-border-control);
  background: var(--commerce-navigation);
  color: var(--commerce-on-navigation);
}

body.woocommerce-checkout
  :where(input[type="radio"], input[type="checkbox"].partial_pay_through_wallet) {
  border-color: var(--commerce-border-control);
  background: var(--commerce-control);
  accent-color: var(--commerce-accent);
}

body.woocommerce-checkout
  :where(input[type="radio"], input[type="checkbox"].partial_pay_through_wallet):checked {
  border-color: var(--commerce-accent) !important;
  background: var(--commerce-accent) !important;
  box-shadow: inset 0 0 0 4px var(--commerce-panel) !important;
}

body.woocommerce-checkout input[type="radio"]:checked,
body.woocommerce-checkout input[type="checkbox"].partial_pay_through_wallet:checked {
  border-color: var(--commerce-accent) !important;
  background: var(--commerce-accent) !important;
  box-shadow: inset 0 0 0 4px var(--commerce-panel) !important;
}

body.woocommerce-checkout
  .coupon-toggle-row
  td
  .coupon-switch
  label
  .slider {
  background: var(--commerce-border-control);
}

body.woocommerce-checkout
  .coupon-toggle-row
  td
  .coupon-switch
  label
  .slider::before {
  background: var(--commerce-panel);
}

body.woocommerce-checkout
  .coupon-toggle-row
  td
  .coupon-switch
  label
  input:checked
  + .slider {
  background: var(--commerce-accent);
}

body.woocommerce-checkout .woocommerce-error {
  border: 1px solid var(--state-danger);
  background: var(--state-danger-surface);
  color: var(--state-danger);
}

body.woocommerce-checkout :where(.woocommerce-info, .woocommerce-message) {
  border: 1px solid var(--commerce-border);
  background: var(--commerce-raised);
  color: var(--commerce-text);
}

body.woocommerce-checkout
  .woocommerce-checkout
  .payment-terms
  .woocommerce-terms-and-conditions-wrapper
  a {
  color: var(--state-danger);
}

body.woocommerce-checkout
  .woocommerce-checkout
  .payment-terms
  button,
body.woocommerce-checkout
  .woocommerce-checkout
  #order_review
  .button.apply-coupon-btn {
  border: 1px solid var(--commerce-accent);
  background: var(--commerce-accent);
  color: var(--commerce-on-accent);
}

body.woocommerce-checkout
  .woocommerce-checkout
  .payment-terms
  button:focus-visible,
body.woocommerce-checkout
  .woocommerce-checkout
  #order_review
  .button.apply-coupon-btn:focus-visible {
  outline: 2px solid var(--commerce-heading);
  outline-offset: 3px;
}

body.woocommerce-checkout .woocommerce-order .order-received-panel,
body.page-template-account-info #site-main .order-received-panel {
  border-color: var(--commerce-border);
  background: var(--commerce-panel);
  color: var(--commerce-text);
}

body.woocommerce-checkout .woocommerce-order .order-received-panel header :is(h1, strong),
body.page-template-account-info #site-main .order-received-panel header :is(h1, strong),
body.woocommerce-checkout .woocommerce-order .order-received-panel .details > i,
body.page-template-account-info #site-main .order-received-panel .details > i {
  color: var(--commerce-heading);
}

.mywallet-tooltip {
  border: 1px solid var(--tooltip-border) !important;
  background: var(--tooltip-background) !important;
  color: var(--tooltip-text) !important;
  box-shadow: var(--shadow-soft);
}

.mywallet-tooltip::after {
  border-color: var(--tooltip-background) transparent transparent transparent !important;
}

@media (max-width: 991.98px) {
  body.woocommerce-checkout
    .woocommerce-checkout
    :is(.checkout-fields, .checkout-reviews)
    .payment-terms {
    border-top: 1px solid var(--commerce-border);
    background: var(--commerce-panel);
    box-shadow: 0 -12px 34px var(--shadow-color);
  }
}

/* Customer dashboard: navigation, panels, forms, tables, and status cards. */
body.page-template-dashboard {
  --secondary: var(--commerce-navigation);
  --success_green: var(--state-success-surface);
  --white-dark: var(--commerce-panel);
}

body.page-template-dashboard #site-main,
body.page-template-dashboard #contentPanel {
  background: var(--commerce-page);
  color: var(--commerce-text);
}

body.page-template-dashboard #site-main .toggleSidebar i {
  color: var(--commerce-accent);
}

body.page-template-dashboard #site-main .toggleSidebar:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

body.page-template-dashboard #site-main #sidebarPanel .sidebar,
body.page-template-dashboard #mobileSidebar #sidebarPanel .sidebar {
  background: var(--commerce-navigation);
  color: var(--commerce-on-navigation);
}

body.page-template-dashboard #site-main #sidebarPanel .sidebar .nav-items li,
body.page-template-dashboard #site-main #sidebarPanel .sidebar .nav-items li a,
body.page-template-dashboard #mobileSidebar #sidebarPanel .sidebar .nav-items li,
body.page-template-dashboard #mobileSidebar #sidebarPanel .sidebar .nav-items li a {
  color: var(--commerce-on-navigation);
}

body.page-template-dashboard
  :is(#site-main, #mobileSidebar)
  #sidebarPanel
  .sidebar
  .nav-items
  li:is(.active, :hover) {
  background: var(--commerce-accent);
  color: var(--commerce-on-accent);
}

body.page-template-dashboard
  :is(#site-main, #mobileSidebar)
  #sidebarPanel
  .sidebar
  .nav-items
  li:is(.active, :hover)
  a {
  color: var(--commerce-on-accent);
}

body.page-template-dashboard
  :is(#site-main, #mobileSidebar)
  #sidebarPanel
  .sidebar
  .nav-items
  li
  a.logout-item {
  color: var(--state-danger);
}

body.page-template-dashboard
  #site-main
  #contentPanel
  .wbs-panel-box
  > h2 {
  color: var(--commerce-heading);
}

body.page-template-dashboard
  #site-main
  #contentPanel
  .wbs-panel-box
  .wbs-panel {
  border: 1px solid var(--commerce-border);
  background: var(--commerce-panel);
  color: var(--commerce-text);
}

body.page-template-dashboard
  #site-main
  #contentPanel
  .wbs-panel-box
  .wbs-panel
  hr {
  border-top-color: var(--commerce-border);
}

body.page-template-dashboard
  #site-main
  #contentPanel
  .wbs-panel-box
  .wbs-panel
  .panel-icon {
  color: var(--commerce-border);
}

body.page-template-dashboard #site-main #contentPanel .top-bar .user {
  color: var(--commerce-text);
}

body.page-template-dashboard #site-main #contentPanel .top-bar .user i {
  background: var(--commerce-raised);
  color: var(--commerce-heading);
}

body.page-template-dashboard #site-main #contentPanel .top-bar .today,
body.page-template-dashboard
  #site-main
  #contentPanel
  :where(.dashboard-form input, .dashboard-form select) {
  background: var(--commerce-control);
  color: var(--commerce-text);
}

body.page-template-dashboard #site-main #contentPanel .top-bar .today span,
body.page-template-dashboard #site-main #contentPanel table thead {
  background: var(--commerce-navigation);
  color: var(--commerce-on-navigation);
}

body.page-template-dashboard
  #site-main
  #contentPanel
  table:not(.no-tr-bg)
  tbody
  tr:nth-child(2n),
body.page-template-dashboard
  #site-main
  #contentPanel
  .order-details-panel
  .order-items-table,
body.page-template-dashboard
  #site-main
  #contentPanel
  .wbs-items-p:not(.all-has-bg)
  > ul:nth-child(odd),
body.page-template-dashboard
  #site-main
  #contentPanel
  .wbs-items-p.all-has-bg
  > ul {
  background: var(--commerce-raised);
}

body.page-template-dashboard
  #site-main
  #contentPanel
  .account-form
  :where(input, select),
body.page-template-dashboard
  #site-main
  #contentPanel
  .account-form
  .select2-selection--single {
  border-color: var(--commerce-border-control);
  background: var(--commerce-control);
  color: var(--commerce-text);
}

body.page-template-dashboard
  #site-main
  #contentPanel
  :where(.order-items-table td ul, .order-items-table td ul li::before, .wbs-items-p li ul, .order-details-panel li::before) {
  color: var(--commerce-heading);
}

body.page-template-dashboard .wbs-dashboard-badge {
  border: 1px solid currentColor;
  background: var(--commerce-raised);
  color: var(--commerce-text);
}

body.page-template-dashboard :where(.green-bg, .green-status) {
  background: var(--state-success-surface);
  color: var(--state-success);
}

body.page-template-dashboard :where(.orange-bg, .orange-status) {
  background: var(--state-warning-surface);
  color: var(--state-warning);
}

body.page-template-dashboard :where(.blue-bg, .blue-status) {
  background: var(--state-info-surface);
  color: var(--state-info);
}

body.page-template-dashboard :where(.purple-bg, .purple-status) {
  background: var(--state-purple-surface);
  color: var(--state-purple);
}

body.page-template-dashboard :where(.black-bg, .black-status) {
  background: var(--state-neutral-surface);
  color: var(--state-neutral);
}

body.page-template-dashboard :where(.red-bg, .red-status) {
  background: var(--state-danger-surface);
  color: var(--state-danger);
}

body.page-template-dashboard :where(.blue-color, .wbsMessage.info) {
  color: var(--state-info);
}

body.page-template-dashboard .wbsMessage.error {
  color: var(--state-danger);
}

body.page-template-dashboard .wbsMessage.success {
  color: var(--state-success);
}

/* Product detail semantic surfaces. Product media remains intentionally untouched. */
body.dark.single-product {
  --product-detail-surface: #10242e;
  --product-detail-raised: #172d38;
  --product-detail-subtle: #1d3540;
  --product-detail-control-hover: #24414c;
  --product-detail-border: #2b4551;
  --product-detail-border-strong: #3a5662;
  --product-detail-text: #d4e0e4;
  --product-detail-text-strong: #f0f5f7;
  --product-detail-text-muted: #9fb1b9;
  --product-detail-navigation: #0a2230;
}

body.dark.single-product .product-panel .details-p {
  border-bottom-color: var(--product-detail-border) !important;
}

body.dark.single-product .primary-attrs > small,
body.dark.single-product .primary-attrs .attrs-table .item a,
body.dark.single-product .primary-attrs .attrs-table .item span {
  color: var(--product-detail-text);
}

body.dark.single-product .primary-attrs .attrs-table .item {
  background: var(--product-detail-raised);
  border: 1px solid transparent;
}

body.dark.single-product .primary-attrs .attrs-table .item strong {
  color: var(--product-detail-text-strong);
}

body.dark.single-product .purchase-panel {
  background: var(--product-detail-surface);
  border: 1px solid var(--product-detail-border);
  border-radius: 12px;
}

body.dark.single-product .purchase-panel .variations,
body.dark.single-product .purchase-panel .sku-panel {
  background: var(--product-detail-navigation);
  border: 1px solid var(--product-detail-border);
}

body.dark.single-product .purchase-panel .variation-box .title,
body.dark.single-product .purchase-panel .price-panel,
body.dark.single-product .purchase-panel .sku-panel {
  color: var(--product-detail-text);
}

body.dark.single-product .purchase-panel .variation-box .title strong,
body.dark.single-product .purchase-panel .price-panel ins {
  color: var(--product-detail-text-strong);
}

body.dark.single-product .purchase-panel .variation-box .title a {
  background: var(--product-detail-raised);
  color: var(--product-detail-text);
  border: 1px solid var(--product-detail-border);
}

body.dark.single-product .purchase-panel .variation-box .title a:hover {
  background: var(--product-detail-control-hover);
  color: var(--product-detail-text-strong);
}

body.dark.single-product .purchase-panel .variation-box.included {
  border-top-color: var(--product-detail-border);
}

body.dark.single-product .purchase-panel .no-stock-panel span {
  background: var(--product-detail-raised);
  color: var(--product-detail-text);
}

body.dark.single-product .claim-btn,
body.dark.single-product .test-headphone {
  background: var(--product-detail-raised) !important;
  border-color: var(--product-detail-border-strong) !important;
  color: var(--product-detail-text) !important;
}

body.dark.single-product .claim-btn:hover,
body.dark.single-product .test-headphone:hover {
  background: var(--product-detail-control-hover) !important;
  color: var(--product-detail-text-strong) !important;
}

body.dark.single-product .purchase-panel .add-to-cart-box {
  background: var(--product-detail-surface);
  border-top: 1px solid var(--product-detail-border);
  box-shadow: none;
}

body.dark.single-product .additional-panel ul li {
  background: var(--product-detail-raised);
  border-color: var(--product-detail-border-strong);
  color: var(--product-detail-text-strong);
}

body.dark.single-product .additional-panel ul li a,
body.dark.single-product .additional-panel ul li i {
  color: inherit;
}

body.dark.single-product .additional-panel ul li.favorite-btn {
  border-color: var(--product-detail-border-strong);
}

body.dark.single-product .additional-panel ul li.favorite-btn i {
  color: var(--product-detail-text-strong);
}

body.dark.single-product .additional-panel ul li.favorite-btn.added {
  background: var(--product-detail-navigation);
  border-color: var(--theme-accent);
}

body.dark.single-product .additional-panel ul li.favorite-btn.added i {
  color: var(--theme-accent);
}

body.dark.single-product .product-content .tab-panel {
  background: var(--surface-page);
  border-bottom-color: var(--product-detail-border);
}

body.dark.single-product .product-content .tab-panel .tabs {
  background: var(--product-detail-navigation);
  border: 1px solid var(--product-detail-border);
}

body.dark.single-product .product-content .tab-panel .tabs .item {
  color: var(--product-detail-text-muted);
}

body.dark.single-product .product-content .tab-panel .tabs .item.active {
  color: var(--theme-accent);
}

body.dark.single-product .product-content .tab-panel .tabs .item:not(:last-child)::after {
  background: var(--product-detail-border-strong);
}

body.dark.single-product .product-content .tab-content > header h2 {
  color: var(--product-detail-text-strong);
}

body.dark.single-product #productAttributes .content {
  background: var(--product-detail-surface);
  border: 1px solid var(--product-detail-border);
}

body.dark.single-product #productAttributes #wbsAttributeGroup > ul > li {
  background: var(--product-detail-raised);
  border: 1px solid var(--product-detail-border);
}

body.dark.single-product #productAttributes #wbsAttributeGroup > ul > li > strong {
  color: var(--product-detail-text-strong);
}

body.dark.single-product #productAttributes .attr-table .title {
  background: var(--product-detail-subtle) !important;
  color: var(--product-detail-text);
}

body.dark.single-product #productAttributes .attr-table .value {
  background: var(--product-detail-navigation) !important;
  color: var(--product-detail-text-strong);
}

body.dark.single-product #productAttributes:not(.open) .content::before {
  background-image: linear-gradient(
    to top,
    var(--surface-page),
    transparent 35%
  );
}

body.dark.single-product #productDescription .content-p {
  background: var(--product-detail-surface);
  border-color: var(--product-detail-border);
  color: var(--product-detail-text);
}

body.dark.single-product #productDescription .content-p :where(h2, h3, h4, strong) {
  color: var(--product-detail-text-strong);
}

body.dark.single-product #productDescription .content-p :where(p, li) {
  color: var(--product-detail-text);
}

body.dark.single-product #productFAQ .content {
  color: var(--product-detail-text);
}

body.dark.single-product .product-content .tab-content .load-more {
  background: var(--product-detail-raised);
  border: 1px solid var(--product-detail-border);
  color: var(--theme-accent);
}

/* Mega-menu hierarchy for dark mode, including fixed-color brand captions. */
:root {
  --product-variant-surface: #f5f7f8;
  --product-variant-option-surface: #ffffff;
  --product-variant-border: #d6e0e4;
  --product-variant-text: #17313d;
  --product-variant-muted: #60747e;
  --product-variant-link-surface: #e8f2f7;
  --product-variant-link-text: #075b8e;
  --product-variant-disabled-surface: rgba(255, 255, 255, 0.82);
  --product-variant-disabled-text: #982733;
  --product-id-surface: #f5f7f8;
  --product-id-border: #d6e0e4;
  --product-id-text: #17313d;
  --product-key-heading: #123f70;
  --search-outline: rgba(157, 204, 0, 0.62);
}

body.dark {
  --product-variant-surface: #10232d;
  --product-variant-option-surface: #172d38;
  --product-variant-border: #39535f;
  --product-variant-text: #f2f6f7;
  --product-variant-muted: #a8bac2;
  --product-variant-link-surface: #183541;
  --product-variant-link-text: #c6f24c;
  --product-variant-disabled-surface: rgba(7, 21, 28, 0.82);
  --product-variant-disabled-text: #ff9ca5;
  --product-id-surface: #10232d;
  --product-id-border: #39535f;
  --product-id-text: #f2f6f7;
  --product-key-heading: #f2f6f7;
  --search-outline: rgba(181, 236, 0, 0.76);
}

body #site-header .search-panel form::after {
  border: 2px solid var(--search-outline) !important;
  border-radius: 999px !important;
  inset: -2px !important;
  pointer-events: none;
  width: auto !important;
}

body.single-product #site-main .purchase-panel .variations {
  background: var(--product-variant-surface) !important;
  color: var(--product-variant-text) !important;
}

body.single-product #site-main .purchase-panel .variations .variation-box,
body.single-product #site-main .purchase-panel .variations .variation-box .title,
body.single-product #site-main .purchase-panel .variations .variation-box .title strong {
  color: var(--product-variant-text) !important;
}

body.single-product #site-main .purchase-panel .variations .variation-box .title a {
  background: var(--product-variant-link-surface) !important;
  color: var(--product-variant-link-text) !important;
}

body.single-product #site-main .purchase-panel .variations .variation-box .title a:hover {
  background: var(--product-variant-link-text) !important;
  color: var(--product-variant-surface) !important;
}

body.single-product #site-main .purchase-panel .variations .variation-box .thumbs ul li {
  background: var(--product-variant-option-surface) !important;
  border-color: var(--product-variant-border) !important;
  color: var(--product-variant-text) !important;
}

body.single-product #site-main .purchase-panel .variations .variation-box .thumbs ul li.active {
  border-color: var(--secondary) !important;
}

body.single-product #site-main .purchase-panel .variations .variation-box .thumbs ul li .outstock {
  background: var(--product-variant-disabled-surface) !important;
  color: var(--product-variant-disabled-text) !important;
}

body.single-product #site-main .purchase-panel .variations .content-box .variation-box.included {
  border-color: var(--product-variant-border) !important;
}

body.single-product #site-main .purchase-panel .sku-panel {
  background: var(--product-id-surface) !important;
  border: 1px solid var(--product-id-border) !important;
  color: var(--product-id-text) !important;
}

body.single-product #site-main .purchase-panel .sku-panel span,
body.single-product #site-main .purchase-panel .sku-panel i {
  color: var(--product-id-text) !important;
}

body.single-product #site-main .primary-attrs > small {
  color: var(--product-key-heading) !important;
  font-size: 16px !important;
  font-variation-settings: "wght" 400;
  line-height: 1.6;
}

body.dark {
  --mega-menu-surface: #142832;
  --mega-menu-raised: #1b333e;
  --mega-menu-border: #304a55;
  --mega-menu-text: #e7eef1;
  --mega-menu-muted: #b6c5cb;
}

body.dark #main-menu-panel .mega-menu-panel .mega-menu,
body.dark #main-menu-panel .sub-menu.sample-menu {
  background: var(--mega-menu-surface);
  border: 1px solid var(--mega-menu-border);
  border-top: 0;
  box-shadow: none;
}

body.dark #main-menu-panel .mega-menu .item-panel > strong {
  color: var(--mega-menu-text);
  border-bottom-color: var(--mega-menu-border);
}

body.dark #main-menu-panel .mega-menu .item-panel .items a,
body.dark #main-menu-panel .sub-menu.sample-menu a {
  color: var(--mega-menu-muted);
}

body.dark #main-menu-panel .mega-menu .item-panel .items a:hover,
body.dark #main-menu-panel .sub-menu.sample-menu a:hover {
  color: var(--theme-accent);
}

body.dark #main-menu-panel .mega-menu .brand-items a {
  background: var(--mega-menu-raised) !important;
  border: 1px solid var(--mega-menu-border) !important;
  color: var(--mega-menu-text) !important;
}

body.dark #main-menu-panel .mega-menu .brand-items a strong {
  background: var(--mega-menu-raised) !important;
  border: 1px solid var(--mega-menu-border) !important;
  color: var(--mega-menu-text) !important;
}

body.dark #site-header #main-menu-panel .main-menu .mega-menu .brand-items a:hover {
  background: var(--mega-menu-surface) !important;
  border-color: var(--secondary) !important;
}

body.dark #site-header #main-menu-panel .main-menu .mega-menu .brand-items a:hover strong {
  background: var(--mega-menu-surface) !important;
  border-color: var(--secondary) !important;
  color: var(--mega-menu-text) !important;
}

body.dark #main-menu-panel .sub-menu.sample-menu a {
  border-bottom-color: var(--mega-menu-border);
}

body.dark #main-menu-panel .mega-menu-p {
  scrollbar-color: var(--mega-menu-border) transparent;
}

/* Shared loading palette for every legacy and current skeleton implementation. */
:root {
  --skeleton-surface: #f4f7f8;
  --skeleton-base: #e4eaed;
  --skeleton-highlight: #f9fbfc;
  --skeleton-border: #d4dee3;
}

body.dark {
  --skeleton-surface: #10242e;
  --skeleton-base: #18313b;
  --skeleton-highlight: #284852;
  --skeleton-border: #2b4651;
}

@keyframes amazing-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

body :is(
  .wbs-skeleton,
  .skeleton-box,
  .skeleton-shape,
  .skeleton-gradient,
  .top-slider-skeleton,
  .skeleton-line,
  .skeleton-title,
  .skeleton-banner,
  .skeleton-cta,
  .skeleton-banner-box,
  .skeleton-header-box,
  .skeleton-desc-box,
  .skeleton-icon-box,
  .skeleton-title-box,
  .skeleton-button-box,
  .skeleton-brand-box,
  .skeleton-product-image,
  .skeleton-product-title,
  .skeleton-product-subtitle,
  .skeleton-product-price,
  .skeleton-amazing,
  .skeleton-cat-box,
  .skeleton-cat-item,
  .skeleton-cat-mobile
) {
  background-color: var(--skeleton-base) !important;
  background-image: linear-gradient(
    100deg,
    var(--skeleton-base) 20%,
    var(--skeleton-highlight) 38%,
    var(--skeleton-base) 56%
  ) !important;
  background-size: 220% 100% !important;
  animation: amazing-skeleton-shimmer 1.6s infinite linear !important;
}

body :is(
  .product-skeleton-card,
  .skeleton-product-card,
  .nav-skeleton-box
) {
  background: var(--skeleton-surface) !important;
  border-color: var(--skeleton-border) !important;
}

body .wbs-skeleton::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body :is(
    .wbs-skeleton,
    .skeleton-box,
    .skeleton-shape,
    .skeleton-gradient,
    .top-slider-skeleton,
    .skeleton-line,
    .skeleton-title,
    .skeleton-banner,
    .skeleton-cta,
    .skeleton-banner-box,
    .skeleton-header-box,
    .skeleton-desc-box,
    .skeleton-icon-box,
    .skeleton-title-box,
    .skeleton-button-box,
    .skeleton-brand-box,
    .skeleton-product-image,
    .skeleton-product-title,
    .skeleton-product-subtitle,
    .skeleton-product-price,
    .skeleton-amazing,
    .skeleton-cat-box,
    .skeleton-cat-item,
    .skeleton-cat-mobile
  ) {
    background-image: none !important;
    animation: none !important;
  }
}

/* Semantic footer palette: brand navy in light mode, quiet charcoal-teal in dark mode. */
#site-footer {
  --footer-surface-base: #00244e;
  --footer-surface-feature: #20364a;
  --footer-surface-about: #001a38;
  --footer-surface-widgets: #00244e;
  --footer-surface-raised: #07335a;
  --footer-surface-bottom: #001a38;
  --footer-border: rgba(190, 215, 226, 0.18);
  --footer-text-strong: #f3f7f9;
  --footer-text: #dbe6eb;
  --footer-text-muted: #b8c8d0;
  --footer-accent: var(--theme-accent);

  background: var(--footer-surface-base);
  color: var(--footer-text);
}

body.dark #site-footer {
  --footer-surface-base: #071820;
  --footer-surface-feature: #172b35;
  --footer-surface-about: #091c25;
  --footer-surface-widgets: #071820;
  --footer-surface-raised: #102630;
  --footer-surface-bottom: #05131a;
  --footer-border: rgba(175, 202, 214, 0.16);
  --footer-text-strong: #edf3f5;
  --footer-text: #d1dde2;
  --footer-text-muted: #9fb2bb;
}

#site-footer .features {
  background: var(--footer-surface-feature);
  border-block: 1px solid var(--footer-border);
}

#site-footer .features .item i,
#site-footer .features .item p {
  color: var(--footer-text-strong);
}

#site-footer .features .go-top {
  background: var(--footer-surface-feature);
}

#site-footer .about-me {
  background: var(--footer-surface-about);
  border-bottom-color: var(--footer-border);
  filter: none;
}

#site-footer .about-me h1,
#site-footer .about-me h2 {
  color: var(--footer-text-strong);
}

#site-footer .about-me p {
  color: var(--footer-text);
}

#site-footer .about-me .load-more {
  background: linear-gradient(
    to bottom,
    transparent,
    var(--footer-surface-about) 72%
  );
}

#site-footer .widgets-panel {
  background: var(--footer-surface-widgets);
}

#site-footer .widgets-panel .widget-title h3 {
  color: var(--footer-accent);
}

#site-footer .widgets-panel .content .item,
#site-footer .widgets-panel .content .item a,
#site-footer .widgets-panel .content ul li a {
  color: var(--footer-text);
}

#site-footer .widgets-panel .content .item-content.address span {
  color: var(--footer-text-strong);
}

#site-footer .widgets-panel .content .item-content.address a {
  color: var(--footer-accent);
}

#site-footer .widgets-panel .content .item-content.numbers a:not(:last-child)::after {
  background: var(--footer-border);
}

#site-footer .widgets-panel a:hover,
#site-footer .copyright a:hover {
  color: var(--footer-accent);
}

#site-footer .copyright {
  background: var(--footer-surface-bottom);
  color: var(--footer-text-muted);
  border-top: 1px solid var(--footer-border);
}

#site-footer .copyright a,
#site-footer .copyright i {
  color: var(--footer-text);
}

@media (max-width: 767.98px) {
  #site-footer .widgets-panel .widget-group .widget .widget-title,
  #site-footer .widgets-panel .widget-group .widget .content {
    background: var(--footer-surface-raised);
  }
}

/*
 * Module styles compile the footer inside page-specific body selectors.
 * This dark-mode guard intentionally matches that specificity.
 */
body.dark #site-footer {
  background: var(--footer-surface-base) !important;
  color: var(--footer-text) !important;
}

body.dark #site-footer .features {
  background: var(--footer-surface-feature) !important;
  border-color: var(--footer-border) !important;
}

body.dark #site-footer .features .item i,
body.dark #site-footer .features .item p {
  color: var(--footer-text-strong) !important;
}

body.dark #site-footer .features .go-top {
  background: var(--footer-surface-feature) !important;
}

body.dark #site-footer .about-me {
  background: var(--footer-surface-about) !important;
  border-bottom-color: var(--footer-border) !important;
  filter: none !important;
}

body.dark #site-footer .about-me h1,
body.dark #site-footer .about-me h2 {
  color: var(--footer-text-strong) !important;
}

body.dark #site-footer .about-me p {
  color: var(--footer-text) !important;
}

body.dark #site-footer .widgets-panel {
  background: var(--footer-surface-widgets) !important;
}

body.dark #site-footer .widgets-panel .widget-title h3 {
  color: var(--footer-accent) !important;
}

body.dark #site-footer .widgets-panel .content .item,
body.dark #site-footer .widgets-panel .content .item a,
body.dark #site-footer .widgets-panel .content ul li a {
  color: var(--footer-text) !important;
}

body.dark #site-footer .copyright {
  background: var(--footer-surface-bottom) !important;
  color: var(--footer-text-muted) !important;
  border-top-color: var(--footer-border) !important;
}

body.dark #site-footer .copyright a,
body.dark #site-footer .copyright i {
  color: var(--footer-text) !important;
}

@media (max-width: 767.98px) {
  body.dark #site-footer .widgets-panel .widget-group .widget .widget-title,
  body.dark #site-footer .widgets-panel .widget-group .widget .content {
    background: var(--footer-surface-raised) !important;
  }
}

body.dark.single.single-post #site-main .post-main-panel .post-content .product-mini-item {
  background: var(--reading-product-surface);
  border: 1px solid var(--reading-product-border);
}

body.dark.single.single-post #site-main .post-main-panel .post-content .product-mini-item .title-box strong,
body.dark.single.single-post #site-main .post-main-panel .post-content .product-mini-item .title-box .more span {
  color: var(--text-strong);
}

body.dark.single.single-post #site-main .post-main-panel .post-content .product-mini-item .title-box .more span small {
  color: var(--text-muted);
}

/* Long-form editorial system for comfortable Persian reading. */
body.single.single-post #site-main .post-main-panel .post-title .title-box {
  border-bottom-color: var(--reading-border);
}

body.single.single-post #site-main .post-main-panel .post-title .title-box h1 {
  color: var(--reading-heading) !important;
  text-wrap: balance;
}

body.single.single-post #site-main .post-main-panel .post-content {
  color: var(--reading-text);
  font-size: var(--reading-font-size);
  line-height: var(--reading-line-height);
  text-rendering: optimizeLegibility;
}

body.single.single-post #site-main .post-main-panel .post-content::selection,
body.single.single-post #site-main .post-main-panel .post-content *::selection {
  background: var(--reading-selection-background);
  color: var(--reading-selection-text);
}

body.single.single-post #site-main .post-main-panel .post-content p {
  margin-bottom: 1.25em !important;
  color: var(--reading-text);
  line-height: inherit;
  text-align-last: right;
}

body.single.single-post #site-main .post-main-panel .post-content h2,
body.single.single-post #site-main .post-main-panel .post-content h3,
body.single.single-post #site-main .post-main-panel .post-content h4,
body.single.single-post #site-main .post-main-panel .post-content h5,
body.single.single-post #site-main .post-main-panel .post-content h6,
body.single.single-post #site-main .post-main-panel .post-content h2 strong,
body.single.single-post #site-main .post-main-panel .post-content h3 strong,
body.single.single-post #site-main .post-main-panel .post-content h4 strong,
body.single.single-post #site-main .post-main-panel .post-content h5 strong,
body.single.single-post #site-main .post-main-panel .post-content h6 strong {
  color: var(--reading-heading) !important;
  font-variation-settings: "wght" 600 !important;
  text-wrap: pretty;
}

body.single.single-post #site-main .post-main-panel .post-content h2 {
  margin-top: 1.9em !important;
  margin-bottom: 0.65em !important;
  font-size: 23px !important;
  line-height: 1.75 !important;
}

body.single.single-post #site-main .post-main-panel .post-content h3 {
  margin-top: 1.65em !important;
  margin-bottom: 0.6em !important;
  font-size: 20px !important;
  line-height: 1.8 !important;
}

body.single.single-post #site-main .post-main-panel .post-content h4,
body.single.single-post #site-main .post-main-panel .post-content h5,
body.single.single-post #site-main .post-main-panel .post-content h6 {
  margin-top: 1.45em !important;
  margin-bottom: 0.55em !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
}

body.single.single-post #site-main .post-main-panel .post-content > strong,
body.single.single-post #site-main .post-main-panel .post-content p strong {
  color: var(--reading-heading);
}

body.single.single-post #site-main .post-main-panel .post-content a:not(.wbs-button) {
  color: var(--reading-link);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body.single.single-post #site-main .post-main-panel .post-content a:not(.wbs-button):hover {
  color: var(--reading-link-hover);
}

body.single.single-post #site-main .post-main-panel .post-content ul,
body.single.single-post #site-main .post-main-panel .post-content ol {
  margin-block: 0.75em 1.5em !important;
  padding-inline-start: 1.65em !important;
  color: var(--reading-text);
}

body.single.single-post #site-main .post-main-panel .post-content li {
  margin-bottom: 0.45em;
  line-height: 2;
}

body.single.single-post #site-main .post-main-panel .post-content li::marker {
  color: var(--theme-accent);
}

body.single.single-post #site-main .post-main-panel .post-content blockquote {
  margin: 1.75em 0;
  padding: 16px 20px;
  border: 1px solid var(--reading-border);
  border-inline-start: 3px solid var(--reading-quote-border);
  border-radius: var(--reading-radius);
  background: var(--reading-quote-surface);
  color: var(--reading-text);
}

body.single.single-post #site-main .post-main-panel .post-content blockquote p:last-child {
  margin-bottom: 0 !important;
}

body.single.single-post #site-main .post-main-panel .post-content code {
  padding: 2px 6px;
  border: 1px solid var(--reading-border);
  border-radius: 6px;
  background: var(--reading-code-surface);
  color: var(--reading-code-text);
  direction: ltr;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  font-size: 0.9em;
}

body.single.single-post #site-main .post-main-panel .post-content pre {
  max-width: 100%;
  margin-block: 1.75em;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--reading-border);
  border-radius: var(--reading-radius);
  background: var(--reading-code-surface);
  color: var(--reading-code-text);
  direction: ltr;
  line-height: 1.8;
  text-align: left;
  user-select: text;
}

body.single.single-post #site-main .post-main-panel .post-content pre code {
  padding: 0;
  border: 0;
  background: transparent;
}

body.single.single-post #site-main .post-main-panel .post-content hr {
  margin-block: 2em !important;
  border: 0 !important;
  border-top: 1px solid var(--reading-separator) !important;
}

body.single.single-post #site-main .post-main-panel .post-content table {
  border: 1px solid var(--reading-border);
  border-spacing: 0;
  border-collapse: separate;
  border-radius: var(--reading-radius);
  color: var(--reading-text);
}

body.single.single-post #site-main .post-main-panel .post-content table thead,
body.single.single-post #site-main .post-main-panel .post-content table thead tr,
body.single.single-post #site-main .post-main-panel .post-content table th {
  border-color: var(--reading-border);
  background: var(--reading-table-head);
  color: var(--reading-heading);
  font-variation-settings: "wght" 600;
}

body.single.single-post #site-main .post-main-panel .post-content table tbody,
body.single.single-post #site-main .post-main-panel .post-content table tbody tr,
body.single.single-post #site-main .post-main-panel .post-content table td {
  border-color: var(--reading-border);
  background: var(--reading-table-row);
  color: var(--reading-text);
}

body.single.single-post #site-main .post-main-panel .post-content table tbody tr:nth-child(even) td {
  background: var(--reading-table-row-alt);
}

body.dark.archive #site-main .blog-title h1,
body.dark.page-template-blog #site-main .blog-title h1,
body.dark .blog-card .details h3,
body.dark .blog-card:hover .details h3,
body.dark .blog-row-post-card .details h2,
body.dark .blog-row-post-card .details h3,
body.dark .blog-row-post-card .details h3 a {
  color: var(--reading-heading) !important;
}

body.dark.archive #site-main .blog-title .description,
body.dark .blog-card .details p,
body.dark .blog-row-post-card .details p {
  color: var(--reading-text);
}

/* Dark TOC replaces the hard-coded light panel visible in article pages. */
body.dark .table-of-contents,
body.dark .table-of-contents.collapsed {
  border: 1px solid var(--reading-border);
  background: var(--reading-surface-raised);
  color: var(--reading-text);
}

body.dark.single.single-post #site-main .post-main-panel .post-content .table-of-contents .toc-header h2,
body.dark .table-of-contents .toc-toggle,
body.dark .table-of-contents .toc-level-2 a,
body.dark .table-of-contents .toc-level-3 a,
body.dark .table-of-contents ul li a {
  color: var(--reading-heading) !important;
}

body.single.single-post #site-main .post-main-panel .post-content .table-of-contents .toc-header h2 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}

body.single.single-post #site-main .post-main-panel .post-content .table-of-contents .toc-content {
  margin-top: 20px;
}

body.dark .table-of-contents ul li:not(:last-child)::after {
  height: 1px;
  border: 0;
  background: var(--reading-separator);
}

body.dark .table-of-contents ul li a:hover {
  color: var(--reading-link-hover) !important;
}

@media (max-width: 991.98px) {
  #site-header .quick-access > ul {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0 !important;
    list-style: none;
  }

  #site-header .quick-access > ul > li.theme-switch-item {
    margin: 0;
    padding: 0;
  }

  #site-header .quick-access > ul > li.header-action-separator {
    margin-inline: 3.5px !important;
  }

  #site-header .quick-access #onlineSupport {
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    margin: 0;
  }

  .theme-toggle {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .theme-toggle__icon {
    width: 27px;
    height: 27px;
  }

  body.single.single-post {
    --reading-font-size: 15.5px;
    --reading-line-height: 2.05;
  }

  body.single.single-post #site-main .post-main-panel .post-content p {
    text-align: right !important;
    text-align-last: auto;
  }

  body.single.single-post #site-main .post-main-panel .post-content h2 {
    margin-top: 1.65em !important;
    font-size: 20px !important;
  }

  body.single.single-post #site-main .post-main-panel .post-content h3 {
    margin-top: 1.5em !important;
    font-size: 18px !important;
  }

  body.single.single-post #site-main .post-main-panel .post-content h4,
  body.single.single-post #site-main .post-main-panel .post-content h5,
  body.single.single-post #site-main .post-main-panel .post-content h6 {
    font-size: 16px !important;
  }

  body.single.single-post #site-main .post-main-panel .post-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  body.single.single-post #site-main .post-main-panel .post-content blockquote,
  body.single.single-post #site-main .post-main-panel .post-content pre {
    padding: 14px;
    border-radius: 12px;
  }

  body.single.single-post #site-main .post-main-panel .post-content .table-of-contents {
    padding: 14px;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__icon,
  .wbs-tooltip,
  #site-header .quick-access .cart-icon-stack,
  #site-header .quick-access .cart-count-badge {
    transition-duration: 0.01ms !important;
  }
}