/* SarvTheme main.css — built from modules. Edit modules + run npm run build */

/* --- icons.css --- */
/**
 * SarvTheme Lucide icon base styles (local SVG, no icon font).
 */

.sarv-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	line-height: 0;
	vertical-align: middle;
	color: inherit;
}

.sarv-icon svg,
.sarv-icon .sarv-icon__svg,
.sarv-icon .st-inline-svg__graphic {
	width: 100%;
	height: 100%;
	display: block;
	stroke: currentColor;
	fill: none;
}

/* Prefer stroke icons; brand helpers may use fill paths. */
.sarv-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]) {
	/* keep explicit fills from brand SVGs when present */
}

.sarv-icon[aria-hidden="true"],
.st-inline-svg.sarv-icon[aria-hidden="true"] {
	pointer-events: none;
}

/* --- tokens.css --- */
/**
 * SarvTheme design tokens — single source of truth for component bundles.
 * All component CSS must consume these custom properties; avoid hardcoded
 * colors, spacing, shadows and radii in component stylesheets.
 */
:root {
	/* ── Color ───────────────────────────────────────────────────── */
	--sarv-color-bg: #ffffff;
	--sarv-color-bg-muted: #f8f8f8;
	--sarv-color-border: #ededed;
	--sarv-color-text: #1a1a1a;
	--sarv-color-text-muted: #6b7280;
	--sarv-color-primary: var(--st-color-primary, #0d6efd);
	--sarv-color-danger: #dc3545;
	--sarv-color-success: #198754;
	--sarv-color-warning: #ffc107;
	--sarv-color-on-primary: #ffffff;

	/* ── Spacing ─────────────────────────────────────────────────── */
	--sarv-space-2xs: 0.125rem;
	--sarv-space-xs: 0.25rem;
	--sarv-space-sm: 0.5rem;
	--sarv-space-md: 0.75rem;
	--sarv-space-lg: 1rem;
	--sarv-space-xl: 1.5rem;
	--sarv-space-2xl: 2rem;
	--sarv-space-3xl: 2.5rem;

	/* ── Radius ──────────────────────────────────────────────────── */
	--sarv-radius-sm: 6px;
	--sarv-radius-md: 12px;
	--sarv-radius-lg: 24px;
	--sarv-radius-xl: 32px;
	--sarv-radius-pill: 999px;

	/* ── Shadow ──────────────────────────────────────────────────── */
	--sarv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--sarv-shadow-md: -6px 6px 74px rgba(0, 0, 0, 0.04);
	--sarv-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);

	/* ── Z-index ─────────────────────────────────────────────────── */
	--sarv-z-badge: 2;
	--sarv-z-actions: 5;
	--sarv-z-overlay: 10;

	/* ── Product card ────────────────────────────────────────────── */
	--sarv-card-bg: var(--sarv-color-bg);
	--sarv-card-border: var(--sarv-color-border);
	--sarv-card-radius: var(--sarv-radius-xl);
	--sarv-card-shadow: var(--sarv-shadow-md);
	--sarv-card-media-bg: var(--sarv-color-bg-muted);
	--sarv-card-media-radius: var(--sarv-radius-lg);
	--sarv-card-gap: var(--sarv-space-md);
}

/* --- main-base.css --- */
/**
 * SarvTheme – Main stylesheet.
 * Enqueued via inc/theme/Assets.php. Add WooCommerce overrides in same file or separate.
 */

html {
  /* Reserve scrollbar space so clientWidth stays stable during sticky transitions. */
  scrollbar-gutter: stable;
}

