/* ==========================================================================
   Art n Cast — WooCommerce Custom Styles
   Uses the same brand tokens as style.css (--cream, --white, --text,
   --gold, --gold-dark). No --muted/--border exist there, so a matching
   warm-toned pair is defined here instead of generic cold greys.
   ========================================================================== */

:root {
  --wc-muted: #71685a;
  --wc-border: #e6ded0;
  --wc-bg-light: #f7f4ef;
}

/* --------------------------------------------------------------------
   Mobile overflow safety net
   ---------------------------------------------------------------------------
   CSS Grid items default to min-width:auto, meaning a grid column won't
   shrink below the width of its content (a long product name, a wide
   table, etc) even when the column is meant to go narrower on mobile.
   When something forces a grid wider than the screen, mobile browsers
   don't just add a scrollbar for that element — they widen the entire
   page's effective layout viewport to fit it, which breaks every other
   breakpoint on the page too (this is why the header's hamburger menu
   was also failing specifically on WooCommerce pages). This rule set
   fixes it at the source (min-width:0 on every grid child that can
   hold variable-length content) plus a hard safety net.
   -------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }

.woocommerce-page-wrap div.product > * ,
.cart-page-grid > * ,
.cart-line > * ,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce > * ,
.account-quick-links > a ,
ul.products li.product,
.reach-grid > * {
  min-width: 0;
}

.woocommerce-page-wrap table,
.woocommerce-checkout table,
.woocommerce-account table {
  max-width: 100%;
}

/* --------------------------------------------------------------------
   Wrapper (applied via functions.php's woocommerce_before_main_content
   / woocommerce_after_main_content hook replacement)
   -------------------------------------------------------------------- */
.woocommerce-page-wrap {
  padding: 60px 0 150px;
}
.woocommerce-page-wrap h1.page-title,
.woocommerce-page-wrap h1.entry-title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  margin: 0 0 36px;
  text-align: center !important;
}

/* --------------------------------------------------------------------
   Global form elements
   -------------------------------------------------------------------- */
.woocommerce form .form-row { margin-bottom: 20px; }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
}
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form input[type="number"],
.woocommerce form select,
.woocommerce form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--wc-border);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  background: #fff;
  color: var(--text);
  box-sizing: border-box;
}
.woocommerce form input:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
  outline: none;
  border-color: var(--gold);
}

/* Buttons — gold, matching every other button on the site */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--gold);
  color: #fff;
  padding: 13px 26px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .2s ease, border-color .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
}
.woocommerce button.button.alt {
  background: var(--ink);
  border-color: var(--ink);
}
.woocommerce button.button.alt:hover {
  background: #000;
  border-color: #000;
}
.woocommerce a.button.button-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}
.woocommerce a.button.button-outline:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Main cart page — "Continue Shopping" Jewellery/Keepsakes buttons
   (filled-cart state). Per request, their highlight/hover colour should
   match the mini-cart's gold buttons (View Cart/Checkout) instead of the
   generic dark-ink hover above — same gold used for every other solid
   "hover" state on the site (.woocommerce a.button:hover, etc). Only the
   hover state changes; they keep their outline look at rest. Selector is
   5 classes deep specifically so it beats the generic rule above
   regardless of source order. */
.cart-page-items .continue-shopping-links a.button.button-outline:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
}
.woocommerce button.button:disabled,
.woocommerce button.button.loading {
  opacity: .5;
  cursor: not-allowed;
}

/* Notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  list-style: none;
  padding: 16px 20px;
  margin: 0 0 30px;
  border-radius: 4px;
  font-size: 13.5px;
  background: var(--wc-bg-light);
  border-left: 3px solid var(--gold);
}
.woocommerce-error { border-left-color: #B3261E; background: #FBEAEA; }
/* Notices like "No order has been made yet. [Browse products]" or
   "[Confirm email address] to check for past orders..." print the
   message text and an inline button as plain siblings inside the same
   line, with the button before or after the text depending on the
   notice. The button is "display: inline-block" with no margin of its
   own (see ".woocommerce a.button" above), so it sits flush against
   whichever side the text is on. Margin on both sides means there's
   always a gap next to the text regardless of which side it's on, and
   it still reads fine if the two ever wrap onto separate lines. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin: 4px 10px;
}

/* ==========================================================================
   Shop / category archive — product grid
   ========================================================================== */
.woocommerce-page-wrap ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce-page-wrap ul.products li.product a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.woocommerce-page-wrap ul.products li.product img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  background: var(--wc-bg-light);
  margin-bottom: 14px;
}
.woocommerce-page-wrap ul.products li.product .woocommerce-loop-product__title {
  overflow-wrap: break-word;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 4px;
}
.woocommerce-page-wrap ul.products li.product .price { font-size: 13px; color: var(--wc-muted); }

/* "Add to Wishlist" heart button — shop grid card (top-right of image) */
.woocommerce-page-wrap ul.products li.product { position: relative; }
.woocommerce-page-wrap ul.products li.product .wishlist-toggle-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.woocommerce-page-wrap ul.products li.product .wishlist-toggle-btn svg { width: 17px; height: 17px; color: var(--text); }
.woocommerce-page-wrap ul.products li.product .wishlist-toggle-btn.active svg { fill: var(--gold); stroke: var(--gold); }
.woocommerce-page-wrap ul.products li.product .wishlist-toggle-btn:hover svg { color: var(--gold-dark); }
.woocommerce-page-wrap ul.products li.product .wishlist-toggle-btn .wishlist-btn-text { display: none; }

/* "Add to Wishlist" button — single product page, beside Add to Cart */
.woocommerce-page-wrap div.product .wishlist-toggle-btn {
  height: 48px;
  padding: 0 14px;
  border-radius: 2px;
  border: 1px solid var(--wc-border);
  background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.woocommerce-page-wrap div.product .wishlist-toggle-btn svg { width: 18px; height: 18px; color: var(--text); flex-shrink: 0; }
.woocommerce-page-wrap div.product .wishlist-toggle-btn .wishlist-btn-text {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text); white-space: nowrap;
}
.woocommerce-page-wrap div.product .wishlist-toggle-btn.active svg { fill: var(--gold); stroke: var(--gold); }
.woocommerce-page-wrap div.product .wishlist-toggle-btn:hover { border-color: var(--gold); }

/* Heart "pop" — plays on every press (shop grid card or single product
   page), whether adding or removing, for instant tactile feedback. */
@keyframes wishlistPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  55%  { transform: scale(0.85); }
  75%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.wishlist-toggle-btn.wishlist-pop svg {
  animation: wishlistPop .5s ease;
}
.woocommerce-page-wrap ul.products li.product .price ins { text-decoration: none; color: var(--gold-dark); }
.woocommerce-page-wrap ul.products li.product .price del { opacity: .6; margin-right: 6px; }
.woocommerce-page-wrap ul.products li.product .star-rating { font-size: 12px; margin-top: 6px; }

