/*
 * WooCommerce Product Page — Minimalist RTL Theme
 * Compatible with: Underscores (_s) base theme + WooCommerce
 * Direction: RTL (Right-to-Left)
 * Author: Claude / Anthropic
 *
 * TABLE OF CONTENTS
 * 1. CSS Variables (Design Tokens)
 * 2. Base & Reset
 * 3. Typography
 * 4. Layout — Single Product Wrapper
 * 5. Product Gallery
 * 6. Product Summary / Info
 *    6a. Breadcrumb
 *    6b. Title & Rating
 *    6c. Price
 *    6d. Short Description
 *    6e. Meta (SKU, Categories, Tags)
 *    6f. Add-to-Cart / Quantity
 *    6g. Wishlist / Share
 * 7. Product Tabs (Description, Reviews, etc.)
 * 8. Related & Upsell Products
 * 9. Notices (success, error, info)
 * 10. Responsive (Mobile-first breakpoints)
 * 11. Animations & Transitions
 */

/* ============================================================
   1. CSS VARIABLES — Change everything from here
   ============================================================ */
:root {
  /* --- Brand Palette --- */
  --color-bg:            #faf9f7;       /* Page background */
  --color-surface:       #ffffff;       /* Cards, panels */
  --color-surface-alt:   #f3f1ee;       /* Subtle alternate surfaces */
  --color-border:        #e5e2dc;       /* Dividers, outlines */
  --color-border-strong: #c9c4bb;       /* Focused borders */

  --color-text-primary:  #1a1916;       /* Headings */
  --color-text-body:     #3d3b37;       /* Body copy */
  --color-text-muted:    #8c8880;       /* Labels, metadata */
  --color-text-inverse:  #faf9f7;       /* Text on dark backgrounds */

  --color-accent:        #2c5f4a;       /* Primary action (deep sage green) */
  --color-accent-hover:  #234d3c;       /* Hover state */
  --color-accent-light:  #e8f0ec;       /* Tinted surfaces */

  --color-price:         #1a1916;       /* Product price */
  --color-price-sale:    #b84040;       /* Sale / discounted price */
  --color-price-old:     #8c8880;       /* Struck-through original price */

  --color-star:          #c49a3c;       /* Rating stars */
  --color-star-empty:    #dedad5;       /* Empty stars */

  --color-success:       #2c5f4a;
  --color-success-bg:    #e8f0ec;
  --color-error:         #b84040;
  --color-error-bg:      #f9eeee;
  --color-info:          #3a5f7a;
  --color-info-bg:       #e8f0f5;

  /* --- Typography --- */
  --font-display:        'Playfair Display', 'Georgia', serif;
  --font-body:           'IBM Plex Sans Arabic', 'Tahoma', sans-serif;
  --font-mono:           'IBM Plex Mono', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  3rem;       /* 48px */

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* --- Spacing 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;

  /* --- Layout --- */
  --container-max:    1280px;
  --container-pad:    clamp(1.25rem, 4vw, 3rem);
  --gallery-width:    52%;          /* Gallery column share */
  --summary-width:    44%;          /* Summary column share */
  --gap-product:      4%;           /* Gap between gallery & summary */

  /* --- Borders & Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border:       var(--border-width) solid var(--color-border);

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(26,25,22,.06), 0 1px 2px rgba(26,25,22,.04);
  --shadow-md:  0 4px 16px rgba(26,25,22,.08), 0 2px 6px rgba(26,25,22,.05);
  --shadow-lg:  0 12px 40px rgba(26,25,22,.12), 0 4px 12px rgba(26,25,22,.06);
  --shadow-focus: 0 0 0 3px rgba(44,95,74,.25);

  /* --- Transitions --- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;

  /* --- Z-Index --- */
  --z-gallery-thumb:  10;
  --z-sticky-summary: 50;
  --z-notice:         100;
}


/* ============================================================
   2. BASE & RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  direction: rtl;
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-hover); }
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

ul, ol { list-style: none; }

/* WooCommerce resets */
.woocommerce-page .woocommerce-content,
.woocommerce .woocommerce-content {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
}

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

