/* ==========================================================================
   WooCommerce pieces that have no equivalent in the static build: the
   variations form, quantity inputs, tabs, reviews, cart, checkout and
   account pages. Styled with the theme's own tokens so they sit inside the
   original design rather than looking like default WooCommerce.
   ========================================================================== */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; margin-bottom: 24px; padding: 16px 20px;
  background: var(--mist); border-left: 3px solid var(--plum);
  border-radius: var(--radius); font-size: .95rem;
}
.woocommerce-error { border-left-color: #A1332B; }
.woocommerce-message .button, .woocommerce-info .button { float: right; }

/* ---- Quantity ---- */
.quantity { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.quantity .qty {
  width: 64px; min-height: 46px; border: 0; background: transparent; text-align: center;
  font-family: var(--sans); font-size: .95rem; color: var(--ink);
}
.quantity input[type=number]::-webkit-outer-spin-button,
.quantity input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Buttons ---- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border: 0; border-radius: var(--radius);
  background: var(--plum); color: var(--cream);
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce button.button.alt:hover { background: var(--plum-deep); color: var(--cream); }
.woocommerce button.button.alt, .woocommerce a.button.alt { background: var(--plum); }
.woocommerce .button.wc-backward { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* ---- Single product summary ---- */
.product-info .price { display: none; } /* price is printed by the template above */
.product-info form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 28px 0 8px; }
.product-info form.cart .button { flex: none; }
.product-info .variations { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.product-info .variations th, .product-info .variations td { padding: 8px 0; text-align: left; vertical-align: middle; }
.product-info .variations label { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.product-info .variations select {
  appearance: none; min-width: 220px; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: .95rem;
}
.product-info .woocommerce-variation-price { margin-bottom: 14px; font-size: 1.2rem; }
.product-info .stock { font-size: .85rem; color: var(--ink-2); }
.product-info .product_meta { margin-top: 24px; font-size: .82rem; color: var(--ink-2); }
.product-info .product_meta > span { display: block; margin-top: 6px; }

/* ---- Gallery ---- */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { border-radius: var(--radius-lg); overflow: hidden; }
.woocommerce-product-gallery img { width: 100%; height: auto; display: block; }
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs img { border-radius: var(--radius); cursor: pointer; opacity: .75; transition: opacity .3s var(--ease); }
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs .flex-active { opacity: 1; }
.woocommerce-product-gallery__trigger { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* ---- Tabs & reviews ---- */
.woocommerce-tabs { margin-top: clamp(48px, 6vw, 88px); }
.woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 28px; list-style: none; border-bottom: 1px solid var(--line); }
.woocommerce-tabs ul.tabs li a {
  display: block; padding: 14px 0; font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--plum); box-shadow: inset 0 -2px 0 var(--plum); }
.woocommerce-tabs .panel { padding-top: 28px; max-width: 70ch; color: var(--ink-2); }
.woocommerce-tabs .panel h2 { font-family: var(--serif); font-weight: 350; font-size: 1.6rem; color: var(--ink); }
.star-rating span { color: var(--gold); }

/* ---- Ordering select in the listing bar ---- */
.listing-tools .woocommerce-ordering select {
  appearance: none; border: 1px solid var(--line); background: var(--white);
  padding: 10px 40px 10px 16px; border-radius: var(--radius);
  font-size: .82rem; letter-spacing: .04em; color: var(--ink); cursor: pointer;
}

/* ---- Cart, checkout, account ---- */
.woo-page .container { padding-block: clamp(32px, 4vw, 56px); }
.woocommerce table.shop_table {
  width: 100%; border-collapse: collapse; border: 0; margin-bottom: 32px;
}
.woocommerce table.shop_table th {
  padding: 0 0 14px; text-align: left; border-bottom: 1px solid var(--line);
  font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}
.woocommerce table.shop_table td { padding: 20px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.woocommerce table.shop_table img { width: 76px; height: auto; border-radius: var(--radius); }
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-account h2 {
  font-family: var(--serif); font-weight: 350; font-size: 1.5rem; color: var(--ink); margin-bottom: 16px;
}
.woocommerce .cart_totals { background: var(--mist); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-lg); }
.woocommerce form .form-row { display: grid; gap: 8px; margin-bottom: 18px; }
.woocommerce form .form-row label { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container--default .select2-selection--single {
  width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--ink); font-size: .98rem; font-family: var(--sans);
}
.woocommerce-checkout #payment { background: var(--mist); border-radius: var(--radius-lg); padding: clamp(18px, 2vw, 28px); }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.woocommerce-MyAccount-navigation ul { list-style: none; display: grid; gap: 10px; }
.woocommerce-MyAccount-navigation a { font-size: .9rem; }
.woocommerce-MyAccount-navigation .is-active a { color: var(--plum); font-weight: 600; }

@media (max-width: 720px) {
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table tr { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--line); }
  .woocommerce table.shop_table td { border: 0; padding: 0; }
}

/* ==========================================================================
   v1.1 — layout pieces the WordPress build adds on top of the original CSS.
   Everything here uses the existing design tokens; no original rule is edited.
   ========================================================================== */

/* ---- Per-section column counts (set inline by the section template) ---- */
.product-grid--cols { grid-template-columns: repeat(var(--cols-desktop, 4), minmax(0, 1fr)); }
.scroller[style*="--cols-desktop"] > .card {
  flex: 0 0 calc((100% - (var(--cols-desktop, 4) - 1) * var(--gap)) / var(--cols-desktop, 4));
}
@media (max-width: 1024px) {
  .product-grid--cols { grid-template-columns: repeat(var(--cols-tablet, 3), minmax(0, 1fr)); }
  .scroller[style*="--cols-desktop"] > .card {
    flex: 0 0 calc((100% - (var(--cols-tablet, 3) - 1) * var(--gap)) / var(--cols-tablet, 3));
  }
}
@media (max-width: 720px) {
  .product-grid--cols { grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr)); }
  .scroller[style*="--cols-desktop"] > .card {
    flex: 0 0 calc((100% - (var(--cols-mobile, 2) - 1) * var(--gap)) / var(--cols-mobile, 2));
  }
}

