/* Theme the site chrome: Elementor header/footer and WooCommerce.
 *
 * The header and footer are Elementor theme-builder templates (629 / 643) whose
 * colours are baked into post-629.css and post-643.css as literal hex. There is
 * no token to redefine, so dark mode has to override those declarations - hence
 * the !important here, which is confined to this file and to the dark blocks.
 *
 * Light mode gets one deliberate change: the page ground moves off stark white
 * to --ground, leaving the white header floating above it.
 */

/* ---------- light: ground + Woo surfaces --------------------------------- */

body,
.site-main,
.page-content,
main.site-main{background:var(--ground)}

/* ---------- header / footer ---------------------------------------------- */

.elementor-location-header{position:relative;z-index:50}

:root[data-theme="dark"] .elementor-location-header,
:root[data-theme="dark"] .elementor-location-header>.elementor-section,
:root[data-theme="dark"] .elementor-location-header>.e-con,
:root[data-theme="dark"] .elementor-location-header .elementor-widget-wrap,
:root[data-theme="dark"] .elementor-location-footer,
:root[data-theme="dark"] .elementor-location-footer>.elementor-section,
:root[data-theme="dark"] .elementor-location-footer>.e-con{
  background-color:var(--surface)!important;
  background-image:none!important;
}
:root[data-theme="dark"] .elementor-location-header .elementor-nav-menu a,
:root[data-theme="dark"] .elementor-location-footer a,
:root[data-theme="dark"] .elementor-location-footer,
:root[data-theme="dark"] .elementor-location-footer p,
:root[data-theme="dark"] .elementor-location-footer li,
:root[data-theme="dark"] .elementor-location-footer h1,
:root[data-theme="dark"] .elementor-location-footer h2,
:root[data-theme="dark"] .elementor-location-footer h3,
:root[data-theme="dark"] .elementor-location-footer h4{color:var(--ink)!important}
:root[data-theme="dark"] .elementor-location-header .elementor-nav-menu a:hover,
:root[data-theme="dark"] .elementor-location-footer a:hover{color:var(--brand-on)!important}
:root[data-theme="dark"] .elementor-location-header .elementor-nav-menu--dropdown,
:root[data-theme="dark"] .elementor-location-header .sub-menu{
  background-color:var(--surface-2)!important;border:1px solid var(--line);
}
:root[data-theme="dark"] .elementor-menu-toggle{color:var(--ink)!important;background:transparent!important}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .elementor-location-header,
  :root:not([data-theme="light"]) .elementor-location-header>.elementor-section,
  :root:not([data-theme="light"]) .elementor-location-header>.e-con,
  :root:not([data-theme="light"]) .elementor-location-header .elementor-widget-wrap,
  :root:not([data-theme="light"]) .elementor-location-footer,
  :root:not([data-theme="light"]) .elementor-location-footer>.elementor-section,
  :root:not([data-theme="light"]) .elementor-location-footer>.e-con{
    background-color:var(--surface)!important;
    background-image:none!important;
  }
  :root:not([data-theme="light"]) .elementor-location-header .elementor-nav-menu a,
  :root:not([data-theme="light"]) .elementor-location-footer a,
  :root:not([data-theme="light"]) .elementor-location-footer,
  :root:not([data-theme="light"]) .elementor-location-footer p,
  :root:not([data-theme="light"]) .elementor-location-footer li,
  :root:not([data-theme="light"]) .elementor-location-footer h1,
  :root:not([data-theme="light"]) .elementor-location-footer h2,
  :root:not([data-theme="light"]) .elementor-location-footer h3,
  :root:not([data-theme="light"]) .elementor-location-footer h4{color:var(--ink)!important}
  :root:not([data-theme="light"]) .elementor-location-header .elementor-nav-menu--dropdown,
  :root:not([data-theme="light"]) .elementor-location-header .sub-menu{
    background-color:var(--surface-2)!important;border:1px solid var(--line);
  }
  :root:not([data-theme="light"]) .elementor-menu-toggle{color:var(--ink)!important;background:transparent!important}
}

/* ---------- WooCommerce --------------------------------------------------- */

