/* ==========================================================================
   Art n Cast — Dark Mode
   ---------------------------------------------------------------------------
   Activated by a [data-theme="dark"] attribute on <html> (set by
   dark-mode.js — defaults to the visitor's OS/browser setting, overridable
   via the header toggle button and remembered in localStorage).

   Strategy: almost every colour on the site already runs through a CSS
   custom property (--cream, --white, --text, --gold, --gold-dark and the
   --footer- tokens from style.css; --wc-muted, --wc-border, --wc-bg-light
   from artncast-wc-styles.css; the --ack- and --acj- tokens on the two
   shop landing pages; the --at-, --pp- and --rp- tokens on the legal
   pages) — so redefining those variables under [data-theme="dark"]
   recolours most of the site automatically. The rules below handle that,
   plus the smaller number of places that use a literal hard-coded colour
   instead of a variable.

   Every selector below is copy-matched from its light-mode rule with
   "[data-theme="dark"] " prepended, which always gives it equal-or-greater
   specificity than the original — so these safely win regardless of file
   load order, including against the light-mode rules that use !important.
   ========================================================================== */

:root[data-theme="dark"] {
  /* ---- style.css tokens ---- */
  --cream: #221e17;
  --white: #17140f;
  --text: #efe9df;
  --gold: #d9b880;       /* lighter gold, per request — the light-mode
                             tone (#b89563) reads muddy on a dark page */
  --gold-dark: #c9a06e;
  --footer-bg: var(--dm-surface-2);  /* dark charcoal surface, a shade
                                         lighter than the page background —
                                         matches the rest of dark mode's
                                         "raised surface" panels instead of
                                         standing out as a gold/bronze bar */
  --footer-text: var(--text);
  --footer-muted: var(--wc-muted);
  --header-bg: var(--dm-surface-2);  /* same raised charcoal as the footer */
  --ink: #332c20;        /* solid dark buttons/panels — lighter than the
                             page background so they still read as a
                             distinct surface */

  /* ---- artncast-wc-styles.css tokens ---- */
  --wc-muted: #ffffff;   /* plain white — was a muted tan, then a near-
                             white cream, but any amount of dimming still
                             read as low-contrast grey on dark backgrounds
                             (footer text, tabs, product meta, remove
                             links, etc), per request. Every one of those
                             spots already routes through this single
                             token (see the "Muted / secondary text"
                             bucket below), so bumping it here is a
                             sitewide fix rather than a per-selector one */
  --wc-border: #3a352c;
  --wc-bg-light: #221e17;

  /* ---- extra dark-mode-only tokens ---- */
  --dm-surface: #221e17;   /* card / panel background, replaces literal #fff */
  --dm-surface-2: #2b261d; /* slightly raised surface (active tab, etc.) */
  --dm-btn-ink: #241f16;   /* dark text sat on top of the lighter gold */
  --dm-danger: #e5867a;    /* error/remove red, lightened for a dark bg */
  --dm-success: #55c07f;   /* success green, lightened for a dark bg */
  --dm-header-footer-border: #3a352c; /* same hairline tone as the rest of
                                          dark mode's card borders, since
                                          the header/footer are now a dark
                                          surface rather than gold/bronze */

  /* ---- generic names reused by Custom HTML blocks ----
     Several page sections (repair page cards, the studio photo
     placeholder, the process steps, etc) are pasted-in blocks that ship
     their own tiny self-contained design system on a plain ":root" —
     --cream/--white/--text/--gold/--gold-dark match style.css's own
     names, so those already inherit dark mode's values above with no
     extra work. But --muted and --border are names of their own that
     style.css never defined, so dark mode had nothing to override them
     with — they stayed their light-mode grey no matter the theme, which
     is why small text and hairlines in these blocks read as low-contrast
     grey-on-dark. Defining them here fixes every current (and future)
     block that happens to use these two common names, in one place,
     rather than hunting down each block individually. */
  --muted: var(--wc-muted);
  --border: var(--wc-border);
}

body[data-theme="dark"],
:root[data-theme="dark"] body {
  color-scheme: dark;
}

/* --------------------------------------------------------------------
   Muted / secondary text — every spot that used a literal grey instead
   of a variable. The header/footer and the mega-menu dropdown are now a
   dark charcoal surface (same family as the rest of dark mode), so their
   secondary text belongs in this light-on-dark bucket too.
   -------------------------------------------------------------------- */
[data-theme="dark"] .top-bar,
[data-theme="dark"] .footer-about p,
[data-theme="dark"] .footer-grid a,
[data-theme="dark"] .footer-bottom,
[data-theme="dark"] .col-heading,
[data-theme="dark"] .woocommerce-page-wrap .woocommerce-tabs ul.tabs li a,
[data-theme="dark"] .accordion-icon,
[data-theme="dark"] .mobile-sub-title,
[data-theme="dark"] .woocommerce-page-wrap a.reset_variations,
[data-theme="dark"] .woocommerce-page-wrap div.product .product_meta,
[data-theme="dark"] .cart-line-remove a,
[data-theme="dark"] .wishlist-item-remove,
[data-theme="dark"] .mini-cart-remove {
  color: var(--wc-muted);
}
[data-theme="dark"] .footer-grid a:hover {
  color: var(--text);
}

/* --------------------------------------------------------------------
   Borders — every hairline that used a literal light grey
   -------------------------------------------------------------------- */
[data-theme="dark"] .footer-bottom,
[data-theme="dark"] .woocommerce div.product .woocommerce-tabs,
[data-theme="dark"] .woocommerce-page-wrap .woocommerce-tabs {
  border-color: var(--wc-border);
}
[data-theme="dark"] header.site-header,
[data-theme="dark"] footer {
  border-color: var(--dm-header-footer-border);
}
[data-theme="dark"] .subsequent-menu-box {
  background: var(--header-bg);
  border-top-color: var(--dm-header-footer-border);
  border-bottom-color: var(--dm-header-footer-border);
}

/* Logo mark — one path is set via an inline style="" attribute (desktop
   header) and the other via a plain fill="" attribute (mobile drawer);
   !important is required to beat the former, and is harmless on the
   latter. Without this the logo's dark path disappears against the dark
   header/footer background. Both the desktop header and the mobile
   drawer are dark surfaces now, so they share the same treatment. */
[data-theme="dark"] .logo-mark-ink {
  fill: var(--text) !important;
}
[data-theme="dark"] .logo-mark-gold {
  fill: var(--gold) !important;
}
[data-theme="dark"] .footer-social a {
  border-color: var(--wc-border) !important;
}
[data-theme="dark"] .woocommerce-page-wrap table.variations select,
[data-theme="dark"] .woocommerce-page-wrap .woocommerce-product-details__short-description input[type="text"],
[data-theme="dark"] .woocommerce-page-wrap div.product .quantity input.qty,
[data-theme="dark"] .mobile-search-form {
  border-color: var(--wc-border);
}
[data-theme="dark"] .woocommerce-page-wrap .woocommerce-tabs ul.tabs,
[data-theme="dark"] .mobile-drawer-header,
[data-theme="dark"] .mobile-nav-item {
  border-color: var(--wc-border);
}

/* --------------------------------------------------------------------
   Solid "white card" surfaces — every literal #fff/#ffffff background
   -------------------------------------------------------------------- */
[data-theme="dark"] .woocommerce form input[type="text"],
[data-theme="dark"] .woocommerce form input[type="email"],
[data-theme="dark"] .woocommerce form input[type="tel"],
[data-theme="dark"] .woocommerce form input[type="password"],
[data-theme="dark"] .woocommerce form input[type="number"],
[data-theme="dark"] .woocommerce form select,
[data-theme="dark"] .woocommerce form textarea,
[data-theme="dark"] .woocommerce-page-wrap table.variations select,
[data-theme="dark"] .woocommerce-page-wrap .woocommerce-product-details__short-description input[type="text"],
[data-theme="dark"] .woocommerce-page-wrap div.product .wishlist-toggle-btn,
[data-theme="dark"] .cart-page-empty,
[data-theme="dark"] .cart-page-items,
[data-theme="dark"] .showcase-arrow,
[data-theme="dark"] #payment,
[data-theme="dark"] .cart-drawer,
[data-theme="dark"] .woocommerce-account .woocommerce-form-login,
[data-theme="dark"] .woocommerce-account .woocommerce-form-register,
[data-theme="dark"] .woocommerce-MyAccount-navigation li a,
[data-theme="dark"] .account-quick-links a,
[data-theme="dark"] .woocommerce-orders-table tbody tr,
[data-theme="dark"] .wc-block-cart__main,
[data-theme="dark"] .wc-block-checkout__main,
[data-theme="dark"] .cookie-consent-banner,
[data-theme="dark"] .cookie-btn,
[data-theme="dark"] .cookie-modal-box {
  background: var(--dm-surface);
}
/* "Accept All" carries both .cookie-btn and .cookie-btn-accept — the
   generic .cookie-btn rule just above (dark surface, meant for the plain
   outline buttons like "Reject Non-Essential") has equal specificity to
   .cookie-btn-accept's own gold background in artncast-wc-styles.css and
   wins on source order, stripping its gold fill. Combined with the dark
   ink text the "Gold-background buttons" bucket below forces onto it,
   that left "Accept All" an invisible dark-on-dark rectangle. Restore the
   gold fill here, specific enough to win back over the bucket above. */
[data-theme="dark"] .cookie-btn-accept {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}
[data-theme="dark"] .cookie-btn-accept:hover {
  background: var(--gold);
  border-color: var(--gold);
}
[data-theme="dark"] .cart-tab-btn.active {
  background: var(--dm-surface-2);
}
[data-theme="dark"] .footer-social a {
  background-color: var(--dm-surface) !important;
}
[data-theme="dark"] .footer-social svg {
  fill: var(--text) !important;
}
[data-theme="dark"] .custom-gallery-arrow {
  background-color: rgba(34, 30, 23, 0.85) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .custom-gallery-arrow:hover {
  background-color: var(--dm-surface) !important;
}
[data-theme="dark"] .woocommerce-page-wrap ul.products li.product .wishlist-toggle-btn {
  background: rgba(34, 30, 23, 0.85);
}

/* --------------------------------------------------------------------
   Catch-all for native form fields anywhere on the site. The rules
   above only reach inputs/textareas nested inside ".woocommerce form",
   but plenty of fields aren't — the product review box (#commentform
   isn't wrapped in ".woocommerce"), the header search field, any
   plain contact form — so those were left with an unstyled white
   browser-default background and near-black text on top of it,
   unreadable once the page around them went dark. This reaches every
   text field/textarea/select on the site regardless of what wraps it.
   -------------------------------------------------------------------- */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--dm-surface);
  color: var(--text);
  border-color: var(--wc-border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--wc-muted);
  opacity: 1;
}

