/*
 * WooCommerce styling for the Majestic Mindsets theme.
 * Loaded only on shop / product / cart / checkout / account pages.
 * Targets WooCommerce's own markup/classes so AJAX cart + checkout behaviour
 * (which depends on those exact class names) keeps working.
 */

/* ── SHARED ── */

/* Widen the shop/category/single-product container (default .inner-content
   is 760px, sized for blog text — too narrow for a 2-column product grid). */
.woocommerce-page-wrap {
  max-width: 1100px !important;
}

.shop-intro { text-align: center; margin-bottom: 56px; }
.shop-intro .page-title { margin-bottom: 0; }

.woocommerce .woocommerce-breadcrumb {
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 0 48px;
  font-size: 12px;
  opacity: 0.6;
  color: var(--gold-dim);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--gold-dim); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--gold); }

/*
 * Baseline link color for any WooCommerce-generated link not covered by a
 * more specific rule below (e.g. the "Click here to enter your code" coupon
 * toggle, the terms-and-conditions/privacy-policy links, subcategory tile
 * links). Two selectors because the two WC template contexts use different
 * wrappers: .woocommerce-page-wrap is the <main> class on the shop/product
 * archive templates; cart/checkout/my-account are plain WP Pages whose
 * content sits in .page-content, with WooCommerce's own shortcode output
 * wrapped in a nested .woocommerce div. Deliberately NOT just `.woocommerce
 * a` on its own — body also carries a `.woocommerce` class site-wide on
 * these pages, which would reach header/nav/footer links too.
 */
.woocommerce-page-wrap a,
.page-content .woocommerce a {
  color: var(--gold-soft);
  text-decoration: underline;
}
.woocommerce-page-wrap a:hover,
.page-content .woocommerce a:hover { color: var(--gold); }

/*
 * WooCommerce's default "shop page display: subcategories/both" setting
 * injects a product-category tile into the loop (content-product_cat.php).
 * Its <li> already carries the shared `.product` class so the card
 * background/border/hover from the ul.products li.product rule below
 * applies automatically — only its title/count markup (unique to category
 * tiles) needs styling; without this it falls back to a default blue
 * underlined browser link.
 */
.woocommerce-loop-category__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 25px; font-weight: 400; color: var(--white);
  margin: 24px 28px 28px; line-height: 1.35;
}
.woocommerce-loop-category__title .count {
  display: block; margin-top: 8px;
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.1em;
  color: var(--gold-dim); background: none;
}
ul.products li.product-category > a { text-decoration: none; }
ul.products li.product-category img {
  width: 100% !important; height: 240px !important; object-fit: cover !important;
  display: block !important; margin: 0 !important; border-radius: 0 !important;
}

.woocommerce-notices-wrapper { margin-bottom: 24px; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  color: var(--white);
  padding: 16px 20px;
  font-size: 14px;
  margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.woocommerce-error { border-left-color: #c9624c; }
.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button { margin-left: auto; }

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li { list-style: none; }

mark.count { background: none; color: var(--gold); }

/* Inputs shared across cart / checkout / forms */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 14px;
  width: 100%;
}
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce select:focus,
.woocommerce textarea:focus { outline: none; border-color: var(--gold); }

.woocommerce label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 6px; }
.woocommerce .required { color: #c9624c; text-decoration: none; }

/*
 * Country/State fields are enhanced by select2 (still bundled/enqueued by
 * WooCommerce core independently of the woocommerce_enqueue_styles filter
 * above) — it hides the real <select> and renders its own unthemed light
 * dropdown, which is why the plain `.woocommerce select` rule above never
 * reaches it. Re-theme the select2 widget itself.
 */
.select2-container--default .select2-selection--single {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0;
  height: auto;
  padding: 12px 14px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--white);
  line-height: 1.4;
  padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 10px; }