p {
  margin-block-end: var(--space-4);
  line-height: var(--leading-loose);
}
p:last-child { margin-block-end: 0; }


/* ============================================================
   4. LAYOUT — SINGLE PRODUCT WRAPPER
   ============================================================ */
.woocommerce div.product {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-product);
  align-items: flex-start;
  padding-block: var(--space-12);
  animation: pageReveal var(--duration-slow) var(--ease-out) both;
}

/* Clear WooCommerce's own floats */
.woocommerce div.product::after { content: none; }

/* Breadcrumb sits above the two-column layout */
.woocommerce .woocommerce-breadcrumb {
  width: 100%;
  flex-basis: 100%;
  margin-block-end: var(--space-6);
}


/* ============================================================
   5. PRODUCT GALLERY
   ============================================================ */
.woocommerce div.product div.images {
  width: var(--gallery-width);
  flex-shrink: 0;
  position: sticky;
  top: var(--space-8);
  align-self: flex-start;
}

/* Main image */
.woocommerce div.product div.images .woocommerce-product-gallery__image a {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
  border: var(--border);
  box-shadow: var(--shadow-sm);
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: transform var(--duration-slow) var(--ease-out);
}

.woocommerce div.product div.images .woocommerce-product-gallery__image a:hover img {
  transform: scale(1.03);
}

/* Thumbnails */
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  flex-direction: row-reverse;   /* RTL: thumbnails flow right-to-left */
  gap: var(--space-3);
  margin-block-start: var(--space-3);
  overflow-x: auto;
  padding-block-end: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  flex-shrink: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  cursor: pointer;
  opacity: 0.65;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* Sale badge */
.woocommerce span.onsale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-price-sale);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  position: absolute;
  top: var(--space-4);
  /* RTL: badge on left side (visual left = logical start) */
  inset-inline-start: var(--space-4);
  z-index: var(--z-gallery-thumb);
  box-shadow: var(--shadow-sm);
  min-width: unset;
  min-height: unset;
}

/* Zoom icon */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  width: 36px;
  height: 36px;
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  z-index: var(--z-gallery-thumb);
}
.woocommerce div.product div.images:hover .woocommerce-product-gallery__trigger {
  opacity: 1;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger img {
  width: 18px;
  height: 18px;
  filter: none;
}


/* ============================================================
   6. PRODUCT SUMMARY / INFO
   ============================================================ */
.woocommerce div.product div.summary {
  width: var(--summary-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Divider utility used between summary sections */
.woocommerce div.product div.summary > * + * {
  margin-block-start: 0;
}


/* ---- 6a. Breadcrumb ---- */
.woocommerce .woocommerce-breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--color-accent);
}

/* Replace default separator */
.woocommerce .woocommerce-breadcrumb .separator,
.woocommerce .woocommerce-breadcrumb [aria-hidden] {
  color: var(--color-border-strong);
}


/* ---- 6b. Title & Rating ---- */
.woocommerce div.product .product_title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin-block-end: var(--space-3);
}

.woocommerce div.product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
  flex-direction: row-reverse;   /* RTL: stars on right */
  justify-content: flex-end;
}

/* Star icons */
.woocommerce div.product .star-rating {
  font-size: 0.9rem;
  color: var(--color-star);
  direction: ltr;                /* Stars always LTR for visual correctness */
}
.woocommerce div.product .star-rating::before {
  color: var(--color-star-empty);
}

.woocommerce div.product .woocommerce-review-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-bottom: 1px dashed var(--color-border-strong);
}


/* ---- 6c. Price ---- */
.woocommerce div.product .price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-price);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-direction: row-reverse;   /* RTL */
  justify-content: flex-end;
  padding-block: var(--space-5);
  border-top: var(--border);
  border-bottom: var(--border);
  margin-block: var(--space-5);
}

.woocommerce div.product .price ins {
  text-decoration: none;
  color: var(--color-price-sale);
}