@media (max-width: 900px) {
  .woocommerce-page-wrap ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Single product page
   ========================================================================== */
.woocommerce-page-wrap div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.woocommerce-page-wrap div.product .woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: var(--wc-bg-light);
}
.woocommerce-page-wrap .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.woocommerce-page-wrap .flex-control-thumbs li { width: 64px; height: 64px; }
.woocommerce-page-wrap .flex-control-thumbs img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 4px;
  cursor: pointer; border: 2px solid transparent; opacity: .65; transition: .2s;
}
.woocommerce-page-wrap .flex-control-thumbs img.flex-active,
.woocommerce-page-wrap .flex-control-thumbs img:hover { opacity: 1; border-color: var(--gold); }

.woocommerce-page-wrap div.product .summary h1.product_title {
  overflow-wrap: break-word;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  margin: 0 0 12px;
}
.woocommerce-page-wrap div.product .summary p.price {
  font-size: 19px;
  color: var(--text);
  margin: 0 0 22px;
  display: block;
}
.woocommerce-page-wrap div.product .summary p.price ins { text-decoration: none; color: var(--gold-dark); }
.woocommerce-page-wrap div.product .summary p.price del { opacity: .55; margin-right: 8px; font-size: 15px; }
.woocommerce-page-wrap div.product .woocommerce-product-details__short-description {
  font-size: 14px; line-height: 1.75; color: var(--wc-muted); margin-bottom: 24px;
}

/* Variations (Size / Metal etc, rendered automatically for Variable products) */
.woocommerce-page-wrap table.variations { width: 100%; border: none; margin-bottom: 22px; }
.artncast-variation-notice {
  font-size: 13px;
  color: #B3261E;
  background: #FBEAEA;
  border-left: 3px solid #B3261E;
  padding: 10px 14px;
  margin: -8px 0 20px;
  border-radius: 2px;
}
.woocommerce-page-wrap table.variations tr { display: block; margin-bottom: 16px; }
.woocommerce-page-wrap table.variations th.label {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  text-align: left; font-size: 13px; text-transform: uppercase;
  letter-spacing: .8px; font-weight: 600; color: var(--text); padding: 0 0 8px;
}
.woocommerce-page-wrap table.variations .metal-color-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.woocommerce-page-wrap table.variations td.value { display: block; padding: 0; }

/* Brute-force full-width block behavior on everything between the
   variations table and the add-to-cart row, overriding anything
   competing for this space — including any inline style WooCommerce's
   own variation-matching JS might apply directly to
   .woocommerce-variation, which a plain CSS rule can't outrank without
   !important. */