.select2-container--open .select2-selection--single { border-color: var(--gold); }
.select2-dropdown {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0;
}
.select2-search--dropdown .select2-search__field {
  background: var(--midnight);
  border: 1px solid var(--border);
  color: var(--white);
}
.select2-results__option {
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--gold);
  color: var(--midnight);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--border);
  color: var(--white);
}

/*
 * WooCommerce's AJAX order-review/cart refresh (jQuery blockUI) blocks the
 * table with a hardcoded inline `background: rgb(255,255,255)` overlay
 * while it recalculates — not covered by any enqueued stylesheet, since
 * blockUI sets it via inline style, not CSS. On a slow connection (e.g.
 * mobile) that white flash can sit over the order-review/payment box for a
 * noticeable moment, reading as an unstyled white panel. A stylesheet rule
 * with !important beats a plain (non-important) inline style, so this
 * overrides it without touching blockUI's JS.
 */
.woocommerce .blockUI.blockOverlay {
  background: var(--midnight) !important;
  opacity: 0.85 !important;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .button,
.woocommerce-checkout #place_order {
  display: inline-block;
  background: var(--gold);
  color: var(--midnight) !important;
  border: none;
  border-radius: 0;
  text-decoration: none;
  padding: 14px 32px;
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  font-family: 'Inter', sans-serif; font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover { opacity: 0.85; transform: translateY(-1px); }

.woocommerce a.button.alt,
.woocommerce-checkout #place_order { background: var(--gold); }

.price {
  font-family: 'Cormorant Garamond', serif;
  color: var(--gold);
}
.price del { color: var(--muted); opacity: 0.7; text-decoration: line-through; margin-right: 8px; }
.price ins { text-decoration: none; }

.star-rating { color: var(--gold); }
.star-rating::before { color: rgba(255,255,255,0.2); }

/* ── SHOP LOOP / PRODUCT CARDS ── */
.woocommerce-result-count,
.woocommerce-ordering {
  color: var(--muted); font-size: 13px; margin-bottom: 24px;
}
.woocommerce-ordering select { width: auto; padding: 8px 12px; }

/*
 * WooCommerce's own bundled stylesheet (woocommerce-layout.css) sets
 * `.woocommerce-page ul.products li.product { float: left; width: 22.05% }`
 * for its legacy column system. That selector is MORE specific than a plain
 * `ul.products li.product` rule, so it wins and shrinks every card to ~22%
 * of its grid cell — the cause of the narrow-card / one-word-wrap bug.
 * The float/width/margin resets below use !important to guarantee this
 * theme's grid sizing wins regardless of load order.
 */
ul.products {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px;
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
}
@media (min-width: 700px) {
  ul.products {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
}
ul.products li.product {
  float: none !important;
  width: 100% !important;
  min-width: 280px;
  margin: 0 !important;
  background: var(--panel);
  border: 1px solid var(--border);
  list-style: none;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s, border-color 0.3s;
}
ul.products li.product:hover { transform: translateY(-6px); border-color: rgba(201,168,76,0.5); }

ul.products li.product .woocommerce-loop-product__link,
ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  text-decoration: none; color: inherit;
}
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img.wp-post-image {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  outline: none !important;
  transition: transform 0.4s;
}
ul.products li.product:hover img.attachment-woocommerce_thumbnail,
ul.products li.product:hover img.wp-post-image { transform: scale(1.04); }

ul.products li.product .onsale {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--gold); color: var(--midnight);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 5px 12px; font-weight: 600; border-radius: 0;
}

ul.products li.product .product-label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-dim); margin: 24px 28px 10px; width: auto;
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 25px !important; font-weight: 400; color: var(--white);
  margin: 0 28px 12px; line-height: 1.35; width: auto; white-space: normal;
}
ul.products li.product .product-desc {
  font-size: 13px; color: var(--muted); line-height: 1.85;
  margin: 0 28px 20px; width: auto; white-space: normal;
}
ul.products li.product .woocommerce-product-rating,
ul.products li.product .star-rating {
  padding-left: 24px;
  padding-right: 24px;
}
ul.products li.product .woocommerce-product-rating {
  margin-bottom: 20px;
}
ul.products li.product .price {
  font-size: 22px; margin: 20px 28px 24px; padding-top: 20px;
  border-top: 1px solid var(--border); width: auto !important; float: none !important;
}
ul.products li.product .button {
  margin: 0 28px 28px; text-align: center; padding: 12px 0;
  width: auto !important; float: none !important;
}