/* --------------------------------------------------------------------
   Block Checkout / Block Cart — text inputs, the Country and State
   comboboxes, and selects. WooCommerce's own block stylesheet styles
   these with a selector scoped to their wrapping ".wc-block-components-*"
   class (e.g. ".wc-block-components-text-input input"), which is more
   specific than the bare "input[type=...]" catch-all just above, so it
   wins and left every checkout field on a plain white background
   regardless of theme. Matching the same wrapper-scoped selectors here,
   with !important as a safety net, brings these fields in line with
   every other field on the site. Also covers the floating suggestion
   list the Country/State combobox drops down while typing.
   -------------------------------------------------------------------- */
[data-theme="dark"] .wc-block-components-text-input input,
[data-theme="dark"] .wc-block-components-combobox input,
[data-theme="dark"] .wc-block-components-select select,
[data-theme="dark"] .wc-block-components-textarea textarea,
[data-theme="dark"] .wc-block-checkout__form input,
[data-theme="dark"] .wc-block-checkout__form select,
[data-theme="dark"] .wc-block-checkout__form textarea {
  background: var(--dm-surface) !important;
  color: var(--text) !important;
  border-color: var(--wc-border) !important;
}
[data-theme="dark"] .wc-block-components-text-input input::placeholder,
[data-theme="dark"] .wc-block-components-combobox input::placeholder,
[data-theme="dark"] .wc-block-checkout__form input::placeholder {
  color: var(--wc-muted) !important;
  opacity: 1;
}
[data-theme="dark"] .wc-block-components-combobox-control__listbox,
[data-theme="dark"] .wc-block-components-combobox__listbox {
  background: var(--dm-surface) !important;
  border-color: var(--wc-border) !important;
}
[data-theme="dark"] .wc-block-components-combobox-control__listbox li,
[data-theme="dark"] .wc-block-components-combobox-control__option,
[data-theme="dark"] .wc-block-components-combobox__listbox-item {
  color: var(--text) !important;
}

