/**
 * Theme Name:  Mixtas Child
 * Theme URI:   https://mixtas.novaworks.net
 * Description: Child theme of Mixtas — safe place for all brand customizations.
 * Author:      Site Owner
 * Template:    mixtas
 * Version:     1.0.0
 * Text Domain: mixtas-child
 */

/* =============================================================================
   TRACE BRAND TOKENS
   Overrides the parent's CSS variables (set inline via var.css.php).
   Child stylesheet loads after parent, so cascade wins cleanly.
   ============================================================================= */

:root {
  /* Color palette */
  --trace-petrol:  #2C5664;
  --trace-orange:  #FF5C1A;
  --trace-text:    #333333;
  --trace-bg:      #FFFFFF;
  --trace-border:  #E8E8E8;

  /* Homepage section rhythm — the ONE spacing value used as margin-top
     between every homepage section (custom + native), and the ONE content
     width used to align card/grid-style sections. Matches the value most
     native Elementor sections on this page already used (100px desktop),
     so custom sections were brought up to the site's existing rhythm rather
     than the other way around. */
  --trace-section-gap:   60px;
  --trace-content-width: 1440px;

  /* Override parent tokens */
  --site-bg-color:              var(--trace-bg);
  --site-text-color:            var(--trace-text);
  --site-heading-color:         var(--trace-petrol);
  --site-accent-color:          var(--trace-petrol);
  --site-border-color:          var(--trace-border);
  --site-link-color:            var(--trace-petrol);
  --site-link-hover-color:      var(--trace-orange);

  /* Buttons */
  --site-primary-button-bg:     var(--trace-orange);
  --site-primary-button-color:  #FFFFFF;
  --site-secondary-button-bg:   var(--trace-petrol);
  --site-secondary-button-color:#FFFFFF;

  /* Typography */
  --site-main-font:       'IBM Plex Sans Arabic', sans-serif;
  --site-secondary-font:  'IBM Plex Sans Arabic', sans-serif;

  /* Header */
  --site-header-bg-color:       var(--trace-bg);
  --site-header-text-color:     var(--trace-text);
  --site-header-accent-color:   var(--trace-petrol);
  --site-header-border-color:   var(--trace-border);

  /* Nav menus */
  --site-main-menu-bg-color:    var(--trace-bg);
  --site-main-menu-text-color:  var(--trace-text);
  --site-main-menu-accent-color:var(--trace-petrol);
  --site-main-menu-border-color:var(--trace-border);

  /* Mobile header */
  --mobile-header-bg-color:          var(--trace-bg);
  --mobile-header-text-color:        var(--trace-text);
  --mobile-pre-header-bg-color:      var(--trace-petrol);
  --mobile-pre-header-text-color:    #FFFFFF;
  --mobile-pre-header-border-color:  var(--trace-petrol);

  /* Dropdowns */
  --dropdown-bg-color:       var(--trace-bg);
  --dropdown-text-color:     var(--trace-text);
  --dropdown-accent-color:   var(--trace-petrol);

  /* WooCommerce prices */
  --site-wc-price:           var(--trace-petrol);
  --site-wc-price-old:       rgba(44, 86, 100, 0.5);

  /* Kitify */
  --kitify-primary-color:    var(--trace-petrol);
  --kitify-secondary-color:  var(--trace-petrol);
  --kitify-body-color:       var(--trace-text);
  --kitify-border-color:     var(--trace-border);
}

@media (min-width: 768px) {
  :root {
    --trace-section-gap: 100px;
  }
}

body, body .kitify {
  --kitify-primary-color:  var(--trace-petrol);
  --kitify-secondary-color:var(--trace-petrol);
  --kitify-body-color:     var(--trace-text);
  --kitify-border-color:   var(--trace-border);
}

/* =============================================================================
   TYPOGRAPHY — IBM PLEX SANS ARABIC
   ============================================================================= */

body,
input, textarea, select, button {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  color: var(--trace-text);
}

h1, h2, h3, h4, h5, h6,
.site-secondary-font,
.nova-header__branding {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  color: var(--trace-petrol);
}

/* =============================================================================
   HEADER — Elementor Theme Builder template (post 459, "Header Default")
   This is the ACTUAL live header on every page (home/shop/category/product all
   render `data-elementor-type="header"` class `elementor-459`); the theme's own
   header-type-default.php is never reached because every page uses the
   Elementor Canvas template, which calls elementor_theme_do_location('header')
   directly and skips header.php entirely. So the fix lives here, following the
   same `.elementor-459 .elementor-element-<id>` pattern already used above for
   the announcement-bar drop-cap override.

   Row (elementor-element-4c7c65b7) = the header bar. Its three children,
   already in the right order via Elementor's own --order var:
     elementor-element-3f8ec217 (order:1, 30% width) → nav widget 3726810d (MEN/WOMEN/SHOP)
     elementor-element-1915fa38 (order:2, 40% width) → logo widget 2e9ed2a7
     elementor-element-40341a82 (order:3, 30% width) → search widget 789c1abd + cart widget 4cfba4d5
   Left/right are equal width (30/30) so the center column is already true
   page-center — no restructuring needed, just the fixes below.
   ============================================================================= */

/* 1. Solid white bar, never a transparent overlay.
   The row's own background is literally #FFFFFF00 (transparent) at rest — it
   only becomes solid on scroll via `.elementor-sticky--effects`. The hero
   section is pulled up under it with a negative margin, so right now the hero
   shows through. Forcing solid white here is what gives the header "its own
   white bar" at all times, matching the sticky-scroll state already in place. */
.elementor-459 .elementor-element.elementor-element-4c7c65b7:not(.elementor-motion-effects-element-type-background),
.elementor-459 .elementor-element.elementor-element-4c7c65b7 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #FFFFFF !important;
}
.elementor-459 .elementor-element-4c7c65b7 {
  border-bottom: 1px solid var(--trace-border);
}

/* 2. Align the header's content column with the rest of the page and give it
   real side gutters. Elementor's own container rule is
   `.e-con > .e-con-inner { max-width: var(--content-width); padding-inline: 0 }`
   with a default --content-width of 1440px and NO padding — so on any viewport
   at or under ~1440px (i.e. most laptops) the nav sits flush at the browser
   edge with zero gutter. That's the "MEN pushed too far left" / logo-off-center
   bug: this row was 120px wider than the 1320px column the announcement bar
   above it uses. Matching that width + adding a real gutter fixes both. */