.woocommerce-pagination { margin-top: 24px; }
.woocommerce-pagination ul.page-numbers {
  list-style: none; display: flex; gap: 8px; padding: 0; justify-content: center;
}
.woocommerce-pagination .page-numbers li { list-style: none; }
.woocommerce-pagination a, .woocommerce-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--border); color: var(--muted);
  font-size: 13px; text-decoration: none;
}
.woocommerce-pagination .current { background: var(--gold); color: var(--midnight); border-color: var(--gold); }
.woocommerce-pagination a:hover { border-color: var(--gold); color: var(--gold); }

.woocommerce-info.woocommerce-no-products-found {
  text-align: center; display: block;
}

/* ── SINGLE PRODUCT ── */

/* Neutralize .inner-content max-width/padding constraints on single product pages */
body.single-product .inner-content {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Product layout container */
.woocommerce div.product {
  display: grid;
  /*
   * minmax(0, 1fr), not a bare 1fr. A bare 1fr track still uses `auto` as
   * its minimum sizing function, which lets an oversized descendant (see
   * the flexslider comment below) inflate the track via min-content
   * contribution — min-width/overflow on the grid item weren't enough to
   * stop it in testing. minmax(0, 1fr) pins the track's own minimum to 0,
   * which is the spec-guaranteed way to force a true 50/50 split
   * regardless of what a descendant reports as its intrinsic size.
   */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 48px;
  align-items: start;
}

/* Neutralize WC bundled float/width on images and summary */
.woocommerce div.product div.summary,
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  min-width: 0;
}

/*
 * The `1fr` grid track on .woocommerce div.product above has an implicit
 * min-width of `auto`, which by spec falls back to the MIN-CONTENT size of
 * a grid item's subtree when the item's own overflow is visible.
 * WooCommerce's flexslider sets .woocommerce-product-gallery__wrapper's
 * width to (slide count × 100%) via inline style so it can slide between
 * images — on a multi-image gallery that's several times the viewport
 * width. .flex-viewport (an inner wrapper) already has overflow: hidden and
 * correctly clips what's painted, but that doesn't stop the outer .images
 * box itself (overflow: visible) from reporting the oversized descendant's
 * width as its min-content contribution, which blows out the grid track and
 * squeezes the summary column to a sliver. Giving .images its own
 * overflow: hidden makes ITS min-content contribution collapse per spec,
 * fixing track sizing without changing how the slider itself renders.
 */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
  overflow: hidden;
}

/*
 * NOT position: sticky. .images is a grid item of `.woocommerce div.product`,
 * which also contains .woocommerce-tabs and the related-products section as
 * later same-grid children (WooCommerce hooks output_product_data_tabs on
 * woocommerce_after_single_product_summary, inside this same wrapper div).
 * A sticky grid item's containing block is the grid container's full padding
 * box, not just the item's own row/track — so `position: sticky` here made
 * the image+thumbnails column stay pinned across the ENTIRE grid height
 * (summary row + tabs row + related-products row), overlapping/bleeding
 * through the tabs and related-products content for most of the page
 * scroll, instead of releasing once the two-column row ended. Keep it
 * static; the image simply scrolls with the page like the mobile layout
 * already does.
 */