.woocommerce-page-wrap div.product .summary form.variations_form,
.woocommerce-page-wrap div.product .summary table.variations,
.woocommerce-page-wrap div.product .summary .single_variation_wrap,
.woocommerce-page-wrap div.product .summary .woocommerce-variation,
.woocommerce-page-wrap div.product .summary .woocommerce-variation-description,
.woocommerce-page-wrap div.product .summary .woocommerce-variation-price,
.woocommerce-page-wrap div.product .summary .woocommerce-variation-availability {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}
.woocommerce-page-wrap .woocommerce-variation-price { font-size: 15px; margin-bottom: 16px; }
.woocommerce-page-wrap a.reset_variations { font-size: 12px; color: #888; display: inline-block; margin-top: 6px; }

/* Quantity + Add to Cart */
/* Simple products: quantity + button sit directly in form.cart, with
   no variation wrapper — safe to make the form itself the flex row. */
.woocommerce-page-wrap div.product form.cart:not(.variations_form) {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: nowrap;
}

/* Variable products: form.cart also wraps .single_variation_wrap (the
   description/price block) as a SIBLING of the actual button area — so
   the form itself must stay a normal block (letting that description
   stack above, as intended), and only the specific button-row div gets
   the flex treatment instead. */
.woocommerce-page-wrap div.product .woocommerce-variation-add-to-cart {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: nowrap;
}
.woocommerce-page-wrap div.product .quantity input.qty {
  width: 64px; padding: 14px 10px; border: 1px solid var(--wc-border); border-radius: 4px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; text-align: center;
}

/* Single product quantity stepper (minus/plus added via JS) */
.woocommerce-page-wrap div.product .quantity.pdp-qty-stepper {
  display: flex; align-items: center; border: 1px solid var(--wc-border); border-radius: 4px; overflow: hidden;
  flex-shrink: 0;
}
.woocommerce-page-wrap div.product .quantity.pdp-qty-stepper input.qty {
  width: 44px; border: none; border-radius: 0; padding: 14px 4px;
  -moz-appearance: textfield;
}
.woocommerce-page-wrap div.product .quantity.pdp-qty-stepper input.qty::-webkit-outer-spin-button,
.woocommerce-page-wrap div.product .quantity.pdp-qty-stepper input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.pdp-qty-btn {
  width: 38px; height: 48px; border: none; background: var(--wc-bg-light); color: var(--text);
  font-size: 16px; cursor: pointer; flex-shrink: 0;
}
.pdp-qty-btn:hover { background: var(--gold); color: #fff; }

/* Metal — dropdown stays a normal full-width <select>; the selected
   name + color dot sit together next to the "METAL" label itself
   (see the th.label rule further down, which also sets the dot's
   final size/position — this block just keeps the text styling). */
.metal-selected-label {
  text-transform: none;
  font-weight: 400;
  color: var(--wc-muted);
  letter-spacing: 0;
  font-size: 13.5px;
}

/* Gallery prev/next: anchor point for the absolutely-positioned arrows */
.woocommerce-product-gallery { position: relative; }
/* Hide the inline arrows whenever the fullscreen PhotoSwipe lightbox is
   open, so they can never visually sit on top of it. */
body:has(.pswp--open) .custom-gallery-arrow {
  display: none !important;
}
.woocommerce-page-wrap div.product .single_add_to_cart_button { flex: 1; min-width: 130px; }

.artncast-trust-badges {
  display: flex; flex-direction: column; gap: 10px; margin: 22px 0 28px;
  padding-top: 20px; border-top: 1px solid var(--wc-border);
}
.artncast-trust-badges div { font-size: 12.5px; color: var(--wc-muted); display: flex; align-items: center; gap: 8px; }
.artncast-trust-badges span { color: var(--gold-dark); font-size: 13px; }

.woocommerce-page-wrap div.product .product_meta {
  font-size: 12px; color: #888; border-top: 1px solid var(--wc-border); padding-top: 16px; margin-top: 10px;
}
.woocommerce-page-wrap div.product .product_meta a { color: var(--gold-dark); }

/* Tabs */
.woocommerce-page-wrap .woocommerce-tabs {
  grid-column: 1 / -1; margin-top: 70px; border-top: 1px solid var(--wc-border); padding-top: 40px;
}
.woocommerce-page-wrap .woocommerce-tabs ul.tabs {
  display: flex; gap: 30px; list-style: none; padding: 0; margin: 0 0 30px; border-bottom: 1px solid var(--wc-border);
}
.woocommerce-page-wrap .woocommerce-tabs ul.tabs li { padding-bottom: 14px; }
.woocommerce-page-wrap .woocommerce-tabs ul.tabs li a {
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #888; text-decoration: none;
}
.woocommerce-page-wrap .woocommerce-tabs ul.tabs li.active a {
  color: var(--text); border-bottom: 2px solid var(--gold); padding-bottom: 14px;
}
.woocommerce-page-wrap .woocommerce-tabs .panel { font-size: 14px; line-height: 1.8; color: var(--wc-muted); max-width: 720px; }
.woocommerce-page-wrap .woocommerce-tabs table.shop_attributes { width: 100%; border-collapse: collapse; }
.woocommerce-page-wrap .woocommerce-tabs table.shop_attributes th,
.woocommerce-page-wrap .woocommerce-tabs table.shop_attributes td {
  padding: 10px 0; border-bottom: 1px solid var(--wc-border); font-size: 13.5px; text-align: left;
}
.woocommerce-page-wrap .woocommerce-tabs table.shop_attributes th { color: var(--text); font-weight: 600; width: 200px; }

/* Related products (WooCommerce's own native "related products" box —
   kept in case it's ever re-enabled; not currently used by any hook) */
.woocommerce-page-wrap .related.products { grid-column: 1 / -1; margin-top: 70px; border-top: 1px solid var(--wc-border); padding-top: 40px; }
.woocommerce-page-wrap .related.products > h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 24px; margin: 0 0 30px; }

/* --------------------------------------------------------------------
   Order fix — style.css (the main theme stylesheet) has an older rule
   that turns div.product into a flex row and explicitly pins
   .woocommerce-tabs to `order: 3 !important` so it lands after the
   gallery/summary. CSS `order` repositions elements purely by that
   number, ignoring where they actually sit in the HTML — so these three
   sections, having no `order` of their own, defaulted to `order: 0` and
   visually jumped ahead of the tabs even though they render later in
   the source. Giving them a higher order (and matching the tabs'
   flex-basis: 100%) forces them to always land after the tabs, no
   matter which flex/grid context they end up laid out in.
   -------------------------------------------------------------------- */
.woocommerce-page-wrap .artncast-tag-html,
.woocommerce-page-wrap .artncast-showcase,
.woocommerce-page-wrap .artncast-how-it-works,
.woocommerce-page-wrap .artncast-contact-cta {
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
.woocommerce-page-wrap .artncast-tag-html { order: 4 !important; }
.woocommerce-page-wrap .artncast-showcase { order: 5 !important; }
.woocommerce-page-wrap .artncast-how-it-works { order: 6 !important; }
.woocommerce-page-wrap .artncast-contact-cta { order: 7 !important; }

/* Default spacing for a tag's custom HTML block — matches the rhythm of
   the other sections. Anything you paste in the tag's "Custom HTML" box
   renders inside this, so it inherits this spacing automatically; add
   your own margin/padding inside your HTML if you want to override it. */
.woocommerce-page-wrap .artncast-tag-html {
  margin-top: 70px;
  border-top: 1px solid var(--wc-border);
  padding-top: 40px;
}

/* --------------------------------------------------------------------
   Product Showcase slider — a manually-curated set of products (tag
   them "showcase" — see inc/single-product-extras.php) laid out as a
   horizontal, swipeable row instead of a grid. Reuses the same card
   markup/styling as the shop grid (ul.products li.product rules further
   up this file), just with a different container layout.
   -------------------------------------------------------------------- */
.woocommerce-page-wrap .artncast-showcase {
  margin-top: 70px;
  border-top: 1px solid var(--wc-border);
  padding-top: 40px;
}
.artncast-showcase > h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 30px;
}
.showcase-slider { position: relative; }
.showcase-viewport {
  overflow: hidden;
  padding: 4px 4px 14px;
  cursor: grab;
  /* Let the browser handle vertical page-scroll gestures itself, and
     leave horizontal drag to our own JS (touch AND mouse) — without
     this, touch-dragging the slider fights with the page trying to
     scroll and neither works cleanly. */
  touch-action: pan-y;
  user-select: none;
}
.showcase-viewport.dragging { cursor: grabbing; }
.woocommerce-page-wrap .showcase-track.products {
  display: flex;
  grid-template-columns: none;
  gap: 24px;
  margin: 0;
  transition: transform .45s ease;
  will-change: transform;
}
.woocommerce-page-wrap .showcase-track.products li.product {
  flex: 0 0 240px;
  pointer-events: auto;
}
.showcase-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--wc-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 2;
  font-size: 16px;
  color: var(--text);
}
.showcase-arrow:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.showcase-prev { left: -18px; }
.showcase-next { right: -18px; }
@media (max-width: 700px) {
  /* Arrows stay visible on mobile now too (dragging works as well) —
     just moved in from the page edge so they don't get clipped. */
  .showcase-arrow { width: 34px; height: 34px; font-size: 14px; }
  .showcase-prev { left: 2px; }
  .showcase-next { right: 2px; }
  .woocommerce-page-wrap .showcase-track.products li.product { flex-basis: 190px; }
}

/* How It Works — renders after the whole product block (via
   woocommerce_after_single_product), so it's a plain sibling now, not a
   CSS grid child of div.product; no grid-column needed. */
.woocommerce-page-wrap .artncast-how-it-works {
  margin-top: 70px;
  border-top: 1px solid var(--wc-border);
  padding-top: 40px;
  text-align: center;
}
.artncast-how-it-works > h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 40px;
}
.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.how-it-works-step { padding: 0 10px; }
.how-it-works-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
}
.how-it-works-step h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 17px;
  margin: 0 0 8px;
}
.how-it-works-step p {
  font-size: 13.5px;
  color: var(--wc-muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 850px) {
  .how-it-works-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Contact CTA — same as above, a plain sibling block now. */
.woocommerce-page-wrap .artncast-contact-cta {
  margin-top: 50px;
  margin-bottom: 40px;
  padding: 50px 30px;
  background: var(--wc-bg-light);
  border-radius: 8px;
  text-align: center;
}
.artncast-contact-cta h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 12px;
}
.artncast-contact-cta p {
  font-size: 14px;
  color: var(--wc-muted);
  max-width: 480px;
  margin: 0 auto 22px;
  line-height: 1.7;
}

@media (max-width: 850px) {
  .woocommerce-page-wrap div.product { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Cart page — two-column layout (items left, summary right)
   ========================================================================== */
.cart-page-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 50px;
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
}
.cart-page-empty {
  max-width: 1160px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  padding: 80px 20px 64px;
  text-align: center;
}
.cart-page-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--wc-bg-light);
  color: var(--gold-dark, #967344);
  margin-bottom: 22px;
}
.cart-page-empty-icon svg {
  width: 30px;
  height: 30px;
}
.cart-page-empty-message {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  color: var(--text);
  font-size: 24px;
  margin: 0 0 8px;
}
.cart-page-empty-sub {
  color: var(--wc-muted);
  font-size: 14px;
  margin: 0 0 28px;
}
.cart-page-empty .continue-shopping {
  justify-content: center;
  margin-top: 6px;
}
.cart-page-empty .continue-shopping-label {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 6px;
}
.cart-page-empty .continue-shopping-links {
  justify-content: center;
}
.cart-page-empty .continue-shopping-links a.button.button-outline {
  padding: 13px 30px;
  font-size: 12px;
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(184,149,99,.35);
}
.cart-page-empty .continue-shopping-links a.button.button-outline:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
  box-shadow: 0 8px 20px rgba(150,115,68,.4);
}
@media (max-width: 480px) {
  .cart-page-empty .continue-shopping-links {
    flex-direction: column;
    align-items: stretch;
    max-width: 240px;
    margin: 0 auto;
  }
}
.cart-page-items {
  background: #fff;
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  padding: 10px 26px;
}
.cart-line {
  display: grid;
  grid-template-columns: 70px 1fr 80px 96px 104px 26px;
  gap: 12px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--wc-border);
}
.cart-line:last-of-type { border-bottom: none; }
.cart-line-thumb img { width: 70px; height: 70px; object-fit: cover; border-radius: 4px; }
.cart-line-details { font-size: 14px; overflow-wrap: break-word; }
.cart-line-details a { color: var(--text); text-decoration: none; font-weight: 500; }
.cart-line-meta { font-size: 12.5px; color: var(--wc-muted); margin-top: 4px; }
/* WooCommerce wraps each variation attribute as a <dl class="variation">
   with block-level <dt>/<dd> pairs (dd's content further wrapped in a
   <p>) — left at browser defaults, "Metal:" and its value each land on
   their own line instead of reading as one line. Forcing the whole
   thing onto a single inline flow fixes that. */