.woocommerce div.product .price del {
  font-size: var(--text-md);
  color: var(--color-price-old);
  font-weight: var(--weight-regular);
  opacity: 0.75;
}

/* Currency symbol */
.woocommerce div.product .price .woocommerce-Price-currencySymbol {
  font-size: 0.7em;
  vertical-align: super;
  margin-inline-end: 2px;
}


/* ---- 6d. Short Description ---- */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-loose);
  margin-block-end: var(--space-6);
}

.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
  margin-block-end: 0;
}


/* ---- 6e. Meta (SKU, Categories, Tags) ---- */
.woocommerce div.product .product_meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: var(--border);
  margin-block-start: var(--space-4);
}

.woocommerce div.product .product_meta > span {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--space-2);
  flex-direction: row-reverse;    /* RTL */
  justify-content: flex-end;
}

.woocommerce div.product .product_meta > span .label,
.woocommerce div.product .product_meta > span > b,
.woocommerce div.product .product_meta > span > strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  min-width: 6rem;
  text-align: start;
}

.woocommerce div.product .product_meta a {
  color: var(--color-text-muted);
  border-bottom: 1px dashed var(--color-border-strong);
}
.woocommerce div.product .product_meta a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}


/* ---- 6f. Add-to-Cart & Quantity ---- */
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  flex-direction: row-reverse;    /* RTL: button on left, qty on right */
  margin-block: var(--space-6);
}

/* Quantity input */
.woocommerce div.product form.cart .quantity {
  display: flex;
  align-items: center;
  border: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface);
  height: 52px;
}

.woocommerce div.product form.cart .quantity input.qty {
  width: 52px;
  height: 100%;
  border: none;
  border-inline: var(--border);
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
  outline: none;
}

.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* Custom +/- buttons — injected via JS in most themes */
.woocommerce div.product form.cart .quantity .qty-minus,
.woocommerce div.product form.cart .quantity .qty-plus {
  width: 42px;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.woocommerce div.product form.cart .quantity .qty-minus:hover,
.woocommerce div.product form.cart .quantity .qty-plus:hover {
  color: var(--color-text-primary);
  background-color: var(--color-surface-alt);
}

/* Add to cart button */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .button {
  flex: 1;
  min-width: 180px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding-inline: var(--space-8);
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.woocommerce div.product form.cart button.single_add_to_cart_button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover::after {
  opacity: 1;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:active {
  transform: translateY(0);
  box-shadow: none;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Loading state */
.woocommerce div.product form.cart button.single_add_to_cart_button.loading {
  opacity: 0.75;
  cursor: wait;
}


/* ---- 6g. Wishlist / Share ---- */
.woocommerce div.product .product-share,
.woocommerce div.product .yith-wcwl-add-to-wishlist {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin-block-start: var(--space-2);
}


/* ============================================================
   7. PRODUCT TABS
   ============================================================ */
.woocommerce div.product .woocommerce-tabs {
  width: 100%;
  margin-block-start: var(--space-16);
  border-top: var(--border);
}

/* Tab nav */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-direction: row-reverse;    /* RTL */
  gap: 0;
  margin: 0;
  padding: 0;
  border-bottom: var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  position: relative;
  flex-shrink: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
  border: none;
  background: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  inset-inline: 0;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease-out);
  transform-origin: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--color-text-primary); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--color-accent);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
  transform: scaleX(1);
}

/* Tab panels */
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  padding: var(--space-10) 0;
  max-width: 72ch;
  margin-inline-start: auto;  /* RTL: align to right side */
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
  font-size: var(--text-lg);
  margin-block-end: var(--space-6);
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0;
  margin: 0;
}

.woocommerce #reviews #comments ol.commentlist li {
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
  border: var(--border);
  float: right;    /* RTL: avatar on right */
  margin-inline-start: var(--space-4);
}

.woocommerce #reviews .comment-text {
  margin-inline-end: 60px;
}

/* Review form */
.woocommerce #review_form #respond {
  margin-block-start: var(--space-10);
  padding: var(--space-8);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  border: var(--border);
}

