/* Essencia Child — refinements pass
   Client feedback: the whole site reads as over-spaced and unprofessional;
   sections and controls sit too far apart. Divi's own section/row padding is
   the source, so it is tightened globally here rather than per-section, with
   the header, footer logo and search field brought closer to the reference. */

/* ---------- 1. Global spacing: tighten Divi's default section/row rhythm ---------- */
.et_pb_section{padding-top:38px!important;padding-bottom:38px!important;}
/* :not([class*="_tb_header"]) keeps this out of the header's own rows: applying
   it there stacked 16px+16px on top of the promo ticker's own 10px padding,
   making a single line of 13px text read as a tall band. */
.et_pb_row:not([class*="_tb_header"]){padding-top:16px!important;padding-bottom:16px!important;margin-top:0!important;margin-bottom:0!important;}
.et_pb_section.et_pb_fullwidth_section{padding-top:0!important;padding-bottom:0!important;}
.et_pb_module{margin-bottom:0!important;}
.et_pb_text{margin-bottom:10px!important;}
.et_pb_divider{margin-bottom:0!important;}
.et_pb_divider_hidden{height:8px!important;min-height:0!important;}
.et_pb_space{height:14px!important;min-height:0!important;}
.et_pb_button_module_wrapper{margin-top:12px!important;margin-bottom:0!important;}
.et_pb_image{margin-bottom:0!important;}

/* section heading blocks sit closer to the content they introduce */
.et_pb_text_inner > p:last-child,
.et_pb_text_inner > h1:last-child,
.et_pb_text_inner > h2:last-child,
.et_pb_text_inner > h3:last-child{margin-bottom:0!important;}
.et_pb_text_inner h2{margin-bottom:8px!important;}

/* the product/collection grids get a tighter gutter */
.et_pb_shop ul.products{margin-top:6px!important;}

@media(max-width:980px){
  .et_pb_section{padding-top:26px!important;padding-bottom:26px!important;}
  .et_pb_row{padding-top:12px!important;padding-bottom:12px!important;}
}

/* ---------- 2. Footer logo: larger, per client ---------- */
#et-footer-nav .et_pb_image img,
.et-l--footer .et_pb_image img{max-height:none!important;}
/* Footer logo: constrained by height alone it rendered narrow for its column.
   Sized on width so it fills the brand column properly, height following. */
.et-l--footer .et_pb_image,
.et-l--footer .et_pb_image_wrap{display:block!important;width:100%!important;}
.et-l--footer .et_pb_image_wrap img{
  width:240px!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
}
@media(max-width:980px){
  .et-l--footer .et_pb_image_wrap img{width:190px!important;}
}

/* ---------- 3. Search field: pill, icon-led, calm placeholder ----------
   Divi generates its own high-specificity rules for .et_pb_s, so these are
   scoped through the header section to outrank them. The submit button is
   pulled inside the pill on the right; the magnifier is drawn on the wrapper. */
.et_pb_section_3_tb_header .et_pb_search{width:100%!important;}
.et_pb_searchform{position:relative;width:100%!important;}
.et_pb_searchform > div{position:relative;display:flex;align-items:center;width:100%;}
.et_pb_section_3_tb_header .et_pb_searchform input.et_pb_s,
.et_pb_searchform input.et_pb_s{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:#fff!important;
  color:var(--es-ink)!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:13px!important;
  font-weight:400!important;
  letter-spacing:.2px;
  padding:0 104px 0 44px!important;
  box-shadow:none!important;
  transition:border-color .25s ease, background .25s ease;
}
.et_pb_searchform input.et_pb_s::placeholder{color:var(--es-muted)!important;opacity:1;}
.et_pb_searchform input.et_pb_s:focus{
  background:#fff!important;
  border-color:var(--es-accent)!important;
  outline:none!important;
}
/* magnifier drawn in, so the field reads like the reference's search row */
.et_pb_searchform > div:before{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:17px;height:17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221f1c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.75;
  pointer-events:none;
  z-index:2;
}
.et_pb_section_3_tb_header .et_pb_searchform input.et_pb_searchsubmit,
.et_pb_searchform input.et_pb_searchsubmit{
  position:absolute!important;
  right:4px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:auto!important;
  height:36px!important;
  border-radius:999px!important;
  background:var(--es-accent)!important;
  color:#fff!important;
  border:0!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:10.5px!important;
  font-weight:600!important;
  letter-spacing:1px!important;
  text-transform:uppercase!important;
  padding:0 20px!important;
  margin:0!important;
  cursor:pointer;
  z-index:3;
}