:root {
  --sarvtheme-font-sans: system-ui, -apple-system, sans-serif;
  --sarvtheme-color-text: #1a1a1a;
  --sarvtheme-color-bg: #fff;
  --sarvtheme-color-link: #0066cc;
  --sarvtheme-spacing: 1rem;
  /* Component tokens (may be overridden by Styles inline) */
  --st-radius-md: 10px;
  --st-radius-pill: 999px;
  --st-control-height: 44px;
  --st-control-px: 14px;
  --st-control-py: 10px;
  --st-btn-px: 16px;
  --st-btn-py: 10px;
  --st-focus-ring: 0 0 0 3px
    color-mix(in srgb, var(--st-color-primary, #0d6efd) 25%, transparent);
  --st-shadow-3d: 0 8px 0
    color-mix(in srgb, var(--st-color-primary, #0d6efd) 65%, #000 35%);
  /* Header Builder shared tokens */
  --st-primary: var(--st-color-primary, #0d6efd);
  --st-border-color: var(--st-border, #e5e7eb);
  --st-radius: var(--st-radius-md, 10px);
  --st-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --st-transition: 0.2s ease;
}

/* WordPress Admin Bar offset.
   Reusable token consumed by fixed/sticky/overlay headers (and top-anchored
   overlays) so the admin bar never covers them. CSS only — no JS, no page
   margin/padding. Zero when no admin bar, so logged-out layout is unchanged.
   Values mirror WordPress core: 32px desktop, 46px at <=782px, and 0 at
   <=600px where core switches the bar to position:absolute (it scrolls away,
   so a fixed header must not reserve space for it or a gap appears). */
body {
  --st-admin-bar-offset: 0px;
}

body.admin-bar {
  --st-admin-bar-offset: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --st-admin-bar-offset: 46px;
  }
}

@media screen and (max-width: 600px) {
  body.admin-bar {
    --st-admin-bar-offset: 0px;
  }
}

body.sarvtheme,
body {
  font-family: var(--st-body-font, var(--sarvtheme-font-sans));
  font-size: var(--st-body-size, 16px);
  font-weight: var(--st-body-weight, 400);
  line-height: var(--st-body-lh, 1.6);
  color: var(--st-text, var(--sarvtheme-color-text));
  background-color: var(--st-bg, var(--sarvtheme-color-bg));
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

a {
  color: var(--st-link, var(--sarvtheme-color-link));
}
a:hover {
  color: var(--st-link-hover, #0a58ca);
}

/* Layout: apply theme settings to main content Bootstrap container (--st-container-*). */
.site-main > .container {
  width: 100%;
  max-width: var(--st-container-max, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--st-container-padding, 16px);
  padding-right: var(--st-container-padding, 16px);
}

/* Sidebar layout utilities (opt-in: wrap content + sidebar in .st-layout-grid).
   direction:ltr keeps physical left/right stable under html[dir=rtl]. */
.st-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "content sidebar";
  gap: var(--sarv-space-xl, 1.5rem);
  align-items: start;
  direction: ltr;
}
html.st-sidebar-left .st-layout-grid {
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-areas: "sidebar content";
}
html.st-sidebar-none .st-layout-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content";
}
.st-layout-grid > .st-content,
.st-layout-grid > .st-sidebar {
  direction: rtl;
}
html[dir="ltr"] .st-layout-grid > .st-content,
html[dir="ltr"] .st-layout-grid > .st-sidebar {
  direction: ltr;
}
.st-content {
  grid-area: content;
  min-width: 0;
}
.st-sidebar {
  grid-area: sidebar;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sarv-space-lg, 1rem);
  position: sticky;
  top: calc(var(--st-admin-bar-offset, 0px) + var(--sarv-space-lg, 1rem));
}

@media (max-width: 991.98px) {
  .st-layout-grid,
  html.st-sidebar-left .st-layout-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "sidebar";
  }

  .st-sidebar {
    position: static;
  }
}

/* ----- Sidebar widgets (page + shop) — match account/checkout cards ----- */

.st-sidebar.widget-area {
  --st-widget-bg: var(--sarv-color-bg, #ffffff);
  --st-widget-border: var(--sarv-color-border, #ededed);
  --st-widget-radius: var(--sarv-radius-md, 12px);
  --st-widget-shadow: var(--sarv-shadow-md, -6px 6px 74px rgba(0, 0, 0, 0.04));
  --st-widget-text: var(--sarv-color-text, var(--st-text, #1a1a1a));
  --st-widget-muted: var(--sarv-color-text-muted, #6b7280);
  --st-widget-primary: var(--sarv-color-primary, var(--st-color-primary, #0d6efd));
  --st-widget-pad-x: 1.15rem;
  --st-widget-pad-y: 1rem;
}

.st-sidebar .widget {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--st-widget-bg);
  border: 1px solid var(--st-widget-border);
  border-radius: var(--st-widget-radius);
  box-shadow: var(--st-widget-shadow);
  color: var(--st-widget-text);
}

.st-sidebar .widget > *:not(.widget-title) {
  padding: var(--st-widget-pad-y) 0;
}

.st-sidebar .widget > .widget-title + * {
  padding-top: var(--st-widget-pad-y);
}

/* Nested block widgets (WP 6+) often wrap lists without a classic title. */
.st-sidebar .widget.widget_block > .wp-block-group,
.st-sidebar .widget.widget_block > .wp-block-heading,
.st-sidebar .widget.widget_block > ul,
.st-sidebar .widget.widget_block > ol,
.st-sidebar .widget.widget_block > p,
.st-sidebar .widget.widget_block > form,
.st-sidebar .widget.widget_block > div {
  margin: 0;
}

.st-sidebar .widget ul,
.st-sidebar .widget ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-sidebar .widget li {
  margin: 0;
  padding: 0;
}

.st-sidebar .widget li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--sarv-radius-sm, 6px);
  color: #747474;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.st-sidebar .widget li a:hover,
.st-sidebar .widget li a:focus-visible {
  color: var(--st-color-primary, #0d6efd);
  outline: none;
}

.st-sidebar .widget li.current-cat > a,
.st-sidebar .widget li.current-menu-item > a,
.st-sidebar .widget li.chosen > a,
.st-sidebar .widget li.is-active > a {
  color: var(--st-color-primary, #0d6efd);
  font-weight: 700;
}

.st-sidebar .widget .count,
.st-sidebar .widget .wp-block-categories .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--sarv-radius-pill, 999px);
  background: #f1f5f9;
  color: var(--st-widget-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.st-sidebar .widget li.current-cat > a .count,
.st-sidebar .widget li.chosen > a .count {
  background: color-mix(in srgb, var(--st-widget-primary) 14%, white);
  color: var(--st-widget-primary);
}

.st-sidebar .widget ul.children,
.st-sidebar .widget ul.sub-menu {
  margin-top: 0.15rem;
  padding-inline-start: 0.75rem;
}

.st-sidebar .widget select,
.st-sidebar .widget input[type="text"],
.st-sidebar .widget input[type="search"],
.st-sidebar .widget input[type="email"],
.st-sidebar .widget input[type="number"],
.st-sidebar .widget textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--st-widget-border);
  border-radius: var(--sarv-radius-sm, 6px);
  background: var(--st-widget-bg);
  color: var(--st-widget-text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
}

.st-sidebar .widget select:focus,
.st-sidebar .widget input:focus,
.st-sidebar .widget textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--st-widget-primary) 45%, var(--st-widget-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-widget-primary) 14%, transparent);
}

.st-sidebar .widget button,
.st-sidebar .widget .button,
.st-sidebar .widget input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto;
  margin: 0;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: var(--sarv-radius-sm, 6px);
  background: var(--st-widget-primary);
  color: var(--sarv-color-on-primary, #fff);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.st-sidebar .widget button:hover,
.st-sidebar .widget .button:hover,
.st-sidebar .widget input[type="submit"]:hover {
  filter: brightness(0.96);
  color: var(--sarv-color-on-primary, #fff);
}

/* WooCommerce layered nav / price filter */
.st-sidebar .widget_layered_nav ul li,
.st-sidebar .widget_product_categories ul li,
.st-sidebar .widget_price_filter .price_slider_amount {
  font-size: 0.925rem;
}

.st-sidebar .widget_price_filter .ui-slider {
  margin: 1rem 0 1.25rem;
  background: #e2e8f0;
  border: 0;
  border-radius: var(--sarv-radius-pill, 999px);
  height: 4px;
}

.st-sidebar .widget_price_filter .ui-slider .ui-slider-range {
  background: var(--st-widget-primary);
  border-radius: inherit;
}

.st-sidebar .widget_price_filter .ui-slider .ui-slider-handle {
  width: 1rem;
  height: 1rem;
  top: -6px;
  margin-inline-start: -0.5rem;
  border: 2px solid var(--st-widget-primary);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sarv-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
  cursor: pointer;
}

.st-sidebar .widget_price_filter .price_label {
  color: var(--st-widget-muted);
  font-size: 0.875rem;
}

.st-sidebar .widget_layered_nav_filters ul li a {
  color: var(--st-widget-muted);
}

.st-sidebar .widget_product_search .woocommerce-product-search,
.st-sidebar .widget_search .wp-block-search__inside-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.st-sidebar .widget_product_search .woocommerce-product-search .search-field,
.st-sidebar .widget_search .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
}

.st-sidebar .widget img {
  max-width: 100%;
  height: auto;
  border-radius: var(--sarv-radius-sm, 6px);
}

.st-sidebar .widget_shopping_cart .total,
.st-sidebar .widget_products .product_list_widget li,
.st-sidebar .widget_top_rated_products .product_list_widget li,
.st-sidebar .widget_recently_viewed_products .product_list_widget li,
.st-sidebar .widget_recent_reviews .product_list_widget li {
  border-color: var(--st-widget-border);
}

.st-sidebar .product_list_widget li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--st-widget-border);
}

.st-sidebar .product_list_widget li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.st-sidebar .product_list_widget li:first-child {
  padding-top: 0;
}

.st-sidebar .product_list_widget li img {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: cover;
  border-radius: var(--sarv-radius-sm, 6px);
  background: var(--sarv-color-bg-muted, #f8f8f8);
}

.st-sidebar .product_list_widget li a {
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--st-widget-text);
  font-weight: 600;
}

.st-sidebar .product_list_widget li a:hover {
  background: transparent;
  color: var(--st-widget-primary);
}

.st-sidebar .product_list_widget .amount,
.st-sidebar .product_list_widget .woocommerce-Price-amount {
  color: var(--st-widget-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Logo (theme settings): size and light/dark switching — legacy headers only */
.st-logo-wrap .st-logo {
  max-height: 48px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.st-logo-wrap .st-logo-dark {
  display: none;
}
/* When dark is the only logo, show it in light theme too */
.st-logo-wrap .st-logo-dark:only-of-type {
  display: inline-block;
}
html.st-theme-dark .st-logo-wrap .st-logo-light {
  display: none;
}
html.st-theme-dark .st-logo-wrap .st-logo-dark {
  display: inline-block;
}
@media (prefers-color-scheme: dark) {
  html.st-theme-user .st-logo-wrap .st-logo-light {
    display: none;
  }
  html.st-theme-user .st-logo-wrap .st-logo-dark {
    display: inline-block;
  }
}
html.st-theme-user .st-logo-wrap .st-logo-dark {
  display: none;
}



/* Row height: see header-builder/sizing.css (--st-row-height per section) */
.st-header__section-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--sarvtheme-spacing);
}

.st-header__layout--desktop .st-header__section-inner {
  max-width: none;
  margin-inline: 0;
  padding-inline: 20px;
}

.st-header__layout--desktop > .st-header__wrapper {
  width: 100%;
}

.st-header__cols {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.st-header__cols--1 .st-header__col--content {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

.st-header__cols--2 {
  justify-content: space-between;
}

.st-header__cols--2 .st-header__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

.st-header__cols--2 .st-header__col--right {
  justify-content: flex-start;
}

.st-header__cols--2 .st-header__col--left {
  justify-content: flex-end;
}

.st-header__cols--3 .st-header__col {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.st-header__cols--3 .st-header__col--right,
.st-header__cols--3 .st-header__col--left {
  flex: 0 1 auto;
}

.st-header__cols--3 .st-header__col--center {
  flex: 1 1 auto;
  justify-content: center;
}

.st-header__cols--3 .st-header__col--right {
  justify-content: flex-start;
}

.st-header__cols--3 .st-header__col--left {
  justify-content: flex-end;
}

.st-header .st-widget {
  line-height: 1.4;
  /* height / flex alignment: header-builder/sizing.css */
}

.st-header .st-widget-search__input {
  min-width: 0;
}

.st-header--sticky {
  --st-logo-scale: 1;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

body.sarv-header-sticky-active .st-header--sticky {
  transition:
    transform 0.3s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.st-header.is-sticky {
  --st-logo-scale: var(--st-logo-scale-sticky, 0.8);
}

/* Single #masthead becomes fixed when sticky scroll threshold is reached.
   Offset below the WordPress admin bar (0px when not logged in).
   Appearance (bg, text, shadow, border, logo) is in sticky-header-styles.css. */
body.sarv-header-sticky-active #masthead.st-header--sticky.is-sticky,
body.sarv-header-sticky-active #masthead.st-header--sticky {
  position: fixed;
  top: var(--st-admin-bar-offset, 0px);
  inset-inline: 0;
  z-index: 1030;
}

.st-header.is-sticky-hidden {
  transform: translateY(-100%);
}

.st-header.is-sticky-visible {
  transform: translateY(0);
}

.st-header .st-widget-logo .st-logo,
.st-header .st-widget-logo .st-logo-text,
.st-header .st-widget-logo .st-logo img,
.st-header .st-widget-logo .st-logo svg {
  transform: scale(var(--st-logo-scale, 1));
  transform-origin: center center;
}

body.sarv-header-sticky-active .st-header .st-widget-logo .st-logo,
body.sarv-header-sticky-active .st-header .st-widget-logo .st-logo-text,
body.sarv-header-sticky-active .st-header .st-widget-logo .st-logo img,
body.sarv-header-sticky-active .st-header .st-widget-logo .st-logo svg {
  transition:
    transform 0.25s ease,
    width 0.25s ease,
    max-width 0.25s ease;
}

body.sarv-header-sticky--anim-fade.sarv-header-sticky-active #masthead.st-header--sticky.is-sticky:not(.is-sticky-hidden) {
  animation: st-header-sticky-fade-in 0.2s ease;
}

body.sarv-header-sticky--anim-slide_down.sarv-header-sticky-active #masthead.st-header--sticky.is-sticky:not(.is-sticky-hidden) {
  animation: st-header-sticky-slide-down 0.25s ease;
}

/* Section visibility: normal vs sticky modes on the same header */
body:not(.sarv-header-sticky-active) .st-header__section--sticky-only {
  display: none !important;
}

body.sarv-header-sticky-active .st-header__section--normal-only {
  display: none !important;
}

@keyframes st-header-sticky-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes st-header-sticky-slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.st-header--transparent {
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.st-header--transparent-overlay {
  position: absolute;
  top: var(--st-admin-bar-offset, 0px);
  left: 0;
  right: 0;
  z-index: 1030;
  width: 100%;
}

body.sarv-header-transparent-overlay:not(.sarv-header-sticky-active) #masthead.st-header--transparent-overlay {
  position: absolute;
  z-index: 1030;
}

.st-header--transparent.st-header--scrolled,
body.sarv-header-transparent-scrolled .st-header--transparent-scroll-solid {
  background: var(--st-surface, #fff);
  border-bottom-color: var(--st-border, #e5e7eb);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

@media (max-width: 767px) {
  body.sarv-header-transparent:not(.sarv-header-transparent-mobile) #masthead.st-header--transparent {
    background: var(--st-surface, #fff);
    border-bottom-color: var(--st-border, #e5e7eb);
    position: relative;
  }

  body.sarv-header-transparent-overlay:not(.sarv-header-transparent-mobile) #masthead.st-header--transparent-overlay {
    position: relative;
  }
}

@media (min-width: 768px) {
  body.sarv-header-transparent:not(.sarv-header-transparent-desktop) #masthead.st-header--transparent {
    background: var(--st-surface, #fff);
    border-bottom-color: var(--st-border, #e5e7eb);
    position: relative;
  }

  body.sarv-header-transparent-overlay:not(.sarv-header-transparent-desktop) #masthead.st-header--transparent-overlay {
    position: relative;
  }
}

.st-header .st-menu.st-nav-menu-root {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--sarvtheme-spacing);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.st-header .st-menu.st-nav-menu-root a {
  text-decoration: none;
}

.site-footer {
  margin-top: 2rem;
  border-top: 1px solid var(--st-border, #eee);
}

.card,
.site-box {
  background: var(--st-surface, #fff);
  border-color: var(--st-border, #e5e7eb);
}

.site-info {
  font-size: 0.875rem;
  opacity: 0.8;
}

.main-navigation > ul.st-nav-menu-root {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sarvtheme-spacing, 1rem);
}

/* Nested menus must not inherit top-level flex layout. */
.main-navigation ul.sub-menu,
.main-navigation .st-mega-menu ul {
  display: block;
  flex-direction: unset;
  flex-wrap: unset;
}

/* Headings use typography variables (--st-* set via admin تایپوگرافی) */
h1,
h2,
h3,
h4,
h5,
h6,
.sarvtheme h1,
.sarvtheme h2,
.sarvtheme h3,
.sarvtheme h4,
.sarvtheme h5,
.sarvtheme h6 {
  font-family: var(--st-heading-font, var(--sarvtheme-font-sans));
  font-size: var(--st-heading-size, 24px);
  font-weight: var(--st-heading-weight, 700);
}

/* ----- Buttons: base (premium) ----- */
button,
.btn,
.button,
.wp-element-button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.elementor a.elementor-button,
.elementor button.elementor-button,
a.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--st-btn-py) var(--st-btn-px);
  font-family: var(--st-button-font, var(--sarvtheme-font-sans));
  font-size: var(--st-button-size, 16px);
  font-weight: var(--st-button-weight, 500);
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
  user-select: none;
  background: var(--st-color-primary, #0d6efd);
  color: #fff;
}
button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.elementor a.elementor-button:hover,
.elementor button.elementor-button:hover,
.wp-element-button:hover {
  background: color-mix(in srgb, var(--st-color-primary, #0d6efd) 85%, black);
  color: #fff;
}
button:active,
.button:active,
.btn:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.elementor a.elementor-button:active,
.elementor button.elementor-button:active,
.wp-element-button:active {
  transform: translateY(1px);
}
button:disabled,
.button:disabled,
.btn:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Button variant: rounded */
html.st-btn-rounded button,
html.st-btn-rounded .button,
html.st-btn-rounded .btn,
html.st-btn-rounded input[type="submit"],
html.st-btn-rounded input[type="button"],
html.st-btn-rounded input[type="reset"],
html.st-btn-rounded .woocommerce a.button,
html.st-btn-rounded .woocommerce button.button,
html.st-btn-rounded .woocommerce input.button,
html.st-btn-rounded .elementor a.elementor-button,
html.st-btn-rounded .elementor button.elementor-button,
html.st-btn-rounded .wp-element-button {
  border-radius: var(--st-radius-md);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
html.st-btn-rounded button:hover,
html.st-btn-rounded .button:hover,
html.st-btn-rounded .btn:hover,
html.st-btn-rounded input[type="submit"]:hover,
html.st-btn-rounded input[type="button"]:hover,
html.st-btn-rounded .woocommerce a.button:hover,
html.st-btn-rounded .woocommerce button.button:hover,
html.st-btn-rounded .elementor a.elementor-button:hover,
html.st-btn-rounded .elementor button.elementor-button:hover,
html.st-btn-rounded .wp-element-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
html.st-btn-rounded button:active,
html.st-btn-rounded .button:active,
html.st-btn-rounded .btn:active,
html.st-btn-rounded input[type="submit"]:active,
html.st-btn-rounded input[type="button"]:active,
html.st-btn-rounded .woocommerce a.button:active,
html.st-btn-rounded .woocommerce button.button:active,
html.st-btn-rounded .elementor a.elementor-button:active,
html.st-btn-rounded .elementor button.elementor-button:active,
html.st-btn-rounded .wp-element-button:active {
  transform: translateY(0);
}

/* Button variant: round (pill) */
html.st-btn-round button,
html.st-btn-round .button,
html.st-btn-round .btn,
html.st-btn-round input[type="submit"],
html.st-btn-round input[type="button"],
html.st-btn-round input[type="reset"],
html.st-btn-round .woocommerce a.button,
html.st-btn-round .woocommerce button.button,
html.st-btn-round .woocommerce input.button,
html.st-btn-round .elementor a.elementor-button,
html.st-btn-round .elementor button.elementor-button,
html.st-btn-round .wp-element-button {
  border-radius: var(--st-radius-pill);
}

/* Button variant: flat */
html.st-btn-flat button,
html.st-btn-flat .button,
html.st-btn-flat .btn,
html.st-btn-flat input[type="submit"],
html.st-btn-flat input[type="button"],
html.st-btn-flat input[type="reset"],
html.st-btn-flat .woocommerce a.button,
html.st-btn-flat .woocommerce button.button,
html.st-btn-flat .woocommerce input.button,
html.st-btn-flat .elementor a.elementor-button,
html.st-btn-flat .elementor button.elementor-button,
html.st-btn-flat .wp-element-button {
  background: transparent;
  color: var(--st-color-primary, #0d6efd);
  border-color: var(--st-border, #e5e7eb);
  border-radius: var(--st-radius-md);
  box-shadow: none;
}
html.st-btn-flat button:hover,
html.st-btn-flat .button:hover,
html.st-btn-flat .btn:hover,
html.st-btn-flat input[type="submit"]:hover,
html.st-btn-flat input[type="button"]:hover,
html.st-btn-flat .woocommerce a.button:hover,
html.st-btn-flat .woocommerce button.button:hover,
html.st-btn-flat .elementor a.elementor-button:hover,
html.st-btn-flat .elementor button.elementor-button:hover,
html.st-btn-flat .wp-element-button:hover {
  background: color-mix(
    in srgb,
    var(--st-color-primary, #0d6efd) 8%,
    transparent
  );
  color: var(--st-color-primary, #0d6efd);
}
html.st-btn-flat button:active,
html.st-btn-flat .button:active,
html.st-btn-flat .btn:active,
html.st-btn-flat input[type="submit"]:active,
html.st-btn-flat input[type="button"]:active,
html.st-btn-flat .woocommerce a.button:active,
html.st-btn-flat .woocommerce button.button:active,
html.st-btn-flat .elementor a.elementor-button:active,
html.st-btn-flat .elementor button.elementor-button:active,
html.st-btn-flat .wp-element-button:active {
  background: color-mix(
    in srgb,
    var(--st-color-primary, #0d6efd) 14%,
    transparent
  );
}

/* Button variant: 3d */
html.st-btn-3d button,
html.st-btn-3d .button,
html.st-btn-3d .btn,
html.st-btn-3d input[type="submit"],
html.st-btn-3d input[type="button"],
html.st-btn-3d input[type="reset"],
html.st-btn-3d .woocommerce a.button,
html.st-btn-3d .woocommerce button.button,
html.st-btn-3d .woocommerce input.button,
html.st-btn-3d .elementor a.elementor-button,
html.st-btn-3d .elementor button.elementor-button,
html.st-btn-3d .wp-element-button {
  background: var(--st-color-primary, #0d6efd);
  color: #fff;
  border-radius: var(--st-radius-md);
  box-shadow:
    var(--st-shadow-3d),
    0 12px 20px rgba(0, 0, 0, 0.12);
}
html.st-btn-3d button:hover,
html.st-btn-3d .button:hover,
html.st-btn-3d .btn:hover,
html.st-btn-3d input[type="submit"]:hover,
html.st-btn-3d input[type="button"]:hover,
html.st-btn-3d .woocommerce a.button:hover,
html.st-btn-3d .woocommerce button.button:hover,
html.st-btn-3d .elementor a.elementor-button:hover,
html.st-btn-3d .elementor button.elementor-button:hover,
html.st-btn-3d .wp-element-button:hover {
  transform: translateY(-1px);
}
html.st-btn-3d button:active,
html.st-btn-3d .button:active,
html.st-btn-3d .btn:active,
html.st-btn-3d input[type="submit"]:active,
html.st-btn-3d input[type="button"]:active,
html.st-btn-3d .woocommerce a.button:active,
html.st-btn-3d .woocommerce button.button:active,
html.st-btn-3d .elementor a.elementor-button:active,
html.st-btn-3d .elementor button.elementor-button:active,
html.st-btn-3d .wp-element-button:active {
  transform: translateY(6px);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--st-color-primary, #0d6efd) 70%, #000 30%),
    0 8px 14px rgba(0, 0, 0, 0.1);
}

/* ----- Inputs: base ----- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select {
  width: 100%;
  min-height: var(--st-control-height);
  padding: var(--st-control-py) var(--st-control-px);
  font: inherit;
  line-height: 1.4;
  color: var(--st-text, #111827);
  transition:
    box-shadow 0.12s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}
textarea {
  min-height: 88px;
  resize: vertical;
}

/* Input variant: box */
html.st-input-box
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.st-input-box select,
html.st-input-box textarea,
html.st-input-box .woocommerce input.input-text,
html.st-input-box .woocommerce textarea,
html.st-input-box .woocommerce select {
  background: var(--st-surface, #fff);
  border: 1px solid var(--st-border, #e5e7eb);
  border-radius: var(--st-radius-md);
}

/* Input variant: pill */
html.st-input-pill
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.st-input-pill select,
html.st-input-pill textarea,
html.st-input-pill .woocommerce input.input-text,
html.st-input-pill .woocommerce textarea,
html.st-input-pill .woocommerce select {
  background: var(--st-surface, #fff);
  border: 1px solid var(--st-border, #e5e7eb);
  border-radius: var(--st-radius-pill);
}

/* Input variant: filled */
html.st-input-filled
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.st-input-filled select,
html.st-input-filled textarea,
html.st-input-filled .woocommerce input.input-text,
html.st-input-filled .woocommerce textarea,
html.st-input-filled .woocommerce select {
  background: color-mix(
    in srgb,
    var(--st-surface, #f8f9fa) 85%,
    var(--st-color-primary, #0d6efd) 10%
  );
  border: 1px solid transparent;
  border-radius: var(--st-radius-md);
}
html.st-input-filled input:not([type="checkbox"]):not([type="radio"]):focus,
html.st-input-filled select:focus,
html.st-input-filled textarea:focus,
html.st-input-filled .woocommerce input.input-text:focus,
html.st-input-filled .woocommerce textarea:focus,
html.st-input-filled .woocommerce select:focus {
  border-color: var(--st-color-primary, #0d6efd);
}

/* Input variant: underline */
html.st-input-underline
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.st-input-underline select,
html.st-input-underline textarea,
html.st-input-underline .woocommerce input.input-text,
html.st-input-underline .woocommerce textarea,
html.st-input-underline .woocommerce select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--st-border, #e5e7eb);
  border-radius: 0;
  padding-inline-start: var(--st-control-px);
  padding-inline-end: var(--st-control-px);
}
html.st-input-underline input:not([type="checkbox"]):not([type="radio"]):focus,
html.st-input-underline select:focus,
html.st-input-underline textarea:focus,
html.st-input-underline .woocommerce input.input-text:focus,
html.st-input-underline .woocommerce textarea:focus,
html.st-input-underline .woocommerce select:focus {
  outline: none;
  border-bottom-color: var(--st-color-primary, #0d6efd);
}

/* Focus-visible: scoped to body (frontend only) */
body button:focus-visible,
body .button:focus-visible,
body .btn:focus-visible,
body input[type="submit"]:focus-visible,
body input[type="button"]:focus-visible,
body input[type="reset"]:focus-visible,
body input:not([type="checkbox"]):not([type="radio"]):focus-visible,
body select:focus-visible,
body textarea:focus-visible {
  outline: none;
  box-shadow: var(--st-focus-ring);
}

/* Styleguide template (page-styleguide.php) */
.st-styleguide {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sarvtheme-spacing, 1rem);
}
.st-styleguide__title {
  margin-bottom: 0.5rem;
}
.st-styleguide__desc {
  margin-bottom: 2rem;
  opacity: 0.85;
}
.st-styleguide__section {
  margin-bottom: 2.5rem;
}
.st-styleguide__heading {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}
.st-styleguide__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 1rem;
}
.st-styleguide__row--actions {
  margin-top: 0.5rem;
}
.st-styleguide__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.st-styleguide__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.st-styleguide__field--full {
  grid-column: 1 / -1;
}
.st-styleguide__field label {
  font-weight: 500;
}
.st-styleguide__hint {
  margin-top: 1rem;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* Menu / navigation typography variables */
nav,
.main-navigation,
.menu,
.sarvtheme nav,
.sarvtheme .main-navigation,
.sarvtheme .menu {
  font-family: var(--st-body-font, var(--sarvtheme-font-sans));
  font-size: var(--st-menu-size, 14px);
  font-weight: var(--st-menu-weight, 500);
}

.sarv-tooltip {
  position: fixed;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding: 8px 14px;

  border-radius: 12px;

  background: rgba(17, 24, 39, 0.98);

  color: #fff;

  font-size: 13px;
  font-weight: 500;

  line-height: 1;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;

  visibility: hidden;

  transform: translateY(8px) scale(0.95);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;

  backdrop-filter: blur(12px);

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 2px 10px rgba(0, 0, 0, 0.08);
}

.sarv-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.sarv-tooltip::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -5px;

  width: 10px;
  height: 10px;

  transform: translateX(-50%) rotate(45deg);

  background: inherit;
}

.sarv-tooltip--bottom::after {
  top: -5px;
  bottom: auto;
}

/* --- breadcrumb.css --- */
/**
 * SarvTheme breadcrumb — framework-independent styles.
 * Bootstrap utility classes may be added in templates optionally; not required.
 */

.breadcrumb-wrapper {
  width: 100%;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--st-text, #111827) 65%, transparent);
}

.breadcrumb-list > li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.breadcrumb-list > li + li::before {
  /* Variable value must be a quoted string (set inline from PHP). */
  content: var(--breadcrumb-separator, "/");
  margin-inline-end: 0.5rem;
  color: color-mix(in srgb, var(--st-text, #111827) 40%, transparent);
  pointer-events: none;
}

.breadcrumb-list a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb-list a:hover {
  color: var(--st-color-primary, #0d6efd);
}

.breadcrumb-list [aria-current="page"] {
  color: var(--st-text, #111827);
  font-weight: 500;
}

/* Global breadcrumb bar (product + blog + archives). Rendered outside <main>
   so mirror `.site-main > .container` width rules here. */
.st-pl1__breadcrumbs {
  width: 100%;
  margin: 20px 0;
}

.st-pl1__breadcrumbs > .container {
  width: 100%;
  max-width: var(--st-container-max, 100%);
  margin-inline: auto;
  padding-inline: var(--st-container-padding, 16px);
  padding-block: 12px;
}

.st-pl1__breadcrumbs .breadcrumb-wrapper {
  margin: 0;
  background-color: #f9f9f9;
  border-radius: 60px;
  padding: 10px 20px;
}

.st-pl1__breadcrumbs .breadcrumb-list {
  font-size: 0.85rem;
  color: var(--st-product-muted, color-mix(in srgb, var(--st-text, #111827) 65%, transparent));
}

/* --- layout-width.css --- */
/**
 * Header Builder — structural layout width (wrapper + content).
 * Desktop only; mobile layout is unchanged.
 */

/* Content-level container (wrapper full width + content container) */
.st-header .st-header__section-inner.container {
	width: 100%;
	max-width: var(--st-container-width, var(--st-header-container-max, 1320px));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--st-container-padding, 16px);
	padding-right: var(--st-container-padding, 16px);
}

@media (min-width: 768px) {
	/* Wrapper container — centered header block */
	.st-header--wrapper-container {
		background: transparent;
		border-bottom: none;
	}

	.st-header--wrapper-container .st-header__layout--desktop > .st-header__wrapper--container {
		width: 100%;
		max-width: var(--st-container-width, var(--st-header-container-max, 1320px));
		margin-left: auto;
		margin-right: auto;
	}

	/* Full-width content rows: side padding on the inner shell */
	.st-header--wrapper-full-width.st-header--full-width .st-header__layout--desktop .st-header__section-inner:not(.container) {
		padding-left: var(--st-container-padding, 16px);
		padding-right: var(--st-container-padding, 16px);
	}

	/* Sticky wrapper override → full width */
	body.sarv-header-sticky-active .st-header.is-sticky.st-header--sticky-wrapper-full .st-header__layout--desktop > .st-header__wrapper--container {
		max-width: none;
		width: 100%;
		overflow: visible;
	}

	body.sarv-header-sticky-active .st-header.is-sticky.st-header--sticky-wrapper-full .st-header__layout--desktop > .st-header__wrapper {
		max-width: none;
		width: 100%;
	}

	/* Sticky wrapper override → container */
	body.sarv-header-sticky-active .st-header.is-sticky.st-header--sticky-wrapper-container .st-header__layout--desktop > .st-header__wrapper:not(.st-header__wrapper--container) {
		width: 100%;
		max-width: var(--st-container-width, var(--st-header-container-max, 1320px));
		margin-left: auto;
		margin-right: auto;
		background: var(--st-surface, #fff);
		border-bottom: 1px solid var(--st-border, #e5e7eb);
		overflow: hidden;
	}

	/* Sticky content override → full width */
	body.sarv-header-sticky-active .st-header.is-sticky.st-header--sticky-content-full .st-header__layout--desktop .st-header__section-inner.container {
		max-width: none;
		width: 100%;
		padding-left: var(--st-container-padding, 16px);
		padding-right: var(--st-container-padding, 16px);
	}

	/* Sticky content override → container */
	body.sarv-header-sticky-active .st-header.is-sticky.st-header--sticky-content-container .st-header__layout--desktop .st-header__section-inner:not(.container) {
		max-width: var(--st-container-width, var(--st-header-container-max, 1320px));
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--st-container-padding, 16px);
		padding-right: var(--st-container-padding, 16px);
	}
}

/* --- page-title.css --- */
/**
 * Page Settings — page-title bar (hero) for singular pages.
 * Rendered by PageSettingsFrontend on the `sarvtheme_after_header` hook.
 * Full width by default; inner content aligns to the theme container.
 */

.st-page-title {
  --st-page-title-bg: var(--st-surface, #f8f9fa);
  background-color: var(--st-page-title-bg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin-bottom: 2rem;
}

.st-page-title--has-image {
  background-image: var(--st-page-title-image);
}

/* Readability overlay only when a background image is used. */
.st-page-title--has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.st-page-title__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--st-container-max, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--st-container-padding, 16px);
  padding-right: var(--st-container-padding, 16px);
}

.st-page-title__title {
  margin: 0;
  color: inherit;
  line-height: 1.25;
}

.st-page-title__breadcrumb {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.st-page-title__breadcrumb .breadcrumb-wrapper {
  margin: 0;
}

.st-page-title__breadcrumb .breadcrumb-list {
  font-size: 0.875rem;
  opacity: 0.85;
}

.st-page-title__breadcrumb .breadcrumb-list a {
  color: inherit;
}

.st-page-title__breadcrumb .breadcrumb-list [aria-current="page"] {
  opacity: 0.75;
}

/* Sizes */
.st-page-title--default .st-page-title__inner {
  padding-top: 32px;
  padding-bottom: 32px;
}
.st-page-title--default .st-page-title__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.st-page-title--small .st-page-title__inner {
  padding-top: 18px;
  padding-bottom: 18px;
}
.st-page-title--small .st-page-title__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.st-page-title--large .st-page-title__inner {
  padding-top: 64px;
  padding-bottom: 64px;
}
.st-page-title--large .st-page-title__title {
  font-size: clamp(2rem, 4vw, 3rem);
}

/* Text color schemes */
.st-page-title--text-default {
  color: var(--st-text, #111827);
}
.st-page-title--text-light {
  color: #ffffff;
}
.st-page-title--text-dark {
  color: #111827;
}

/* When an image is present, default to light text for contrast. */
.st-page-title--has-image.st-page-title--text-default {
  color: #ffffff;
}

/* --- back-to-top.css --- */
/**
 * Site-wide back-to-top button (physical left).
 */

.st-back-top {
  --st-back-top-size: 44px;
  --st-back-top-accent: var(--st-color-primary, var(--sarv-color-primary, #00b8b8));
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--st-back-top-size);
  height: var(--st-back-top-size);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--st-back-top-accent) 22%, #e5e7eb);
  border-radius: 999px !important;
  background: var(--sarv-color-bg, #fff) !important;
  color: var(--st-back-top-accent) !important;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06) !important;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.st-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.st-back-top:hover,
.st-back-top:focus-visible {
  background: var(--st-back-top-accent);
  border-color: var(--st-back-top-accent);
  color: #fff;
  outline: none;
}

.st-back-top:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-back-top-accent) 28%, transparent);
}

/* --- woocommerce-cart.css --- */
/**
 * Cart page + shared cart/checkout line-item metadata.
 * Aligned with checkout order-summary card language.
 */

.woocommerce-cart {
	--st-cart-text: var(--sarv-color-text, #0f172a);
	--st-cart-muted: var(--sarv-color-text-muted, #6b7280);
	--st-cart-border: var(--sarv-color-border, #ededed);
	--st-cart-bg: var(--sarv-color-bg, #ffffff);
	--st-cart-radius: var(--sarv-radius-md, 12px);
}

/* Variation metadata */
.woocommerce-cart-form .product-name dl.variation,
.woocommerce-cart-form .product-name dl.st-cart-item-variation,
.woocommerce-checkout-review-order-table dl.variation,
.woocommerce-checkout-review-order-table dl.st-cart-item-variation {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	color: var(--st-cart-muted, var(--st-color-muted, #6c757d));
}

.woocommerce-cart-form .product-name dl.variation dt,
.woocommerce-cart-form .product-name dl.variation dd,
.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dd {
	display: inline;
	margin: 0;
}

.woocommerce-cart-form .product-name dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dt {
	font-weight: 600;
}

.woocommerce-cart-form .product-name dl.variation dd p,
.woocommerce-checkout-review-order-table dl.variation dd p {
	margin: 0;
	display: inline;
}

/* Cart table */
.woocommerce-cart-form {
	margin-bottom: var(--sarv-space-2xl, 2rem);
}

.woocommerce-cart-form .shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--st-cart-border);
	border-radius: var(--st-cart-radius);
	background: var(--st-cart-bg);
	color: var(--st-cart-text);
	overflow: hidden;
}

.woocommerce-cart-form .shop_table th,
.woocommerce-cart-form .shop_table td {
	padding: 1rem 1.15rem;
	border: 0;
	border-bottom: 1px solid var(--st-cart-border);
	background: transparent;
	color: var(--st-cart-text);
	font-size: 0.875rem;
	vertical-align: middle;
}

.woocommerce-cart-form .shop_table thead th {
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--st-cart-muted);
}

.woocommerce-cart-form .shop_table tr:last-child td {
	border-bottom: 0;
}

.woocommerce-cart-form .product-name {
	font-weight: 600;
}

.woocommerce-cart-form .product-remove a {
	color: var(--st-cart-muted);
	text-decoration: none;
	font-size: 1.25rem;
	line-height: 1;
}

.woocommerce-cart-form .product-remove a:hover {
	color: var(--sarv-color-danger, #dc3545);
}

.woocommerce-cart-form .actions {
	padding: 1rem 1.15rem;
}

.woocommerce-cart-form .coupon .input-text {
	border: 1px solid var(--st-cart-border);
	border-radius: var(--sarv-radius-sm, 6px);
	padding: 0.65rem 0.85rem;
	margin-inline-end: 0.5rem;
}

.woocommerce-cart-form button.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	border: 0;
	border-radius: var(--sarv-radius-md, 12px);
	background: var(--sarv-color-primary);
	color: var(--sarv-color-on-primary);
	font-weight: 700;
	padding: 0.8rem 1.25rem;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

.woocommerce-cart-form button.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	filter: brightness(0.96);
	color: var(--sarv-color-on-primary);
}

.woocommerce-cart-form button[name="update_cart"] {
	background: var(--st-cart-bg);
	color: var(--st-cart-text);
	border: 1px solid var(--st-cart-border);
}

.woocommerce-cart-form button[name="update_cart"]:hover {
	border-color: var(--sarv-color-primary);
	color: var(--sarv-color-primary);
	filter: none;
}

/* Cart totals — same card language as order summary */
.woocommerce-cart .cart-collaterals {
	margin-top: var(--sarv-space-xl, 1.5rem);
}

.woocommerce-cart .cart_totals {
	border: 1px solid var(--st-cart-border);
	border-radius: var(--st-cart-radius);
	background: var(--st-cart-bg);
	padding: 0;
	overflow: hidden;
	color: var(--st-cart-text);
}

.woocommerce-cart .cart_totals > h2 {
	margin: 0;
	padding: 1rem 1.15rem;
	font-size: 1rem;
	font-weight: 700;
	border-bottom: 1px solid var(--st-cart-border);
	color: var(--st-cart-text);
}

.woocommerce-cart .cart_totals .shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.woocommerce-cart .cart_totals .shop_table th,
.woocommerce-cart .cart_totals .shop_table td {
	padding: 1rem 1.15rem;
	border: 0;
	border-bottom: 1px solid var(--st-cart-border);
	background: transparent;
	color: var(--st-cart-text);
	font-size: 0.875rem;
	font-weight: 500;
}

.woocommerce-cart .cart_totals .shop_table tr:last-child th,
.woocommerce-cart .cart_totals .shop_table tr:last-child td {
	border-bottom: 0;
}

.woocommerce-cart .cart_totals .shop_table th {
	text-align: start;
}

.woocommerce-cart .cart_totals .shop_table td {
	text-align: end;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	font-size: 1.05rem;
	font-weight: 700;
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 1rem 1.15rem 1.15rem;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	text-align: center;
}

@media (min-width: 992px) {
	body.woocommerce-cart .sarvtheme-woo-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
		gap: var(--sarv-space-2xl, 2rem);
		align-items: start;
		direction: ltr;
	}

	body.woocommerce-cart .sarvtheme-woo-wrap > .woocommerce-notices-wrapper,
	body.woocommerce-cart .sarvtheme-woo-wrap > .woocommerce-cart-form {
		direction: rtl;
		grid-column: 1;
	}

	body.woocommerce-cart .sarvtheme-woo-wrap > .cart-collaterals {
		direction: rtl;
		grid-column: 2;
		grid-row: 1 / span 4;
		position: sticky;
		top: var(--sarv-space-xl, 1.5rem);
		margin-top: 0;
	}
}

@media (max-width: 767.98px) {
	.woocommerce-cart-form .shop_table th,
	.woocommerce-cart-form .shop_table td,
	.woocommerce-cart .cart_totals .shop_table th,
	.woocommerce-cart .cart_totals .shop_table td {
		padding: 0.85rem 1rem;
	}
}

/* --- section-style.css --- */
/**
 * Header Builder — row (section) style via CSS custom properties.
 */

.st-header__section--has-row-style {
	height: var(--st-row-height, 60px);
	padding-block: 0;
}

.st-header__layout--mobile .st-header__section--has-row-style {
	height: var(--st-row-mobile-height, 50px);
}

.st-header__section--bg-color {
	background-color: var(--st-row-bg, transparent);
}

.st-header__section--bg-image {
	background-color: transparent;
	background-image: var(--st-row-bg-image, none);
	background-size: var(--st-row-bg-size, cover);
	background-position: var(--st-row-bg-position, center center);
	background-repeat: no-repeat;
}

.st-header__section--has-text-color {
	color: var(--st-row-text-color, inherit);
}

.st-header__section--has-text-color .st-menu__link,
.st-header__section--has-text-color .st-widget-account__label,
.st-header__section--has-text-color .st-widget-account__sublabel,
.st-header__section--has-text-color .st-widget-cart__label,
.st-header__section--has-text-color .st-widget-wishlist__label,
.st-header__section--has-text-color .st-widget-compare__label,
.st-header__section--has-text-color .st-logo-text {
	color: inherit;
}

.st-header__section--has-border.st-header__section--border-top {
	border-top: var(--st-row-border-width, 1px) var(--st-row-border-style, solid) var(--st-row-border-color, var(--st-border, #e5e7eb));
}

.st-header__section--has-border.st-header__section--border-bottom {
	border-bottom: var(--st-row-border-width, 1px) var(--st-row-border-style, solid) var(--st-row-border-color, var(--st-border, #e5e7eb));
}

.st-header__section--has-border.st-header__section--border-left {
	border-left: var(--st-row-border-width, 1px) var(--st-row-border-style, solid) var(--st-row-border-color, var(--st-border, #e5e7eb));
}

.st-header__section--has-border.st-header__section--border-right {
	border-right: var(--st-row-border-width, 1px) var(--st-row-border-style, solid) var(--st-row-border-color, var(--st-border, #e5e7eb));
}

.st-header__section--has-border.st-header__section--border-all {
	border: var(--st-row-border-width, 1px) var(--st-row-border-style, solid) var(--st-row-border-color, var(--st-border, #e5e7eb));
}

.st-header__section--has-shadow {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.st-header__section--has-border-radius {
	border-radius: var(--st-row-border-radius);
}

/* Editor canvas preview — the section card is editing chrome (toolbar + body),
   so the configured row height is reflected on the body only, as a min-height
   hint that never squashes the dropzones. */
.st-hb-section.st-hb-section--has-row-style .st-hb-section__body {
	min-height: var(--st-row-height, 60px);
}

.st-hb-editor__canvas--mobile .st-hb-section.st-hb-section--has-row-style .st-hb-section__body {
	min-height: var(--st-row-mobile-height, 50px);
}

.st-hb-section.st-hb-section--bg-color {
	background-color: var(--st-row-bg, transparent);
}

.st-hb-section.st-hb-section--bg-image {
	background-color: transparent;
	background-image: var(--st-row-bg-image, none);
	background-size: var(--st-row-bg-size, cover);
	background-position: var(--st-row-bg-position, center center);
	background-repeat: no-repeat;
}

.st-hb-section.st-hb-section--has-text-color {
	color: var(--st-row-text-color, inherit);
}

.st-hb-section.st-hb-section--has-border.st-hb-section--border-top {
	border-top: var(--st-row-border-width, 1px) var(--st-row-border-style, solid) var(--st-row-border-color, var(--st-border, #e5e7eb));
}

.st-hb-section.st-hb-section--has-border.st-hb-section--border-bottom {
	border-bottom: var(--st-row-border-width, 1px) var(--st-row-border-style, solid) var(--st-row-border-color, var(--st-border, #e5e7eb));
}

.st-hb-section.st-hb-section--has-border.st-hb-section--border-left {
	border-left: var(--st-row-border-width, 1px) var(--st-row-border-style, solid) var(--st-row-border-color, var(--st-border, #e5e7eb));
}

.st-hb-section.st-hb-section--has-border.st-hb-section--border-right {
	border-right: var(--st-row-border-width, 1px) var(--st-row-border-style, solid) var(--st-row-border-color, var(--st-border, #e5e7eb));
}

.st-hb-section.st-hb-section--has-border.st-hb-section--border-all {
	border: var(--st-row-border-width, 1px) var(--st-row-border-style, solid) var(--st-row-border-color, var(--st-border, #e5e7eb));
}

.st-hb-section.st-hb-section--has-shadow {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.st-hb-section.st-hb-section--has-border-radius .st-hb-section__body {
	border-radius: var(--st-row-border-radius);
}

/* --- notifications.css --- */
/**
 * SarvTheme — notification toasts (SarvToast).
 */

:root {
	--st-toast-bg: #ffffff;
	--st-toast-color: #0f172a;
	--st-toast-muted: #64748b;
	--st-toast-radius: 16px;
	--st-toast-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
	--st-toast-success: #22c55e;
	--st-toast-error: #ef4444;
	--st-toast-warning: #f59e0b;
	--st-toast-info: #3b82f6;
	--st-toast-loading: #90c742;
	--st-toast-border: rgba(15, 23, 42, 0.06);
	--st-toast-gap: 12px;
	--st-toast-width: min(420px, calc(100vw - 32px));
	--st-toast-z: 100100;
	--st-toast-enter-ms: 320ms;
	--st-toast-exit-ms: 260ms;
}

/* ── Containers (one per corner, created once) ───────────────── */

.st-toast-container {
	position: fixed;
	z-index: var(--st-toast-z);
	display: flex;
	flex-direction: column;
	gap: var(--st-toast-gap);
	pointer-events: none;
	max-width: var(--st-toast-width);
	width: 100%;
	padding: 16px;
}

.st-toast-container--top-right {
	inset-block-start: 0;
	inset-inline-end: 0;
	align-items: flex-end;
}

.st-toast-container--top-left {
	inset-block-start: 0;
	inset-inline-start: 0;
	align-items: flex-start;
}

.st-toast-container--top-center {
	inset-block-start: 0;
	inset-inline: 0;
	margin-inline: auto;
	width: fit-content;
	max-width: var(--st-toast-width);
	align-items: center;
}

.st-toast-container--bottom-right {
	inset-block-end: 0;
	inset-inline-end: 0;
	align-items: flex-end;
	flex-direction: column-reverse;
}

.st-toast-container--bottom-center {
	inset-block-end: 0;
	inset-inline: 0;
	margin-inline: auto;
	width: fit-content;
	max-width: var(--st-toast-width);
	align-items: center;
	flex-direction: column-reverse;
}

.st-toast-container--bottom-left {
	inset-block-end: 0;
	inset-inline-start: 0;
	align-items: flex-start;
	flex-direction: column-reverse;
}

/* ── Toast card ─────────────────────────────────────────────── */

.st-toast {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	grid-template-areas:
		"icon title close"
		"icon message close"
		"icon action close";
	column-gap: 14px;
	row-gap: 2px;
	align-items: start;
	width: var(--st-toast-width);
	padding: 16px 14px 16px 16px;
	border-radius: var(--st-toast-radius);
	background: var(--st-toast-bg);
	color: var(--st-toast-color);
	box-shadow: var(--st-toast-shadow);
	border: 1px solid var(--st-toast-border);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(-10px) scale(0.98);
	transition:
		opacity var(--st-toast-enter-ms) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--st-toast-enter-ms) cubic-bezier(0.22, 1, 0.36, 1);
	outline: none;
}

.st-toast-container--bottom-right .st-toast,
.st-toast-container--bottom-left .st-toast,
.st-toast-container--bottom-center .st-toast {
	transform: translateY(10px) scale(0.98);
}

.st-toast-container--top-center .st-toast {
	transform: translateY(-10px) scale(0.98);
}

.st-toast-container--top-left .st-toast,
.st-toast-container--bottom-left .st-toast {
	transform: translateX(-10px) scale(0.98);
}

.st-toast-container--top-right .st-toast,
.st-toast-container--bottom-right .st-toast {
	transform: translateX(10px) scale(0.98);
}

.st-toast.is-visible {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

.st-toast.is-leaving {
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transition:
		opacity var(--st-toast-exit-ms) ease,
		transform var(--st-toast-exit-ms) ease;
}

.st-toast-container--bottom-right .st-toast.is-leaving,
.st-toast-container--bottom-left .st-toast.is-leaving,
.st-toast-container--bottom-center .st-toast.is-leaving {
	transform: translateY(6px) scale(0.98);
}

.st-toast-container--top-center .st-toast.is-leaving {
	transform: translateY(-6px) scale(0.98);
}

.st-toast-container--top-left .st-toast.is-leaving,
.st-toast-container--bottom-left .st-toast.is-leaving {
	transform: translateX(-6px) scale(0.98);
}

.st-toast-container--top-right .st-toast.is-leaving,
.st-toast-container--bottom-right .st-toast.is-leaving {
	transform: translateX(6px) scale(0.98);
}

/* ── Type accents ───────────────────────────────────────────── */

[dir="rtl"] .st-toast::before {
	border-radius: 4px 0 0 4px;
}

.st-toast--success {
	--st-toast-accent: var(--st-toast-success);
}

.st-toast--error {
	--st-toast-accent: var(--st-toast-error);
}

.st-toast--warning {
	--st-toast-accent: var(--st-toast-warning);
}

.st-toast--info {
	--st-toast-accent: var(--st-toast-info);
}

.st-toast--loading {
	--st-toast-accent: var(--st-toast-loading);
}

/* ── Icon ───────────────────────────────────────────────────── */

.st-toast__icon {
	grid-area: icon;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	flex-shrink: 0;
	margin-block-start: 1px;
	background: color-mix(in srgb, var(--st-toast-accent, var(--st-toast-info)) 12%, transparent);
	color: var(--st-toast-accent, var(--st-toast-info));
}

.st-toast__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.st-toast__icon .st-toast__spinner {
	width: 20px;
	height: 20px;
	border: 2px solid color-mix(in srgb, var(--st-toast-loading) 25%, transparent);
	border-top-color: var(--st-toast-loading);
	border-radius: 50%;
	animation: st-toast-spin 0.75s linear infinite;
}

@keyframes st-toast-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ── Content ──────────────────────────────────────────────────── */

.st-toast__title {
	grid-area: title;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--st-toast-color);
	padding-inline-end: 8px;
}

.st-toast__message {
	grid-area: message;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--st-toast-muted);
	padding-inline-end: 8px;
}

.st-toast__title:empty,
.st-toast__message:empty {
	display: none;
}

.st-toast__title:empty + .st-toast__message {
	grid-row: title / span 2;
	align-self: center;
	font-size: 0.875rem;
	color: var(--st-toast-color);
}

.st-toast__action {
	grid-area: action;
	display: inline-flex;
	align-self: start;
	margin-block-start: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--st-toast-accent, var(--st-toast-info));
	text-decoration: none;
	padding-inline-end: 8px;
	transition: opacity 0.15s ease;
}

.st-toast__action:hover {
	opacity: 0.85;
	text-decoration: underline;
}

.st-toast__action[hidden] {
	display: none;
}

/* ── Close button + progress ring ───────────────────────────── */

.st-toast__close {
	grid-area: close;
	grid-row: 1 / -1;
	align-self: start;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--st-toast-muted);
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.st-toast__close:hover {
	color: var(--st-toast-color);
	background: rgba(15, 23, 42, 0.05);
}

.st-toast__close:focus-visible {
	outline: 2px solid var(--st-toast-accent, var(--st-toast-info));
	outline-offset: 2px;
}

.st-toast__ring {
	position: absolute;
	inset: 0;
	width: 32px;
	height: 32px;
	transform: rotate(-90deg);
	pointer-events: none;
}

.st-toast__ring-track {
	fill: none;
	stroke: rgba(15, 23, 42, 0.08);
	stroke-width: 2;
}

.st-toast__ring-progress {
	fill: none;
	stroke: var(--st-toast-accent, var(--st-toast-info));
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	opacity: 0.55;
	transition: stroke-dashoffset 0.05s linear;
}

.st-toast--loading .st-toast__ring-progress,
.st-toast--persistent .st-toast__ring-progress {
	opacity: 0;
}

.st-toast__close-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
}

.st-toast__close-icon svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* ── Reduced motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.st-toast,
	.st-toast.is-leaving {
		transition: opacity 0.01ms;
		transform: none;
	}

	.st-toast__icon .st-toast__spinner {
		animation-duration: 1.5s;
	}
}