/* Cards sit flush to the top of their row and keep a consistent body height. */
.product-grid > .card { align-self: start; }
.card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.section-cta { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }

/* ---- Shop: filter sidebar ---- */
.listing-wrap.has-filters {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px); align-items: start;
}
.listing-filters { position: sticky; top: 100px; }
.filters-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.filters-title { font-family: var(--serif); font-size: 1.2rem; }
.filters-clear { margin-left: auto; font-size: .78rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.filters-close, .listing-filter-toggle { display: none; }
.filter-group { padding-block: 18px; border-top: 1px solid var(--line); }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-h { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.filter-list { display: grid; gap: 9px; list-style: none; }
.filter-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .92rem; color: var(--ink-2); transition: color .3s var(--ease);
}
.filter-link:hover { color: var(--plum); }
.filter-link.is-active { color: var(--plum); font-weight: 600; }
.filter-count { font-size: .76rem; color: var(--ink-2); opacity: .7; }

@media (max-width: 900px) {
  .listing-wrap.has-filters { grid-template-columns: minmax(0, 1fr); }
  .listing-filter-toggle { display: inline-flex; }
  .listing-filters {
    position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); z-index: 90;
    background: var(--white); padding: 24px; overflow-y: auto;
    transform: translateX(-100%); transition: transform .45s var(--ease-out);
    box-shadow: 0 0 60px rgba(var(--ink-rgb), .18);
  }
  .listing-filters.is-open { transform: none; }
  .filters-close { display: inline-grid; margin-left: auto; }
  .filters-clear { margin-left: 0; }
}

/* ---- Category banner ---- */
.page-head--banner { position: relative; isolation: isolate; color: var(--cream); }
.page-head--banner::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--head-image); background-size: cover; background-position: center;
}
.page-head--banner::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .55), rgba(var(--ink-rgb), .72));
}
.page-head--banner .page-title, .page-head--banner .crumbs, .page-head--banner .crumbs a,
.page-head--banner .page-intro, .page-head--banner .eyebrow { color: var(--cream); }

/* ---- Single product ---- */
.product-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; list-style: none; }
.product-thumb {
  display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius);
  overflow: hidden; opacity: .68; transition: opacity .3s var(--ease), box-shadow .3s var(--ease); cursor: pointer;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb:hover, .product-thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--plum); }

.product-info form.cart {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 26px 0 10px; width: 100%;
}
.product-info form.cart .single_add_to_cart_button { flex: 1 1 200px; justify-content: center; }
.product-info .quantity.qty { height: 46px; }
.product-info .quantity.qty input { width: 46px; height: 100%; }
.qty-step { width: 38px; height: 100%; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: inherit; }
.qty-step:hover { color: var(--accent); }
.qty-step .i { width: 14px; height: 14px; }

/* Variations: keep the button row aligned whether or not a choice is made. */
.product-info .variations_form .variations { width: 100%; }
.product-info .woocommerce-variation { width: 100%; }
.product-info .woocommerce-variation-price { margin: 4px 0 14px; font-family: var(--serif); font-size: 1.35rem; color: var(--ink); }
.product-info .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; width: 100%; }
.product-info .woocommerce-variation-add-to-cart .button { flex: 1 1 200px; justify-content: center; }
.product-info .woocommerce-variation-add-to-cart--disabled .button { opacity: .5; cursor: not-allowed; }
.product-info .reset_variations { font-size: .8rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

.product-faq { margin-top: clamp(48px, 6vw, 88px); }
.product-faq .faq-list { max-width: 820px; }

/* ---- Quick view (server-rendered) ----
   The panel is a two-column grid, so the loaded markup has to sit in it as
   direct children: display:contents lets the wrapper disappear from layout. */
.qv-server { display: contents; }
.qv-server[hidden] { display: none; }
.modal-panel .qv-media { min-height: 0; max-height: min(720px, calc(100dvh - 48px)); }
.modal-panel .qv-media img { width: 100%; height: 100%; object-fit: cover; }
.qv-loading { grid-column: 1 / -1; padding: 64px 24px; text-align: center; color: var(--ink-2); }

/* Add-to-cart and variations inside the quick view. */
.qv-body form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 4px; width: 100%; }
.qv-body form.cart .button { flex: 1 1 180px; justify-content: center; }
.qv-body .variations { width: 100%; border-collapse: collapse; }
.qv-body .variations th, .qv-body .variations td { display: block; width: 100%; text-align: left; padding: 0; }
.qv-body .variations th { padding-top: 10px; }
.qv-body .variations label {
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2);
}
.qv-body .variations select {
  appearance: none; width: 100%; margin-top: 6px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--ink); font-family: var(--sans); font-size: .95rem;
}
.qv-body .woocommerce-variation { width: 100%; }
.qv-body .woocommerce-variation-price { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); margin: 10px 0 4px; }
.qv-body .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
.qv-body .woocommerce-variation-add-to-cart .button { flex: 1 1 180px; justify-content: center; }
.qv-body .reset_variations { font-size: .8rem; color: var(--ink-2); }
.qv-body .stock, .qv-body .product_meta { font-size: .82rem; color: var(--ink-2); }

