.elementor-3503 .elementor-element.elementor-element-cda4191{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3503 .elementor-element.elementor-element-cda4191:not(.elementor-motion-effects-element-type-background), .elementor-3503 .elementor-element.elementor-element-cda4191 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FDFAF7;}.elementor-3503 .elementor-element.elementor-element-cda4191.e-con{--align-self:center;}.elementor-3503 .elementor-element.elementor-element-a90219d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-around;--align-items:center;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3503 .elementor-element.elementor-element-6f629e7{--display:flex;}.elementor-3503 .elementor-element.elementor-element-6f629e7.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-3503 .elementor-element.elementor-element-324a6f6 img{width:100%;}.elementor-3503 .elementor-element.elementor-element-b830af7{--display:flex;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-3503 .elementor-element.elementor-element-b830af7.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-3503 .elementor-element.elementor-element-cf3614d.elementor-element{--align-self:stretch;}.elementor-3503 .elementor-element.elementor-element-cf3614d{z-index:1;}.elementor-3503 .elementor-element.elementor-element-cf3614d .search-wrapper-a5b5c8dd{text-align:center;}.elementor-3503 .elementor-element.elementor-element-cf3614d .search-form-a5b5c8dd{max-width:100%;transform:translateY(0px);}.elementor-3503 .elementor-element.elementor-element-cf3614d .search-input-a5b5c8dd{background-color:#ffffff;color:#000000;}.elementor-3503 .elementor-element.elementor-element-fb77db1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-3503 .elementor-element.elementor-element-ef1104d{--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}.elementor-3503 .elementor-element.elementor-element-ef1104d .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-3503 .elementor-element.elementor-element-800c924{--display:flex;}.elementor-3503 .elementor-element.elementor-element-800c924:not(.elementor-motion-effects-element-type-background), .elementor-3503 .elementor-element.elementor-element-800c924 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F3EFEA;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-3503 .elementor-element.elementor-element-31191c7 .elementor-menu-toggle{margin:0 auto;background-color:#F3EFEA;}.elementor-3503 .elementor-element.elementor-element-8873f9b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;}.elementor-3503 .elementor-element.elementor-element-4ba2c17{--display:flex;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-3503 .elementor-element.elementor-element-786912e.elementor-element{--align-self:stretch;}.elementor-3503 .elementor-element.elementor-element-786912e{z-index:1;}.elementor-3503 .elementor-element.elementor-element-786912e .search-wrapper-a5b5c8dd{text-align:center;}.elementor-3503 .elementor-element.elementor-element-786912e .search-form-a5b5c8dd{max-width:100%;transform:translateY(0px);}.elementor-3503 .elementor-element.elementor-element-786912e .search-input-a5b5c8dd{background-color:#ffffff;color:#000000;}.elementor-3503 .elementor-element.elementor-element-7605eae{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;}.elementor-3503 .elementor-element.elementor-element-db79070{--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}.elementor-3503 .elementor-element.elementor-element-db79070 .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-3503 .elementor-element.elementor-element-cda4191{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-3503 .elementor-element.elementor-element-a90219d{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-3503 .elementor-element.elementor-element-a90219d.e-con{--align-self:center;}.elementor-3503 .elementor-element.elementor-element-b830af7{--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-3503 .elementor-element.elementor-element-b830af7.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-3503 .elementor-element.elementor-element-cf3614d{width:auto;max-width:auto;}.elementor-3503 .elementor-element.elementor-element-2de3537 .elementor-button{border-radius:4px 4px 4px 4px;}.elementor-3503 .elementor-element.elementor-element-800c924{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-3503 .elementor-element.elementor-element-31191c7{width:auto;max-width:auto;}.elementor-3503 .elementor-element.elementor-element-4ba2c17{--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-3503 .elementor-element.elementor-element-4ba2c17.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-3503 .elementor-element.elementor-element-786912e{width:auto;max-width:auto;}.elementor-3503 .elementor-element.elementor-element-9e28e0b .elementor-button{border-radius:4px 4px 4px 4px;}}@media(max-width:767px){.elementor-3503 .elementor-element.elementor-element-cda4191{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-3503 .elementor-element.elementor-element-a90219d{--width:100%;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-3503 .elementor-element.elementor-element-6f629e7{--width:50%;}.elementor-3503 .elementor-element.elementor-element-324a6f6{width:auto;max-width:auto;}.elementor-3503 .elementor-element.elementor-element-324a6f6 img{width:100%;}.elementor-3503 .elementor-element.elementor-element-b830af7{--width:0%;}.elementor-3503 .elementor-element.elementor-element-fb77db1{--width:35%;}.elementor-3503 .elementor-element.elementor-element-800c924{--width:100%;}.elementor-3503 .elementor-element.elementor-element-7605eae{--width:35%;}}@media(min-width:768px){.elementor-3503 .elementor-element.elementor-element-cda4191{--content-width:100%;}.elementor-3503 .elementor-element.elementor-element-a90219d{--width:80%;}.elementor-3503 .elementor-element.elementor-element-6f629e7{--width:8%;}.elementor-3503 .elementor-element.elementor-element-b830af7{--width:70%;}.elementor-3503 .elementor-element.elementor-element-fb77db1{--width:18%;}.elementor-3503 .elementor-element.elementor-element-800c924{--width:100%;}.elementor-3503 .elementor-element.elementor-element-8873f9b{--content-width:100%;}.elementor-3503 .elementor-element.elementor-element-4ba2c17{--width:70%;}.elementor-3503 .elementor-element.elementor-element-7605eae{--width:18%;}}@media(max-width:1024px) and (min-width:768px){.elementor-3503 .elementor-element.elementor-element-a90219d{--width:100%;}.elementor-3503 .elementor-element.elementor-element-6f629e7{--width:15%;}.elementor-3503 .elementor-element.elementor-element-b830af7{--width:40%;}.elementor-3503 .elementor-element.elementor-element-fb77db1{--width:32%;}.elementor-3503 .elementor-element.elementor-element-800c924{--width:100%;}.elementor-3503 .elementor-element.elementor-element-4ba2c17{--width:40%;}.elementor-3503 .elementor-element.elementor-element-7605eae{--width:32%;}}/* Start custom CSS for container, class: .elementor-element-a90219d *//* ==========================================================================
   SECOND CRACK DESIGN SYSTEM - HEADER & MENU FIX
   ========================================================================== */

:root {
  --color-primary: #834227;
  --color-primary-strong: #5D2918;
  --color-subtle: #EECBAE;
  --color-secondary: #6E6862;
  --color-tertiary: #465C46;
  --color-neutral: #F3EFEA;
  --color-surface: #FCFAF6;
  --color-on-surface: #1D1815;
  --color-border: #E2DDD7;
  --color-error: #A12F2F;

  --font-serif: Newsreader, "Source Serif 4", Georgia, serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;

  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 96px;
  --space-gutter: 24px;
  --space-margin: 64px;

  --page-bg: var(--color-surface);
  --page-text: var(--color-on-surface);
}

/* 1. Main Header Container Layout */
.elementor-3503 .elementor-element.elementor-element-a90219d {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 16px !important;
}

.elementor-3503 .elementor-element.elementor-element-a90219d > .e-con,
.elementor-3503 .elementor-element.elementor-element-a90219d > div {
  flex-shrink: 0;
}

/* 2. Logo Sizing Control */
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-widget-image img,
.elementor-3503 .elementor-element.elementor-element-a90219d img.wp-image-3526 {
  width: 110px !important;
  max-width: 110px !important;
  min-width: 110px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
} 

/* 4. Right-side Elements (Account + Cart) */
.elementor-3503 .elementor-element.elementor-element-a90219d > .elementor-element-fb77db1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 5. Nav Menu Fix (Desktop & Tablet Alignment) */
.elementor-3503 .elementor-element.elementor-element-a90219d.elementor-widget-nav-menu,
.elementor-widget-nav-menu {
  width: 100% !important;
}

.elementor-nav-menu--main {
  display: flex !important;
  justify-content: flex-start !important;
}

.elementor-nav-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-nav-menu .elementor-item {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--color-on-surface) !important;
  text-decoration: none !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.highlighted {
  color: var(--color-primary) !important;
}

/* Shop Grid Utility */
.sc-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gutter);
}

