/*
Theme Name: Abzar Sardasht
Theme URI: https://abzarsardasht.ir
Author: TajWeb
Author URI: https://tajweb.ir
Description: A custom, high-performance WooCommerce theme for Abzar Sardasht tool store.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: abzarsardasht
Tested up to: 7.1
WC requires at least: 8.5
WC tested up to: 11.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, rtl-language-support, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   0. SELF-HOSTED FONTS
   ========================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand palette: orange -------------------------------------------- */
  --orange-50: #fff5ec;
  --orange-100: #ffe6d3;
  --orange-200: #ffc9a3;
  --orange-300: #ffa46b;
  --orange-400: #ff8338;
  --orange-500: #ff6b00;
  --orange-600: #e85f00;
  --orange-700: #b84700;
  --orange-800: #993b00;
  --orange-900: #7a3000;

  /* --- Neutral palette --------------------------------------------------- */
  --white: #ffffff;
  --ink: #0b0d10;
  --navy: #101d30;
  --navy-soft: #18293f;

  --gray-50: #f7f8fa;
  --gray-100: #f1f3f6;
  --gray-200: #e3e7ec;
  --gray-300: #cdd4dc;
  --gray-400: #a2abb6;
  --gray-500: #646f7c;
  --gray-600: #525c69;
  --gray-700: #414b58;
  --gray-800: #28313c;
  --gray-900: #121820;

  --color-ink: var(--ink);
  --color-navy: var(--navy);
  --color-white: var(--white);

  /* --- Semantic: brand --------------------------------------------------- */
  /* Orange is a surface color. Use --color-primary-text for orange text. */
  --color-primary: var(--orange-500);
  --color-primary-hover: var(--orange-600);
  /* Slightly lighter than orange-700 so dark button text keeps AA contrast. */
  --color-primary-active: #d95a00;
  --color-primary-soft: var(--orange-50);
  --color-primary-text: var(--orange-700);
  --color-on-primary: var(--ink);

  /* --- Semantic: surfaces ------------------------------------------------ */
  --color-bg: var(--white);
  --color-bg-subtle: var(--gray-50);
  --color-surface: var(--white);
  --color-surface-muted: var(--gray-100);
  --color-surface-dark: var(--navy);
  --color-backdrop: rgb(8 12 20 / 55%);

  /* --- Semantic: text ---------------------------------------------------- */
  --color-heading: var(--ink);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-600);
  --color-text-subtle: var(--gray-500);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: #b9c4d1;
  --color-link: var(--color-primary-text);
  --color-link-hover: var(--orange-800);

  /* --- Semantic: borders ------------------------------------------------- */
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-border-control: #8b95a1;

  /* --- Semantic: feedback ------------------------------------------------ */
  --color-success: #0f7a3f;
  --color-success-bg: #e8f7ee;
  --color-success-border: #bfe8cf;

  --color-warning: #945700;
  --color-warning-bg: #fff7e6;
  --color-warning-border: #ffe2a8;

  --color-danger: #b42318;
  --color-danger-bg: #fdecea;
  --color-danger-border: #f8c9c4;

  --color-info: #0b5cab;
  --color-info-bg: #eaf3fc;
  --color-info-border: #c7e0f7;

  /* --- Focus ------------------------------------------------------------- */
  --color-focus: var(--navy);
  --color-focus-inverse: #ffb27a;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* --- Typography: families --------------------------------------------- */
  /* Vazirmatn should be self-hosted and preloaded in functions.php later. */
  --font-sans: "Vazirmatn", "IRANSansX", "Dana", "Peyda", "Estedad", system-ui,
    -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* --- Typography: sizes ------------------------------------------------- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-3xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --text-4xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --text-5xl: clamp(2.5rem, 1.5rem + 3.8vw, 4rem);

  /* --- Typography: weights ----------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* --- Typography: line heights ------------------------------------------ */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-body: var(--leading-relaxed);
  --leading-heading: 1.3;

  /* --- Typography: tracking ---------------------------------------------- */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.03em;
  --tracking-wider: 0.08em;
  --tracking-heading: var(--tracking-normal);

  /* --- Spacing (4px base scale) ------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --section-space: clamp(3rem, 2rem + 4vw, 6rem);

  /* --- Layout ------------------------------------------------------------ */
  /* Breakpoints (media queries cannot use custom properties):
     480px / 768px / 1024px / 1280px / 1440px */
  --container-width: 78rem;
  --container-wide: 90rem;
  --container-narrow: 48rem;
  --container-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* --- Borders & radii --------------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 2px;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Shadows ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgb(11 13 16 / 5%);
  --shadow-sm: 0 1px 3px rgb(11 13 16 / 8%), 0 1px 2px rgb(11 13 16 / 4%);
  --shadow-md: 0 6px 16px rgb(11 13 16 / 8%), 0 2px 4px rgb(11 13 16 / 4%);
  --shadow-lg: 0 16px 36px rgb(11 13 16 / 12%), 0 6px 12px rgb(11 13 16 / 5%);
  --shadow-xl: 0 28px 60px rgb(11 13 16 / 16%), 0 10px 24px rgb(11 13 16 / 6%);
  --shadow-primary: 0 10px 24px rgb(255 107 0 / 26%);
  --shadow-inset: inset 0 1px 2px rgb(11 13 16 / 6%);

  /* --- Motion ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* --- Layering ---------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-skip-link: 100000;

  /* --- States ------------------------------------------------------------ */
  --opacity-disabled: 0.5;
}

/* ==========================================================================
   2. MODERN RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  accent-color: var(--color-primary);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

iframe,
embed,
object {
  border: 0;
}

/* Form controls inherit typography instead of browser defaults. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

:disabled {
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: start;
}

hr {
  height: 0;
  border: 0;
  border-block-start: var(--border-width) solid var(--color-border);
  color: inherit;
}

[hidden] {
  display: none !important;
}

summary {
  cursor: pointer;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
  cursor: help;
}

b,
strong {
  font-weight: var(--weight-bold);
}

small {
  font-size: var(--text-sm);
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* ==========================================================================
   3. BASE ELEMENT STYLES
   ========================================================================== */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  text-align: start;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  text-shadow: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

p {
  text-wrap: pretty;
}

/* UI links stay quiet by default; editorial links get an accessible underline. */
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

:where(.entry-content, .comment-content) a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  transition: color var(--duration-fast) var(--ease-standard);
}

:where(.entry-content, .comment-content) a:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

/* Restore list semantics inside editorial content only. */
:where(.entry-content, .comment-content) :is(ul, ol) {
  padding-inline-start: 1.5em;
  list-style: revert;
}

mark {
  padding-inline: 0.15em;
  background-color: var(--color-primary-soft);
  color: inherit;
}

address {
  font-style: normal;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}

code,
kbd,
samp {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0.875em;
}

pre {
  padding: var(--space-4);
  overflow: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-subtle);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  font-size: var(--text-sm);
  tab-size: 4;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

input,
textarea {
  caret-color: var(--color-primary);
}

/* ==========================================================================
   4. RTL SUPPORT
   --------------------------------------------------------------------------
   WordPress sets dir="rtl" on <html>. All spacing, borders, alignment and
   positioning in this file use logical properties, so layouts mirror
   automatically. The rules below cover direction-specific exceptions.
   ========================================================================== */

/* Flip directional glyphs (chevrons, arrows) when the document is RTL. */
[dir="rtl"] .flip-rtl {
  transform: scaleX(-1);
}

/* Latin identifiers (SKUs, emails, code) should not be reordered by RTL text. */
.text-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* WordPress accessibility helper / skip link. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed !important;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: var(--z-skip-link);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  overflow: visible;
  clip-path: none;
  white-space: normal;
  border: var(--border-width-strong) solid var(--color-primary);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  text-decoration: none;
}

/* ==========================================================================
   6. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   7. SHARED UTILITIES & COMPONENTS
   ========================================================================== */

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.15em;
}

.icon--sm {
  width: 1em;
  height: 1em;
}

.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.site-main {
  flex: 1 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.6;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

.eyebrow--light {
  color: var(--orange-300);
}

.eyebrow--light::before {
  background-color: var(--color-primary);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding-inline: var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.button:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.button:active {
  background-color: var(--color-primary-active);
  transform: translateY(1px);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

.button .icon {
  width: 1.1em;
  height: 1.1em;
}

.button--outline {
  border-color: var(--color-border-strong);
  background-color: transparent;
  color: var(--color-heading);
}

.button--outline:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.button--light {
  background-color: var(--color-white);
  color: var(--color-ink);
}

.button--light:hover {
  background-color: var(--gray-100);
  color: var(--color-ink);
}

.button--block {
  width: 100%;
}

/* Keep focus indicators visible on dark surfaces. */
.primary-menu > li > a:focus-visible,
.site-footer :focus-visible,
.hero-card--main :focus-visible,
.mid-promo-banner :focus-visible {
  outline-color: var(--color-focus-inverse);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
}

.text-link:hover {
  color: var(--color-link-hover);
}

.text-link .icon {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.text-link:hover .icon {
  transform: translateX(3px);
}

[dir="rtl"] .text-link:hover .icon.flip-rtl {
  transform: translateX(-3px) scaleX(-1);
}

/* ==========================================================================
   8. HEADER
   ========================================================================== */

.site-header {
  position: relative;
  z-index: var(--z-sticky);
  background-color: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-border);
}

.header-top {
  border-block-end: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.header-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 38px;
}

.header-top__contact,
.header-top__account {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.header-top__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  line-height: 1.5;
  transition: color var(--duration-fast) var(--ease-standard);
}

.header-top__link:hover {
  color: var(--color-primary-text);
}

.header-top__link--muted {
  color: var(--color-text-subtle);
}

.header-top__link--accent {
  color: var(--color-primary-text);
  font-weight: var(--weight-semibold);
}

.header-top__divider {
  width: 1px;
  height: 12px;
  background-color: var(--color-border-strong);
}

.header-main {
  padding-block: clamp(0.9rem, 2vw, 1.5rem);
}

.header-main__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
}

.site-branding {
  min-width: 0;
}

.site-branding__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-heading);
}