.woocommerce #review_form #respond p {
  margin-block-end: var(--space-4);
}

.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  text-align: start;
}

.woocommerce #review_form #respond input[type="text"]:focus,
.woocommerce #review_form #respond input[type="email"]:focus,
.woocommerce #review_form #respond textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.woocommerce #review_form #respond input[type="submit"] {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  border: none;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.woocommerce #review_form #respond input[type="submit"]:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}


/* ============================================================
   8. RELATED & UPSELL PRODUCTS
   ============================================================ */
.woocommerce .related,
.woocommerce .upsells {
  margin-block-start: var(--space-20);
  width: 100%;
}

.woocommerce .related h2,
.woocommerce .upsells h2 {
  font-size: var(--text-xl);
  margin-block-end: var(--space-8);
  position: relative;
  display: inline-block;
}

.woocommerce .related h2::after,
.woocommerce .upsells h2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  inset-inline-end: 0;
  width: 2.5rem;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
}

/* Product cards grid */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
}

/* Individual card */
.woocommerce ul.products li.product {
  background-color: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
}

.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--text-base);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  padding: var(--space-4) var(--space-4) var(--space-2);
  line-height: var(--leading-tight);
}

.woocommerce ul.products li.product .price {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-price);
  padding-inline: var(--space-4);
  flex-direction: row-reverse;    /* RTL */
  justify-content: flex-end;
}

.woocommerce ul.products li.product .button {
  margin: var(--space-4);
  display: block;
  text-align: center;
  background-color: var(--color-accent-light);
  color: var(--color-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
  margin-block-start: auto;
}

.woocommerce ul.products li.product .button:hover {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}


/* ============================================================
   9. NOTICES
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-direction: row-reverse;    /* RTL */
  margin-block-end: var(--space-6);
  animation: noticeSlide var(--duration-slow) var(--ease-out) both;
}

.woocommerce-message {
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.woocommerce-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info);
  color: var(--color-info);
}

.woocommerce-error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}

.woocommerce-message a.button,
.woocommerce-info a.button {
  margin-inline-start: auto;
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
  background-color: var(--color-accent-hover);
}


/* ============================================================
   10. RESPONSIVE
   ============================================================ */

/* Tablet: ~768px–1024px */
@media (max-width: 1024px) {
  :root {
    --gallery-width:  55%;
    --summary-width:  40%;
    --gap-product:    5%;
  }
}

/* Stack layout at tablet breakpoint */
@media (max-width: 768px) {
  .woocommerce div.product {
    flex-direction: column;
    padding-block: var(--space-8);
  }

  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    width: 100%;
    position: static;
  }

  .woocommerce div.product div.images {
    margin-block-end: var(--space-6);
  }

  .woocommerce div.product .product_title {
    font-size: var(--text-xl);
  }

  .woocommerce div.product form.cart {
    flex-direction: column-reverse;  /* Stack on mobile */
    align-items: stretch;
  }

  .woocommerce div.product form.cart button.single_add_to_cart_button {
    width: 100%;
    flex: none;
  }

  .woocommerce div.product form.cart .quantity {
    justify-content: center;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: var(--space-3) var(--space-4);
  }

  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* Mobile small */
@media (max-width: 480px) {
  :root {
    --container-pad: 1rem;
  }

  .woocommerce div.product .price {
    font-size: var(--text-lg);
  }

  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}


/* ============================================================
   11. ANIMATIONS & TRANSITIONS
   ============================================================ */
@keyframes pageReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes noticeSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered reveal for related product cards */
.woocommerce ul.products li.product {
  animation: cardReveal var(--duration-slow) var(--ease-out) both;
}

.woocommerce ul.products li.product:nth-child(1) { animation-delay: 0ms; }
.woocommerce ul.products li.product:nth-child(2) { animation-delay: 80ms; }
.woocommerce ul.products li.product:nth-child(3) { animation-delay: 160ms; }
.woocommerce ul.products li.product:nth-child(4) { animation-delay: 240ms; }

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}