/* --------------------------------------------------------------------
   Gold-background buttons/badges — swap white text for a dark ink so
   it stays legible against the lighter dark-mode gold
   -------------------------------------------------------------------- */
[data-theme="dark"] .woocommerce a.button,
[data-theme="dark"] .woocommerce button.button,
[data-theme="dark"] .woocommerce input.button,
[data-theme="dark"] .woocommerce #respond input#submit,
[data-theme="dark"] .woocommerce a.button:hover,
[data-theme="dark"] .woocommerce button.button:hover,
[data-theme="dark"] .woocommerce input.button:hover,
[data-theme="dark"] .cart-drawer a.button,
[data-theme="dark"] .cart-drawer button.button,
[data-theme="dark"] .cart-drawer a.button:hover,
[data-theme="dark"] .cart-drawer button.button:hover,
[data-theme="dark"] .wc-block-components-button,
[data-theme="dark"] .wc-block-cart__submit-button,
[data-theme="dark"] .wc-block-components-checkout-place-order-button,
[data-theme="dark"] .cookie-btn-accept,
[data-theme="dark"] .cookie-btn-accept:hover,
[data-theme="dark"] .pdp-qty-btn:hover,
[data-theme="dark"] .showcase-arrow:hover,
[data-theme="dark"] .mini-cart-qty-stepper .qty-btn:hover,
[data-theme="dark"] .how-it-works-step .step-number,
[data-theme="dark"] .cart-count,
[data-theme="dark"] .woocommerce-MyAccount-navigation li.is-active a,
[data-theme="dark"] .cart-page-empty .continue-shopping-links a.button.button-outline,
[data-theme="dark"] .cart-page-empty .continue-shopping-links a.button.button-outline:hover,
[data-theme="dark"] .menu-btn-floating,
[data-theme="dark"] span.onsale,
[data-theme="dark"] .woocommerce-page-wrap span.onsale,
[data-theme="dark"] #ac-keepsakes-page .btn-primary,
[data-theme="dark"] #ac-keepsakes-page .btn-primary:hover,
[data-theme="dark"] #ac-jewellery-page .btn-primary,
[data-theme="dark"] #ac-jewellery-page .btn-primary:hover,
[data-theme="dark"] #ac-keepsakes-page .cat-label,
[data-theme="dark"] #ac-jewellery-page .cat-label,
[data-theme="dark"] #ac-keepsakes-page .cat-arrow:hover,
[data-theme="dark"] #ac-jewellery-page .cat-arrow:hover,
[data-theme="dark"] .artncast-bestsellers .btn-outline:hover,
[data-theme="dark"] .wc-block-components-order-summary-item__quantity,
[data-theme="dark"] .wc-block-components-product-badge,
[data-theme="dark"] .wc-block-components-quantity-badge {
  color: var(--dm-btn-ink) !important;
}

/* Cart drawer's OUTLINE button ("SHOP KEEPSAKES" in the empty-cart
   state) is also matched by ".cart-drawer a.button" in the bucket just
   above (button-outline still carries the base .button class), which
   wrongly forces it to dark ink too. Unlike the other buttons in that
   bucket, this one has a transparent background — border and text both
   just use var(--text) — so dark ink on a transparent button sitting
   over the dark page is invisible ("black on black"), and the same
   thing happens on hover, where its background becomes var(--ink) (a
   dark surface) with the bucket still forcing dark ink text. Restore
   its proper light text here (its border already correctly follows
   var(--text) on its own, since the bucket above never touched border
   colour), with a selector specific enough to beat that bucket. */
[data-theme="dark"] .cart-drawer a.button.button-outline {
  color: var(--text) !important;
}
[data-theme="dark"] .cart-drawer a.button.button-outline:hover {
  color: #fff !important;
}