.cart-line-meta dl.variation {
  margin: 0;
  display: block;
}
.cart-line-meta dl.variation dt,
.cart-line-meta dl.variation dd,
.cart-line-meta dl.variation dd p {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  font-weight: 400;
}
.cart-line-meta dl.variation dt::after { content: " "; }
.cart-line-meta dl.variation dt:not(:first-child) { margin-left: 10px; }

/* Column headings — reuses .cart-line's own grid so labels line up exactly
   with the price/subtotal values in every row below, desktop only (the
   850px breakpoint further down hides this and folds price/subtotal back
   into the details column for mobile, same as before). */
.cart-line-headings {
  padding: 0 0 14px;
}
.cart-line-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--wc-muted);
}
.cart-line-heading-price,
.cart-line-heading-subtotal { text-align: right; }
.cart-line-heading-qty { text-align: center; }

.cart-line-qty-label {
  display: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--wc-muted);
  margin-bottom: 4px;
}
.cart-line-price-mobile-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--wc-muted);
}
.cart-line-subtotal-label { display: none; }
.cart-line-price-mobile { display: none; font-size: 13px; color: var(--wc-muted); margin: 6px 0; }
.cart-line-qty { display: flex; flex-direction: column; align-items: center; }
.cart-line-qty .quantity input.qty {
  width: 60px; padding: 8px; border: 1px solid var(--wc-border); border-radius: 4px; text-align: center; font-size: 13px;
}
.cart-line-price-desktop { font-size: 14px; color: var(--wc-muted); white-space: nowrap; text-align: right; }
.cart-line-subtotal { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; text-align: right; }
.cart-line-remove a {
  color: #999; text-decoration: none; font-size: 20px; line-height: 1; display: block; text-align: center;
}
.cart-line-remove a:hover { color: #B3261E; }

.cart-page-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 0;
}
.cart-page-actions .coupon { display: flex; gap: 10px; }
.cart-page-actions .coupon input { flex: 1; max-width: 260px; }

.cart-page-actions-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--wc-border);
}

.continue-shopping {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.continue-shopping-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--wc-muted);
  white-space: nowrap;
}
.continue-shopping-links {
  display: flex;
  gap: 8px;
}
.woocommerce a.button.button-sm {
  padding: 9px 16px;
  font-size: 10.5px;
}

@media (max-width: 480px) {
  .cart-page-actions .coupon input { max-width: none; }
  .cart-page-actions-right { flex-direction: column; align-items: stretch; gap: 14px; }
  .continue-shopping { justify-content: center; flex-direction: column; gap: 8px; }
  .continue-shopping-links { width: 100%; }
  .continue-shopping-links .button { flex: 1; text-align: center; }
  .cart-page-actions-right > button.button { width: 100%; }
}

.cart-page-summary {
  background: var(--wc-bg-light);
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  padding: 30px;
  position: sticky;
  top: 100px;
}
.cart-collaterals h2 {
  font-family: 'Playfair Display', serif; font-weight: 400; font-size: 20px; margin: 0 0 20px;
}
.cart-collaterals table.shop_table {
  width: 100%; border-collapse: collapse;
}
.cart-collaterals table.shop_table th,
.cart-collaterals table.shop_table td {
  padding: 12px 0; border-bottom: 1px solid var(--wc-border); font-size: 13.5px; text-align: left;
}
.cart-collaterals table.shop_table tr:last-child th,
.cart-collaterals table.shop_table tr:last-child td { border-bottom: none; }
.cart-collaterals .order-total th,
.cart-collaterals .order-total td { font-weight: 700; font-size: 15px; color: var(--text); }
.cart-collaterals .wc-proceed-to-checkout a.checkout-button {
  display: block; width: 100%; text-align: center; margin-top: 16px;
}

@media (max-width: 850px) {
  .cart-page-grid { grid-template-columns: 1fr; }
  .cart-page-summary { position: static; }
  .cart-line-headings { display: none; }
  .cart-line { grid-template-columns: 60px 1fr 30px; }
  .cart-line-price-desktop { display: none; }
  .cart-line-price-mobile { display: block; }
  .cart-line-qty { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; margin-top: 8px; }
  .cart-line-qty-label { display: inline; margin-bottom: 0; }
  .cart-line-subtotal { grid-column: 2; text-align: left; margin-top: 8px; }
  .cart-line-subtotal-label { display: inline; }
}

/* ==========================================================================
   Checkout — two-column, Shopify-style
   ========================================================================== */
.woocommerce-checkout .col2-set,
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: start;
}
.woocommerce-checkout #customer_details { grid-column: 1; }
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: var(--wc-bg-light);
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  padding: 30px;
  position: sticky;
  top: 100px;
}
.woocommerce-checkout #order_review_heading {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 20px;
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: -10px;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  padding: 12px 0; border-bottom: 1px solid var(--wc-border); font-size: 13.5px; text-align: left;
}
.woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { width: 100%; float: none; }
.woocommerce-checkout h3 {
  font-family: 'Playfair Display', serif; font-weight: 400; font-size: 18px; margin: 30px 0 18px;
}
.woocommerce-checkout h3:first-child { margin-top: 0; }

#payment {
  background: #fff; border: 1px solid var(--wc-border); border-radius: 6px; padding: 20px; margin-top: 20px;
}
#payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 20px; border-bottom: 1px solid var(--wc-border); }
#payment ul.payment_methods li { margin-bottom: 15px; }
#payment .payment_box { background: var(--wc-bg-light); padding: 14px; border-radius: 4px; font-size: 13px; margin-top: 8px; }
#place_order { width: 100%; margin-top: 16px; }

@media (max-width: 900px) {
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading { grid-column: 1; grid-row: auto; position: static; }
}