.woocommerce div.product div.images {
  width: 100%;
}
.woocommerce-product-gallery__wrapper { list-style: none; padding: 0; margin: 0; }
.woocommerce-product-gallery__image { border: 1px solid var(--border); background: var(--panel); }
.woocommerce div.product div.images img {
  width: 100%;
  height: auto;
  display: block;
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  width: calc(25% - 6px);
  margin: 0;
  list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  cursor: pointer;
  opacity: 0.7;
  border: 1px solid var(--border);
  transition: opacity 0.2s, border-color 0.2s;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover { border-color: var(--gold); }
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--gold);
}

/* Summary column */
.woocommerce div.product div.summary {
  width: 100%;
  padding: 0;
  padding-top: 4px;
}
.woocommerce div.product div.summary .product_title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 16px;
  padding: 0;
}
.woocommerce div.product div.summary .price {
  font-size: 28px;
  display: block;
  margin-bottom: 20px;
}
.woocommerce div.product div.summary .woocommerce-product-rating {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.woocommerce div.product div.summary .woocommerce-review-link { color: var(--muted); font-size: 12px; }
.woocommerce div.product div.summary .woocommerce-variation-add-to-cart,
.woocommerce div.product div.summary form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 24px 0;
}
.woocommerce div.product div.summary form.cart .quantity {
  width: auto;
  display: inline-flex;
}
.woocommerce div.product div.summary form.cart .quantity .qty {
  width: 70px;
  text-align: center;
  padding: 14px 10px;
}
.woocommerce div.product div.summary form.cart .single_add_to_cart_button {
  flex: 1;
  min-width: 160px;
  padding: 14px 28px;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.woocommerce div.product div.summary .woocommerce-product-details__short-description {
  color: var(--muted);
  margin: 20px 0;
  line-height: 1.8;
  font-size: 15px;
}
.woocommerce div.product div.summary .woocommerce-product-details__short-description p { margin-bottom: 14px; }
.woocommerce div.product div.summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.woocommerce div.product div.summary .woocommerce-product-details__short-description ul {
  padding-left: 20px;
  margin-bottom: 14px;
}
.woocommerce div.product div.summary .woocommerce-product-details__short-description li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.product_meta {
  font-size: 12px; color: var(--gold-dim); border-top: 1px solid var(--border);
  padding-top: 20px; line-height: 1.9;
}
.product_meta a { color: var(--gold-dim); }
.product_meta a:hover { color: var(--gold); }

/*
 * WooCommerce Multilingual's currency switcher (wcml-*) ships its own
 * light-theme box/border styling more specific than the plain .product_meta
 * a rule above, which is why it was rendering as an unstyled white pill
 * with no room for its own text. Re-theme it in place.
 */
.product_meta .wcml_currency_switcher { display: inline-block; margin-top: 10px; }
.product_meta .wcml-dropdown.wcml-cs { min-width: 160px; }
.product_meta .wcml-cs-active-currency {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
}
.product_meta .wcml-cs-item-toggle {
  color: var(--white) !important;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  white-space: nowrap;
}
/* WCML's flag icon is a raster image with its own opaque white canvas —
   not restyleable via CSS — so it's hidden rather than left as a stray
   white square next to the (already legible) currency text. */
.product_meta .wcml-cs-item-toggle img { display: none; }
.product_meta .wcml-cs-dropdown-list {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}
.product_meta .wcml-cs-dropdown-list a { color: var(--white) !important; }
.product_meta .wcml-cs-dropdown-list a:hover { color: var(--gold) !important; }

/* Product tabs */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 48px;
  width: 100%;
}
.woocommerce-tabs ul.tabs {
  list-style: none; display: flex; gap: 36px; padding: 0; margin: 0 0 32px;
  border-bottom: 1px solid var(--border);
}
.woocommerce-tabs ul.tabs li { list-style: none; }
.woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: 0 0 16px; color: var(--muted); text-decoration: none;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-family: 'Josefin Sans', sans-serif;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--gold); border-bottom-color: var(--gold); }
.woocommerce div.product .woocommerce-tabs .panel {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
  padding: 32px 0;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: 'Cormorant Garamond', serif; color: var(--white); font-size: 26px; margin-bottom: 16px; font-weight: 300;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel--description p {
  margin-bottom: 16px;
  line-height: 1.85;
  font-size: 15px;
  max-width: 720px;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel--description ul {
  padding-left: 24px;
  margin-bottom: 16px;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel--description li {
  margin-bottom: 10px;
  line-height: 1.75;
  font-size: 15px;
}
.woocommerce-Reviews .comment-form-rating label { display: inline; }

/* Related / upsell products */
.woocommerce .related.products,
.woocommerce .upsells.products {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 48px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}
.woocommerce .related.products h2,
.woocommerce .upsells.products h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 28px; color: var(--white); margin-bottom: 32px;
}

/* Desktop: related products in 3 columns */
@media (min-width: 769px) {
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

/* Mobile: single product */
@media (max-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 32px auto;
    padding: 0 20px;
  }
  .woocommerce div.product div.summary .product_title {
    font-size: clamp(24px, 6vw, 32px);
  }
  .woocommerce div.product div.summary form.cart {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce div.product div.summary form.cart .single_add_to_cart_button {
    width: 100%;
    text-align: center;
  }
  .woocommerce div.product div.summary form.cart .quantity {
    width: 100%;
  }
  .woocommerce div.product div.summary form.cart .quantity .qty {
    width: 100%;
  }
  .woocommerce div.product .woocommerce-tabs {
    grid-column: 1;
    padding: 0 20px;
    margin: 24px auto 0;
  }
  .woocommerce .related.products,
  .woocommerce .upsells.products {
    padding: 56px 20px 0;
    margin: 40px auto;
  }
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .woocommerce .woocommerce-breadcrumb {
    padding: 0 20px;
    margin: 16px auto 0;
  }
  .woocommerce div.product div.images .flex-control-thumbs li {
    width: calc(33.33% - 6px);
  }
}

/* ── CART ── */
body.woocommerce-cart .inner-content,
body.woocommerce-checkout .inner-content { max-width: 1000px; }

table.shop_table {
  width: 100%; border-collapse: collapse; margin-bottom: 32px;
  font-size: 14px; color: var(--white);
}
table.shop_table th {
  text-align: left; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold-dim); padding: 14px 12px; border-bottom: 1px solid var(--border);
}
table.shop_table td {
  padding: 18px 12px; border-bottom: 1px solid var(--border); vertical-align: middle;
}
table.cart .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--border); }
table.cart .product-name a { color: var(--white); text-decoration: none; }
table.cart .product-name a:hover { color: var(--gold); }
table.cart td.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; color: var(--muted); text-decoration: none; font-size: 18px;
  border: 1px solid var(--border);
}
table.cart td.product-remove a.remove:hover { color: var(--midnight); background: var(--gold); border-color: var(--gold); }
table.cart .quantity .qty { width: 64px; padding: 10px; }