/* Mini-cart's "View Cart" button (rendered by WooCommerce itself as
   a.wc-forward:not(.checkout), sitting right above "Checkout") has the
   exact same transparent-background problem as SHOP KEEPSAKES above —
   it's also caught by ".cart-drawer a.button" and forced to dark ink,
   invisible against its transparent fill in both its default and
   hover state (light mode's own hover for it fills with var(--ink),
   which is a dark surface in dark mode too, so the forced dark ink
   text disappeared on hover as well). Per request, instead of just
   restoring its outline colours, it's given the same solid gold
   treatment as Checkout so the two buttons match and there's no
   transparent state left for the ink-colour rule to fight. */
[data-theme="dark"] .cart-drawer .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
  background: var(--gold);
  border-color: var(--gold);
}
[data-theme="dark"] .cart-drawer .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}

/* Main cart page — "Continue Shopping" Jewellery/Keepsakes links
   (".continue-shopping-links a.button.button-outline" inside the
   FILLED-cart ".cart-page-items" wrapper, not the empty-cart one
   already handled above). Same bucket, same bug: ".woocommerce
   a.button" forces dark ink onto them too, in both their default and
   hover state, invisible on their transparent background just like
   the other two outline buttons on this page. At rest they keep their
   original lighter-weight outline treatment — just with the text
   colour restored for dark mode (their border already follows
   var(--text) on its own, untouched by the bucket above). Their hover
   background is now gold (artncast-wc-styles.css), matching the
   mini-cart's gold buttons, so on hover they instead need the same
   dark ink the "Gold-background buttons" bucket above already gives
   every other gold-background button in dark mode — this selector is
   just specific enough to make sure that wins over the rest-state
   rule immediately below it during :hover. */
[data-theme="dark"] .cart-page-items .continue-shopping-links a.button.button-outline {
  color: var(--text) !important;
}
[data-theme="dark"] .cart-page-items .continue-shopping-links a.button.button-outline:hover {
  color: var(--dm-btn-ink) !important;
}

/* --------------------------------------------------------------------
   Contact page — hero header (#kp-hero-header). Another Custom HTML
   block, and like the Repair page's ".rp-quote-section" it scopes its
   own --text/--gold-dark vars to its own ID rather than to :root, so
   dark mode's :root override can't reach past it for those two names.
   Its ".MB_title_header_container" is a light beige card (its own
   --footer-beige, not a name dark mode touches) with dark ink text —
   internally consistent, so like the repair page's own cream card it
   just stays light-on-its-own-terms in both themes unless given an
   explicit override. Darkened here to match the rest of dark mode's
   panels, with the (locally shadowed) title text and eyebrow restored
   using tokens this block does NOT shadow instead of the poisoned
   --text/--gold-dark names.
   -------------------------------------------------------------------- */
[data-theme="dark"] #kp-hero-header .MB_title_header_container {
  background-color: var(--dm-surface-2);
  border-top-color: var(--wc-border);
}
[data-theme="dark"] #kp-hero-header .MB_title_header {
  color: var(--wc-muted);
}
[data-theme="dark"] #kp-hero-header .eyebrow {
  color: #c9a06e;
}

/* --------------------------------------------------------------------
   Contact page — info card (Studio / Contact / Follow Along). Another
   Custom HTML block, but unlike the ones above it doesn't reuse any of
   the site's variable names (--info-ink, --info-steel, --info-line,
   --info-cream, --info-gold, --info-gold-dark are all names of its
   own) — so there's no shadowing fight over a shared name, and no
   poisoning risk either. Every colour in the block already routes
   through one of these local tokens except the icon bubble's literal
   "background: #fff", so the whole card recolours just by redefining
   its own tokens here, the same way dark mode recolours the rest of
   the site by redefining --text/--gold/etc — plus the one line for
   that hardcoded background.
   -------------------------------------------------------------------- */
[data-theme="dark"] .info-card-container {
  --info-ink: var(--wc-muted);         /* headings + default icon fill */
  --info-steel: var(--wc-muted);       /* body text + social labels */
  --info-line: var(--wc-border);       /* icon bubble border */
  --info-cream: var(--dm-surface-2);   /* card background */
  --info-gold: var(--gold);            /* hover icon-bubble fill */
  --info-gold-dark: var(--gold-dark);  /* hover label colour */
}
[data-theme="dark"] .info-card-container .info-icon-bubble {
  background: var(--dm-surface) !important;
}
/* Per request, the Facebook/Instagram icons themselves are gold in
   their default (non-hover) state too, rather than relying on the
   --info-ink redefinition above (which would just make them the same
   near-white as the headings) — easier to spot at a glance. The hover
   state already swaps them to white against the now-gold bubble
   background (".info-social-item:hover .info-icon-bubble svg" in the
   block's own <style>), which stays untouched and still wins on
   hover since it's scoped to that specific state. */
[data-theme="dark"] .info-card-container .info-icon-bubble svg {
  fill: var(--gold) !important;
}

/* --------------------------------------------------------------------
   Contact page — "Get in Touch" message form (Contact Form 7). Same
   shape as the info card just above: every colour in this block routes
   through its own local tokens (--cf-gold, --cf-ink, --cf-steel,
   --cf-line, --cf-cream — none of them reused site-wide names), so
   redefining those tokens here recolours almost the whole block in one
   go, the same way the site's own --text/--gold tokens work sitewide.
   The exceptions are the card and field backgrounds, both hardcoded to
   a literal "#FFFFFF" rather than a variable, and CF7's own
   success/error response box, which uses its own literal light-mode
   colours rather than this block's tokens — swapped here for the same
   --dm-success/--dm-danger tokens the rest of the site's status
   messages already use.
   -------------------------------------------------------------------- */
