/* El Septimo Dubai — "Basalt & Signature" brand identity (10 Oct 2026).
   Never gold, never cream. White is the ground; Signature carries the
   header, buttons, boxes and bands; Basalt carries every word; Lava is the
   accent on white only. Overrides the inherited Shopify theme variables. */
@import url("https://fonts.googleapis.com/css2?family=Bellefair&family=Poppins:wght@300;400;500;600&display=swap");

:root{
  --es-signature:#A08F5D;
  /* the only safe colour for words sitting on Signature (5.5:1) */
  --es-signature-900:#1F1905;
  /* the band behind the menu bar and the footer */
  --es-band:#1F1905;
  --es-white:#FFFFFF;
  --es-basalt:#2F2E33;
  --es-lava:#C4502F;
  --es-blush:#EFE8DA;
  --es-line:rgba(47,46,51,.16);
  --es-heading-font:"Bellefair",Georgia,"Times New Roman",serif;
  --es-body-font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* ---- theme colour schemes, all repointed at the palette ---------------- */
html .scheme-primary, html .scheme-secondary, html .scheme-tertiary,
html .scheme-quaternary, html .scheme-quinary, html .scheme-senary,
html .scheme-septenary, html .scheme-octonary, html body{
  --body-background:var(--es-white);
  --body-background-rgb:255,255,255;
  --body-alternate-background:var(--es-blush);
  --body-background-gradient:var(--es-white);
  --body-background-spotlight:var(--es-blush);
  --corners-top-background:var(--es-signature);
  --corners-bottom-background:var(--es-signature);
  --border-color:var(--es-line);
  --transparent-border:var(--es-line);

  --text-color:var(--es-basalt);
  --heading-color:var(--es-basalt);
  --heading-text-gradient:none;
  --heading-background-gradient:none;
  --image-background-gradient:none;

  --link-color:var(--es-basalt);
  --link-hover-color:var(--es-lava);

  --button-background:var(--es-signature);
  --button-background-hover:var(--es-lava);
  --button-background-gradient:var(--es-signature);
  --button-text:var(--es-white);
  --button-text-hover:var(--es-white);
  --button-border:var(--es-signature);
  --button-secondary-background:var(--es-white);
  --button-secondary-background-hover:var(--es-blush);
  --button-secondary-background-gradient:var(--es-white);
  --button-secondary-text:var(--es-basalt);
  --button-secondary-text-hover:var(--es-basalt);
  --button-secondary-border:var(--es-basalt);

  --card-background:var(--es-white);
  --card-alternate-background:var(--es-blush);
  --card-background-gradient:var(--es-white);
  --card-border:var(--es-line);
  --card-heading:var(--es-basalt);
  --card-text:var(--es-basalt);
  --product-card-border:var(--es-line);

  --header-background:var(--es-signature);
  --header-color:var(--es-white);
  --header-hover-color:var(--es-blush);
  --header-border-color:rgba(255,255,255,.18);
  --transparent-header-color:var(--es-white);
  --submenu-background:var(--es-white);
  --submenu-color:var(--es-basalt);
  --submenu-hover-color:var(--es-lava);

  --form-input-background:var(--es-white);
  --form-input-color:var(--es-basalt);
  --form-input-border:var(--es-basalt);

  --highlight-background:var(--es-blush);
  --highlight-color:var(--es-basalt);
  --media-overlay-heading:var(--es-white);
  --media-overlay-text:var(--es-white);
  --image-overlay-background:var(--es-signature);
  --backdrop-overlay-background:rgba(47,46,51,.55);

  --sale-badge-background:var(--es-signature);      --sale-badge-text:var(--es-white);
  --soldout-badge-background:var(--es-basalt);        --soldout-badge-text:var(--es-white);
  --custom-badge-background:var(--es-signature);    --custom-badge-text:var(--es-white);
  --preorder-badge-background:var(--es-lava);         --preorder-badge-text:var(--es-white);
  --discount-badge-background:var(--es-lava);         --discount-badge-text:var(--es-white);

  --preloader-background:var(--es-signature);
  --preloader-text:var(--es-white);
  --scroll-top-background:var(--es-signature);
  --scroll-top-border:var(--es-signature);
  --scroll-top-color:var(--es-white);
  --slider-arrow-color:var(--es-basalt);
  --slider-arrow-bg:var(--es-white);
  --animation-color:var(--es-signature);
  --animation-text-color:var(--es-white);
  --error-color:var(--es-lava);
  --success-color:var(--es-basalt);
  --text-stroke-color:var(--es-basalt);

  /* ---- type ---- */
  --heading-font-family:var(--es-heading-font);
  --heading-font-weight:400;
  --heading-font-style:normal;
  --accent-font-family:var(--es-heading-font);
  --accent-font-weight:400;
  --body-font-family:var(--es-body-font);
  --body-font-weight:300;
  --body-font-style:normal;
  --button-font-family:var(--es-body-font);
  --button-font-weight:500;
  --preloader-font-family:var(--es-heading-font);
}

body,.body-font,input,textarea,select,button{font-family:var(--es-body-font)!important}
body{color:var(--es-basalt);background:var(--es-white)}
h1,h2,h3,h4,h5,h6,.heading-font,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--es-heading-font)!important;font-weight:400!important;
  text-transform:uppercase;letter-spacing:.06em;color:var(--es-basalt)}

/* The header band.
   At the top of the page it is only 10% Signature, so the words sit on the
   photograph behind and must be white. Once it sticks it becomes solid
   Signature, and Signature is a mid tone -- white on it is 3.2:1, which fails
   for menu-sized text. The stuck state therefore switches to Signature 900
   (5.5:1), exactly as the brand identity requires. */