/* ==========================================================================
   Slide-out cart drawer
   ========================================================================== */
.nav-cart-trigger {
  background: none; border: none; cursor: pointer; font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
}
.nav-cart-trigger .cart-bag-icon {
  width: 17px; height: 17px; flex-shrink: 0;
  transition: transform .2s ease;
}
.nav-cart-trigger:hover .cart-bag-icon { transform: scale(1.12) rotate(-6deg); }
.cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--gold); color: #fff; border-radius: 50%;
  font-size: 10px; font-weight: 700; line-height: 1;
}

/* Brief "bump" feedback whenever the cart count actually changes (item
   added, quantity edited, etc) — the JS watches .cart-count itself for
   changes rather than hooking every individual add-to-cart code path,
   so it covers all of them (WooCommerce's own AJAX, the custom drawer
   add-to-cart, mini-cart qty edits) automatically. */
@keyframes cartBounce {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-7px) scale(1.12); }
  50%  { transform: translateY(0) scale(0.96); }
  70%  { transform: translateY(-3px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
.nav-cart-trigger.cart-bump .cart-bag-icon,
.nav-cart-trigger.cart-bump .cart-count {
  animation: cartBounce .55s cubic-bezier(.3, 1.6, .5, 1);
}

.cart-drawer-overlay {
  position: fixed !important; inset: 0 !important; background: rgba(20,17,14,.5) !important;
  opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 99998 !important;
}
.cart-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  width: min(420px, 100%) !important;
  background: #fff;
  box-shadow: -10px 0 40px rgba(0,0,0,.15);
  z-index: 99999 !important;
  display: flex !important; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.cart-drawer.open { transform: translateX(0); }
@media (max-width: 600px) {
  .cart-drawer { top: 0 !important; }
}

body.cart-drawer-lock { overflow: hidden; }

.cart-drawer-header {
  position: relative;
  padding: 0;
  border-bottom: 1px solid var(--wc-border);
}
.cart-drawer-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--wc-muted); padding: 4px;
}
.cart-drawer-close:hover { color: var(--text); }

/* Cart / Wishlist tab switcher — full-width segmented bar */
.cart-drawer-tabs {
  display: flex; width: 100%;
}
.cart-tab-btn {
  flex: 1;
  background: var(--wc-bg-light);
  border: none; cursor: pointer;
  padding: 20px 10px;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14.5px;
  color: var(--wc-muted);
  transition: background .2s ease, color .2s ease;
}
.cart-tab-btn.active {
  background: #fff;
  color: var(--text);
}

.cart-tab-panel {
  display: none;
}
.cart-tab-panel.active {
  display: block;
}

/* Wishlist */
.wishlist-empty {
  text-align: center; padding: 60px 10px;
}
.wishlist-empty p { color: var(--wc-muted); margin-bottom: 20px; font-size: 14px; }
.wishlist-items {
  list-style: none; padding: 0; margin: 0;
}
.wishlist-item {
  display: grid; grid-template-columns: 60px 1fr 26px; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--wc-border);
}
.wishlist-item:first-child { padding-top: 0; }
.wishlist-item-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.wishlist-item-name { color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 500; display: block; margin-bottom: 4px; }
.wishlist-item-price { font-size: 12.5px; color: var(--wc-muted); }
.wishlist-item-remove { background: none; border: none; color: #aaa; font-size: 18px; line-height: 1; cursor: pointer; }
.wishlist-item-remove:hover { color: #B3261E; }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

.woocommerce-mini-cart { list-style: none; padding: 0; margin: 0; }
.woocommerce-mini-cart-item {
  display: grid; grid-template-columns: 60px 1fr 26px; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--wc-border); position: relative;
}
.woocommerce-mini-cart-item:first-child { padding-top: 0; }
.mini-cart-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.mini-cart-name { color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 500; display: block; margin-bottom: 4px; overflow-wrap: break-word; }
.mini-cart-meta { font-size: 12px; color: var(--wc-muted); }
/* Same fix as the full cart page's .cart-line-meta — WooCommerce's
   <dl class="variation"> renders "Metal:" and its value as separate
   block-level lines unless forced inline. */
.mini-cart-meta dl.variation {
  margin: 0;
  display: block;
}
.mini-cart-meta dl.variation dt,
.mini-cart-meta dl.variation dd,
.mini-cart-meta dl.variation dd p {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  font-weight: 400;
}
.mini-cart-meta dl.variation dt::after { content: " "; }
.mini-cart-meta dl.variation dt:not(:first-child) { margin-left: 10px; }

.mini-cart-qty-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px;
}
.mini-cart-qty-fixed { font-size: 12px; color: var(--wc-muted); }
.mini-cart-qty-stepper {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--wc-border); border-radius: 4px; overflow: hidden;
}
.mini-cart-qty-stepper .qty-btn {
  width: 26px; height: 26px; border: none; background: var(--wc-bg-light);
  color: var(--text); font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.mini-cart-qty-stepper .qty-btn:hover { background: var(--gold); color: #fff; }
.mini-cart-qty-stepper .qty-btn:disabled { opacity: .5; cursor: not-allowed; }
.mini-cart-qty-input {
  width: 34px; height: 26px; border: none; border-left: 1px solid var(--wc-border);
  border-right: 1px solid var(--wc-border); text-align: center; font-size: 12.5px;
  font-family: 'DM Sans', sans-serif; -moz-appearance: textfield;
}
.mini-cart-qty-input::-webkit-outer-spin-button,
.mini-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mini-cart-line-price { font-size: 12.5px; color: var(--wc-muted); white-space: nowrap; }
.mini-cart-remove {
  color: #aaa; text-decoration: none; font-size: 18px; line-height: 1; text-align: center;
}
.mini-cart-remove:hover { color: #B3261E; }

.cart-drawer-footer { padding-top: 16px; }

/* Free shipping progress bar */
.free-shipping-bar { padding: 0 0 18px; }
.free-shipping-message {
  font-size: 12.5px; color: var(--wc-muted); text-align: center; margin: 0 0 10px;
}
.free-shipping-message strong { color: var(--gold-dark); }
.free-shipping-message.free-shipping-unlocked { color: #1A7D4A; font-weight: 600; }
.free-shipping-track {
  height: 6px; background: var(--wc-border); border-radius: 3px; overflow: hidden;
}
.free-shipping-fill {
  height: 100%; background: #4CAF50; border-radius: 3px;
  transition: width .4s ease;
}

/* Promo code */
.mini-cart-coupon {
  border-top: 1px solid var(--wc-border); padding-top: 16px; margin-top: 4px;
}
.coupon-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: var(--wc-bg-light); border: none; cursor: pointer;
  padding: 12px 14px; border-radius: 4px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text);
}
.coupon-toggle svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--wc-muted); }
.coupon-form {
  display: flex; gap: 8px; margin-top: 10px;
}
.coupon-form input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--wc-border); border-radius: 4px;
  font-family: 'DM Sans', sans-serif; font-size: 13px;
}
.coupon-form button {
  padding: 10px 18px; background: var(--ink); color: #fff; border: none; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; cursor: pointer;
}
.coupon-form button:hover { background: #000; }
.coupon-form button:disabled { opacity: .5; cursor: not-allowed; }
.coupon-message { font-size: 12px; margin-top: 8px; }
.coupon-message.success { color: #1A7D4A; }
.coupon-message.error { color: #B3261E; }
.woocommerce-mini-cart__total {
  display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--text);
  padding: 16px 0; border-top: 1px solid var(--wc-border); margin: 0;
}
.woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.woocommerce-mini-cart__buttons a.button { text-align: center; }
.woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
  background: transparent; color: var(--text); border: 1px solid var(--text);
}
.woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):hover { background: var(--ink); color: #fff; }

/* The drawer lives in the header and opens from every page — not just
   WooCommerce pages, which is where WordPress normally adds a
   ".woocommerce" class to <body>. Since .cart-drawer sits outside that
   ancestor on regular pages, its buttons need their own explicit
   styling rather than relying on ".woocommerce a.button" above, or
   they lose all styling whenever opened from Home/Keepsakes/etc. */
.cart-drawer a.button,
.cart-drawer button.button {
  background: var(--gold);
  color: #fff;
  padding: 13px 26px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: background .2s ease, border-color .2s ease;
}
.cart-drawer a.button:hover,
.cart-drawer button.button:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}
.cart-drawer .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}
.cart-drawer .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):hover {
  background: var(--ink);
  color: #fff;
}