[data-theme="dark"] .cf-form-container {
  --cf-ink: var(--wc-muted);
  --cf-steel: var(--wc-muted);
  --cf-line: var(--wc-border);
  --cf-cream: var(--dm-surface-2);
  --cf-gold: var(--gold);
  --cf-gold-dark: var(--gold-dark);
}
[data-theme="dark"] .cf-form-container .cf-form-inner,
[data-theme="dark"] .cf-form-container .cf-input,
[data-theme="dark"] .cf-form-container .cf-textarea {
  background: var(--dm-surface) !important;
}
[data-theme="dark"] .cf-form-container .wpcf7-response-output {
  border-color: var(--wc-border) !important;
}
[data-theme="dark"] .cf-form-container .wpcf7-mail-sent-ok {
  background: rgba(85, 192, 127, 0.12) !important;
  color: var(--dm-success) !important;
  border-left-color: var(--dm-success) !important;
}
[data-theme="dark"] .cf-form-container .wpcf7-validation-errors,
[data-theme="dark"] .cf-form-container .wpcf7-mail-sent-ng,
[data-theme="dark"] .cf-form-container .wpcf7-spam-blocked {
  background: rgba(229, 134, 122, 0.12) !important;
  color: var(--dm-danger) !important;
  border-left-color: var(--dm-danger) !important;
}

/* --------------------------------------------------------------------
   Homepage — "Final CTA" section (".final-cta"). This block is
   different from the other Custom HTML blocks above: it declares its
   shared tokens on a plain ":root" rather than its own class/ID, using
   the SAME names style.css uses site-wide (--text, --gold, --white,
   etc). Dark mode's own ":root[data-theme=\"dark\"]" override still
   wins over this block's plain ":root" (higher specificity, same as
   the very first two homepage sections fixed above), so --text/--gold
   correctly pick up dark mode's values here with no extra work. But
   --white is a token dark mode has repurposed to mean "a dark surface
   colour that replaces a literal #fff", not literal white — harmless
   everywhere else in this block since the heading/paragraph use literal
   "white"/"#eee", but this section's ".btn-outline" ("Contact Us") uses
   var(--white) for BOTH its text and its border on a transparent
   background, so in dark mode both go near-black, invisible against
   the (always-dark) photo overlay behind it. Per request, rather than
   just restoring the outline colours, it's given a solid black fill
   instead so it doesn't depend on that token at all.
   -------------------------------------------------------------------- */
[data-theme="dark"] .final-cta .btn-outline {
  background: #000;
  color: #fff;
  border-color: #000;
}
[data-theme="dark"] .final-cta .btn-outline:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* --------------------------------------------------------------------
   "Get in Touch" section (".reach-item" cards — Book a Casting
   Session, Order an Impression Kit, etc). Same plain-":root" pattern
   as Final CTA above, so --gold already correctly becomes dark mode's
   lighter gold on these ".btn-primary" buttons with no extra work. But
   unlike Final CTA, this block's ".btn-primary" sets its text with the
   literal keyword "white" rather than var(--white), so there's no
   token for dark mode to repurpose — it stays hard-coded white forever,
   which is exactly wrong once the background lightens to dark mode's
   gold: same low-contrast problem the "Gold-background buttons" bucket
   solves everywhere else, just needing its own rule here since these
   buttons live outside any selector that bucket already covers.
   Scoped to ".reach-item" (unique to this block) so it can't reach the
   Final CTA/other sections' own same-named ".btn-primary" buttons. */
[data-theme="dark"] .reach-item .btn-primary {
  color: var(--dm-btn-ink);
}

/* --------------------------------------------------------------------
   "Shop by Category" section (".cat-grid" tiles — Pendants, Charms,
   Earrings). Same plain-":root" pattern again, so this block's
   ".cat-label" caption bars (now solid gold at rest, per request —
   previously var(--text), a dark ink bar) automatically pick up dark
   mode's lighter gold with no extra work. Their white caption text —
   same "white" keyword issue as the "Get in Touch" buttons above,
   not a var(--white) that dark mode could repurpose — needs the same
   dark-ink treatment once that background lightens, for the same
   reason. Scoped to ".cat-grid" (unique to this block). */
[data-theme="dark"] .cat-grid .cat-label {
  color: var(--dm-btn-ink);
}

/* --------------------------------------------------------------------
   Repair page — gallery slideshow, "View Our Whole Gallery" button
   (".rp-view-all-btn"). This block scopes its tokens to its own class
   (".rp-slideshow-section"), not :root, so — like the repair quote
   form and info card above — dark mode's :root override can't reach
   --gold/--gold-dark/--white here at all; every descendant always gets
   this block's own light-mode values for those three names. Per
   request the button is solid gold in both themes rather than the
   transparent-outline-that-fills-on-hover style it shipped with, so
   this couldn't just be a text-colour fix — the literal dark-mode gold
   tones are used directly here since var(--gold)/var(--gold-dark)
   would just resolve to this block's shadowed light-mode values.
   -------------------------------------------------------------------- */
[data-theme="dark"] .rp-slideshow-section .rp-view-all-btn {
  background: #d9b880;
  border-color: #d9b880;
  color: var(--dm-btn-ink);
}
[data-theme="dark"] .rp-slideshow-section .rp-view-all-btn:hover {
  background: #c9a06e;
  border-color: #c9a06e;
  color: var(--dm-btn-ink);
}

/* Same block, same shadowing bug — the "Portfolio" eyebrow label above
   the "Gallery" heading is set with `color: var(--gold-dark)`, which
   resolves to this block's shadowed light-mode tone (#967344, a muddy
   brown) instead of dark mode's real, lighter gold-dark (#c9a06e), so
   it reads muddier/duller than every other gold accent on the dark
   page. Literal dark-mode value used directly for the same reason as
   above. */