.elementor-459 .elementor-element-4c7c65b7 {
  --content-width: 1320px;
}
.elementor-459 .elementor-element-4c7c65b7 > .e-con-inner {
  padding-left: clamp(20px, 3vw, 48px) !important;
  padding-right: clamp(20px, 3vw, 48px) !important;
}

/* The nav column (order:1, should be 30% width) has a leftover Elementor
   editor artifact: a hardcoded --width:692.713px locked in specifically for
   768–1599px viewports (an accidental resize-handle drag, almost certainly —
   every other breakpoint correctly uses 30%). At common laptop/desktop widths
   (1366/1440/1536px) that single bad value eats most of the row, shoving the
   logo and the search/cart column far off past true center — this is the
   real cause of "logo shifted right". Restore the intended 30% here. */
@media (min-width: 768px) and (max-width: 1599px) {
  .elementor-459 .elementor-element-3f8ec217 {
    --width: 30% !important;
  }
}

/* Nav links (MEN / WOMEN / SHOP) — already has 28px padding per item from the
   Elementor template (comfortable spacing); just align the color/case here. */
.elementor-459 .elementor-element-3726810d .main-navigation .nav-menu > li > a {
  color: var(--trace-petrol);
}
.elementor-459 .elementor-element-3726810d .main-navigation .nav-menu > li:hover > a,
.elementor-459 .elementor-element-3726810d .main-navigation .nav-menu > li.current-menu-item > a {
  color: var(--trace-orange);
}

/* 3. The Cart widget ships with `elementor-hidden-*` classes covering every
   breakpoint (desktop/laptop/tablet/mobile) — it is display:none everywhere,
   so there is currently no working cart link in the header at all on this
   template. Un-hide it for desktop/laptop/tablet (this request is about the
   desktop header specifically); mobile keeps its original behavior since the
   mobile menu likely has its own cart access and wasn't part of this request.
   (its own responsive classes use plain display:none, no !important, so
   !important here is enough to win regardless of viewport). */
@media (min-width: 768px) {
  .elementor-459 .elementor-element-4cfba4d5,
  .elementor-459 .elementor-element-4cfba4d5 .elementor-widget-container,
  .elementor-459 .elementor-element-4cfba4d5 .kitify-nova-cart,
  .elementor-459 .elementor-element-4cfba4d5 .kitify-nova-cart > a,
  .elementor-459 .elementor-element-4cfba4d5 .header-cart-box {
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
}

.elementor-459 .elementor-element-4cfba4d5 .cart-text {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* .count-text ("Cart") ships display:none independent of the widget-level
   hidden-* classes — likely tied to the "style-default" cart variant, which
   hides the label regardless of the widget's own "label-on" setting. */
.elementor-459 .elementor-element-4cfba4d5 .count-text {
  display: block !important;
}

/* 4. SEARCH / CART as uppercase petrol TEXT links, no icons.
   Cart already renders real text ("Cart" + a live count) alongside its icon
   — .kitify-nova-cart-label-on — so we just hide the icon and style the text.
   Search has no built-in label; a small script (mixtas-child functions.php)
   injects a matching text span next to its icon, which we hide the same way. */
.elementor-459 .elementor-element-789c1abd .kitify-search__popup-trigger-icon,
.elementor-459 .elementor-element-4cfba4d5 .kitify-nova-cart__icon {
  display: none;
}

.elementor-459 .elementor-element-789c1abd #js_header_search_modal,
.elementor-459 .elementor-element-4cfba4d5 .cart-text {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.elementor-459 .elementor-element-789c1abd .kitify-search-text-inject,
.elementor-459 .elementor-element-4cfba4d5 .count-text {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--trace-petrol);
}

/* count-badge is position:absolute by default (top:-10px;left:16px), meant to
   sit as a small notification dot on top of the icon — with the icon hidden
   and "Cart" as text instead, that made it overlap the middle of the word.
   Put it back in normal flow, after the text, as a small round counter. */
.elementor-459 .elementor-element-4cfba4d5 .count-text {
  order: 1;
}
.elementor-459 .elementor-element-4cfba4d5 .count-badge {
  position: static !important;
  top: auto !important;
  left: auto !important;
  order: 2;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50%;
  background-color: var(--trace-petrol);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 600;
}

.elementor-459 .elementor-element-789c1abd a#js_header_search_modal,
.elementor-459 .elementor-element-4cfba4d5 a {
  color: var(--trace-petrol);
}

.elementor-459 .elementor-element-789c1abd a#js_header_search_modal:hover,
.elementor-459 .elementor-element-789c1abd a#js_header_search_modal:hover .kitify-search-text-inject,
.elementor-459 .elementor-element-4cfba4d5 a:hover,
.elementor-459 .elementor-element-4cfba4d5 a:hover .count-text {
  color: var(--trace-orange);
}

/* =============================================================================
   LINKS
   ============================================================================= */

a {
  color: var(--trace-petrol);
  transition: color 0.2s ease;
}

a:hover, a:focus {
  color: var(--trace-orange);
  text-decoration: none;
}

/* =============================================================================
   BUTTONS — global + WooCommerce
   ============================================================================= */

.button,
button,
input[type="button"],
input[type="submit"],
.nova-btn,
.nova-button {
  background-color: var(--trace-orange) !important;
  color: #FFFFFF !important;
  border-color: var(--trace-orange) !important;
  border-radius: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.nova-btn:hover,
.nova-button:hover {
  background-color: #e04d10 !important;
  border-color: #e04d10 !important;
  color: #FFFFFF !important;
}

/* WooCommerce — add to cart, checkout, proceed buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce .wc-proceed-to-checkout a,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.add_to_cart_button,
.ajax_add_to_cart {
  background-color: var(--trace-orange) !important;
  color: #FFFFFF !important;
  border-color: var(--trace-orange) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.add_to_cart_button:hover {
  background-color: #e04d10 !important;
  border-color: #e04d10 !important;
  color: #FFFFFF !important;
}

/* WooCommerce — sale badge */
.woocommerce span.onsale,
.product-item .onsale,
.product-item__badge--sale {
  background-color: var(--trace-orange) !important;
  color: #FFFFFF !important;
}

/* =============================================================================
   MINIMALIST SPACING & CLEAN LINES
   ============================================================================= */

/* Generous section padding */
.site-content-wrapper {
  padding-top: 40px;
  padding-bottom: 60px;
}

/* HOMEPAGE — zero content padding so the Hero's built-in margin-top:-102px
   pulls it flush under the orange announcement bar, as originally designed. */
.home .site-content-wrapper {
  padding-top: 0;
}
.home #site-content .site-content {
  padding-top: 0;
}

/* Lighter borders everywhere */
.widget,
.product-item,
.entry-content,
.woocommerce-tabs .tabs li,
.woocommerce table.shop_table {
  border-color: var(--trace-border);
}

/* Remove box-shadows for a flat, clean look */
.product-item,
.nova-header,
.widget {
  box-shadow: none;
}

/* Product card: clean hover */
.product-item:hover {
  box-shadow: 0 4px 16px rgba(44, 86, 100, 0.08);
}

/* Price color */
.woocommerce-Price-amount,
.price {
  color: var(--trace-petrol);
}

del .woocommerce-Price-amount {
  color: rgba(44, 86, 100, 0.5);
}

/* Restore strikethrough + visibility on sale prices site-wide.
   Parent theme draws the line via ::before with border-color:inherit, so
   the explicit color here is what makes both the text and the line visible. */
.woocommerce .price del {
  color: #999999 !important;
  text-decoration: line-through;
}

/* Page header banner */
.page-header {
  background-color: var(--trace-petrol);
  color: #FFFFFF;
}

.page-header .page-header__title,
.page-header .page-title {
  color: #FFFFFF;
}

/* =============================================================================
   SINGLE PRODUCT — ADD TO CART BUTTON
   More specific selectors beat the parent's variable-based button rules.
   ============================================================================= */

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.button,
.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  background-color: var(--trace-orange) !important;
  color: #FFFFFF !important;
  border: none !important;
  display: block;
  width: 100%;
  padding: 16px 24px;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: center;
  text-transform: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.button:hover,
.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
  background-color: #e04d10 !important;
  color: #FFFFFF !important;
}

/* Loading state — keep orange, show cursor feedback */
.woocommerce div.product form.cart .single_add_to_cart_button.loading {
  opacity: 0.75;
}

/* Quantity + button row: stack on mobile, side-by-side on wider screens */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.woocommerce div.product form.cart .quantity {
  flex: 0 0 auto;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 200px;
}

/* =============================================================================
   SINGLE PRODUCT — VARIATION SWATCHES
   Uses WooCommerce Variation Swatches (Emran Ahmed) CSS custom properties
   so we don't touch the plugin — just scope overrides to .woo-variation-swatches.
   ============================================================================= */

.woo-variation-swatches {
  /* Tap-target size — WCAG 2.5.5 minimum 44×44 px */
  --wvs-single-product-item-width:      44px;
  --wvs-single-product-item-height:     44px;
  --wvs-single-product-item-font-size:  14px;

  /* Default (unselected) swatch appearance */
  --wvs-item-background-color:  #FFFFFF;
  --wvs-item-text-color:        var(--trace-text);
  --wvs-item-box-shadow:        0 0 0 1.5px #C4C4C4;   /* visible border */

  /* Hover state */
  --wvs-hover-item-background-color: #FFFFFF;
  --wvs-hover-item-text-color:       var(--trace-petrol);
  --wvs-hover-item-box-shadow:       0 0 0 2px var(--trace-petrol);

  /* Selected state — petrol ring for all types */
  --wvs-selected-item-box-shadow:        0 0 0 2px var(--trace-petrol);
  --wvs-selected-item-text-color:        #FFFFFF;
  /* Petrol fill for button-type swatches (S / M / L / colour names) */
  --wvs-selected-item-background-color:  var(--trace-petrol);
}

/* Slightly more spacing between swatches for comfortable tap */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
  margin: 4px 6px 4px 0;
}

