/* ------------------------------------------------------------------
   Site chrome — header, footer, and the dark base for every page.

   The header and footer are Elementor templates (60 and 125). Elementor
   writes its own per-post CSS with high-specificity selectors, so the
   background and colour resets here are scoped tightly to the header and
   footer locations and use !important only for those two properties.
   Nothing structural is changed, so the templates stay editable in
   Elementor and there is nothing to migrate.
   ------------------------------------------------------------------ */

/* --- Dark base ---------------------------------------------------- */
body{background:var(--ink)}
#page,#content,.site-content{background:var(--ink)}
.ast-separate-container,.ast-plain-container{background:var(--ink)}

/* --- Header ------------------------------------------------------- */
.elementor-location-header{background:var(--ink-2)!important;
  border-bottom:1px solid var(--line);position:relative;z-index:20}
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.elementor-location-header .elementor-widget-container,
.elementor-location-header section,
.elementor-location-header .elementor-section{background-color:transparent!important}
.elementor-location-header,
.elementor-location-header a,
.elementor-location-header .elementor-heading-title{color:var(--cream)!important}
.elementor-location-header a:hover{color:var(--green)!important}

/* Social icons sit dark-on-light by default; invert for the dark bar. */
.elementor-location-header .elementor-social-icon,
.elementor-location-footer .elementor-social-icon{background-color:transparent!important}
.elementor-location-header .elementor-social-icon svg,
.elementor-location-header .elementor-icon svg,
.elementor-location-header .elementor-icon i{fill:var(--cream)!important;color:var(--cream)!important;
  transition:fill .18s,color .18s}
.elementor-location-header .elementor-social-icon:hover svg,
.elementor-location-header .elementor-icon:hover svg,
.elementor-location-header .elementor-icon:hover i{fill:var(--green)!important;color:var(--green)!important}

/* The logo is a dark badge built for a light bar. Screen blending lifts it
   onto the dark background without needing a second asset. */
.elementor-location-header .elementor-widget-theme-site-logo img,
.elementor-location-header .elementor-widget-image img{mix-blend-mode:screen}

/* --- Footer ------------------------------------------------------- */
.elementor-location-footer{background:var(--ink-2)!important;
  border-top:1px solid var(--line)}
.elementor-location-footer .e-con,
.elementor-location-footer .e-con-inner,
.elementor-location-footer .elementor-widget-container,
.elementor-location-footer section,
.elementor-location-footer .elementor-section{background-color:transparent!important}
.elementor-location-footer,
.elementor-location-footer p,
.elementor-location-footer .elementor-heading-title,
.elementor-location-footer .elementor-widget-text-editor{color:var(--muted)!important}
.elementor-location-footer a{color:var(--cream)!important;text-decoration:none}
.elementor-location-footer a:hover{color:var(--green)!important}
.elementor-location-footer .elementor-social-icon svg{fill:var(--cream)!important}
.elementor-location-footer .elementor-social-icon:hover svg{fill:var(--green)!important}
.elementor-location-footer .elementor-widget-theme-site-logo img,
.elementor-location-footer .elementor-widget-image img{mix-blend-mode:screen}

/* Join CTA band that sits above the footer */
.elementor-location-footer .elementor-widget-button .elementor-button{
  background-color:var(--green)!important;color:#08140B!important;
  border-radius:999px;font-weight:800;border:0}
