/* Arika - storefront polish. Loaded by novamira-sandbox/arika-shop-polish.php
   Tokens: accent #5C6E3D, hover #8B9D6A, ink #3A3028, soft ink #7A6E64,
   hairline #E0D5C5, ground #F9F4EC. Montserrat. Radii 5px interactive, 10px cards. */

/* ============== Midnight & Gold: chrome ==============
   The search button shipped as a gradient into green. The direction allows no
   gradients, and the second stop survived the palette migration because it was
   only ever in generated CSS. */
.e-search-submit,
.elementor-widget-search .e-search-submit{
  background-image:none !important;
  background-color:#5C6E3D !important;
  color:#FFFFFF !important;
  border-radius:4px !important;
  font-family:Montserrat,sans-serif !important;
  font-weight:700 !important;
}
.e-search-submit:hover,
.elementor-widget-search .e-search-submit:hover{
  background-color:#C9A96E !important;
  color:#5C6E3D !important;
}

/* The mobile bottom bar is a plugin setting, not Elementor data, so the
   palette migration could not reach it. */
#wp-bottom-menu,
.wp-bottom-menu{
  background-color:#5C6E3D !important;
  border-top:1px solid rgba(255,255,255,.10);
}
#wp-bottom-menu .wp-bottom-menu-item,
#wp-bottom-menu .wp-bottom-menu-item span,
#wp-bottom-menu .wp-bottom-menu-item i{
  color:#F9F4EC !important;
}
#wp-bottom-menu .wp-bottom-menu-item.active,
#wp-bottom-menu .wp-bottom-menu-item.active span,
#wp-bottom-menu .wp-bottom-menu-item.active i,
#wp-bottom-menu .wp-bottom-menu-item:hover span,
#wp-bottom-menu .wp-bottom-menu-item:hover i{
  color:#C9A96E !important;
}
.wp-bottom-menu-nav-wrapper{background-color:#5C6E3D !important;}
.wp-bottom-menu-nav-wrapper a{color:#F9F4EC !important;}

/* Category filter pills: outlined by default, gold when active. Every pill
   filled midnight read as a wall of dark blocks. */
.arika-filter .e-filter-item{
  background-color:transparent !important;
  color:#3A3028 !important;
  border:1px solid #E0D5C5 !important;
  border-radius:4px !important;
  padding:10px 20px !important;
  font-family:Montserrat,sans-serif !important;
  font-weight:600 !important;
  font-size:14px !important;
  transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.arika-filter .e-filter-item:hover{
  border-color:#5C6E3D !important;
  color:#5C6E3D !important;
}
.arika-filter .e-filter-item[aria-pressed="true"],
.arika-filter .e-filter-item.e-filter-item-active{
  background-color:#5C6E3D !important;
  border-color:#5C6E3D !important;
  color:#FFFFFF !important;
}

/* On a midnight band the section rule still reads as gold. */
.arika-rule .elementor-heading-title::after{
  content:"";display:block;width:44px;height:2px;
  background-color:#C9A96E;margin-top:14px;
}

/* ============== Trust strip ==============
   Four even columns divided by hairlines, icon vertically centred against the
   two-line text block. Elementor's icon-box aligns the icon to the title only,
   which left the descriptions hanging out of line. */
.elementor-element-hmtrust > .e-con-inner{
  display:flex;
  align-items:stretch;
  gap:0;
}
.elementor-element-hmtrust .elementor-widget-icon-box{
  flex:1 1 0;
  width:auto !important;
  max-width:none !important;
  padding:6px 32px;
  border-left:1px solid #E0D5C5;
}
.elementor-element-hmtrust .elementor-widget-icon-box:first-child{
  border-left:0;
  padding-left:0;
}
.elementor-element-hmtrust .elementor-icon-box-wrapper{
  display:flex;
  align-items:center;
  gap:18px;
  text-align:left;
}
.elementor-element-hmtrust .elementor-icon-box-icon{
  margin:0 !important;
  flex:0 0 auto;
  line-height:0;
}
.elementor-element-hmtrust .elementor-icon-box-icon svg,
.elementor-element-hmtrust .elementor-icon-box-icon i{
  width:30px;height:30px;font-size:30px;
}
.elementor-element-hmtrust .elementor-icon-box-content{text-align:left;}
.elementor-element-hmtrust .elementor-icon-box-title{margin:0 0 5px;line-height:1.2;}
.elementor-element-hmtrust .elementor-icon-box-description{margin:0;line-height:1.4;}

@media (max-width:1024px){
  .elementor-element-hmtrust > .e-con-inner{flex-wrap:wrap;}
  .elementor-element-hmtrust .elementor-widget-icon-box{
    flex:1 1 44%;border-left:0;padding:12px 0;
  }
}
/* Two up on the phone rather than four tall rows now the type is larger. */
@media (max-width:767px){
  .elementor-element-hmtrust > .e-con-inner{gap:6px 12px;}
  .elementor-element-hmtrust .elementor-widget-icon-box{
    flex:1 1 calc(50% - 6px);
    max-width:calc(50% - 6px) !important;
    padding:10px 0;
  }
  .elementor-element-hmtrust .elementor-icon-box-wrapper{gap:12px;}
  .elementor-element-hmtrust .elementor-icon-box-icon svg,
  .elementor-element-hmtrust .elementor-icon-box-icon i{
    width:24px;height:24px;font-size:24px;
  }
}

/* ============== Banner slider ==============
   Circular white arrows sitting on the edges, dots bottom-right. */
.arika-banner-slider .elementor-swiper-button{
  width:46px;height:46px;border-radius:50%;
  background-color:#FFFFFF;
  box-shadow:0 2px 12px rgba(15,27,46,.20);
  display:flex;align-items:center;justify-content:center;
  color:#5C6E3D;
  opacity:1;
  transition:background-color .18s ease,transform .18s ease;
}
.arika-banner-slider .elementor-swiper-button:hover{
  background-color:#C9A96E;transform:scale(1.06);
}
.arika-banner-slider .elementor-swiper-button svg,
.arika-banner-slider .elementor-swiper-button i{
  width:16px;height:16px;font-size:16px;fill:#5C6E3D;color:#5C6E3D;
}
.arika-banner-slider .elementor-swiper-button-prev{left:14px;}
.arika-banner-slider .elementor-swiper-button-next{right:14px;}

.arika-banner-slider .swiper-pagination-bullets{
  text-align:right;
  padding-right:20px;
  bottom:14px !important;
}
.arika-banner-slider .swiper-pagination-bullet{
  width:8px;height:8px;
  background-color:rgba(255,255,255,.65);
  opacity:1;margin:0 4px !important;
  transition:width .2s ease,background-color .2s ease;
}
.arika-banner-slider .swiper-pagination-bullet-active{
  background-color:#C9A96E;
  width:24px;border-radius:4px;
}

/* The slides now carry a heading and a Shop Now button, so the per-slide scrim
   is needed again (this rule previously hid it) and the content must not stay
   hidden waiting on an entrance animation that never runs. */
.arika-banner-slider .swiper-slide-contents{
  display:block !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  position:relative;
  z-index:2;
}
.arika-banner-slider .elementor-slide-heading{margin-bottom:6px;}
.arika-banner-slider .elementor-slide-description{margin-bottom:18px;max-width:420px;}
.arika-banner-slider .elementor-slide-button{
  padding:13px 26px;
}

/* ============== Category page headers ==============
   Each brand's own banner behind its archive title, with a midnight wash so the
   heading stays legible. Arika Tea and Zanetto have no wide banner artwork, so
   they keep the plain midnight band. */
body.term-vista-alegre .elementor-element-c43fdff,
body.term-23 .elementor-element-c43fdff{
  background-image:linear-gradient(rgba(15,27,46,.74),rgba(15,27,46,.74)),
    url('/wp-content/uploads/2026/09/0059162.png');
  background-size:cover;
  background-position:center center;
}
body.term-mepra .elementor-element-c43fdff,
body.term-21 .elementor-element-c43fdff{
  background-image:linear-gradient(rgba(15,27,46,.74),rgba(15,27,46,.74)),
    url('/wp-content/uploads/2026/09/pininfarina.png');
  background-size:cover;
  background-position:center center;
}
body.term-zanetto .elementor-element-c43fdff,
body.term-19 .elementor-element-c43fdff{
  background-image:linear-gradient(rgba(15,27,46,.74),rgba(15,27,46,.74)),
    url('/wp-content/uploads/2026/09/zanetto-cover-hp-march-2026-2048x794-1.jpg');
  background-size:cover;
  background-position:center center;
}

@media (max-width:767px){
  /* Elementor's own mobile rules were winning over the widget's height setting
     and collapsing the slider to zero, so the frame is pinned here instead. */
  .arika-banner-slider .elementor-slides,
  .arika-banner-slider .swiper,
  .arika-banner-slider .swiper-wrapper,
  .arika-banner-slider .swiper-slide,
  .arika-banner-slider .swiper-slide-bg{
    height:210px !important;
    min-height:210px !important;
  }

  /* Arrows are dropped on phones: they eat the width the copy needs, and the
     slider is swipeable. Dots move to the centre as the affordance. */
  .arika-banner-slider .elementor-swiper-button{display:none !important;}

  .arika-banner-slider .elementor-slide-heading{
    font-size:20px !important;line-height:1.15;margin-bottom:4px;
  }
  /* The description does not survive at this width; heading plus button carry it. */
  .arika-banner-slider .elementor-slide-description{display:none !important;}
  .arika-banner-slider .elementor-slide-button{
    padding:10px 18px !important;font-size:13px !important;
  }
  .arika-banner-slider .swiper-pagination-bullets{
    text-align:center;padding-right:0;bottom:10px !important;
  }
  .arika-banner-slider .swiper-pagination-bullet{width:7px;height:7px;}
  .arika-banner-slider .swiper-pagination-bullet-active{width:18px;}
}

/* Hero carousel: one stable frame rather than images of differing heights. */
.arika-hero-carousel .elementor-image-carousel .swiper-slide img{
  height:360px !important;
  width:100% !important;
  object-fit:cover;
  border-radius:10px;
}
@media (max-width:1024px){
  .arika-hero-carousel .elementor-image-carousel .swiper-slide img{height:300px !important;}
}
@media (max-width:767px){
  .arika-hero-carousel .elementor-image-carousel .swiper-slide img{height:230px !important;}
}

/* Brand tiles: bone cards, logo centred, name beneath. */
.arika-brand-tile .elementor-image-box-wrapper{
  background-color:#F9F4EC;
  border:1px solid #E0D5C5;
  border-radius:10px;
  padding:28px 20px 22px;
  height:100%;
  transition:border-color .18s ease;
}
.arika-brand-tile:hover .elementor-image-box-wrapper{border-color:#C9A96E;}
/* Large squircle badge with the logo filling it, brand name beneath - the
   treatment the site used before, which reads far bigger than a small logo
   floating in a card. The tile itself carries no card; the badge is the shape. */
.arika-brand-tile .elementor-image-box-wrapper{
  background-color:transparent;
  border:0;
  padding:0;
  border-radius:0;
}
.arika-brand-tile .elementor-image-box-img{
  width:230px !important;
  height:230px !important;
  max-width:100% !important;
  flex:0 0 auto;
  margin:0 auto 18px !important;
  background-color:#FFFFFF;
  border:1px solid #C9C6B6;
  border-radius:34%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:border-color .18s ease;
}
.arika-brand-tile:hover .elementor-image-box-img{border-color:#C9A96E;}
.arika-brand-tile .elementor-image-box-img img{
  width:84%;
  max-height:76%;
  height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
  margin:0;
}
/* The badge carries the identity; the piece counts were extra noise. */
.arika-brand-tile .elementor-image-box-description{display:none;}
.arika-brand-tile .elementor-image-box-title{margin:0;}

/* Four tiles across a tablet leaves the fourth brand stranded on its own row,
   so below the desktop breakpoint they sit two by two. */
@media (max-width:1024px){
  .elementor-element-hmbrow > .e-con-inner{flex-wrap:wrap;}
  .arika-brand-tile{
    flex:1 1 calc(50% - 12px) !important;
    max-width:calc(50% - 12px) !important;
    width:auto !important;
  }
  .arika-brand-tile .elementor-image-box-img{width:180px !important;height:180px !important;}
}
@media (max-width:767px){
  .arika-brand-tile .elementor-image-box-img{width:150px !important;height:150px !important;}
}
.arika-brand-tile .elementor-image-box-title{margin:0 0 2px;}

/* A short gold rule under section headings is the accent's job. */
.elementor-widget-heading.arika-rule .elementor-heading-title::after{
  content:"";display:block;width:44px;height:2px;
  background-color:#C9A96E;margin-top:12px;
}

/* ============== Product cards in every loop grid ==============
   Photos arrive in different aspect ratios (square tea boxes, tall cutlery
   shots), so every card was a different height and titles, prices and buttons
   never lined up across a row. A fixed square image well plus a flex column
   puts the action on a common baseline however the title wraps. */

.elementor-widget-loop-grid .elementor-loop-container [data-elementor-type="loop-item"]{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* The card itself is white. The loop item carried no background of its own, so
   on the bone bands the cream showed through behind white-background packshots
   and each photo read as a pasted-on rectangle. A hairline keeps the card
   readable where the section behind it is also white. */
.elementor-widget-loop-grid .elementor-loop-container [data-elementor-type="loop-item"]{
  background-color:#FFFFFF !important;
  border:1px solid #E0D5C5;
  border-radius:10px;
  overflow:hidden;
}
.elementor-widget-loop-grid .elementor-loop-container [data-elementor-type="loop-item"] > .e-con-inner{
  background-color:transparent !important;
}

/* A fixed height beats Elementor's own width/height rules deterministically;
   aspect-ratio lost to them and left every image box a different size.
   object-fit:contain so product shots are never cropped. */
.elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-image img,
.elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-theme-post-featured-image img{
  height:230px !important;
  width:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  background-color:#FFFFFF;
  display:block;
}

@media (max-width:1024px){
  .elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-image img,
  .elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-theme-post-featured-image img{
    height:190px !important;
  }
}
@media (max-width:767px){
  .elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-image img,
  .elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-theme-post-featured-image img{
    height:150px !important;
  }
}

/* Title reserves two lines so prices sit on a common baseline. */
.elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-theme-post-title .elementor-heading-title,
.elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-heading .elementor-heading-title{
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  /* Line box and reserved height must be derived from the same unit, or a third
     line shows through the clip as a sliced-off sliver. */
  line-height:1.3 !important;
  min-height:2.6em;
  max-height:2.6em;
}

/* Push the action to the bottom of the card. */
.elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-button,
.elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-woocommerce-product-add-to-cart{
  margin-top:auto;
}

/* ============== Product gallery ==============
   Belt and braces alongside removing gallery-zoom theme support: if any script
   still injects the magnified overlay, it must never paint. It is a
   full-resolution copy clipped by a much smaller frame, so it only ever shows a
   crop of the middle of the photo. */
.woocommerce-product-gallery img.zoomImg{
  display:none !important;
  opacity:0 !important;
}

/* The real gallery image shows the whole product, never a crop. */
.woocommerce-product-gallery .woocommerce-product-gallery__image img{
  object-fit:contain;
  width:100%;
  height:auto;
}

/* Flexslider's Previous/Next control renders as a bare bulleted text list under
   the gallery thumbnails. The thumbnails are clickable, so the nav is redundant. */
.woocommerce-product-gallery .flex-direction-nav{
  display:none !important;
}
.woocommerce-product-gallery .flex-control-thumbs{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.woocommerce-product-gallery .flex-control-thumbs li{
  margin:0;
  width:calc(25% - 8px);
  list-style:none;
}
.woocommerce-product-gallery .flex-control-thumbs img{
  border:1px solid #E0D5C5;
  border-radius:5px;
  cursor:pointer;
  opacity:.75;
  transition:opacity .18s ease,border-color .18s ease;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover{
  opacity:1;
  border-color:#5C6E3D;
}

/* A stray 3px border was drawing a frame line around the photo. */
.woocommerce-product-gallery__wrapper{
  border:0 !important;
}

/* WooCommerce ships `div.images{margin-bottom:2em}` - exactly the 32px white
   strip that was showing under the photo inside the card. */
.woocommerce div.product div.images,
.woocommerce div.product div.woocommerce-product-gallery,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery{
  margin-bottom:0 !important;
}

/* The image and its link are inline by default, which would leave a smaller
   descender gap for the same reason. */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image > a{
  display:block;
  line-height:0;
  font-size:0;
}
.woocommerce-product-gallery__image img{
  display:block;
}

/* ============== Single product ==============
   The buy-box column stretched to the gallery's height, leaving a tall empty
   white card below the Add to cart and WhatsApp buttons. */
.elementor-element-4baaeb3{align-self:flex-start;}

@media (max-width:767px){
  .elementor-element-4baaeb3{align-self:stretch;}
}

/* ============== Cart / checkout / account ==============
   Raw WooCommerce markup that Hello Elementor barely styles. */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main,
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content,
.woocommerce-account .page-content{
  padding-top:48px;
  padding-bottom:64px;
}

.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-account h1.entry-title{
  font-family:Montserrat,sans-serif;
  font-weight:600;
  font-size:32px;
  line-height:1.2;
  color:#3A3028;
  margin-bottom:24px;
}

/* Notices: default Woo blue replaced with the sage system. */
.woocommerce-info,
.woocommerce-message{
  border-top-color:#5C6E3D;
  background-color:#F9F4EC;
  color:#3A3028;
  font-family:Montserrat,sans-serif;
  font-size:15px;
  border-radius:10px;
}
.woocommerce-info::before,
.woocommerce-message::before{color:#5C6E3D;}
.woocommerce-error{
  border-top-color:#B3453A;
  background-color:#F9F4EC;
  color:#3A3028;
  border-radius:10px;
  font-family:Montserrat,sans-serif;
}

/* Buttons. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background-color:#5C6E3D;
  color:#FFFFFF;
  font-family:Montserrat,sans-serif;
  font-weight:700;
  font-size:15px;
  border-radius:5px;
  padding:13px 28px;
  transition:background-color .18s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background-color:#8B9D6A;
  color:#FFFFFF;
}

/* Tables. */
.woocommerce table.shop_table{
  border:1px solid #E0D5C5;
  border-radius:10px;
  font-family:Montserrat,sans-serif;
  border-collapse:separate;
  border-spacing:0;
}
.woocommerce table.shop_table th{
  font-weight:600;
  color:#3A3028;
  background-color:#F9F4EC;
}
.woocommerce table.shop_table td{border-top:1px solid #E0D5C5;color:#7A6E64;}
.woocommerce table.shop_table .product-name a{color:#3A3028;font-weight:500;}

/* Form fields match the contact form. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  font-family:Montserrat,sans-serif;
  font-size:15px;
  color:#3A3028;
  border:1px solid #E0D5C5;
  border-radius:5px;
  padding:11px 14px;
  min-height:46px;
  background-color:#FFFFFF;
}
.woocommerce form .form-row label{
  font-family:Montserrat,sans-serif;
  font-size:14px;
  font-weight:500;
  color:#7A6E64;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{
  outline:none;
  border-color:#5C6E3D;
  box-shadow:0 0 0 3px rgba(15,27,46,.18);
}

/* Cart totals / checkout review panel read as cards. */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order{
  background-color:#F9F4EC;
  border:1px solid #E0D5C5;
  border-radius:10px;
  padding:22px;
}

@media (max-width:767px){
  .woocommerce-cart .site-main,
  .woocommerce-checkout .site-main,
  .woocommerce-account .site-main{padding-top:28px;padding-bottom:40px;}
  .woocommerce-cart h1.entry-title,
  .woocommerce-checkout h1.entry-title,
  .woocommerce-account h1.entry-title{font-size:24px;}
}

/* Heading carried for assistive tech and crawlers on the image-led home page. */
.arika-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* Touch screens keep the last :hover after a tap, which froze footer links in
   their hover colour. Devices with no real pointer get no hover shift. */
@media (hover:none){
  .elementor-location-footer .elementor-icon-list-item:hover .elementor-icon-list-text{color:#FFFFFF !important;}
}


/* ==========================================================================
   Header and navigation - matched to arikahome.bh.
   The storefront header was a dark band with white sans links. The main site
   is a white bar with uppercase Montserrat links that go sage on hover and
   carry a 2px sage underline when active. Values are taken from the main
   site's own stylesheet: 0.68rem/500 at 0.14em tracking, #3A3028 ink,
   #8B9D6A hover, shadow rgba(58,48,40,.07).
   ========================================================================== */

:root{
  /* The desktop nav row goes position:fixed at this height once the page
     scrolls; the cart totals rail offsets against it. */
  --arika-sticky-header:66px;
}

/* elementor-element-a7fa2cd is the desktop nav row in header template 17343. */
.elementor-location-header .elementor-element.elementor-element-a7fa2cd{
  background-color:#FFFFFF !important;
  background-image:none !important;
  box-shadow:0 2px 16px rgba(58,48,40,.07);
  border-bottom:1px solid #E0D5C5;
}

.elementor-location-header .elementor-nav-menu a.elementor-item{
  font-family:Montserrat,sans-serif !important;
  font-weight:500 !important;
  font-size:.80rem !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:#3A3028 !important;
  fill:#3A3028 !important;
  transition:color .35s ease;
}
.elementor-location-header .elementor-nav-menu a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu a.elementor-item:focus,
.elementor-location-header .elementor-nav-menu a.elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu a.elementor-item.highlighted{
  color:#8B9D6A !important;
  fill:#8B9D6A !important;
  background-color:transparent !important;
}

/* The active item carries the main site's 2px sage underline. Elementor's own
   pointer underline is disabled so the two do not double up. */
.elementor-location-header .elementor-nav-menu a.elementor-item:after,
.elementor-location-header .elementor-nav-menu a.elementor-item:before{
  background-color:#8B9D6A !important;
}
.elementor-location-header .elementor-nav-menu--main a.elementor-item.elementor-item-active{
  box-shadow:inset 0 -2px 0 0 #8B9D6A;
}

/* Dropdowns: white panel, 2px sage top border, cream hover row with a sage
   left marker - the main site's submenu treatment. */
.elementor-location-header .elementor-nav-menu--dropdown{
  background-color:#FFFFFF !important;
  border-top:2px solid #8B9D6A;
  box-shadow:0 4px 24px rgba(58,48,40,.10);
  min-width:220px;
}
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item{
  font-family:Montserrat,sans-serif !important;
  font-size:.7rem !important;
  font-weight:500 !important;
  letter-spacing:.08em !important;
  text-transform:none !important;
  color:#3A3028 !important;
  border-left:2px solid transparent;
  transition:all .35s ease;
}
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:focus,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active{
  color:#8B9D6A !important;
  background-color:#F9F4EC !important;
  border-left-color:#8B9D6A;
}

/* Headings take the serif, matching the main site. The polish sheets set
   Montserrat on everything when the two families replaced Archivo; these put
   Cormorant Garamond back on the headings it belongs to. Body, controls and
   labels stay Montserrat. */
.woocommerce h1,.woocommerce h2,.woocommerce h3,
.woocommerce-page h1,.woocommerce-page h2,.woocommerce-page h3,
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.arika-suggest-title,
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-weight:600 !important;
  line-height:1.15;
  color:#3A3028;
}

/* The suggestion rule was gold; sage is the colour that marks headings now. */
.arika-suggest-title::after{background-color:#8B9D6A;}

/* Elementor sets the submenu border width to 0 at a higher specificity. */
.elementor-location-header .elementor-nav-menu--dropdown{
  border-top:2px solid #8B9D6A !important;
}

/* The header is now a single bar: logo, menu, icons. The menu must not wrap
   to a second line - the design rule is one line at desktop. */
.elementor-location-header .elementor-element-a7fa2cd .elementor-nav-menu--main{
  flex-wrap:nowrap;
  justify-content:center;
}
.elementor-location-header .elementor-element-a7fa2cd .elementor-nav-menu a.elementor-item{
  padding-left:.6rem;
  padding-right:.6rem;
  white-space:nowrap;
}
.elementor-location-header .elementor-element-e4ce0ae{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
}
/* Full-screen search skin: just the icon in the bar. */
.elementor-location-header .elementor-search-form--skin-full_screen .elementor-search-form__toggle{
  color:#3A3028;
}

/* Header search: an icon in the bar that opens a field, matching the icon row
   in the reference. Closed by default so the bar stays a single clean line. */
.arika-search{position:relative;display:flex;align-items:center;}
.arika-search__toggle{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;
  background:transparent;border:0;cursor:pointer;
  color:#3A3028;border-radius:4px;
  transition:color .35s ease;
}
.arika-search__toggle:hover,.arika-search__toggle:focus-visible{color:#8B9D6A;}
.arika-search__toggle:focus-visible{outline:2px solid rgba(139,157,106,.5);outline-offset:2px;}
.arika-search__form{
  position:absolute;top:calc(100% + 10px);right:0;
  display:none;z-index:1000;
  background:#FFFFFF;border:1px solid #E0D5C5;border-radius:4px;
  box-shadow:0 4px 24px rgba(58,48,40,.10);
  padding:8px;
}
.arika-search.is-open .arika-search__form{display:block;}
.arika-search__form input[type=search]{
  width:260px;height:40px;padding:0 12px;
  font-family:Montserrat,sans-serif;font-size:14px;color:#3A3028;
  border:1px solid #E0D5C5;border-radius:4px;background:#FFFFFF;
}
.arika-search__form input[type=search]:focus{
  outline:none;border-color:#8B9D6A;box-shadow:0 0 0 3px rgba(139,157,106,.25);
}
@media (max-width:1024px){.arika-search__form input[type=search]{width:200px;}}

/* The toggle script puts .is-open on Elementor's widget container, which is the
   script's parentNode - not on .arika-search itself. Match either. */
.is-open .arika-search__form{display:block !important;}


/* ==========================================================================
   Announcement bar: promo text left, GCC currency selector and WhatsApp right.
   Replaces the scrolling marquee.
   ========================================================================== */
.arika-annc{width:100%;background:#5C6E3D;color:#FFFFFF;}
.arika-annc__inner{
  max-width:1240px;margin:0 auto;padding:9px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:Montserrat,sans-serif;
}
.arika-annc__promo{margin:0;font-size:13px;font-weight:600;letter-spacing:.01em;}

/* The blink the brief asked for, as a slow fade rather than a hard flash:
   a hard blink is a seizure risk and fails WCAG 2.2.2. Pauses on hover and
   stops entirely for anyone who has asked for reduced motion. */
@keyframes arikaBlink{0%,100%{opacity:1}50%{opacity:.35}}
.arika-annc__blink{animation:arikaBlink 1.8s ease-in-out infinite;}
.arika-annc:hover .arika-annc__blink{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.arika-annc__blink{animation:none;}}

.arika-annc__actions{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
.arika-annc__wa{display:flex;align-items:center;color:#FFFFFF;opacity:.92;}
.arika-annc__wa:hover{opacity:1;color:#FFFFFF;}

/* Currency selector */
.arika-cur{position:relative;}
.arika-cur__toggle{
  display:flex;align-items:center;gap:8px;
  background:transparent;border:0;padding:4px 2px;cursor:pointer;
  color:#FFFFFF;font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;
}
.arika-cur__toggle:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px;border-radius:3px;}
.arika-cur__flag{display:block;border-radius:2px;}
.arika-cur__toggle svg{transition:transform .25s ease;}
.arika-cur.is-open .arika-cur__toggle svg{transform:rotate(180deg);}
.arika-cur__panel{
  display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:1200;
  min-width:236px;background:#FFFFFF;border:1px solid #E0D5C5;border-top:2px solid #8B9D6A;
  border-radius:4px;box-shadow:0 4px 24px rgba(58,48,40,.16);padding:6px;
}
.arika-cur.is-open .arika-cur__panel{display:block;}
.arika-cur__menu{list-style:none;margin:0;padding:0;}
.arika-cur__opt{
  display:flex;align-items:center;gap:10px;width:100%;
  background:transparent;border:0;cursor:pointer;text-align:left;
  padding:9px 10px;border-radius:3px;
  font-family:Montserrat,sans-serif;font-size:13px;color:#3A3028;
}
.arika-cur__opt em{margin-left:auto;font-style:normal;color:#7A6E64;font-weight:600;}
.arika-cur__opt:hover,.arika-cur__opt:focus-visible{background:#F9F4EC;color:#5C6E3D;outline:none;}
.arika-cur__opt[aria-selected="true"]{background:#F9F4EC;font-weight:600;}
.arika-cur__note{
  margin:6px 4px 2px;padding-top:8px;border-top:1px solid #E0D5C5;
  font-family:Montserrat,sans-serif;font-size:11px;line-height:1.5;color:#7A6E64;
}
@media (max-width:900px){
  .arika-annc__inner{padding:8px 14px;gap:12px;}
  .arika-annc__promo{font-size:11.5px;}
  .arika-cur__toggle{font-size:12px;}
}
@media (max-width:600px){
  .arika-annc__promo{font-size:11px;line-height:1.35;}
  .arika-annc__actions{gap:12px;}
}

/* The announcement widget kept overflow:hidden from the old scrolling marquee,
   which clipped the currency dropdown. The bar no longer scrolls anything. */
.elementor-location-header .elementor-element-b2e9a50,
.elementor-location-header .elementor-element-b2e9a50 .elementor-widget-container{
  overflow:visible !important;
}
.elementor-location-header .elementor-element-bf4ed68,
.elementor-location-header .elementor-element-65e397e{overflow:visible !important;z-index:1100;position:relative;}

/* Two promo messages that take turns: the first blinks, fades out, the second
   comes in and blinks, and it loops. The two are stacked in the same grid cell
   so the bar sizes itself to the taller message and nothing shifts when they
   swap - important on mobile, where a line can wrap. The blink lives on an
   inner span so the two opacity animations do not fight each other. */
.arika-annc__promo{display:grid;flex:1 1 auto;min-width:0;}
.arika-annc__msg{
  grid-area:1 / 1;
  opacity:0;
  animation:arikaRotate 11s ease-in-out infinite;
}
.arika-annc__msg--2{animation-delay:5.5s;}
@keyframes arikaRotate{
  0%{opacity:0}
  3%{opacity:1}
  45%{opacity:1}
  50%{opacity:0}
  100%{opacity:0}
}
.arika-annc:hover .arika-annc__msg{animation-play-state:paused;}

/* Reduced motion: no rotation and no blink - the first message simply stays. */
@media (prefers-reduced-motion:reduce){
  .arika-annc__msg{animation:none;}
  .arika-annc__msg--1{opacity:1;}
  .arika-annc__msg--2{display:none;}
}

/* A real blink. The earlier version only dipped to .35 opacity, which reads as
   a gentle dim rather than a blink - the text never actually goes away. This
   goes fully off and back, once every 1.3s. That is well under the 3-per-second
   photosensitivity threshold, and it still pauses on hover and stops entirely
   under reduced-motion. Redefining the keyframes of the same name overrides the
   earlier one. */
@keyframes arikaBlink{
  0%,44%{opacity:1}
  50%,72%{opacity:0}
  78%,100%{opacity:1}
}
.arika-annc__blink{animation:arikaBlink 1.3s steps(1,end) infinite;}
.arika-annc:hover .arika-annc__blink{animation-play-state:paused;}

/* Re-asserted after the rule above so it still wins. */
@media (prefers-reduced-motion:reduce){
  .arika-annc__blink{animation:none !important;opacity:1 !important;}
}


/* ==========================================================================
   Mobile menu stacking.
   Elementor opens the dropdown at z-index 1, which put it behind the mobile
   header (10000), the announcement bar (1100) and the bottom bar (9999). It
   was opening correctly and simply painting behind all of them.
   ========================================================================== */
@media (max-width:1024px){
  .elementor-location-header .elementor-nav-menu__container.elementor-nav-menu--dropdown{
    z-index:10001 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    box-shadow:0 12px 32px rgba(58,48,40,.16);
    border-top:2px solid #8B9D6A !important;
  }
  /* Roomier tap targets than the desktop bar's 0.8rem items. */
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item,
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item{
    font-size:.95rem !important;
    letter-spacing:.08em !important;
    padding:15px 22px !important;
    border-bottom:1px solid #E0D5C5;
  }
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item{
    padding-left:38px !important;
    font-size:.85rem !important;
  }
}

/* The desktop flyout rules above target .elementor-nav-menu--dropdown, which
   Elementor also puts on the mobile menu's inline sub-menu. That turned the
   'My Account > Cart' sub-list into a floating white panel covering the main
   items - which is why the open mobile menu appeared to contain only 'Cart'.
   Inside the mobile container the sub-menu is a plain nested list. */
@media (max-width:1024px){
  .elementor-location-header .elementor-nav-menu__container ul.sub-menu.elementor-nav-menu--dropdown{
    position:static !important;
    min-width:0 !important;
    width:auto !important;
    box-shadow:none !important;
    border-top:0 !important;
    border-radius:0 !important;
    background-color:#F9F4EC !important;
    padding:0 !important;
    transform:none !important;
    max-height:none !important;
    opacity:1 !important;
  }
  .elementor-location-header .elementor-nav-menu__container ul.elementor-nav-menu{
    display:block !important;
    width:100%;
  }
  .elementor-location-header .elementor-nav-menu__container ul.elementor-nav-menu > li{
    display:block !important;
    width:100%;
  }
}

/* The drawer header was built for the old navy menu: white text, and 84px of
   top padding to clear a header it used to sit underneath. On the white menu
   the text was invisible and the padding was dead space - which is what made
   the top third of the open menu look blank. */
.arika-drawer-top{
  padding:0 0 6px !important;
  background-color:#F9F4EC;
  color:#3A3028 !important;
  border-bottom:1px solid #E0D5C5;
}
.arika-drawer-top a,
.arika-drawer-top .arika-drawer-greet,
.arika-drawer-top .arika-drawer-login,
.arika-drawer-top .arika-drawer-row{
  color:#3A3028 !important;
}
.arika-drawer-hello{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;
  border-bottom:1px solid #E0D5C5;
}
.arika-drawer-login{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#5C6E3D !important;
}
.arika-drawer-login svg{width:16px;height:16px;}
.arika-drawer-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 22px !important;
  font-family:Montserrat,sans-serif;font-size:.95rem;
  border-bottom:1px solid #E0D5C5;
}
.arika-drawer-row svg{width:19px;height:19px;flex:0 0 19px;color:#5C6E3D;}
.arika-drawer-row:hover,.arika-drawer-row:focus{background-color:#FFFFFF;color:#5C6E3D !important;}


/* ==========================================================================
   Footer.
   Two things were wrong: the column headings rendered at 14px while the links
   under them were 15px, so the hierarchy read upside down; and the social
   icons were still the old navy #16202E, a colour that no longer exists in
   the palette. Headings now sit above their list with the design's 2px sage
   rule, and the icons take the brand.
   ========================================================================== */
.elementor-location-footer h3,
.elementor-location-footer h4{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:20px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  color:#FFFFFF !important;
  margin-bottom:16px !important;
  padding-bottom:10px;
  position:relative;
}
.elementor-location-footer h3::after,
.elementor-location-footer h4::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:34px;height:2px;
  background-color:#C9D5B0;
}

/* Links: a touch more room so a column reads as a list, not a block. */
.elementor-location-footer .elementor-icon-list-item{margin-bottom:9px;}
.elementor-location-footer .elementor-icon-list-text{
  font-family:Montserrat,sans-serif;
  transition:color .35s ease;
}
.elementor-location-footer a:hover .elementor-icon-list-text,
.elementor-location-footer .elementor-icon-list-item:hover .elementor-icon-list-text{
  color:#FFFFFF !important;
}

/* Social icons were navy on a pale chip. White on a translucent chip, sage on hover. */
.elementor-location-footer .elementor-social-icon{
  background-color:rgba(255,255,255,.14) !important;
  transition:background-color .35s ease;
}
.elementor-location-footer .elementor-social-icon i,
.elementor-location-footer .elementor-social-icon svg{
  color:#FFFFFF !important;
  fill:#FFFFFF !important;
}
.elementor-location-footer .elementor-social-icon:hover{
  background-color:#C9D5B0 !important;
}
.elementor-location-footer .elementor-social-icon:hover i,
.elementor-location-footer .elementor-social-icon:hover svg{
  color:#3A3028 !important;
  fill:#3A3028 !important;
}

@media (max-width:767px){
  .elementor-location-footer h3,
  .elementor-location-footer h4{font-size:18px !important;margin-bottom:12px !important;}
}

/* The footer heading rule is styled by .arika-footer-head .elementor-heading-title::after,
   which outranks a generic h3::after. Match that weight so the accent stays on brand. */
.elementor-location-footer .arika-footer-head .elementor-heading-title::after{
  background-color:#C9D5B0 !important;
  width:34px !important;
  height:2px !important;
}
.elementor-location-footer .arika-footer-head .elementor-heading-title{
  font-size:20px !important;
}
@media (max-width:767px){
  .elementor-location-footer .arika-footer-head .elementor-heading-title{font-size:18px !important;}
}

/* The store panel sat at z-index 1200 while the mobile header is 10000, so on
   a phone the header covered the panel and its options could not be tapped. */
.arika-cur__panel{z-index:10002 !important;}

@media (max-width:600px){
  /* Keep the panel inside a narrow screen rather than hanging off the edge. */
  .arika-cur__panel{
    right:0;
    left:auto;
    min-width:0;
    width:min(268px, calc(100vw - 24px));
  }
  .arika-cur__opt{padding:12px 12px;}
}

/* The announcement bar container carries z-index:1100, which makes it a
   stacking context - so the store panel inside it could never rise above the
   mobile header's 10000, no matter what z-index the panel itself had. The
   container has to win the comparison, not the panel. The bar is only ~66px
   tall at the very top, so lifting it does not cover anything else. */
.elementor-location-header .elementor-element-65e397e{z-index:10005 !important;}


/* ==========================================================================
   Footer arrangement.
   Desktop was 31% brand + three 19% columns, which left the link columns
   cramped against a wide brand block. On mobile all four stacked one per row,
   making the footer over 1100px tall to scroll past. Now the brand keeps a
   third, the link columns share the rest evenly, and on a phone they sit two
   across instead of stacking - roughly halving the height.
   ========================================================================== */
.elementor-location-footer .elementor-element-ftrrow{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:32px 24px;
}
@media (min-width:1025px){
  .elementor-location-footer .elementor-element-ftrbrand{width:32% !important;padding-right:24px;}
  .elementor-location-footer .elementor-element-ftrshop,
  .elementor-location-footer .elementor-element-ftrexp,
  .elementor-location-footer .elementor-element-ftrhelp{width:calc((68% - 72px) / 3) !important;}
}
@media (min-width:768px) and (max-width:1024px){
  .elementor-location-footer .elementor-element-ftrbrand{width:100% !important;}
  .elementor-location-footer .elementor-element-ftrshop,
  .elementor-location-footer .elementor-element-ftrexp,
  .elementor-location-footer .elementor-element-ftrhelp{width:calc((100% - 48px) / 3) !important;}
}
@media (max-width:767px){
  .elementor-location-footer .elementor-element-ftrrow{
    flex-direction:row !important;
    gap:26px 18px;
  }
  .elementor-location-footer .elementor-element-ftrbrand{width:100% !important;}
  /* Two link columns across rather than one, so the footer is not a long scroll. */
  .elementor-location-footer .elementor-element-ftrshop,
  .elementor-location-footer .elementor-element-ftrexp,
  .elementor-location-footer .elementor-element-ftrhelp{
    width:calc(50% - 9px) !important;
    flex:0 0 calc(50% - 9px) !important;
  }
}

/* Separate the legal strip from the columns above it. */
.elementor-location-footer .elementor-element-ftrbar{
  border-top:1px solid rgba(255,255,255,.18);
}
.elementor-location-footer .elementor-element-ftrbrand .arika-footer-contact{margin-top:4px;}

/* The footer contact icons ended up #5C6E3D - the very green the footer band
   is painted in - so they were invisible and the text looked randomly
   indented. A remap collision: the old navy mapped onto the band colour.
   Pale sage reads clearly on the green. */
.elementor-location-footer .arika-footer-contact .elementor-icon-list-icon svg,
.elementor-location-footer .arika-footer-contact .elementor-icon-list-icon i,
.elementor-location-footer .elementor-icon-list-icon svg,
.elementor-location-footer .elementor-icon-list-icon i{
  fill:#C9D5B0 !important;
  color:#C9D5B0 !important;
}
.elementor-location-footer .arika-footer-contact .elementor-icon-list-icon{
  width:18px;
  margin-right:10px;
  display:flex;align-items:center;justify-content:flex-start;
}
.elementor-location-footer .arika-footer-contact .elementor-icon-list-item{
  align-items:center;
  margin-bottom:10px !important;
}
.elementor-location-footer .arika-footer-contact .elementor-icon-list-text{
  font-size:15px;
  line-height:1.4;
}
/* The brand column reads as one block: logo, one line of copy, then contact. */
.elementor-location-footer .elementor-element-ftrtag{margin-bottom:18px;}
.elementor-location-footer .arika-footer-logo{margin-bottom:14px;}


/* ==========================================================================
   Header search.
   The icon was a thin brown outline (#3A3028, 1.8px) sitting beside a solid
   sage account glyph, so the two read as different icon sets. It now matches
   the sage. The panel was a bordered card wrapping a separately bordered
   input - a double frame; the input is now flush inside one card with a sage
   submit button.
   ========================================================================== */
.arika-search__toggle{
  color:#5C6E3D !important;
  width:42px;height:42px;
  border-radius:50%;
  transition:background-color .3s ease,color .3s ease;
}
.arika-search__toggle:hover,
.arika-search__toggle[aria-expanded="true"]{
  color:#3A3028 !important;
  background-color:#F9F4EC;
}
.arika-search__form{
  display:flex;align-items:stretch;
  padding:0;
  overflow:hidden;
  border:1px solid #E0D5C5;
  border-top:2px solid #8B9D6A;
  border-radius:6px;
  box-shadow:0 8px 28px rgba(58,48,40,.14);
}
.arika-search__form input[type=search]{
  width:250px;height:46px;
  border:0 !important;
  border-radius:0 !important;
  padding:0 14px;
  background:#FFFFFF;
  box-shadow:none !important;
  outline:none !important;
  font-family:Montserrat,sans-serif;font-size:14px;color:#3A3028;
}
.arika-search__form input[type=search]::placeholder{color:#7A6E64;}
.arika-search__form input[type=search]:focus{background:#FFFFFF;}
.arika-search__go{
  display:flex;align-items:center;justify-content:center;
  width:52px;flex:0 0 52px;
  border:0;cursor:pointer;
  background-color:#5C6E3D;color:#FFFFFF;
  transition:background-color .3s ease;
}
.arika-search__go:hover{background-color:#8B9D6A;}
/* Focus lives on the whole card rather than the bare input. */
.arika-search__form:focus-within{
  border-color:#8B9D6A;
  box-shadow:0 8px 28px rgba(58,48,40,.14),0 0 0 3px rgba(139,157,106,.28);
}
@media (max-width:600px){
  .arika-search__form input[type=search]{width:min(190px,calc(100vw - 150px));}
  .arika-search__go{width:46px;flex:0 0 46px;}
}

/* Currency symbol beside each country, and in the toggle. */
.arika-cur__cursym{
  font-family:Montserrat,sans-serif;
  font-size:12px;font-weight:600;
  opacity:.85;
  margin-left:-2px;
}
.arika-cur__opt em{
  display:inline-flex;align-items:baseline;gap:7px;
  margin-left:auto;font-style:normal;font-weight:600;color:#7A6E64;
}
.arika-cur__sym{
  font-style:normal;
  font-size:13px;
  color:#5C6E3D;
  min-width:26px;
  text-align:right;
}
/* WhatsApp mark: a filled glyph, sized to sit with the switcher. */
.arika-annc__wa{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  color:#FFFFFF;
  transition:background-color .3s ease;
}
.arika-annc__wa:hover{background-color:rgba(255,255,255,.18);color:#FFFFFF;}
.arika-annc__wa svg{display:block;}

/* The search card above sets display:flex, which overrode the hidden default
   and left the box permanently open. The toggle script puts .is-open on the
   widget container, so that is what reveals it. */
.arika-search__form{display:none !important;}
.is-open .arika-search__form{display:flex !important;}

/* WhatsApp sits on the green band, so it must be white. */
.arika-annc .arika-annc__wa,
.arika-annc .arika-annc__wa svg{color:#FFFFFF !important;fill:#FFFFFF !important;}
.arika-annc .arika-annc__wa:hover,
.arika-annc .arika-annc__wa:hover svg{color:#FFFFFF !important;fill:#FFFFFF !important;}

/* The new UAE dirham mark, drawn as SVG so it renders everywhere. It sizes
   itself to the surrounding text and follows its colour. */
.arika-aed{
  width:.82em;height:.82em;
  display:inline-block;
  vertical-align:-0.06em;
  margin-right:.12em;
}
.woocommerce-Price-currencySymbol .arika-aed{vertical-align:-0.04em;}
.arika-cur__sym .arika-aed,
.arika-cur__cursym .arika-aed{width:1em;height:1em;vertical-align:-0.12em;margin-right:0;}


/* ==========================================================================
   Mobile menu toggle visibility.
   Elementor styles the toggle's active state separately, and that state was
   white - on a white header. So the hamburger disappeared the instant the menu
   opened, leaving no visible way to close it. Both states are pinned to the
   brand ink, and the open state gets a cream pad so it reads as pressed.
   ========================================================================== */
.elementor-location-header .elementor-menu-toggle,
.elementor-location-header .elementor-menu-toggle.elementor-active,
.elementor-location-header .elementor-menu-toggle:hover,
.elementor-location-header .elementor-menu-toggle:focus{
  color:#3A3028 !important;
}
.elementor-location-header .elementor-menu-toggle svg,
.elementor-location-header .elementor-menu-toggle i,
.elementor-location-header .elementor-menu-toggle.elementor-active svg,
.elementor-location-header .elementor-menu-toggle.elementor-active i,
.elementor-location-header .elementor-menu-toggle .e-font-icon-svg{
  fill:#3A3028 !important;
  color:#3A3028 !important;
  stroke:none;
}
.elementor-location-header .elementor-menu-toggle.elementor-active{
  background-color:#F9F4EC !important;
  border-radius:6px;
}
/* Keep it above the open menu so it is always tappable to close. */
.elementor-location-header .elementor-menu-toggle{
  position:relative;
  z-index:10003;
}


/* ==========================================================================
   UAE dirham mark.
   The symbol itself stays the plain text "AED" so it is safe in emails,
   exports and any escaped string - returning SVG from the currency filter
   printed raw <svg> markup in the cart's tax line. The glyph is painted over
   that text with a CSS mask, so it takes the surrounding colour and, if the
   stylesheet ever fails to load, the customer simply reads "AED".
   Scoped to the store that trades in dirhams.
   ========================================================================== */
.arika-currency-aed .woocommerce-Price-currencySymbol{
  display:inline-block;
  width:.72em;height:.82em;
  vertical-align:-.08em;
  color:transparent;
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5v15'/%3E%3Cpath d='M9 4.5h2.2a7.5 7.5 0 0 1 0 15H9'/%3E%3Cpath d='M3.5 10h11.2'/%3E%3Cpath d='M3.5 14h11.2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5v15'/%3E%3Cpath d='M9 4.5h2.2a7.5 7.5 0 0 1 0 15H9'/%3E%3Cpath d='M3.5 10h11.2'/%3E%3Cpath d='M3.5 14h11.2'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* Browsers without mask support keep readable text rather than a blank gap. */
@supports not (mask-image: url('')) {
  .arika-currency-aed .woocommerce-Price-currencySymbol{
    color:inherit;background:none;width:auto;height:auto;
  }
}

/* --- Trust strip under the hero slider ----------------------------------
   The band looked over-tall because TWO paddings stack: the section's own,
   plus 40px top and bottom on its inner container. That inner padding was the
   large shaded margin above and below the text, so it is trimmed here rather
   than shrinking the section and leaving the inner space untouched.
   ----------------------------------------------------------------------- */
.elementor-element-hmtrust{
  margin-top:40px !important;
  padding-top:22px !important;
  padding-bottom:22px !important;
}
.elementor-element-hmtrust > .e-con-inner{
  padding-top:6px !important;
  padding-bottom:6px !important;
}
.elementor-element-hmtrust .elementor-icon-box-title,
.elementor-element-hmtrust .elementor-icon-box-title a{
  font-size:20px !important;
  line-height:1.3 !important;
  margin-bottom:5px !important;
}
.elementor-element-hmtrust .elementor-icon-box-description{
  font-size:16px !important;
  line-height:1.5 !important;
}

@media (max-width:1024px){
  .elementor-element-hmtrust{margin-top:30px !important;padding-top:18px !important;padding-bottom:18px !important;}
  .elementor-element-hmtrust > .e-con-inner{padding-top:4px !important;padding-bottom:4px !important;}
  .elementor-element-hmtrust .elementor-icon-box-title,
  .elementor-element-hmtrust .elementor-icon-box-title a{font-size:18px !important;}
  .elementor-element-hmtrust .elementor-icon-box-description{font-size:15px !important;}
}
@media (max-width:767px){
  .elementor-element-hmtrust{margin-top:22px !important;padding-top:14px !important;padding-bottom:14px !important;}
  .elementor-element-hmtrust .elementor-icon-box-title,
  .elementor-element-hmtrust .elementor-icon-box-title a{font-size:17px !important;}
  .elementor-element-hmtrust .elementor-icon-box-description{font-size:14.5px !important;}
}

/* --- Brand tiles: 3D lift on hover --------------------------------------
   The logo tiles were flat, with only a border colour change on hover. They
   now tilt toward the viewer and lift off the page, with the shadow doing the
   work of selling the depth. Perspective sits on the wrapper so each tile
   rotates about its own centre rather than sharing one vanishing point.
   ----------------------------------------------------------------------- */
.elementor-element-hmbrands .elementor-image-box-wrapper{
  perspective:900px;
}
.elementor-element-hmbrands .elementor-image-box-img{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(0deg) translateY(0) scale(1);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),
             box-shadow .4s ease,
             border-color .25s ease;
  will-change:transform;
}
.elementor-element-hmbrands .elementor-widget:hover .elementor-image-box-img,
.elementor-element-hmbrands .elementor-image-box-wrapper:hover .elementor-image-box-img,
.elementor-element-hmbrands .elementor-image-box-img:hover{
  transform:perspective(900px) rotateX(9deg) translateY(-10px) scale(1.045);
  box-shadow:0 22px 34px -12px rgba(58,48,40,.30),
             0 8px 14px -8px rgba(58,48,40,.18);
  border-color:#B99B5E !important;
}
/* The caption follows a touch, so tile and label move as one object. */
.elementor-element-hmbrands .elementor-image-box-content{
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.elementor-element-hmbrands .elementor-widget:hover .elementor-image-box-content{
  transform:translateY(-4px);
}

/* Someone who has asked for less motion gets the colour cue only. */
@media (prefers-reduced-motion: reduce){
  .elementor-element-hmbrands .elementor-image-box-img,
  .elementor-element-hmbrands .elementor-image-box-content{transition:border-color .25s ease;}
  .elementor-element-hmbrands .elementor-widget:hover .elementor-image-box-img,
  .elementor-element-hmbrands .elementor-image-box-wrapper:hover .elementor-image-box-img{
    transform:none;box-shadow:none;
  }
  .elementor-element-hmbrands .elementor-widget:hover .elementor-image-box-content{transform:none;}
}

/* --- Trust strip: lighter type ------------------------------------------
   Elementor's page CSS sets font-weight:700 on each of these titles
   (hmt1-hmt4), which reads heavy in Cormorant at this size. Medium keeps the
   heading distinct from the line under it without shouting.
   ----------------------------------------------------------------------- */
.elementor-element-hmtrust .elementor-icon-box-title,
.elementor-element-hmtrust .elementor-icon-box-title a,
.elementor-element-hmt1 .elementor-icon-box-title,
.elementor-element-hmt2 .elementor-icon-box-title,
.elementor-element-hmt3 .elementor-icon-box-title,
.elementor-element-hmt4 .elementor-icon-box-title{
  font-weight:500 !important;
}
.elementor-element-hmtrust .elementor-icon-box-description{
  font-weight:400 !important;
}

/* --- Lighter type on product cards and headings -------------------------
   The loop template sets font-weight:600 on both the product title and the
   price, and Cormorant at 600 reads as heavy bold at card sizes. Medium keeps
   them clearly distinct from body text without shouting.

   Buttons, table headings and totals keep their weight on purpose - those are
   meant to stand out.
   ----------------------------------------------------------------------- */

/* Product card titles, whichever widget renders them. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.elementor-loop-container .elementor-heading-title,
.elementor-loop-container .wpr-grid-product-title,
.wpr-grid-item-title,
.wpr-product-title,
.arika-suggest-name,
.arika-suggest-name a{
  font-weight:500 !important;
}

/* Prices on cards and in grids. */
.wpr-product-price,
.elementor-loop-container .price,
.elementor-loop-container .woocommerce-Price-amount,
.woocommerce ul.products li.product .price{
  font-weight:500 !important;
}

/* Serif headings: 500 rather than 600, matching the trust strip. */
.woocommerce h1,.woocommerce h2,.woocommerce h3,
.woocommerce-page h1,.woocommerce-page h2,.woocommerce-page h3,
.woocommerce div.product .product_title,
.arika-suggest-title{
  font-weight:500 !important;
}