.cart-drawer-empty { text-align: center; padding: 60px 10px; }
.cart-drawer-empty p { color: var(--wc-muted); margin-bottom: 20px; font-size: 14px; }
.cart-drawer-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 240px;
  margin: 0 auto;
}
.cart-drawer-empty-actions .button { width: 100%; }
.cart-drawer a.button.button-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}
.cart-drawer a.button.button-outline:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

@media (max-width: 480px) {
  .cart-drawer { width: 100%; }
}

/* ==========================================================================
   My Account page
   ========================================================================== */

/* Login / Register */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  padding: 34px;
}
.woocommerce-account .u-columns.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.woocommerce-account .u-column1.col-1,
.woocommerce-account .u-column2.col-2 {
  width: 100%;
  float: none;
}
.woocommerce-account .woocommerce-form-login p,
.woocommerce-account .woocommerce-form-register p {
  margin-bottom: 18px;
}
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--wc-muted);
}
.woocommerce-account .lost_password { margin-top: 16px; }
.woocommerce-account .lost_password a { font-size: 13px; color: var(--gold-dark); }
.woocommerce-account .woocommerce-LostPassword { font-size: 13px; margin-top: 14px; }

/* Registration is switched off on this store, so WooCommerce only ever
   prints the "Login" column (".col-1") here, never "Register" (".col-2")
   — a CSS grid with two fixed tracks isn't the right tool for that,
   since an empty second track just leaves a permanent blank gap next to
   whichever column IS there instead of letting that column recentre
   itself. Flexbox with "justify-content: center" sidesteps the problem
   entirely: it centres whatever children actually exist as a group, so
   this centres correctly with just the login card today, and would
   still lay out correctly side-by-side if registration ever gets turned
   back on, with no separate fix needed either way. */
#customer_login.col2-set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 780px;
  margin: 0 auto;
}
#customer_login .col-1, #customer_login .col-2 {
  flex: 0 1 420px;
  width: auto;
  float: none;
}
#customer_login h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 20px;
}
@media (max-width: 700px) {
  #customer_login .col-2 {
    padding-top: 30px;
    border-top: 1px solid var(--wc-border);
  }
}

/* Logged-in dashboard: sidebar nav + content */
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }
/* The two-column "sidebar + content" layout is only for the logged-in
   dashboard. The login / lost-password pages use the same ".woocommerce"
   wrapper, and the old rule squeezed the login form into the 220px sidebar
   column (the cause of the form sitting far left in a narrow box). */
body.logged-in.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 50px;
  align-items: start;
}

/* Logged-out account pages (login, lost password, reset password):
   one centred column on desktop and mobile. */
body.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  max-width: 440px;
  margin: 0 auto;
}
body.woocommerce-account:not(.logged-in) .woocommerce:has(#customer_login) { max-width: 780px; }
body.woocommerce-account:not(.logged-in) .woocommerce > h2 { text-align: center; }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword,
body.woocommerce-account:not(.logged-in) .lost_reset_password {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Browser autofill paints saved logins in its own yellow / olive-green,
   which clashes with the site. Cover it with the normal field colour. */
.woocommerce form input:-webkit-autofill,
.woocommerce form input:-webkit-autofill:hover,
.woocommerce form input:-webkit-autofill:focus,
.woocommerce form select:-webkit-autofill,
.woocommerce form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  overflow: hidden;
}
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--wc-border); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 18px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  background: #fff;
  transition: background .2s ease;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--wc-bg-light); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--gold); color: #fff; font-weight: 600; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #B3261E; }

.woocommerce-MyAccount-content > p:first-child { font-size: 14px; line-height: 1.7; color: var(--wc-muted); }
.woocommerce-MyAccount-content a { color: var(--gold-dark); }
.woocommerce-MyAccount-content > p:first-of-type {
  font-size: 15px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--wc-border);
  margin-bottom: 30px;
}

/* Quick-link cards (injected via functions.php hook, dashboard only) */
.account-quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 10px;
}
.account-quick-links a {
  display: block;
  background: #fff;
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  padding: 24px;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.account-quick-links a:hover { border-color: var(--gold); transform: translateY(-2px); }
.account-quick-links h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  margin: 0 0 6px;
}
.account-quick-links p { font-size: 12.5px; color: var(--wc-muted); margin: 0; }
@media (max-width: 700px) { .account-quick-links { grid-template-columns: 1fr; } }

/* Orders table */
.woocommerce-orders-table,
.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  border: none;
}
.woocommerce-orders-table thead { display: none; }
.woocommerce-orders-table tbody tr {
  display: block;
  background: #fff;
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.woocommerce-orders-table tbody td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--wc-border);
}
.woocommerce-orders-table tbody td:last-child { border-bottom: none; padding-top: 14px; }
.woocommerce-orders-table tbody td::before {
  content: attr(data-title);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--wc-muted);
  font-weight: 600;
}
.woocommerce-orders-table__cell-order-number a { font-weight: 600; color: var(--text); }
.woocommerce-orders-table__cell-order-status mark {
  background: var(--wc-bg-light);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text);
}
.woocommerce-orders-table__cell-order-actions .button { padding: 8px 14px; font-size: 10.5px; }
/* This cell can hold two buttons (e.g. "View" + "Download") rendered as
   plain sibling links with no wrapping element. The general td rule
   above is "justify-content: space-between", which — with the "ACTIONS"
   label (the ::before) as one flex item and TWO buttons as two more —
   spreads all three apart evenly instead of keeping the buttons grouped
   together on the right. Overriding to flex-end bunches the label and
   both buttons at the right edge, and "gap" gives even, deliberate
   spacing between the label and the buttons and between the buttons
   themselves (rather than a cramped run-together or an uneven spread). */