@media (max-width: 720px) {
  .modal-panel .qv-media { aspect-ratio: 16 / 10; }
}

/* ---- Cart drawer variation line ---- */
.line-variation { font-size: .8rem; color: var(--ink-2); margin-top: 2px; }
.line-variation p { margin: 0; }

/* ---- Cart page ---- */
.woocommerce-cart-form { margin-bottom: 8px; }
.woocommerce table.shop_table td.product-quantity .quantity.qty { height: 42px; }
.woocommerce .actions .button[name="update_cart"] {
  background: var(--plum); color: var(--cream); opacity: 1;
}
.woocommerce .actions .button[name="update_cart"]:disabled {
  background: var(--mist); color: var(--ink-2); opacity: 1; cursor: not-allowed;
}
.woocommerce .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.woocommerce .coupon .input-text {
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 180px;
}
.woocommerce .cart-collaterals { display: grid; justify-content: end; }
.woocommerce .cart_totals { min-width: min(420px, 100%); }

/* ---- Checkout: summary on the right ---- */
.woocommerce-checkout form.checkout {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 3vw, 56px); align-items: start;
}
.woocommerce-checkout form.checkout .col2-set,
.woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review { grid-column: 2; }
.woocommerce-checkout form.checkout #order_review {
  position: sticky; top: 100px; background: var(--mist);
  border-radius: var(--radius-lg); padding: clamp(18px, 2vw, 28px);
}
.woocommerce-checkout form.checkout #order_review_heading { margin-bottom: 12px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
@media (max-width: 900px) {
  .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review { grid-column: 1; }
  .woocommerce-checkout form.checkout #order_review { position: static; }
}

/* ---- Blog single ---- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(28px, 4vw, 64px); align-items: start; }
.post-aside { position: sticky; top: 100px; display: grid; gap: 28px; }
.post-aside ul { list-style: none; display: grid; gap: 10px; }
.post-aside a { font-size: .92rem; color: var(--ink-2); }
.post-aside a:hover { color: var(--plum); }
.aside-products a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.aside-products .line-media { width: 56px; }
.post-hero { margin-bottom: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); aspect-ratio: 16 / 9; }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-aside { position: static; }
}

/* ---- Currency switcher in the header ---- */
.header-currency { display: inline-flex; align-items: center; }
.header-currency .scp-switcher { position: relative; font-family: var(--sans); font-size: .8rem; z-index: 60; }
.header-currency .scp-switcher-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--ink); cursor: pointer; line-height: 1;
}
.header-currency .scp-switcher-toggle:hover { border-color: var(--plum); color: var(--plum); }
.header-currency .scp-switcher-panel {
  position: absolute; top: calc(100% + 8px); right: 0; left: auto;
  width: min(260px, 80vw); max-height: 320px; overflow-y: auto; z-index: 70;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(var(--ink-rgb), .16); padding: 8px;
}
.header-currency .scp-search-wrap { padding: 4px; }
.header-currency .scp-search-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .85rem; background: var(--cream); color: var(--ink);
}
.header-currency .scp-options-list { display: grid; gap: 2px; margin-top: 6px; list-style: none; }
.header-currency .scp-option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border-radius: var(--radius); background: none; border: 0;
  text-align: left; cursor: pointer; color: var(--ink); font-size: .86rem;
}
.header-currency .scp-option:hover, .header-currency .scp-option[aria-selected="true"] { background: var(--mist); color: var(--plum); }
@media (max-width: 720px) { .header-currency .scp-name { display: none; } }

/* ==========================================================================
   v1.2 — cart and checkout layout
   ========================================================================== */

.woo-content { width: 100%; }

/* Cart: items on the left, totals in a sticky card on the right.
   WooCommerce floats these by default and the markup nesting varies between
   versions, so the layout is driven from the two elements themselves rather
   than from a fixed parent selector. */