.woocommerce-cart-form .actions { padding-top: 20px; }
.woocommerce-cart-form .coupon {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px;
}
.woocommerce-cart-form .coupon .input-text { width: auto; max-width: 220px; }

/* WC's bundled CSS also sets float/width percentages on these (e.g.
   `.cart_totals{float:right;width:48%}`, `.related{width:30.75%;float:left}`)
   which conflict with the flex layout below — neutralize them. */
.cart-collaterals { display: flex; justify-content: flex-end; }
.cart-collaterals .cart_totals,
.cart-collaterals .related,
.cart-collaterals .cross-sells {
  float: none !important; width: 100% !important;
}
.cart-collaterals .cart_totals {
  background: var(--panel); border: 1px solid var(--border); padding: 32px; max-width: 420px;
}
.cart_totals h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 26px; color: var(--white); margin-bottom: 20px;
}
.cart_totals table { width: 100%; font-size: 14px; }
.cart_totals table th { color: var(--muted); text-align: left; padding: 10px 0; font-weight: 400; border-bottom: 1px solid var(--border); }
.cart_totals table td { text-align: right; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--white); }
.cart_totals .order-total td, .cart_totals .order-total th { font-size: 18px; border-bottom: none; }
.cart_totals .order-total .amount { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 22px; }
.wc-proceed-to-checkout { margin-top: 20px; }
.wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; }
.woocommerce-shipping-calculator { margin-top: 16px; font-size: 13px; }
.woocommerce-shipping-calculator a { color: var(--gold-soft); }