/* Ensure button-type items have enough horizontal padding to read the label */
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item .variable-item-span {
  padding: 0 10px;
}

/* Shape: SIZE = square boxes, COLOR = true circles.
   The plugin's "rounded" style preset (wvs-style-rounded) actually renders
   both as fully-round (border-radius:100%) — override per attribute type. */
.woo-variation-swatches .button-variable-items-wrapper .variable-item,
.woo-variation-swatches .button-variable-items-wrapper .variable-item-span {
  border-radius: 0 !important;
}

.woo-variation-swatches .color-variable-items-wrapper .variable-item,
.woo-variation-swatches .color-variable-items-wrapper .variable-item-span {
  border-radius: 50% !important;
}

/* NOTE: the Color attribute's terms (أخضر / أسود / سماوي / قرميدي) have no
   hex color value set in Products > Attributes > Color in wp-admin, so the
   Variation Swatches plugin renders them as empty circles (visible only via
   the border-color ring below) — a content/data gap, not a CSS issue. Set
   each term's "Color" field in wp-admin to show actual color fills. */

/* Selected-size fill: the parent theme's app.css carries a same-specificity,
   same-selector rule (`background-color: var(--site-accent-color)`) that
   loads after the plugin's own CSS and silently wins over the petrol fill
   set via --wvs-selected-item-background-color above. Direct !important
   override settles it regardless of load order. */
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected {
  background-color: var(--trace-petrol) !important;
  color: #FFFFFF !important;
}

/* =============================================================================
   SINGLE PRODUCT — PRICE DISPLAY
   ============================================================================= */

/* Sale price (current price inside <ins>): bold, larger, petrol */
.woocommerce div.product .price ins {
  text-decoration: none;
  font-size: 1.15em;
}
.woocommerce div.product .price ins .woocommerce-Price-amount {
  color: var(--trace-petrol);
  font-weight: 700;
}

/* Original/crossed-out price: grey, smaller, strikethrough.
   color must be on <del> itself — the parent theme uses a ::before pseudo-element
   with border-color:inherit for the line, so the line color comes from del's color.
   Removing color here causes del to fall back to --site-wc-price-old which can be
   nearly transparent depending on Nova theme option, making it appear hidden. */
.woocommerce div.product .price del {
  color: #999999 !important;
  text-decoration: line-through;
  font-size: 0.85em;
  opacity: 1;
  display: inline-block;
}
.woocommerce div.product .price del .woocommerce-Price-amount {
  color: #999999 !important;
  font-weight: 400;
}

/* Regular (non-sale) price: petrol, semi-bold */
.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product span.price .woocommerce-Price-amount {
  color: var(--trace-petrol);
  font-weight: 600;
}