.woocommerce-cart .woo-content .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 380px);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.woocommerce-cart .woo-content .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; width: 100%; float: none; margin: 0; }
.woocommerce-cart .cart-collaterals {
  grid-column: 2; width: 100%; float: none; display: block; position: sticky; top: 100px;
}
.woocommerce-cart .cart-collaterals .cross-sells { display: none; }
.woocommerce-cart .cart_totals {
  width: 100%; float: none; min-width: 0;
  background: var(--mist); border-radius: var(--radius-lg); padding: clamp(20px, 2.4vw, 30px);
}
.woocommerce-cart .cart_totals h2 { margin-bottom: 14px; white-space: nowrap; }
.woocommerce-cart .cart_totals table.shop_table { margin: 0; }
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td { padding: 12px 0; font-size: .92rem; }
.woocommerce-cart .cart_totals th { width: 42%; white-space: nowrap; }
.woocommerce-cart .cart_totals td { text-align: right; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td { font-weight: 600; font-size: 1rem; }
.woocommerce-cart .cart_totals .wc-proceed-to-checkout { padding: 16px 0 0; }
.woocommerce-cart .cart_totals .checkout-button {
  display: flex; width: 100%; justify-content: center; text-align: center;
  white-space: nowrap; padding-inline: 16px; font-size: .7rem; letter-spacing: .12em;
}
.woocommerce-cart .shipping-calculator-button { font-size: .85rem; }
.woocommerce-cart .woocommerce-shipping-destination { font-size: .85rem; color: var(--ink-2); }

/* Cart table */
.woocommerce-cart table.cart img { width: 72px; border-radius: var(--radius); }
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td { padding-right: 16px; }
.woocommerce-cart table.cart .product-remove { width: 40px; padding-right: 0; }
.woocommerce-cart table.cart .product-thumbnail { width: 92px; }
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal { width: 120px; text-align: right; padding-right: 0; }
.woocommerce-cart table.cart .product-quantity,
.woocommerce-cart table.cart .product-subtotal { padding-left: 24px; }
.woocommerce-cart table.cart .product-name { min-width: 180px; }
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal { text-align: right; }
.woocommerce-cart table.cart .product-quantity { width: 140px; }
/* display:flex on a <td> drops it out of the table layout and collapses the
   row, so the actions row keeps table-cell and lays out with floats. */
.woocommerce-cart table.cart td.actions { padding-top: 22px; }
.woocommerce-cart table.cart td.actions::after { content: ''; display: table; clear: both; }
.woocommerce-cart table.cart td.actions .coupon { float: left; display: flex; gap: 10px; align-items: center; }
.woocommerce-cart table.cart td.actions .coupon .input-text { min-width: 200px; }
.woocommerce-cart table.cart td.actions .button[name="update_cart"] { float: right; }
.woocommerce-cart .product-remove a.remove {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mist); color: var(--ink-2); font-size: 1rem; text-decoration: none; line-height: 1;
}
.woocommerce-cart .product-remove a.remove:hover { background: var(--plum); color: var(--cream); }

@media (max-width: 900px) {
  .woocommerce-cart .woo-content .woocommerce { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals { grid-column: 1; position: static; }
}

/* ---- Buttons inside the quick view sit outside any .woocommerce wrapper,
       so they need the button styling applied directly. ---- */
.qv-body .button,
.qv-body button[type="submit"],
.qv-body .single_add_to_cart_button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border: 0; border-radius: var(--radius);
  background: var(--plum); color: var(--cream);
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  transition: background-color .4s var(--ease);
}
.qv-body .button:hover, .qv-body button[type="submit"]:hover { background: var(--plum-deep); color: var(--cream); }
.qv-body .button:disabled, .qv-body .disabled { opacity: .5; cursor: not-allowed; }

/* ---- Cart table column widths so the headings don't collide ---- */
.woocommerce-cart table.cart th, .woocommerce-cart table.cart td { padding-right: 16px; }
.woocommerce-cart table.cart .product-remove { width: 40px; padding-right: 0; }
.woocommerce-cart table.cart .product-thumbnail { width: 96px; }
.woocommerce-cart table.cart .product-name { width: auto; }
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal { width: 120px; text-align: right; padding-right: 0; }
.woocommerce-cart table.cart .product-quantity { width: 150px; }
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal { text-align: right; }
.woocommerce-cart table.cart td.actions .coupon { flex: 1 1 260px; }
.woocommerce-cart table.cart td.actions .button[name="update_cart"] { margin-left: auto; }

/* ==========================================================================
   v1.3 — reveal failsafe
   The reveal animation starts elements at opacity:0 and JavaScript brings them
   in. If the scripts ever fail to boot, this makes the content visible anyway
   rather than leaving a blank-looking page.
   ========================================================================== */
.kd-reveal-all [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   v1.6 — archive spacing and filter sidebar
   ========================================================================== */

/* Pagination sat tight under the last row of prices. */
.woocommerce-pagination {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}
.woocommerce-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; border: 0;
}
.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
.woocommerce-pagination .page-numbers {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .85rem; color: var(--ink-2); background: transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.woocommerce-pagination .page-numbers:hover { border-color: var(--plum); color: var(--plum); }
.woocommerce-pagination .page-numbers.current {
  background: var(--plum); border-color: var(--plum); color: var(--cream); font-weight: 600;
}
.woocommerce-pagination .page-numbers.dots { border-color: transparent; }

/* Breathing room under the last row before the pagination or the trust band. */
.listing-results { padding-bottom: 8px; }
.section.listing { padding-bottom: clamp(48px, 6vw, 88px); }

/* Sidebar on the right when chosen in the Customizer. */
.listing-wrap.has-filters.filters-right { grid-template-columns: minmax(0, 1fr) 250px; }
.listing-wrap.has-filters.filters-right .listing-filters { order: 2; }
.listing-wrap.has-filters.filters-right .listing-results { order: 1; }
@media (max-width: 900px) {
  .listing-wrap.has-filters.filters-right { grid-template-columns: minmax(0, 1fr); }
  .listing-wrap.has-filters.filters-right .listing-filters { order: 0; }
}

/* Filter blocks */
.filter-group .filter-list { max-height: 260px; overflow-y: auto; }
.filter-search { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-size: .88rem; }
.filter-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-swatch {
  display: inline-flex; align-items: center; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--ink-2);
}
.filter-swatch:hover { border-color: var(--plum); color: var(--plum); }
.filter-swatch.is-active { background: var(--plum); border-color: var(--plum); color: var(--cream); }
.filters-active { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filters-active .chip-clear {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--mist); border-radius: 999px; font-size: .78rem; color: var(--ink);
}
.filters-active .chip-clear:hover { background: var(--plum); color: var(--cream); }