[data-theme="dark"] .rp-slideshow-section .eyebrow {
  color: #c9a06e;
}

/* And the category filter tags (All / Plaster Keepsakes / Jewellery
   keepsakes / Jewellery Repairs). Same shadowing bug again: at rest
   these use this block's shadowed --muted (#716d67) for text and
   --border (#ddd6cc) for their outline — both colours picked for a
   cream background, so on the dark page the text reads as a washed-out
   grey that's hard to read. --wc-muted/--wc-border are real site
   tokens this block never shadows, so they resolve correctly through
   to dark mode's own values (plain white text, a dark-mode-appropriate
   hairline border) without needing literal hex here. The active/hover
   fill also gets the literal dark-mode gold (rather than the shadowed
   light-mode tone) with dark ink text, matching the "View Our Whole
   Gallery" button and every other gold-background element in dark
   mode. */
[data-theme="dark"] .rp-slideshow-section .rp-filter-btn {
  border-color: var(--wc-border);
  color: var(--wc-muted);
}
[data-theme="dark"] .rp-slideshow-section .rp-filter-btn:hover,
[data-theme="dark"] .rp-slideshow-section .rp-filter-btn.active {
  background: #d9b880;
  border-color: #d9b880;
  color: var(--dm-btn-ink);
}

/* --------------------------------------------------------------------
   Status colours — lighten error/success red & green for dark backgrounds
   -------------------------------------------------------------------- */
[data-theme="dark"] .woocommerce-error,
[data-theme="dark"] .artncast-variation-notice {
  background: rgba(229, 134, 122, 0.12);
  border-left-color: var(--dm-danger);
  color: var(--dm-danger);
}
[data-theme="dark"] .wishlist-item-remove:hover,
[data-theme="dark"] .cart-line-remove a:hover,
[data-theme="dark"] .mini-cart-remove:hover,
[data-theme="dark"] .coupon-message.error,
[data-theme="dark"] .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--dm-danger);
}
[data-theme="dark"] .free-shipping-message.free-shipping-unlocked,
[data-theme="dark"] .coupon-message.success {
  color: var(--dm-success);
}

/* --------------------------------------------------------------------
   Keepsakes / Jewellery shop landing pages — local scoped tokens
   -------------------------------------------------------------------- */
[data-theme="dark"] #ac-keepsakes-page {
  --ack-cream: #221e17;
  --ack-white: #1d1a14;
  --ack-text: #efe9df;
  --ack-muted: #e3ddd0;   /* near-white, matching --wc-muted — this feeds
                              .kp-faq-answer among other small text */
  --ack-gold: #d9b880;
  --ack-gold-dark: #c9a06e;
  --ack-border: #3a352c;
  --ack-ink: #332c20;
}
[data-theme="dark"] #ac-jewellery-page {
  --acj-cream: #221e17;
  --acj-white: #1d1a14;
  --acj-text: #efe9df;
  --acj-muted: #e3ddd0;   /* near-white, matching --wc-muted */
  --acj-gold: #d9b880;
  --acj-gold-dark: #c9a06e;
  --acj-border: #3a352c;
  --acj-ink: #332c20;
}
[data-theme="dark"] #ac-keepsakes-page .kp-gallery-item {
  background: #2b261d;
}

/* Keepsakes page — Final CTA band, "Order an Impression Kit" outline
   button (".btn-outline"). At rest it's fine in both themes (literal
   #fff border/text on the section's always-dark background), but its
   hover fills with a literal white background and sets text to
   var(--ack-text) — which dark mode repurposes into a near-white body
   text colour (#efe9df) for headings/paragraphs elsewhere on this
   page. That's invisible against the hover's white fill: white text on
   a white button. Forcing dark ink here on hover, the same as every
   other light/gold surface in dark mode, restores contrast without
   touching the (correct) light-mode hover styling at all. */
[data-theme="dark"] #ac-keepsakes-page .btn-outline:hover {
  color: var(--dm-btn-ink) !important;
}

/* --------------------------------------------------------------------
   Legal pages (Terms, Privacy Policy, Refund & Returns) — local scoped
   tokens, same pattern as the shop pages above
   -------------------------------------------------------------------- */
[data-theme="dark"] .artncast-terms {
  --at-cream: #221e17;
  --at-text: #efe9df;
  --at-muted: #e3ddd0;   /* near-white, matching --wc-muted */
  --at-gold: #d9b880;
  --at-gold-dark: #c9a06e;
  --at-border: #3a352c;
  background: var(--dm-surface);
}
[data-theme="dark"] .artncast-privacy-policy {
  --pp-cream: #221e17;
  --pp-text: #efe9df;
  --pp-muted: #e3ddd0;   /* near-white, matching --wc-muted */
  --pp-gold: #d9b880;
  --pp-gold-dark: #c9a06e;
  --pp-border: #3a352c;
  background: var(--dm-surface);
}
[data-theme="dark"] .artncast-refund-policy {
  --rp-cream: #221e17;
  --rp-text: #efe9df;
  --rp-muted: #e3ddd0;   /* near-white, matching --wc-muted */
  --rp-gold: #d9b880;
  --rp-gold-dark: #c9a06e;
  --rp-border: #3a352c;
  background: var(--dm-surface);
}
[data-theme="dark"] .artncast-terms .at-notice,
[data-theme="dark"] .artncast-refund-policy .rp-notice {
  background: var(--dm-surface-2);
}
[data-theme="dark"] .artncast-instructions {
  --ii-cream: #221e17;
  --ii-white: var(--dm-surface);
  --ii-text: #efe9df;
  --ii-muted: #e3ddd0;   /* near-white, matching --wc-muted */
  --ii-gold: #d9b880;
  --ii-gold-dark: #c9a06e;
  --ii-border: #3a352c;
  background: var(--dm-surface);
}
[data-theme="dark"] .artncast-instructions .ii-method-number,
[data-theme="dark"] .artncast-instructions .ii-steps li::before {
  background: var(--dm-surface-2);
}

