/* El Septimo Dubai — "Basalt & Pomegranate" brand identity (10 Oct 2026).
   Never gold, never cream. White is the ground; Pomegranate 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-pomegranate:#3F0D0C;
  --es-white:#FFFFFF;
  --es-basalt:#2F2E33;
  --es-lava:#C4502F;
  --es-blush:#F3DEE2;
  --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-pomegranate);
  --corners-bottom-background:var(--es-pomegranate);
  --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-pomegranate);
  --button-background-hover:var(--es-lava);
  --button-background-gradient:var(--es-pomegranate);
  --button-text:var(--es-white);
  --button-text-hover:var(--es-white);
  --button-border:var(--es-pomegranate);
  --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-pomegranate);
  --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-pomegranate);
  --backdrop-overlay-background:rgba(47,46,51,.55);

  --sale-badge-background:var(--es-pomegranate);      --sale-badge-text:var(--es-white);
  --soldout-badge-background:var(--es-basalt);        --soldout-badge-text:var(--es-white);
  --custom-badge-background:var(--es-pomegranate);    --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-pomegranate);
  --preloader-text:var(--es-white);
  --scroll-top-background:var(--es-pomegranate);
  --scroll-top-border:var(--es-pomegranate);
  --scroll-top-color:var(--es-white);
  --slider-arrow-color:var(--es-basalt);
  --slider-arrow-bg:var(--es-white);
  --animation-color:var(--es-pomegranate);
  --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 is the signature colour */
.header-wrapper,.header,.site-header,.announcement-bar,.announcement{
  background:var(--es-pomegranate)!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 */
.footer,.footer-bottom{background:var(--es-pomegranate)!important;color:var(--es-white)!important}
.footer a,.footer-bottom a,.footer p,.footer h2,.footer h3,.footer h4,.footer h5,.footer h6{color:var(--es-white)!important}
.footer a:hover{color:var(--es-blush)!important}

/* ---- our own components ------------------------------------------------ */
.es-where-link{background:var(--es-white)!important;border:1px solid var(--es-white)!important;
  color:var(--es-pomegranate)!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-pomegranate)!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-pomegranate)!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:12px!important;
  letter-spacing:0.08em!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-pomegranate);
  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-header-group .section-wrapper,
.shopify-section-group-footer-group .section-wrapper,
.header-main{background:#3F0D0C!important}
.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 Pomegranate 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-footer-group,
html .shopify-section-group-header-group [class*="scheme-"],
html .shopify-section-group-footer-group [class*="scheme-"]{
  --text-color:#FFFFFF;
  --heading-color:#FFFFFF;
  --link-color:#FFFFFF;
  --link-hover-color:#F3DEE2;
  --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:#F3DEE2!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-Pomegranate 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:#3F0D0C!important;background:#FFFFFF!important;
  border-color:#FFFFFF!important}
.shopify-section-group-header-group a.es-where-link:hover,
a.es-where-link:hover{color:#3F0D0C!important;background:#F3DEE2!important;
  border-color:#F3DEE2!important}

/* ---- menu bar at 80% (set in the admin: Theme -> header opacity) -------- */
.shopify-section-group-header-group .section-wrapper,
.header-main{background:rgba(63,13,12,0.8)!important;
  -webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px)}

/* ---- 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}
}