.header-wrapper,.header,.site-header,.announcement-bar,.announcement{
  background:transparent!important;color:var(--es-white)!important}
.header a,.header button,.header-menu-link,.header-icon,.header-menu-text{color:var(--es-white)!important}
.header-menu-link:hover,.header a:hover{color:var(--es-blush)!important}

/* footer band -- the brand black, so white words and a Signature hover */
.footer,.footer-bottom{background:var(--es-band)!important;color:var(--es-white)!important}
.footer a,.footer-bottom a,.footer p,.footer h2,.footer h3,.footer h4,.footer h5,.footer h6,
.footer span,.footer li,.footer label{color:var(--es-white)!important}
.footer a:hover,.footer-bottom a:hover{color:var(--es-signature)!important;text-decoration:none}

/* ---- our own components ------------------------------------------------ */
.es-where-link{background:var(--es-white)!important;border:1px solid var(--es-white)!important;
  color:var(--es-signature)!important;font-family:var(--es-body-font)!important;font-weight:600}
.es-where-link:hover{background:var(--es-blush)!important;border-color:var(--es-blush)!important;
  color:var(--es-signature)!important}

.es-card-price,.es-card__p{color:var(--es-lava)!important;font-weight:500}
.es-pdp-price .es-p{color:var(--es-lava)!important}
.es-pdp-price.single{color:var(--es-lava)!important}
.es-pdp-price li{border-bottom:1px solid var(--es-line)}
.es-pdp-price{border-top:1px solid var(--es-line)}
.es-cta__btn{background:var(--es-signature)!important;color:var(--es-white)!important;
  font-family:var(--es-body-font)!important}
.es-cta__btn:hover{background:var(--es-lava)!important}

.es-page-title,.es-group-title,.es-search__h{font-family:var(--es-heading-font)!important;
  color:var(--es-basalt)!important;text-transform:uppercase}
.es-group-title{border-bottom:1px solid var(--es-line)}
.es-page-lead,.es-card__t{color:var(--es-basalt)}
.es-card__k{color:var(--es-lava)}

.es-tile{background:var(--es-basalt)}
.es-tile__label{font-family:var(--es-heading-font);font-weight:400;letter-spacing:.2em}
.es-tile__veil{background:linear-gradient(to top,rgba(63,13,12,.82) 0%,rgba(63,13,12,.25) 50%,rgba(63,13,12,0) 100%)}

.es-venue{border:1px solid var(--es-line);background:var(--es-white)}
.es-venue h3{font-family:var(--es-heading-font);color:var(--es-basalt)}
.es-venue-area{color:var(--es-lava)}
.es-venue a{color:var(--es-basalt);border-bottom-color:var(--es-line)}
.es-venue a:hover{border-bottom-color:var(--es-lava)}
.es-venue-dir{border-bottom:1px solid var(--es-lava)!important;color:var(--es-lava)!important}
.es-map{border:1px solid var(--es-line)}

.es-form-note[data-ok="1"]{color:var(--es-basalt)}
.es-form-note[data-ok="0"]{color:var(--es-lava)}

/* nothing cream or gold survives */
.es-showcase .product-card-info,.es-showcase .product-badges-list{display:none!important}

/* ---- menu controls (set in the admin) --------------------------------- */
.header-navigation-list{justify-content:flex-start!important}
.header-menu-link,.header-menu-text{
  font-family:var(--es-body-font)!important;
  font-size:18px!important;
  letter-spacing:0.04em!important;
  text-transform:none!important}

/* ---- admin-controlled hero banners ------------------------------------ */
.es-hero-section{display:block;width:100%}
.es-hero{position:relative;width:100%;height:clamp(380px,62vh,660px);overflow:hidden;background:var(--es-basalt)}
.es-hero__slides{list-style:none;margin:0;padding:0;height:100%}
.es-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.es-hero__slide.is-active{opacity:1;pointer-events:auto}
.es-hero__media{width:100%;height:100%;object-fit:cover;display:block}
.es-hero__veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(63,13,12,.78) 0%,rgba(63,13,12,.22) 55%,rgba(63,13,12,.05) 100%)}
.es-hero__body{position:absolute;left:0;right:0;bottom:12%;text-align:center;padding:0 22px;color:var(--es-white)}
.es-hero__eyebrow{display:block;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--es-blush);margin-bottom:12px}
.es-hero__h{font-family:var(--es-heading-font);font-size:clamp(26px,4.4vw,52px);font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--es-white);margin:0 0 12px}
.es-hero__p{font-size:15px;line-height:1.7;max-width:620px;margin:0 auto 20px;opacity:.92}
.es-hero__cta{display:inline-block;padding:13px 30px;background:var(--es-white);color:var(--es-signature);
  text-decoration:none;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.es-hero__cta:hover{background:var(--es-blush)}
.es-hero__dots{position:absolute;left:0;right:0;bottom:22px;display:flex;gap:9px;justify-content:center}
.es-hero__dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--es-white);
  background:transparent;cursor:pointer;padding:0}
.es-hero__dot.is-active{background:var(--es-white)}

/* ---- full-bleed bands ---------------------------------------------------
   The theme nests every band inside .container (max-width 1370px), so a
   background set on the band itself stops short of the viewport edges.
   Paint the full-width .section-wrapper instead and clear the inner band. */