.elementor-location-footer .elementor-widget-button .elementor-button:hover{
  background-color:var(--green-deep)!important;color:#fff!important}

/* --- Slide-out menu (Elementor popup) ----------------------------- */
.elementor-popup-modal .dialog-message{background-color:var(--ink-2)!important}
.elementor-popup-modal .elementor-widget-nav-menu a,
.elementor-popup-modal a{color:var(--cream)!important}
.elementor-popup-modal a:hover{color:var(--green)!important}
.elementor-popup-modal .elementor-item:after,
.elementor-popup-modal .elementor-item:before{background-color:var(--green)!important}

/* --- Sensible defaults for pages not yet converted ---------------- */
.site-content .entry-content,
.site-content .ast-container{color:var(--cream)}
.site-content h1,.site-content h2,.site-content h3,
.site-content h4,.site-content h5{color:var(--white)}
.site-content a{color:var(--green)}
.site-content input[type=text],.site-content input[type=email],
.site-content input[type=password],.site-content input[type=tel],
.site-content input[type=number],.site-content input[type=search],
.site-content textarea,.site-content select{
  background:var(--ink-2);color:var(--white);border:1px solid var(--line-2);
  border-radius:10px}
.site-content input::placeholder,.site-content textarea::placeholder{color:var(--muted-2)}
.site-content label{color:var(--muted)}

/* Elementor sets per-element backgrounds (#FFFFFF, #F1F1F2) on the header bar.
   Reset every element inside the two locations so the dark bar shows through. */
.elementor-location-header .elementor-element,
.elementor-location-footer .elementor-element{background-color:transparent!important}
.elementor-location-header .elementor-icon{background-color:transparent!important;border-color:var(--line-2)!important}

/* Footer text is authored in black (#000000) for a light background. */
.elementor-location-footer .elementor-heading-title,
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor *,
.elementor-location-footer p,
.elementor-location-footer li,
.elementor-location-footer span:not(.elementor-button-content-wrapper):not(.elementor-button-text){color:var(--muted)!important}
.elementor-location-footer .elementor-heading-title{color:var(--white)!important}
/* keep button label readable against the green fill */
.elementor-location-footer .elementor-button,
.elementor-location-footer .elementor-button *{color:#08140B!important}

/* Green buttons carry white labels. The generic link colour added for
   unconverted pages was outranking .btn-green and rendering the text
   green-on-green, i.e. invisible. */
.site-content a.btn,.site-content .btn{text-decoration:none}
.site-content a.btn-green,.site-content .btn-green,
.gmc-dark .btn-green,.btn-green{color:#fff!important}
.site-content a.btn-ghost,.gmc-dark .btn-ghost{color:var(--white)!important}
.site-content a.btn-dark,.gmc-dark .btn-dark{color:var(--white)!important}
.gmc-dark .gm-btn-green,.site-content a.gm-btn-green{color:#fff!important}
.elementor-location-footer .elementor-button,
.elementor-location-footer .elementor-button *{color:#fff!important}

/* --- Site footer (from the approved mockup) ----------------------- */
.gm-footer{background:var(--ink-2);border-top:1px solid var(--line);padding:56px 0 34px;color:var(--muted)}
.gm-footer .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.gm-footer .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:34px}
.gm-footer .foot-grid h6{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 0 16px;font-weight:700}
.gm-footer .foot-grid a{display:block;color:#cfcec5;font-weight:600;font-size:.95rem;margin-bottom:11px}
.gm-footer .foot-grid a:hover{color:var(--green)}
.gm-footer .foot-grid p{color:var(--muted);font-size:.92rem;font-weight:500;margin:14px 0 18px}
.gm-footer .foot-bottom{border-top:1px solid var(--line);margin-top:42px;padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted-2);font-size:.85rem;font-weight:500}
.gm-footer .logo{height:52px;width:auto;mix-blend-mode:screen}
@media (max-width:860px){.gm-footer .foot-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:560px){.gm-footer .foot-grid{grid-template-columns:1fr}}

/* Slide-out menu: Elementor sets a #FFFFFF background on the join panel,
   which hid its own light text. Reset backgrounds across the popup so the
   dark panel shows through, and keep the green button as the accent. */
.elementor-popup-modal .elementor-element,
.elementor-popup-modal .e-con,
.elementor-popup-modal .e-con-inner,
.elementor-popup-modal .elementor-widget-container{background-color:transparent!important}
.elementor-popup-modal .dialog-widget-content,
.elementor-popup-modal .dialog-message{background-color:var(--ink-2)!important}
.elementor-popup-modal .elementor-widget-text-editor,
.elementor-popup-modal .elementor-widget-text-editor p,
.elementor-popup-modal .elementor-heading-title{color:var(--cream)!important}
.elementor-popup-modal .elementor-widget-button .elementor-button{
  background-color:var(--green)!important;color:#fff!important;border-radius:999px;font-weight:800}
.elementor-popup-modal .elementor-widget-button .elementor-button:hover{
  background-color:var(--green-deep)!important;color:#fff!important}
.elementor-popup-modal .elementor-social-icon svg{fill:var(--cream)!important}
.elementor-popup-modal .elementor-social-icon:hover svg{fill:var(--green)!important}
.elementor-popup-modal .elementor-widget-image img{mix-blend-mode:screen}
.elementor-popup-modal .elementor-divider-separator{border-color:var(--line)!important}

/* --- WooCommerce: basket, checkout, account -----------------------
   Woo and Astra both ship light-theme styles for these screens. Nothing
   functional is changed here — the forms, gateways and totals are Woo's.
   ------------------------------------------------------------------ */
.gmc-dark.woocommerce-cart .site-content .ast-container,
.gmc-dark.woocommerce-checkout .site-content .ast-container,
.gmc-dark.woocommerce-account .site-content .ast-container{
  max-width:1100px;margin:0 auto;padding:44px 20px 80px}

.gmc-dark .woocommerce h1,.gmc-dark .woocommerce h2,
.gmc-dark .woocommerce h3{color:var(--white)}

/* Notices: "added to your basket", errors, the subscriptions message */
.gmc-dark .woocommerce-message,
.gmc-dark .woocommerce-info,
.gmc-dark .woocommerce-error,
.gmc-dark .wc-block-components-notice-banner{
  background:var(--raised)!important;color:var(--cream)!important;
  border:1px solid var(--line)!important;border-top:3px solid var(--green)!important;
  border-radius:12px!important;padding:14px 18px!important}
.gmc-dark .woocommerce-error{border-top-color:var(--flag)!important}
.gmc-dark .woocommerce-message::before,
.gmc-dark .woocommerce-info::before{color:var(--green)!important}
.gmc-dark .woocommerce-message a,.gmc-dark .woocommerce-info a{color:var(--green)!important}

/* Tables: the header row was white on white */
.gmc-dark .woocommerce table.shop_table{background:var(--raised);
  border:1px solid var(--line)!important;border-radius:var(--r);border-collapse:separate;
  overflow:hidden;color:var(--cream)}
.gmc-dark .woocommerce table.shop_table thead th,
.gmc-dark .woocommerce table.shop_table th{background:var(--raised-2)!important;
  color:var(--muted)!important;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:800;border-bottom:1px solid var(--line)!important}
.gmc-dark .woocommerce table.shop_table td{border-top:1px solid var(--line)!important;
  color:var(--cream)}
.gmc-dark .woocommerce table.shop_table tbody tr:hover td{background:rgba(255,255,255,.02)}
.gmc-dark .woocommerce table.shop_table .product-name a{color:var(--green);font-weight:700}
.gmc-dark .woocommerce table.shop_table .amount{color:var(--white);font-weight:700}
.gmc-dark .woocommerce .cart_totals h2,
.gmc-dark .woocommerce-checkout #order_review_heading{color:var(--white)!important}
.gmc-dark .woocommerce .cart_totals{background:transparent}
.gmc-dark .woocommerce ul#shipping_method li,
.gmc-dark .woocommerce .order-total .amount{color:var(--white)}
.gmc-dark .woocommerce-remove-coupon,.gmc-dark .product-remove a{color:var(--muted-2)!important}
.gmc-dark .product-remove a:hover{color:var(--flag)!important}

/* Buttons: Woo/Astra render these blue */
.gmc-dark .woocommerce a.button,
.gmc-dark .woocommerce button.button,
.gmc-dark .woocommerce input.button,
.gmc-dark .woocommerce a.button.alt,
.gmc-dark .woocommerce button.button.alt,
.gmc-dark .woocommerce #place_order,
.gmc-dark .woocommerce .checkout-button{
  background-color:var(--green)!important;color:#fff!important;border:0!important;
  border-radius:999px!important;font-weight:800!important;padding:12px 26px!important;
  font-family:var(--font)!important;text-shadow:none!important}
.gmc-dark .woocommerce a.button:hover,
.gmc-dark .woocommerce button.button:hover,
.gmc-dark .woocommerce input.button:hover,
.gmc-dark .woocommerce a.button.alt:hover,
.gmc-dark .woocommerce button.button.alt:hover,
.gmc-dark .woocommerce #place_order:hover,
.gmc-dark .woocommerce .checkout-button:hover{
  background-color:var(--green-deep)!important;color:#fff!important}
.gmc-dark .woocommerce .checkout-button,
.gmc-dark .woocommerce #place_order{width:100%;text-align:center;font-size:15px!important;
  padding:15px 26px!important}

/* Form fields, including the white country select */
.gmc-dark .woocommerce form .form-row input.input-text,
.gmc-dark .woocommerce form .form-row textarea,
.gmc-dark .woocommerce form .form-row select,
.gmc-dark .woocommerce .select2-container .select2-selection--single,
.gmc-dark .woocommerce #coupon_code{
  background:var(--ink-2)!important;color:var(--white)!important;
  border:1px solid var(--line-2)!important;border-radius:12px!important;
  padding:12px 14px!important;font-family:var(--font)!important;font-size:15px!important;
  height:auto!important;line-height:1.4!important}
.gmc-dark .woocommerce form .form-row input.input-text:focus,
.gmc-dark .woocommerce form .form-row textarea:focus,
.gmc-dark .woocommerce form .form-row select:focus{
  outline:none!important;border-color:var(--green)!important;
  box-shadow:0 0 0 3px var(--green-glow)!important}
.gmc-dark .woocommerce ::placeholder{color:var(--muted-2)!important;opacity:1}
.gmc-dark .woocommerce form .form-row label,
.gmc-dark .woocommerce-billing-fields label,
.gmc-dark .woocommerce-additional-fields label{color:var(--muted)!important;font-weight:600}
.gmc-dark .woocommerce .required{color:var(--flag)!important}

/* select2 dropdown used for country/county */
.gmc-dark .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--white)!important;line-height:1.4!important}
.gmc-dark .select2-dropdown{background:var(--ink-2)!important;border-color:var(--line-2)!important}
.gmc-dark .select2-results__option{color:var(--cream)!important}
.gmc-dark .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--green)!important;color:#fff!important}

/* Checkout section headings had a blue underline */
.gmc-dark .woocommerce-checkout h3,
.gmc-dark .woocommerce-checkout .woocommerce-billing-fields h3{
  border-bottom:1px solid var(--line)!important;padding-bottom:10px;margin-bottom:16px}
.gmc-dark .woocommerce-checkout-review-order-table tfoot th,
.gmc-dark .woocommerce-checkout-review-order-table tfoot td{color:var(--cream)!important}
.gmc-dark #payment,.gmc-dark .woocommerce-checkout #payment{
  background:var(--raised)!important;border:1px solid var(--line);border-radius:var(--r)}
.gmc-dark #payment div.payment_box{background:var(--ink-2)!important;color:var(--cream)!important;
  border-radius:10px}