.cross-sells { margin-top: 56px; }
.cross-sells h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 28px; color: var(--white); margin-bottom: 24px; }

/* ── CHECKOUT ── */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.woocommerce-checkout .form-row { margin-bottom: 18px; }
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { display: inline-block; width: 48%; }
.woocommerce-checkout .form-row-first { margin-right: 4%; }
.woocommerce-checkout h3#order_review_heading {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 28px; color: var(--white);
  margin: 8px 0 24px; padding-top: 32px; border-top: 1px solid var(--border);
}
.woocommerce-checkout-review-order-table { background: var(--panel); border: 1px solid var(--border); padding: 24px; }
.woocommerce-checkout-review-order-table thead th { border-bottom: 1px solid var(--border); }
.woocommerce-checkout-review-order-table .cart-subtotal, .woocommerce-checkout-review-order-table .order-total { font-weight: 500; }
.woocommerce-checkout-review-order-table .order-total .amount { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 20px; }

ul.payment_methods {
  list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--border);
}
ul.payment_methods li { list-style: none; padding: 16px 0; border-bottom: 1px solid var(--border); }
ul.payment_methods li label { display: inline; color: var(--white); font-size: 14px; margin-left: 8px; }
.payment_box {
  background: rgba(201,168,76,0.05); border: 1px solid var(--border); padding: 16px; margin-top: 12px;
  font-size: 13px; color: var(--muted);
}
.woocommerce-terms-and-conditions-wrapper { margin-top: 20px; font-size: 13px; }
#place_order { width: 100%; margin-top: 20px; padding: 16px; font-size: 13px; }

.woocommerce-form-login, .woocommerce-form-coupon {
  background: var(--panel); border: 1px solid var(--border); padding: 24px; margin-bottom: 24px;
}

/*
 * Reorder checkout: order summary first, one express-checkout row, then a
 * collapsed-by-default manual-entry toggle revealing billing + payment
 * together. Uses CSS `order` only — no template/hook-position changes — so
 * WooCommerce's checkout.js and the WooPayments/Stripe scripts see their
 * normal DOM structure and initialize exactly as they did before. Fragment
 * refreshes (update_checkout) replace content INSIDE #order_review / the
 * gateway boxes by id/class, not by position, so reordering via `order`
 * survives those refreshes.
 */
.woocommerce-checkout form.checkout {
  display: flex;
  flex-direction: column;
}
.woocommerce-checkout form.checkout > h3#order_review_heading { order: 1; }
.woocommerce-checkout form.checkout > #order_review { order: 2; }
.woocommerce-checkout form.checkout > .wcpay-express-checkout-wrapper { order: 3; }
.woocommerce-checkout form.checkout > .mm-manual-toggle-input,
.woocommerce-checkout form.checkout > .mm-manual-toggle-label { order: 4; }
.woocommerce-checkout form.checkout > #customer_details { order: 5; }

/*
 * Billing-first checkout override: billing details first, order summary
 * (with payment fields + Place Order button nested inside, in that order)
 * last. `body.mm-billing-first-checkout` is only added (see mm-payments-guard.php)
 * when the cart contains a Free or Member product — both exist to capture
 * account/contact data as their primary action. Lifetime (a deliberate
 * one-time purchase decision, confirmed correct seeing price first) never
 * gets this class and keeps the summary-first order above untouched.
 */