.woocommerce-orders-table__cell-order-actions {
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--wc-border);
  font-size: 13.5px;
  text-align: left;
}

/* Addresses / account details forms */
.woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-MyAccount-content form.edit-account { max-width: 560px; }
.woocommerce-Address { border: 1px solid var(--wc-border); border-radius: 8px; padding: 24px; }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.woocommerce-Address-title h3 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 17px; margin: 0; }
.woocommerce-Address-title a.edit { font-size: 12px; color: var(--gold-dark); }
.woocommerce-Address address { font-size: 13.5px; color: var(--wc-muted); line-height: 1.7; font-style: normal; }

@media (max-width: 800px) {
  body.logged-in.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-account .u-columns.woocommerce-Addresses { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Block-based Cart & Checkout
   ---------------------------------------------------------------------------
   Modern WooCommerce installs default to the Cart/Checkout BLOCKS rather
   than the classic shortcode pages the CSS above targets. Both sets of
   rules are included so styling is correct either way.
   ========================================================================== */
.wc-block-cart, .wc-block-checkout { font-family: 'DM Sans', sans-serif; }
.wp-block-woocommerce-cart .wc-block-cart,
.wp-block-woocommerce-checkout .wc-block-checkout { max-width: none; }
.wc-block-cart__main, .wc-block-checkout__main {
  background: #fff; border: 1px solid var(--wc-border); border-radius: 8px; padding: 20px 26px;
}
.wc-block-cart__sidebar, .wc-block-checkout__sidebar {
  background: var(--wc-bg-light); border: 1px solid var(--wc-border); border-radius: 8px; padding: 26px;
}
.wc-block-cart-item__image img,
.wc-block-components-product-image img { border-radius: 4px; }
.wc-block-components-product-name { color: var(--text); font-weight: 500; font-size: 14px; text-decoration: none; }
.wc-block-components-totals-item__value,
.wc-block-components-totals-item__label { font-size: 13.5px; color: var(--text); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 700; font-size: 15px; }
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--gold) !important; color: #fff !important; border-radius: 2px !important;
  font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .6px !important; text-transform: uppercase !important; border: 1px solid var(--gold) !important;
}
.wc-block-components-button:hover { background: var(--gold-dark) !important; border-color: var(--gold-dark) !important; }
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-select select {
  border-radius: 4px !important; border-color: var(--wc-border) !important; font-family: 'DM Sans', sans-serif !important;
}
.wc-block-components-radio-control__option { border-color: var(--wc-border) !important; border-radius: 4px !important; }
.wc-block-checkout__form h2,
.wc-block-cart__title { font-family: 'Playfair Display', serif !important; font-weight: 400 !important; }

/* --------------------------------------------------------------------
   Block Checkout — clearer step titles + mobile breathing room
   ---------------------------------------------------------------------------
   On narrow screens, "Contact information" / "Billing address" /
   "Payment options" etc. sat almost flush with the screen edge and ran
   straight into each other with no real separation. This gives each
   step its own heading style + a divider, and pads the whole page out
   from the edges on small screens (the safety-net rule on
   .wp-block-woocommerce-checkout covers it even if a specific inner
   class below doesn't match this WooCommerce version exactly).
   -------------------------------------------------------------------- */
.wc-block-components-checkout-step {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--wc-border);
}
.wc-block-components-checkout-step:last-child { border-bottom: none; margin-bottom: 0; }
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  margin: 0 0 16px !important;
}
.wc-block-components-panel,
.wc-block-components-checkout-order-summary {
  border-radius: 8px;
  overflow: hidden;
}
.wc-block-components-panel__button { padding: 16px 18px !important; }
/* Root cause of the "Add coupons" jitter, confirmed via DevTools:
   WordPress's own packages-style.css sets ".wc-block-components-panel__button,
   ...:active, ...:focus, ...:hover { padding-left: 0 !important; }" — that
   :hover variant has higher specificity (two classes' worth) than the
   plain ".wc-block-components-panel__button { padding: 16px 18px !important; }"
   rule just above, so at rest our 18px left padding wins (equal-specificity
   tie, later file), but on hover their rule forcibly overrides just
   padding-left back to 0 — yanking the text 18px to the left the instant
   you hover, and back the instant you don't. Matching their selector
   list (same specificity) and pinning padding-left to our own 18px in
   every one of those states removes the mismatch entirely. */
.wc-block-components-panel__button,
.wc-block-components-panel__button:active,
.wc-block-components-panel__button:focus,
.wc-block-components-panel__button:hover {
  padding-left: 18px !important;
}

/* Order summary line-item quantity badge (the small circle over the
   product thumbnail). No rule in this theme touched it before, so it
   was rendering with a near-white/blank fill and invisible text in
   both themes. Gold background matches every other numeric badge on
   the site (cart count, etc); white text reads fine on light mode's
   deeper gold, and dark-mode.css swaps that to dark ink to stay legible
   against dark mode's lighter gold. */
.wc-block-components-order-summary-item__quantity,
.wc-block-components-product-badge,
.wc-block-components-quantity-badge {
  background-color: var(--gold) !important;
  color: #fff !important;
}

@media (max-width: 600px) {
  .wp-block-woocommerce-checkout,
  .wp-block-woocommerce-cart {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }
  .wc-block-checkout__main,
  .wc-block-checkout__sidebar,
  .wc-block-cart__main,
  .wc-block-cart__sidebar {
    padding: 20px 16px !important;
  }
}

/* --------------------------------------------------------------------
   Add to Bag row — View Cart + Wishlist drop to their own row below
   ---------------------------------------------------------------------------
   Quantity + Add to Bag stay together on the first line; the
   auto-injected "View cart" link and the Wishlist button (both come
   right after the Add to Bag button in the DOM) are pushed onto a new
   line beneath, still side by side with each other. The ::after
   "breaker" trick avoids needing any HTML/JS changes — it's a real
   flex item that always claims the full row width, so anything given
   a higher `order` than it wraps to the next line automatically.
   -------------------------------------------------------------------- */
.woocommerce-page-wrap div.product form.cart:not(.variations_form),
.woocommerce-page-wrap div.product .woocommerce-variation-add-to-cart {
  flex-wrap: wrap;
  row-gap: 12px;
}
.woocommerce-page-wrap div.product form.cart:not(.variations_form)::after,
.woocommerce-page-wrap div.product .woocommerce-variation-add-to-cart::after {
  content: "";
  flex-basis: 100%;
  order: 1;
}
.woocommerce-page-wrap div.product .wishlist-toggle-btn,
.woocommerce-page-wrap div.product a.added_to_cart.wc-forward {
  order: 2;
}

/* "View cart" — WooCommerce only injects this link right after a
   successful add (it's not there on page load, so it's correct that
   it only shows up sometimes) — boxed to match the Wishlist button
   beside it instead of sitting there as a plain underlined link. */
.woocommerce-page-wrap div.product a.added_to_cart.wc-forward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: #fff;
  color: var(--gold-dark);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.woocommerce-page-wrap div.product a.added_to_cart.wc-forward:hover {
  background: var(--gold);
  color: #fff;
}