.gmc-dark #payment div.payment_box::before{border-bottom-color:var(--ink-2)!important}
.gmc-dark .woocommerce-privacy-policy-text p{color:var(--muted)!important;font-size:13px}
.gmc-dark .woocommerce-terms-and-conditions-wrapper a{color:var(--green)!important}

/* My account navigation */
.gmc-dark .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:4px}
.gmc-dark .woocommerce-MyAccount-navigation li a{display:block;padding:11px 15px;
  border-radius:12px;background:var(--raised);border:1px solid var(--line);
  color:var(--cream)!important;text-decoration:none;font-weight:700;font-size:14px}
.gmc-dark .woocommerce-MyAccount-navigation li.is-active a,
.gmc-dark .woocommerce-MyAccount-navigation li a:hover{
  background:var(--green);border-color:var(--green);color:#fff!important}

@media (max-width:760px){
  .gmc-dark.woocommerce-cart .site-content .ast-container,
  .gmc-dark.woocommerce-checkout .site-content .ast-container,
  .gmc-dark.woocommerce-account .site-content .ast-container{padding:28px 16px 60px}
}

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

/* Basket totals: the heading sat in a white block that hid its own text. */
.gmc-dark .woocommerce .cart-collaterals,
.gmc-dark .woocommerce-page .cart-collaterals{background:transparent!important}
.gmc-dark .woocommerce .cart-collaterals .cart_totals,
.gmc-dark .woocommerce-page .cart-collaterals .cart_totals{
  background:var(--raised)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;padding:20px!important}
.gmc-dark .woocommerce .cart_totals > h2,
.gmc-dark .woocommerce-page .cart_totals > h2{
  background:transparent!important;color:var(--white)!important;
  padding:0 0 14px!important;margin:0!important;font-size:18px;font-weight:800;
  border:0!important;box-shadow:none!important}
.gmc-dark .woocommerce .cart_totals table.shop_table{border-radius:12px!important}
.gmc-dark .woocommerce .cart_totals .checkout-button{margin-top:16px}

/* Checkout: labels were positioned over the field value (Country/Region sat
   on top of "United Kingdom (UK)"). Put them back above the input. */
.gmc-dark.woocommerce-checkout .woocommerce form .form-row label,
.gmc-dark.woocommerce-checkout .woocommerce-billing-fields .form-row label,
.gmc-dark .woocommerce form .form-row > label{
  position:static!important;transform:none!important;float:none!important;
  display:block!important;margin:0 0 6px!important;padding:0!important;
  background:transparent!important;font-size:12.5px!important;
  letter-spacing:.03em;line-height:1.3!important;pointer-events:auto}
.gmc-dark .woocommerce form .form-row{display:block;margin-bottom:16px}
.gmc-dark .woocommerce form .form-row .woocommerce-input-wrapper{display:block;width:100%}

/* Order summary: long totals were wrapping into the label column */
.gmc-dark .woocommerce-checkout-review-order-table th{width:44%;vertical-align:top}
.gmc-dark .woocommerce-checkout-review-order-table td{text-align:right;vertical-align:top}
.gmc-dark .woocommerce-checkout-review-order-table .includes_tax,
.gmc-dark .woocommerce-checkout-review-order-table small{display:block;
  color:var(--muted-2)!important;font-size:12px;font-weight:500;margin-top:3px}

/* Coupon toggle read as a dull olive against the dark page */
.gmc-dark .woocommerce-form-coupon-toggle a,
.gmc-dark .showcoupon,
.gmc-dark .woocommerce-form-login-toggle a{color:var(--green)!important;font-weight:700}

/* Place order button: the padlock glyph crowded the label */
.gmc-dark .woocommerce #place_order{display:inline-flex;align-items:center;
  justify-content:center;gap:9px}