/* =============================================================================
   MEGA MENU — MEN CATEGORY IMAGE GRID
   Rendered by Kitify nova-menu widget + Nova_Mega_Menu_Walker (menu ID 20).
   Verified via wp eval-file — no Max Mega Menu wrapper on the actual page.

   Real structure:
     .kitify-nova-menu
       nav.main-navigation.header-primary-nav
         ul.menu.nav-menu
           li.menu-item-mega (MEN)
             ul.sub-menu.mega-menu
               li.mega-menu-container.container
                 ul.mega-menu-main
                   li.mega-sub-menu.col-1_5.link-disabled  ← Basics (img)
                     span > span > img[width="100%"] + "Basics"
                   li.mega-sub-menu.col-1_5               ← Bodysuits, etc.
                     a > span "Bodysuits"
   ============================================================================= */

/* 1. Item row: horizontal flex, centred, with breathing room */
.kitify-nova-menu .menu-item-mega > .sub-menu.mega-menu
  .mega-menu-container > ul.mega-menu-main {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 24px 32px;
  gap: 4px;
  list-style: none;
  margin: 0;
}

/* 2. Each card: equal column, centred, no float */
.kitify-nova-menu .menu-item-mega > .sub-menu.mega-menu
  .mega-menu-container > ul.mega-menu-main > li.mega-sub-menu {
  flex: 1 1 0;
  float: none !important;
  width: auto !important;
  text-align: center;
  padding: 12px 8px;
  box-sizing: border-box;
}

/* 3a. Linked items (a > span): flex column so img stacks above text */
.kitify-nova-menu .menu-item-mega > .sub-menu.mega-menu
  .mega-menu-container > ul.mega-menu-main > li.mega-sub-menu > a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  text-transform: none !important;
  text-decoration: none;
  color: var(--trace-text) !important;
  background: transparent !important;
}

/* 3b. Disabled-link items (span > span): same treatment */
.kitify-nova-menu .menu-item-mega > .sub-menu.mega-menu
  .mega-menu-container > ul.mega-menu-main > li.mega-sub-menu > span {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  text-transform: none !important;
  color: var(--trace-text) !important;
}

/* 4. Inner span (wraps img + text node in Basics; or just text in others) */
.kitify-nova-menu .menu-item-mega > .sub-menu.mega-menu
  .mega-menu-container > ul.mega-menu-main > li.mega-sub-menu > a > span,
.kitify-nova-menu .menu-item-mega > .sub-menu.mega-menu
  .mega-menu-container > ul.mega-menu-main > li.mega-sub-menu > span > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
  white-space: normal;
}

/* 5. Image: override inline width="100%", lock to a square thumbnail */
.kitify-nova-menu .menu-item-mega > .sub-menu.mega-menu
  .mega-menu-container > ul.mega-menu-main > li.mega-sub-menu img {
  width: 100px !important;
  height: 100px !important;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* 6. Hover states */
.kitify-nova-menu .menu-item-mega > .sub-menu.mega-menu
  .mega-menu-container > ul.mega-menu-main > li.mega-sub-menu:hover > a {
  color: var(--trace-petrol) !important;
  background: transparent !important;
}
.kitify-nova-menu .menu-item-mega > .sub-menu.mega-menu
  .mega-menu-container > ul.mega-menu-main > li.mega-sub-menu:hover > span {
  color: var(--trace-petrol) !important;
}

/* =============================================================================
   ANNOUNCEMENT BAR — disable Elementor "Drop Cap" on the first letter
   The text-editor widget has Drop Cap enabled, which floats+enlarges the
   first letter to 50px (widget-text-editor.min.css) and colors it with the
   Kit's Primary color #0C5666 instead of the widget's own text color
   #F1FDFF (post-459.css / post-96.css, .elementor-drop-cap-view-default rule).
   Reset it so the letter renders inline like the rest of the text.
   Covers both header templates: Header Default (post 459, widget 6b8482d)
   and Header #1 (post 96, widget 0b4224a), which override each other on
   different pages but share the same announcement-bar content.
   ============================================================================= */
.elementor-459 .elementor-element-6b8482d .elementor-drop-cap,
.elementor-96  .elementor-element-0b4224a .elementor-drop-cap {
  float: none !important;
  display: inline !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  background-color: transparent !important;
  border-color: transparent !important;
  margin-inline-end: 0 !important;
  padding: 0 !important;
}

.elementor-459 .elementor-element-6b8482d .elementor-drop-cap-letter,
.elementor-96  .elementor-element-0b4224a .elementor-drop-cap-letter {
  display: inline !important;
  height: auto !important;
  width: auto !important;
}

/* =============================================================================
   SINGLE PRODUCT — Elementor Theme Builder template (post 383)
   Same discovery as the header (post 459): this page is entirely rendered by
   an Elementor "Single Product" template using Kitify's WooCommerce widgets,
   not the theme's woocommerce/single-product/*.php files. Fixes below target
   the live `.elementor-383 .elementor-element-<id>` widget classes.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   GALLERY — thumbnails as a vertical column on the left of the main image.
   The kitify-wooproduct-images widget (id 1f95cbfc) ships 6 built-in layouts
   toggled via a `layout-type-N` class; it's currently layout-type-1 (thumbs
   below). layout-type-2's CSS (row-reverse) is what actually puts thumbnails
   on the LEFT — despite the name, layout-type-3 (plain `row`) puts them on
   the RIGHT, since flex-viewport is the first DOM child. Verified via the
   actual child order before writing this. We replicate layout-type-2's rules
   here rather than changing the widget's stored setting, so the fix stays
   entirely in mixtas-child.
   Desktop/tablet only (min-width:768px) — a narrow vertical thumbnail rail
   doesn't work on phones, so mobile keeps the original thumbs-below layout.
   ----------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* The plugin's own layout-type-1/2/3 shared rule sets flex-flow:inherit on
     .flex-control-thumbs (inheriting row-reverse from the gallery row below)
     and sizes each <li> via calc(100% / var(--singleproduct-image-column)) —
     both from selectors with more classes than ours, so plain overrides lose
     the cascade. Fix widths through the plugin's own var (column:1 => 100%)
     and force the few properties that need it with !important. */
  .elementor-element-1f95cbfc {
    --singleproduct-image-column: 1;
  }
  .elementor-element-1f95cbfc .kitify-product-images .woocommerce-product-gallery {
    display: flex;
    flex-flow: row-reverse wrap;
    justify-content: flex-end;
    gap: 16px;
  }
  .elementor-element-1f95cbfc .kitify-product-images .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-y: auto;
    align-content: flex-start;
    width: 84px;
    height: 560px;
    margin: 0 !important;
  }
  .elementor-element-1f95cbfc .kitify-product-images .flex-viewport {
    width: calc(100% - 84px - 16px);
  }
  .elementor-element-1f95cbfc .kitify-product-images .flex-control-thumbs li {
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }
  .elementor-element-1f95cbfc .kitify-product-images .flex-control-thumbs li img {
    border-radius: 0;
    opacity: 0.6;
    transition: opacity 0.2s ease;
  }
  .elementor-element-1f95cbfc .kitify-product-images .flex-control-thumbs li img.flex-active,
  .elementor-element-1f95cbfc .kitify-product-images .flex-control-thumbs li img:hover {
    opacity: 1;
    outline: 1px solid var(--trace-petrol);
    outline-offset: -1px;
  }
}