/* ---- Price range slider (1.7.0) ----
   Two native range inputs share one track. The inputs ignore pointer events
   so only their thumbs are grabbable, which lets both handles sit on the
   same line. --lo / --hi are set by price-filter.js. */
.price-slider { display: grid; gap: 14px; }
.price-slider-values {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--serif); font-size: 1.05rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-slider-sep { color: var(--ink-2); opacity: .6; }
.price-slider-track {
  --lo: 0%; --hi: 100%;
  position: relative; height: 26px; margin-inline: 9px;
}
.price-slider-track::before,
.price-slider-track::after {
  content: ""; position: absolute; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 3px;
}
.price-slider-track::before { left: 0; right: 0; background: var(--line); }
.price-slider-track::after { left: var(--lo); right: calc(100% - var(--hi)); background: var(--plum); }
.price-slider-track input[type="range"] {
  position: absolute; inset: 0 -9px; width: calc(100% + 18px); height: 26px; margin: 0;
  background: none; pointer-events: none; z-index: 2;
  -webkit-appearance: none; appearance: none;
}
.price-slider-track input[type="range"]:focus { outline: none; }
.price-slider-track input[type="range"]::-webkit-slider-runnable-track { background: none; height: 26px; }
.price-slider-track input[type="range"]::-moz-range-track { background: none; }
.price-slider-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab;
  width: 18px; height: 18px; margin-top: 4px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--plum);
  box-shadow: 0 1px 3px rgba(var(--ink-rgb), .18);
  transition: transform .15s ease;
}
.price-slider-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; cursor: grab;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--plum);
  box-shadow: 0 1px 3px rgba(var(--ink-rgb), .18);
}
.price-slider-track input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); }
.price-slider-track input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gold); outline-offset: 2px; }
.price-slider-track input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--gold); outline-offset: 2px; }
.price-slider-actions { display: flex; align-items: center; gap: 16px; }
.price-slider-apply {
  padding: 9px 20px; border: 1px solid var(--plum); border-radius: 999px;
  background: var(--plum); color: var(--cream);
  font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.price-slider-apply:hover { background: var(--plum-deep); border-color: var(--plum-deep); }
.price-slider-apply:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.price-slider-reset { font-size: .78rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.price-slider-reset:hover { color: var(--plum); }
@media (prefers-reduced-motion: reduce) {
  .price-slider-track input[type="range"]::-webkit-slider-thumb { transition: none; }
}

/* ==========================================================================
   Product page layout, gallery slider and variation buttons (1.8.0)
   ========================================================================== */

/* WooCommerce's own stylesheet floats `div.summary` right at 48% width. The
   theme's summary column carries that class, so it was squeezed to half its
   column, leaving a wide empty band on the right. */
.woocommerce div.product .product-info.summary,
.woocommerce-page div.product .product-info.summary {
  float: none; width: auto; clear: none; margin: 0;
}

/* Smaller gallery, wider summary. */
.product-grid-main {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
}
.product-info { max-width: 660px; }
@media (min-width: 901px) {
  .pdp-gallery { position: sticky; top: calc(var(--header-h, 80px) + 20px); }
}

/* ---- Gallery slider ---- */
.pdp-stage { position: relative; }
.pdp-track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; border-radius: var(--radius-lg);
  background: var(--mist);
}
.pdp-track::-webkit-scrollbar { display: none; }
.pdp-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pdp-slide {
  flex: 0 0 100%; min-width: 0; aspect-ratio: 4 / 5;
  scroll-snap-align: start; scroll-snap-stop: always;
  border-radius: 0;
}
.pdp-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pdp-arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(var(--white-rgb), .92); color: var(--ink);
  box-shadow: 0 2px 10px rgba(var(--ink-rgb), .14);
  opacity: 0; transition: opacity .25s var(--ease, ease), background .2s ease;
}
.pdp-arrow .i { width: 18px; height: 18px; }
.pdp-arrow--prev { left: 14px; }
.pdp-arrow--next { right: 14px; }
.pdp-stage:hover .pdp-arrow, .pdp-arrow:focus-visible { opacity: 1; }
.pdp-arrow:hover { background: var(--white); color: var(--plum); }
.pdp-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pdp-arrow:disabled { opacity: 0 !important; pointer-events: none; }

.pdp-dots {
  position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%);
  display: none; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: rgba(var(--ink-rgb), .32);
}
.pdp-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(var(--white-rgb), .6); transition: width .25s ease, background .25s ease; }
.pdp-dot.is-active { width: 18px; background: var(--white); }

/* Thumbnails: one scrolling row, five visible. */
.pdp-thumbs {
  display: flex; gap: 10px; margin-top: 12px; list-style: none;
  overflow-x: auto; scrollbar-width: none; padding: 2px;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }
.pdp-thumbs li { flex: 0 0 calc((100% - 40px) / 5); }
.pdp-thumbs .pdp-thumb { width: 100%; padding: 0; border: 0; background: var(--mist); }
.pdp-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (hover: none) {
  .pdp-arrow { opacity: 1; }
}
@media (max-width: 900px) {
  .product-grid-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pdp-gallery { width: 100%; max-width: 560px; margin-inline: auto; }
  .product-info { max-width: none; }
}
@media (max-width: 720px) {
  .pdp-gallery { max-width: none; }
  .pdp-slide { aspect-ratio: 1 / 1; }
  .pdp-dots { display: flex; }
  .pdp-thumbs { display: none; }
  .pdp-arrow { width: 36px; height: 36px; }
  .pdp-arrow--prev { left: 10px; }
  .pdp-arrow--next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-dot, .pdp-arrow { transition: none; }
}