/* --- My Account ---------------------------------------------------
   This page uses Elementor's WooCommerce My Account widget, which writes
   its own light-theme rules for the tabs and content panel at a higher
   specificity than the generic Woo styling above.
   ------------------------------------------------------------------ */
.gmc-dark.woocommerce-account .elementor-heading-title{color:var(--white)!important}

/* Account navigation tabs */
.gmc-dark .woocommerce-MyAccount-navigation ul,
.gmc-dark .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul{
  list-style:none!important;margin:0!important;padding:0!important;
  display:flex!important;flex-direction:column;gap:6px}
.gmc-dark .woocommerce-MyAccount-navigation ul li,
.gmc-dark .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li{
  background:transparent!important;border:0!important;margin:0!important;padding:0!important}
.gmc-dark .woocommerce-MyAccount-navigation ul li a,
.gmc-dark .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li a{
  display:block!important;padding:12px 16px!important;border-radius:12px!important;
  background:var(--raised)!important;border:1px solid var(--line)!important;
  color:var(--cream)!important;text-decoration:none!important;font-weight:700!important;
  font-size:14px!important;font-style:normal!important;letter-spacing:0!important;
  transition:background .18s,border-color .18s,color .18s}
.gmc-dark .woocommerce-MyAccount-navigation ul li a:hover,
.gmc-dark .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li a:hover{
  background:var(--raised-2)!important;border-color:var(--line-2)!important;color:var(--white)!important}