.site-branding__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-ink);
  box-shadow: var(--shadow-xs);
}

.site-branding__mark-icon {
  width: 27px;
  height: 27px;
}

.site-branding__copy {
  display: grid;
  min-width: 0;
}

.site-branding__name {
  color: var(--color-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  line-height: 1.25;
  letter-spacing: 0;
}

.site-branding__tagline {
  margin-block-start: 2px;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.custom-logo {
  width: auto;
  max-height: 56px;
}

.header-search {
  position: relative;
  width: 100%;
  max-width: 680px;
  justify-self: center;
}

.header-search__form {
  display: flex;
  align-items: stretch;
  min-height: 50px;
  overflow: hidden;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.header-search__form:hover {
  border-color: var(--gray-400);
}

.header-search__form:focus-within {
  border-color: var(--color-primary-text);
  box-shadow:
    0 0 0 3px rgb(255 107 0 / 16%),
    var(--shadow-xs);
}

.header-search__input {
  min-width: 0;
  height: auto;
  flex: 1;
  align-self: stretch;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--space-4);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: start;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
}

.header-search__input:hover,
.header-search__input:focus,
.header-search__input:focus-visible,
.header-search__input:active {
  border: 0;
  background-color: transparent;
  outline: none;
  box-shadow: none;
}

.header-search__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.header-search__submit {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  flex: 0 0 56px;
  border: 0;
  border-radius: 0;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.header-search__submit:hover {
  background-color: var(--color-primary-hover);
}

.header-search__submit:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -6px;
}

.header-search__submit .icon {
  width: 22px;
  height: 22px;
}

.header-search__submit-icon {
  transition: opacity 0.18s ease;
}

.header-search__form.is-loading .header-search__submit-icon {
  opacity: 0;
}

.header-search__spinner {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: block;
  width: 18px;
  height: 18px;
  margin-block-start: -9px;
  margin-inline-start: -9px;
  border: 2px solid rgb(11 13 16 / 25%);
  border-block-start-color: var(--color-on-primary);
  border-radius: var(--radius-circle);
  animation: abzar-search-spin 0.7s linear infinite;
  pointer-events: none;
}

@keyframes abzar-search-spin {
  to {
    transform: rotate(360deg);
  }
}

.ajax-search-results {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: var(--z-dropdown);
  max-height: 400px;
  margin-block-start: var(--space-2);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}

.ajax-search-results:not([hidden]) {
  animation: abzar-search-results-in 0.18s ease;
}

@keyframes abzar-search-results-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ajax-search-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background-color 0.2s ease;
}

.ajax-search-result:last-child {
  border-block-end: 0;
}

.ajax-search-result:hover,
.ajax-search-result:focus-visible {
  background-color: var(--color-bg-subtle);
}

.ajax-search-result:focus-visible {
  outline-offset: -2px;
}

.ajax-search-result__media {
  display: grid;
  width: 52px;
  height: 52px;
  flex: none;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-subtle);
}

.ajax-search-result__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ajax-search-result__content {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.ajax-search-result__title {
  overflow: hidden;
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ajax-search-result:hover .ajax-search-result__title {
  color: var(--color-primary-text);
}

.ajax-search-result__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--color-primary-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

.ajax-search-result__price del {
  color: var(--color-text-subtle);
  font-size: 10px;
  font-weight: var(--weight-regular);
}

.ajax-search-result__price ins {
  color: var(--color-primary-text);
  text-decoration: none;
}

.ajax-search-result__price .woocommerce-Price-currencySymbol {
  font-size: 0.85em;
  font-weight: var(--weight-regular);
}

.ajax-search-results__message {
  margin: 0;
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  text-align: center;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  justify-self: end;
}

.header-action {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 58px;
  min-height: 50px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.header-action:hover,
.header-action:focus-visible {
  background-color: transparent;
  color: var(--color-primary);
  transform: translateY(-1px);
}

.header-action__icon {
  width: 24px;
  height: 24px;
  transition: color 0.3s ease;
}

.header-action__icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.header-action__count {
  position: absolute;
  top: -6px;
  right: -8px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  place-items: center;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 2px 5px rgb(11 13 16 / 14%);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-heading);
  cursor: pointer;
}

.menu-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

.menu-toggle[aria-expanded="true"] {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.menu-toggle__icon {
  width: 26px;
  height: 26px;
}

.header-nav {
  background-color: var(--color-surface-dark);
  color: var(--color-text-inverse);
}

.header-nav__inner {
  display: flex;
  align-items: stretch;
  min-height: 54px;
}

.category-menu-wrapper {
  position: relative;
  flex: 0 0 auto;
}

.category-trigger {
  display: flex;
  width: 260px;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-inline: var(--space-5);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.category-trigger:hover,
.category-menu-wrapper:hover .category-trigger,
.category-menu-wrapper:focus-within .category-trigger {
  background-color: var(--color-primary-hover);
}

.category-trigger__icon {
  width: 20px;
  height: 20px;
}

.category-trigger__label {
  min-width: 0;
  flex: 1;
  text-align: start;
}

.category-trigger__arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.category-menu-wrapper:hover .category-trigger__arrow,
.category-menu-wrapper:focus-within .category-trigger__arrow {
  transform: rotate(180deg);
}

.category-dropdown {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  width: 280px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-block-start: 3px solid var(--color-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.category-menu-wrapper:hover .category-dropdown,
.category-menu-wrapper:focus-within .category-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.category-dropdown__nav {
  padding: var(--space-2);
}

.category-dropdown__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-dropdown__list li {
  min-width: 0;
}

.category-dropdown__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.6;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.category-dropdown__list a:hover,
.category-dropdown__list a:focus-visible {
  background-color: var(--color-bg-subtle);
  color: var(--color-primary-text);
  transform: translateX(-5px);
}

.category-list__count {
  display: inline-grid;
  min-width: 22px;
  padding: 1px 6px;
  place-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-subtle);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.category-dropdown__list a:hover .category-list__count,
.category-dropdown__list a:focus-visible .category-list__count {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.category-dropdown__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-primary-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.category-dropdown__all:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-link-hover);
}

.category-list-empty {
  margin: 0;
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.primary-navigation {
  min-width: 0;
  flex: 1;
}

.primary-menu {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-menu > li {
  position: relative;
  display: flex;
}

.primary-menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: clamp(10px, 1.2vw, 18px);
  color: #e7edf4;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.primary-menu > li > a::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: clamp(10px, 1.2vw, 18px);
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.primary-menu > li > a:hover,
.primary-menu > li > a:focus-visible {
  color: var(--color-primary);
}

.primary-menu > li > a:hover::before,
.primary-menu > li > a:focus-visible::before {
  transform: scaleX(1);
}

.primary-menu > .current-menu-item > a,
.primary-menu > .current_page_item > a,
.primary-menu > .current-menu-ancestor > a {
  color: var(--color-primary);
}

.primary-menu > .current-menu-item > a::before,
.primary-menu > .current_page_item > a::before,
.primary-menu > .current-menu-ancestor > a::before {
  transform: scaleX(1);
}

.primary-menu > .menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline-start: 3px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
}

.primary-menu .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  min-width: 230px;
  margin: 0;
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-block-start: 3px solid var(--color-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    visibility var(--duration-fast) var(--ease-standard);
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-menu .sub-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: normal;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
  background-color: var(--color-bg-subtle);
  color: var(--color-primary-text);
}

/* ==========================================================================
   9. MOBILE MENU
   ========================================================================== */

body.has-open-mobile-menu {
  overflow: hidden;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-backdrop);
  animation: abzar-fade-in var(--duration-base) var(--ease-standard);
}

.mobile-menu__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  width: min(390px, 92vw);
  height: 100%;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  overflow-y: auto;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xl);
  animation: abzar-slide-in var(--duration-base) var(--ease-out);
}

[dir="ltr"] .mobile-menu__panel {
  animation-name: abzar-slide-in-ltr;
}

@keyframes abzar-slide-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes abzar-slide-in-ltr {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes abzar-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-width) solid var(--color-border);
}

.mobile-menu__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
}

.mobile-menu__brand .site-branding__mark {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
}

.mobile-menu__brand .site-branding__mark-icon {
  width: 22px;
  height: 22px;
}

.mobile-menu__close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.mobile-menu__close:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-primary-text);
}