/* "Taking Your Impression" page — order-number/email gate form shown to
   anyone who hasn't verified yet (see inc/impression-instructions-gate.php).
   Same local-token pattern as the block above. */
[data-theme="dark"] .artncast-impression-gate {
  --iig-cream: #221e17;
  --iig-white: var(--dm-surface);
  --iig-text: #efe9df;
  --iig-muted: #e3ddd0;
  --iig-gold: #d9b880;
  --iig-gold-dark: #c9a06e;
  --iig-border: #3a352c;
  --iig-danger: #e5867a;
  background: var(--dm-surface);
}

/* --------------------------------------------------------------------
   Homepage — "Made For The Little Moments" split section. This is a
   Custom HTML block pasted into the Home page in WordPress (not a theme
   file), with its own self-contained <style> block that sets its own
   --cream/--text/--gold vars — those don't reach here, since dark mode
   already wins the site-wide --text/--gold tokens regardless. Its
   ".emotional-content" panel has a hardcoded background
   (var(--cream-dark), a var dark-mode.css has never heard of) and its
   heading/paragraph have no colour of their own, so they just inherit
   whatever the page's default text colour is. Originally this panel was
   left light with the text forced dark; per request the panel itself is
   now a dark surface (matching the rest of dark mode) with light text.
   -------------------------------------------------------------------- */
[data-theme="dark"] .emotional-content {
  background: var(--dm-surface-2);
}
[data-theme="dark"] .emotional-content h2,
[data-theme="dark"] .emotional-content p {
  color: var(--text);
}

/* --------------------------------------------------------------------
   Homepage — "What Our Customers Say" reviews section. Another Custom
   HTML block with its own self-contained <style>. Its outer ".reviews"
   section background and heading already come out fine in dark mode,
   because they use var(--cream)/inherited text colour and --cream is a
   name dark mode already overrides site-wide. The individual
   ".review" cards have a literal hardcoded "background: white" (not a
   variable, so dark mode has no hook to darken it on its own) — this
   was first fixed by forcing black text onto the white card, but a
   bright white card was too harsh against the rest of the dark page,
   so the card itself is now darkened to match the surface tone used
   elsewhere (the same one the "Made For The Little Moments" panel
   above uses), with the quote text and star rating flipped back to
   light. .review-name also gets its own override here — it uses this
   block's own --muted var (dark mode doesn't touch that name), which
   read fine on white but is too low-contrast on the new dark card.
   -------------------------------------------------------------------- */
[data-theme="dark"] .review {
  background: var(--dm-surface-2);
}
[data-theme="dark"] .review p,
[data-theme="dark"] .review .stars {
  color: var(--text);
}
[data-theme="dark"] .review .review-name {
  color: var(--wc-muted);
}

/* --------------------------------------------------------------------
   Jewellery Repair page — "Request a Repair Quote" section (Contact
   Form 7). Another Custom HTML block, but this one scopes its own
   --cream/--white/--text/--muted/--gold/--gold-dark/--border vars to
   ".rp-quote-section" itself rather than to :root. That's a narrower
   shadow than the other two blocks: dark mode's :root override can't
   reach past it at all for THOSE seven names — every descendant, in
   both themes, always gets this block's own fixed values for them,
   full stop. That's harmless where the block sets both a background
   and its text from that same shadowed set (e.g. ".rp-form-card"'s
   cream background with dark ink text — internally consistent, so it
   just stays a light card regardless of theme). It's not harmless on
   the form fields: ".rp-form-group input/select/textarea" sets
   "background: var(--white)" (shadowed, always white) and
   "color: var(--text)" (also shadowed, always dark ink) — the sitewide
   input catch-all further down this file does repaint text[type=...]
   inputs dark, because its selector for those is more specific than
   this page's, but its plain "select"/"textarea" selectors are only
   EQUALLY specific to this page's ".rp-form-group select"/"textarea" —
   and on a tie, the rule that appears later in the document wins,
   which is this page's own <style> block (it's printed into the page
   content, after dark-mode.css's <head> load). So text/email/tel
   inputs went dark-on-dark, while the select and textarea stayed
   dark-text-on-still-white. Same invisible-text failure as the very
   first review-card bug, just inverted (dark-on-dark instead of
   light-on-light) and, for the dropdown/textarea, a plain specificity
   loss on top of it.
   Fix: darken the card itself (matching the treatment used for the
   other two homepage sections) and repaint the fields — background,
   text and border together, all three field types in one rule scoped
   to ".rp-form-group" so it's unambiguously more specific than the
   page's own rule regardless of load order — using tokens this block
   does NOT shadow (--wc-muted, --wc-border, --dm-surface,
   --dm-surface-2) or literal colours, rather than the poisoned
   --text/--muted/--gold-dark names.
   -------------------------------------------------------------------- */