.gmc-dark .woocommerce-MyAccount-navigation ul li.is-active a,
.gmc-dark .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li.is-active a{
  background:var(--green)!important;border-color:var(--green)!important;color:#fff!important}

/* Content panel */
.gmc-dark .woocommerce-MyAccount-content,
.gmc-dark .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content{
  background:var(--raised)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;padding:24px!important;color:var(--cream)!important}
.gmc-dark .woocommerce-MyAccount-content p,
.gmc-dark .woocommerce-MyAccount-content li,
.gmc-dark .woocommerce-MyAccount-content td,
.gmc-dark .woocommerce-MyAccount-content th{color:var(--cream)!important;font-style:normal!important}
.gmc-dark .woocommerce-MyAccount-content strong{color:var(--white)!important}
.gmc-dark .woocommerce-MyAccount-content a{color:var(--green)!important;font-weight:700}
.gmc-dark .woocommerce-MyAccount-content h2,
.gmc-dark .woocommerce-MyAccount-content h3{color:var(--white)!important}

/* Avatar / profile picture control from the One User Avatar plugin */
.gmc-dark .woocommerce-account .avatar,
.gmc-dark .woocommerce-account img.avatar{border-radius:50%;border:2px solid var(--line-2)}
.gmc-dark .woocommerce-account a.button,
.gmc-dark .woocommerce-account input[type=submit],
.gmc-dark .woocommerce-account button{background-color:var(--green)!important;
  color:#fff!important;border:0!important;border-radius:999px!important;
  font-weight:800!important;padding:11px 22px!important}
.gmc-dark .woocommerce-account a.button:hover,
.gmc-dark .woocommerce-account button:hover{background-color:var(--green-deep)!important}

@media (max-width:760px){
  .gmc-dark .woocommerce-MyAccount-navigation ul{flex-direction:row;flex-wrap:wrap}
  .gmc-dark .woocommerce-MyAccount-navigation ul li a{padding:10px 14px!important;font-size:13px!important}
  .gmc-dark .woocommerce-MyAccount-content{padding:18px!important}
}

/* Elementor nests the account panel inside a second wrapper that carries the
   white background, which hid the "Hello ..." text sitting on it. */
.gmc-dark .woocommerce-MyAccount-content-wrapper,
.gmc-dark .e-my-account-tab .woocommerce-MyAccount-content-wrapper{
  background:transparent!important;border:0!important;padding:0!important;
  box-shadow:none!important;color:var(--cream)!important}
.gmc-dark .woocommerce-MyAccount-content-wrapper p,
.gmc-dark .woocommerce-MyAccount-content-wrapper li{color:var(--cream)!important}
.gmc-dark .woocommerce-MyAccount-content-wrapper strong,
.gmc-dark .woocommerce-MyAccount-content-wrapper mark{color:var(--white)!important;background:transparent!important}

/* Woo prints an icon via ::before positioned inside the padding box; the
   tighter padding pushed the text under it. */
.gmc-dark .woocommerce-message::before,
.gmc-dark .woocommerce-info::before,
.gmc-dark .woocommerce-error::before{display:none!important}
.gmc-dark .woocommerce-message,
.gmc-dark .woocommerce-info,
.gmc-dark .woocommerce-error{padding:14px 18px!important;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.gmc-dark .woocommerce-message a.button,
.gmc-dark .woocommerce-info a.button{margin:0!important;flex:0 0 auto}

/* --- Site header (top bar) ----------------------------------------- */
.gm-header{position:sticky;top:0;z-index:60;background:var(--ink-2);
  border-bottom:1px solid var(--line)}
.gm-header-inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:24px;min-height:68px}
.gm-brand{flex:0 0 auto;display:flex;align-items:center}
.gm-brand img{height:46px;width:auto;display:block;mix-blend-mode:screen}

.gm-nav{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:26px}
.gm-nav a{color:var(--cream);text-decoration:none;font-weight:700;font-size:14px;
  letter-spacing:.01em;white-space:nowrap;position:relative;padding:6px 0;
  transition:color .18s}
.gm-nav a:hover{color:var(--green)}
.gm-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .18s}
.gm-nav a:hover::after{transform:scaleX(1)}