.mobile-menu__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 4px;
  border-block-end: var(--border-width) solid var(--color-border);
  color: var(--color-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.mobile-menu__list a:hover {
  color: var(--color-primary-text);
}

.mobile-menu__categories {
  border-block: var(--border-width) solid var(--color-border);
}

.mobile-menu__categories summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  color: var(--color-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}

.mobile-menu__categories summary::-webkit-details-marker {
  display: none;
}

.mobile-menu__categories summary .icon {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.mobile-menu__categories[open] summary .icon {
  transform: rotate(180deg);
}

.mobile-categories-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0 0 var(--space-3);
  list-style: none;
}

.mobile-categories-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 8px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.mobile-categories-list a:hover {
  color: var(--color-primary-text);
}

.mobile-menu__account {
  display: grid;
  gap: var(--space-2);
}

.mobile-menu__contact {
  display: grid;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: var(--border-width) solid var(--color-border);
}

.mobile-menu__contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.mobile-menu__contact a:hover {
  color: var(--color-primary-text);
}

.mobile-menu__contact .icon {
  color: var(--color-primary-text);
}

/* ==========================================================================
   10. HERO
   ========================================================================== */

.hero {
  padding-block: clamp(1.25rem, 2.5vw, 2.25rem) clamp(2rem, 4vw, 3.5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: var(--space-5);
}

.hero__side {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  isolation: isolate;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero-card:hover {
  transform: translateY(-5px);
}

/* --- Main banner -------------------------------------------------------- */
.hero-card--main {
  display: flex;
  align-items: center;
  min-height: 472px;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  padding-inline-end: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid rgb(255 255 255 / 5%);
  background:
    radial-gradient(circle at 14% 112%, rgb(255 107 0 / 34%), transparent 46%),
    radial-gradient(circle at 88% 8%, rgb(90 140 255 / 12%), transparent 40%),
    linear-gradient(140deg, #162840 0%, var(--color-surface-dark) 48%, #050a12 100%);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgb(255 255 255 / 6%);
  color: var(--color-text-inverse);
}

.hero-card--main:hover {
  box-shadow:
    var(--shadow-xl),
    0 32px 72px rgb(5 10 18 / 45%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

.hero-card--main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 25% 50%, #000 0%, transparent 72%);
  pointer-events: none;
}

.hero-card--main::after {
  content: "";
  position: absolute;
  inset-block-end: -34%;
  inset-inline-end: -14%;
  z-index: 0;
  width: 58%;
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgb(255 107 0 / 20%), transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}

.hero-card--main .hero-card__content {
  position: relative;
  z-index: 2;
  max-width: min(54%, 470px);
}

.hero-card__title {
  margin-block: var(--space-3) var(--space-4);
  color: var(--color-text-inverse);
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  font-weight: var(--weight-extrabold);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgb(5 10 18 / 30%);
}

.hero-card__text {
  max-width: 42ch;
  color: var(--color-text-inverse-muted);
  font-size: var(--text-lg);
  line-height: 1.8;
  text-wrap: pretty;
}

.hero-card__cta {
  margin-block-start: var(--space-6);
  box-shadow: var(--shadow-primary);
}

.hero-card__media {
  position: absolute;
  inset-block-end: -5%;
  inset-inline-end: -4%;
  z-index: 1;
  width: min(46%, 460px);
  pointer-events: none;
}

.hero-card__media img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 42px rgb(0 0 0 / 40%));
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero-card:hover .hero-card__media img {
  transform: scale(1.05) translateY(-4px);
}

.hero-card--compact {
  display: flex;
  align-items: center;
  min-height: 226px;
  padding: var(--space-6);
  padding-inline-end: clamp(5.5rem, 34%, 9.5rem);
}

.hero-card--tools {
  border: 1px solid rgb(16 29 48 / 6%);
  background:
    radial-gradient(circle at 12% 108%, rgb(255 107 0 / 16%), transparent 46%),
    linear-gradient(145deg, #ffffff 0%, var(--color-surface-muted) 58%, #e6ebf1 100%);
  box-shadow: var(--shadow-sm);
}

.hero-card--tools:hover {
  box-shadow: var(--shadow-lg);
}

.hero-card--shipping {
  border: 1px solid rgb(255 255 255 / 18%);
  background:
    radial-gradient(circle at 18% 112%, rgb(255 255 255 / 28%), transparent 42%),
    radial-gradient(circle at 92% 6%, rgb(255 196 140 / 30%), transparent 38%),
    linear-gradient(135deg, var(--orange-400) 0%, var(--color-primary) 46%, var(--orange-700) 100%);
  box-shadow: 0 18px 36px rgb(255 107 0 / 22%);
  color: var(--color-on-primary);
}

.hero-card--shipping:hover {
  box-shadow: 0 28px 54px rgb(255 107 0 / 32%);
}

.hero-card--compact .hero-card__content {
  position: relative;
  z-index: 2;
  max-width: 34ch;
}

.hero-card__compact-title {
  margin-block: 6px var(--space-2);
  color: var(--color-heading);
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  font-weight: var(--weight-extrabold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero-card__compact-text {
  max-width: 34ch;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.hero-card--shipping .eyebrow,
.hero-card--shipping .hero-card__compact-title,
.hero-card--shipping .hero-card__compact-text,
.hero-card--shipping .text-link {
  color: var(--color-on-primary);
}

.hero-card--shipping .eyebrow::before {
  background-color: currentColor;
}

.hero-card--shipping .hero-card__compact-text {
  color: rgb(11 13 16 / 78%);
}

.hero-card--shipping .text-link:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.hero-card__compact-image {
  position: absolute;
  inset-block-end: -12px;
  inset-inline-end: -14px;
  z-index: 1;
  width: clamp(100px, 36%, 180px);
  height: auto;
  filter: drop-shadow(0 16px 24px rgb(16 29 48 / 16%));
  pointer-events: none;
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero-card:hover .hero-card__compact-image {
  transform: scale(1.05) translateY(-3px);
}

/* ==========================================================================
   11. FEATURES
   ========================================================================== */

.features {
  padding-block: var(--space-6);
  border-block: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg-subtle);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.feature {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding-inline: var(--space-2);
}

.feature__icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: none;
  place-items: center;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.feature__icon .icon {
  width: 25px;
  height: 25px;
}

.feature__title {
  margin-block-end: 2px;
  color: var(--color-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

.feature__text {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.65;
}

/* ==========================================================================
   12. HOMEPAGE SECTIONS & PRODUCT CARDS
   ========================================================================== */

.home-section {
  padding-block: var(--section-space);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-block-end: var(--space-8);
}

.section-heading__copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.section-heading__title {
  font-size: var(--text-3xl);
  line-height: 1.3;
}

.section-heading__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding-block: 4px;
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: color var(--duration-fast) var(--ease-standard);
}

.section-heading__link:hover {
  color: var(--color-link-hover);
}

.section-heading__link .icon {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.section-heading__link:hover .icon {
  transform: translateX(3px);
}

[dir="rtl"] .section-heading__link:hover .icon.flip-rtl {
  transform: translateX(-3px) scaleX(-1);
}

.section-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  text-align: center;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.product-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.product-card:hover,
.product-card:focus-within {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.product-card__media {
  position: relative;
  display: flex;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(0.75rem, 1.6vw, 1.25rem);
  background-color: var(--color-bg-subtle);
}

.product-card__media-link {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-card:hover .product-card__image,
.product-card:focus-within .product-card__image {
  transform: scale(1.08);
}

.product-card__badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 20px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  box-shadow: 0 4px 12px rgb(255 107 0 / 30%);
}

.product-card__badge--out {
  background-color: var(--color-ink);
  color: var(--color-white);
  box-shadow: var(--shadow-xs);
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.product-card__title {
  display: -webkit-box;
  min-height: 3em;
  overflow: hidden;
  color: var(--color-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.product-card__title a {
  color: inherit;
}

.product-card__title a:hover {
  color: var(--color-primary-text);
}

.product-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-block-start: 0;
  color: var(--color-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

.product-card__price del {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  text-decoration-thickness: 1px;
}

.product-card__price ins {
  color: var(--color-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.product-card__price .woocommerce-Price-currencySymbol {
  font-size: 0.8em;
  font-weight: var(--weight-regular);
}

.product-card__actions {
  margin-block-start: auto;
  padding-block-start: var(--space-2);
}

.product-card__cart {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  box-shadow: none;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.product-card__cart:hover,
.product-card__cart:focus-visible {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary);
}

.product-card__cart .icon {
  width: 1.15em;
  height: 1.15em;
}

.product-card__actions .button--outline {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface);
  color: var(--color-heading);
}

.product-card__actions .button--outline:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-muted);
  color: var(--color-heading);
  box-shadow: none;
}

/* ==========================================================================
   13. MID-PAGE PROMO
   ========================================================================== */

.mid-promo-banner {
  --mid-promo-bg-image: none;
  position: relative;
  width: 100%;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 5%);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 84% 18%, rgb(255 107 0 / 18%), transparent 46%),
    linear-gradient(135deg, rgb(16 29 48 / 94%) 0%, rgb(5 10 17 / 97%) 100%),
    var(--mid-promo-bg-image, none) center / cover no-repeat;
  color: var(--color-text-inverse);
  isolation: isolate;
}

.mid-promo-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 30% 50%, #000 0%, transparent 72%);
  pointer-events: none;
}

.mid-promo-banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.mid-promo-banner__content {
  max-width: 600px;
}

.mid-promo-banner .eyebrow {
  color: var(--color-primary);
}

.mid-promo-banner .eyebrow::before {
  background-color: currentColor;
}

.mid-promo-banner__title {
  margin-block: var(--space-3) var(--space-4);
  color: var(--color-white);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: var(--weight-extrabold);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mid-promo-banner__text {
  max-width: 55ch;
  color: var(--color-text-inverse-muted);
  font-size: var(--text-lg);
  line-height: 1.8;
  text-wrap: pretty;
}

.mid-promo-banner__cta {
  margin-block-start: var(--space-6);
  border-color: var(--color-white);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  color: var(--color-ink);
  font-weight: var(--weight-bold);
  box-shadow: 0 12px 28px rgb(0 0 0 / 22%);
}

.mid-promo-banner__cta:hover,
.mid-promo-banner__cta:focus-visible {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary);
}

.mid-promo-banner__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.mid-promo-banner__image::before {
  content: "";
  position: absolute;
  inset-block-end: 6%;
  width: min(72%, 300px);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgb(255 107 0 / 24%), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

.mid-promo-banner__image img {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  height: auto;
  filter: drop-shadow(0 20px 30px rgb(0 0 0 / 50%));
  transform: translateY(0) scale(1);
  transition: transform 0.4s ease;
  will-change: transform;
}

.mid-promo-banner:hover .mid-promo-banner__image img,
.mid-promo-banner:focus-within .mid-promo-banner__image img {
  transform: translateY(-10px) scale(1.02);
}

/* ==========================================================================
   14. ARTICLE CARDS
   ========================================================================== */

.post-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.post-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.post-card:hover,
.post-card:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-bg-subtle);
}

.post-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.post-card:hover .post-card__image,
.post-card:focus-within .post-card__image {
  transform: scale(1.04);
}

.post-card__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background:
    radial-gradient(circle at 28% 20%, rgb(255 107 0 / 22%), transparent 46%),
    linear-gradient(135deg, #1b2d47, var(--color-surface-dark) 55%, #0a1421);
  color: var(--color-primary);
}

.post-card__placeholder-icon {
  width: 64px;
  height: 64px;
  opacity: 0.5;
}

.post-card__date {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  display: flex;
  min-width: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background-color: rgb(255 255 255 / 95%);
  color: var(--color-ink);
  line-height: 1.1;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.post-card__date-day {
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
}

.post-card__date-month {
  margin-block-start: 2px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: var(--weight-medium);
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-5);
}

.post-card__title {
  display: -webkit-box;
  min-height: 3.4em;
  overflow: hidden;
  color: var(--color-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.post-card__title a:hover {
  color: var(--color-primary-text);
}

.post-card__excerpt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.75;
}

.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: auto;
  padding-block-start: var(--space-2);
  color: var(--color-primary-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  transition: color var(--duration-fast) var(--ease-standard);
}

.post-card__more:hover {
  color: var(--color-link-hover);
}

.post-card__more .icon {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.post-card__more:hover .icon {
  transform: translateX(3px);
}

[dir="rtl"] .post-card__more:hover .icon.flip-rtl {
  transform: translateX(-3px) scaleX(-1);
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer {
  flex-shrink: 0;
  border-block-start: 4px solid var(--color-primary);
  background:
    radial-gradient(circle at 12% 0%, rgb(255 107 0 / 10%), transparent 34%),
    var(--color-surface-dark);
  color: var(--color-text-inverse);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1.25fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.footer-brand {
  min-width: 0;
}

.footer-brand__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-inverse);
}

.footer-brand .custom-logo-link {
  display: inline-block;
  margin-block-end: var(--space-4);
}

.footer-brand .custom-logo,
.footer-brand__logo {
  width: auto;
  max-height: 56px;
}

.footer-brand .custom-logo,
.footer-brand__logo--invert {
  filter: brightness(0) invert(1);
}

.footer-brand__name {
  color: var(--color-text-inverse);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
}

.footer-brand .site-branding__mark {
  width: 42px;
  height: 42px;
}

.footer-brand .site-branding__mark-icon {
  width: 24px;
  height: 24px;
}

.footer-brand__text {
  max-width: 36ch;
  margin-block-start: var(--space-4);
  color: var(--color-text-inverse-muted);
  font-size: var(--text-sm);
  line-height: 1.9;
}

.footer-widget {
  min-width: 0;
}

.footer-widget__title {
  position: relative;
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-3);
  color: var(--color-text-inverse);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

.footer-widget__title::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 30px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
}

.footer-menu {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu a {
  display: inline-block;
  color: var(--color-text-inverse-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer-menu a:hover {
  color: var(--orange-300);
}

.footer-menu .footer-menu__all {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.footer-contact {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-text-inverse-muted);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.footer-contact .icon {
  width: 18px;
  height: 18px;
  margin-block-start: 3px;
  color: var(--color-primary);
}

.footer-contact a {
  color: inherit;
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer-contact a:hover {
  color: var(--orange-300);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

.social-links__link {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: var(--border-width) solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-sm);
  background-color: rgb(255 255 255 / 3%);
  color: var(--color-text-inverse-muted);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.social-links__link:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.social-links__link .icon {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  border-block-start: var(--border-width) solid rgb(255 255 255 / 9%);
  background-color: rgb(0 0 0 / 16%);
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.footer-copyright {
  color: var(--color-text-inverse-muted);
  font-size: var(--text-xs);
  line-height: 1.7;
}

.footer-signature {
  display: inline-block;
  margin-inline-start: 8px;
  color: var(--color-text-inverse-muted);
}

.footer-signature a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer-signature a:hover {
  color: var(--gray-300);
}

.footer-trust-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.footer-trust-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #fff;
  line-height: 0;
}

.footer-trust-badge a {
  display: block;
  line-height: 0;
}

.footer-trust-badge img,
.footer-trust-badge iframe,
.footer-trust-badge svg {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 60px;
  height: auto;
  border: 0;
}

/* ==========================================================================
   16. FALLBACK PAGES & EDITORIAL CONTENT
   ========================================================================== */

.page-shell {
  padding-block: var(--section-space);
}

.page-header {
  margin-block-end: var(--space-8);
}

.single .page-header {
  max-width: 900px;
  margin-inline: auto;
}

.page-title {
  font-size: var(--text-3xl);
  line-height: 1.3;
}

.page-description {
  max-width: 70ch;
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.8;
}

.post-list {
  display: grid;
  gap: var(--space-6);
}

.entry-card {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.entry-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.entry-card--single {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}

.entry-card__media {
  display: block;
  min-height: 220px;
  overflow: hidden;
  background-color: var(--color-bg-subtle);
}

.entry-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.entry-card:hover .entry-card__image {
  transform: scale(1.03);
}

.entry-card__body {
  min-width: 0;
  padding: var(--space-6);
}

.entry-card__title {
  font-size: var(--text-xl);
  line-height: 1.5;
}

.entry-card__title a:hover {
  color: var(--color-primary-text);
}

.entry-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.entry-card__excerpt {
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.entry-card__excerpt p {
  margin: 0;
}

.entry-card__link {
  margin-block-start: var(--space-5);
}

.entry-card__content {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

:where(.entry-content, .entry-card__content) > * + * {
  margin-block-start: 1.25em;
}

:where(.entry-content, .entry-card__content) :is(h2, h3, h4) {
  margin-block-start: 1.6em;
  margin-block-end: 0.5em;
}

:where(.entry-content, .entry-card__content) h2 {
  font-size: var(--text-2xl);
}

:where(.entry-content, .entry-card__content) h3 {
  font-size: var(--text-xl);
}

:where(.entry-content, .entry-card__content) h4 {
  font-size: var(--text-lg);
}

:where(.entry-content, .entry-card__content) :is(ul, ol) {
  padding-inline-start: 1.5em;
  list-style: revert;
}

:where(.entry-content, .entry-card__content) blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--color-primary);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.8;
}

:where(.entry-content, .entry-card__content) a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 0.18em;
}

:where(.entry-content, .entry-card__content) a:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

.entry-card__content .page-links {
  margin-block-start: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.no-results {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 680px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-subtle);
  text-align: center;
}

.no-results > p {
  max-width: 52ch;
  color: var(--color-text-muted);
  line-height: 1.8;
}

/* WordPress search form. */
.search-form {
  display: flex;
  width: 100%;
  max-width: 540px;
  min-height: 48px;
  overflow: hidden;
  border: 2px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.search-form:focus-within {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgb(255 107 0 / 22%);
}

.search-form label {
  display: block;
  min-width: 0;
  flex: 1;
}

.search-field {
  width: 100%;
  min-height: 44px;
  padding-inline: var(--space-4);
  border: 0;
  background-color: transparent;
  font-size: var(--text-sm);
}

.search-field:focus-visible {
  outline: none;
}

.search-submit {
  flex: none;
  padding-inline: var(--space-5);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.search-submit:hover {
  background-color: var(--color-primary-hover);
}

.pagination {
  margin-block-start: var(--space-10);
}

.pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.pagination .page-numbers {
  display: inline-grid;
  min-width: 40px;
  height: 40px;
  padding-inline: 10px;
  place-items: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.pagination .page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

.pagination .page-numbers.current {
  border-color: var(--color-ink);
  background-color: var(--color-ink);
  color: var(--color-white);
}

.pagination .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, 1fr);
  }

  .hero-card--main {
    min-height: 446px;
    padding: clamp(1.5rem, 3.4vw, 2.75rem);
    padding-inline-end: clamp(1.75rem, 4vw, 3rem);
  }

  .hero-card--compact {
    min-height: 213px;
    padding: var(--space-5);
    padding-inline-end: clamp(5rem, 34%, 8rem);
  }

  .hero-card__compact-title {
    font-size: var(--text-lg);
  }
}

@media (max-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-action__label {
    display: none;
  }

  .header-action {
    min-width: 46px;
  }

  .primary-menu > li > a {
    padding-inline: 12px;
  }
}

@media (max-width: 1024px) {
  .features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .feature {
    padding-block: var(--space-2);
  }

  .header-nav {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

  .header-main__inner {
    gap: var(--space-4);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .header-main__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-3);
  }

  .site-branding {
    grid-column: 1;
    grid-row: 1;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .hero-card--main {
    min-height: 430px;
    padding-inline-end: clamp(1.75rem, 5vw, 3.5rem);
  }

  .hero-card--main .hero-card__content {
    max-width: min(52%, 470px);
  }

  .hero-card__media {
    width: min(44%, 430px);
  }

  .hero-card--compact {
    min-height: 218px;
  }

  .mid-promo-banner__inner {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: var(--space-5);
  }
}

@media (max-width: 767px) {
  .header-top {
    display: none;
  }

  .header-main {
    padding-block: var(--space-3);
  }

  .header-main__inner {
    gap: var(--space-2) var(--space-3);
  }

  .site-branding__mark {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
  }

  .site-branding__mark-icon {
    width: 24px;
    height: 24px;
  }

  .site-branding__name {
    font-size: 1.0625rem;
  }

  .site-branding__tagline {
    display: none;
  }

  .header-action {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 4px;
  }

  .header-action__icon {
    width: 23px;
    height: 23px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .header-search__form {
    min-height: 46px;
  }

  .header-search__submit {
    width: 50px;
    flex-basis: 50px;
  }

  .hero {
    padding-block-start: var(--space-4);
  }

  .hero__side {
    grid-template-columns: 1fr;
  }

  .hero-card--main {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: var(--space-6);
  }

  .hero-card--main .hero-card__content {
    max-width: none;
  }

  .hero-card__title {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .hero-card__text {
    font-size: var(--text-base);
  }

  .hero-card__media {
    position: relative;
    inset: auto;
    width: min(100%, 320px);
    margin-block-start: var(--space-4);
    align-self: flex-end;
  }

  .hero-card--compact {
    min-height: 198px;
    padding: var(--space-5);
    padding-inline-end: clamp(5.5rem, 34%, 8.5rem);
  }

  .hero-card__compact-image {
    width: clamp(96px, 34%, 150px);
    inset-block-end: -10px;
    inset-inline-end: -12px;
  }

  .features {
    padding-block: var(--space-5);
  }

  .features__grid {
    gap: var(--space-3);
  }

  .feature {
    gap: var(--space-3);
  }

  .feature__icon {
    width: 44px;
    height: 44px;
  }

  .feature__icon .icon {
    width: 22px;
    height: 22px;
  }

  .feature__text {
    font-size: 11px;
  }

  .home-section {
    padding-block: clamp(2.25rem, 7vw, 3rem);
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
  }

  .section-heading__title {
    font-size: var(--text-2xl);
  }

  .section-heading__link {
    font-size: var(--text-xs);
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .product-card__body {
    gap: 6px;
    padding: var(--space-3);
  }

  .product-card__title {
    min-height: 3em;
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .product-card__price {
    gap: 4px 6px;
    font-size: var(--text-sm);
  }

  .product-card__price del {
    font-size: 11px;
  }

  .product-card__price ins {
    font-size: var(--text-base);
  }

  .product-card__badge {
    inset-block-start: 8px;
    inset-inline-start: 8px;
    padding: 4px 9px;
    font-size: 10px;
  }

  .product-card__actions {
    padding-block-start: 4px;
  }

  .product-card__cart {
    min-height: 40px;
    padding: 8px var(--space-3);
    font-size: var(--text-xs);
  }

  .product-card__cart .icon {
    width: 1em;
    height: 1em;
  }

  .mid-promo-banner {
    padding: var(--space-8) var(--space-5);
  }

  .mid-promo-banner__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .mid-promo-banner__title {
    font-size: clamp(1.85rem, 7vw, 2.6rem);
  }

  .mid-promo-banner__text {
    font-size: var(--text-base);
  }

  .mid-promo-banner__image img {
    width: min(70%, 240px);
    margin-block-start: var(--space-2);
  }

  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .post-card__body {
    padding: var(--space-3);
  }

  .post-card__title {
    min-height: 3.4em;
    font-size: var(--text-sm);
  }

  .post-card__date {
    inset-block-start: 8px;
    inset-inline-start: 8px;
    min-width: 42px;
    padding: 5px 6px;
  }

  .post-card__date-day {
    font-size: var(--text-base);
  }

  .entry-card {
    grid-template-columns: 1fr;
  }

  .entry-card__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .entry-card__body {
    padding: var(--space-4);
  }

  .entry-card__title {
    font-size: var(--text-lg);
  }

  .footer-grid {
    gap: var(--space-8) var(--space-5);
    padding-block: var(--space-10);
  }

  .footer-widget__title {
    margin-block-end: var(--space-4);
  }

  .footer-bottom__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-shell {
    padding-block: var(--space-8);
  }

  .page-title {
    font-size: var(--text-2xl);
  }

  .no-results {
    padding: var(--space-8) var(--space-4);
  }
}

@media (max-width: 560px) {
  .features__grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }

  .post-grid {
    grid-template-columns: 1fr;
  }

  .post-card__title {
    min-height: 0;
    font-size: var(--text-base);
  }

  .hero-card--compact {
    min-height: 186px;
    padding-inline-end: 5.5rem;
  }

  .hero-card__compact-image {
    width: 104px;
    inset-block-end: -8px;
    inset-inline-end: -10px;
  }

  .product-card__cart span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 420px) {
  .hero-card--main {
    padding: var(--space-5);
  }

  .hero-card__title {
    font-size: 1.9rem;
  }

  .hero-card__media {
    width: 250px;
  }

  .hero-card--compact {
    padding: var(--space-4);
    padding-inline-end: 5rem;
  }

  .hero-card__compact-title {
    font-size: var(--text-base);
  }

  .hero-card__compact-text {
    font-size: var(--text-xs);
  }

  .hero-card__compact-image {
    width: 92px;
  }

  .header-search__input {
    padding-inline: 12px;
    font-size: var(--text-xs);
  }

  .header-search__submit {
    width: 46px;
    flex-basis: 46px;
  }

  .header-actions {
    gap: 0;
  }

  .site-branding__link {
    gap: var(--space-2);
  }

  .product-card__cart {
    font-size: var(--text-xs);
  }

  .product-card__cart .icon {
    display: none;
  }

  .product-card__title {
    font-size: 0.8125rem;
  }

  .product-card__price {
    font-size: 0.8125rem;
  }

  .footer-grid {
    padding-block: var(--space-8);
  }
}

/* ==========================================================================
   19. CUSTOM HEADER LOGO (Theme Options)
   ========================================================================== */

.site-branding__custom-logo {
  display: block;
  max-height: 56px;
  width: auto;
  height: auto;
}

/* ==========================================================================
   18. CONTACT PAGE
   ========================================================================== */

.contact-page {
  padding-block: var(--section-space);
}

.contact-page-header {
  text-align: center;
  margin-block-end: var(--space-12);
}

.contact-page-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-heading);
  line-height: var(--leading-heading);
}

.contact-page-description {
  max-width: 62ch;
  margin-block-start: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* ---- Grid Layout ---- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

/* ---- Contact Info Cards ---- */

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.contact-info-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.contact-info-card__icon-wrap {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.contact-info-card__icon-wrap .icon {
  width: 22px;
  height: 22px;
}

.contact-info-card__content {
  min-width: 0;
  flex: 1;
}

.contact-info-card__title {
  margin-block-end: var(--space-1);
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.contact-info-card__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.contact-info-card__link {
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-standard);
}

.contact-info-card__link:hover {
  color: var(--color-link-hover);
}

.contact-info-card__text--placeholder {
  color: var(--color-text-subtle);
  font-style: italic;
  font-size: var(--text-xs);
}

/* ---- Social Media Section ---- */

.contact-social {
  margin-block-start: var(--space-3);
}

.contact-social__label {
  display: block;
  margin-block-end: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.contact-social__icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.contact-social__link {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.contact-social__link:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.contact-social__link .icon {
  width: 18px;
  height: 18px;
}

/* ---- Contact Form ---- */

.contact-form-wrapper {
  min-width: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__field label {
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.contact-form__required {
  color: var(--color-danger);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding-inline: var(--space-4);
  padding-block: var(--space-2);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: none;
}

.contact-form input[type="text"]:hover,
.contact-form input[type="email"]:hover,
.contact-form textarea:hover {
  border-color: var(--gray-400);
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  border-color: var(--color-primary-text);
  box-shadow:
    0 0 0 3px rgb(255 107 0 / 16%),
    var(--shadow-xs);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

.contact-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.contact-form__submit {
  min-height: 48px;
  padding-inline: var(--space-6);
  font-size: var(--text-sm);
}

.contact-form__submit .icon {
  width: 1.1em;
  height: 1.1em;
}

.contact-form__note {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  margin: 0;
  line-height: var(--leading-normal);
}

.contact-form__status {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  display: none;
}

.contact-form__status.is-success {
  display: block;
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

.contact-form__status.is-error {
  display: block;
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}

/* ---- Contact Form JavaScript Helper ---- */

.contact-form.is-submitting .contact-form__submit {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  transform: translateY(1px);
}

/* ==========================================================================
   18a. CONTACT PAGE RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .contact-form-wrapper {
    order: -1;
  }
}

@media (max-width: 767px) {
  .contact-page-header {
    margin-block-end: var(--space-8);
  }

  .contact-page-title {
    font-size: var(--text-3xl);
  }

  .contact-page-description {
    font-size: var(--text-sm);
  }

  .contact-info-card {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .contact-info-card__icon-wrap {
    width: 42px;
    height: 42px;
  }

  .contact-info-card__icon-wrap .icon {
    width: 20px;
    height: 20px;
  }

  .contact-form {
    padding: var(--space-5);
    gap: var(--space-4);
  }

  .contact-form__row {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .contact-form__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-form__submit {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .contact-page-header {
    margin-block-end: var(--space-6);
  }

  .contact-info-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .contact-info-card__icon-wrap {
    margin-block-end: 2px;
  }
}

/* ==========================================================================
   20. WOOCOMMERCE — SINGLE PRODUCT PAGE
   --------------------------------------------------------------------------
   Premium single-product layout for the Abzar Sardasht tool store.

   The gallery and summary are wrapped in .product-main-grid by
   abzarsardasht_product_main_grid_open()/close() in functions.php. Keeping
   tabs, upsells and related products outside that wrapper is what allows the
   gallery to stay sticky without sliding over the full-width sections below.

   RTL-first: with dir="rtl" on <html>, grid track 1 starts on the right, so
   the gallery (first DOM child) sits right and the summary sits left. Every
   offset below uses logical properties.

   Specificity note: assets/css/woocommerce.css is enqueued after style.css
   and targets the same components, so rules are scoped with
   .woocommerce-page .woocommerce-main div.product.type-product to win the
   cascade without !important.
   ========================================================================== */

/* ------------------------------------------------------------------ Task 1: main layout & grid */
.woocommerce-page .woocommerce-main div.product.type-product {
  display: block;
  margin-block-start: var(--space-8);
}

.woocommerce-page .woocommerce-main div.product.type-product > .product-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8) clamp(var(--space-6), 4vw, var(--space-12));
  align-items: start;
}

.woocommerce-page .woocommerce-main div.product.type-product > .product-main-grid > .woocommerce-product-gallery {
  grid-column: 1;
  min-width: 0;
}

.woocommerce-page .woocommerce-main div.product.type-product > .product-main-grid > .summary.entry-summary {
  grid-column: 2;
  min-width: 0;
  align-self: start;
}

/* Legacy WooCommerce float/width reset. */
.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery,
.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary,
.woocommerce-page .woocommerce-main div.product.type-product form.cart,
.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs,
.woocommerce-page .woocommerce-main div.product.type-product ul.tabs,
.woocommerce-page .woocommerce-main div.product.type-product .price {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0;
}

/* ------------------------------------------------------------------ Task 2: product gallery */
.woocommerce-page .woocommerce-main div.product.type-product div.woocommerce-product-gallery {
  position: sticky;
  top: 100px;
  align-self: start;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery .flex-viewport {
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__image > a {
  display: block;
  width: 100%;
  height: 100%;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__image img,
.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__image .wp-post-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__trigger {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-block-end: auto;
  inset-inline-end: var(--space-3);
  inset-inline-start: auto;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background-color: rgb(255 255 255 / 88%);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__trigger:hover {
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__trigger img,
.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__trigger svg {
  display: block;
  width: 20px;
  height: 20px;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__navigation,
.woocommerce-page .woocommerce-main div.product.type-product ol.flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce-page .woocommerce-main div.product.type-product ol.flex-control-thumbs li {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  margin: 0;
  padding: 0;
}

.woocommerce-page .woocommerce-main div.product.type-product ol.flex-control-thumbs li a {
  display: block;
  width: 100%;
  height: 100%;
}

.woocommerce-page .woocommerce-main div.product.type-product ol.flex-control-thumbs li img {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-subtle);
  object-fit: cover;
  opacity: 0.65;
  cursor: pointer;
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__navigation a:hover,
.woocommerce-page .woocommerce-main div.product.type-product ol.flex-control-thumbs li img:hover {
  opacity: 1;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-product-gallery__navigation a.active,
.woocommerce-page .woocommerce-main div.product.type-product ol.flex-control-thumbs li img.flex-active {
  border-color: var(--color-primary);
  opacity: 1;
}

/* ------------------------------------------------------------------ Task 3: product summary */
.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .product_title {
  margin: 0 0 var(--space-4);
  color: var(--color-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-6);
  border-block-end: var(--border-width) solid var(--color-border);
  color: var(--color-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .price del {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  opacity: 0.85;
}

.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .price ins {
  color: var(--color-primary);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  text-decoration: none;
}

.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .price ins .woocommerce-Price-currencySymbol {
  margin-inline-start: 2px;
  font-size: 0.7em;
  font-weight: var(--weight-regular);
}

.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .product_meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .product_meta > * {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}

.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .product_meta .sku {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .product_meta a {
  color: var(--color-primary-text);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
}

.woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .product_meta a:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ Task 4: add to cart form */
.woocommerce-page .woocommerce-main div.product.type-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  padding: 0;
  border: 0;
}

.woocommerce-page .woocommerce-main div.product.type-product form.cart .quantity {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background-color: transparent;
}

.woocommerce-page .woocommerce-main div.product.type-product form.cart .quantity input.qty {
  width: 56px;
  min-width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.woocommerce-page .woocommerce-main div.product.type-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-page .woocommerce-main div.product.type-product form.cart .quantity input.qty::-webkit-inner-spin-button {
  display: none;
  margin: 0;
  -webkit-appearance: none;
}

.woocommerce-page .woocommerce-main div.product.type-product form.cart .quantity input.qty:focus-visible {
  border-color: var(--color-primary);
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.woocommerce-page .woocommerce-main div.product.type-product form.cart button.single_add_to_cart_button {
  display: inline-flex;
  flex: 1 1 220px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-3) var(--space-8);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-align: center;
  box-shadow: var(--shadow-primary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.woocommerce-page .woocommerce-main div.product.type-product form.cart button.single_add_to_cart_button:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.woocommerce-page .woocommerce-main div.product.type-product form.cart button.single_add_to_cart_button:active {
  background-color: var(--color-primary-active);
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.woocommerce-page .woocommerce-main div.product.type-product form.cart button.single_add_to_cart_button:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.woocommerce-page .woocommerce-main div.product.type-product form.cart button.single_add_to_cart_button[disabled],
.woocommerce-page .woocommerce-main div.product.type-product form.cart button.single_add_to_cart_button.loading {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------------ Task 5: product tabs */
.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs {
  margin-block-start: var(--space-12);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs::before,
.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs::after {
  content: none;
  display: none;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs li::before,
.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs li::after {
  content: none;
  display: none;
  border: 0;
  box-shadow: none;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs li a:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-heading);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs li.active a {
  border-color: var(--color-border);
  border-bottom-color: var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-xs);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs .panel {
  margin-block: 0 var(--space-6);
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs .panel.entry-content {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs .panel > :first-child {
  margin-block-start: 0;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs .panel > :last-child {
  margin-block-end: 0;
}

.woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs .panel.entry-content > * + * {
  margin-block-start: var(--space-4);
}

/* ------------------------------------------------------------------ Task 6: related products */
.woocommerce-page .woocommerce-main div.product.type-product .related.products {
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-10);
  border-block-start: var(--border-width) solid var(--color-border);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products > h2 {
  position: relative;
  display: inline-block;
  margin: 0 0 var(--space-6);
  padding-block-end: var(--space-3);
  color: var(--color-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products > h2::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 48px;
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products ul.products,
.woocommerce-page .woocommerce-main div.product.type-product .related.products .products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product:hover,
.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product .woocommerce-loop-product__link img,
.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product > a.woocommerce-LoopProduct-link img {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: clamp(0.75rem, 1.6vw, 1.25rem);
  border: 0;
  border-radius: 0;
  background-color: var(--color-bg-subtle);
  object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-out);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product:hover img,
.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product:focus-within img {
  transform: scale(1.06);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products .woocommerce-loop-product__title {
  display: -webkit-box;
  min-height: calc(3em + var(--space-4));
  margin: 0;
  padding: var(--space-4) var(--space-4) 0;
  overflow: hidden;
  color: var(--color-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  text-align: start;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  transition: color var(--duration-fast) var(--ease-standard);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product:hover .woocommerce-loop-product__title {
  color: var(--color-primary-text);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-4);
  color: var(--color-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  text-align: start;
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products .price del {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products .price ins {
  color: var(--color-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products .price .woocommerce-Price-currencySymbol {
  font-size: 0.8em;
  font-weight: var(--weight-regular);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product > .button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: calc(100% - (2 * var(--space-4)));
  min-height: 44px;
  margin: auto var(--space-4) var(--space-4);
  padding: 10px var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  text-align: center;
  box-shadow: none;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product > .button:hover,
.woocommerce-page .woocommerce-main div.product.type-product .related.products li.product > .button:focus-visible {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary);
}

/* ----------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
  .woocommerce-page .woocommerce-main div.product.type-product > .product-main-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .woocommerce-page .woocommerce-main div.product.type-product > .product-main-grid > .woocommerce-product-gallery,
  .woocommerce-page .woocommerce-main div.product.type-product > .product-main-grid > .summary.entry-summary {
    grid-column: 1 / -1;
  }

  .woocommerce-page .woocommerce-main div.product.type-product div.woocommerce-product-gallery {
    position: static;
    top: auto;
    max-width: 640px;
    margin-inline: auto;
  }

  /* Keep the sale badge pinned to the centered gallery, not the wider row. */
  .woocommerce-page .woocommerce-main div.product.type-product > .product-main-grid > .onsale {
    inset-inline-start: calc((100% - min(100%, 640px)) / 2 + var(--space-3));
  }
}

@media (max-width: 1023px) {
  .woocommerce-page .woocommerce-main div.product.type-product .related.products ul.products,
  .woocommerce-page .woocommerce-main div.product.type-product .related.products .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (max-width: 767px) {
  .woocommerce-page .woocommerce-main div.product.type-product {
    margin-block-start: var(--space-6);
  }

  .woocommerce-page .woocommerce-main div.product.type-product > .product-main-grid {
    gap: var(--space-6);
  }

  .woocommerce-page .woocommerce-main div.product.type-product div.woocommerce-product-gallery {
    padding: var(--space-3);
  }

  .woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .product_title {
    font-size: var(--text-3xl);
  }

  .woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .price,
  .woocommerce-page .woocommerce-main div.product.type-product .summary.entry-summary .price ins {
    font-size: var(--text-3xl);
  }

  .woocommerce-page .woocommerce-main div.product.type-product form.cart {
    gap: var(--space-3);
  }

  .woocommerce-page .woocommerce-main div.product.type-product form.cart button.single_add_to_cart_button {
    min-height: 56px;
    padding-inline: var(--space-4);
    font-size: var(--text-base);
  }

  .woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs {
    margin-block-start: var(--space-10);
  }

  .woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: var(--space-1);
    scrollbar-width: none;
  }

  .woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none;
  }

  .woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs li {
    flex: 0 0 auto;
  }

  .woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs ul.tabs li a {
    white-space: nowrap;
  }

  .woocommerce-page .woocommerce-main div.product.type-product .woocommerce-tabs .panel {
    padding: var(--space-4);
  }

  .woocommerce-page .woocommerce-main div.product.type-product .related.products {
    margin-block-start: var(--space-12);
    padding-block-start: var(--space-8);
  }

  .woocommerce-page .woocommerce-main div.product.type-product .related.products ul.products,
  .woocommerce-page .woocommerce-main div.product.type-product .related.products .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .woocommerce-page .woocommerce-main div.product.type-product .related.products .woocommerce-loop-product__title {
    font-size: var(--text-sm);
  }

  .woocommerce-page .woocommerce-main div.product.type-product .related.products .price {
    font-size: var(--text-sm);
  }

  .woocommerce-page .woocommerce-main div.product.type-product .related.products .price ins {
    font-size: var(--text-base);
  }

  .woocommerce-page .woocommerce-main div.product.type-product .related.products li.product > .button {
    min-height: 42px;
    font-size: var(--text-xs);
  }
}

@media (max-width: 560px) {
  .woocommerce-page .woocommerce-main div.product.type-product .related.products ul.products,
  .woocommerce-page .woocommerce-main div.product.type-product .related.products .products {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 380px) {
  .woocommerce-page .woocommerce-main div.product.type-product form.cart {
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  .woocommerce-page .woocommerce-main div.product.type-product form.cart button.single_add_to_cart_button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
  }
}

/* ==========================================================================
   21. WOOCOMMERCE — CHECKOUT
   --------------------------------------------------------------------------
   Iran-only classic checkout polish. The country fields are removed and the
   address fields reordered in functions.php; this section only handles the
   presentation of the remaining form, the order review, payment methods and
   the place-order action.

   Specificity note: assets/css/woocommerce.css is enqueued after style.css,
   so checkout rules are scoped with
   body.woocommerce-checkout form.woocommerce-checkout to win the cascade
   without !important.
   ========================================================================== */

/* ---- Form controls ------------------------------------------------------ */

body.woocommerce-checkout form.woocommerce-checkout .form-row input.input-text:not([type="checkbox"]):not([type="radio"]),
body.woocommerce-checkout form.woocommerce-checkout .form-row select,
body.woocommerce-checkout form.woocommerce-checkout .form-row textarea {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: none;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

body.woocommerce-checkout form.woocommerce-checkout .form-row input.input-text:not([type="checkbox"]):not([type="radio"]):hover,
body.woocommerce-checkout form.woocommerce-checkout .form-row select:hover,
body.woocommerce-checkout form.woocommerce-checkout .form-row textarea:hover {
  border-color: var(--gray-400);
}

body.woocommerce-checkout form.woocommerce-checkout .form-row input.input-text:not([type="checkbox"]):not([type="radio"]):focus,
body.woocommerce-checkout form.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout form.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout form.woocommerce-checkout .form-row input.input-text:not([type="checkbox"]):not([type="radio"]):focus-visible,
body.woocommerce-checkout form.woocommerce-checkout .form-row select:focus-visible,
body.woocommerce-checkout form.woocommerce-checkout .form-row textarea:focus-visible {
  border-color: var(--color-primary-text);
  outline: none;
  box-shadow: 0 0 0 3px rgb(255 107 0 / 16%);
}

/* Enhanced selects (the province field) mirror the same treatment. */
body.woocommerce-checkout form.woocommerce-checkout .form-row .select2-container--default .select2-selection--single {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

body.woocommerce-checkout form.woocommerce-checkout .form-row .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-checkout form.woocommerce-checkout .form-row .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary-text);
  box-shadow: 0 0 0 3px rgb(255 107 0 / 16%);
}

/* ---- Order review ------------------------------------------------------- */

body.woocommerce-checkout form.woocommerce-checkout #order_review table.shop_table {
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--color-bg-subtle);
}

body.woocommerce-checkout form.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout form.woocommerce-checkout #order_review table.shop_table td {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-block-start: 1px solid var(--color-border);
  background-color: transparent;
}

body.woocommerce-checkout form.woocommerce-checkout #order_review table.shop_table thead th,
body.woocommerce-checkout form.woocommerce-checkout #order_review table.shop_table thead td {
  border-block-start: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ---- Payment methods ---------------------------------------------------- */

body.woocommerce-checkout form.woocommerce-checkout #payment {
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-subtle);
  outline: none;
}

body.woocommerce-checkout form.woocommerce-checkout #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

body.woocommerce-checkout form.woocommerce-checkout #payment ul.payment_methods li {
  margin: 0 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  outline: none;
}

body.woocommerce-checkout form.woocommerce-checkout #payment ul.payment_methods li:last-child {
  margin-block-end: 0;
}

body.woocommerce-checkout form.woocommerce-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

body.woocommerce-checkout form.woocommerce-checkout #payment ul.payment_methods label {
  display: inline;
  margin: 0;
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  vertical-align: middle;
  cursor: pointer;
}

body.woocommerce-checkout form.woocommerce-checkout #payment ul.payment_methods input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  margin-inline-end: var(--space-2);
  accent-color: var(--color-primary);
  vertical-align: middle;
  cursor: pointer;
}

body.woocommerce-checkout form.woocommerce-checkout #payment ul.payment_methods input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

body.woocommerce-checkout form.woocommerce-checkout #payment div.payment_box {
  margin-block-start: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ---- Place order -------------------------------------------------------- */

body.woocommerce-checkout form.woocommerce-checkout #payment .place-order {
  margin: var(--space-4) 0 0;
  padding: 0;
}

body.woocommerce-checkout form.woocommerce-checkout #payment #place_order {
  width: 100%;
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  box-shadow: var(--shadow-primary);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

body.woocommerce-checkout form.woocommerce-checkout #payment #place_order:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

body.woocommerce-checkout form.woocommerce-checkout #payment #place_order:active {
  background-color: var(--color-primary-active);
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

body.woocommerce-checkout form.woocommerce-checkout #payment #place_order:focus-visible {
  outline: 2px solid var(--color-primary-text);
  outline-offset: 3px;
}

/* ==========================================================================
   22. BLOG ARCHIVE
   --------------------------------------------------------------------------
   Card grid used by home.php (the posts page). Mobile-first: one column,
   two from 768px, three from 1024px. Layout uses logical properties so the
   RTL page mirrors without direction-specific overrides.
   ========================================================================== */

.blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.blog-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width) solid var(--gray-200);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.blog-card:hover,
.blog-card:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

/* ---- Media -------------------------------------------------------------- */

.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-bg-subtle);
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.blog-card:hover .blog-card__image,
.blog-card:focus-within .blog-card__image {
  transform: scale(1.05);
}

.blog-card__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background:
    radial-gradient(circle at 28% 20%, rgb(255 107 0 / 22%), transparent 46%),
    linear-gradient(135deg, #1b2d47, var(--color-surface-dark) 55%, #0a1421);
  color: var(--color-primary);
}

.blog-card__placeholder-icon {
  width: 56px;
  height: 56px;
  opacity: 0.5;
}

/* ---- Body --------------------------------------------------------------- */

.blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.blog-card__meta-separator {
  color: var(--color-text-subtle);
}

.blog-card__title {
  color: var(--color-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.blog-card__title a {
  display: -webkit-box;
  overflow: hidden;
  transition: color var(--duration-fast) var(--ease-standard);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.blog-card__title a:hover {
  color: var(--color-primary-text);
}

.blog-card__excerpt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* the_excerpt() wraps its output in a paragraph; clamp it to two lines. */
.blog-card__excerpt p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ---- Read more ---------------------------------------------------------- */

.blog-card__more {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-inline: var(--space-5);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.blog-card__more:hover,
.blog-card__more:focus-visible {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
}

.blog-card__more .icon {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--duration-fast) var(--ease-standard);
}

/* Keep the decorative arrow flip and nudge it forward in RTL. */
[dir="rtl"] .blog-card__more:hover .icon.flip-rtl {
  transform: translateX(-3px) scaleX(-1);
}

/* ---- Responsive columns ------------------------------------------------- */

@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   23. ABOUT PAGE
   --------------------------------------------------------------------------
   RTL-first: grid track 1 starts on the right, so the copy column is the
   first DOM child and the media column follows on the left. All offsets use
   logical properties so the accent frame stays on the outer edge in RTL.
   ========================================================================== */

.about-page {
  padding-block: var(--section-space);
}

/* ---- Hero --------------------------------------------------------------- */

.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-block-end: var(--space-8);
}

.about-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.about-hero__rule {
  display: block;
  width: 64px;
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
}

.about-hero__title {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}

.about-hero__description {
  max-width: 52ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.9;
}

.about-hero__cta {
  margin-block-start: var(--space-2);
}

/* Orange accent frame sits behind the image, offset toward the page edge. */
.about-hero__media {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.about-hero__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: var(--space-5);
  inset-block-end: calc(var(--space-5) * -1);
  inset-inline-start: var(--space-5);
  inset-inline-end: calc(var(--space-5) * -1);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

.about-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.about-hero__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 25% 20%, var(--color-primary-soft), transparent 65%),
    var(--color-surface-muted);
  color: var(--color-primary);
}

.about-hero__placeholder .icon {
  width: 6rem;
  height: 6rem;
  opacity: 0.85;
}

/* ---- Stats -------------------------------------------------------------- */

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-block-end: var(--space-12);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-subtle);
  text-align: center;
}

.about-stat {
  display: grid;
  gap: var(--space-2);
  align-content: center;
}

.about-stat + .about-stat {
  border-inline-start: var(--border-width) solid var(--color-border);
}

.about-stat__value {
  color: var(--color-primary);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.about-stat__title {
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* ---- Editor content ----------------------------------------------------- */

.about-content {
  max-width: 800px;
  margin-inline: auto;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.8;
}

.about-content > * {
  margin-block: 0;
}

.about-content > * + * {
  margin-block-start: var(--space-5);
}

.about-content p {
  line-height: 1.8;
}

.about-content h2,
.about-content h3,
.about-content h4 {
  color: var(--color-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}

.about-content h2 {
  font-size: var(--text-3xl);
  margin-block-start: var(--space-10);
}

.about-content h3 {
  font-size: var(--text-2xl);
  margin-block-start: var(--space-8);
}

.about-content h4 {
  font-size: var(--text-xl);
}

.about-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.about-content a:hover {
  color: var(--color-link-hover);
}

.about-content img,
.about-content .wp-block-image img {
  height: auto;
  border-radius: var(--radius-md);
}

.about-content .wp-block-image {
  margin-block: var(--space-8);
}

.about-content ul,
.about-content ol {
  padding-inline-start: var(--space-6);
}

.about-content li + li {
  margin-block-start: var(--space-2);
}

.about-content blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  border-inline-start: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.about-content blockquote p {
  margin: 0;
}

.about-content blockquote cite {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-style: normal;
}

.about-content hr {
  margin-block: var(--space-10);
  border: 0;
  border-block-start: var(--border-width) solid var(--color-border);
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
  .about-hero {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .about-hero__description {
    max-width: 62ch;
  }

  .about-hero__media {
    max-width: 34rem;
  }
}

@media (max-width: 767px) {
  .about-hero {
    gap: var(--space-8);
    margin-block-end: var(--space-6);
  }

  .about-hero__title {
    font-size: var(--text-3xl);
  }

  .about-hero__description {
    font-size: var(--text-base);
    line-height: 1.8;
  }

  .about-hero__media::before {
    inset-block-start: var(--space-3);
    inset-block-end: calc(var(--space-3) * -1);
    inset-inline-start: var(--space-3);
    inset-inline-end: calc(var(--space-3) * -1);
  }

  .about-stats {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-block-end: var(--space-10);
    padding: var(--space-5);
  }

  .about-stat + .about-stat {
    padding-block-start: var(--space-4);
    border-inline-start: 0;
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .about-stat__value {
    font-size: var(--text-3xl);
  }
}

/* ==========================================================================
   CART: AUTOMATIC QUANTITY UPDATES
   ========================================================================== */

/*
 * The WooCommerce layer resets number inputs to `appearance: textfield` and
 * removes the WebKit spin buttons. Restore the native steppers and reserve
 * inline space so the arrows never sit on top of the quantity value.
 */
.woocommerce .quantity input[type="number"] {
  display: inline-block !important;
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  padding-inline: var(--space-2) 1.5rem !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
}

.woocommerce .quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce .quantity input[type="number"]::-webkit-inner-spin-button {
  display: block !important;
  height: auto;
  margin: 0 !important;
  -webkit-appearance: inner-spin-button !important;
  appearance: auto !important;
  opacity: 1 !important;
}

/*
 * Quantities now update through AJAX on change, so the manual submit control
 * is redundant. It stays in the DOM because WooCommerce's cart script uses it
 * to trigger the AJAX refresh.
 */
.woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart-form input[name="update_cart"] {
  display: none !important;
}

/* ==========================================================================
   CHECKOUT — MODERN 2-COLUMN RTL LAYOUT
   --------------------------------------------------------------------------
   Classic WooCommerce checkout only: form.checkout, #customer_details,
   #order_review_heading, #order_review, #payment and #place_order.

   assets/css/woocommerce.css is enqueued after style.css, so the block is
   scoped with body.woocommerce-checkout and IDs to win the cascade without
   relying on a later load order. RTL note: grid column 1 is the right edge,
   column 2 is the left edge.
   ========================================================================== */

/* ---- 1. Main two-column grid ------------------------------------------- */

body.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: none;
  gap: var(--space-4) var(--space-8);
  align-items: start;
}

/* Neutralise the legacy WooCommerce col2-set floats. */
body.woocommerce-checkout form.checkout .col2-set,
body.woocommerce-checkout form.checkout .col-1,
body.woocommerce-checkout form.checkout .col-2 {
  float: none;
  width: 100%;
}

/* Right column: billing, shipping and additional fields stack vertically. */
body.woocommerce-checkout form.checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  min-width: 0;
}

/* Left column: review heading and the sticky summary card. */
body.woocommerce-checkout form.checkout #order_review_heading {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--color-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.35;
}

body.woocommerce-checkout form.checkout #order_review {
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: 100px;
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-subtle);
  box-shadow: var(--shadow-sm);
}

/* ---- 2. Form headings and fields --------------------------------------- */

body.woocommerce-checkout form.checkout #customer_details h3:not(#ship-to-different-address) {
  margin: 0 0 var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--gray-300);
  color: var(--color-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.4;
}

body.woocommerce-checkout form.checkout #customer_details .form-row input.input-text,
body.woocommerce-checkout form.checkout #customer_details .form-row select,
body.woocommerce-checkout form.checkout #customer_details .form-row textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: #fff;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.6;
  box-shadow: none;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

/* Keep room for the theme's custom select arrow. */
body.woocommerce-checkout form.checkout #customer_details .form-row select {
  padding-inline-end: var(--space-10);
}

body.woocommerce-checkout form.checkout #customer_details .form-row textarea {
  min-height: 120px;
  resize: vertical;
}

body.woocommerce-checkout form.checkout #customer_details .form-row input.input-text:focus,
body.woocommerce-checkout form.checkout #customer_details .form-row select:focus,
body.woocommerce-checkout form.checkout #customer_details .form-row textarea:focus,
body.woocommerce-checkout form.checkout #customer_details .form-row input.input-text:focus-visible,
body.woocommerce-checkout form.checkout #customer_details .form-row select:focus-visible,
body.woocommerce-checkout form.checkout #customer_details .form-row textarea:focus-visible {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

/* Select2 replaces the province/country selects; match the same skin. */
body.woocommerce-checkout form.checkout #customer_details .form-row .select2-container--default .select2-selection--single {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: #fff;
}

body.woocommerce-checkout form.checkout #customer_details .form-row .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-checkout form.checkout #customer_details .form-row .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

/* ---- 3. Order summary card --------------------------------------------- */

body.woocommerce-checkout form.checkout #order_review table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  background: transparent;
}

body.woocommerce-checkout form.checkout #order_review table.shop_table th,
body.woocommerce-checkout form.checkout #order_review table.shop_table td {
  padding: 12px 0;
  border: 0;
  border-block-end: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.7;
  text-align: start;
  vertical-align: top;
}

body.woocommerce-checkout form.checkout #order_review table.shop_table thead th,
body.woocommerce-checkout form.checkout #order_review table.shop_table thead td {
  padding-block-start: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

body.woocommerce-checkout form.checkout #order_review table.shop_table tfoot tr:last-child > th,
body.woocommerce-checkout form.checkout #order_review table.shop_table tfoot tr:last-child > td {
  border-block-end: 0;
}

body.woocommerce-checkout form.checkout #order_review table.shop_table td.product-total,
body.woocommerce-checkout form.checkout #order_review table.shop_table tfoot td {
  text-align: end;
}

body.woocommerce-checkout form.checkout #order_review table.shop_table .cart_item .product-name {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

body.woocommerce-checkout form.checkout #order_review table.shop_table .order-total th,
body.woocommerce-checkout form.checkout #order_review table.shop_table .order-total td {
  color: var(--color-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

body.woocommerce-checkout form.checkout #order_review table.shop_table .order-total .amount {
  color: var(--color-primary-text);
}

/* ---- 4. Payment methods and place-order CTA ---------------------------- */

body.woocommerce-checkout form.checkout #payment {
  margin-block-start: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: #fff;
}

body.woocommerce-checkout form.checkout #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

body.woocommerce-checkout form.checkout #payment ul.payment_methods li {
  margin: 0 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: #fff;
}

body.woocommerce-checkout form.checkout #payment ul.payment_methods li:last-child {
  margin-block-end: 0;
}

body.woocommerce-checkout form.checkout #payment ul.payment_methods li:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

body.woocommerce-checkout form.checkout #payment ul.payment_methods label {
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

body.woocommerce-checkout form.checkout #payment ul.payment_methods input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  margin-inline-end: var(--space-2);
  accent-color: var(--color-primary);
  vertical-align: middle;
  cursor: pointer;
}

body.woocommerce-checkout form.checkout #payment div.payment_box {
  margin-block-start: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

body.woocommerce-checkout form.checkout #payment div.payment_box::before {
  content: none;
  display: none;
}

body.woocommerce-checkout form.checkout #payment .place-order {
  margin: var(--space-4) 0 0;
  padding: 0;
}

body.woocommerce-checkout form.checkout #payment #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 15px var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-align: center;
  box-shadow: var(--shadow-primary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

body.woocommerce-checkout form.checkout #payment #place_order:hover {
  background-color: var(--color-primary-hover);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

body.woocommerce-checkout form.checkout #payment #place_order:active {
  background-color: var(--color-primary-active);
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

body.woocommerce-checkout form.checkout #payment #place_order:focus-visible {
  outline: 2px solid var(--color-primary-text);
  outline-offset: 3px;
}

body.woocommerce-checkout form.checkout #payment #place_order:disabled {
  opacity: var(--opacity-disabled);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* ---- 5. Coupon notice -------------------------------------------------- */

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block: 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  box-shadow: none;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--color-primary-text);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
  color: var(--color-primary-hover);
}

/* ---- 6. Responsive ----------------------------------------------------- */

@media (max-width: 991px) {
  body.woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-6);
  }

  body.woocommerce-checkout form.checkout #customer_details,
  body.woocommerce-checkout form.checkout #order_review_heading,
  body.woocommerce-checkout form.checkout #order_review {
    grid-column: 1;
    grid-row: auto;
  }

  body.woocommerce-checkout form.checkout #order_review {
    position: static;
    top: auto;
  }
}

@media (max-width: 575px) {
  body.woocommerce-checkout form.checkout #order_review {
    padding: var(--space-4);
  }

  body.woocommerce-checkout form.checkout #customer_details h3:not(#ship-to-different-address) {
    font-size: var(--text-base);
  }

  body.woocommerce-checkout form.checkout #payment #place_order {
    font-size: var(--text-lg);
  }
}