/* ---- Variations: label above the options, on every screen size ---- */
.variations_form table.variations,
.variations_form table.variations tbody,
.variations_form table.variations tr,
.variations_form table.variations th,
.variations_form table.variations td { display: block; width: 100%; }
.variations_form table.variations { margin-bottom: 4px; }
.variations_form table.variations tr + tr { margin-top: 18px; }
.variations_form table.variations th,
.variations_form table.variations th.label { padding: 0 0 10px; text-align: left; line-height: 1.3; }
.variations_form table.variations td,
.variations_form table.variations td.value { padding: 0; }
.variations_form table.variations label {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.kd-swatch-current {
  letter-spacing: 0; text-transform: none; font-weight: 500; font-size: .88rem; color: var(--ink);
}
.variations_form .reset_variations { display: inline-block; margin-top: 10px; }

/* The select stays for WooCommerce's script; the buttons replace it visually. */
.kd-swatch-wrap { position: relative; }
.kd-swatch-wrap select[data-kd-swatch-select] {
  position: absolute !important; left: 0; top: 0;
  width: 1px !important; min-width: 0 !important; height: 1px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0);
}

/* ---- Variation buttons ---- */
.kd-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.kd-swatch {
  min-width: 64px; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
  font-family: var(--sans); font-size: .9rem; line-height: 1.2; text-align: center;
  cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.kd-swatch:hover { border-color: var(--plum); color: var(--plum); }
.kd-swatch.is-selected,
.kd-swatch.is-selected:hover { background: var(--plum); border-color: var(--plum); color: var(--cream); }
.kd-swatch.is-unavailable:not(.is-selected) {
  background: transparent; color: rgba(var(--ink-rgb), .45);
  border-style: dashed; text-decoration: line-through; text-decoration-color: rgba(var(--ink-rgb), .35);
}
.kd-swatch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 480px) {
  .kd-swatch { flex: 1 1 calc(50% - 4px); padding-inline: 12px; }
}