.woocommerce,
.woocommerce-page{color:var(--ink);font-family:var(--f-body)}
.woocommerce h1,.woocommerce h2,.woocommerce h3,
.woocommerce-page h1,.woocommerce-page h2,.woocommerce-page h3{font-family:var(--f-display);color:var(--ink)}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content,
.woocommerce-order,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce ul.order_details{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--ink);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{border-color:var(--line)!important;color:var(--ink-2)}
.woocommerce table.shop_table thead th{color:var(--ink);background:var(--surface-2)}
.woocommerce table.shop_table .product-name a,
.woocommerce-MyAccount-navigation a{color:var(--ink)}
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message{border-top-color:var(--brand)}
.woocommerce .woocommerce-error{background:var(--brand-wash);border:1px solid var(--brand);border-radius:var(--r);color:var(--ink)}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-page input[type=text],
.woocommerce-page input[type=email],
.woocommerce-page input[type=tel],
.woocommerce-page input[type=password],
.woocommerce-page input[type=number]{
  background:var(--surface)!important;
  color:var(--ink)!important;
  border:1.5px solid var(--line-2)!important;
  border-radius:var(--r-sm)!important;
  padding:12px 13px!important;
  min-height:50px;
  font-family:var(--f-body);font-size:16px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-page input:focus,
.woocommerce form .form-row select:focus{outline:3px solid var(--focus);outline-offset:1px}
.woocommerce form .form-row label,
.woocommerce-page label{color:var(--ink-2);font-weight:600;font-size:14.5px}
.woocommerce .select2-dropdown{background:var(--surface);border-color:var(--line);color:var(--ink)}
.woocommerce .select2-results__option--highlighted{background:var(--brand)!important;color:#fff!important}

.woocommerce #payment,
.woocommerce-checkout #payment{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.woocommerce #payment div.payment_box{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.woocommerce #payment div.payment_box::before{display:none}
.woocommerce #payment ul.payment_methods{border-bottom-color:var(--line)}
.woocommerce #payment ul.payment_methods li label{color:var(--ink)}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order{
  font-family:var(--f-body);font-weight:600;font-size:16.5px;
  background:var(--brand)!important;color:#fff!important;
  border-radius:var(--r-sm)!important;border:0!important;
  padding:15px 26px!important;min-height:52px;line-height:1.2;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover{background:var(--brand-h)!important}
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"]{
  background:var(--surface)!important;color:var(--ink)!important;
  border:1.5px solid var(--line-2)!important;
}
.woocommerce .price,
.woocommerce span.amount,
.woocommerce bdi{color:var(--ink);font-variant-numeric:tabular-nums}
.woocommerce del,.woocommerce del span.amount,.woocommerce del bdi{color:var(--ink-3)}
.woocommerce ins,.woocommerce ins span.amount{background:transparent;color:var(--ink)}

/* side cart */
.elementor-menu-cart__main{background:var(--surface)!important;color:var(--ink)}
.elementor-menu-cart__main .widget_shopping_cart_content,
.elementor-menu-cart__products,
.elementor-menu-cart__footer-buttons{color:var(--ink)}
.elementor-menu-cart__product{border-color:var(--line)!important}
.elementor-menu-cart__product-name a,
.elementor-menu-cart__product-price{color:var(--ink)!important}
.elementor-menu-cart__close-button{color:var(--ink)!important}

/* Ultimate Member */
.um,.um-form input[type=text],.um-form input[type=email],.um-form input[type=password]{
  font-family:var(--f-body);
}
.um .um-form input[type=text],
.um .um-form input[type=email],
.um .um-form input[type=password],
.um .um-form input[type=tel],
.um .um-form textarea,
.um .um-form select{
  background:var(--surface)!important;color:var(--ink)!important;
  border:1.5px solid var(--line-2)!important;border-radius:var(--r-sm)!important;
}
.um .um-form .um-field-label label,.um .um-form label{color:var(--ink-2)!important}
.um .um-col-alt,.um .um-center{color:var(--ink-2)}
.um a.um-link,.um .um-link{color:var(--brand-on)!important}
.um .um-button,.um input[type=submit].um-button{
  background:var(--brand)!important;border-radius:var(--r-sm)!important;
  font-family:var(--f-body);font-weight:600;
}
.um .um-button:hover{background:var(--brand-h)!important}

/* posts/blog fallback so nothing is stranded on the old white */
.entry-content,.post-content{color:var(--ink)}
.entry-content a,.post-content a{color:var(--brand-on)}

/* Elementor generic panels that would otherwise stay white in dark mode */
:root[data-theme="dark"] .elementor-widget-container>.elementor-toggle .elementor-tab-content,
:root[data-theme="dark"] .elementor-accordion .elementor-tab-content,
:root[data-theme="dark"] .elementor-toggle .elementor-tab-title{
  background-color:var(--surface)!important;color:var(--ink)!important;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .elementor-widget-container>.elementor-toggle .elementor-tab-content,
  :root:not([data-theme="light"]) .elementor-accordion .elementor-tab-content,
  :root:not([data-theme="light"]) .elementor-toggle .elementor-tab-title{
    background-color:var(--surface)!important;color:var(--ink)!important;
  }
}

/* ---------- third-party widgets that ship their own light colours --------- */
/* Essential Addons breadcrumbs, data tables and accordions paint themselves
 * white from the plugin stylesheet, so there is no post CSS for the generator
 * to catch. Handled once here rather than per page. */

.eael-breadcrumbs{background:transparent!important;color:var(--ink-2)!important}
.eael-breadcrumbs a{color:var(--ink-2)!important}
.eael-breadcrumbs a:hover{color:var(--brand-on)!important}
.eael-breadcrumbs .eael-current{color:var(--ink)!important}

.eael-data-table-wrap,.eael-data-table{background:var(--surface)!important;color:var(--ink)!important}
.eael-data-table thead th{background:var(--surface-2)!important;color:var(--ink)!important;border-color:var(--line)!important}
.eael-data-table tbody td,.eael-data-table tbody th{background:transparent!important;color:var(--ink-2)!important;border-color:var(--line)!important}
.eael-data-table tbody tr:nth-child(2n+1) td{background:var(--surface-2)!important}

.eael-accordion-list,.eael-tabs-content,.eael-tab-inline-icon{background:var(--surface)!important;color:var(--ink)!important}
.eael-accordion-header,.eael-tab-item-trigger{background:var(--surface-2)!important;color:var(--ink)!important;border-color:var(--line)!important}

/* GTranslate switcher sits above the header and is unstyled by the theme. */
.gtranslate_wrapper select,.gt_selector{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important}

/* A variation selector with one option is friction, not choice. The form still
 * submits - only the row is hidden. See as_preselect_only_variation(). */
body.as-single-variation .variations_form table.variations,
body.as-single-variation .variations_form .reset_variations{display:none!important}
body.as-single-variation .variations_form .single_variation_wrap .woocommerce-variation-price{margin-bottom:14px}
body.as-single-variation .woocommerce-variation-description{margin-bottom:10px}

/* ---------- header fit ---------------------------------------------------- */
/* Eight top-level items wrapped onto a second row at 1440px. Tightening the
 * per-item padding buys the space back without dropping a link or shrinking the
 * logo, which is the site's strongest recognition cue. */
@media (min-width:1025px){
  .elementor-location-header .elementor-nav-menu--main .elementor-item{
    padding-left:11px!important;padding-right:11px!important;font-size:15.5px!important;
  }
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-item,
  .elementor-location-header .elementor-nav-menu--main .sub-menu .elementor-item{
    padding-left:16px!important;padding-right:16px!important;
  }
}

/* ---------- archive + widget contrast in dark ----------------------------- */
/* Elementor's post and product loops, the footer social row and the theme's own
   link colour all paint from literals the token layer cannot reach. */

:root[data-theme="dark"] .elementor-post__title,
:root[data-theme="dark"] .elementor-post__title a,
:root[data-theme="dark"] .woocommerce ul.products li.product .woocommerce-loop-product__title,
:root[data-theme="dark"] .woocommerce ul.products li.product h2,
:root[data-theme="dark"] .elementor-pagination .page-numbers{color:var(--ink)!important}
:root[data-theme="dark"] .elementor-post__excerpt,
:root[data-theme="dark"] .elementor-post__meta-data{color:var(--ink-2)!important}
:root[data-theme="dark"] .elementor-post__read-more,
:root[data-theme="dark"] .woocommerce ul.products li.product .price{color:var(--brand-on)!important}
:root[data-theme="dark"] .elementor-post,
:root[data-theme="dark"] .woocommerce ul.products li.product{background:var(--surface)!important}
:root[data-theme="dark"] .elementor-social-icons-wrapper .elementor-social-icon{
  background-color:var(--surface-2)!important;color:var(--ink)!important;
}
:root[data-theme="dark"] .skip-link,
:root[data-theme="dark"] .woocommerce-LostPassword a,
:root[data-theme="dark"] a.woocommerce-LostPassword{color:var(--brand-on)!important}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .elementor-post__title,
  :root:not([data-theme="light"]) .elementor-post__title a,
  :root:not([data-theme="light"]) .woocommerce ul.products li.product .woocommerce-loop-product__title,
  :root:not([data-theme="light"]) .woocommerce ul.products li.product h2,
  :root:not([data-theme="light"]) .elementor-pagination .page-numbers{color:var(--ink)!important}
  :root:not([data-theme="light"]) .elementor-post__excerpt,
  :root:not([data-theme="light"]) .elementor-post__meta-data{color:var(--ink-2)!important}
  :root:not([data-theme="light"]) .elementor-post__read-more,
  :root:not([data-theme="light"]) .woocommerce ul.products li.product .price{color:var(--brand-on)!important}
  :root:not([data-theme="light"]) .elementor-post,
  :root:not([data-theme="light"]) .woocommerce ul.products li.product{background:var(--surface)!important}
  :root:not([data-theme="light"]) .elementor-social-icons-wrapper .elementor-social-icon{
    background-color:var(--surface-2)!important;color:var(--ink)!important;
  }
  :root:not([data-theme="light"]) .skip-link,
  :root:not([data-theme="light"]) .woocommerce-LostPassword a{color:var(--brand-on)!important}
}