/* ---------- 4. Header polish toward the reference ---------- */
/* Promo bar: one solid terracotta band edge to edge.
   The ticker sits in a Divi row capped at the content width, so its own
   background painted a narrower stripe inside the section's background — two
   different browns, reading as a bar inside a bar. The ticker is made
   transparent and the section carries the single colour. */
/* Values measured directly from the client's reference site, uae.swissarabian.com:
   bar 40px tall, ground rgb(167,96,74), cream text rgb(232,215,187), 14px/30px,
   0.4px tracking. Ours was 42px + section padding in a brighter terracotta with
   white 12px text at 1.1px tracking, which read as a much heavier band. */
/* Divi writes its own .et_pb_section_N_tb_header background rule from the Theme
   Builder colour variable, so these are scoped through .et-l--header to outrank
   it and land the exact reference colours. */
.et-l--header .et_pb_section_0_tb_header,
.et-l--header .et_pb_section_2_tb_header,
.et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_header,
.et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_2_tb_header{
  background-color:#a7604a!important;
  padding:0!important;
  min-height:0!important;
}
#top-announcement-bar{
  background:transparent!important;
  color:#e8d7bb!important;
  height:40px!important;
  padding:0 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:14px!important;
  letter-spacing:.4px!important;
  font-family:'Montserrat',sans-serif!important;
  font-weight:400!important;
  line-height:30px!important;
}
#top-announcement-bar #ticker-text{color:#e8d7bb!important;}
.et_pb_section_0_tb_header .et_pb_row,
.et_pb_section_2_tb_header .et_pb_row,
.et_pb_section_0_tb_header .et_pb_column,
.et_pb_section_2_tb_header .et_pb_column{padding:0!important;margin:0!important;}
.et_pb_section_0_tb_header .et_pb_row,
.et_pb_section_2_tb_header .et_pb_row{width:100%!important;max-width:none!important;}
/* the search|logo|language row: tighter, vertically centred, cream ground like the reference */
/* Utility row matched to the reference: 84px tall on a cream #e8d7bb ground.
   Every descendant is centred on the row's own axis. Without the row/column
   rules below, the logo (the tallest item) pinned itself to the top edge and
   dragged the shared baseline 9px above centre, so search, logo, currency,
   icons and the language dropdown all sat high in the band. */