/* -----------------------------------------------------------------------------
   SIDEBAR — trim to: title, price, size/color, Add to Cart, View Cart, accordion.
   Short description, stock status, and product meta (SKU/categories) aren't
   in the target layout — hidden here. Their content isn't lost: short
   description duplicates the Description accordion tab; stock/meta are minor
   metadata not part of the requested minimalist buy-box.
   ----------------------------------------------------------------------------- */
.elementor-element-629fe6ef,   /* short description */
.elementor-element-654959c,    /* stock status */
.elementor-element-55b36d48 {  /* product meta (SKU/categories) */
  display: none !important;
}

/* Add to Cart button — already orange (#FF5C1A) from the global buy-button
   rules further up this file; just uppercase it to match this page's style. */
.elementor-element-53d89609 .single_add_to_cart_button {
  text-transform: uppercase !important;
  letter-spacing: 0.6px;
}

/* View Cart — secondary outlined button, injected via functions.php right
   after the Add to Cart form. Matches the primary button's sizing/shape. */
.trace-view-cart-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 16px 24px;
  background-color: transparent;
  color: var(--trace-petrol);
  border: 1px solid var(--trace-petrol);
  border-radius: 0;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.trace-view-cart-btn:hover {
  background-color: var(--trace-petrol);
  color: #FFFFFF;
}

/* -----------------------------------------------------------------------------
   Reviews — moved out of the accordion (its own block below), see
   mixtas_child_restructure_product_accordion() in functions.php.
   ----------------------------------------------------------------------------- */
.trace-reviews-section {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--trace-border);
}

/* =============================================================================
   MINI-CART FLYOUT
   The Kitify offcanvas panel (#MiniCartCanvas_*) had overflow-y:visible with
   content taller than the viewport — nothing past the fold was reachable,
   totals/buttons included (verified: scrollHeight 1434px vs 724px viewport).
   Premium Addons' custom mini-cart template (which this site uses for its
   quantity-stepper/remove-item AJAX behaviour) also structurally omits the
   woocommerce_widget_shopping_cart_total/buttons hooks entirely — core WC's
   own template calls them, this one doesn't — so there's nothing to scroll TO
   either. mixtas_child_mini_cart_footer() in functions.php injects a
   persistent Subtotal + View Cart + Checkout block (.trace-mini-cart-footer)
   as a sibling after the Premium Addons widget, refreshed via the Store API
   on every cart change since it sits outside the DOM subtree WooCommerce's
   fragment-refresh replaces.
   Layout: flex column — fixed title, scrollable items, fixed footer.
   ============================================================================= */
.kitify-offcanvas.minicart-canvas {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kitify-offcanvas.minicart-canvas > .title {
  flex: 0 0 auto;
}

.kitify-offcanvas.minicart-canvas > .widget.woocommerce.widget_shopping_cart {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.trace-mini-cart-footer {
  flex: 0 0 auto;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--trace-border);
  background: #FFFFFF;
}

.trace-mini-cart-footer .trace-mc-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 1rem;
}

.trace-mini-cart-footer .trace-mc-subtotal-label {
  color: var(--trace-text);
}

.trace-mini-cart-footer .trace-mc-subtotal-value {
  color: var(--trace-petrol);
  font-weight: 700;
  font-size: 1.125rem;
}

.trace-mini-cart-footer .trace-mc-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trace-mini-cart-footer a {
  display: block;
  width: 100%;
  padding: 14px 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: 0;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.trace-mini-cart-footer .trace-mc-checkout {
  background-color: var(--trace-orange);
  color: #FFFFFF;
  border: 1px solid var(--trace-orange);
}

.trace-mini-cart-footer .trace-mc-checkout:hover {
  background-color: #e04d10;
  border-color: #e04d10;
}

.trace-mini-cart-footer .trace-mc-view-cart {
  background-color: transparent;
  color: var(--trace-petrol);
  border: 1px solid var(--trace-petrol);
}

.trace-mini-cart-footer .trace-mc-view-cart:hover {
  background-color: var(--trace-petrol);
  color: #FFFFFF;
}

.trace-reviews-section #reviews {
  max-width: 720px;
}

/* =============================================================================
   CART PAGE — WooCommerce Cart Block (Gutenberg), not the classic
   [woocommerce_cart] shortcode template — confirmed via .wp-block-woocommerce-*
   classes. Already a left items / right sidebar layout natively; this is a
   restyle, not a restructure. Mobile-first: base rules target the block's own
   default mobile-stacked layout, desktop refinements behind min-width.
   ============================================================================= */

/* Heading — "Your Cart" (text set via JS, mixtas_child_cart_page_heading())
   in petrol, on the page's existing plain white banner. */
.woocommerce-cart .page-title,
.page-id-1648 .page-title {
  color: var(--trace-petrol);
}

/* Column layout: generous gap between items and summary. WC's own responsive
   CSS already stacks these under ~768px; we just add breathing room above
   that, mobile-first (no override below the breakpoint). */
@media (min-width: 768px) {
  .wc-block-cart .wc-block-components-sidebar-layout {
    gap: 64px;
  }
}

/* -----------------------------------------------------------------------------
   Item rows
   ----------------------------------------------------------------------------- */
.wc-block-cart-items {
  border-top: none;
}

.wc-block-cart-items thead th {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.6px;
  color: var(--trace-text);
  border-bottom: 1px solid var(--trace-border);
  padding-bottom: 16px;
}

.wc-block-cart-items__row {
  border-bottom: 1px solid var(--trace-border);
}

.wc-block-cart-item__image img {
  border-radius: 0;
}

.wc-block-components-product-name {
  color: var(--trace-text);
  font-weight: 600;
  text-decoration: none;
}