.shopify-section-group-footer-group .section-wrapper{background:#1F1905!important}
/* the header's own colour is set further down, where it switches between
   see-through and solid -- do not paint it here as well */
.header-wrapper,.announcement-wrapper,.announcement-bar,
.footer-wrapper,.footer-bottom,.footer{background:transparent!important}
.shopify-section-group-header-group .section-wrapper,
.shopify-section-group-footer-group .section-wrapper{color:#FFFFFF}

/* ---- tiles: square, and not oversized ---------------------------------- */
.es-tiles{max-width:1080px;gap:16px}
.es-tile{aspect-ratio:1/1}
.es-tile__label{bottom:18px;font-size:13px}
@media (max-width:900px){.es-tiles{max-width:620px}}

/* ---- text on the Signature bands -------------------------------------
   The header and footer sit on the signature colour, so every word in them
   must be white. Repoint the scheme variables for those groups rather than
   chasing individual elements — the theme's own rules then come out right. */
html .shopify-section-group-header-group,
html .shopify-section-group-header-group [class*="scheme-"]{
  --text-color:#FFFFFF;
  --heading-color:#FFFFFF;
  --link-color:#FFFFFF;
  --link-hover-color:#EFE8DA;
  --card-heading:#FFFFFF;
  --card-text:#FFFFFF;
  --border-color:rgba(255,255,255,.22);
  --form-input-color:#FFFFFF;
  --form-input-background:transparent;
  --form-input-border:rgba(255,255,255,.45);
  --button-secondary-text:#FFFFFF;
  --button-secondary-border:rgba(255,255,255,.55);
  --button-secondary-background:transparent;
}
.shopify-section-group-header-group,
.shopify-section-group-footer-group,
.shopify-section-group-header-group p,
.shopify-section-group-header-group a,
.shopify-section-group-header-group span,
.shopify-section-group-header-group li,
.shopify-section-group-header-group h1,
.shopify-section-group-header-group h2,
.shopify-section-group-header-group h3,
.shopify-section-group-header-group h4,
.shopify-section-group-header-group h5,
.shopify-section-group-header-group h6,
.shopify-section-group-footer-group p,
.shopify-section-group-footer-group a,
.shopify-section-group-footer-group span,
.shopify-section-group-footer-group li,
.shopify-section-group-footer-group h1,
.shopify-section-group-footer-group h2,
.shopify-section-group-footer-group h3,
.shopify-section-group-footer-group h4,
.shopify-section-group-footer-group h5,
.shopify-section-group-footer-group h6,
.shopify-section-group-footer-group summary{color:#FFFFFF!important}
.shopify-section-group-header-group a:hover,
.shopify-section-group-footer-group a:hover{color:#EFE8DA!important}
.shopify-section-group-footer-group input,
.shopify-section-group-footer-group input::placeholder{color:#FFFFFF!important}
.shopify-section-group-footer-group input::placeholder{opacity:.75}

/* the dropdown panel is white, so its words stay Basalt */
.header-dropdown-list,.drop-down-menu-wrap,.drop-down-submenu-wrap,
.search-drawer,.mobile-menu-wrapper{background:#FFFFFF!important}
.header-dropdown-list a,.drop-down-menu-wrap a,.drop-down-submenu-wrap a,
.header-dropdown-link,.search-drawer a,.search-drawer input,
.mobile-menu-wrapper a,.mobile-menu-link{color:#2F2E33!important}
.header-dropdown-list a:hover,.header-dropdown-link:hover,
.mobile-menu-wrapper a:hover{color:#C4502F!important}

/* variant chips are information, not a control */
.product-variants-list,.product-variants-fieldset{pointer-events:none}
.product-variant-item .product-variant-label{cursor:default}

/* the Where-to-buy button is white-on-Signature inverted: re-assert its
   colour after the blanket "everything in the header is white" rule */
.shopify-section-group-header-group a.es-where-link,
a.es-where-link{color:#1F1905!important;background:#FFFFFF!important;
  border-color:#FFFFFF!important}
.shopify-section-group-header-group a.es-where-link:hover,
a.es-where-link:hover{color:#1F1905!important;background:#EFE8DA!important;
  border-color:#EFE8DA!important}
/* the theme rounds .header-icon to 50px; this button carries that class, so
   pin the radius in every state or it turns into a pill on hover */
.shopify-section-group-header-group a.es-where-link,
a.es-where-link,a.es-where-link:hover,a.es-where-link:focus,
a.es-where-link:active{border-radius:2px!important}

/* ---- menu bar: see-through at the top, solid once it sticks -------------
   Only ONE layer may carry the colour. The wrapper and .header-main are
   stacked, so painting both at 80% compounds to very nearly solid -- which
   is why the bar never looked transparent. The theme puts .transparency-none
   on .header-main the moment the page scrolls; that is the "stuck" state. */
.shopify-section-group-header-group .section-wrapper{background:transparent!important}
.header-main{background:rgba(31,25,5,0.1)!important;
  -webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px);
  transition:background .25s ease}
.header-main.transparency-none{background:#1F1905!important;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* ---- the front-page map: taller, flush against the footer -------------- */
[id*="__map_"]{--media-height:620px!important}
[id*="__map_"] iframe,[id*="__map_"] .map-media,[id*="__map_"] .media{height:620px!important}
[id*="__map_"] .section-wrapper{padding-bottom:0!important;margin-bottom:0!important}
@media (max-width:767px){
  [id*="__map_"]{--media-height:420px!important}
  [id*="__map_"] iframe,[id*="__map_"] .map-media,[id*="__map_"] .media{height:420px!important}
}


/* ---- words that sit on a photograph -------------------------------------
   Slideshow slides and any section header with a background image are
   photographs, but the theme paints their text Basalt -- dark on dark, which
   is unreadable. Repoint the scheme variables for exactly those blocks, so
   every word printed over a picture is white. Scoped by the marker the theme
   itself uses (.background-overlay-image), never applied to plain bands. */
.banner-image-media,
.banner-image-media [class*="scheme-"],
.slideshow-content,
.collection-header:has(> .background-overlay-image),
.collection-header:has(> .background-overlay-image) [class*="scheme-"]{
  --text-color:#FFFFFF;
  --heading-color:#FFFFFF;
  --link-color:#FFFFFF;
  --link-hover-color:#EFE8DA;
}
.banner-image-media .section-heading,
.banner-image-media .section-subheading,
.banner-image-media .slideshow-heading,
.banner-image-media .slideshow-content p,
.banner-image-media .slideshow-content span,
.collection-header:has(> .background-overlay-image) .section-heading,
.collection-header:has(> .background-overlay-image) .section-subheading,
.collection-header:has(> .background-overlay-image) h1,
.collection-header:has(> .background-overlay-image) h2,
.collection-header:has(> .background-overlay-image) h3,
.collection-header:has(> .background-overlay-image) h4,
.collection-header:has(> .background-overlay-image) p,
.collection-header:has(> .background-overlay-image) span{color:#FFFFFF!important}

/* the same problem in the picture-box blocks further down the home page:
   .media-overlay-text marks copy printed straight onto the image */
.collection-block-content-overlay,
.collection-block-content-overlay [class*="scheme-"],
.media-overlay-text{
  --text-color:#FFFFFF;
  --heading-color:#FFFFFF;
  --link-color:#FFFFFF;
  --link-hover-color:#EFE8DA;
}
.collection-block-content-overlay h1,
.collection-block-content-overlay h2,
.collection-block-content-overlay h3,
.collection-block-content-overlay h4,
.collection-block-content-overlay h5,
.collection-block-content-overlay h6,
.collection-block-content-overlay p,
.collection-block-content-overlay span,
.collection-block-content-overlay .section-heading,
.collection-block-content-overlay .section-subheading,
.collection-block-content-overlay .collection-block-icon-text{
  color:#FFFFFF!important;-webkit-text-stroke-color:#FFFFFF!important}


/* ---- words on the solid Signature band ----------------------------------
   Signature #A08F5D is a mid tone. The brand identity is explicit: text on
   Signature is Signature 900, never small white and never Basalt. These rules
   cover the footer (always solid) and the header once it has stuck. */
html .shopify-section-group-footer-group,
html .shopify-section-group-footer-group [class*="scheme-"]{
  --text-color:#FFFFFF;
  --heading-color:#FFFFFF;
  --link-color:#FFFFFF;
  --link-hover-color:#A08F5D;
  --card-heading:#FFFFFF;
  --card-text:#FFFFFF;
  --border-color:rgba(255,255,255,.22);
  --form-input-color:#FFFFFF;
  --form-input-background:transparent;
  --form-input-border:rgba(255,255,255,.45);
  --button-secondary-text:#FFFFFF;
  --button-secondary-border:rgba(255,255,255,.55);
  --button-secondary-background:transparent;
}
.shopify-section-group-footer-group,
.shopify-section-group-footer-group p,
.shopify-section-group-footer-group a,
.shopify-section-group-footer-group span,
.shopify-section-group-footer-group li,
.shopify-section-group-footer-group h1,
.shopify-section-group-footer-group h2,
.shopify-section-group-footer-group h3,
.shopify-section-group-footer-group h4,
.shopify-section-group-footer-group h5,
.shopify-section-group-footer-group h6,
.shopify-section-group-footer-group label,
.shopify-section-group-footer-group .footer-menu-link{color:#FFFFFF!important}

/* the header, once stuck: the brand black, so white words and a Signature
   hover. White on #1F1905 is 18.9:1 -- the mid-tone problem is gone. */
.header-main.transparency-none{
  --text-color:#FFFFFF;
  --heading-color:#FFFFFF;
  --link-color:#FFFFFF;
  --link-hover-color:#A08F5D;
}
.header-main.transparency-none a,
.header-main.transparency-none button,
.header-main.transparency-none span,
.header-main.transparency-none li,
.header-main.transparency-none .header-menu-link,
.header-main.transparency-none .header-menu-text,
.header-main.transparency-none .header-icon,
.header-main.transparency-none svg{color:#FFFFFF!important;fill:currentColor}
.header-main.transparency-none .header-menu-link:hover,
.header-main.transparency-none a:hover{color:#A08F5D!important;text-decoration:none}
/* the Where-to-buy button stays a white chip in both states */
.header-main.transparency-none a.es-where-link{
  color:#1F1905!important;background:#FFFFFF!important;
  border-color:#FFFFFF!important;text-decoration:none}


/* ---- keeping the 10% header readable ------------------------------------
   At 10% the Signature tint contributes almost nothing, so the menu is
   effectively printed straight onto whatever photograph or video is behind
   it -- and that changes per slide and per page. A light frame would leave
   white text invisible. The tint stays exactly as set; a soft dark scrim
   that fades out downwards, plus a faint shadow on the words, guarantees the
   menu stays legible over any image. The scrim is dropped the moment the bar
   goes solid. */
.header-main:not(.transparency-none){
  background-image:linear-gradient(to bottom,
    rgba(31,25,5,.48) 0%, rgba(31,25,5,.18) 62%, rgba(31,25,5,0) 100%)!important}
.header-main:not(.transparency-none) a,
.header-main:not(.transparency-none) button,
.header-main:not(.transparency-none) span,
.header-main:not(.transparency-none) .header-menu-link,
.header-main:not(.transparency-none) .header-menu-text,
.header-main:not(.transparency-none) .header-icon{
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* the white Where-to-buy chip needs no shadow -- it has its own ground */
.header-main:not(.transparency-none) a.es-where-link{text-shadow:none}
.header-main.transparency-none{background-image:none!important}
.header-main.transparency-none a,
.header-main.transparency-none span,
.header-main.transparency-none .header-menu-link{text-shadow:none}

/* The theme slides the bar up out of view (translateY) once you scroll down.
   The menu is meant to stay put, so pin it. */
.header-main,.header-main.transparency-none{transform:none!important}

/* the keyboard "skip to content" link lands on the Signature band, so it
   needs Signature 900 like everything else sitting on that colour */
.skip-to-content-link,.skip-to-content-link:focus{
  background:#1F1905!important;color:#FFFFFF!important}


/* ---- using the identity across the page ---------------------------------
   The brand identity gives each colour a job: Signature leads on buttons,
   boxes and bands; Blush is the panel behind price tables and the Where-to-buy
   cards; Lava is a spark on white, never a surface. These rules put each one
   where the identity says it belongs, instead of leaving the theme's defaults
   showing through. */

/* Signature leads the buttons. Signature is a mid tone, so the label on it is
   Signature 900 (5.5:1), never white. */
.button-primary,.button-solid,.es-cta__btn,
button.button-primary,a.button-primary,
.shopify-section .button-element.button-primary{
  background:#A08F5D!important;border-color:#A08F5D!important;
  color:#1F1905!important}
.button-primary:hover,.button-solid:hover,.es-cta__btn:hover,
a.button-primary:hover,.shopify-section .button-element.button-primary:hover{
  background:#1F1905!important;border-color:#1F1905!important;
  color:#FFFFFF!important}

/* Blush is the panel: the Where-to-buy cards and the price-table stripes */
.es-venue{background:#EFE8DA!important;border-color:rgba(31,25,5,.14)!important}
.es-venue h3{color:#1F1905!important}
.es-venue-area{color:#C4502F!important}
.es-venue p,.es-venue a{color:#2F2E33!important}
.es-venue-web{font-weight:500}
.es-venue-web:hover,.es-venue a:hover{color:#C4502F!important}
.es-pdp-price li:nth-child(odd){background:#EFE8DA!important}
.es-pdp-price li{padding-left:12px;padding-right:12px;border-bottom-color:rgba(31,25,5,.12)!important}

/* Lava stays a spark on white: the price, and a hairline above a heading */
.es-card-price,.es-card__p,.es-pdp-price .es-p,.es-pdp-price.single{color:#C4502F!important}
.es-page-title::after,.es-group-title::after{content:"";display:block;width:54px;height:2px;
  background:#C4502F;margin-top:14px}
.es-group-title{border-bottom-color:rgba(31,25,5,.14)!important}

/* section headings on white carry Basalt, as the identity says */
.es-page-title,.es-search__h{color:#2F2E33!important}


/* ---- inner pages have no photograph behind the bar ----------------------
   The see-through state only works when a picture sits behind the menu. On a
   page that opens on white -- Where to Buy, Cigars, About, a product -- a 10%
   bar leaves white menu text on a near-white strip. Those pages get the solid
   band straight away. .banner-image-media is the theme's own marker for a
   slideshow, so the home page keeps the see-through opening. */
body:not(:has(.banner-image-media)) .header-main,
body:not(:has(.banner-image-media)) .header-main:not(.transparency-none){
  background:#1F1905!important;background-image:none!important;
  -webkit-backdrop-filter:none;backdrop-filter:none}
body:not(:has(.banner-image-media)) .header-main a,
body:not(:has(.banner-image-media)) .header-main button,
body:not(:has(.banner-image-media)) .header-main span,
body:not(:has(.banner-image-media)) .header-main .header-menu-link,
body:not(:has(.banner-image-media)) .header-main .header-menu-text,
body:not(:has(.banner-image-media)) .header-main .header-icon{
  color:#FFFFFF!important;text-shadow:none}
body:not(:has(.banner-image-media)) .header-main a.es-where-link{
  color:#1F1905!important;background:#FFFFFF!important}

/* the theme wraps a button's words in an inner span, and the blanket
   "everything in the footer is white" rule was repainting it white on the
   Signature button (3.19:1). Let the label follow its own button. */
.button-primary .button-text,.button-solid .button-text,
.button-primary > span,.button-solid > span,
.es-cta__btn > span{color:inherit!important}


/* ---- the age gate ------------------------------------------------------
   Nothing of the site may be readable until someone confirms their age, so
   the backdrop blurs and dims everything behind the dialog. The theme ships
   this overlay fully transparent, which left the whole shop legible through
   it. Declining locks the page for good. */
age-verification .backdrop-overlay,
.age-verification-popup .backdrop-overlay{
  background:rgba(31,25,5,.58)!important;
  -webkit-backdrop-filter:blur(18px) saturate(85%);
  backdrop-filter:blur(18px) saturate(85%)}

/* declined: heavier, and the dialog can no longer be dismissed */
age-verification.es-declined .backdrop-overlay{
  background:rgba(31,25,5,.90)!important;
  -webkit-backdrop-filter:blur(30px) saturate(60%);
  backdrop-filter:blur(30px) saturate(60%)}

/* while the gate is up, the page behind must not scroll */
html.es-age-open,html.es-age-open body,
html.es-age-blocked,html.es-age-blocked body{overflow:hidden!important}
/* and once declined it must not be reachable at all */
html.es-age-blocked age-verification{display:block!important;visibility:visible!important;opacity:1!important}


/* ---- the Who We Are dropdown -------------------------------------------
   The panel (.drop-down-menu-wrap) is white, but the blanket "every word in
   the header is white" rules were painting its links white too -- white on
   white. Words on a white panel take Basalt, as the identity says. */
.header-main .header-dropdown-menu a,
.header-main .drop-down-menu-wrap a,
.header-main.transparency-none .header-dropdown-menu a,
.header-main.transparency-none .drop-down-menu-wrap a,
body:not(:has(.banner-image-media)) .header-main .drop-down-menu-wrap a,
.header-dropdown-link{color:#2F2E33!important;text-shadow:none!important}
/* hover for these links is defined once, further down, as Basalt on Blush */
.drop-down-menu-wrap{border-radius:8px;padding:6px 0;
  box-shadow:0 14px 38px rgba(31,25,5,.22)}
.header-dropdown-link{padding:9px 20px!important;display:block}

/* ---- Where to Buy sits under the search --------------------------------- */
.header-buttons-list{flex-direction:column!important;align-items:flex-end!important;
  gap:9px!important;justify-content:center!important}
.header-buttons-list .header-button-item{margin:0!important}
@media (max-width:767px){
  .header-buttons-list{flex-direction:row!important;align-items:center!important;gap:6px!important}
}

/* ---- "View more" and the other small link-buttons -----------------------
   The theme renders these with no padding at all, so the Signature ground
   sat flush against the letters. */
.button-link,.button-small,
.button-element.button-primary.button-link,
.section-header-wrapper .button-element{
  padding:11px 22px!important;border-radius:5%/22%!important}
/* ...but not the line-height of the animated variant.
   That button holds TWO labels inside .button-text -- .button-text-regular
   and .button-text-hovered -- stacked in the same grid cell, and slides
   between them on hover. .button-text never clipped them, so both showed at
   once. The spare copy is simply removed: one label, always, and the slide
   is not worth a stacked-text bug. */
.button-element:not(.button-solid-animated){line-height:1.2!important}
.button-solid-animated{overflow:hidden!important;align-items:center}
.button-solid-animated .button-text-hovered{display:none!important}
.button-solid-animated .button-text{
  line-height:1.2!important;height:auto!important;overflow:hidden!important}
.button-solid-animated .button-text-regular{
  display:block!important;line-height:1.2!important;transform:none!important}
.button-link .button-text,.button-small .button-text{display:inline-block}
.has-view-more .button-element,.section-header-wrapper.has-view-more .button-element{
  margin-left:18px!important}

/* ---- cinematic horizontal reveal ---------------------------------------
   The theme lays the two blocks side by side in a 2x-wide flex row inside an
   overflow:hidden wrapper, but never moves them -- so only the first was ever
   visible. The section is now pinned while it is passed, and the row slides
   across: the front panel leaves to the right and the one behind comes in.
   row-reverse puts the first block on the right so it exits that way. */
.es-cinematic{position:relative}
.es-cinematic > .section-wrapper{position:sticky;top:0;overflow:hidden}
.es-cinematic .collection-blocks{flex-direction:row-reverse!important;
  will-change:transform;transition:none}
@media (prefers-reduced-motion:reduce){
  .es-cinematic{height:auto!important}
  .es-cinematic > .section-wrapper{position:relative}
  .es-cinematic .collection-blocks{transform:none!important}
}

/* ---- room for the bigger menu ------------------------------------------
   The header is a three-column grid (navigation | logo | buttons) fixed at
   580/150/580. At 24px the menu needs ~666px and was wrapping onto a second
   line. Give the navigation the room and take it from the buttons column,
   which now stacks search over Where-to-buy and needs far less width. */
@media (min-width:1100px){
  .header-main .header-wrapper{
    grid-template-columns:minmax(0,1.7fr) auto minmax(0,1fr)!important}
  .header-navigation-list{flex-wrap:nowrap!important;gap:0 26px!important}
  .header-menu-link,.header-menu-text{white-space:nowrap}
}


/* ---- headings in capitals, as the identity requires ---------------------
   "Headings Bellefair, in capitals." The face was already right, but the
   theme's own text-transform was winning, so headings rendered in sentence
   case. Applied to real headings only -- .heading-font is sprinkled on
   product names and small labels too, and those stay as written. */
h1,h2,h3,h4,h5,h6,
.section-heading,.section-subheading,.es-page-title,.es-group-title{
  text-transform:uppercase!important;letter-spacing:.06em!important}
/* The theme hangs .h1-.h6 on body copy as well as on headings -- the About
   page has an 890-character paragraph marked .h6 -- so those classes are
   deliberately NOT in the rule above, and long-form blocks opt out here. */
.media-sentence,.media-sentence *,
.rte,.rte *,.page-content p,.text,.description{
  text-transform:none!important;letter-spacing:normal!important}
.product-title,.product-title.heading-font,.es-card__t,
.product-card-info .product-title,.header-dropdown-link,
.breadcrumb,.breadcrumb a{text-transform:none!important;letter-spacing:normal!important}

/* body copy on the written pages: Poppins 300-500, not 12px */
.page-content p,.rte p,.page-content li,.rte li{font-size:15px!important;line-height:1.75!important}


/* ---- the Who We Are dropdown, hover included ---------------------------
   The theme's own rule is
     .header-dropdown-link, [open], :hover { color:var(--submenu-hover-color);
                                             background:var(--submenu-color) }
   -- one selector covering the resting AND hovered state, both painted from
   theme variables that are dark. That is why hovering gave dark text on a
   dark pill. The panel is white, so: nothing behind the link at rest, Blush
   behind it on hover, Basalt on it either way (11.1:1 on Blush). */
.header-dropdown-link,
.header-main .header-dropdown-link{
  background:transparent!important;border-color:transparent!important;
  color:#2F2E33!important;border-radius:6px!important}
.header-dropdown-link:hover,.header-dropdown-link[open],
.header-dropdown-link:focus-visible,
.header-main .header-dropdown-link:hover{
  background:#EFE8DA!important;border-color:#EFE8DA!important;
  color:#2F2E33!important}
.drop-down-menu-wrap{--submenu-background:#FFFFFF;--submenu-color:#EFE8DA;
  --submenu-hover-color:#2F2E33}


/* ---- the Luxury Accessories panel --------------------------------------
   It sits on a dark photograph, so its heading has to be white -- the theme
   painted it Basalt. The four S.T. Dupont lighters below it use our own card,
   with white wording for the same reason. */
.collection-blocks .section-heading,
.collection-block .section-heading,
.collection-block-inner .section-heading{color:#FFFFFF!important}

.es-dupont-grid{display:grid!important;gap:22px;
  grid-template-columns:repeat(4,1fr);width:100%}
.es-dupont-grid .es-card{gap:9px}
.es-dupont-grid .es-card img{background:#FFFFFF;border-radius:4px;
  aspect-ratio:1;object-fit:contain;padding:14px}
.es-card--onphoto .es-card__t{color:#FFFFFF!important;font-size:13px;line-height:1.45}
.es-card--onphoto .es-card__p{color:#FFFFFF!important;font-weight:600}
.es-card--onphoto:hover .es-card__t{color:#A08F5D!important}
@media (max-width:900px){.es-dupont-grid{grid-template-columns:repeat(2,1fr);gap:14px}}


/* ---- no filtering anywhere ----------------------------------------------
   Nothing is sold here, so sorting by price and filtering by availability
   are meaningless. The whole filter column, its drawer and its top bar are
   removed, and the product list is given the full width the column leaves. */
.filters-column,
.main-collection-filter-wrapper,
.filters-topbar,
.filters-drawer-head,
filter-faced-form,
filter-toggler,
.filters-control-btn,
.collection-filter,
.filter-drawer-close,
[data-collection-filters-wrapper] .filters-column,
[data-filters-sidebar]{display:none!important}

.main-collection-row.has-filters,
.main-collection-row{display:block!important}
.main-collection-row .main-collection-col,
.main-collection-list{width:100%!important;max-width:100%!important;
  margin-left:0!important;flex:1 1 100%!important}


/* ---- the band above the map, half again as tall ------------------------- */
[id*="scrollable_marquee"]{--media-height:1125px!important;height:1125px!important}
[id*="scrollable_marquee"] img,
[id*="scrollable_marquee"] .media,
[id*="scrollable_marquee"] .media-wrapper{height:1125px!important}
@media (max-width:767px){
  [id*="scrollable_marquee"]{--media-height:520px!important;height:520px!important}
  [id*="scrollable_marquee"] img,
  [id*="scrollable_marquee"] .media,
  [id*="scrollable_marquee"] .media-wrapper{height:520px!important}
}


/* ---- the age gate's two buttons, as a matched pair ----------------------
   Confirm and No are the same size and shape already, but the theme paints
   a WHITE background on the label span inside the secondary one, which
   showed as a white panel sitting on the gold. Both labels are transparent
   now, so the two read as one pair. */
age-verification .button-element,
.age-verification-popup .button-element{
  background:#A08F5D!important;border:1px solid #A08F5D!important;
  color:#1F1905!important;border-radius:6px!important;
  padding:14px 22px!important;min-height:0!important}
/* the label span is styled .button by the theme, which gives it its own
   1px border and a 100px radius -- a pill drawn inside the real button */
age-verification .button-element .button-text,
age-verification .button-element span,
.age-verification-popup .button-element .button-text,
.age-verification-popup .button-element span{
  background:transparent!important;color:#1F1905!important;
  border:0!important;border-radius:0!important;padding:0!important}
/* No is the quieter of the two: same shape, outlined rather than filled */
age-verification .button-secondary,
.age-verification-popup .button-secondary{
  background:transparent!important;border-color:#A08F5D!important}
age-verification .button-element:hover,
.age-verification-popup .button-element:hover{
  background:#1F1905!important;border-color:#1F1905!important}
age-verification .button-element:hover span,
.age-verification-popup .button-element:hover span{color:#FFFFFF!important}


/* ---- View more: three quarters of the height it had --------------------- */
.button-solid-animated,
.section-header-wrapper .button-element.button-solid-animated{
  height:28px!important;min-height:0!important;
  padding:0 16px!important;align-items:center!important}
.button-solid-animated .button-icon,
.button-solid-animated .svg-wrapper,
.button-solid-animated svg{height:13px!important;width:auto!important}
.button-solid-animated .button-text,
.button-solid-animated .button-text-regular{line-height:1!important}

/* ---- the age gate's labels: centred, and a little heavier ---------------
   Poppins is loaded at 300-500-600, so 600 is as bold as it goes without the
   browser faking a weight. Size is unchanged. */
age-verification .button-element,
.age-verification-popup .button-element{
  display:flex!important;align-items:center!important;
  justify-content:center!important;text-align:center!important}
age-verification .button-element .button-text,
age-verification .button-element span,
.age-verification-popup .button-element .button-text,
.age-verification-popup .button-element span{
  display:flex!important;align-items:center!important;
  justify-content:center!important;width:100%;
  line-height:1!important;font-weight:600!important}


/* ---- button labels are one line, full stop ------------------------------
   The theme writes its labels across several source lines:
       <span class="button button-text">
         View more
       </span>
   and something in its own CSS stops that whitespace collapsing, so the
   leading newline renders as a blank first line and the words drop onto a
   second one that spills out of the box. nowrap collapses it and pins every
   label to a single line, whichever button variant it is. */
.button-element .button-text,
.button-element .button,
.button-text-regular,
.button-text-hovered,
a.button-element > span,
button.button-element > span{
  white-space:nowrap!important;
  line-height:1.2!important;
  overflow:hidden!important}


/* ---- the real duplicate: a ::before carrying the label again ------------
   The theme puts a SECOND copy of the wording in a pseudo-element --
       .button-text::before { content:"View more"; position:absolute;
                              transform:translateY(1em) }
   -- and slides it up on hover. It is drawn by CSS, not markup, which is why
   hiding elements never touched it and why it kept coming back. Removing the
   pseudo-element is the only thing that actually removes the second line. */
.button-element .button-text::before,
.button-element .button-text::after,
.button-element .button::before,
.button-element .button::after,
a.button-element > span::before,
button.button-element > span::before{
  content:none!important;display:none!important}


/* ---- phones: one card at a time, filling the width ----------------------
   The card rows are already native horizontal scrollers, but each card was
   293px inside a 345px track, so the next one peeked in at the edge and
   nothing lined up. One card now fills the track and the row snaps, so a
   swipe moves exactly one card. */
@media (max-width:767px){
  /* the theme pins the track to repeat(auto-fill, minmax(85%, 1fr)), which
     is what made every card 85% of the screen with the next one peeking in.
     Clearing the template lets grid-auto-columns take over. */
  .featured-collection-list.mobile-swipe,
  .collection-block-grid.mobile-swipe,
  .collection-list.mobile-swipe{
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:100%!important;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    gap:14px!important}
  .featured-collection-list.mobile-swipe > *,
  .collection-block-grid.mobile-swipe > *,
  .collection-list.mobile-swipe > *{
    width:100%!important;max-width:100%!important;
    scroll-snap-align:center;scroll-snap-stop:always}
  /* the card's picture fills its card rather than sitting in a letterbox */
  .featured-collection-item .media,
  .featured-collection-item .media-wrapper{width:100%!important}
  .featured-collection-item img{width:100%!important;object-fit:cover!important}

  /* headings in these bands read centred on a narrow screen */
  .featured-collection-wrapper .section-header,
  .featured-collection-wrapper .section-header-wrapper,
  .collection-block-inner .section-header,
  .section-header-wrapper.has-view-more{text-align:center!important}
  .section-header-wrapper.has-view-more{
    display:flex!important;flex-direction:column!important;
    align-items:center!important;gap:12px!important}
  .section-header-wrapper.has-view-more .button-element{margin-left:0!important}
}


/* ---- phones: the cinematic band stacks instead of sliding ---------------
   Side by side needs two screen widths; on a phone the frame was 760px wide
   inside a 375px screen, so the first panel sat off to the right and the
   whole thing was cut. The panels stack and each takes the full width -- the
   horizontal reveal is a desktop idea. */
@media (max-width:767px){
  .es-cinematic{height:auto!important}
  .es-cinematic > .section-wrapper{position:relative!important;height:auto!important}
  .es-cinematic .collection-wrapper,
  .collection-wrapper{height:auto!important}
  .es-cinematic .collection-blocks,
  .collection-blocks{
    position:static!important;display:flex!important;
    flex-direction:column!important;width:100%!important;
    transform:none!important}
  .es-cinematic .collection-block,
  .collection-blocks > .collection-block{width:100%!important;max-width:100%!important}
  .es-dupont-grid{grid-template-columns:repeat(2,1fr)!important}
}


/* ---- phones: the banner shows the whole frame --------------------------
   The media is 1600x900, but the theme forces --media-height:600px, so a
   16:9 picture was being squeezed into a 375x600 portrait box and cropped
   hard on both sides -- you only ever saw the middle of it. Give the box the
   media's own ratio and the full frame fits the screen width, uncropped. */
@media (max-width:767px){
  [class*="hero-carousel"] .media,
  [class*="hero-carousel"] .media.d-media-fixed,
  .banner-image-media .media,
  .banner-image-media video-media,
  .banner-image-media .deferred-media,
  .main-slider-banner .media{
    --media-height:auto!important;height:auto!important;
    min-height:0!important;aspect-ratio:16/9!important}
  .banner-image-media img,
  .banner-image-media video,
  [class*="hero-carousel"] img,
  [class*="hero-carousel"] video{
    width:100%!important;height:100%!important;object-fit:cover!important}
  .main-slider-banner,
  [class*="hero-carousel"] .swiper,
  .banner-image-media{height:auto!important;min-height:0!important}
  /* the wording sits under the picture rather than on top of a short frame */
  .banner-image-media .slideshow-content-wrapper{
    position:static!important;width:100%!important;padding:18px 16px 24px!important}
  .banner-image-media .slideshow-content{padding:0!important}
}