/* ---- Shop pagination, matched to the journal (1.8.0) ----
   WooCommerce's stylesheet targets `.woocommerce nav.woocommerce-pagination ul
   li span.current` and friends, which outranked the theme's rules: joined boxes,
   floated items, grey current page. The <ul> also carries the `page-numbers`
   class, so it picked up the box styling and drew a frame around everything.
   These selectors are specific enough to win and reset the list itself. */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination { text-align: center; }
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  min-width: 0; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers li {
  float: none; display: block; margin: 0; padding: 0; border: 0; overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers li a,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers li span {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; margin: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--ink-2);
  font-size: .85rem; line-height: 1; text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a:focus-visible,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers li a:focus-visible {
  background: transparent; border-color: var(--plum); color: var(--plum);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers li span.current {
  background: var(--plum); border-color: var(--plum); color: var(--cream); font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.dots,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers li span.dots {
  border-color: transparent; background: transparent;
}

/* ==========================================================================
   Cart and checkout fixes (1.8.0)
   Selectors start with the body class so they outrank WooCommerce's own
   stylesheet, which loads first and uses `.woocommerce .x .y` selectors.
   ========================================================================== */

/* ---- Notices: WooCommerce draws an icon at the left and a blue top border;
   the theme's smaller padding put the icon over the text. ---- */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
  position: relative; padding: 16px 20px 16px 50px;
  border-top: 0; border-left: 3px solid var(--plum);
  background: var(--mist); color: var(--ink); font-size: .92rem;
}
body .woocommerce-error { border-left-color: #A1332B; }
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  color: var(--plum); font-size: 1rem; line-height: 1;
}
body .woocommerce-error::before { color: #A1332B; }
body .woocommerce-info a, body .woocommerce-message a:not(.button) {
  color: var(--plum); text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Cart: WooCommerce sizes .cart_totals to 48% and floats it right, which
   squeezed the card to a sliver inside the theme's column. ---- */
body.woocommerce-cart .cart-collaterals { width: 100%; float: none; }
body.woocommerce-cart .cart-collaterals .cart_totals {
  float: none; width: 100%; min-width: 0; margin: 0;
}
body.woocommerce-cart .cart_totals h2 { font-size: 1.45rem; margin-bottom: 8px; }

/* Totals tables (cart and checkout): label left, value right, on one line.
   The theme's general table-heading style (bottom padding, underline) was
   applied to these labels too, so they sat higher than their values. */
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-checkout #order_review table.shop_table {
  width: 100%; margin: 0; border: 0; border-collapse: collapse; table-layout: auto;
}
body.woocommerce-cart .cart_totals table.shop_table tr,
body.woocommerce-checkout #order_review table.shop_table tr { display: table-row; }
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td,
body.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table td {
  display: table-cell; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line);
  vertical-align: top; line-height: 1.45; background: none;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table tfoot th,
body.woocommerce-checkout #order_review table.shop_table thead th {
  width: auto; padding-right: 16px; text-align: left; white-space: nowrap;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
body.woocommerce-cart .cart_totals table.shop_table td,
body.woocommerce-checkout #order_review table.shop_table td {
  text-align: right; font-size: .95rem; font-weight: 400; color: var(--ink);
}
body.woocommerce-checkout #order_review table.shop_table thead th.product-total { text-align: right; padding-right: 0; }
body.woocommerce-checkout #order_review table.shop_table td strong:not(.product-quantity) { font-weight: 500; }
/* WooCommerce's small-screen sheet prints data-title labels before each cell. */
body.woocommerce-cart .cart_totals table.shop_table td::before,
body.woocommerce-checkout #order_review table.shop_table td::before { content: none; display: none; }
body.woocommerce-checkout #order_review table.shop_table td.product-name { text-align: left; color: var(--ink-2); }
body.woocommerce-cart .cart_totals table.shop_table .order-total th,
body.woocommerce-checkout #order_review table.shop_table .order-total th { color: var(--ink); border-bottom: 0; padding-top: 18px; }
body.woocommerce-cart .cart_totals table.shop_table .order-total td,
body.woocommerce-checkout #order_review table.shop_table .order-total td { padding-top: 14px; }
body.woocommerce-cart .cart_totals table.shop_table .order-total td,
body.woocommerce-checkout #order_review table.shop_table .order-total td {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 400; border-bottom: 0;
}
body.woocommerce-cart .cart_totals .order-total strong,
body.woocommerce-checkout #order_review .order-total strong { font-weight: 500; }

/* Shipping cell: method, destination and "Change address" stacked, right-aligned. */
body.woocommerce-cart .cart_totals #shipping_method,
body.woocommerce-checkout #order_review #shipping_method { list-style: none; margin: 0; padding: 0; }
body.woocommerce-cart .cart_totals #shipping_method li,
body.woocommerce-checkout #order_review #shipping_method li { margin: 0; padding: 0; text-indent: 0; }
body.woocommerce-cart .woocommerce-shipping-destination { margin: 4px 0 0; font-size: .82rem; color: var(--ink-2); }
body.woocommerce-cart .woocommerce-shipping-calculator { margin: 4px 0 0; }
body.woocommerce-cart .shipping-calculator-button { font-size: .82rem; color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
body.woocommerce-cart .shipping-calculator-button::after { display: none; }
body.woocommerce-cart .shipping-calculator-form { text-align: left; margin-top: 12px; }

/* Proceed to checkout: full width, never overflows the card. */
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout { padding: 20px 0 0; }
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
  display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%;
  margin: 0; padding: 16px 18px; box-sizing: border-box;
  background: var(--plum); color: var(--cream); border-radius: var(--radius);
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  white-space: normal; text-align: center; line-height: 1.3;
}
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button:hover { background: var(--plum-deep); }

/* ---- Checkout: details left, order summary right, starting at the top.
   The "Your order" heading sat in the right column's first row while the
   billing form filled that row on the left, so the summary itself only
   started after the whole form. The heading is removed and the summary card
   sits beside the form from the top. ---- */
body.woocommerce-checkout form.checkout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  column-gap: clamp(28px, 4vw, 64px); row-gap: 0; align-items: start;
}
body.woocommerce-checkout form.checkout > * { grid-column: 1 / -1; }
body.woocommerce-checkout form.checkout #order_review_heading { display: none; }
body.woocommerce-checkout form.checkout #customer_details {
  grid-column: 1; grid-row: 2; float: none; width: auto; margin: 0;
}
body.woocommerce-checkout form.checkout #order_review {
  grid-column: 2; grid-row: 2; float: none; width: auto; margin: 0;
  position: sticky; top: calc(var(--header-h) + 20px);
  background: var(--mist); border-radius: var(--radius-lg); padding: clamp(20px, 2.4vw, 30px);
}
/* Validation messages are added to the top of the form; keep them full width above. */
body.woocommerce-checkout form.checkout .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; margin-bottom: 24px; }
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; max-width: none; }
body.woocommerce-checkout .col2-set .col-2 { margin-top: 8px; }
body.woocommerce-checkout .col2-set::before,
body.woocommerce-checkout .col2-set::after { display: none; }

/* First / last name side by side. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row { grid-column: 1 / -1; float: none; width: auto; margin-right: 0; }
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: 1; }
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 2; }

body.woocommerce-checkout #ship-to-different-address { font-size: 1.05rem; margin: 8px 0 16px; }
body.woocommerce-checkout #ship-to-different-address label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout form .form-row textarea { min-height: 96px; }

/* Payment block sits inside the summary card, so it drops its own card. */
body.woocommerce-checkout #order_review #payment {
  margin-top: 20px; padding: 0; background: none; border-radius: 0;
}
body.woocommerce-checkout #payment ul.payment_methods { padding: 0 0 14px; margin: 0; border-bottom: 1px solid var(--line); }
body.woocommerce-checkout #payment ul.payment_methods li { list-style: none; margin: 0 0 8px; }
body.woocommerce-checkout #payment div.payment_box {
  margin: 10px 0 4px; padding: 12px 14px; background: var(--white); color: var(--ink-2);
  border-radius: var(--radius); font-size: .85rem;
}
body.woocommerce-checkout #payment div.payment_box::before { display: none; }
body.woocommerce-checkout #payment .place-order { padding: 16px 0 0; margin: 0; display: grid; gap: 14px; }
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { font-size: .8rem; color: var(--ink-2); }
body.woocommerce-checkout #payment #place_order {
  float: none; width: 100%; padding: 16px 18px; display: flex; justify-content: center; text-align: center;
  background: var(--plum); color: var(--cream); border-radius: var(--radius);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
body.woocommerce-checkout #payment #place_order:hover { background: var(--plum-deep); }