.wc-block-components-product-name:hover {
  color: var(--trace-petrol);
}

/* Sale price: struck-through original grey, current price petrol+bold —
   matches the same pattern used on the single-product page. */
.wc-block-cart-item__prices .wc-block-components-product-price__regular {
  color: #999999;
  text-decoration: line-through;
  font-weight: 400;
}

.wc-block-cart-item__prices .wc-block-components-product-price__value.is-discounted {
  color: var(--trace-petrol);
  font-weight: 700;
}

.wc-block-components-product-details__size,
.wc-block-components-product-details__color {
  color: var(--trace-text);
  font-size: 0.875rem;
  opacity: 0.75;
}

/* Quantity stepper (− number +): square, petrol outline — orange stays
   reserved for the primary Checkout action per the brand spec. */
.wc-block-components-quantity-selector {
  border: 1px solid var(--trace-border);
  border-radius: 0;
}

/* !important needed: the site-wide `button{background:orange!important}`
   rule (further up this file) otherwise wins over this component-specific
   one — verified live, plain background-color here was silently ignored. */
.wc-block-components-quantity-selector__button {
  background-color: transparent !important;
  color: var(--trace-petrol) !important;
  border-radius: 0;
}

.wc-block-components-quantity-selector__button:hover {
  background-color: var(--trace-petrol) !important;
  color: #FFFFFF !important;
}

.wc-block-components-quantity-selector__input {
  color: var(--trace-text);
  font-weight: 600;
}

/* Remove — real "Remove" text (JS-injected next to the icon, see
   mixtas_child_cart_remove_text() in functions.php) instead of an icon-only
   button, styled as a minimal uppercase link under the quantity stepper. */
/* :hover repeated with !important too — the site-wide `button:hover{
   background:#e04d10!important}` rule otherwise wins on hover (verified
   live), filling this in as an orange block instead of the plain
   underlined-text hover this component is meant to have. */
.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link:hover {
  background-color: transparent !important;
  border: none;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-top: 10px;
  display: inline-flex !important;
  align-items: center;
}

.wc-block-cart-item__remove-link svg {
  display: none;
}

.wc-block-cart-item__remove-link .trace-remove-text {
  color: var(--trace-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: underline;
}

.wc-block-cart-item__remove-link:hover .trace-remove-text {
  color: var(--trace-orange);
}

.wc-block-cart-item__total .wc-block-components-product-price {
  color: var(--trace-petrol);
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
   Order summary (right sidebar)
   ----------------------------------------------------------------------------- */
.wc-block-cart__sidebar .wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-heading-block h2 {
  color: var(--trace-petrol);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.6px;
  font-weight: 700;
}

/* Coupon — auto-expanded by default (see functions.php); relabelled "Promo
   code" via JS. Style the toggle row + the revealed input/Apply form. */
.wc-block-components-totals-coupon {
  border-bottom: 1px solid var(--trace-border);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.4px;
  color: var(--trace-text);
}

.wc-block-components-totals-coupon__form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input {
  flex: 1 1 auto;
}

.wc-block-components-totals-coupon__form input {
  border-radius: 0;
  border-color: var(--trace-border);
}

.wc-block-components-totals-coupon__button {
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--trace-petrol) !important;
  border: 1px solid var(--trace-petrol) !important;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.wc-block-components-totals-coupon__button:hover {
  background-color: var(--trace-petrol) !important;
  color: #FFFFFF !important;
}

/* Subtotal / Shipping / Discount / Fees / Taxes rows — style generically so
   they look right whenever WooCommerce renders them. NOTE: Shipping (and the
   Subtotal line distinct from Total) won't currently appear — this store has
   zero shipping zones configured (WooCommerce > Settings > Shipping), so
   needs_shipping evaluates false storewide. That's a store-setup gap, not a
   layout issue; once a zone/method exists these rows render automatically. */
.wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) {
  padding: 10px 0;
  font-size: 0.9375rem;
}

.wc-block-components-totals-item__label {
  color: var(--trace-text);
}

/* Total — petrol, bold, prominent, per spec. */
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--trace-border);
  padding-top: 16px;
  margin-top: 8px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--trace-petrol);
  font-weight: 700;
  font-size: 1.25rem;
}

/* Checkout — prominent orange, per spec. */
.wc-block-cart__submit-button {
  background-color: var(--trace-orange) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  padding: 16px 24px !important;
}

.wc-block-cart__submit-button:hover {
  background-color: #e04d10 !important;
}

/* =============================================================================
   COMING SOON — Women's Collection (page-coming-soon.php)
   Plain WP page (no Elementor), header/footer kept for site navigation
   consistency; the main content area is a single centered, minimalist
   message. Mobile-first.
   ============================================================================= */
.trace-coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 80px 24px;
  background-color: var(--trace-bg);
  text-align: center;
}

.trace-coming-soon__inner {
  max-width: 480px;
}

.trace-coming-soon__mark {
  width: 56px;
  height: auto;
  margin: 0 auto 28px;
  display: block;
}

.trace-coming-soon__eyebrow {
  margin: 0 0 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--trace-petrol);
}

.trace-coming-soon__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trace-coming-soon__title-ar {
  font-size: 2rem;
  font-weight: 600;
  color: var(--trace-petrol);
  line-height: 1.3;
}

.trace-coming-soon__title-en {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--trace-text);
  letter-spacing: 0.3px;
}

.trace-coming-soon__divider {
  width: 40px;
  height: 1px;
  background-color: var(--trace-border);
  margin: 32px auto;
}

.trace-coming-soon__subtitle {
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trace-coming-soon__subtitle-ar {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--trace-orange);
}

.trace-coming-soon__subtitle-en {
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--trace-orange);
}

.trace-coming-soon__note {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  color: var(--trace-text);
  opacity: 0.75;
  line-height: 1.6;
}

.trace-coming-soon__note-en {
  margin: 0 0 36px;
}