.gm-header-right{flex:0 0 auto;display:flex;align-items:center;gap:16px}
.gm-social{display:flex;align-items:center;gap:12px}
.gm-social a{color:var(--muted);display:inline-flex;transition:color .18s}
.gm-social a:hover{color:var(--green)}
.gm-header-cta{background:var(--green);color:#fff!important;text-decoration:none;
  font-weight:800;font-size:13.5px;padding:9px 18px;border-radius:999px;
  white-space:nowrap;transition:background .18s}
.gm-header-cta:hover{background:var(--green-deep)}

/* Burger, mobile only */
.gm-burger{display:none;background:transparent;border:0;cursor:pointer;
  padding:8px;flex-direction:column;gap:5px;width:40px}
.gm-burger span{display:block;height:2px;width:22px;background:var(--cream);
  border-radius:2px;transition:transform .2s,opacity .2s}
.gm-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.gm-burger.is-open span:nth-child(2){opacity:0}
.gm-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.gm-mobile-nav{display:none;flex-direction:column;padding:8px 20px 18px;
  border-top:1px solid var(--line);background:var(--ink-2)}
.gm-mobile-nav a{color:var(--cream);text-decoration:none;font-weight:700;
  font-size:15px;padding:13px 0;border-bottom:1px solid var(--line)}