.et-l--header .et_pb_section_3_tb_header,
.et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_3_tb_header,
.et_pb_section_3_tb_header{
  background:#e8d7bb!important;
  padding:0!important;
  min-height:84px!important;
  display:flex!important;
  align-items:center!important;
  border-bottom:0!important;
}
.et_pb_section_3_tb_header > .et_pb_row{
  width:92%!important;
  max-width:1400px!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  min-height:84px!important;
}
.et_pb_section_3_tb_header > .et_pb_row > .et_pb_column{
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
}
.et_pb_section_3_tb_header .et_pb_module,
.et_pb_section_3_tb_header .et_pb_image,
.et_pb_section_3_tb_header .et_pb_image_wrap,
.et_pb_section_3_tb_header .et_pb_search{
  align-self:center!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
.et_pb_section_3_tb_header .et_pb_image_wrap{display:flex!important;align-items:center!important;}
.et_pb_section_3_tb_header .et_pb_row{padding:0!important;align-items:center!important;}
.et_pb_section_3_tb_header .et_pb_column{display:flex!important;align-items:center!important;margin-bottom:0!important;}
.et_pb_section_3_tb_header .et_pb_column_4_tb_header{justify-content:center!important;}
.et_pb_section_3_tb_header .et_pb_image_0_tb_header{margin:0 auto!important;}
/* Logo fits inside the 84px row with breathing room rather than filling it edge
   to edge, which was clipping the mark and the tagline. */
.et_pb_section_3_tb_header .et_pb_image_wrap img{height:66px!important;width:auto!important;max-height:66px!important;}
.et_pb_section_3_tb_header .et_pb_column_4_tb_header{overflow:visible!important;}

/* Right-hand utility cluster: currency, icons and the language dropdown all sit
   on one horizontal line. The GTranslate code module is a block-level sibling,
   so without this it drops onto a second row under the icons. */
.et_pb_section_3_tb_header .et_pb_column_5_tb_header{
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:14px;
}
.et_pb_section_3_tb_header .et_pb_column_5_tb_header > *{margin:0!important;}
.et_pb_section_3_tb_header .et_pb_code_2_tb_header{width:auto!important;flex:0 0 auto!important;}
.es-header-icons-desktop{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:14px;
  flex:0 0 auto;
}
.gtranslate_wrapper{margin:0!important;flex:0 0 auto;}
/* nav row: white, single line, tight */
/* Menu row. Divi ships the links with padding-top:0 and padding-bottom:8px, so
   the labels sat high inside their own band. Padding is made symmetric and the
   whole strip is centred, giving the row a real, even height. */
.et_pb_section_4_tb_header{
  background:#fff!important;
  padding:0!important;
  border-bottom:1px solid var(--es-line)!important;
  display:flex!important;
  align-items:center!important;
  min-height:52px!important;
}
.et_pb_section_4_tb_header .et_pb_row{
  padding:0!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  min-height:52px!important;
}
.et_pb_section_4_tb_header .et_pb_column,
.et_pb_menu_1_tb_header,
.et_pb_menu_1_tb_header .et_pb_menu_inner_container,
.et_pb_menu_1_tb_header .et_pb_menu__wrap,
.et_pb_menu_1_tb_header .et_pb_menu__menu,
.et_pb_menu_1_tb_header .et_pb_menu__menu > nav{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:0!important;
}
.et_pb_menu_1_tb_header .et_pb_menu__menu > nav > ul{
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
}
/* Link metrics taken from the reference nav: 15px/7.5px padding, 16px type at
   0.4px tracking, weight 400. Ours was 12px at 0.8px tracking with 16px side
   padding, which read as small text spaced too far apart. */
.et_pb_menu_1_tb_header .et_pb_menu__menu>ul>li>a,
.et_pb_menu_1_tb_header .et_pb_menu__menu > nav > ul > li > a{
  display:flex!important;
  align-items:center!important;
  padding:15px 14px!important;
  font-size:15px!important;
  font-weight:400!important;
  letter-spacing:.4px!important;
  line-height:1!important;
}
.et_pb_menu_1_tb_header .et_pb_menu__menu > nav > ul > li{display:flex!important;align-items:center!important;}
/* Divi pins the dropdown caret with position:absolute;top:0;right:0, which was
   written for its original inline-block link box. Once the link became a flex
   row the caret detached and floated above the label, so it is returned to the
   normal flow and sits inline beside the text. */
.et_pb_menu_1_tb_header .et_pb_menu__menu > nav > ul > li.menu-item-has-children > a{padding-right:26px!important;}
.et_pb_menu_1_tb_header .et_pb_menu__menu > nav > ul > li.menu-item-has-children > a:after{
  position:absolute!important;
  top:50%!important;
  right:8px!important;
  transform:translateY(-50%)!important;
  line-height:1!important;
  margin:0!important;
  font-size:14px!important;
}

/* Nav links were rendering in three different colours: an unstyled browser blue
   on the current item, pure black, and a stray near-black. All are normalised to
   the ink token, with the accent reserved for hover and the active item. */
.et-l--header .et_pb_menu__menu > nav > ul > li > a,
.et-l--header .et_pb_menu__menu > nav > ul > li.current-menu-item > a,
.et-l--header .et_pb_menu__menu > nav > ul > li.current_page_item > a{
  color:var(--es-ink)!important;
  text-transform:uppercase!important;
  font-family:'Montserrat',sans-serif!important;
  font-weight:500!important;
}
.et-l--header .et_pb_menu__menu > nav > ul > li > a:hover,
.et-l--header .et_pb_menu__menu > nav > ul > li.current-menu-item > a{
  color:var(--es-accent)!important;
}

@media(max-width:980px){
  .et_pb_section_3_tb_header .et_pb_image_wrap img{height:52px!important;}
}

/* ---------- 5. Floating buttons: WhatsApp + Ask Us Anything ---------- */
.es-float-stack{position:fixed;right:22px;bottom:22px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
/* The bubble must stay its own positioning context. As position:static the
   ripple's inset:0 resolved against the whole float stack (147x112, including
   the Ask Us Anything button), so it wrapped both elements and sat off-centre.
   Relative keeps the ripple bound to the 56px circle. */
.es-float-stack .es-wa{
  position:relative!important;
  right:auto!important;
  bottom:auto!important;
  flex:0 0 auto;
  width:56px!important;
  height:56px!important;
}
.es-float-stack .es-wa .es-wa-pulse{
  position:absolute!important;
  top:0!important;left:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  z-index:-1;
}
.es-ask{
  display:inline-block;
  background:var(--es-accent);
  color:#fff!important;
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  padding:11px 18px;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(34,31,28,.18);
  white-space:nowrap;
  transition:background .25s ease, transform .25s ease;
}
.es-ask:hover{background:var(--es-accent-d);color:#fff!important;transform:translateY(-1px);}
@media(max-width:600px){
  .es-float-stack{right:14px;bottom:14px;gap:8px;}
  .es-ask{font-size:11px;padding:9px 14px;}
}

/* ---------- 6. Product Slider grid cards (homepage bestsellers) ----------
   Rendered by the Product Slider for WooCommerce plugin (.wpsf-product), not by
   Divi or the native Woo loop. Variable products carry a size-swatch table that
   made those cards taller than their neighbours, so the row never lined up.
   The swatches are lifted out of the vertical flow and floated over the image;
   every card then has the same stack: image, name, price, cart button. */
/* The plugin lays cards out as inline-block inside .wps-product-section, which
   gives no equal-height behaviour: a card carrying a size-swatch row, or a title
   that wraps to two lines, ends up taller than its neighbours and the row of Add
   to Cart buttons stops lining up.

   Making the row itself a grid fixes alignment without touching the plugin's own
   per-card width classes (sp-wps-col-xl-4 etc), which stay in the markup as a
   fallback. Do NOT put display:flex on .wpsf-product itself — that strips those
   width classes and collapses the whole grid into one column. */
.wps-product-section{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:26px 22px!important;
  align-items:stretch!important;
}
.wpsf-product{
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
  display:block!important;
}
@media(max-width:1100px){
  .wps-product-section{grid-template-columns:repeat(3,1fr)!important;}
}
@media(max-width:760px){
  .wps-product-section{grid-template-columns:repeat(2,1fr)!important;gap:18px 14px!important;}
}

.wpsf-product .wps-product-data{
  display:flex!important;
  flex-direction:column!important;
  width:100%;
  height:100%;
  background:#fff;
  border-radius:4px;
  /* not hidden: the swatch row is absolutely positioned over the image and
     would be clipped at the card edge */
  overflow:visible;
  position:relative;
}
.wpsf-product .sp-wps-product-image-area{position:relative;order:1;}
.wpsf-product .wps-product-image{display:block;}
.wpsf-product .wpsf-product-img{width:100%!important;height:auto!important;display:block;border-radius:4px 4px 0 0;}

.wpsf-product .sp-wps-product-details{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto;
  order:2;
  padding:14px 12px 16px!important;
  text-align:center;
}
.wpsf-product .sp-wps-product-details-inner{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto;
  width:100%;
}

/* 1. name — fixed two-line box so a wrapping title never changes card height */
.wpsf-product .wpsf-product-title{
  order:1;
  margin:0 0 8px!important;
  height:2.6em;
  min-height:2.6em;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.wpsf-product .wpsf-product-title a{
  font-family:'Cormorant Garamond',serif!important;
  font-size:17px!important;
  font-weight:600!important;
  line-height:1.25!important;
  color:var(--es-ink)!important;
}
.wpsf-product .wpsf-product-title a:hover{color:var(--es-accent-d)!important;}

/* 2. price, with the dirham mark as prefix */
.wpsf-product .wpsf-product-price{
  order:2;
  margin:0 0 12px!important;
  flex:1 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-wrap:wrap;
  font-family:'Montserrat',sans-serif!important;
  font-size:14px!important;
  font-weight:600!important;
  color:var(--es-accent)!important;
}
.wpsf-product .wpsf-product-price .woocommerce-Price-amount{color:var(--es-accent)!important;}
.wpsf-product .wpsf-product-price del{color:var(--es-muted)!important;font-weight:300;}
.wpsf-product .wpsf-product-price ins{text-decoration:none;color:var(--es-accent)!important;}

/* 3. cart button, pinned to the bottom so every row aligns */
.wpsf-product .wpsf-cart-button{order:3;margin-top:auto!important;}
.wpsf-product .wpsf-cart-button p.product{
  border:0!important;
  padding:0!important;
  margin:0!important;
}
.wpsf-product .wpsf-cart-button a.button{
  display:block!important;
  width:100%;
  background:var(--es-accent)!important;
  color:#fff!important;
  border:1px solid var(--es-accent)!important;
  border-radius:999px!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:10.5px!important;
  font-weight:600!important;
  letter-spacing:1px!important;
  text-transform:uppercase!important;
  padding:11px 14px!important;
  box-shadow:none!important;
  transition:background .25s ease;
}
.wpsf-product .wpsf-cart-button a.button:hover{background:var(--es-accent-d)!important;border-color:var(--es-accent-d)!important;}
.wpsf-product .wpsf-cart-button a.added_to_cart{
  display:block;margin-top:6px;font-size:10px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--es-accent-d)!important;
}

/* size swatches: placed above the name in the card's own flex column, not
   absolutely positioned. The swatch markup sits in the DOM inside
   .sp-wps-product-details (a sibling of the title, not inside the image
   area), so anchoring it to the image container with position:absolute was
   never correct — it landed on the image/details boundary and overlapped the
   name instead. order:-1 on a flex child is the reliable fix: it always
   renders first regardless of DOM position, with no offset math to get wrong. */
/* Size swatches float over the bottom of the image rather than sitting in the
   card's vertical flow. Reserving a strip for them (the previous approach) left
   an empty band above the name on every product without variations, which is
   what the client spotted. Out of flow, the stack is identical on every card:
   image, name, price, button. */
/* The swatch markup sits inside .sp-wps-product-details, not inside the image
   area, so it cannot be positioned against the image directly. It is taken out
   of flow against the card wrapper and pushed up over the image's lower edge:
   the details block is a known height, so a negative offset from its top lands
   the row inside the picture. */
.wpsf-product .sp-wps-product-image-area{position:relative;}
.wpsf-product .sp-wps-product-details{position:relative!important;}
.wpsf-product .spswp_variations_form{
  position:absolute!important;
  left:0;
  right:0;
  top:-42px!important;
  bottom:auto!important;
  margin:0!important;
  padding:0!important;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}
.wpsf-product .spswp_variations_form table.variations{
  margin:0!important;
  background:transparent!important;
  border:0!important;
  width:100%;
}
.wpsf-product .spswp_variations_form table.variations tbody,
.wpsf-product .spswp_variations_form table.variations tr,
.wpsf-product .spswp_variations_form table.variations td,
.wpsf-product .spswp_variations_form table.variations th{
  display:block!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  text-align:center;
}
.wpsf-product .spswp_variations_form table.variations th.label{display:none!important;}
/* The cell also carries the plugin's "Choose an option" <select> and its reset
   link. Those are what made the swatch block 95px tall and pushed it past the
   image; the pills alone are the intended control here. */
.wpsf-product .spswp_variations_form select,
.wpsf-product .spswp_variations_form .spswp-select-wrapper,
.wpsf-product .spswp_variations_form .select2,
.wpsf-product .spswp_variations_form label{display:none!important;}
/* One line, no wrapping: three sizes stacked into three rows was what made the
   swatch block 95px tall and pushed it out of the image. */
.wpsf-product .sp-smart-swatches-wrapper,
.wpsf-product .sp-smart-swatches-item-wrapper{
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:center;
  align-items:center;
  gap:5px;
  margin:0!important;
  padding:0 8px;
  width:100%;
}
.wpsf-product .spswp_variations_form table.variations tbody,
.wpsf-product .spswp_variations_form table.variations tr,
.wpsf-product .spswp_variations_form table.variations td{width:100%;}
/* The pill markup is nested: .sp-smart-swatches-item wraps an
   .sp-smart-swatches-item-text with the same label. Styling both drew two
   stacked pills per size and tripled the block height. Only the outer element
   carries the pill; the inner one is reduced to plain text. */
.wpsf-product .sp-smart-swatches-item{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(34,31,28,.10)!important;
  border-radius:999px!important;
  color:var(--es-ink)!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:9.5px!important;
  font-weight:500!important;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:5px 11px!important;
  line-height:1.1!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  box-shadow:none!important;
  cursor:pointer;
  white-space:nowrap;
}
/* The outer item already renders the size label, and the nested text node
   repeats it, so the pills read "100ml 100ml". Only the inner copy is kept
   visible; the outer element's own text node is collapsed by font-size:0. */
.wpsf-product .sp-smart-swatches-item{font-size:0!important;}
.wpsf-product .sp-smart-swatches-item-text{
  all:unset!important;
  display:inline!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:9.5px!important;
  font-weight:500!important;
  letter-spacing:.4px!important;
  text-transform:uppercase!important;
  line-height:1.1!important;
  color:inherit!important;
  white-space:nowrap;
}
.wpsf-product .sp-smart-swatches-item.selected,
.wpsf-product .sp-smart-swatches-item.sp-smart-swatches-selected{
  background:var(--es-accent)!important;
  border-color:var(--es-accent)!important;
  color:#fff!important;
}
.wpsf-product .sp-smart-swatches-item.selected .sp-smart-swatches-item-text,
.wpsf-product .sp-smart-swatches-item.sp-smart-swatches-selected .sp-smart-swatches-item-text{color:#fff!important;}
.wpsf-product .spswp_variations_form a.reset_variations{display:none!important;}
.wpsf-product .sp-wps-product-details{position:relative;}

/* the plugin's own "Price range: x through y" screen-reader line is noisy inline */
.wpsf-product .wpsf-product-price .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- 7. Stray section rules ----------
   Two Divi dividers render a lone gold hairline across the cream ground
   between sections. The client asked for them gone; the hidden dividers
   (divider_2, divider_3) stay because they are only spacers. */
.et_pb_divider_0:before,
.et_pb_divider_1:before{display:none!important;border-top:0!important;}
.et_pb_divider_0,
.et_pb_divider_1{padding:0!important;height:0!important;min-height:0!important;}

/* ---------- 8. Currency switcher in the header ----------
   Sits beside the language dropdown, styled to match it so the two controls
   read as one pair rather than a plugin bolted on. */
/* The utility row must stack above the menu row, otherwise the menu section
   covers the open currency dropdown and swallows the clicks on USD/SAR. */
/* Nothing between the switcher and the header root may clip, or the dropdown
   gets cut off at the row edge instead of hanging below it. */
.et-l--header,
.et-l--header .et_builder_inner_content,
.et-l--header .et_pb_section_3_tb_header,
.et-l--header .et_pb_section_3_tb_header .et_pb_row,
.et-l--header .et_pb_section_3_tb_header .et_pb_column,
.et-l--header .et_pb_code_2_tb_header,
.et-l--header .es-header-icons-desktop{overflow:visible!important;}
.et-l--header .et_pb_section_3_tb_header{position:relative!important;z-index:20!important;}
.et-l--header .et_pb_section_4_tb_header{position:relative!important;z-index:1!important;}
.et_pb_section_3_tb_header .et_pb_column_5_tb_header{position:relative!important;z-index:30!important;}
.es-currency-switcher,
.es-currency-switcher .x-currency-shortcode{position:relative!important;z-index:40!important;}
.es-currency-switcher .currency-wrap{z-index:50!important;}

/* Currency switcher, matched to the reference site's country selector:
   a borderless trigger with flag + code + chevron, and a detached white panel
   below it (5px radius, 1px #ccc, 0 4px 8px rgba(0,0,0,.1), z-index 1000).
   Ours previously drew a hard white box tight against the icons, with the panel
   clipped by the header and the option rows overflowing its width. */
.es-currency-switcher{display:inline-flex;align-items:center;margin-right:2px;}

/* --- trigger --- */
.es-currency-switcher .switch{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  width:auto!important;
  min-width:0!important;
  height:34px!important;
  background:transparent!important;
  border:0!important;
  border-radius:999px!important;
  padding:0 8px!important;
  box-shadow:none!important;
  color:var(--es-ink)!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:13.5px!important;
  font-weight:400!important;
  letter-spacing:.2px!important;
  cursor:pointer;
}
.es-currency-switcher .switch:hover{background:rgba(34,31,28,.05)!important;}
.es-currency-switcher .switch .switch-elements{display:inline-flex!important;align-items:center!important;gap:7px!important;}
.es-currency-switcher .switch .code{font-size:13.5px!important;line-height:1!important;}
.es-currency-switcher img,
.es-currency-switcher .dropdown-flag{width:20px!important;height:15px!important;border-radius:2px!important;object-fit:cover;flex:0 0 auto;}
/* chevron, drawn in since the plugin ships none */
.es-currency-switcher .switch:after{
  content:"";
  width:9px;height:6px;
  flex:0 0 auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23221f1c' stroke-width='1.4' fill='none' fill-rule='evenodd' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* --- dropdown panel --- */
.es-currency-switcher .currency-wrap{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  left:auto!important;
  right:0!important;
  width:auto!important;
  min-width:150px!important;
  max-height:none!important;
  background:#fff!important;
  border:1px solid #ccc!important;
  border-radius:5px!important;
  box-shadow:0 4px 8px rgba(0,0,0,.1)!important;
  padding:4px 0!important;
  z-index:1000!important;
  overflow:hidden!important;
}
.es-currency-switcher .currency-wrap.display-none{display:none!important;}
.es-currency-switcher .dropdown-ul{margin:0!important;padding:0!important;list-style:none!important;}
.es-currency-switcher .dropdown-li{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  width:100%!important;
  margin:0!important;
  padding:9px 16px!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:13.5px!important;
  color:var(--es-ink)!important;
  white-space:nowrap!important;
  cursor:pointer;
  transition:background .15s ease;
}
.es-currency-switcher .dropdown-li:hover{background:var(--es-bg-2)!important;}
.es-currency-switcher .dropdown-li.active{background:transparent!important;font-weight:600!important;}
.es-currency-switcher .dropdown-li .code{font-size:13.5px!important;}

@media(max-width:980px){.es-currency-switcher{display:none;}}

/* ---------- 9. Homepage hero ----------
   The fullwidth slider had collapsed to roughly the image's own aspect (360px),
   which reads as a banner strip rather than a hero. Given a real height band so
   it holds the viewport the way the reference site's hero does. */
.et_pb_fullwidth_slider,
.et_pb_fullwidth_slider .et_pb_slides,
.et_pb_fullwidth_slider .et_pb_slide,
.et_pb_slider .et_pb_slide{min-height:clamp(420px,58vh,620px)!important;}
.et_pb_fullwidth_slider .et_pb_slide{background-size:cover!important;background-position:center center!important;}
/* The hero section carries a near-black ground that showed as a thin strip
   above the slide. The slider fills the section edge to edge instead. */
#main-content .et_pb_section:first-of-type{background-color:transparent!important;}
#main-content .et_pb_section:first-of-type .et_pb_slider,
#main-content .et_pb_section:first-of-type .et_pb_slides,
#main-content .et_pb_section:first-of-type .et_pb_slide{margin:0!important;}
@media(max-width:980px){
  .et_pb_fullwidth_slider,
  .et_pb_fullwidth_slider .et_pb_slides,
  .et_pb_fullwidth_slider .et_pb_slide,
  .et_pb_slider .et_pb_slide{min-height:clamp(300px,44vh,420px)!important;}
}

/* ---------- 10. Empty black band ----------
   et_pb_section_9 holds nothing but a spacer divider, yet renders a 270px band
   with a dark ground. It is a leftover slot from a removed promo graphic, so it
   is collapsed rather than left as dead space. */
.et_pb_section_9{display:none!important;}

/* ---------- 11. Collection tiles ----------
   Tile images were rendering at their own aspect (376-386px), so the six tiles
   came out 477-487px tall and the row of SHOP NOW buttons sat on three
   different lines. A fixed image ratio squares them off. */
.et_pb_section_3 .et_pb_image,
.et_pb_section_3 .et_pb_image_wrap{display:block!important;width:100%!important;}
.et_pb_section_3 .et_pb_image_wrap img{
  width:100%!important;
  height:376px!important;
  object-fit:cover!important;
  display:block!important;
  border-radius:4px;
}
@media(max-width:980px){
  .et_pb_section_3 .et_pb_image_wrap img{height:280px!important;}
}
@media(max-width:600px){
  .et_pb_section_3 .et_pb_image_wrap img{height:220px!important;}
}

/* ---------- 12. Gap under the menu ----------
   A 28px band of empty page background sat between the header's last section
   and the body. The header ends flush at its own last section, so the space is
   Divi's own container spacing inside #et-boc / #et-main-area rather than any
   padding on the header itself. */
/* The 28px band was whitespace text nodes between #et-boc's two children
   (header and #et-main-area) rendering as inline content. Neither element has
   margin or padding, so no spacing rule could remove it. Making #et-boc a flex
   column drops the anonymous inline boxes and the two stack flush. */
/* #et-boc AND #et-main-area both contain literal "\n\t" text nodes between
   their element children. Those render as line boxes at the inherited
   line-height (~24px), which is the band that appeared under the menu and
   above the hero. No margin or padding rule can remove them because they are
   anonymous inline content, not box spacing. Flex containers do not generate
   anonymous inline boxes for whitespace, so the children stack flush. */
#et-boc,
#et-main-area,
#main-content,
#main-content > article,
#main-content .entry-content,
#main-content .et-l--post,
#main-content .et_builder_inner_content{display:flex!important;flex-direction:column!important;}
#et-boc > *,
#et-main-area > *,
#main-content > *,
#main-content > article > *,
#main-content .entry-content > *,
#main-content .et-l--post > *,
#main-content .et_builder_inner_content > *{flex:0 0 auto;}
#et-main-area > #main-content,
#main-content > article,
#main-content .entry-content,
#main-content .et-l--post,
#main-content .et_builder_inner_content{width:100%;}
.et-l--header{margin-bottom:0!important;padding-bottom:0!important;}
.et-l--header + #et-main-area,
#et-boc > #et-main-area,
#et-main-area{margin-top:0!important;padding-top:0!important;}
#et-main-area > #main-content,
#main-content{margin-top:0!important;padding-top:0!important;}
#main-content > article,
#main-content .entry-content{margin-top:0!important;padding-top:0!important;}
#main-content .et_builder_inner_content{padding-top:0!important;}
/* the hero is the first body section: it starts hard against the menu */
#main-content .et_pb_section:first-of-type{margin-top:0!important;}
/* The real source of the band under the menu: the fullwidth slider module
   carries its own margin-top:28px, which collapses up through the static
   #main-content > article > .entry-content chain and pushes the whole body
   down. Nothing in that chain has padding, which is why it read as a mystery
   gap. Zeroed on the first slider only, so spacing between later sections is
   left alone. */
#main-content .et_pb_section:first-of-type .et_pb_slider,
#main-content .et_pb_section:first-of-type > .et_pb_module,
#main-content .et_pb_section.et_pb_fullwidth_section:first-of-type > .et_pb_module,
[class*="et_pb_fullwidth_slider_"]{margin-top:0!important;}

/* ---------- 13. Our Story ----------
   Matched to the reference: 32px/400 white uppercase heading with 15px beneath,
   16px/25.6px white body justified in a ~420px measure, the block centred in
   the band. Ours rendered an 11px heading and 14px beige copy stretched across
   1169px, which read as washed-out and unstructured against the texture. */
.et_pb_section_6 .et_pb_text_13,
.et_pb_section_6 .et_pb_text_13 .et_pb_text_inner{max-width:460px!important;margin-left:auto!important;margin-right:auto!important;}
.et_pb_section_6 .et_pb_text_13 p strong{
  display:block!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:32px!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:normal!important;
  text-transform:uppercase!important;
  color:#fff!important;
  margin:0 0 15px!important;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
  text-align:center!important;
  text-align-last:center!important;
}
.et_pb_section_6 .et_pb_text_13 p,
.et_pb_section_6 .et_pb_text_13 span{
  font-family:'Montserrat',sans-serif!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:25.6px!important;
  color:#ffffff!important;
  text-align:justify!important;
  text-align-last:center;
  margin:0 0 16px!important;
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
/* opening line and the closing call sit centred, not justified */
.et_pb_section_6 .et_pb_text_13 p:nth-child(2),
.et_pb_section_6 .et_pb_text_13 p:last-child{text-align:center!important;}
@media(max-width:600px){
  .et_pb_section_6 .et_pb_text_13 p strong{font-size:26px!important;}
  .et_pb_section_6 .et_pb_text_13 p,
  .et_pb_section_6 .et_pb_text_13 span{font-size:15px!important;line-height:24px!important;}
}