/* Footer text.
 * The footer now sits on the page ground, not on black, so its colours have to
 * come from the token set like everything else. The theme's own #6D6D6D read at
 * 3.9:1 against the light ground - close enough to look fine and still fail. */
.elementor-location-footer,
.elementor-location-footer p,
.elementor-location-footer li,
.elementor-location-footer span{color:var(--ink-2)}
.elementor-location-footer h1,.elementor-location-footer h2,
.elementor-location-footer h3,.elementor-location-footer h4,
.elementor-location-footer h5,.elementor-location-footer h6{color:var(--ink)}
.elementor-location-footer a:not(.elementor-social-icon){color:var(--ink-2)}
.elementor-location-footer a:not(.elementor-social-icon):hover{color:var(--brand-on)}
.elementor-location-footer .elementor-social-icon{background-color:var(--surface-2)!important;color:var(--ink)!important}

/* Elementor writes the excerpt colour per widget id, which outranks the generic
   .elementor-post__excerpt rule. Target the paragraph itself. */
:root[data-theme="dark"] .elementor-post__excerpt,
:root[data-theme="dark"] .elementor-post__excerpt p,
:root[data-theme="dark"] .elementor-posts .elementor-post__excerpt p{color:var(--ink-2)!important}
:root[data-theme="dark"] .eael-breadcrumbs,
:root[data-theme="dark"] .eael-breadcrumbs__content,
:root[data-theme="dark"] .eael-breadcrumbs__prefix{background:transparent!important;background-color:transparent!important}
:root[data-theme="dark"] .elementor-menu-cart__toggle .elementor-button-text,
:root[data-theme="dark"] .elementor-menu-cart__toggle .woocommerce-Price-amount{color:var(--ink-2)!important}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .elementor-post__excerpt,
  :root:not([data-theme="light"]) .elementor-post__excerpt p,
  :root:not([data-theme="light"]) .elementor-posts .elementor-post__excerpt p{color:var(--ink-2)!important}
  :root:not([data-theme="light"]) .eael-breadcrumbs,
  :root:not([data-theme="light"]) .eael-breadcrumbs__content,
  :root:not([data-theme="light"]) .eael-breadcrumbs__prefix{background:transparent!important;background-color:transparent!important}
  :root:not([data-theme="light"]) .elementor-menu-cart__toggle .elementor-button-text,
  :root:not([data-theme="light"]) .elementor-menu-cart__toggle .woocommerce-Price-amount{color:var(--ink-2)!important}
}
/* The cart toggle's grey reads at 4.30 on the black light-mode header too. */
.elementor-location-header .elementor-menu-cart__toggle .elementor-button-text,
.elementor-location-header .elementor-menu-cart__toggle .woocommerce-Price-amount{color:#cfd6da}
.eael-breadcrumbs__content{background:transparent}

/* The cart toggle's own colour sits on the button element, not the inner span. */
.elementor-location-header .elementor-menu-cart__toggle_button,
.elementor-location-header .elementor-menu-cart__toggle a,
.elementor-location-header .elementor-menu-cart__toggle .elementor-button{color:#cfd6da!important}
:root[data-theme="dark"] .elementor-location-header .elementor-menu-cart__toggle_button,
:root[data-theme="dark"] .elementor-location-header .elementor-menu-cart__toggle a{color:var(--ink-2)!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .elementor-location-header .elementor-menu-cart__toggle_button,
  :root:not([data-theme="light"]) .elementor-location-header .elementor-menu-cart__toggle a{color:var(--ink-2)!important}
}

/* ---------- theme toggle on small screens --------------------------------- */
/* The header's right column stacks the cart absolutely on mobile, so inserting
   the toggle as a sibling put both at the same x and pushed the control 63px off
   the right edge. Anchor it to the header itself, clear of the burger and cart,
   and shrink the buttons to suit a thumb rather than a pointer. */
@media (max-width:1024px){
  .elementor-location-header{position:relative}
  .as-theme-slot{
    position:absolute;right:96px;top:50%;transform:translateY(-50%);
    margin:0;z-index:60;
  }
  .as-theme button{width:28px;height:26px}
  .as-theme svg{width:14px;height:14px}
}
@media (max-width:400px){
  .as-theme-slot{right:88px}
  .as-theme button{width:26px;height:25px}
}

/* The archive template opens with an empty section where a title once sat. */
.elementor-4890 .elementor-element.elementor-element-5867195d{display:none!important}
.as-bloghead{padding:clamp(40px,5vw,64px) 0 clamp(20px,2.5vw,30px);background:var(--ground)}
.as-bloghead h1{font-size:clamp(34px,4.6vw,52px)}
.as-bloghead .as-lead{max-width:52ch}

/* ---------- dropdown menus: belt and braces ------------------------------- */
/* Elementor paints sub-item links #33373d from the widget's own CSS. That is
 * unreadable on the dark panel and it is the one part of the nav a contrast
 * sweep misses, because a closed dropdown has no layout box. Stated once here
 * for every theme state and every link state, at a specificity Elementor's
 * per-widget rules cannot beat. */

.elementor-location-header .elementor-nav-menu--dropdown a,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item,
.elementor-location-header ul.sub-menu a,
.elementor-location-header ul.sub-menu a.elementor-sub-item{color:var(--ink)!important}
.elementor-location-header .elementor-nav-menu--dropdown a:hover,
.elementor-location-header .elementor-nav-menu--dropdown a:focus,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-location-header ul.sub-menu a:hover,
.elementor-location-header ul.sub-menu a:focus,
.elementor-location-header ul.sub-menu a.elementor-item-active{
  color:var(--brand-on)!important;background-color:var(--surface-3)!important;
}
.elementor-location-header .elementor-nav-menu--dropdown,
.elementor-location-header ul.sub-menu{
  background-color:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.elementor-location-header ul.sub-menu li>a{padding-top:11px;padding-bottom:11px}
/* Top-level items need the same treatment in light mode, where the header is black. */
.elementor-location-header .elementor-nav-menu--main>li>a{color:#f2f4f6!important}
.elementor-location-header .elementor-nav-menu--main>li>a:hover,
.elementor-location-header .elementor-nav-menu--main>li>a.elementor-item-active{color:#ff8a8f!important}

/* The footer's bottom strip is painted black by the Elementor template while the
   rest of the footer now sits on the page ground - so the copyright links were
   dark-on-black. Bring the strip onto the token set with everything else. */
.elementor-location-footer > .elementor-section[style],
.elementor-location-footer > .elementor-section{background-color:var(--surface-2)!important}
.elementor-location-footer > .elementor-section:last-child{
  border-top:1px solid var(--line);
}

/* The copyright line kept the white it needed when the strip was black, and the
   current-page footer link used raw brand red, which lands at 4.37 on the light
   ground - just under the 4.5 small-text threshold. Both come from the tokens. */
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor *,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title,
.elementor-location-footer .elementor-widget-copyright,
.elementor-location-footer .elementor-widget-copyright *{color:var(--ink-2)!important}
.elementor-location-footer a.elementor-item-active,
.elementor-location-footer li.current-menu-item > a,
.elementor-location-footer li.current_page_item > a{color:var(--brand-on)!important}

/* Elementor sets footer nav links per widget id, which outranks the generic
   footer rule. 4.43:1 is the kind of near-miss that looks fine and still fails. */
.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu a.elementor-item,
.elementor-location-footer nav a{color:var(--ink-2)!important}
.elementor-location-footer .elementor-nav-menu a:hover,
.elementor-location-footer nav a:hover{color:var(--brand-on)!important}