.gm-mobile-nav a:last-child{border-bottom:0}
.gm-mobile-nav a:hover{color:var(--green)}
.gm-mobile-nav a.is-cta{color:var(--green)}
.gm-mobile-nav.is-open{display:flex}

@media (max-width:1080px){
  .gm-nav{gap:18px}
  .gm-nav a{font-size:13px}
  .gm-social{gap:9px}
}
@media (max-width:920px){
  .gm-nav,.gm-social{display:none}
  .gm-burger{display:flex}
  .gm-header-inner{gap:14px;min-height:60px}
  .gm-brand{flex:1 1 auto}
  .gm-brand img{height:40px}
}
@media (max-width:420px){
  .gm-header-cta{display:none}
}

/* Full-width header banner: logo hard left, social and CTA hard right,
   nav centred between them. */
.gm-header-inner{max-width:none;padding:0 30px;min-height:76px}
.gm-nav a{font-size:15.5px}
.gm-brand img{height:50px}
.gm-header-cta{font-size:14.5px;padding:10px 20px}
@media (max-width:1180px){
  .gm-header-inner{padding:0 24px}
  .gm-nav{gap:20px}
  .gm-nav a{font-size:14.5px}
}
@media (max-width:920px){
  .gm-header-inner{padding:0 18px;min-height:62px}
  .gm-mobile-nav{padding-left:18px;padding-right:18px}
}

/* Slightly larger social icons to sit better against the bigger nav text. */
.gm-social{gap:15px}
.gm-social a svg{width:23px;height:23px}
@media (max-width:1180px){.gm-social{gap:12px}.gm-social a svg{width:21px;height:21px}}

/* --- Basket, checkout and account on the cream theme ----------------
   Overrides the dark WooCommerce styling for these three screens only.
   Nothing functional changes; the header and footer stay dark.
   ------------------------------------------------------------------ */