.trace-coming-soon__cta {
  display: inline-block;
  padding: 14px 32px;
  border: 1px solid var(--trace-petrol);
  color: var(--trace-petrol);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.trace-coming-soon__cta:hover {
  background-color: var(--trace-petrol);
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .trace-coming-soon {
    min-height: 70vh;
    padding: 120px 24px;
  }

  .trace-coming-soon__mark {
    width: 72px;
  }

  .trace-coming-soon__title-ar {
    font-size: 2.5rem;
  }

  .trace-coming-soon__title-en {
    font-size: 1.375rem;
  }
}

/* =============================================================================
   RTL content wrapper — for Arabic global/product accordion text (Shipping &
   Returns, Care) set via Settings → Trace Content or the product editor.
   ============================================================================= */
.trace-rtl {
  direction: rtl;
  text-align: right;
}

.trace-rtl p {
  margin: 0 0 1em;
}

.trace-rtl strong {
  color: var(--trace-petrol);
}

/* =============================================================================
   Homepage — Flash Sale Hero
   Content/dates/countdown/CTA target are all set via Settings → Trace
   Content; nothing here needs editing between sale cycles.
   ============================================================================= */
.trace-flash-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  overflow: hidden;
  color: #FFFFFF;
}

.trace-flash-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.trace-flash-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.75) 100%);
}

.trace-flash-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.trace-flash-hero__product {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  color: #FFFFFF;
}

.trace-flash-hero__tag {
  margin: 0 0 6px;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--trace-orange);
  font-weight: 600;
}

.trace-flash-hero__dates {
  margin: 0 0 20px;
  font-size: 0.85rem;
  opacity: 0.85;
}

.trace-flash-hero__countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.trace-flash-hero__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
}

.trace-flash-hero__num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--trace-orange);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.trace-flash-hero__label {
  margin-top: 4px;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}

.trace-flash-hero__colon {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--trace-orange);
  opacity: 0.6;
  transform: translateY(-8px);
}

.trace-flash-hero--ended .trace-flash-hero__countdown {
  opacity: 0.5;
}

.trace-flash-hero__cta {
  display: inline-block;
  background-color: var(--trace-orange);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 14px 36px;
  border-radius: 2px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.trace-flash-hero__cta:hover {
  background-color: #e04f16;
  transform: translateY(-2px);
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .trace-flash-hero {
    min-height: 88vh;
  }

  .trace-flash-hero__content {
    padding-bottom: 72px;
  }

  .trace-flash-hero__product {
    font-size: 3.25rem;
  }

  .trace-flash-hero__tag {
    font-size: 1rem;
  }

  .trace-flash-hero__dates {
    font-size: 0.95rem;
  }

  .trace-flash-hero__num {
    font-size: 2.25rem;
  }

  .trace-flash-hero__unit {
    min-width: 64px;
  }

  .trace-flash-hero__colon {
    font-size: 2.25rem;
  }

  .trace-flash-hero__label {
    font-size: 0.75rem;
  }

  .trace-flash-hero__cta {
    padding: 16px 48px;
    font-size: 1.05rem;
  }
}

/* =============================================================================
   Homepage — Flash Sale Two-Card section (directly below the hero)
   Images/text/link target are all set via Settings → Trace Content →
   "Flash Sale Two-Card Section"; nothing here needs editing between cycles.
   ============================================================================= */
.trace-flash-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: var(--trace-content-width);
  margin: var(--trace-section-gap) auto 0;
  padding: 0 20px;
}

.trace-flash-cards__item {
  position: relative;
  display: flex;
  height: clamp(400px, 75vh, 600px);
  overflow: hidden;
  text-decoration: none;
  color: #FFFFFF;
}

.trace-flash-cards__img {
  position: absolute;
  inset: 0;
  width: 100%;
  /* !important: beats Elementor's ".elementor img { height: auto; }" (higher
     specificity than a single class) — without it, <img> being a replaced
     element means "auto" resolves from its own intrinsic aspect ratio, not
     from the position:absolute + inset:0 box, so the photo overflowed the
     card and got clipped by overflow:hidden despite object-fit being set. */
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

.trace-flash-cards__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.trace-flash-cards__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 24px 20px 32px;
}

.trace-flash-cards__title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 6px;
}

.trace-flash-cards__tag {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--trace-orange);
}

.trace-flash-cards__subtitle {
  font-size: 0.85rem;
  opacity: 0.85;
}

.trace-flash-cards__badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
}

/* Active card — clickable, standard brand contrast, subtle hover zoom */
.trace-flash-cards__item--active:hover .trace-flash-cards__img {
  transform: scale(1.06);
}

/* Teaser card — pure CSS, no image: petrol gradient + a faint concentric-ring
   pattern (a restrained nod to the brand's fingerprint motif) suggesting
   anticipation without competing with the text. */
.trace-flash-cards__item--teaser {
  cursor: default;
  background: linear-gradient(160deg, #2C5664 0%, #1c3d47 100%);
}

.trace-flash-cards__pattern {
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(
    circle at 78% 28%,
    rgba(255, 255, 255, 0.07) 0,
    rgba(255, 255, 255, 0.07) 1px,
    transparent 1px,
    transparent 16px
  );
  opacity: 0.8;
}

.trace-flash-cards__item--teaser .trace-flash-cards__badge {
  color: var(--trace-orange);
  border-color: var(--trace-orange);
}

.trace-flash-cards__accent-line {
  display: block;
  width: 40px;
  height: 2px;
  margin: 12px auto;
  background-color: var(--trace-orange);
}

@media (min-width: 768px) {
  .trace-flash-cards {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 0;
  }

  .trace-flash-cards__item {
    height: clamp(520px, 80vh, 760px);
  }

  .trace-flash-cards__content {
    padding: 32px 32px 44px;
  }

  .trace-flash-cards__title {
    font-size: 1.75rem;
  }

  .trace-flash-cards__tag {
    font-size: 0.85rem;
  }

  .trace-flash-cards__subtitle {
    font-size: 1rem;
  }
}

/* =============================================================================
   Homepage — Promo Banner (after "New Collection")
   Image/text/CTA target are all set via Settings → Trace Content → "Promo
   Banner"; nothing here needs editing between cycles.

   Mobile: image and text stack (text on a solid beige band below the image —
   never overlaid), since there's no reliable "empty" region to target at
   arbitrary mobile crop widths. Desktop: text overlays the right half of the
   image, matching the source photo's product-on-left / empty-space-on-right
   composition.
   ============================================================================= */
.trace-promo-banner {
  margin-top: var(--trace-section-gap);
}

.trace-promo-banner__media {
  position: relative;
  width: 100%;
  /* Matches the photo's own 1376:768 proportions exactly — zero leftover
     space by construction, so there's nothing left to create a seam or a
     mismatched-color strip. The earlier "breathing room" attempt added
     extra height beyond this ratio specifically to create a gap, which is
     what produced the visible band; this ratio removes that gap instead of
     trying to color-match it. At an exact ratio match, the image fills the
     box completely with zero cropping AND zero empty space — both the full
     stack and a seamless edge are automatic here, not competing goals. */
  aspect-ratio: 1376 / 768;
  overflow: hidden;
  background-color: #EDE7DD; /* fallback only, visible before the image loads */
}

.trace-promo-banner__img {
  display: block;
  width: 100%;
  /* !important: Elementor's own custom-frontend.min.css ships ".elementor
     img { height: auto; }", which outranks a single-class selector on
     specificity alone regardless of source order. */
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

.trace-promo-banner__content {
  background-color: #EDE7DD; /* warm beige — matches the banner photo's background */
  color: var(--trace-petrol);
  text-align: center;
  padding: 28px 20px;
}

.trace-promo-banner__badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  background-color: var(--trace-orange);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}

.trace-promo-banner__title {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--trace-petrol);
}