@media (max-width: 1024px) {
  .sc-shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .sc-shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- MOBILE / TABLET RESPONSIVE MENU OVERRIDES --- */
@media (max-width: 1024px) {
  /* Ascunde meniul orizontal principal */
  .elementor-3503 .elementor-element.elementor-element-a90219d .elementor-nav-menu--main {
    display: none !important;
  }
  
  /* Afișează butonul de hamburger */
  .elementor-3503 .elementor-element.elementor-element-a90219d .elementor-menu-toggle {
    display: flex !important;
    margin-left: auto !important;
  }

  /* Dropdown-ul își recapătă fundalul normal din Elementor (fără transparent forțat) */
  .elementor-3503 .elementor-element.elementor-element-a90219d .elementor-nav-menu--dropdown {
    top: 45px !important;
  }

  /* Aranjează elementele vertical în meniul de mobil */
  .elementor-3503 .elementor-element.elementor-element-a90219d .elementor-nav-menu--dropdown .elementor-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .elementor-3503 .elementor-element.elementor-element-a90219d .elementor-nav-menu--dropdown .menu-item {
    width: 100% !important;
  }
}

/* Setează înălțimea fixă uniformă pentru toate elementele din rândul de sus */
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-widget-advanced_woo_search_a5b5c8dd,
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-widget-button,
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-widget-woocommerce-menu-cart,
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-menu-cart__toggle_button,
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-button {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Forțează inputul de căutare să umple tot containerul lui pe înălțime */
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-widget-advanced_woo_search_a5b5c8dd input,
.elementor-3503 .elementor-element.elementor-element-a90219d .search-input-a5b5c8dd,
.elementor-3503 .elementor-element.elementor-element-a90219d .search-container-a5b5c8dd,
.elementor-3503 .elementor-element.elementor-element-a90219d .search-form-a5b5c8dd {
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Centrează corect iconița din butonul de cont */
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-widget-button a.elementor-button {
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-widget-button svg {
  width: 22px !important;
  height: 22px !important;
}

/* Forțează butonul hamburger să respecte înălțimea de 48px și să se alinieze pe verticală */
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-menu-toggle {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  margin: 0 !important;
}

/* Setează dimensiunea iconiței SVG din hamburger pentru a nu deforma butonul */
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-menu-toggle svg {
  width: 24px !important;
  height: 24px !important;
}

/* Forțează containerul care conține avatarul și coșul să accepte un gap real între ele */
.elementor-3503 .elementor-element.elementor-element-a90219d .elementor-element-fb77db1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important; /* Aici poți mări sau micșora spațiul dintre ele (ex: 8px, 12px) */
  width: auto !important;
}

/* Containerul principal - rândul de sus */
.elementor-3503 .elementor-element.elementor-element-a90219d {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 16px !important;
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-31191c7 *//* ==========================================================================
   SECOND CRACK DESIGN SYSTEM - HEADER & MENU FIX
   Real structure (from live HTML):
     .elementor-element-a90219d   = header row (logo + search + account/cart)
       .elementor-element-6f629e7 = logo container
       .elementor-element-b830af7 = search container (direct flex child!)
         .elementor-widget-advanced_woo_search_a5b5c8dd = search widget (nested, NOT a flex child of the row)
       .elementor-element-fb77db1 = account + cart container
     .elementor-element-800c924   = nav menu row (SIBLING of the header row, not a child)
       .elementor-element-31191c7 = nav-menu widget
   ========================================================================== */

:root {
  --color-primary: #834227;
  --color-primary-strong: #5D2918;
  --color-subtle: #EECBAE;
  --color-secondary: #6E6862;
  --color-tertiary: #465C46;
  --color-neutral: #F3EFEA;
  --color-surface: #FCFAF6;
  --color-on-surface: #1D1815;
  --color-border: #E2DDD7;
  --color-error: #A12F2F;

  --font-serif: Newsreader, "Source Serif 4", Georgia, serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;

  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 96px;
  --space-gutter: 24px;
  --space-margin: 64px;

  /* One margin for every touch breakpoint, so tablet and phone read
     identically. Change this single value to move both at once. */
  --space-margin-touch: 20px;

  --page-bg: var(--color-surface);
  --page-text: var(--color-on-surface);
}

/* 1. Main Header Container Layout (the row itself) */
.elementor-element-a90219d {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 16px !important;
}

/* ==========================================================================
   OUTER MARGINS — one value, every breakpoint.

   The margin lives on the wrapper's .e-con-inner and nowhere else. Two rules
   make that hold:
     - the outer container is zeroed, or its padding stacks on top of the
       inner one and the margin comes out twice as wide;
     - every row inside is zeroed, or a row that carries its own padding sits
       further in than its neighbour (this is why the menu row looked inset
       while the logo row ran to the edge).
   ========================================================================== */

.elementor-element-cda4191,
.elementor-element-8873f9b {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.elementor-element-cda4191 > .e-con-inner,
.elementor-element-8873f9b > .e-con-inner {
  padding-left: var(--space-margin-touch) !important;
  padding-right: var(--space-margin-touch) !important;
}

.elementor-element-cda4191 > .e-con-inner > .e-con,
.elementor-element-8873f9b > .e-con-inner > .e-con,
.elementor-element-a90219d,
.elementor-element-800c924 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 1024px) {
  .elementor-element-cda4191 > .e-con-inner {
    padding-top: var(--space-sm) !important;      /* 8px */
    padding-bottom: var(--space-sm) !important;
  }

  /* Re-add only the gap between the last header item and the hamburger. */
  .elementor-element-800c924 {
    margin-left: var(--space-sm) !important;
  }
}

/* The menu band runs the full width of the viewport while its links stay
   aligned with the logo above.

   The wrapper is an `e-con-boxed` container with a fixed max-width, so a plain
   negative margin can only reach that box's edge, not the screen's. The band
   is given the viewport's own width and pulled back by half the difference
   between the viewport and its parent, which escapes the box entirely.

   The padding then re-adds that same offset plus the header margin, so the
   links land on the logo's left edge rather than on the screen edge.

   Desktop only — below 1025px this row sits on the header line, where a
   negative margin would drag the hamburger off the edge. */
@media (min-width: 1025px) {
  .elementor-element-800c924 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: calc(50vw - 50% + var(--space-margin-touch)) !important;
    padding-right: calc(50vw - 50% + var(--space-margin-touch)) !important;
    box-sizing: border-box !important;
  }
}

/* On tablet/mobile the nav row joins the header row on a single line, so the
   hamburger sits up top beside the logo instead of dropping to its own band.
   The wrapper stacks its two rows by default (Elementor containers are
   column), so it has to be switched to a row at these breakpoints. */
@media (max-width: 1024px) {
  .elementor-element-cda4191 > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Header row takes the free space, pushing the hamburger to the far right.
     With search and cart hidden on mobile, this leaves logo left / burger right. */
  .elementor-element-a90219d {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .elementor-element-800c924 {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: var(--space-sm) !important;      /* 8px */
  }

  .elementor-element-800c924 .elementor-menu-toggle {
    margin-left: 0 !important;                    /* was auto — that's what pushed it out */
  }
}

/* Logo + account/cart: fixed size, never grow/shrink */
.elementor-element-a90219d > .elementor-element-6f629e7,
.elementor-element-a90219d > .elementor-element-fb77db1 {
  flex: 0 0 auto !important;
}

/* Search container: THIS is the direct flex child that must grow, not the widget nested inside it */
.elementor-element-a90219d > .elementor-element-b830af7 {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important; /* allow it to shrink below content size so it can actually flex */
  max-width: none !important;
}

/* 2. Logo Sizing Control */
.elementor-element-a90219d .elementor-widget-image img,
.elementor-element-a90219d img.wp-image-3526 {
  width: 110px !important;
  max-width: 110px !important;
  min-width: 110px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* 4. Right-side Elements (Account + Cart) */
.elementor-element-fb77db1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
}

/* 5. Nav Menu Fix (Desktop & Tablet Alignment) */
.elementor-widget-nav-menu {
  width: 100% !important;
}

.elementor-nav-menu--main {
  display: flex !important;
  justify-content: flex-start !important;
}

.elementor-nav-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-nav-menu .elementor-item {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--color-on-surface) !important;
  text-decoration: none !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.highlighted {
  color: var(--color-primary) !important;
}

/* Shop Grid Utility */
.sc-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gutter);
}

@media (max-width: 1024px) {
  .sc-shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .sc-shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- MOBILE / TABLET RESPONSIVE MENU OVERRIDES ---
   Scoped to .elementor-element-800c924 = the nav-menu row
   (it's a SIBLING of the header row, not a child of it) */
@media (max-width: 1024px) {
  /* Ascunde meniul orizontal principal */
  .elementor-element-800c924 .elementor-nav-menu--main {
    display: none !important;
  }

  /* Afișează butonul de hamburger (poziționarea lui e mai jos, lângă coș) */
  .elementor-element-800c924 .elementor-menu-toggle {
    display: flex !important;
  }

  /* DESIGN.md, Elevation & Depth: "Overlays — the mobile nav, the size
     .elementor-3503 .elementor-element.elementor-element-31191c7 — sit on the raised surface with a full-strength 1px rule and no
     scrim blur. Because there is no shadow language, having a border is
     itself the signal that something is above the page."

     Raised in light mode means darker, so the panel is Kraft, not white —
     the system has no #FFFFFF in it at all. */
  .elementor-element-800c924 .elementor-nav-menu--dropdown,
  .elementor-element-800c924 .elementor-nav-menu--dropdown ul,
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-nav-menu {
    background-color: var(--color-neutral) !important;
    background-image: none !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* No hardcoded `top` here: Elementor computes the offset from the real
     header height and writes it inline, and overriding it pinned the panel
     onto the header. The gap is added as a margin instead, so the panel
     clears the header whatever height it ends up at.

     The height caps are released so all seven items render at once —
     the panel grows instead of scrolling. */
  .elementor-element-800c924 .elementor-nav-menu--dropdown {
    margin-top: var(--space-md) !important;   /* 16px clear of the header */
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;

    /* Elementor pads the panel itself, which left a dead band above the first
       link and below the last one. The spacing belongs to the items, not to
       the panel, so the list starts flush against the panel edge. */
    padding: 0 !important;
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-nav-menu,
  .elementor-element-800c924 .elementor-nav-menu--dropdown ul {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Nested lists must not repeat the border, or every level draws a box. */
  .elementor-element-800c924 .elementor-nav-menu--dropdown ul,
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-nav-menu {
    border: none !important;
  }

  /* nav-item: nav-link at 15px, no underline at rest, 44px touch floor.
     Rules divide the items rather than boxing them. */
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item {
    background-color: transparent !important;
    color: var(--color-on-surface) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-bottom: 1px solid var(--color-border) !important;
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .menu-item:last-child .elementor-item {
    border-bottom: none !important;
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background-color: var(--color-subtle) !important;
    color: var(--color-primary-strong) !important;
  }

  /* DESIGN.md motion: 400ms gentle ease-out on the mobile nav. Type itself
     never animates. */
  .elementor-element-800c924 .elementor-nav-menu--dropdown {
    transition: opacity 400ms ease-out, transform 400ms ease-out !important;
  }
}

/* Dark mode: the raised step reverses direction — the overlay rises from
   Surface Dark to Neutral Dark instead of darkening. */
@media (max-width: 1024px) and (prefers-color-scheme: dark) {
  .elementor-element-800c924 .elementor-nav-menu--dropdown {
    background-color: #221D1A !important; /* neutral-dark */
    border-color: #352F2B !important;     /* border-dark */
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item {
    color: #E2DDD5 !important;            /* on-surface-dark */
    border-bottom-color: #352F2B !important;
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background-color: #432518 !important; /* subtle-dark */
    color: #E0AB86 !important;            /* primary-strong-dark */
  }
}

@media (max-width: 1024px) {
  /* Aranjează elementele vertical în meniul de mobil.
     gap is 0: the items are separated by the hairline rules set above, and a
     gap on top of them would leave the rules floating in space. DESIGN.md:
     rules "divide rather than enclose". */
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .menu-item {
    width: 100% !important;
  }
}

/* Setează înălțimea fixă uniformă pentru toate elementele din rândul de sus */
.elementor-element-a90219d .elementor-widget-advanced_woo_search_a5b5c8dd,
.elementor-element-a90219d .elementor-widget-button,
.elementor-element-a90219d .elementor-widget-woocommerce-menu-cart,
.elementor-element-a90219d .elementor-menu-cart__toggle_button,
.elementor-element-a90219d .elementor-button {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Forțează inputul de căutare să umple tot containerul lui pe înălțime și lățime.
   max-width: none este obligatoriu — pluginul Advanced Woo Search își setează
   propriul max-width din setările lui, care taie lățimea oricât ar fi width. */
.elementor-element-b830af7 .elementor-widget-advanced_woo_search_a5b5c8dd,
.elementor-element-b830af7 .elementor-widget-container,
.elementor-element-b830af7 .search-input-a5b5c8dd,
.elementor-element-b830af7 .search-container-a5b5c8dd,
.elementor-element-b830af7 .search-form-a5b5c8dd,
.elementor-element-b830af7 .search-wrapper-a5b5c8dd {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

.elementor-element-b830af7 .search-input-a5b5c8dd,
.elementor-element-b830af7 .search-container-a5b5c8dd,
.elementor-element-b830af7 .search-form-a5b5c8dd,
.elementor-element-b830af7 .search-wrapper-a5b5c8dd {
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Centrează corect iconița din butonul de cont */
.elementor-element-fb77db1 .elementor-widget-button a.elementor-button {
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.elementor-element-fb77db1 .elementor-widget-button svg {
  width: 22px !important;
  height: 22px !important;
}

/* Forțează butonul hamburger să respecte înălțimea de 48px și să se alinieze pe verticală.
   Takes the same `button-secondary` treatment as the account and cart buttons —
   neutral fill, primary icon, subtle on hover — so the three controls in the
   header read as one set. */
.elementor-element-800c924 .elementor-menu-toggle {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  margin: 0 !important;

  background-color: var(--color-neutral) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 150ms ease-out !important;
}

.elementor-element-800c924 .elementor-menu-toggle:hover,
.elementor-element-800c924 .elementor-menu-toggle:focus-visible {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
}

/* The toggle icons are inline SVGs with their own fill, so they have to be
   pointed back at the button's text color to follow the hover. */
.elementor-element-800c924 .elementor-menu-toggle svg,
.elementor-element-800c924 .elementor-menu-toggle svg path {
  fill: currentColor !important;
}

/* DESIGN.md: focus rings are a 2px offset outline in primary. */
.elementor-element-800c924 .elementor-menu-toggle:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

@media (prefers-color-scheme: dark) {
  .elementor-element-800c924 .elementor-menu-toggle {
    background-color: #221D1A !important; /* neutral-dark */
    color: #C88762 !important;            /* primary-dark */
  }

  .elementor-element-800c924 .elementor-menu-toggle:hover,
  .elementor-element-800c924 .elementor-menu-toggle:focus-visible {
    background-color: #432518 !important; /* subtle-dark */
    color: #E0AB86 !important;            /* primary-strong-dark */
  }

  .elementor-element-800c924 .elementor-menu-toggle:focus-visible {
    outline-color: #C88762 !important;
  }
}

/* Setează dimensiunea iconiței SVG din hamburger pentru a nu deforma butonul */
.elementor-element-800c924 .elementor-menu-toggle svg {
  width: 24px !important;
  height: 24px !important;
}

/* --- HIDE HAMBURGER ON DESKTOP, SHOW ONLY ON TABLET & MOBILE --- */
@media (min-width: 1025px) {
  /* Ascunde butonul de hamburger și containerul dropdown pe ecrane mari (desktop) */
  .elementor-element-800c924 .elementor-menu-toggle,
  .elementor-element-800c924 .elementor-nav-menu--dropdown {
    display: none !important;
  }
}

/* ==========================================================================
   INPUTS — DESIGN.md: component `input`
   surface fill, 1px border rule, 8px radius, body-sm, 8px padding.
   Focus: 1px primary border + 2px offset outline. No shadows anywhere.
   ========================================================================== */

.elementor-element-b830af7 .search-input-a5b5c8dd,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important; /* body-sm */
  font-weight: 400 !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding-left: var(--space-sm) !important;
  padding-right: var(--space-sm) !important;
  box-shadow: none !important;
}

.elementor-element-b830af7 .search-input-a5b5c8dd:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* DESIGN.md: no text input below 16px on mobile — iOS Safari zooms the
   viewport on focus under 16px and leaves the page scrolled sideways. */
@media (max-width: 767px) {
  .elementor-element-b830af7 .search-input-a5b5c8dd,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* DESIGN.md: dark mode is a separate palette, not an inversion.
   input-dark takes the neutral-dark fill. */
@media (prefers-color-scheme: dark) {
  .elementor-element-b830af7 .search-input-a5b5c8dd,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    background-color: #221D1A !important; /* neutral-dark */
    color: #E2DDD5 !important;            /* on-surface-dark */
    border-color: #352F2B !important;     /* border-dark */
  }

  .elementor-element-b830af7 .search-input-a5b5c8dd:focus,
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus,
  input[type="number"]:focus,
  input[type="password"]:focus,
  textarea:focus,
  select:focus {
    border-color: #C88762 !important;     /* primary-dark */
    outline-color: #C88762 !important;
  }
}

/* ==========================================================================
   BUTTONS — DESIGN.md: component `button-primary` / `button-secondary`
   primary fill, surface text, label-md, 8px radius, 16px padding.
   Hover darkens to primary-strong: "no lift, no scale, no shadow".
   Sentence case — uppercase is reserved for chips and eyebrow labels.
   ========================================================================== */

.elementor-button,
button,
input[type="submit"],
.elementor-menu-cart__toggle_button {
  background-color: var(--color-primary) !important;
  color: var(--color-surface) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;   /* label-md */
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-md) !important;
  box-shadow: none !important;
  transition: background-color 150ms ease-out !important;
}

.elementor-button:hover,
button:hover,
input[type="submit"]:hover,
.elementor-menu-cart__toggle_button:hover {
  background-color: var(--color-primary-strong) !important;
  color: var(--color-surface) !important;
  transform: none !important; /* no lift, no scale */
  box-shadow: none !important;
}

/* Icon buttons in the header row (account, cart) keep the 48px touch target;
   vertical padding collapses so the icon stays centred.
   These take the `button-secondary` treatment — neutral fill, primary text —
   so the header carries no loud fill and the one loud gesture per page stays
   available to the full-bleed field. */
.elementor-element-a90219d .elementor-button,
.elementor-element-a90219d .elementor-menu-cart__toggle_button {
  padding: 0 var(--space-md) !important;
  background-color: var(--color-neutral) !important;
  color: var(--color-primary) !important;
}

.elementor-element-a90219d .elementor-button:hover,
.elementor-element-a90219d .elementor-menu-cart__toggle_button:hover {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
}

/* Icons inherit the button text color instead of their hardcoded SVG fill. */
.elementor-element-a90219d .elementor-button svg,
.elementor-element-a90219d .elementor-button svg path,
.elementor-element-a90219d .elementor-button svg circle,
.elementor-element-a90219d .elementor-menu-cart__toggle_button svg,
.elementor-element-a90219d .elementor-menu-cart__toggle_button svg path {
  fill: currentColor !important;
}

/* Cart subtotal in the toggle sits in the button's own text color, not
   the price color — it is part of a control, not a displayed price. */
.elementor-element-a90219d .elementor-menu-cart__toggle_button .woocommerce-Price-amount,
.elementor-element-a90219d .elementor-menu-cart__toggle_button .woocommerce-Price-currencySymbol {
  color: inherit !important;
  font-family: var(--font-sans) !important;
  font-feature-settings: "tnum" 1 !important;
}

/* Item-count bubble: subtle chaff fill with roast text, per the chip register. */
.elementor-element-a90219d .elementor-button-icon-qty {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
}

/* Secondary: neutral fill, primary text. "View cart" beside "Checkout" —
   there is no third button level in this system. */
.elementor-button--view-cart,
.button-secondary,
.elementor-button.elementor-size-sm.button-secondary {
  background-color: var(--color-neutral) !important;
  color: var(--color-primary) !important;
}

.elementor-button--view-cart:hover,
.button-secondary:hover {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
}

/* DESIGN.md: touch targets are at least 44x44px; buttons take a 48px floor. */
@media (max-width: 1024px) {
  .elementor-button,
  button,
  input[type="submit"],
  .elementor-menu-cart__toggle_button {
    min-height: 48px !important;
  }
}

/* DESIGN.md: in dark mode the primary button inverts — a light primary-dark
   fill with surface-dark text, "because a dark-on-dark fill disappears". */
@media (prefers-color-scheme: dark) {
  .elementor-button,
  button,
  input[type="submit"],
  .elementor-menu-cart__toggle_button {
    background-color: #C88762 !important; /* primary-dark */
    color: #13100D !important;            /* surface-dark */
  }

  .elementor-button:hover,
  button:hover,
  input[type="submit"]:hover,
  .elementor-menu-cart__toggle_button:hover {
    background-color: #E0AB86 !important; /* primary-strong-dark */
    color: #13100D !important;
  }

  .elementor-button--view-cart,
  .button-secondary,
  .elementor-element-a90219d .elementor-button,
  .elementor-element-a90219d .elementor-menu-cart__toggle_button {
    background-color: #221D1A !important; /* neutral-dark */
    color: #C88762 !important;            /* primary-dark */
  }

  .elementor-element-a90219d .elementor-button:hover,
  .elementor-element-a90219d .elementor-menu-cart__toggle_button:hover {
    background-color: #432518 !important; /* subtle-dark */
    color: #E0AB86 !important;            /* primary-strong-dark */
  }

  .elementor-element-a90219d .elementor-button-icon-qty {
    background-color: #432518 !important; /* subtle-dark */
    color: #E0AB86 !important;            /* primary-strong-dark */
  }
}

/* DESIGN.md: "No drop shadows anywhere, in either mode." */
.elementor-element-a90219d *,
.elementor-element-800c924 * {
  box-shadow: none !important;
}

/* ==========================================================================
   SECOND HEADER ROW (.elementor-element-8873f9b)

   A duplicate of the top row, added to carry the search and the account/cart
   on phones. It inherits none of the rules above, which are scoped to the
   first row's ids, so the same treatment is repeated here against its own:
     .elementor-element-4ba2c17 = search container
     .elementor-element-7605eae = account + cart container
   ========================================================================== */

.elementor-element-8873f9b > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: var(--space-md) !important;
}

/* Search takes the free space; account/cart keeps its natural width. */
.elementor-element-4ba2c17 {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.elementor-element-7605eae {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
}

/* Same max-width release as the top row — the Advanced Woo Search plugin sets
   its own max-width, which caps the field however wide the container gets. */
.elementor-element-4ba2c17 .elementor-widget-advanced_woo_search_a5b5c8dd,
.elementor-element-4ba2c17 .elementor-widget-container,
.elementor-element-4ba2c17 .search-input-a5b5c8dd,
.elementor-element-4ba2c17 .search-container-a5b5c8dd,
.elementor-element-4ba2c17 .search-form-a5b5c8dd,
.elementor-element-4ba2c17 .search-wrapper-a5b5c8dd {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.elementor-element-4ba2c17 .search-input-a5b5c8dd,
.elementor-element-4ba2c17 .search-container-a5b5c8dd,
.elementor-element-4ba2c17 .search-form-a5b5c8dd,
.elementor-element-4ba2c17 .search-wrapper-a5b5c8dd {
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Buttons match the top row: neutral fill, primary text, 48px touch target. */
.elementor-element-7605eae .elementor-button,
.elementor-element-7605eae .elementor-menu-cart__toggle_button {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 var(--space-md) !important;
  background-color: var(--color-neutral) !important;
  color: var(--color-primary) !important;
  box-sizing: border-box !important;
}

.elementor-element-7605eae .elementor-button:hover,
.elementor-element-7605eae .elementor-menu-cart__toggle_button:hover {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
}

.elementor-element-7605eae .elementor-button svg,
.elementor-element-7605eae .elementor-button svg path,
.elementor-element-7605eae .elementor-button svg circle,
.elementor-element-7605eae .elementor-menu-cart__toggle_button svg,
.elementor-element-7605eae .elementor-menu-cart__toggle_button svg path {
  fill: currentColor !important;
}

.elementor-element-7605eae .elementor-button svg {
  width: 22px !important;
  height: 22px !important;
}

.elementor-element-7605eae .elementor-menu-cart__toggle_button .woocommerce-Price-amount,
.elementor-element-7605eae .elementor-menu-cart__toggle_button .woocommerce-Price-currencySymbol {
  color: inherit !important;
  font-family: var(--font-sans) !important;
  font-feature-settings: "tnum" 1 !important;
}

.elementor-element-7605eae .elementor-button-icon-qty {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full) !important;
}

.elementor-element-8873f9b * {
  box-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
  .elementor-element-7605eae .elementor-button,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button {
    background-color: #221D1A !important; /* neutral-dark */
    color: #C88762 !important;            /* primary-dark */
  }

  .elementor-element-7605eae .elementor-button:hover,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button:hover {
    background-color: #432518 !important; /* subtle-dark */
    color: #E0AB86 !important;            /* primary-strong-dark */
  }

  .elementor-element-7605eae .elementor-button-icon-qty {
    background-color: #432518 !important;
    color: #E0AB86 !important;
  }
}

/* ==========================================================================
   RESPONSIVE VISIBILITY — must stay last in the file.

   The `display: flex !important` rules above (used to line the header widgets
   up on a 48px row) outrank Elementor's own .elementor-hidden-* classes, so
   anything toggled off in Responsive > Hide On... came back visible. These
   rules hand that control back to the editor.

   The class is repeated three times on purpose: it raises specificity above
   the two-class rules above without needing a longer .elementor-3503 .elementor-element.elementor-element-31191c7, so Hide On
   Mobile/Tablet/Desktop works from the Elementor panel as normal.
   ========================================================================== */

@media (max-width: 767px) {
  .elementor-hidden-mobile.elementor-hidden-mobile.elementor-hidden-mobile,
  .elementor-hidden-phone.elementor-hidden-phone.elementor-hidden-phone {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-hidden-tablet.elementor-hidden-tablet.elementor-hidden-tablet {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .elementor-hidden-desktop.elementor-hidden-desktop.elementor-hidden-desktop {
    display: none !important;
  }
}

/* A container hidden on a breakpoint must not keep its flex sizing, or it
   still reserves a gap in the row even with display:none on the child. */
@media (max-width: 767px) {
  .elementor-element-a90219d > .elementor-hidden-mobile {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   MOBILE BOTTOM BAR (.elementor-element-8873f9b)

   The second header row is pinned to the bottom of the screen on phones,
   carrying search and cart within thumb reach.

   Its three children were duplicated from the top row and came with Hide On
   Mobile already set, so the row rendered as an empty box. They are switched
   back on here explicitly — the repeated class matches the specificity of the
   restore rules above and wins by coming later in the file.
   ========================================================================== */

@media (max-width: 767px) {
  .elementor-element-4ba2c17.elementor-hidden-mobile.elementor-hidden-mobile,
  .elementor-element-7605eae.elementor-hidden-mobile.elementor-hidden-mobile,
  .elementor-element-db79070.elementor-hidden-mobile.elementor-hidden-mobile {
    display: flex !important;
  }

  .elementor-element-8873f9b {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 998 !important;

    /* The container carries a 298px Min Height from the editor, which would
       make the bar most of the screen. */
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;

    /* DESIGN.md tonal layering: in light mode a raised surface goes darker,
       so the bar sits on Kraft above the Cupping Sheet page.
       background-image is cleared too — the container carries its own
       background from the editor, which showed through as a wash. */
    background-color: var(--color-neutral) !important;
    background-image: none !important;
    opacity: 1 !important;

    /* DESIGN.md has no shadow language, so the bar is separated from the page
       by a hairline rule instead of a lift. */
    border-top: 1px solid var(--color-border) !important;

    /* Clears the iPhone home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .elementor-element-8873f9b > .e-con-inner {
    min-height: 0 !important;
    padding-top: var(--space-sm) !important;
    padding-bottom: var(--space-sm) !important;
    gap: var(--space-sm) !important;
    background-color: transparent !important;
  }

  /* The controls step back up to Surface so they read as objects on the Kraft
     band; a neutral fill on a neutral bar would disappear. The hairline gives
     them their edge, matching the input treatment — DESIGN.md defines no
     button variant for a neutral ground, so this follows its depth rules
     (tonal step plus rule, never a shadow) rather than inventing a fill. */
  .elementor-element-7605eae .elementor-button,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button {
    background-color: var(--color-surface) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
  }

  .elementor-element-7605eae .elementor-button:hover,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button:hover {
    background-color: var(--color-subtle) !important;
    color: var(--color-primary-strong) !important;
  }

  /* DESIGN.md: inputs take `rounded.md`. `full` is reserved exclusively for
     origin chips, so the pill shape used earlier is corrected here. */
  .elementor-element-4ba2c17 .search-input-a5b5c8dd {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-surface) !important;
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
  }

  /* The fixed bar would otherwise cover the last stretch of every page. */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Dark mode is a separate palette, and the tonal step reverses: a raised
   surface goes lighter here, so the bar rises from Surface Dark to Neutral
   Dark rather than darkening. */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  .elementor-element-8873f9b {
    background-color: #221D1A !important; /* neutral-dark */
    border-top-color: #352F2B !important; /* border-dark */
  }

  .elementor-element-7605eae .elementor-button,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button,
  .elementor-element-4ba2c17 .search-input-a5b5c8dd {
    background-color: #13100D !important; /* surface-dark */
    border-color: #352F2B !important;     /* border-dark */
  }

  .elementor-element-7605eae .elementor-button,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button {
    color: #C88762 !important;            /* primary-dark */
  }

  .elementor-element-4ba2c17 .search-input-a5b5c8dd {
    color: #E2DDD5 !important;            /* on-surface-dark */
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800c924 */@media (max-width: 1024px) {
    .elementor-3503 .elementor-element.elementor-element-800c924 {
        background-color: transparent !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cda4191 *//* ==========================================================================
   SECOND CRACK DESIGN SYSTEM - HEADER & MENU FIX
   Real structure (from live HTML):
     .elementor-element-a90219d   = header row (logo + search + account/cart)
       .elementor-element-6f629e7 = logo container
       .elementor-element-b830af7 = search container (direct flex child!)
         .elementor-widget-advanced_woo_search_a5b5c8dd = search widget (nested, NOT a flex child of the row)
       .elementor-element-fb77db1 = account + cart container
     .elementor-element-800c924   = nav menu row (SIBLING of the header row, not a child)
       .elementor-element-31191c7 = nav-menu widget
   ========================================================================== */

/* ==========================================================================
   TYPEFACES

   DESIGN.md specifies Newsreader (voice) and Source Sans 3 (commerce), and
   states: "Both faces are self-hosted and subset to Latin; no third-party
   font CDN is used."

   This @import is a CDN load, so it contradicts that rule. It is here so the
   faces render now; the compliant route is Elementor > Custom Fonts, where
   the woff2 files are uploaded and Elementor emits its own @font-face. Once
   that is done, delete this line.

   Newsreader is loaded with its optical-size axis (opsz) intact — DESIGN.md
   relies on it so the 84px hero and the 22px lede are drawn for their sizes
   rather than scaled to them.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  --color-primary: #834227;
  --color-primary-strong: #5D2918;
  --color-subtle: #EECBAE;
  --color-secondary: #6E6862;
  --color-tertiary: #465C46;
  --color-neutral: #F3EFEA;
  --color-surface: #FCFAF6;
  --color-on-surface: #1D1815;
  --color-border: #E2DDD7;
  --color-error: #A12F2F;

  --font-serif: Newsreader, "Source Serif 4", Georgia, serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;

  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 96px;
  --space-gutter: 24px;
  --space-margin: 64px;

  /* One margin for every touch breakpoint, so tablet and phone read
     identically. Change this single value to move both at once. */
  --space-margin-touch: 20px;

  /* The logo is a square SVG, so its width sets the height of the whole
     header row — the controls beside it are only 48px tall. Lower this to
     make the header shorter; below 48px the controls take over and the row
     stops shrinking. */
  --header-logo-size: 80px;
  --header-pad-y: 8px;

  /* DESIGN.md: content caps at 1280px and centres beyond that. */
  --content-max: 1280px;

  --page-bg: var(--color-surface);
  --page-text: var(--color-on-surface);
}

/* ==========================================================================
   TYPE ASSIGNMENT — DESIGN.md: "prose about coffee is set in the serif;
   anything you click, compare, or pay with is set in the sans."
   ========================================================================== */

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

/* Newsreader at 400 only. DESIGN.md: "Don't set Newsreader in bold, ever, at
   any size... Hierarchy in the voice face comes entirely from size, measure,
   and the space above a block." */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 40;
}

/* The editorial lede is the one place the serif still carries running text. */
.editorial-lede,
p.body-lg {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* Figures and prices take tabular lining so columns align on the decimal. */
.woocommerce-Price-amount,
.product-price,
.lot-spec-data,
data {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 1. Main Header Container Layout (the row itself) */
.elementor-element-a90219d {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 16px !important;
}

/* ==========================================================================
   OUTER MARGINS — one value, every breakpoint.

   The margin lives on the wrapper's .e-con-inner and nowhere else. Two rules
   make that hold:
     - the outer container is zeroed, or its padding stacks on top of the
       inner one and the margin comes out twice as wide;
     - every row inside is zeroed, or a row that carries its own padding sits
       further in than its neighbour (this is why the menu row looked inset
       while the logo row ran to the edge).
   ========================================================================== */

.elementor-element-cda4191,
.elementor-element-8873f9b {
  padding-left: 0 !important;
  padding-right: 0 !important;

  /* Pinned to a fixed 100%, not whatever percentage Elementor's own Layout
     panel might carry — this outer wrapper runs edge-to-edge; the boxed
     1280px width lives on its own .e-con-inner (line 158 below). */
  width: 100% !important;
  max-width: 100% !important;
}

/* DESIGN.md, Layout: "Content is capped at 1280px and centres in the viewport
   beyond that; the layout inside stays flush-left."

   Without this the header stretches to whatever the window is, which pushes
   the search field out to several hundred pixels wider than anything else on
   the page and opens a gap between it and the logo. */
.elementor-element-cda4191 > .e-con-inner,
.elementor-element-8873f9b > .e-con-inner {
  max-width: var(--content-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-left: var(--space-margin-touch) !important;
  padding-right: var(--space-margin-touch) !important;
}

.elementor-element-cda4191 > .e-con-inner > .e-con,
.elementor-element-8873f9b > .e-con-inner > .e-con,
.elementor-element-a90219d,
.elementor-element-800c924 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 1024px) {
  .elementor-element-cda4191 > .e-con-inner {
    padding-top: var(--space-sm) !important;      /* 8px */
  }

  /* Re-add only the gap between the last header item and the hamburger. */
  .elementor-element-800c924 {
    margin-left: var(--space-sm) !important;
  }
}

/* The menu band runs the full width of the viewport while its links stay
   aligned with the logo above.

   The wrapper is an `e-con-boxed` container with a fixed max-width, so a plain
   negative margin can only reach that box's edge, not the screen's. The band
   is given the viewport's own width and pulled back by half the difference
   between the viewport and its parent, which escapes the box entirely.

   The padding then re-adds that same offset plus the header margin, so the
   links land on the logo's left edge rather than on the screen edge.

   Desktop only — below 1025px this row sits on the header line, where a
   negative margin would drag the hamburger off the edge. */
@media (min-width: 1025px) {
  .elementor-element-800c924 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: calc(50vw - 50% + var(--space-margin-touch)) !important;
    padding-right: calc(50vw - 50% + var(--space-margin-touch)) !important;
    box-sizing: border-box !important;
  }
}

/* On tablet/mobile the nav row joins the header row on a single line, so the
   hamburger sits up top beside the logo instead of dropping to its own band.
   The wrapper stacks its two rows by default (Elementor containers are
   column), so it has to be switched to a row at these breakpoints. */
@media (max-width: 1024px) {
  .elementor-element-cda4191 > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Header row takes the free space, pushing the hamburger to the far right.
     With search and cart hidden on mobile, this leaves logo left / burger right. */
  .elementor-element-a90219d {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .elementor-element-800c924 {
    flex: 1 1 auto !important;
    width: auto !important;
    margin-left: var(--space-sm) !important;      /* 8px */
  }

  .elementor-element-800c924 .elementor-menu-toggle {
    margin-left: 0 !important;                    /* was auto — that's what pushed it out */
  }
}

/* Logo + account/cart: fixed size, never grow/shrink.

   width:auto matters as much as the flex value here. `flex: 0 0 auto` means
   "use the declared width as the basis", so a percentage width set on the
   container in Elementor kept the logo box far wider than the logo itself and
   pushed the search field to the right. Shrink-wrapping the box closes that
   gap at every breakpoint. */
.elementor-element-a90219d > .elementor-element-6f629e7,
.elementor-element-a90219d > .elementor-element-fb77db1 {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Search container: THIS is the direct flex child that must grow, not the widget nested inside it */
.elementor-element-a90219d > .elementor-element-b830af7 {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important; /* allow it to shrink below content size so it can actually flex */
  max-width: none !important;
}

/* The image widget inside the logo container must shrink-wrap too, or it
   reintroduces the same gap one level down. */
.elementor-element-6f629e7 .elementor-widget-image,
.elementor-element-6f629e7 .elementor-widget-container {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* 2. Logo Sizing Control */
.elementor-element-a90219d .elementor-widget-image img,
.elementor-element-a90219d img.wp-image-3526 {
  width: var(--header-logo-size) !important;
  max-width: var(--header-logo-size) !important;
  min-width: var(--header-logo-size) !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* Vertical padding on the header row, kept separate from the horizontal
   margin so the two can be tuned independently.

   Top only. This wrapper holds BOTH rows (logo row, then the grey nav band
   below it) — a padding-bottom here lands after the nav band's own grey
   background, so it rendered as a strip of plain white between the grey
   band and the hero image. The nav band's own padding already gives its
   links breathing room, so nothing sits below it. */
@media (min-width: 1025px) {
  .elementor-element-cda4191 > .e-con-inner {
    padding-top: var(--header-pad-y) !important;
  }
}

/* 4. Right-side Elements (Account + Cart) */
.elementor-element-fb77db1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
}

/* 5. Nav Menu Fix (Desktop & Tablet Alignment) */
.elementor-widget-nav-menu {
  width: 100% !important;
}

.elementor-nav-menu--main {
  display: flex !important;
}

/* Centred here rather than through the widget's Alignment control: the ul is
   a flex row set by the rule below, and Elementor's alignment output was not
   reaching it. Change `center` to `flex-start` to go back to a left-aligned
   menu. */
.elementor-element-800c924 .elementor-nav-menu--main,
.elementor-element-800c924 .elementor-nav-menu {
  justify-content: center !important;

  /* Forced to 0 with !important so it wins over any inline z-index the
     SmartMenus JS library (the nav widget's own submenu-positioning script)
     might set directly on this element — a plain inline style (no
     !important) loses to an !important rule in an external stylesheet. */
  position: relative !important;
  z-index: 0 !important;
}

.elementor-nav-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* nav-link, with one deviation: DESIGN.md sets this level at 400, but the
   links read thin against the band. 600 is used rather than 500 because the
   system declares only three weights — 400, 600, 700 — and 500 would add a
   fourth. 600 is otherwise the commerce weight (product titles, prices), so
   the nav now shares that step. */
.elementor-nav-menu .elementor-item {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--color-on-surface) !important;
  text-decoration: none !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.highlighted {
  color: var(--color-primary) !important;
}

/* Shop Grid Utility */
.sc-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gutter);
}

@media (max-width: 1024px) {
  .sc-shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .sc-shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- MOBILE / TABLET RESPONSIVE MENU OVERRIDES ---
   Scoped to .elementor-element-800c924 = the nav-menu row
   (it's a SIBLING of the header row, not a child of it) */
@media (max-width: 1024px) {
  /* Ascunde meniul orizontal principal */
  .elementor-element-800c924 .elementor-nav-menu--main {
    display: none !important;
  }

  /* Afișează butonul de hamburger (poziționarea lui e mai jos, lângă coș) */
  .elementor-element-800c924 .elementor-menu-toggle {
    display: flex !important;
  }

  /* DESIGN.md, Elevation & Depth: "Overlays — the mobile nav, the size
     .elementor-3503 .elementor-element.elementor-element-cda4191 — sit on the raised surface with a full-strength 1px rule and no
     scrim blur. Because there is no shadow language, having a border is
     itself the signal that something is above the page."

     Raised in light mode means darker, so the panel is Kraft, not white —
     the system has no #FFFFFF in it at all. */
  .elementor-element-800c924 .elementor-nav-menu--dropdown,
  .elementor-element-800c924 .elementor-nav-menu--dropdown ul,
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-nav-menu {
    background-color: var(--color-neutral) !important;
    background-image: none !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* No hardcoded `top` here: Elementor computes the offset from the real
     header height and writes it inline, and overriding it pinned the panel
     onto the header. The gap is added as a margin instead, so the panel
     clears the header whatever height it ends up at.

     The height caps are released so all seven items render at once —
     the panel grows instead of scrolling. */
  .elementor-element-800c924 .elementor-nav-menu--dropdown {
    margin-top: var(--space-md) !important;   /* 16px clear of the header */
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;

    /* Above the header row — the logo box was painting over the panel.
       Below the search results panel (2), which is the only thing that
       should ever sit on top of the open menu. Small numbers on purpose:
       easy to reason about, no arms race with whatever the SmartMenus JS
       library injects inline for its own submenu stacking. */
    z-index: 1 !important;

    /* Elementor pads the panel itself, which left a dead band above the first
       link and below the last one. The spacing belongs to the items, not to
       the panel, so the list starts flush against the panel edge. */
    padding: 0 !important;
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-nav-menu,
  .elementor-element-800c924 .elementor-nav-menu--dropdown ul {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Nested lists must not repeat the border, or every level draws a box. */
  .elementor-element-800c924 .elementor-nav-menu--dropdown ul,
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-nav-menu {
    border: none !important;
  }

  /* nav-item: nav-link at 15px, no underline at rest, 44px touch floor.
     Rules divide the items rather than boxing them. */
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item {
    background-color: transparent !important;
    color: var(--color-on-surface) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-bottom: 1px solid var(--color-border) !important;
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .menu-item:last-child .elementor-item {
    border-bottom: none !important;
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background-color: var(--color-subtle) !important;
    color: var(--color-primary-strong) !important;
  }

  /* DESIGN.md motion: 400ms gentle ease-out on the mobile nav. Type itself
     never animates. */
  .elementor-element-800c924 .elementor-nav-menu--dropdown {
    transition: opacity 400ms ease-out, transform 400ms ease-out !important;
  }
}

/* Dark mode: the raised step reverses direction — the overlay rises from
   Surface Dark to Neutral Dark instead of darkening. */
@media (max-width: 1024px) and (prefers-color-scheme: dark) {
  .elementor-element-800c924 .elementor-nav-menu--dropdown {
    background-color: #221D1A !important; /* neutral-dark */
    border-color: #352F2B !important;     /* border-dark */
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item {
    color: #E2DDD5 !important;            /* on-surface-dark */
    border-bottom-color: #352F2B !important;
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background-color: #432518 !important; /* subtle-dark */
    color: #E0AB86 !important;            /* primary-strong-dark */
  }
}

@media (max-width: 1024px) {
  /* Aranjează elementele vertical în meniul de mobil.
     gap is 0: the items are separated by the hairline rules set above, and a
     gap on top of them would leave the rules floating in space. DESIGN.md:
     rules "divide rather than enclose". */
  .elementor-element-800c924 .elementor-nav-menu--dropdown .elementor-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .elementor-element-800c924 .elementor-nav-menu--dropdown .menu-item {
    width: 100% !important;
  }
}

/* Setează înălțimea fixă uniformă pentru toate elementele din rândul de sus */
.elementor-element-a90219d .elementor-widget-advanced_woo_search_a5b5c8dd,
.elementor-element-a90219d .elementor-widget-button,
.elementor-element-a90219d .elementor-widget-woocommerce-menu-cart,
.elementor-element-a90219d .elementor-menu-cart__toggle_button,
.elementor-element-a90219d .elementor-button {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Forțează inputul de căutare să umple tot containerul lui pe înălțime și lățime.
   max-width: none este obligatoriu — pluginul Advanced Woo Search își setează
   propriul max-width din setările lui, care taie lățimea oricât ar fi width. */
.elementor-element-b830af7 .elementor-widget-advanced_woo_search_a5b5c8dd,
.elementor-element-b830af7 .elementor-widget-container,
.elementor-element-b830af7 .search-input-a5b5c8dd,
.elementor-element-b830af7 .search-container-a5b5c8dd,
.elementor-element-b830af7 .search-form-a5b5c8dd,
.elementor-element-b830af7 .search-wrapper-a5b5c8dd {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

.elementor-element-b830af7 .search-input-a5b5c8dd,
.elementor-element-b830af7 .search-container-a5b5c8dd,
.elementor-element-b830af7 .search-form-a5b5c8dd,
.elementor-element-b830af7 .search-wrapper-a5b5c8dd {
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Centrează corect iconița din butonul de cont */
.elementor-element-fb77db1 .elementor-widget-button a.elementor-button {
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.elementor-element-fb77db1 .elementor-widget-button svg {
  width: 22px !important;
  height: 22px !important;
}

/* Forțează butonul hamburger să respecte înălțimea de 48px și să se alinieze pe verticală.
   Takes the same `button-secondary` treatment as the account and cart buttons —
   neutral fill, primary icon, subtle on hover — so the three controls in the
   header read as one set. */
.elementor-element-800c924 .elementor-menu-toggle {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  margin: 0 !important;

  background-color: var(--color-neutral) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 150ms ease-out !important;
}

.elementor-element-800c924 .elementor-menu-toggle:hover,
.elementor-element-800c924 .elementor-menu-toggle:focus-visible {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
}

/* The toggle icons are inline SVGs with their own fill, so they have to be
   pointed back at the button's text color to follow the hover. */
.elementor-element-800c924 .elementor-menu-toggle svg,
.elementor-element-800c924 .elementor-menu-toggle svg path {
  fill: currentColor !important;
}

/* DESIGN.md: focus rings are a 2px offset outline in primary. */
.elementor-element-800c924 .elementor-menu-toggle:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

@media (prefers-color-scheme: dark) {
  .elementor-element-800c924 .elementor-menu-toggle {
    background-color: #221D1A !important; /* neutral-dark */
    color: #C88762 !important;            /* primary-dark */
  }

  .elementor-element-800c924 .elementor-menu-toggle:hover,
  .elementor-element-800c924 .elementor-menu-toggle:focus-visible {
    background-color: #432518 !important; /* subtle-dark */
    color: #E0AB86 !important;            /* primary-strong-dark */
  }

  .elementor-element-800c924 .elementor-menu-toggle:focus-visible {
    outline-color: #C88762 !important;
  }
}

/* Setează dimensiunea iconiței SVG din hamburger pentru a nu deforma butonul */
.elementor-element-800c924 .elementor-menu-toggle svg {
  width: 24px !important;
  height: 24px !important;
}

/* --- HIDE HAMBURGER ON DESKTOP, SHOW ONLY ON TABLET & MOBILE --- */
@media (min-width: 1025px) {
  /* Ascunde butonul de hamburger și containerul dropdown pe ecrane mari (desktop) */
  .elementor-element-800c924 .elementor-menu-toggle,
  .elementor-element-800c924 .elementor-nav-menu--dropdown {
    display: none !important;
  }
}

/* ==========================================================================
   INPUTS — DESIGN.md: component `input`
   surface fill, 1px border rule, 8px radius, body-sm, 8px padding.
   Focus: 1px primary border + 2px offset outline. No shadows anywhere.
   ========================================================================== */

.elementor-element-b830af7 .search-input-a5b5c8dd,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important; /* body-sm */
  font-weight: 400 !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding-left: var(--space-sm) !important;
  padding-right: var(--space-sm) !important;
  box-shadow: none !important;
}

.elementor-element-b830af7 .search-input-a5b5c8dd:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* DESIGN.md: no text input below 16px on mobile — iOS Safari zooms the
   viewport on focus under 16px and leaves the page scrolled sideways. */
@media (max-width: 767px) {
  .elementor-element-b830af7 .search-input-a5b5c8dd,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* DESIGN.md: dark mode is a separate palette, not an inversion.
   input-dark takes the neutral-dark fill. */
@media (prefers-color-scheme: dark) {
  .elementor-element-b830af7 .search-input-a5b5c8dd,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    background-color: #221D1A !important; /* neutral-dark */
    color: #E2DDD5 !important;            /* on-surface-dark */
    border-color: #352F2B !important;     /* border-dark */
  }

  .elementor-element-b830af7 .search-input-a5b5c8dd:focus,
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus,
  input[type="number"]:focus,
  input[type="password"]:focus,
  textarea:focus,
  select:focus {
    border-color: #C88762 !important;     /* primary-dark */
    outline-color: #C88762 !important;
  }
}

/* ==========================================================================
   BUTTONS — DESIGN.md: component `button-primary` / `button-secondary`
   primary fill, surface text, label-md, 8px radius, 16px padding.
   Hover darkens to primary-strong: "no lift, no scale, no shadow".
   Sentence case — uppercase is reserved for chips and eyebrow labels.
   ========================================================================== */

.elementor-button,
button,
input[type="submit"],
.elementor-menu-cart__toggle_button {
  background-color: var(--color-primary) !important;
  color: var(--color-surface) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;   /* label-md */
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-md) !important;
  box-shadow: none !important;
  transition: background-color 150ms ease-out !important;
}

.elementor-button:hover,
button:hover,
input[type="submit"]:hover,
.elementor-menu-cart__toggle_button:hover {
  background-color: var(--color-primary-strong) !important;
  color: var(--color-surface) !important;
  transform: none !important; /* no lift, no scale */
  box-shadow: none !important;
}

/* Icon buttons in the header row (account, cart) keep the 48px touch target;
   vertical padding collapses so the icon stays centred.
   These take the `button-secondary` treatment — neutral fill, primary text —
   so the header carries no loud fill and the one loud gesture per page stays
   available to the full-bleed field. */
.elementor-element-a90219d .elementor-button,
.elementor-element-a90219d .elementor-menu-cart__toggle_button {
  padding: 0 var(--space-md) !important;
  background-color: var(--color-neutral) !important;
  color: var(--color-primary) !important;
}

.elementor-element-a90219d .elementor-button:hover,
.elementor-element-a90219d .elementor-menu-cart__toggle_button:hover {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
}

/* Icons inherit the button text color instead of their hardcoded SVG fill. */
.elementor-element-a90219d .elementor-button svg,
.elementor-element-a90219d .elementor-button svg path,
.elementor-element-a90219d .elementor-button svg circle,
.elementor-element-a90219d .elementor-menu-cart__toggle_button svg,
.elementor-element-a90219d .elementor-menu-cart__toggle_button svg path {
  fill: currentColor !important;
}

/* Cart subtotal in the toggle sits in the button's own text color, not
   the price color — it is part of a control, not a displayed price. */
.elementor-element-a90219d .elementor-menu-cart__toggle_button .woocommerce-Price-amount,
.elementor-element-a90219d .elementor-menu-cart__toggle_button .woocommerce-Price-currencySymbol {
  color: inherit !important;
  font-family: var(--font-sans) !important;
  font-feature-settings: "tnum" 1 !important;
}

/* Item-count bubble: subtle chaff fill with roast text, per the chip register. */
.elementor-element-a90219d .elementor-button-icon-qty {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
}

/* Secondary: neutral fill, primary text. "View cart" beside "Checkout" —
   there is no third button level in this system. */
.elementor-button--view-cart,
.button-secondary,
.elementor-button.elementor-size-sm.button-secondary {
  background-color: var(--color-neutral) !important;
  color: var(--color-primary) !important;
}

.elementor-button--view-cart:hover,
.button-secondary:hover {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
}

/* DESIGN.md: touch targets are at least 44x44px; buttons take a 48px floor. */
@media (max-width: 1024px) {
  .elementor-button,
  button,
  input[type="submit"],
  .elementor-menu-cart__toggle_button {
    min-height: 48px !important;
  }
}

/* DESIGN.md: in dark mode the primary button inverts — a light primary-dark
   fill with surface-dark text, "because a dark-on-dark fill disappears". */
@media (prefers-color-scheme: dark) {
  .elementor-button,
  button,
  input[type="submit"],
  .elementor-menu-cart__toggle_button {
    background-color: #C88762 !important; /* primary-dark */
    color: #13100D !important;            /* surface-dark */
  }

  .elementor-button:hover,
  button:hover,
  input[type="submit"]:hover,
  .elementor-menu-cart__toggle_button:hover {
    background-color: #E0AB86 !important; /* primary-strong-dark */
    color: #13100D !important;
  }

  .elementor-button--view-cart,
  .button-secondary,
  .elementor-element-a90219d .elementor-button,
  .elementor-element-a90219d .elementor-menu-cart__toggle_button {
    background-color: #221D1A !important; /* neutral-dark */
    color: #C88762 !important;            /* primary-dark */
  }

  .elementor-element-a90219d .elementor-button:hover,
  .elementor-element-a90219d .elementor-menu-cart__toggle_button:hover {
    background-color: #432518 !important; /* subtle-dark */
    color: #E0AB86 !important;            /* primary-strong-dark */
  }

  .elementor-element-a90219d .elementor-button-icon-qty {
    background-color: #432518 !important; /* subtle-dark */
    color: #E0AB86 !important;            /* primary-strong-dark */
  }
}

/* DESIGN.md: "No drop shadows anywhere, in either mode." */
.elementor-element-a90219d *,
.elementor-element-800c924 * {
  box-shadow: none !important;
}

/* ==========================================================================
   SECOND HEADER ROW (.elementor-element-8873f9b)

   A duplicate of the top row, added to carry the search and the account/cart
   on phones. It inherits none of the rules above, which are scoped to the
   first row's ids, so the same treatment is repeated here against its own:
     .elementor-element-4ba2c17 = search container
     .elementor-element-7605eae = account + cart container
   ========================================================================== */

.elementor-element-8873f9b > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: var(--space-md) !important;
}

/* Search takes the free space; account/cart keeps its natural width. */
.elementor-element-4ba2c17 {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.elementor-element-7605eae {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
}

/* Same max-width release as the top row — the Advanced Woo Search plugin sets
   its own max-width, which caps the field however wide the container gets. */
.elementor-element-4ba2c17 .elementor-widget-advanced_woo_search_a5b5c8dd,
.elementor-element-4ba2c17 .elementor-widget-container,
.elementor-element-4ba2c17 .search-input-a5b5c8dd,
.elementor-element-4ba2c17 .search-container-a5b5c8dd,
.elementor-element-4ba2c17 .search-form-a5b5c8dd,
.elementor-element-4ba2c17 .search-wrapper-a5b5c8dd {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.elementor-element-4ba2c17 .search-input-a5b5c8dd,
.elementor-element-4ba2c17 .search-container-a5b5c8dd,
.elementor-element-4ba2c17 .search-form-a5b5c8dd,
.elementor-element-4ba2c17 .search-wrapper-a5b5c8dd {
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Buttons match the top row: neutral fill, primary text, 48px touch target. */
.elementor-element-7605eae .elementor-button,
.elementor-element-7605eae .elementor-menu-cart__toggle_button {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 var(--space-md) !important;
  background-color: var(--color-neutral) !important;
  color: var(--color-primary) !important;
  box-sizing: border-box !important;
}

.elementor-element-7605eae .elementor-button:hover,
.elementor-element-7605eae .elementor-menu-cart__toggle_button:hover {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
}

.elementor-element-7605eae .elementor-button svg,
.elementor-element-7605eae .elementor-button svg path,
.elementor-element-7605eae .elementor-button svg circle,
.elementor-element-7605eae .elementor-menu-cart__toggle_button svg,
.elementor-element-7605eae .elementor-menu-cart__toggle_button svg path {
  fill: currentColor !important;
}

.elementor-element-7605eae .elementor-button svg {
  width: 22px !important;
  height: 22px !important;
}

.elementor-element-7605eae .elementor-menu-cart__toggle_button .woocommerce-Price-amount,
.elementor-element-7605eae .elementor-menu-cart__toggle_button .woocommerce-Price-currencySymbol {
  color: inherit !important;
  font-family: var(--font-sans) !important;
  font-feature-settings: "tnum" 1 !important;
}

.elementor-element-7605eae .elementor-button-icon-qty {
  background-color: var(--color-subtle) !important;
  color: var(--color-primary-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full) !important;
}

.elementor-element-8873f9b * {
  box-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
  .elementor-element-7605eae .elementor-button,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button {
    background-color: #221D1A !important; /* neutral-dark */
    color: #C88762 !important;            /* primary-dark */
  }

  .elementor-element-7605eae .elementor-button:hover,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button:hover {
    background-color: #432518 !important; /* subtle-dark */
    color: #E0AB86 !important;            /* primary-strong-dark */
  }

  .elementor-element-7605eae .elementor-button-icon-qty {
    background-color: #432518 !important;
    color: #E0AB86 !important;
  }
}

/* ==========================================================================
   SEARCH RESULTS PANEL (.search-results-a5b5c8dd)

   Another overlay, so it follows the same rule as the mobile nav: raised
   surface, full-strength hairline, no shadow and no scrim.
   ========================================================================== */

.search-results-a5b5c8dd {
  background-color: var(--color-neutral) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 2 !important;
}

.search-result-item-a5b5c8dd {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-md) !important;
  padding: var(--space-sm) var(--space-md) !important;
  border-bottom: 1px solid var(--color-border) !important;
  text-decoration: none !important;
  background-color: transparent !important;
  transition: background-color 150ms ease-out !important;
}

.search-result-item-a5b5c8dd:last-child {
  border-bottom: none !important;
}

.search-result-item-a5b5c8dd:hover {
  background-color: var(--color-subtle) !important;
}

/* Images take no radius, per DESIGN.md. */
.search-result-item-a5b5c8dd img {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  flex: 0 0 auto !important;
}

/* product-title for the name, price-sm with tabular figures for the price. */
.search-result-title-a5b5c8dd {
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--color-on-surface) !important;
}

.search-result-price-a5b5c8dd,
.search-result-price-a5b5c8dd .woocommerce-Price-amount {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-on-surface) !important;  /* never primary — a coloured
                                                 price reads as a discount */
  font-feature-settings: "tnum" 1 !important;
}

/* On phones the field lives in the bar pinned to the bottom of the screen, so
   a panel that drops downward opens straight off the viewport. It is flipped
   to open upward out of the field instead. */
@media (max-width: 767px) {
  .elementor-element-8873f9b,
  .elementor-element-8873f9b > .e-con-inner,
  .elementor-element-4ba2c17,
  .elementor-element-4ba2c17 .search-wrapper-a5b5c8dd,
  .elementor-element-4ba2c17 .search-form-a5b5c8dd {
    overflow: visible !important;
  }

  .elementor-element-4ba2c17 .search-container-a5b5c8dd {
    position: relative !important;
  }

  .elementor-element-4ba2c17 .search-results-a5b5c8dd {
    position: absolute !important;
    top: auto !important;
    bottom: calc(100% + var(--space-sm)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    /* Capped so a long result list cannot run off the top of the screen. */
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
}

/* Dark mode: the overlay rises to Neutral Dark rather than darkening. */
@media (prefers-color-scheme: dark) {
  .search-results-a5b5c8dd {
    background-color: #221D1A !important; /* neutral-dark */
    border-color: #352F2B !important;     /* border-dark */
  }

  .search-result-item-a5b5c8dd {
    border-bottom-color: #352F2B !important;
  }

  .search-result-item-a5b5c8dd:hover {
    background-color: #432518 !important; /* subtle-dark */
  }

  .search-result-title-a5b5c8dd,
  .search-result-price-a5b5c8dd,
  .search-result-price-a5b5c8dd .woocommerce-Price-amount {
    color: #E2DDD5 !important;            /* on-surface-dark */
  }
}

/* ==========================================================================
   RESPONSIVE VISIBILITY — must stay last in the file.

   The `display: flex !important` rules above (used to line the header widgets
   up on a 48px row) outrank Elementor's own .elementor-hidden-* classes, so
   anything toggled off in Responsive > Hide On... came back visible. These
   rules hand that control back to the editor.

   The class is repeated three times on purpose: it raises specificity above
   the two-class rules above without needing a longer .elementor-3503 .elementor-element.elementor-element-cda4191, so Hide On
   Mobile/Tablet/Desktop works from the Elementor panel as normal.
   ========================================================================== */

@media (max-width: 767px) {
  .elementor-hidden-mobile.elementor-hidden-mobile.elementor-hidden-mobile,
  .elementor-hidden-phone.elementor-hidden-phone.elementor-hidden-phone {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-hidden-tablet.elementor-hidden-tablet.elementor-hidden-tablet {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .elementor-hidden-desktop.elementor-hidden-desktop.elementor-hidden-desktop {
    display: none !important;
  }
}

/* A container hidden on a breakpoint must not keep its flex sizing, or it
   still reserves a gap in the row even with display:none on the child. */
@media (max-width: 767px) {
  .elementor-element-a90219d > .elementor-hidden-mobile {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   STACKING ORDER

   z-index does nothing on a statically positioned element, so the search
   results panel had no way to sit above the menu band — and the band is
   painted after the header row anyway, being later in the DOM. Giving each
   row an explicit position and index settles the order deterministically.
   ========================================================================== */

.elementor-element-cda4191,
.elementor-element-8873f9b {
  position: relative;
  z-index: 10;
}

/* The rows take `position` but deliberately NO z-index. A z-index on a row
   creates a stacking context, which traps everything inside it: with the
   header row above the menu band, the nav dropdown could never rise past the
   logo, and with the order reversed the search panel sank under the links.

   Left at `z-index: auto` the rows form no stacking context, so the two
   overlays compete directly with each other in the wrapper's context and
   their own values below decide the order. */
.elementor-element-a90219d,
.elementor-element-800c924 {
  position: relative !important;
}

/* The panel itself must be positioned for its own z-index to apply, and it
   needs an opaque fill — the menu links were reading straight through it. */
.search-wrapper-a5b5c8dd,
.search-container-a5b5c8dd {
  position: relative !important;
}

.search-results-a5b5c8dd {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 2 !important;
  background-color: var(--color-neutral) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   PHONE: FIRST HEADER ROW CONTROLS

   The search and account/cart in the top row are hidden here by id rather
   than by relying on Elementor's .elementor-hidden-mobile class. The layout
   rules above set `display: flex !important` on these same containers, and
   whichever of the two wins is decided by specificity — pinning it to the id
   removes the ambiguity. Their duplicates in the bottom bar take over.
   ========================================================================== */

@media (max-width: 767px) {
  /* The class is repeated three times to raise specificity above every other
     rule in this file that touches these same containers — several of them
     set `display: flex !important` for the desktop layout, and a plain
     one-class .elementor-3503 .elementor-element.elementor-element-cda4191 loses to those no matter where it sits in the file. */
  .elementor-element-b830af7.elementor-element-b830af7.elementor-element-b830af7,
  .elementor-element-fb77db1.elementor-element-fb77db1.elementor-element-fb77db1,
  .elementor-element-ef1104d.elementor-element-ef1104d.elementor-element-ef1104d,
  .elementor-element-2de3537.elementor-element-2de3537.elementor-element-2de3537 {
    display: none !important;
    visibility: hidden !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   MOBILE BOTTOM BAR (.elementor-element-8873f9b)

   The second header row is pinned to the bottom of the screen on phones,
   carrying search and cart within thumb reach.

   Its three children were duplicated from the top row and came with Hide On
   Mobile already set, so the row rendered as an empty box. They are switched
   back on here explicitly — the repeated class matches the specificity of the
   restore rules above and wins by coming later in the file.
   ========================================================================== */

@media (max-width: 767px) {
  .elementor-element-4ba2c17.elementor-hidden-mobile.elementor-hidden-mobile,
  .elementor-element-7605eae.elementor-hidden-mobile.elementor-hidden-mobile,
  .elementor-element-db79070.elementor-hidden-mobile.elementor-hidden-mobile {
    display: flex !important;
  }

  .elementor-element-8873f9b {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 998 !important;

    /* The container carries a 298px Min Height from the editor, which would
       make the bar most of the screen. */
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;

    /* DESIGN.md tonal layering: in light mode a raised surface goes darker,
       so the bar sits on Kraft above the Cupping Sheet page.
       background-image is cleared too — the container carries its own
       background from the editor, which showed through as a wash. */
    background-color: var(--color-neutral) !important;
    background-image: none !important;
    opacity: 1 !important;

    /* DESIGN.md has no shadow language, so the bar is separated from the page
       by a hairline rule instead of a lift. */
    border-top: 1px solid var(--color-border) !important;

    /* Clears the iPhone home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .elementor-element-8873f9b > .e-con-inner {
    min-height: 0 !important;
    padding-top: var(--space-sm) !important;
    padding-bottom: var(--space-sm) !important;
    gap: var(--space-sm) !important;
    background-color: transparent !important;
  }

  /* The controls step back up to Surface so they read as objects on the Kraft
     band; a neutral fill on a neutral bar would disappear. The hairline gives
     them their edge, matching the input treatment — DESIGN.md defines no
     button variant for a neutral ground, so this follows its depth rules
     (tonal step plus rule, never a shadow) rather than inventing a fill. */
  .elementor-element-7605eae .elementor-button,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button {
    background-color: var(--color-surface) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
  }

  .elementor-element-7605eae .elementor-button:hover,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button:hover {
    background-color: var(--color-subtle) !important;
    color: var(--color-primary-strong) !important;
  }

  /* DESIGN.md: inputs take `rounded.md`. `full` is reserved exclusively for
     origin chips, so the pill shape used earlier is corrected here. */
  .elementor-element-4ba2c17 .search-input-a5b5c8dd {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-surface) !important;
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
  }

  /* The fixed bar would otherwise cover the last stretch of every page. */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Dark mode is a separate palette, and the tonal step reverses: a raised
   surface goes lighter here, so the bar rises from Surface Dark to Neutral
   Dark rather than darkening. */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  .elementor-element-8873f9b {
    background-color: #221D1A !important; /* neutral-dark */
    border-top-color: #352F2B !important; /* border-dark */
  }

  .elementor-element-7605eae .elementor-button,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button,
  .elementor-element-4ba2c17 .search-input-a5b5c8dd {
    background-color: #13100D !important; /* surface-dark */
    border-color: #352F2B !important;     /* border-dark */
  }

  .elementor-element-7605eae .elementor-button,
  .elementor-element-7605eae .elementor-menu-cart__toggle_button {
    color: #C88762 !important;            /* primary-dark */
  }

  .elementor-element-4ba2c17 .search-input-a5b5c8dd {
    color: #E2DDD5 !important;            /* on-surface-dark */
  }
}/* End custom CSS */