.gmc-light .woocommerce h1,
.gmc-light .woocommerce h2,
.gmc-light .woocommerce h3,
.gmc-light .woocommerce-account .elementor-heading-title{color:var(--cream-ink)!important}
.gmc-light .site-content .entry-content,
.gmc-light .site-content .ast-container{color:#2f2c26}

/* Notices */
.gmc-light .woocommerce-message,
.gmc-light .woocommerce-info,
.gmc-light .woocommerce-error{background:#fff!important;color:#2f2c26!important;
  border:1px solid rgba(11,11,10,.10)!important;border-top:3px solid var(--green)!important;
  box-shadow:0 4px 14px rgba(11,11,10,.05)}
.gmc-light .woocommerce-error{border-top-color:var(--flag)!important}
.gmc-light .woocommerce-message a,
.gmc-light .woocommerce-info a{color:var(--green-deep)!important}

/* Tables */
.gmc-light .woocommerce table.shop_table{background:#fff;
  border-color:rgba(11,11,10,.10)!important;color:#2f2c26}
.gmc-light .woocommerce table.shop_table thead th,
.gmc-light .woocommerce table.shop_table th{background:#f4f0e4!important;
  color:#6d695e!important;border-bottom-color:rgba(11,11,10,.10)!important}
.gmc-light .woocommerce table.shop_table td{border-top-color:rgba(11,11,10,.08)!important;
  color:#2f2c26}
.gmc-light .woocommerce table.shop_table tbody tr:hover td{background:rgba(11,11,10,.02)}
.gmc-light .woocommerce table.shop_table .product-name a{color:var(--green-deep)}
.gmc-light .woocommerce table.shop_table .amount,
.gmc-light .woocommerce .order-total .amount{color:var(--cream-ink)}
.gmc-light .woocommerce .cart-collaterals .cart_totals,
.gmc-light .woocommerce-page .cart-collaterals .cart_totals{background:#fff!important;
  border-color:rgba(11,11,10,.10)!important;box-shadow:0 6px 20px rgba(11,11,10,.06)}
.gmc-light .woocommerce .cart_totals > h2{color:var(--cream-ink)!important}
.gmc-light .product-remove a{color:#8d8879!important}

/* Form fields */
.gmc-light .woocommerce form .form-row input.input-text,
.gmc-light .woocommerce form .form-row textarea,
.gmc-light .woocommerce form .form-row select,
.gmc-light .woocommerce .select2-container .select2-selection--single,
.gmc-light .woocommerce #coupon_code{background:#fff!important;color:var(--cream-ink)!important;
  border-color:rgba(11,11,10,.18)!important}
.gmc-light .woocommerce ::placeholder{color:#8d8879!important}
.gmc-light .woocommerce form .form-row label,
.gmc-light .woocommerce-billing-fields label,
.gmc-light .woocommerce-additional-fields label{color:#57544a!important}
.gmc-light .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--cream-ink)!important}
.gmc-light .select2-dropdown{background:#fff!important;border-color:rgba(11,11,10,.18)!important}
.gmc-light .select2-results__option{color:#2f2c26!important}

/* Checkout panels */
.gmc-light .woocommerce-checkout h3{border-bottom-color:rgba(11,11,10,.12)!important}
.gmc-light #payment,
.gmc-light .woocommerce-checkout #payment{background:#fff!important;
  border-color:rgba(11,11,10,.10)!important}
.gmc-light #payment div.payment_box{background:#f4f0e4!important;color:#2f2c26!important}
.gmc-light #payment div.payment_box::before{border-bottom-color:#f4f0e4!important}
.gmc-light .woocommerce-privacy-policy-text p{color:#57544a!important}
.gmc-light .woocommerce-checkout-review-order-table tfoot th,
.gmc-light .woocommerce-checkout-review-order-table tfoot td{color:#2f2c26!important}
.gmc-light .woocommerce-checkout-review-order-table .includes_tax,
.gmc-light .woocommerce-checkout-review-order-table small{color:#7a7669!important}

/* My account */
.gmc-light .woocommerce-MyAccount-navigation ul li a,
.gmc-light .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li a{
  background:#fff!important;border-color:rgba(11,11,10,.10)!important;
  color:#2f2c26!important}
.gmc-light .woocommerce-MyAccount-navigation ul li a:hover{background:#f4f0e4!important;
  color:var(--cream-ink)!important}
.gmc-light .woocommerce-MyAccount-navigation ul li.is-active a{background:var(--green)!important;
  border-color:var(--green)!important;color:#fff!important}
.gmc-light .woocommerce-MyAccount-content,
.gmc-light .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content{
  background:#fff!important;border-color:rgba(11,11,10,.10)!important;
  color:#2f2c26!important;box-shadow:0 6px 20px rgba(11,11,10,.05)}
.gmc-light .woocommerce-MyAccount-content p,
.gmc-light .woocommerce-MyAccount-content li,
.gmc-light .woocommerce-MyAccount-content-wrapper p{color:#2f2c26!important}
.gmc-light .woocommerce-MyAccount-content strong,
.gmc-light .woocommerce-MyAccount-content h2,
.gmc-light .woocommerce-MyAccount-content h3{color:var(--cream-ink)!important}
.gmc-light .woocommerce-MyAccount-content a{color:var(--green-deep)!important}

/* Both classes sit on <body>, so these need to be compound selectors
   (no space) or they never match and the dark rules win. */
.gmc-light.woocommerce-account .elementor-heading-title,
.gmc-light.woocommerce-cart .elementor-heading-title,
.gmc-light.woocommerce-checkout .elementor-heading-title{color:var(--cream-ink)!important}
.gmc-light.woocommerce-account h1,
.gmc-light.woocommerce-cart h1,
.gmc-light.woocommerce-checkout h1{color:var(--cream-ink)!important}

/* Drop the white panel around the account content — the tabs already
   carry the card treatment, so a second box around the text is noise. */
.gmc-light .woocommerce-MyAccount-content,
.gmc-light .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:4px 0 0 4px!important}

/* Removing the panel also removed its padding, so the content sat flush
   against the tab column. Put the gap back without the box. */
.gmc-light .woocommerce-MyAccount-content,
.gmc-light .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content{
  padding:2px 0 0 40px!important}
@media (max-width:760px){
  .gmc-light .woocommerce-MyAccount-content,
  .gmc-light .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content{
    padding:20px 0 0 0!important}
}

/* Larger nav text. */
.gm-nav a{font-size:17px}
.gm-header-cta{font-size:15px;padding:11px 21px}
@media (max-width:1180px){.gm-nav a{font-size:15.5px}.gm-nav{gap:18px}}