body.mm-billing-first-checkout form.checkout > .wcpay-express-checkout-wrapper { order: 1; }
body.mm-billing-first-checkout form.checkout > .mm-manual-toggle-input,
body.mm-billing-first-checkout form.checkout > .mm-manual-toggle-label { order: 2; }
body.mm-billing-first-checkout form.checkout > #customer_details { order: 3; }
body.mm-billing-first-checkout form.checkout > h3#order_review_heading { order: 4; }
body.mm-billing-first-checkout form.checkout > #order_review { order: 5; }

/*
 * Duplicate express-checkout row: the WooCommerce Stripe Gateway plugin's
 * own Express Checkout Element duplicated WooPayments' express-checkout
 * row (both plugins are enabled; both offer Apple Pay / Google Pay).
 * Fixed at the source — Stripe Gateway's `express_checkout_button_locations`
 * setting no longer includes "checkout" — this is a CSS safety net only,
 * in case that setting value doesn't apply for any reason (e.g. a stale
 * cached option read).
 */
.woocommerce-checkout #wc-stripe-express-checkout-element,
.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
  display: none !important;
}

.mm-manual-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mm-manual-toggle-label {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--border); padding: 16px 20px;
  margin: 24px 0; cursor: pointer; color: var(--white);
  font-family: 'Cinzel', serif; text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em;
}
.mm-manual-toggle-label::after {
  content: '+'; color: var(--gold); font-size: 18px; line-height: 1; font-family: sans-serif;
}
.mm-manual-toggle-input:checked ~ .mm-manual-toggle-label::after { content: '\2212'; }
.mm-manual-toggle-open-text { display: none; }
.mm-manual-toggle-input:checked ~ .mm-manual-toggle-label .mm-manual-toggle-closed-text { display: none; }
.mm-manual-toggle-input:checked ~ .mm-manual-toggle-label .mm-manual-toggle-open-text { display: inline; }

/*
 * Collapsed by default via max-height/overflow (not display:none) so any
 * Stripe/WooPayments Elements iframe mounted inside #payment keeps a real
 * width to size against, instead of the 0x0 sizing Stripe.js can end up
 * with when its container starts at display:none.
 */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #payment {
  max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; margin: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
body:has(.mm-manual-toggle-input:checked) .woocommerce-checkout #customer_details {
  max-height: 3000px; overflow: visible; opacity: 1; pointer-events: auto; margin-bottom: 40px;
}
body:has(.mm-manual-toggle-input:checked) .woocommerce-checkout #payment {
  max-height: 3000px; overflow: visible; opacity: 1; pointer-events: auto;
}

@media (max-width: 768px) {
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { width: 100%; margin-right: 0; }
  .cart-collaterals { justify-content: stretch; }
  .cart-collaterals .cart_totals { max-width: none; }
  table.shop_table_responsive thead { display: none; }
  table.shop_table_responsive tr { display: block; border-bottom: 1px solid var(--border); }
  table.shop_table_responsive td { display: flex; justify-content: space-between; border-bottom: none; }
  table.shop_table_responsive td::before { content: attr(data-title); color: var(--gold-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
}

/* ── PRODUCT GRID / MOBILE ── */
@media (max-width: 600px) {
  .woocommerce-page-wrap { padding-left: 16px !important; padding-right: 16px !important; }

  ul.products {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  ul.products li.product {
    width: 100% !important;
    min-width: 0;
  }
  ul.products li.product img.attachment-woocommerce_thumbnail,
  ul.products li.product img.wp-post-image {
    height: 200px !important;
  }

  /* Internal card padding tightened to 16px on mobile. */
  ul.products li.product .product-label,
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product .product-desc,
  ul.products li.product .price {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  ul.products li.product .woocommerce-product-rating,
  ul.products li.product .star-rating {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Add to cart button full width. */
  ul.products li.product .button {
    display: block !important;
    width: calc(100% - 32px) !important;
    margin: 0 16px 16px !important;
  }

}