@media (max-width: 900px) {
  body.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); }
  body.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 2; }
  body.woocommerce-checkout form.checkout #order_review { grid-column: 1; grid-row: 3; position: static; margin-top: 28px; }
}
@media (max-width: 480px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 1 / -1; }
}

/* Unit price matched to the subtotal size in the cart table. */
body.woocommerce-cart table.cart td.product-price,
body.woocommerce-cart table.cart td.product-subtotal { font-size: .95rem; color: var(--ink); }
body.woocommerce-checkout #payment input[type="radio"],
body.woocommerce-checkout input[type="checkbox"] { accent-color: var(--plum); }

/* ---- Cart on phones: each item is a compact card ----
   WooCommerce's small-screen sheet hides the product image, forces every
   cell to right-aligned text (with !important) and prints "Price:" style
   labels, which clashed with the theme's grid and scrambled the row. */
@media (max-width: 720px) {
  body.woocommerce-cart .woocommerce table.cart,
  body.woocommerce-cart .woocommerce table.cart tbody { display: block; width: 100%; }
  body.woocommerce-cart .woocommerce table.cart thead { display: none; }

  body.woocommerce-cart .woocommerce table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name  remove"
      "thumb price price"
      "thumb qty   total";
    column-gap: 14px; row-gap: 8px; align-items: center;
    padding: 18px 0; border-bottom: 1px solid var(--line);
  }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td {
    display: block; width: auto; min-width: 0; padding: 0; border: 0; background: none;
    text-align: left !important;
  }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td::before { content: none; display: none; }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-thumbnail {
    display: block; grid-area: thumb; align-self: start;
  }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-thumbnail img { width: 76px; height: auto; aspect-ratio: 1; object-fit: cover; }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-name { grid-area: name; font-size: .95rem; line-height: 1.35; }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-remove { grid-area: remove; justify-self: end; align-self: start; }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-price { grid-area: price; font-size: .85rem; color: var(--ink-2); }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-quantity { grid-area: qty; }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-quantity .quantity.qty { height: 38px; }
  body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-subtotal {
    grid-area: total; justify-self: end; text-align: right !important; font-weight: 500; color: var(--ink);
  }

  /* Coupon on one line, Update cart full width below. */
  body.woocommerce-cart .woocommerce table.cart tr:not(.cart_item) { display: block; }
  body.woocommerce-cart .woocommerce table.cart td.actions {
    display: block; width: 100%; padding: 18px 0 0; border: 0; background: none; text-align: left !important;
  }
  body.woocommerce-cart .woocommerce table.cart tr td { background-color: transparent; }
  body.woocommerce-cart .woocommerce table.cart td.actions .coupon {
    float: none; display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; padding: 0 0 10px;
  }
  body.woocommerce-cart .woocommerce table.cart td.actions .coupon::before,
  body.woocommerce-cart .woocommerce table.cart td.actions .coupon::after { display: none; }
  body.woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text {
    flex: 1 1 0; width: 0; min-width: 0; margin: 0;
  }
  body.woocommerce-cart .woocommerce table.cart td.actions .coupon .button {
    flex: 0 0 auto; width: auto; margin: 0; padding: 13px 16px; white-space: nowrap;
  }
  body.woocommerce-cart .woocommerce table.cart td.actions .button[name="update_cart"] {
    float: none; display: block; width: 100%; margin: 0; padding: 13px 16px;
  }
  body.woocommerce-cart .cart-collaterals { margin-top: 28px; }
}

/* The chosen variation's price is shown under the title (product.js), so
   WooCommerce's copy below the options stays hidden; stock notes still show. */
.product-info .woocommerce-variation-price,
.qv-body .woocommerce-variation-price { display: none; }
.product-info .woocommerce-variation-availability,
.qv-body .woocommerce-variation-availability { margin: 0 0 8px; }

/* ---- Cart / checkout / account spacing: the section padding and the
   container's own padding were stacking into a large empty band under the
   page title. ---- */
.section.woo-page { padding-top: clamp(20px, 2.5vw, 36px); }
.section.woo-page > .container { padding-top: 0; }

/* ---- Country and State dropdowns (select2) ----
   The theme's input padding was applied to select2's outer box, which has a
   fixed height, so the chosen value spilled out underneath it. */
.woocommerce form .form-row .select2-container { width: 100% !important; }
.woocommerce form .form-row .select2-container--default .select2-selection--single {
  height: auto; min-height: 48px; padding: 0; display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 12px 40px 12px 16px; line-height: 1.4; color: var(--ink); font-size: .98rem;
}
.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%; top: 0; right: 10px;
}
.woocommerce form .form-row .select2-container--focus .select2-selection--single,
.woocommerce form .form-row .select2-container--open .select2-selection--single { border-color: var(--plum); }
.select2-dropdown { border-color: var(--line); border-radius: var(--radius); background: var(--white); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--plum); color: var(--cream); }
.select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--line); padding: 8px 10px; }
/* Plain selects (when select2 is off) get the same look. */
.woocommerce form .form-row select {
  width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background-color: var(--white); color: var(--ink); font-size: .98rem;
}

/* ---- Spacing (1.11.0): product page and shop, matched to the tighter
   section rhythm. ---- */
.product { padding-bottom: clamp(40px, 5vw, 72px); }
.woocommerce-tabs, .product-faq { margin-top: clamp(36px, 4.5vw, 60px); }
.section.related { padding-top: clamp(32px, 4vw, 56px); }
.woocommerce nav.woocommerce-pagination, .woocommerce-page nav.woocommerce-pagination { margin-top: clamp(32px, 4vw, 52px); }