/* --------------------------------------------------------------------
   Star ratings — both the read-only average-rating display (product
   cards, single product summary, review list) and the clickable
   review-submission widget. Neither ever had real styling: WooCommerce
   ships its own star icon font/CSS for these, but this theme disables
   ALL default WooCommerce styles ("woocommerce_enqueue_styles" filtered
   to an empty array in functions.php), so both were rendering as their
   raw fallback: literal text ("1 of 5 stars", etc). Built here with
   plain Unicode stars (★) instead of depending on WooCommerce's icon
   font, which isn't loaded either.
   -------------------------------------------------------------------- */

/* Read-only average rating (product cards, single product, review list) */
.woocommerce .star-rating {
  overflow: hidden;
  position: relative;
  height: 1.1em;
  line-height: 1.1em;
  width: 5.5em;
  font-size: 14px;
  letter-spacing: 2px;
}
.woocommerce .star-rating::before {
  content: "\2605\2605\2605\2605\2605";
  color: var(--wc-border);
  display: block;
}
.woocommerce .star-rating span {
  overflow: hidden;
  position: absolute;
  top: 0; left: 0;
  height: 100%;
}
.woocommerce .star-rating span::before {
  content: "\2605\2605\2605\2605\2605";
  color: var(--gold);
  display: block;
}

/* Clickable review-submission widget — WooCommerce's accessible
   role="radio" star links; the interactivity (clicking, keyboard,
   syncing the hidden <select>) is handled by WooCommerce's own script,
   this only supplies the missing visuals. */
.comment-form-rating p.stars {
  margin: 0 0 20px;
}
.comment-form-rating p.stars span[role="group"] {
  display: inline-flex;
  gap: 4px;
}
.comment-form-rating p.stars a {
  position: relative;
  display: inline-block;
  width: 22px; height: 22px;
  overflow: hidden;
  text-indent: -9999px;
  text-decoration: none;
  color: var(--wc-border);
}
.comment-form-rating p.stars a::before {
  content: "\2605";
  position: absolute;
  left: 0; top: 0;
  text-indent: 0;
  font-size: 20px;
  line-height: 1;
  color: inherit;
}
/* A star is gold if it's the checked one OR if a LATER sibling is
   checked — CSS's ~ combinator only ever selects later siblings, so
   :has() is needed to look "backwards" and cascade-fill stars 1..N
   when star N is the one actually selected (aria-checked="true"). */
.comment-form-rating p.stars a[aria-checked="true"],
.comment-form-rating p.stars a:has(~ a[aria-checked="true"]) {
  color: var(--gold);
}
.comment-form-rating p.stars span[role="group"]:hover a {
  color: var(--gold);
}
.comment-form-rating p.stars span[role="group"] a:hover ~ a {
  color: var(--wc-border);
}

/* ==========================================================================
   Cookie Consent Banner + Preferences Modal
   ---------------------------------------------------------------------------
   Markup is built and injected by artncast-cookie-consent.js. Colours and
   type match the rest of the site (var(--text)/var(--gold)/var(--gold-dark)
   from style.css, var(--wc-muted)/var(--wc-border)/var(--wc-bg-light) above).
   ========================================================================== */

/* Bottom banner */
.cookie-consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: #fff;
  border-top: 1px solid var(--wc-border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
  padding: 22px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  transform: translateY(110%);
  transition: transform .45s ease;
}
.cookie-consent-banner.visible { transform: translateY(0); }

.cookie-consent-text {
  flex: 1 1 420px;
  min-width: 0;
}
.cookie-consent-text p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--wc-muted);
}
.cookie-consent-text a {
  color: var(--gold-dark);
  text-decoration: underline;
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

/* Shared button look, used in both the banner and the modal */
.cookie-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--wc-border);
  background: #fff;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cookie-btn:hover { border-color: var(--gold); color: var(--gold-dark); }

.cookie-btn-accept {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.cookie-btn-accept:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }

/* Preferences modal */
.cookie-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(39,37,34,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
.cookie-consent-modal.open {
  opacity: 1;
  visibility: visible;
}
.cookie-modal-box {
  position: relative;
  background: #fff;
  border-radius: 10px;
  max-width: 480px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 36px 32px 28px;
  transform: translateY(14px) scale(.98);
  transition: transform .25s ease;
}
.cookie-consent-modal.open .cookie-modal-box { transform: translateY(0) scale(1); }

.cookie-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--wc-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.cookie-modal-close:hover { background: var(--wc-bg-light); color: var(--text); }

.cookie-modal-box h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 10px;
}
.cookie-modal-intro {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--wc-muted);
  margin: 0 0 24px;
}

.cookie-category {
  padding: 16px 0;
  border-top: 1px solid var(--wc-border);
}
.cookie-category:last-of-type { border-bottom: 1px solid var(--wc-border); margin-bottom: 26px; }

.cookie-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.cookie-category-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.cookie-category-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--wc-muted);
}

/* Locked "Always Active" label for the necessary-cookies row */
.cookie-toggle-locked {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--wc-muted);
  flex-shrink: 0;
}

/* Toggle switch for Analytics / Marketing */
.cookie-toggle {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  border: none;
  background: var(--wc-border);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease;
}
.cookie-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.cookie-toggle.on { background: var(--gold); }
.cookie-toggle.on .cookie-toggle-knob { transform: translateX(18px); }

.cookie-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.cookie-modal-actions .cookie-btn { flex: 1 1 auto; text-align: center; }

/* Footer "Cookie Settings" link — plain text link, matches its siblings */
.cookie-settings-link { cursor: pointer; }

@media (max-width: 700px) {
  .cookie-consent-banner {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-height: 45vh;
    overflow-y: auto;
  }
  /* The desktop flex-basis (420px) becomes a HEIGHT in a column layout,
     which is what left the big empty gap under the text. */
  .cookie-consent-text { flex: 0 0 auto; }
  .cookie-consent-text p { font-size: 12.5px; line-height: 1.5; }
  .cookie-consent-actions { justify-content: stretch; gap: 8px; }
  .cookie-consent-actions .cookie-btn { flex: 1 1 calc(50% - 4px); padding: 10px 8px; font-size: 11px; letter-spacing: .2px; white-space: normal; }
  /* Accept All gets its own full-width row on top */
  .cookie-consent-actions .cookie-btn-accept { order: -1; flex: 1 1 100%; }
  .cookie-modal-box { padding: 28px 20px 22px; }
}

/* Phones: leave a dimmed strip to the left of the cart so tapping it closes
   the cart, and make the close button a proper tap target. */
@media (max-width: 600px) {
  .cart-drawer { width: min(400px, 88vw) !important; }
  .cart-drawer-close { top: 8px; right: 8px; width: 44px; height: 44px; font-size: 28px; padding: 0; display: flex; align-items: center; justify-content: center; }
}


/* Empty space below the cart items: tapping it closes the cart */
.cart-drawer-body { display: flex; flex-direction: column; }
.cart-drawer-body > * { flex-shrink: 0; }
.cart-close-zone { flex: 1 1 auto !important; min-height: 90px; cursor: pointer; }