[data-theme="dark"] .rp-form-card {
  background: var(--dm-surface-2);
}
[data-theme="dark"] .rp-quote-section .eyebrow {
  color: #c9a06e;
}
[data-theme="dark"] .rp-form-desc,
[data-theme="dark"] .rp-form-group label,
[data-theme="dark"] .rp-disclaimer {
  color: var(--wc-muted);
}
[data-theme="dark"] .rp-disclaimer {
  background: var(--dm-surface);
  border-left-color: #c9a06e;
}
[data-theme="dark"] .rp-form-group input,
[data-theme="dark"] .rp-form-group select,
[data-theme="dark"] .rp-form-group textarea {
  background: var(--dm-surface);
  color: var(--wc-muted);
  border-color: var(--wc-border);
}

/* --------------------------------------------------------------------
   Dark-mode toggle button (header)
   -------------------------------------------------------------------- */
.theme-toggle-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.theme-toggle-btn svg { width: 19px; height: 19px; display: block; }
.theme-toggle-btn .theme-toggle-icon-dark { display: none; }
[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon-light { display: none; }
[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon-dark { display: block; }

.mobile-nav-utility .theme-toggle-btn {
  color: var(--text);
  gap: 6px;
}

/* Autofilled login fields: replace the browser's yellow / olive-green with
   the normal dark field colour so the text stays readable. */
[data-theme="dark"] .woocommerce form input:-webkit-autofill,
[data-theme="dark"] .woocommerce form input:-webkit-autofill:hover,
[data-theme="dark"] .woocommerce form input:-webkit-autofill:focus,
[data-theme="dark"] .woocommerce form select:-webkit-autofill,
[data-theme="dark"] .woocommerce form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--dm-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--dm-surface) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}

/* Left slide-in mobile menu */
[data-theme="dark"] .mobile-nav-inner,
[data-theme="dark"] .mobile-subpanel { background: var(--dm-surface); }
[data-theme="dark"] .mobile-subpanel-head { border-color: var(--wc-border); }
[data-theme="dark"] .mobile-subpanel-title,
[data-theme="dark"] .mobile-back-btn,
[data-theme="dark"] .mobile-drill-btn,
[data-theme="dark"] .mobile-close-btn,
[data-theme="dark"] .mobile-nav-item > a,
[data-theme="dark"] .mobile-sub-group a { color: var(--wc-text, #f1ebe0); }
[data-theme="dark"] .mobile-drawer-logo .brand-title { color: #f1ebe0 !important; }
[data-theme="dark"] .mobile-drawer-logo .brand-tagline { color: #b8b0a0 !important; }
[data-theme="dark"] .mobile-drawer-logo .logo-mark-ink { fill: #f1ebe0; }

[data-theme="dark"] .menu-btn:hover,
[data-theme="dark"] .menu-btn:focus-visible { background: rgba(217, 184, 128, .22); color: #d9b880; }
[data-theme="dark"] .mobile-drill-btn:hover,
[data-theme="dark"] .mobile-nav-item > a:hover,
[data-theme="dark"] .mobile-sub-group a:hover,
[data-theme="dark"] .mobile-close-btn:hover,
[data-theme="dark"] .mobile-back-btn:hover { color: #d9b880; }

[data-theme="dark"] .mobile-nav-utility .theme-toggle-btn:hover,
[data-theme="dark"] .mobile-nav-utility .nav-account-link:hover,
[data-theme="dark"] .mobile-nav-utility .nav-cart-trigger:hover { color: #d9b880; }

[data-theme="dark"] .artncast-ii-orders { background: var(--dm-surface-2); border-color: var(--wc-border); }
[data-theme="dark"] .artncast-ii-orders > summary span { color: #f1ebe0; }

[data-theme="dark"] .post-password-form input[type="password"],
[data-theme="dark"] .post-password-form input[type="text"] {
  background: var(--dm-surface);
  color: #f1ebe0;
  border-color: var(--wc-border);
}
[data-theme="dark"] .post-password-form input:-webkit-autofill,
[data-theme="dark"] .post-password-form input:-webkit-autofill:hover,
[data-theme="dark"] .post-password-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--dm-surface) inset !important;
  -webkit-text-fill-color: #f1ebe0 !important;
  caret-color: #f1ebe0;
}

[data-theme="dark"] .footer-grid .footer-col a:hover,
[data-theme="dark"] .footer-grid .footer-col a:focus-visible,
[data-theme="dark"] .footer-grid .footer-col-title:hover,
[data-theme="dark"] .footer-grid .footer-col-title:focus-visible { color: #d9b880; }

[data-theme="dark"] .post-password-form { background: var(--dm-surface-2); border-color: var(--wc-border); }
[data-theme="dark"] .post-password-form label { color: var(--wc-muted); }

/* Jewellery Repair hero: gold "Contact Us" button in dark mode (instead of white) */
[data-theme="dark"] .jw-slide .btn-primary {
  background: #d9b880 !important;
  border-color: #d9b880 !important;
  color: #241f16 !important;
}
[data-theme="dark"] .jw-slide .btn-primary:hover {
  background: #c9a06e !important;
  border-color: #c9a06e !important;
  color: #241f16 !important;
}

/* Logo mark in dark mode: brighter and slightly bolder so it doesn't look dull */
[data-theme="dark"] .logo-mark-ink {
  fill: #fffaf0 !important;
  stroke: #fffaf0;
  stroke-width: 1.6;
}
[data-theme="dark"] .logo-mark-gold {
  fill: #e8c88c !important;
  stroke: #e8c88c;
  stroke-width: 1.6;
}
[data-theme="dark"] .logo-svg-container svg {
  filter: drop-shadow(0 0 6px rgba(232, 200, 140, .28));
}

[data-theme="dark"] .brand-n { color: #e8c88c !important; }