.trace-promo-banner__desc {
  margin: 0 0 20px;
  font-size: 0.95rem;
  color: var(--trace-petrol);
  opacity: 0.85;
}

.trace-promo-banner__cta {
  display: inline-block;
  background-color: var(--trace-orange);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 13px 32px;
  border-radius: 2px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.trace-promo-banner__cta:hover {
  background-color: #e04f16;
  transform: translateY(-2px);
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .trace-promo-banner {
    position: relative;
    /* Full-bleed, matching the hero — no max-width/margin here, unlike every
       other content section on the page. This is a deliberate exception:
       the two-card, final-sale, and grid sections stay boxed to 1440px for
       alignment, but this banner and the hero are both meant to run edge to
       edge as full-width photo treatments. */
  }

  .trace-promo-banner__content {
    position: absolute;
    inset: 0;
    left: 55%;
    width: 40%;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: 0 4%;
  }

  .trace-promo-banner__title {
    font-size: 2.65rem;
    max-width: 420px;
  }

  .trace-promo-banner__desc {
    font-size: 1.05rem;
    max-width: 360px;
  }
}

/* =============================================================================
   Homepage — Final Sale section (bottom of the page)
   Products are pulled live from the "final-sale" WooCommerce category —
   nothing here needs editing to add/remove products from the slider.
   ============================================================================= */
.trace-final-sale {
  margin-top: var(--trace-section-gap);
  padding: 48px 20px 40px;
  background-color: var(--trace-petrol);
  color: #FFFFFF;
  overflow: hidden;
}

.trace-final-sale__banner {
  max-width: var(--trace-content-width);
  margin: 0 auto 32px;
  text-align: center;
}

.trace-final-sale__pct {
  display: block;
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--trace-orange);
}

.trace-final-sale__line {
  margin: 12px 0 24px;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.trace-final-sale__cta {
  display: inline-block;
  background-color: var(--trace-orange);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 14px 40px;
  border-radius: 2px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.trace-final-sale__cta:hover {
  background-color: #e04f16;
  transform: translateY(-2px);
  color: #FFFFFF;
}

.trace-final-sale__empty {
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.trace-final-sale__slider-wrap {
  position: relative;
  margin: 0 -20px;
}

.trace-final-sale__slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px 12px;
  scrollbar-width: none;
}

.trace-final-sale__slider::-webkit-scrollbar {
  display: none;
}

.trace-final-sale__card {
  flex: 0 0 auto;
  width: 168px;
  scroll-snap-align: start;
  background-color: #FFFFFF;
  color: var(--trace-text);
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  display: block;
}

.trace-final-sale__card-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.trace-final-sale__card-name {
  display: block;
  padding: 10px 12px 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--trace-petrol);
  line-height: 1.3;
}

.trace-final-sale__card-price {
  display: block;
  padding: 2px 12px 12px;
  font-size: 0.8rem;
}

.trace-final-sale__card-price del {
  color: #999999;
  text-decoration: line-through;
  margin-right: 6px;
  font-weight: 400;
}

.trace-final-sale__card-price ins {
  color: var(--trace-orange);
  font-weight: 700;
  text-decoration: none;
}

.trace-final-sale__arrow {
  display: none;
}

@media (min-width: 768px) {
  .trace-final-sale {
    padding: 72px 40px 56px;
  }

  .trace-final-sale__banner {
    margin-bottom: 40px;
  }

  .trace-final-sale__pct {
    font-size: 5.5rem;
  }

  .trace-final-sale__line {
    font-size: 1.1rem;
  }

  .trace-final-sale__cta {
    padding: 16px 48px;
    font-size: 1.05rem;
  }

  .trace-final-sale__slider-wrap {
    max-width: var(--trace-content-width);
    margin: 0 auto;
  }

  .trace-final-sale__slider {
    padding: 4px 0 12px;
  }

  .trace-final-sale__card {
    width: 220px;
  }

  .trace-final-sale__card-name {
    font-size: 0.9rem;
  }

  .trace-final-sale__card-price {
    font-size: 0.9rem;
  }

  .trace-final-sale__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--trace-petrol);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    transition: background-color 0.2s ease;
  }

  .trace-final-sale__arrow:hover {
    background-color: #FFFFFF;
  }

  .trace-final-sale__arrow--prev {
    left: 4px;
  }

  .trace-final-sale__arrow--next {
    right: 4px;
  }
}

/* =============================================================================
   Homepage — section rhythm normalization (native Elementor sections)

   Audit found most native sections already used a consistent 100px top
   margin (New Collection, All Collection, the "Fast Delivery" trust-badge
   row) — so --trace-section-gap was set to match THAT existing rhythm, and
   applied here to the two native outliers (Shop by Category was 80px; the
   section right before it had 0) plus every custom section above, rather
   than inventing a new spacing value. Content heights (e.g. the All
   Collection product grid) were left untouched — that height is real
   product content, not excess padding.

   The 4 rules below target empty leftover Elementor sections (0 text, 0
   images — confirmed via DOM inspection) that were contributing extra,
   inconsistent gaps on top of the real section margins. Hidden rather than
   left in place, now that spacing is handled by the single token above.
   ============================================================================= */
.elementor-element-6dcf803,
.elementor-element-fbf5a70,
.elementor-element-93bedb9,
.elementor-element-6098b5d {
  display: none !important;
}

.elementor-element-81da3fc,
.elementor-element-5c8f4c5,
.elementor-element-aa5591c,
.elementor-element-3d1328c,
.elementor-element-79a8f2a {
  margin-top: var(--trace-section-gap) !important;
}

.elementor-element-79a8f2a {
  margin-bottom: var(--trace-section-gap) !important;
}