/* ============================================================
   WOOCOMMERCE
   Shop, product, cart, checkout and account screens, dressed in
   the site's own design language rather than WooCommerce's.
   ============================================================ */

/* ------------------------------------------------------------
   PLUGIN COLOURS
   WooCommerce and YITH Wishlist both colour themselves through
   custom properties declared on :root — Woo in its purple and
   blue, YITH in whatever its settings screen holds, with blue
   share-button hovers and a teal modal by default. Setting them
   on <body> wins by inheritance, whatever order the plugin
   stylesheets happen to load in.
   ------------------------------------------------------------ */
body {
  /* WooCommerce */
  --woocommerce: var(--ink-deep);
  --wc-primary: var(--ink-deep);
  --wc-primary-text: var(--cream);
  --wc-blue: var(--ink-deep);

  /* YITH Wishlist: buttons */
  --color-add-to-wishlist-background: var(--ink-deep);
  --color-add-to-wishlist-background-hover: var(--ink-medium);
  --color-add-to-wishlist-border: var(--ink-deep);
  --color-add-to-wishlist-border-hover: var(--ink-medium);
  --color-add-to-wishlist-text: var(--cream);
  --color-add-to-wishlist-text-hover: var(--cream);
  --color-add-to-cart-background: var(--ink-deep);
  --color-add-to-cart-background-hover: var(--ink-medium);
  --color-add-to-cart-border: var(--ink-deep);
  --color-add-to-cart-border-hover: var(--ink-medium);
  --color-add-to-cart-text: var(--cream);
  --color-add-to-cart-text-hover: var(--cream);
  --color-button-style-1-background: var(--ink-deep);
  --color-button-style-1-background-hover: var(--ink-medium);
  --color-button-style-1-border: var(--ink-deep);
  --color-button-style-1-border-hover: var(--ink-medium);
  --color-button-style-1-text: var(--cream);
  --color-button-style-1-text-hover: var(--cream);
  --color-button-style-2-background: var(--ink-deep);
  --color-button-style-2-background-hover: var(--ink-medium);
  --color-button-style-2-border: var(--ink-deep);
  --color-button-style-2-border-hover: var(--ink-medium);
  --color-button-style-2-text: var(--cream);
  --color-button-style-2-text-hover: var(--cream);
  --add-to-wishlist-icon-color: var(--ink-deep);
  --added-to-wishlist-icon-color: var(--gold-deep);
  --tooltip-color-background: var(--ink-deep);
  --tooltip-color-text: var(--cream);

  /* YITH Wishlist: share buttons. Every one hovered to Facebook blue. */
  --color-fb-button-background: var(--ink-deep);
  --color-tw-button-background: var(--ink-deep);
  --color-pr-button-background: var(--ink-deep);
  --color-em-button-background: var(--ink-deep);
  --color-wa-button-background: var(--ink-deep);
  --color-fb-button-background-hover: var(--gold-deep);
  --color-tw-button-background-hover: var(--gold-deep);
  --color-pr-button-background-hover: var(--gold-deep);
  --color-em-button-background-hover: var(--gold-deep);
  --color-wa-button-background-hover: var(--gold-deep);
  --color-share-button-color: var(--cream);
  --color-share-button-color-hover: var(--cream);

  /* YITH Wishlist: "added to wishlist" / "move to" modal */
  --modal-colors-icon: var(--gold-deep);
  --modal-colors-primary-button: var(--ink-deep);
  --modal-colors-primary-button-hover: var(--ink-medium);
  --modal-colors-primary-button-text: var(--cream);
  --modal-colors-primary-button-text-hover: var(--cream);
  --modal-colors-secondary-button: var(--gold-deep);
  --modal-colors-secondary-button-hover: var(--ink-deep);
  --modal-colors-secondary-button-text: var(--cream);
  --modal-colors-secondary-button-text-hover: var(--cream);
}

/* Woo's field-hint bubble is hard-coded blue rather than a variable. */
body .woocommerce form .form-row .woocommerce-input-wrapper .description {
  background: var(--ink-deep);
  color: var(--cream);
}

body .woocommerce form .form-row .woocommerce-input-wrapper .description::before {
  border-top-color: var(--ink-deep);
}

/* ------------------------------------------------------------
   NOTICES
   ------------------------------------------------------------ */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 22px;
  border: 0;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  outline: 0;
  background: var(--parchment-warm);
  color: var(--ink-deep);
  font-size: 0.94rem;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  /* Woo emits the notice as a <ul>; drop the marker indent it inherits. */
  padding-left: 22px;
  line-height: 1.55;
  overflow-wrap: break-word;
  word-break: break-word;
}

.woocommerce-message > li,
.woocommerce-info > li,
.woocommerce-error > li,
.woocommerce-noreviews > li {
  list-style: none;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.woocommerce-message > li + li,
.woocommerce-info > li + li,
.woocommerce-error > li + li,
.woocommerce-noreviews > li + li {
  margin-top: 8px;
}

/* Woo marks its notices with a coloured top rule and a glyph from its own icon
   font, absolutely positioned into the padding it expects. The design marks
   them with the gold rule down the left, and the glyph would otherwise land on
   top of the text — its clearfix pseudo-element becomes a flex item besides. */
.woocommerce-message::before,
.woocommerce-message::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-error::before,
.woocommerce-error::after {
  content: none;
  display: none;
}

/* Woo's own stylesheets scope these notices as `.woocommerce .woocommerce-error`
   and `.woocommerce-page ul.woocommerce-error`, which outrank a class-only reset
   and redraw the box. Match that weight to clear the frame for good.

   The error reads as plain text, not a panel: no rule, no fill, no radius, and
   no inset padding. Only the outer spacing and the type scale are kept, so it
   sits in the form the same way the message did inside its box. */
.woocommerce-error,
.woocommerce ul.woocommerce-error,
.woocommerce-page ul.woocommerce-error,
.woocommerce-account ul.woocommerce-error {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: none;
  border-radius: 0;
  padding: 0;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin-left: auto;
}

@media (max-width: 575px) {
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error,
  .woocommerce-noreviews,
  p.no-comments {
    margin-bottom: 18px;
    padding: 13px 16px;
    padding-left: 16px;
    gap: 10px;
    font-size: 0.86rem;
  }

  /* The error is boxless at every width; only its outer spacing narrows. */
  .woocommerce-error,
  .woocommerce ul.woocommerce-error,
  .woocommerce-page ul.woocommerce-error,
  .woocommerce-account ul.woocommerce-error {
    padding: 0;
  }

  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* WooCommerce's generic button, wherever the theme has not replaced it. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  box-sizing: border-box;
  border: var(--btn-border) solid var(--ink-deep);
  border-radius: var(--btn-radius);
  background: var(--ink-deep);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: var(--btn-font);
  line-height: var(--btn-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s var(--ease-elegant);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
  background: var(--ink-medium);
  border-color: var(--ink-medium);
  color: var(--cream);
}

.woocommerce .button.alt,
.woocommerce button.button.alt {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-deep);
}

.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--ink-deep);
}

/* "View" buttons: order rows (account orders, recent orders, order details),
   the downloads table, and the "View cart" link Woo drops into notices on
   product, cart and checkout pages. They sit inside table cells and notice
   bars, so the full CTA box (200px floor, 46px tall) swamped them. They take
   the compact tokens instead, with no width floor. Same size at every
   viewport, like every other button. */
.woocommerce a.button.view,
.woocommerce .woocommerce-orders-table__cell-order-actions .button,
.woocommerce .woocommerce-MyAccount-downloads-file.button,
.woocommerce a.button.wc-forward,
.woocommerce a.added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  width: auto;
  min-height: var(--btn-min-h-sm);
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
  border: var(--btn-border) solid var(--ink-deep);
  border-radius: var(--btn-radius);
  background: var(--ink-deep);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: var(--btn-font-sm);
  line-height: var(--btn-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}

.woocommerce a.button.view:hover,
.woocommerce .woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce .woocommerce-MyAccount-downloads-file.button:hover,
.woocommerce a.button.wc-forward:hover,
.woocommerce a.added_to_cart:hover {
  background: var(--ink-medium);
  border-color: var(--ink-medium);
  color: var(--cream);
}

.woocommerce a.button.view:active,
.woocommerce .woocommerce-orders-table__cell-order-actions .button:active,
.woocommerce .woocommerce-MyAccount-downloads-file.button:active,
.woocommerce a.button.wc-forward:active,
.woocommerce a.added_to_cart:active {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--cream);
  transform: translateY(1px);
}

.woocommerce a.button.view:focus-visible,
.woocommerce .woocommerce-orders-table__cell-order-actions .button:focus-visible,
.woocommerce .woocommerce-MyAccount-downloads-file.button:focus-visible,
.woocommerce a.button.wc-forward:focus-visible,
.woocommerce a.added_to_cart:focus-visible {
  /* Ring switched off site-wide; the button keeps its focus fill. */
  outline: none;
  color: var(--cream);
}

/* Several actions in one order row (Pay / View / Cancel) wrap instead of
   pushing the table wider than a phone. */
.woocommerce .woocommerce-orders-table__cell-order-actions {
  white-space: normal;
}

.woocommerce .woocommerce-orders-table__cell-order-actions .button {
  margin: 2px 4px 2px 0;
}

.woocommerce .woocommerce-orders-table__cell-order-actions .button:last-child {
  margin-right: 0;
}

/* ------------------------------------------------------------
   SHOP ARCHIVE
   ------------------------------------------------------------ */
.shop-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 46px;
  max-width: 1300px;
  margin: 0 auto;
  align-items: start;
}

.shop-layout.is-full {
  grid-template-columns: 1fr;
}

.shop-sidebar {
  position: sticky;
  top: 100px;
}

.shop-widget {
  padding: 24px 22px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--card-bg);
  margin-bottom: 22px;
}

.shop-widget-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink-deep);
}

.shop-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
}

.shop-widget li+li {
  margin-top: 8px;
}

.shop-widget a {
  color: var(--text-secondary);
  text-decoration: none;
}

.shop-widget a:hover {
  color: var(--ink-deep);
}

.shop-intro {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
  color: var(--text-secondary);
}

.shop-toolbar {
  margin-bottom: 34px;
}

.shop-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.shop-result-count,
.woocommerce-result-count {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.woocommerce-ordering {
  display: flex;
  align-items: center;
  gap: 10px;
}

.woocommerce-ordering label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.woocommerce-ordering select {
  padding: 9px 34px 9px 14px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--cream);
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a2744' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Product grid */
ul.products,
.yb-product-grid {
  display: grid;
  grid-template-columns: repeat(var(--yb-shop-columns, 3), minmax(0, 1fr));
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.products.columns-1 {
  --yb-shop-columns: 1;
}

ul.products.columns-2 {
  --yb-shop-columns: 2;
}

ul.products.columns-3 {
  --yb-shop-columns: 3;
}

ul.products.columns-4 {
  --yb-shop-columns: 4;
}

/* WooCommerce's own woocommerce-layout.css still lays the loop out as floats:
   it gives every li.product a percentage width and margin, and adds ::before /
   ::after clearfix pseudo-elements. In a grid container the widths shrink each
   card to a fraction of its track and the two pseudo-elements become grid
   items of their own, leaving an empty first column. Undo all of it — the
   selectors below match Woo's specificity and this sheet loads after it. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
  display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce ul.products.columns-6 li.product,
.woocommerce-page ul.products.columns-1 li.product,
.woocommerce-page ul.products.columns-2 li.product,
.woocommerce-page ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-5 li.product,
.woocommerce-page ul.products.columns-6 li.product,
.woocommerce.columns-1 ul.products li.product,
.woocommerce.columns-2 ul.products li.product,
.woocommerce.columns-3 ul.products li.product,
.woocommerce.columns-5 ul.products li.product,
.woocommerce.columns-6 ul.products li.product,
.woocommerce-page.columns-1 ul.products li.product,
.woocommerce-page.columns-2 ul.products li.product,
.woocommerce-page.columns-3 ul.products li.product,
.woocommerce-page.columns-5 ul.products li.product,
.woocommerce-page.columns-6 ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
  transition: transform 0.45s var(--ease-elegant), box-shadow 0.45s var(--ease-elegant),
    border-color 0.45s var(--ease-elegant);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--gold-pale);
}

.product-card-media {
  position: relative;
  background: var(--parchment-warm);
  overflow: hidden;
}

.product-card-image {
  display: block;
}

/* Woo's `li.product a img` rule (0,3,4) outranks a plain `.product-card-image
   img`, and its `margin: 0 0 1em` opens a gap between the cover and the card
   body. Matched here so the cover sits flush. */
.product-card-image img,
.woocommerce ul.products li.product a.product-card-image img,
.woocommerce-page ul.products li.product a.product-card-image img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  margin: 0;
  transition: transform 0.7s var(--ease-elegant);
}

.product-card:hover .product-card-image img {
  transform: scale(1.04);
}

.product-card-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink-deep);
}

.product-badge--out {
  background: var(--ink-deep);
  color: var(--cream);
}

.product-card-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.4s var(--ease-elegant);
}

.product-card:hover .product-card-actions,
.product-card:focus-within .product-card-actions {
  opacity: 1;
  transform: translateX(0);
}

.product-card-action,
.product-card-action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink-deep);
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s var(--ease-smooth);
}

.product-card-action:hover,
.product-card-action a:hover {
  background: var(--ink-deep);
  color: var(--cream);
}

.product-card-wishlist {
  border: 0;
  background: none;
  width: auto;
  height: auto;
}

.product-card-wishlist .yith-wcwl-add-to-wishlist {
  margin: 0;
}

.product-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 24px 22px 26px;
  flex: 1;
}

.product-card-category {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Woo's `li.product h3` rule (0,3,3) flattens the title to 1em with its own
   padding, which costs the card its type hierarchy. */
.product-card-title,
.woocommerce ul.products li.product h3.product-card-title,
.woocommerce-page ul.products li.product h3.product-card-title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.28;
  margin: 0;
  padding: 0;
}

.product-card-title a {
  color: var(--ink-deep);
  text-decoration: none;
}

.product-card-title a:hover {
  color: var(--ink-medium);
}

.product-card-excerpt {
  color: var(--text-secondary);
  font-size: 0.9rem;
  flex: 1;
  margin: 0;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.product-card-price {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink-deep);
}

.product-card-price del {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-right: 6px;
}

.product-card-price ins {
  text-decoration: none;
  color: var(--gold);
}

.yb-ajax-add-to-cart.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.yb-ajax-add-to-cart.is-added::after {
  content: ' ✓';
}

/* ------------------------------------------------------------
   SINGLE PRODUCT
   ------------------------------------------------------------ */

/* WooCommerce's own woocommerce-layout.css lays the product page out as two
   floated 48% columns. `.product-layout` is a grid, so those widths shrink the
   gallery and the summary to half of the tracks they already sit in and leave
   both columns half empty. The selectors below match Woo's specificity and
   this sheet loads after it. The same applies to the floats and the clearfix
   Woo puts on the cart form: inside a flex container those two pseudo-elements
   become flex items of their own. */
.woocommerce div.product div.images,
.woocommerce #content div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce div.product div.summary,
.woocommerce #content div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce-page #content div.product div.summary {
  float: none;
  width: auto;
  margin: 0;
  clear: none;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after,
.woocommerce div.product p.cart::before,
.woocommerce div.product p.cart::after {
  content: none;
  display: none;
}

.woocommerce div.product form.cart div.quantity,
.woocommerce div.product form.cart .button {
  float: none;
  margin: 0;
}

.page-hero--product {
  min-height: 340px;
}

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto var(--section-y);
  align-items: start;
}

/* The cover stays in view while the summary scrolls past it. `align-items:
   start` above already sizes the column to its own content, so the column is
   short enough to stick instead of stretching to the row and leaving dead
   space underneath. The offset matches the sticky sidebars elsewhere. */
.product-gallery-column {
  position: sticky;
  top: 100px;
}

/* Once the reveal has played out, drop the transform: a transform on a sticky
   box offsets it from where it sticks, so the leftover translateY(0) would
   keep re-establishing a containing block for no benefit. The reveal itself
   is untouched — this only applies after `.visible` lands. */
.product-gallery-column.reveal.visible {
  transform: none;
}

.woocommerce-product-gallery {
  position: relative;
}

/* The cover is a raised card, as the design draws it. A second image turns the
   gallery into a slider: flexslider then wraps the cover in .flex-viewport and
   puts the thumbnail strip underneath, which has to stay outside the card —
   hence the two selectors rather than one on the gallery itself. */
.woocommerce-product-gallery>.woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .flex-viewport {
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 24px 60px rgba(26, 39, 68, 0.22);
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
}

.woocommerce-product-gallery__image img,
.woocommerce div.product div.images img {
  display: block;
  width: 100%;
  height: auto;
}

/* Woo's zoom trigger is a bare white circle; the design's round controls carry
   the same border and ink colour as the product card actions. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border-light);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}

/* Woo draws a plain magnifier from a ring (::before) and a handle (::after).
   Swap that for a single search-plus glyph, masked so it takes the ink colour. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
  left: 10px;
  top: 10px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: var(--ink-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
  display: none;
}

/* Thumbnails: Woo floats each one at 25% of the strip, which inside the grid
   below shrinks every thumb to a quarter of its own track. */
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  overflow: visible;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto;
  float: none;
  clear: none;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  border-radius: 4px;
  border: 1px solid var(--border-light);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--gold);
}

.product-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  color: var(--ink-deep);
  margin: 8px 0 6px;
}

.product-author {
  color: var(--gold);
  font-style: italic;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.product-rating-link {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.product-price-box {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 26px;
  margin: 24px 0;
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 8px;
  background: rgba(201, 169, 110, 0.07);
}

.product-price-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-price,
.product-price .amount {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink-deep);
}

.product-price del {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-right: 8px;
}

.product-price ins {
  text-decoration: none;
  color: var(--gold);
}

.product-price-badge {
  padding: 4px 12px;
  border-radius: 3px;
  background: var(--gold);
  color: var(--ink-deep);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-desc {
  color: var(--text-secondary);
  line-height: 1.8;
}

.product-features {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.product-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 0.94rem;
}

.product-features .iconify {
  color: var(--gold);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.product-features--centered {
  justify-content: center;
  grid-auto-flow: column;
  grid-template-columns: none;
  max-width: 1000px;
  margin: 0 auto 44px;
}

/* Add to cart form */
.cart {
  margin: 26px 0;
}

form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

form.cart .product-inscription {
  flex: 1 0 100%;
}

/* On a variable product WooCommerce nests the quantity and the button inside
   .single_variation_wrap, so they never reach form.cart's flex row. The wrap
   and the button row it contains become rows of their own to match. */
form.cart .single_variation_wrap {
  flex: 1 0 100%;
}

.woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.woocommerce-variation-add-to-cart .product-inscription {
  flex: 1 0 100%;
}

.woocommerce-variation-price {
  flex: 1 0 100%;
  margin-bottom: 12px;
}

/* Woo prints the chosen variation's price in its own olive. */
.woocommerce div.product .woocommerce-variation-price span.price,
.woocommerce div.product .woocommerce-variation-price p.price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink-deep);
}

.woocommerce div.product .woocommerce-variation-price span.price del {
  font-size: 1rem;
  color: var(--text-muted);
  margin-right: 8px;
}

.woocommerce div.product .woocommerce-variation-price span.price ins {
  text-decoration: none;
  font-weight: 400;
  color: var(--gold);
}

.woocommerce div.product .woocommerce-variation-availability p.stock {
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* The stepper is three equal cells — −, number, + — each centring its own
   content, so the three glyphs sit on one centre line an even distance apart.
   Unequal segment widths (40 / 56 / 40) used to pull the number's spacing out
   of step with the buttons'. theme.css also gives `.qty-control` a 10px gap,
   which left gutters inside the frame; the cells carry the spacing, the frame
   adds none. The cell width keeps the stepper's overall size as before. */
.qty-control,
.quantity {
  --qty-cell: 45px;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--qty-cell);
  /* One fixed row: every cell is exactly --qty-cell × --btn-min-h, so the
     −, number and + are centred in identical boxes. */
  grid-template-rows: var(--btn-min-h);
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  max-width: none;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream);
}

.qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  /* The browser's default button padding is uneven across engines and pushes
     the −/+ glyph off centre in the narrow mobile segment; inherited letter
     spacing or indent would nudge it sideways the same way. The glyphs share
     the number's font and line-height so all three sit on one centre line —
     a button otherwise falls back to the system font, whose −/+ ride higher. */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-deep);
  font-family: var(--font-serif);
  font-size: var(--btn-icon-font);
  font-weight: 400;
  line-height: 1;
  vertical-align: middle;
  letter-spacing: 0;
  text-indent: 0;
  text-align: center;
  transition: background 0.25s var(--ease-smooth);
}

.qty-btn:hover {
  background: rgba(26, 39, 68, 0.06);
}

/* `.woocommerce .quantity .qty` sizes the field in ems, which outranks a plain
   class and leaves the stepper uneven; matched here so both sides of the input
   keep the design's width. */
.qty-control input,
.quantity input.qty,
.woocommerce .quantity input.qty {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  /* border-box and no padding keep the number the same height as the −/+
     cells and centred between the dividers in every engine. */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 400;
  vertical-align: middle;
  letter-spacing: 0;
  text-indent: 0;
  border: 0;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  background: transparent;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--text-primary);
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
  /* `flex: 1` used to let this absorb every spare pixel of the cart row, so
     the button grew as wide as the column allowed — on a tablet it ended up a
     slab next to the small quantity stepper, much larger than the same button
     anywhere else. It now sizes to its label from the shared floor, like any
     other text button, and only stretches when the row stacks (below 560px,
     where `width: 100%` is set explicitly).
     Height comes from the shared min-height, which is also what the quantity
     stepper beside it uses, so the two always line up. */
  flex: 0 1 auto;
  min-width: var(--btn-min-w);
}

/* Until a format is chosen WooCommerce marks the button disabled, and its own
   disabled rule — four classes deep — would otherwise paint it purple. */
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover {
  background: var(--gold-pale);
  border-color: var(--gold-pale);
  color: var(--ink-deep);
  opacity: 0.75;
  cursor: not-allowed;
}

/* Variations: the design puts each label above its control, the way the order
   form does. Woo's own rules are four classes deep, so these match them. */
.woocommerce div.product form.cart table.variations {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  border: 0;
  border-collapse: collapse;
}

.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr {
  display: block;
  width: 100%;
}

.woocommerce div.product form.cart table.variations tr+tr {
  margin-top: 16px;
}

.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  line-height: inherit;
}

.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.label {
  padding: 0 0 8px;
}

.woocommerce div.product form.cart table.variations label {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.woocommerce div.product form.cart table.variations select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background-color: var(--cream);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--text-primary);
}

.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
}

.woocommerce div.product form.cart .reset_variations:hover {
  color: var(--ink-deep);
  border-bottom-color: var(--gold);
}

/* Meta */
.product-meta {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
  font-size: 0.9rem;
}

.product-meta-row {
  display: flex;
  gap: 14px;
}

.product-meta-label {
  min-width: 110px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 2px;
}

.product-meta-value,
.product-meta-value a {
  color: var(--text-secondary);
  text-decoration: none;
}

.product-meta-value a:hover {
  color: var(--ink-deep);
}

/* Product information always shows in capitals: meta rows (SKU, book
   details, categories, tags), attributes, variation labels and stock. */
.product-meta-label,
.product-meta-value,
.product-meta-value a,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes td a,
.woocommerce div.product form.cart table.variations label,
.woocommerce div.product form.cart table.variations select,
.woocommerce div.product .reset_variations,
.woocommerce div.product .stock,
.woocommerce-variation-availability,
.wc-block-components-product-stock-indicator,
.wc-block-components-product-sku {
  text-transform: uppercase;
}

/* Wishlist control, when the plugin is active. */
.product-info .yith-add-to-wishlist-button-block,
.product-info .yith-wcwl-add-to-wishlist {
  margin: 22px 0 0;
}

.product-info .yith-wcwl-add-to-wishlist-button,
.product-info .yith-wcwl-add-to-wishlist a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
}

.product-info .yith-wcwl-add-to-wishlist-button:hover,
.product-info .yith-wcwl-add-to-wishlist a:hover {
  color: var(--gold);
}

.product-info .yith-wcwl-add-to-wishlist-button .yith-wcwl-icon,
.product-info .yith-wcwl-add-to-wishlist .yith-wcwl-icon {
  width: 18px !important;
  height: 18px;
  flex-shrink: 0;
}

.product-retailers {
  margin-top: 26px;
}

.product-retailers-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* On a book card these links are centred; in the summary column they sit under
   a left-aligned label. */
.product-retailers .book-buy-links {
  justify-content: flex-start;
}

.product-note {
  margin-top: 18px;
}

/* Tabs
   Woo dresses its tabs as grey pills: the rounded joins are drawn by two
   pseudo-elements on every tab and the rule beneath them by a third on the
   list, all four classes deep. The design's tabs are written at the same depth
   rather than fighting that with !important. */
.woocommerce-tabs {
  max-width: 1200px;
  margin: 0 auto var(--section-y);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0 0 -1px;
  padding: 0;
  overflow: visible;
  border-bottom: 1px solid var(--border-light);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  content: none;
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.3s var(--ease-smooth);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--ink-deep);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--card-bg);
  border-color: var(--border-light);
  color: var(--ink-deep);
}

.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 34px 32px;
  border: 1px solid var(--border-light);
  border-radius: 0 8px 8px 8px;
  background: var(--card-bg);
  color: var(--text-secondary);
  line-height: 1.85;
}

.woocommerce-tabs .panel h2:first-child {
  display: none;
}

.woocommerce-tabs .panel>p {
  margin-bottom: 1em;
}

.woocommerce-tabs .panel>p:last-child {
  margin-bottom: 0;
}

.woocommerce table.shop_attributes {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  line-height: 1.7;
}

.woocommerce table.shop_attributes th {
  width: 220px;
  font-family: var(--font-display);
  color: var(--ink-deep);
  font-weight: 500;
}

.woocommerce table.shop_attributes td {
  font-style: normal;
  color: var(--text-secondary);
}

.woocommerce table.shop_attributes td p {
  margin: 0;
  padding: 0;
}

.woocommerce table.shop_attributes tr:nth-child(2n) td,
.woocommerce table.shop_attributes tr:nth-child(2n) th {
  background: transparent;
}

/* Reviews */
#reviews .woocommerce-Reviews-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink-deep);
  margin-bottom: 16px;
}

#reviews .commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* WooCommerce's own stylesheet absolutely positions the avatar and boxes the
   comment text in a bordered card sized for that layout. The rules below use
   its selectors so the flex row here isn't left holding the reserved space. */
#reviews #comments ol.commentlist li {
  margin: 0;
  padding: 0;
}

#reviews #comments ol.commentlist li .comment_container {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light);
}

#reviews #comments ol.commentlist li:last-child .comment_container {
  border-bottom: 0;
}

#reviews #comments ol.commentlist li img.avatar {
  position: static;
  float: none;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

#reviews #comments ol.commentlist li .comment-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

#reviews #comments ol.commentlist li .comment-text p {
  margin: 0 0 6px;
}

#reviews #comments ol.commentlist li .comment-text p:last-child {
  margin-bottom: 0;
}

#reviews #comments ol.commentlist li .comment-text p.meta {
  font-size: 0.85rem;
  margin-bottom: 4px;
}

/* The rating floats right out of the default card; keep it on the meta row. */
#reviews #comments ol.commentlist li .comment-text .star-rating {
  float: right;
  margin: 0 0 4px 12px;
}

#reviews #comments ol.commentlist li .comment-text .description {
  margin: 0;
}

#reviews .woocommerce-review__author {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-deep);
}

#reviews .woocommerce-review__published-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

#reviews .comment-reply-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink-deep);
  margin-bottom: 14px;
}

/* The inputs and labels are dressed by wordpress.css; only the pieces
   WooCommerce adds to the comment form are picked up here. */
#reviews .comment-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--cream);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--text-primary);
}

#reviews .comment-notes,
#reviews .woocommerce-review__dash {
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* WooCommerce sizes the rating stars off the star font's own em box, which
   renders them oversized next to the form's labels. Pin the glyph size so the
   row stays compact, and keep the spacing tied to that same size. */
.comment-form-rating .stars {
  margin: 0 0 12px;
  line-height: 1;
}

.comment-form-rating .stars a {
  color: var(--gold);
  font-size: 0.95rem;
 
  line-height: 1;
  margin-right: 4px;
  /* Woo gives each star a 1em-wide box then pads it out with the star font's
     own tracking; clamp both so the glyph size actually drives the row. */
  width: 1.15em;
  height: 1.15em;
  letter-spacing: 0;
  text-indent: 0;
}

.comment-form-rating .stars a:last-child {
  margin-right: 0;
}

.comment-form-rating .stars a::before,
.comment-form-rating .stars a span::before {
  font-size: inherit;
  line-height: 1;
   font-size: 20px;
}

/* On phones the star row reads as an oversized block next to the small labels,
   so shrink the glyphs and sit them on one tight, left-aligned line. */
@media (max-width: 767px) {
  .comment-form-rating .stars {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0 0 10px;
  }

  .comment-form-rating .stars a {
    font-size: 0.85rem;
    margin-right: 3px;
  }
}

@media (max-width: 480px) {
  .comment-form-rating .stars a {
    font-size: 0.8rem;
    margin-right: 2px;
  }
}

/* WooCommerce submits the review with a bare input.submit, which carries none
   of the shop's button classes. */
#reviews .form-submit input[type='submit'],
#reviews #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  box-sizing: border-box;
  border: var(--btn-border) solid var(--ink-deep);
  border-radius: var(--btn-radius);
  background: var(--ink-deep);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: var(--btn-font);
  line-height: var(--btn-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.35s var(--ease-elegant);
}

#reviews .form-submit input[type='submit']:hover,
#reviews #respond input#submit:hover {
  background: var(--ink-medium);
  border-color: var(--ink-medium);
}

/* Related / upsells */
.related,
.up-sells,
.cross-sells {
  max-width: 1300px;
  margin: 0 auto 20px;
}

.related>h2,
.up-sells>h2,
.cross-sells>h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--ink-deep);
  text-align: center;
  margin-bottom: 34px;
}

/* Quick view */
.yb-quick-view {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(26, 39, 68, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.yb-quick-view[hidden] {
  display: none;
}

.yb-quick-view-panel {
  position: relative;
  width: min(940px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--cream);
  border-radius: 10px;
  padding: 40px;
}

.yb-quick-view-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: var(--cream);
  font-size: 1.2rem;
  color: var(--ink-deep);
}

.quick-view-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 34px;
  align-items: start;
}

.quick-view-media img {
  width: 100%;
  border-radius: 6px;
}

.quick-view-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.quick-view-add {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   MINI CART

   The drawer is printed from header.php, outside any `.woocommerce`
   wrapper, but WooCommerce still puts `woocommerce` on the body of
   shop pages. Core's widget-cart rules (`.woocommerce ul.cart_list li
   img`, `.woocommerce a.remove`, the `dl.variation` list) therefore
   reach into the panel and outrank plain class selectors, so the
   item-level rules below hang off `#ybMiniCart` to stay ahead of them.
   ------------------------------------------------------------ */
.yb-mini-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(26, 39, 68, 0.45);
  backdrop-filter: blur(2px);
}

.yb-mini-cart-overlay[hidden] {
  display: none;
}

.yb-mini-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-left: 1px solid var(--border-light);
  box-shadow: -12px 0 44px rgba(26, 39, 68, 0.14);
  overflow: hidden;
}

.yb-mini-cart[hidden] {
  display: none;
}

/* ---- Header ---- */
.yb-mini-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border-light);
}

.yb-mini-cart-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-deep);
  margin: 0;
}

.yb-mini-cart-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-deep);
  transition: background 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth),
    color 0.25s var(--ease-smooth);
}

.yb-mini-cart-close svg {
  width: 17px;
  height: 17px;
}

.yb-mini-cart-close:hover {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--cream);
}

/* ---- Body ----
   Only the body scrolls, so the header stays put and the footer can
   stick to the bottom of the panel. */
.yb-mini-cart-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- Items ---- */
.yb-mini-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#ybMiniCart .woocommerce-mini-cart-item {
  position: relative;
  padding: 18px 34px 18px 0;
  margin: 0;
  border-bottom: 1px solid var(--border-light);
}

#ybMiniCart .woocommerce-mini-cart-item:last-child {
  border-bottom: 0;
}

#ybMiniCart .yb-mini-cart-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0;
  font-weight: 400;
  text-decoration: none;
  color: var(--text-primary);
}

#ybMiniCart .yb-mini-cart-thumb {
  flex: 0 0 58px;
  width: 58px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--parchment-warm);
  box-shadow: 0 3px 10px rgba(26, 39, 68, 0.12);
}

#ybMiniCart .yb-mini-cart-thumb img {
  float: none;
  width: 100%;
  height: 82px;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

#ybMiniCart .yb-mini-cart-details {
  flex: 1;
  min-width: 0;
}

#ybMiniCart .yb-mini-cart-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink-deep);
  transition: color 0.25s var(--ease-smooth);
}

#ybMiniCart .yb-mini-cart-link:hover .yb-mini-cart-name {
  color: var(--ink-medium);
}

/* Cart item meta (inscription, variations). Core floats the term and
   bolds it; here it reads as one quiet line under the title. */
#ybMiniCart .yb-mini-cart-details dl.variation {
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

#ybMiniCart .yb-mini-cart-details dl.variation dt,
#ybMiniCart .yb-mini-cart-details dl.variation dd {
  display: inline;
  float: none;
  clear: none;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 400;
}

#ybMiniCart .yb-mini-cart-details dl.variation dt {
  margin-right: 4px;
  color: var(--text-secondary);
}

#ybMiniCart .yb-mini-cart-details dl.variation dd p {
  display: inline;
  margin: 0;
}

#ybMiniCart .yb-mini-cart-details dl.variation dd::after {
  content: '';
  display: block;
}

/* The quantity line carries WooCommerce's `quantity` class, which the
   add-to-cart stepper styles as a bordered control; reset it to text. */
#ybMiniCart .yb-mini-cart-qty {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--text-muted);
}

#ybMiniCart .yb-mini-cart-qty .amount {
  font-weight: 600;
  color: var(--ink-deep);
}

/* Core paints `a.remove` bright red with !important, hence the flag. */
#ybMiniCart .woocommerce-mini-cart-item .remove {
  position: absolute;
  top: 18px;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  color: var(--text-muted) !important;
  transition: background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth);
}

#ybMiniCart .woocommerce-mini-cart-item .remove svg {
  width: 15px;
  height: 15px;
}

#ybMiniCart .woocommerce-mini-cart-item .remove:hover {
  background: rgba(180, 69, 61, 0.1);
  color: #b4453d !important;
}

/* ---- Footer ---- */
#ybMiniCart .yb-mini-cart-footer {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 16px 0 20px;
  border-top: 1px solid var(--border-light);
  background: var(--cream);
}

#ybMiniCart .yb-mini-cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-secondary);
}

#ybMiniCart .yb-mini-cart-total strong {
  font-weight: 500;
}

#ybMiniCart .yb-mini-cart-total .amount {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-deep);
}

#ybMiniCart .yb-mini-cart-buttons {
  display: grid;
  gap: 10px;
  margin: 0;
}

#ybMiniCart .yb-mini-cart-buttons .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ---- Empty state ---- */
.yb-mini-cart-empty {
  margin: auto 0;
  text-align: center;
  padding: 48px 10px;
  color: var(--text-secondary);
}

.yb-mini-cart-empty .iconify {
  font-size: 2.2rem;
  color: var(--gold);
  display: block;
  margin: 0 auto 14px;
}

/* ------------------------------------------------------------
   CART PAGE
   ------------------------------------------------------------ */

/* ---- Container ----
   The cart comes from a shortcode, so it renders inside the page template's
   prose column: capped at 820px and set in article typography. The layout
   below carries its own width and type scale. */
body.woocommerce-cart .page-content {
  max-width: none;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
}

/* The prose column sets its own size for every h2 and draws a gold rule under
   it. The cart's headings — line items, the summary card, the empty state —
   carry their own, and the summary already has a .section-divider where a rule
   belongs. */
body.woocommerce-cart .page-content h2::after {
  content: none;
}

body.woocommerce-cart .page-content .yb-cart-item-title {
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0 0 4px;
}

body.woocommerce-cart .page-content .summary-heading {
  font-size: 1.35rem;
  margin: 0;
}

body.woocommerce-cart .page-content .yb-empty-heading {
  font-size: 1.7rem;
  margin: 0 0 10px;
}

/* ---- WooCommerce layout reset ----
   woocommerce-layout.css lays the cart out for its own table markup: the
   totals and the shipping calculator float right at 48%, the cross-sells left
   at 48%, and the collaterals wrapper clears them with table pseudo-elements.
   Here the totals are the whole of a 350px column, so 48% leaves them a
   sliver. Those selectors outrank plain class names, so they are matched here
   — this sheet loads after Woo's. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .cross-sells,
.woocommerce .cart-collaterals .shipping_calculator,
.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .shipping_calculator {
  float: none;
  width: auto;
  clear: none;
}

.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after,
.woocommerce-page .cart-collaterals::before,
.woocommerce-page .cart-collaterals::after,
.woocommerce .cart-collaterals .shipping_calculator::before,
.woocommerce .cart-collaterals .shipping_calculator::after {
  content: none;
  display: none;
}

.yb-cart {
  max-width: 1240px;
  margin: 0 auto;
}

.yb-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 44px;
  align-items: start;
}

.yb-cart-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 150px 120px 44px;
  gap: 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.yb-cart-head-price,
.yb-cart-head-qty,
.yb-cart-head-subtotal {
  text-align: center;
}

.yb-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.yb-cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 150px 120px 44px;
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-light);
  transition: opacity 0.25s;
}

.yb-cart-item.is-updating {
  opacity: 0.5;
  pointer-events: none;
}

.yb-cart-item-product {
  display: flex;
  gap: 18px;
  align-items: center;
  min-width: 0;
}

/* Without this the cover is squeezed narrower by a long title beside it — the
   flex item shrinks and takes the image's fixed width with it. */
.yb-cart-item-thumb {
  flex-shrink: 0;
}

.yb-cart-item-thumb img {
  width: 74px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border-light);
}

.yb-cart-item-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0 0 4px;
}

.yb-cart-item-title a {
  color: var(--ink-deep);
  text-decoration: none;
}

.yb-cart-item-details dl.variation {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.yb-cart-item-details dl.variation dt,
.yb-cart-item-details dl.variation dd {
  display: inline;
  margin: 0;
}

.yb-cart-item-details dl.variation dd::after {
  content: '';
  display: block;
}

.yb-cart-item-mobile-price {
  display: none;
  font-family: var(--font-display);
  color: var(--ink-deep);
  margin-top: 6px;
}

.yb-cart-item-price,
.yb-cart-item-subtotal {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-deep);
}

.yb-cart-item-qty {
  display: flex;
  justify-content: center;
}

.yb-cart-item-remove {
  text-align: right;
}

/* Woo's `a.remove` is a 1.5em red "×" in a 1em box, and it sets the colour with
   !important; the design's is a round icon button, so the whole of that rule
   has to be answered at its own specificity. */
.yb-cart-remove,
.woocommerce a.remove.yb-cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #faf6f0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--text-muted) !important;
  text-decoration: none;
  transition: all 0.3s var(--ease-smooth);
}

.yb-cart-remove:hover,
.woocommerce a.remove.yb-cart-remove:hover {
  background: rgba(180, 69, 61, 0.08);
  color: #b4453d !important;
}

.yb-cart-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 26px;
}

.yb-cart-coupon {
  display: flex;
  gap: 10px;
  flex: 1 1 320px;
}

.yb-cart-coupon .subscribe-input {
  flex: 1;
  min-width: 0;
}

.yb-cart-actions-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* On the 768x1024 tablet viewport there is no other breakpoint covering
   this group, so it stays left-aligned (flex-start) by default. Center
   the button group within its row; button size, colors, and spacing
   are untouched. */
@media (min-width: 768px) and (max-width: 1024px) {
  .yb-cart-actions-right {
    justify-content: center;
  }

  /* A flat 400px drawer eats over half a 768px viewport and leaves the page
     behind it unreadable. Scale with the viewport instead, with the desktop
     width as the ceiling so wider tablets are unchanged. */
  .yb-mini-cart {
    width: min(400px, 46vw);
  }
}

.yb-cart-aside {
  position: sticky;
  top: 100px;
}

.yb-summary {
  padding: 28px 26px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--card-bg);
}

.summary-heading {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink-deep);
  margin: 0;
}

/* The section divider is centred by default (`margin: 0 auto`), which is what
   a centred `.section-title` wants. `.summary-heading` is the left-aligned
   heading, so wherever one is followed by a divider the rule belongs on the
   left — otherwise it drifts to the middle of the panel and reads as
   unrelated to the heading it is meant to underline.
   Keyed on the pair rather than on each panel, so a new left-aligned heading
   is correct without another one-off rule: this had already been patched for
   the cart summary and the checkout panel, and the account dashboard's
   "Recent Orders" was still centred because it had no rule of its own. */
.summary-heading+.section-divider {
  margin: 12px 0 0;
}

.yb-summary-rows {
  margin-top: 18px;
}

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 0.94rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
}

.summary-row:last-child {
  border-bottom: 0;
}

.summary-total {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 2px solid var(--ink-deep);
  border-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink-deep);
}

.summary-row--shipping {
  display: block;
}

.summary-row--shipping ul,
.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.summary-row--shipping li {
  padding: 5px 0;
  font-size: 0.9rem;
}

.yb-shipping+.yb-shipping {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.yb-shipping-name {
  display: block;
  font-size: 0.94rem;
  color: var(--text-secondary);
}

.yb-shipping-options {
  font-size: 0.9rem;
  color: var(--ink-deep);
}

.woocommerce-shipping-methods li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.woocommerce-shipping-methods input.shipping_method {
  flex-shrink: 0;
  accent-color: var(--ink-deep);
}

.woocommerce-shipping-destination {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.shipping-calculator-button {
  font-size: 0.84rem;
  color: var(--ink-medium);
}

/* Woo appends a glyph from its own icon font; the design carries no icon here. */
.woocommerce-cart .cart-collaterals .shipping-calculator-button::after,
.woocommerce-checkout .cart-collaterals .shipping-calculator-button::after {
  content: none;
}

.shipping-calculator-form {
  margin-top: 12px;
}

.shipping-calculator-form .form-row {
  padding: 0;
  margin: 0 0 10px;
}

.shipping-calculator-form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.shipping-calculator-form .input-text,
.shipping-calculator-form select,
.shipping-calculator-form .select2-container {
  width: 100%;
}

/* Woo dresses its own form fields at `.woocommerce form .form-row .input-text`,
   which outranks a plain pair, so the field is matched at that depth here. */
.shipping-calculator-form .input-text,
.woocommerce form .shipping-calculator-form .form-row .input-text,
.woocommerce form .shipping-calculator-form .form-row select {
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--cream);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* The country and state boxes are Select2, which takes the theme-wide size
   further down; the calculator's inputs are a step smaller, so these are
   brought down to them. 40px on the right keeps clear of the arrow. */
.shipping-calculator-form .select2-container--default .select2-selection--single {
  padding: 10px 40px 10px 12px;
}

.shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 0.9rem;
}

.shipping-calculator-form .button {
  width: 100%;
}

.wc-proceed-to-checkout,
.woocommerce-cart .wc-proceed-to-checkout {
  margin-top: 22px;
  padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout::before,
.woocommerce-cart .wc-proceed-to-checkout::after {
  content: none;
  display: none;
}

/* Woo paints `a.button.alt` in its own purple and gives the checkout link a
   1.25em type size with 1em of padding, both from selectors that outrank a
   plain class pair. The design's checkout button is gold and full width. */
.wc-proceed-to-checkout .checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 0;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-deep);
  /* Full width for emphasis, but the same height and type as every other
     button — the stretch is the emphasis, not a larger box. */
}

.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--ink-deep);
}

.yb-cart-assurances {
  list-style: none;
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border-light);
  display: grid;
  gap: 10px;
}

.yb-cart-assurances li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.yb-cart-assurances .iconify {
  color: var(--gold);
  flex-shrink: 0;
}

.yb-cart-empty {
  padding: 48px 24px;
}

/* .btn-primary is the glass-on-hero treatment — white on a translucent white
   fill. The empty cart sits on parchment, where it needs a solid one. */
.yb-cart-empty .btn-primary {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--cream);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.yb-cart-empty .btn-primary::before {
  background: var(--gold);
}

.yb-cart-empty .btn-primary:hover {
  border-color: var(--gold);
  color: var(--ink-deep);
}

/* ------------------------------------------------------------
   CHECKOUT
   ------------------------------------------------------------ */

/* ---- Container ----
   As with the cart, the checkout comes from a shortcode and renders inside
   the page template's prose column: capped at 820px and set in article
   typography. The layout below carries its own width and type scale. */
body.woocommerce-checkout .page-content {
  max-width: none;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
}

/* The prose column sizes every h2 and draws a gold rule under it; the intro
   already places a .section-divider where a rule belongs. */
body.woocommerce-checkout .page-content h2::after {
  content: none;
}

body.woocommerce-checkout .page-content .section-title {
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  margin: 0 0 18px;
}

/* ---- WooCommerce layout reset ----
   woocommerce-layout.css lays the checkout out with floats and percentage
   widths — the customer columns at 48%, paired name fields at 47% — and clears
   them with table pseudo-elements. Those selectors outrank plain class names,
   so without this the panels collapse to a fraction of their grid tracks, the
   name fields shrink to a few characters, and the clearfixes land as stray
   grid and flex children. */
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2,
body.woocommerce-checkout form .form-row-first,
body.woocommerce-checkout form .form-row-last,
body.woocommerce-checkout .checkout div.shipping-address,
body.woocommerce-checkout .checkout .col-2 h3#ship-to-different-address {
  float: none;
  width: auto;
  clear: none;
}

body.woocommerce-checkout .col2-set::before,
body.woocommerce-checkout .col2-set::after,
body.woocommerce-checkout form .form-row::before,
body.woocommerce-checkout form .form-row::after,
body.woocommerce-checkout #payment ul.payment_methods::before,
body.woocommerce-checkout #payment ul.payment_methods::after,
body.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::before,
body.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::after {
  content: none;
  display: none;
}

/* Woo's own form-row spacing and field skin sit at `.woocommerce form .form-row
   …`, which outranks the design's rules below; they are matched at that depth
   so the fields keep the theme's border, fill and rhythm. */
body.woocommerce-checkout form .form-row {
  padding: 0;
  margin: 0 0 16px;
}

body.woocommerce-checkout form .form-row label {
  line-height: 1.5;
}

body.woocommerce-checkout form .form-row .input-text,
body.woocommerce-checkout form .form-row textarea,
body.woocommerce-checkout form .form-row select {
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--cream);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: normal;
  color: var(--text-primary);
  height: auto;
}

/* The rule above outranks wordpress.css's `.form-row.has-error` border, so a
   rejected text field stayed neutral while a rejected Select2 box beside it
   turned red. Restated at this depth so both mark an error the same way. */
body.woocommerce-checkout form .form-row.has-error .input-text,
body.woocommerce-checkout form .form-row.has-error textarea,
body.woocommerce-checkout form .form-row.has-error select {
  border-color: #b4453d;
  background-color: rgba(180, 69, 61, 0.03);
}

/* theme.css clears every focused input's border with !important. The
   checkout moves focus to the first rejected field, which then lost the very
   border marking it while the Select2 boxes (not inputs) kept theirs. */
body.woocommerce-checkout form .form-row.has-error .input-text:focus {
  border-color: #b4453d !important;
}

.yb-checkout {
  max-width: 1240px;
  margin: 0 auto;
  /* The page section already supplies the top and bottom space. */
  padding: 0;
}

.yb-checkout-intro {
  margin-bottom: 34px;
}

.yb-checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  flex-wrap: wrap;
}

.yb-checkout-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.yb-checkout-steps li:not(:last-child)::after {
  content: '';
  width: 44px;
  height: 1px;
  background: var(--border-light);
  margin-left: 6px;
}

.yb-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  font-size: 0.8rem;
}

.yb-checkout-steps .is-current {
  color: var(--ink-deep);
}

.yb-checkout-steps .is-current .yb-step-number {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--cream);
}

.yb-checkout-steps .is-done .yb-step-number {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-deep);
}

.yb-checkout-steps a {
  color: inherit;
  text-decoration: none;
}

.yb-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 44px;
  align-items: start;
}

.yb-checkout-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  /* Until "ship to a different address" is ticked the second panel holds only a
     checkbox and the order note; stretched, it would be a tall empty card. */
  align-items: start;
}

.yb-checkout-panel {
  padding: 30px 28px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--card-bg);
}

.yb-checkout-panel h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink-deep);
  margin: 0 0 6px;
}

/* Only the spacing differs here; the left alignment comes from the
   `.summary-heading + .section-divider` rule above. */
.yb-checkout-panel h3+.section-divider {
  margin-bottom: 18px;
}

.woocommerce-checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0;
}

.woocommerce-checkout .form-row label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.woocommerce-checkout .form-row .required {
  color: var(--gold);
  text-decoration: none;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  width: 100%;
}

@supports (display: grid) {

  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }

  .woocommerce-billing-fields__field-wrapper .form-row-wide,
  .woocommerce-shipping-fields__field-wrapper .form-row-wide,
  .woocommerce-billing-fields__field-wrapper #billing_address_1_field,
  .woocommerce-billing-fields__field-wrapper #billing_address_2_field {
    grid-column: 1 / -1;
  }
}

.woocommerce-checkout input[type='text'],
.woocommerce-checkout input[type='email'],
.woocommerce-checkout input[type='tel'],
.woocommerce-checkout input[type='password'],
.woocommerce-checkout input[type='number'],
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection,
.woocommerce-checkout select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--cream);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-primary);
  transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.16);
}

/* The rest of the Select2 skin — the open state, the arrow glyph and the
   options panel it drops onto <body> — lives with the other select
   styling near the end of this file, alongside the plain selects it
   stands in for. */

.woocommerce-form__label-for-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
}

/* Order review */
.yb-order-items {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.yb-order-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.yb-order-item-thumb {
  position: relative;
  flex-shrink: 0;
}

.yb-order-item-thumb img {
  width: 58px;
  height: 78px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border-light);
}

.yb-order-item-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--ink-deep);
  color: var(--cream);
  font-size: 0.7rem;
  line-height: 22px;
  text-align: center;
}

.yb-order-item-details {
  flex: 1;
  min-width: 0;
}

.yb-order-item-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-deep);
  line-height: 1.3;
}

.yb-order-item-total {
  font-family: var(--font-display);
  color: var(--ink-deep);
}

/* Payment */
.woocommerce-checkout-payment {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
}

/* Woo wraps the payment panel in a grey-lilac card of its own, with a padded
   method list, a bordered box per gateway and a pointer triangle above it. The
   design's summary card is already the surround, so the panel is stripped back
   to it. Every selector here answers one of Woo's at its own weight — they all
   carry the #payment id. */
body.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  margin: 0 0 18px;
  border-bottom: 0;
}

body.woocommerce-checkout #payment ul.payment_methods li {
  line-height: inherit;
}

body.woocommerce-checkout #payment div.form-row {
  padding: 0;
}

body.woocommerce-checkout #payment div.payment_box {
  width: auto;
  padding: 0;
  margin: 10px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}

body.woocommerce-checkout #payment div.payment_box::before {
  content: none;
  display: none;
}

body.woocommerce-checkout #payment #place_order {
  float: none;
}

.wc_payment_methods {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.wc_payment_method>label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--cream);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink-deep);
  transition: border-color 0.3s var(--ease-smooth);
}

.wc_payment_method input:checked+label {
  border-color: var(--gold);
  background: var(--parchment-warm);
}

.payment_box {
  padding: 0;
  margin-top: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.payment_box p:last-child {
  margin-bottom: 0;
}

.woocommerce-terms-and-conditions-wrapper {
  margin: 18px 0;
  font-size: 0.88rem;
}

#place_order {
  width: 100%;
  justify-content: center;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-deep);
}

#place_order:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* Woo skins the coupon and login panels at `.woocommerce form.checkout_coupon`,
   which outranks a plain class.

   The `form.login` half excludes the theme's own auth forms on purpose. The My
   Account sign-in form carries the same `login` class, and the compact row
   below — a flex container with `align-items: flex-end` — collapsed its fields
   to their content width and pinned them to the right of the panel. Woo's own
   checkout login panel, which has no `.yb-auth-form`, still gets it. */
.checkout_coupon,
.woocommerce form.checkout_coupon,
.woocommerce form.login:not(.yb-auth-form) {
  padding: 22px 24px;
  margin: 0 0 26px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--card-bg);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.checkout_coupon .form-row {
  margin-bottom: 0;
  flex: 1 1 220px;
}

/* The code takes the room; the button sizes to its label, as it does on the
   cart. `.clear` is Woo's float clearer and has no place in a flex row. */
.checkout_coupon .form-row-last {
  flex: 0 0 auto;
}

.checkout_coupon .clear {
  display: none;
}

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
  margin-bottom: 18px;
}

.yb-checkout-note {
  margin-top: 18px;
}

/* Order received */
.woocommerce-order {
  max-width: 900px;
  margin: 0 auto;
  /* The horizontal padding used to be 0, so on a narrow screen the card
     edges sat flush against the viewport. No top padding: the page section
     above supplies it, and its bottom padding is zeroed on this page. */
  padding: 0 20px var(--section-y);
}

/* The confirmation line. It is the first thing read after paying and had no
   styling of its own, so it arrived as a default paragraph among the cards. */
.woocommerce-order .woocommerce-thankyou-order-received {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--ink-deep);
}

.woocommerce-order .woocommerce-thankyou-order-failed {
  margin: 0 0 18px;
  color: #b4453d;
}

.woocommerce-order-overview,
.woocommerce-thankyou-order-details {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin: 30px 0;
  padding: 26px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--card-bg);
}

.woocommerce-order-overview li {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-deep);
}

.woocommerce-order-details,
.woocommerce-customer-details {
  margin-top: 40px;
}

/* "Order details", "Billing address", "Shipping address" — these arrived at
   the browser's default h2 size, larger than the confirmation line above. */
.woocommerce-order-details__title,
.woocommerce-customer-details .woocommerce-column__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink-deep);
}

/* Billing and shipping addresses.

   woocommerce-layout.css floats `.col-1` and `.col-2` at 48% with no media
   query of its own, so the two addresses stayed side by side at every width
   and each one squeezed into half a phone screen. The theme already replaces
   those floats on the checkout and account screens; this page was missed, so
   it was the one place the float layout still showed through. A grid drops to
   one column on its own and needs no clearfix. */
.woocommerce-customer-details .woocommerce-columns--addresses,
.woocommerce-customer-details .col2-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.woocommerce-customer-details .col2-set .col-1,
.woocommerce-customer-details .col2-set .col-2,
.woocommerce-customer-details .woocommerce-column {
  float: none;
  width: auto;
}

/* The clearfix WooCommerce adds for the floats becomes a stray grid item. */
.woocommerce-customer-details .col2-set::before,
.woocommerce-customer-details .col2-set::after,
.woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce-customer-details .woocommerce-columns--addresses::after {
  content: none;
  display: none;
}

.woocommerce-order-details table,
.woocommerce-customer-details address {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-style: normal;
  padding: 20px;
}

/* `border-radius` is ignored on a collapsed table, and the row borders below
   draw the structure anyway. */
.woocommerce-order-details table {
  overflow: hidden;
}

.woocommerce-customer-details address {
  /* A long email or address line otherwise widens the card past its column. */
  overflow-wrap: break-word;
  line-height: 1.7;
}

.woocommerce-order-details th,
.woocommerce-order-details td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
}

/* Totals and the product column read better apart than centred. */
.woocommerce-order-details td.product-total,
.woocommerce-order-details th.product-total,
.woocommerce-order-details tfoot td,
.woocommerce-order-details tfoot th {
  text-align: right;
}

.woocommerce-order-details tfoot th {
  font-weight: 500;
}

/* The product cell holds a link plus a quantity strong; without this the
   two run together on a narrow column. */
.woocommerce-order-details td.product-name a {
  color: var(--ink-deep);
  text-decoration: none;
}

.woocommerce-order-details td.product-name .wc-item-meta,
.woocommerce-order-details td.product-name dl.variation {
  margin: 6px 0 0;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.woocommerce-order-details td.product-name .wc-item-meta p,
.woocommerce-order-details td.product-name dl.variation dd {
  margin: 0;
}

/* ------------------------------------------------------------
   MY ACCOUNT
   ------------------------------------------------------------ */

/* ---- Container ----
   The account screens come from a shortcode, so they render inside the page
   template's prose column: capped at 820px and set in article typography. The
   design below carries its own width and type scale. */
body.woocommerce-account .page-content {
  max-width: none;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
}

/* The prose column draws a gold rule under every h2; the account markup places
   its own .section-divider where one belongs. */
body.woocommerce-account .page-content h2::after {
  content: none;
}

/* ---- WooCommerce layout reset ----
   woocommerce-layout.css lays the account out with floats and percentage
   widths — the navigation at 30%, the content at 68%, address and login
   columns at 48%, paired form rows at 47% — and clears them with table
   pseudo-elements. Those selectors outrank plain class names, so without this
   the grid tracks below collapse to a fraction of their width and the
   clearfixes land as stray grid and flex children. */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-Addresses.col2-set .col-1,
.woocommerce-account .woocommerce-Addresses.col2-set .col-2,
.woocommerce-account .yb-login-panels.col2-set .col-1,
.woocommerce-account .yb-login-panels.col2-set .col-2,
body.woocommerce-account form .form-row-first,
body.woocommerce-account form .form-row-last {
  float: none;
  width: auto;
}

.woocommerce-account .woocommerce-Addresses.col2-set::before,
.woocommerce-account .woocommerce-Addresses.col2-set::after,
.woocommerce-account .yb-login-panels.col2-set::before,
.woocommerce-account .yb-login-panels.col2-set::after,
.woocommerce-account .addresses .woocommerce-Address-title::before,
.woocommerce-account .addresses .woocommerce-Address-title::after,
body.woocommerce-account form .form-row::before,
body.woocommerce-account form .form-row::after {
  display: none;
}

.yb-account {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 0;
}

.yb-account-header {
  margin-bottom: 34px;
}

.yb-account-layout {
  display: grid;
  /* 330px leaves the identity block ~218px beside the avatar — room for a
     typical email address on one line. The content track gives up the same. */
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.yb-account-nav {
  padding: 24px 22px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--card-bg);
  position: sticky;
  top: 100px;
}

.yb-account-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.yb-account-avatar {
  border-radius: 50%;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.yb-account-identity {
  min-width: 0;
}

.yb-account-greeting {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.yb-account-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink-deep);
  overflow-wrap: anywhere;
}

.yb-account-email {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  /* Never clip: an address longer than the column breaks onto a second line
     instead of losing its tail to an ellipsis. */
  overflow-wrap: anywhere;
}

.yb-account-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 17px;
}

.yb-account-nav li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.94rem;
  transition: all 0.3s var(--ease-smooth);
}

.yb-account-nav li a:hover {
  background: rgba(26, 39, 68, 0.05);
  color: var(--ink-deep);
}

.yb-account-nav li.is-active a,
.yb-account-nav li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--ink-deep);
  color: var(--cream);
}

.yb-account-nav-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.yb-account-content {
  padding: 34px 32px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--card-bg);
  min-height: 320px;
}

.yb-dashboard-greeting {
  font-size: 1.05rem;
  color: var(--text-secondary);
  display: none;
}

.yb-dashboard-intro {
  color: var(--text-secondary);
}

.yb-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin: 28px 0 32px;
}

/* With the greeting hidden the stats open the panel; the panel's own padding
   is enough space above them. */
.yb-dashboard>.yb-dashboard-stats:first-child {
  margin-top: 0;
}

/* Three tracks across the full width: icon badge, figure and label, then the
   arrow to the section it links to, pinned to the right edge. */
.yb-stat-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cream) 0%, var(--parchment-warm) 100%);
  text-decoration: none;
  overflow: hidden;
  transition: all 0.3s var(--ease-smooth);
}

/* Gold rule down the leading edge; full strength on hover. */
.yb-stat-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gold);
  opacity: 0.55;
  transition: opacity 0.3s var(--ease-smooth);
}

.yb-stat-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.yb-stat-card:hover::before {
  opacity: 1;
}

.yb-stat-icon {
  grid-row: span 2;
  display: block;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 12px;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.16);
  color: var(--gold-deep);
  font-size: 1.35rem;
}

.yb-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ink-deep);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.yb-stat-arrow {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: block;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 9px;
  border: 1px solid rgba(201, 169, 110, 0.5);
  border-radius: 50%;
  color: var(--gold-deep);
  font-size: 0.95rem;
  transition: all 0.3s var(--ease-smooth);
}

.yb-stat-card:hover .yb-stat-arrow {
  border-color: var(--ink-deep);
  background: var(--ink-deep);
  color: var(--cream);
  transform: translateX(3px);
}

.yb-stat-label {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.yb-order-list {
  list-style: none;
  margin: 18px 0;
  padding: 0;
}

.yb-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 1fr 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.92rem;
}

.yb-order-number a {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink-deep);
  text-decoration: none;
}

.yb-order-date {
  color: var(--text-muted);
}

.yb-order-total {
  font-family: var(--font-display);
  color: var(--ink-deep);
  text-align: right;
}

.yb-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* background: var(--parchment-deep); */
  color: var(--ink-deep);
}

.yb-pill--completed {
  background: rgba(47, 107, 79, 0.14);
  color: #2f6b4f;
}

/* .yb-pill--processing,
.yb-pill--on-hold {
  background: rgba(201, 169, 110, 0.24);
} */

.yb-pill--cancelled,
.yb-pill--failed,
.yb-pill--refunded {
  background: rgba(180, 69, 61, 0.12);
  color: #8f3931;
}

/* Account tables */
.woocommerce-orders-table,
.woocommerce-table--order-details,
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-orders-table th,
.woocommerce-orders-table td,
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  font-size: 0.92rem;
}

.woocommerce-orders-table th,
.woocommerce-MyAccount-content table.shop_table th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.woocommerce-MyAccount-content form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.woocommerce-MyAccount-content form label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.woocommerce-MyAccount-content input[type='text'],
.woocommerce-MyAccount-content input[type='email'],
.woocommerce-MyAccount-content input[type='tel'],
.woocommerce-MyAccount-content input[type='password'],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--cream);
  font-family: var(--font-serif);
  color: var(--text-primary);
}

/* ---- Address book ----
   Woo's `.woocommerce form .form-row .input-text` outranks the rule above,
   so the address form's text inputs came out in Woo's own white skin while
   its country and state boxes — Select2, which that rule never reached —
   wore the theme's. Matched at Woo's depth here, in the same skin as those
   boxes, so every field in the form reads as one design. */
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row .input-text,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row textarea,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row select {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background-color: var(--cream);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: normal;
  color: var(--text-primary);
  transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

/* A plain select (only seen if Select2 does not load) keeps room for the
   chevron the select rules below draw. */
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row select {
  padding-right: 40px;
}

.woocommerce-MyAccount-content .woocommerce-address-fields .form-row .input-text:focus,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.16);
}

.woocommerce-MyAccount-content .woocommerce-address-fields .form-row.has-error .input-text,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row.has-error textarea,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row.has-error select {
  border-color: #b4453d;
  background-color: rgba(180, 69, 61, 0.03);
}

/* Kept while focused: see the matching checkout rule. */
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row.has-error .input-text:focus {
  border-color: #b4453d !important;
}

/* ---- Account details ----
   The form keeps WooCommerce's own markup (the theme's override of
   myaccount/form-edit-account.php only adds inline errors). Woo dresses it at `.woocommerce form .form-row ...`, so the rules below lead
   with `.yb-account-content .woocommerce-EditAccountForm` to outrank that
   without touching the address and other account forms. */
.yb-account-content:has(.woocommerce-EditAccountForm) {
  padding: 40px 44px 44px;
}

.yb-account-content .woocommerce-EditAccountForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  max-width: 760px;
  margin: 0;
}

.yb-account-content .woocommerce-EditAccountForm>* {
  grid-column: 1 / -1;
  min-width: 0;
}

/* First and last name sit side by side, as the checkout fields do. */
.yb-account-content .woocommerce-EditAccountForm>.form-row-first {
  grid-column: 1;
}

.yb-account-content .woocommerce-EditAccountForm>.form-row-last {
  grid-column: 2;
}

/* Woo's float clearers would each take a grid row and a row gap. */
.yb-account-content .woocommerce-EditAccountForm>.clear {
  display: none;
}

.yb-account-content .woocommerce-EditAccountForm .form-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.yb-account-content .woocommerce-EditAccountForm .form-row label {
  display: block;
  margin: 0 0 9px;
  font-family: var(--font-serif);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-deep);
}

.yb-account-content .woocommerce-EditAccountForm .form-row .required {
  visibility: visible;
  color: #b4453d;
  font-weight: 600;
  text-decoration: none;
  border: 0;
}

.yb-account-content .woocommerce-EditAccountForm .form-row .input-text {
  width: 100%;
  min-width: 0;
  height: 50px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid rgba(26, 39, 68, 0.12);
  border-radius: 6px;
  background: var(--parchment);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--text-primary);
  box-shadow: none;
  transition: border-color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth),
    box-shadow 0.25s var(--ease-smooth);
}

.yb-account-content .woocommerce-EditAccountForm .form-row .input-text:hover {
  border-color: rgba(26, 39, 68, 0.22);
}

.yb-account-content .woocommerce-EditAccountForm .form-row .input-text:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--card-bg);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.16);
}

/* Helper text under Display name. Woo wraps it in <em>; the italic reads as
   an aside next to the uppercase labels, so it stays upright and muted. */
.yb-account-content .woocommerce-EditAccountForm #account_display_name_description {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.yb-account-content .woocommerce-EditAccountForm #account_display_name_description em {
  font-style: normal;
}

/* ---- Password change ----
   A floated legend stops being the fieldset's "rendered legend" and becomes
   an ordinary child, so it sits inside the panel's padding as its heading
   rather than cutting through the top border. */
.yb-account-content .woocommerce-EditAccountForm fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
  margin: 12px 0 0;
  padding: 28px 28px 30px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--parchment-warm);
}

.yb-account-content .woocommerce-EditAccountForm fieldset legend {
  float: left;
  width: 100%;
  margin: 0 0 4px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-deep);
}

.yb-account-content .woocommerce-EditAccountForm fieldset .input-text {
  background: var(--card-bg);
}

/* Woo's script wraps each password input in `.password-input` and appends
   the reveal toggle; the wrapper has to fill the row the input filled. */
.yb-account-content .woocommerce-EditAccountForm .password-input {
  display: block;
  position: relative;
  width: 100%;
}

.yb-account-content .woocommerce-EditAccountForm .password-input .input-text {
  padding-right: 50px;
}

.yb-account-content .woocommerce-EditAccountForm .show-password-input {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth);
}

.yb-account-content .woocommerce-EditAccountForm .show-password-input::before {
  width: 20px;
  height: 20px;
}

.yb-account-content .woocommerce-EditAccountForm .show-password-input:hover,
.yb-account-content .woocommerce-EditAccountForm .show-password-input:focus-visible {
  opacity: 0.9;
  background: var(--parchment-warm);
  outline: none;
}

/* Strength meter and hint that Woo inserts under New password. */
.yb-account-content .woocommerce-EditAccountForm .woocommerce-password-strength {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
}

.yb-account-content .woocommerce-EditAccountForm .woocommerce-password-hint {
  display: block;
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- Validation ---- */
.yb-account-content .woocommerce-EditAccountForm .form-row.woocommerce-invalid label {
  color: #b4453d;
}

.yb-account-content .woocommerce-EditAccountForm .form-row.woocommerce-invalid .input-text,
.yb-account-content .woocommerce-EditAccountForm .input-text:user-invalid {
  border-color: #b4453d;
  background: rgba(180, 69, 61, 0.04);
}

/* ---- Save ---- the last paragraph holds the nonce and the submit button. */
.yb-account-content .woocommerce-EditAccountForm>p:has(> [name='save_account_details']) {
  display: flex;
  justify-content: flex-start;
  margin: 8px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border-light);
}

.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.woocommerce-Address {
  padding: 22px 24px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--parchment-warm);
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink-deep);
  margin: 0;
}

.woocommerce-Address address {
  font-style: normal;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ---- Addresses screen spacing ----
   The shared account spacing is sized for the dashboard's stat cards and
   tables. Two short address cards under a one-line intro read as loose at
   that scale, so this endpoint tightens the gaps without touching the cards'
   look. WooCommerce adds the endpoint's body class. */
body.woocommerce-edit-address .yb-account-header {
  margin-bottom: 26px;
}

body.woocommerce-edit-address .yb-account-layout {
  gap: 28px;
}

body.woocommerce-edit-address .yb-account-content {
  padding: 26px 26px 28px;
}

/* The intro line isn't the panel's first child — WooCommerce prints an empty
   notices wrapper ahead of it — so the grid owns the space below it. */
body.woocommerce-edit-address .yb-account-content > p {
  margin: 0;
}

body.woocommerce-edit-address .woocommerce-Addresses {
  gap: 18px;
  margin-top: 26px;
}

body.woocommerce-edit-address .woocommerce-Address {
  padding: 18px 20px;
}

body.woocommerce-edit-address .woocommerce-Address-title {
  margin-bottom: 8px;
}

body.woocommerce-edit-address .woocommerce-Address address {
  margin: 0;
}

/* ------------------------------------------------------------
   SIGN IN / REGISTER / PASSWORD RESET
   ------------------------------------------------------------
   Everything a logged-out visitor meets on the account page lives here. The
   markup is WooCommerce's — form.login, form.register and
   form.lost_reset_password — so these rules have to outrank the plugin's own
   `.woocommerce form ...` selectors, which is why so many of them lead with a
   body or `.woocommerce` class. */

/* The account screens share the prose column with the rest of the site, and
   the dashboard removes its cap so the two-column layout can breathe. Logged
   out there is no dashboard to fill that width, so the cap comes back. */
body.yb-account-guest .page-content {
  max-width: 1080px;
}

.yb-auth {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 0 24px;
}

.yb-auth.is-single {
  max-width: 520px;
}

.yb-auth.is-single.has-image {
  max-width: 940px;
}

/* Sign in beside register. `auto-fit` was collapsing both cards into a single
   column as soon as their content pushed past the container. */
.yb-auth .yb-login-panels.col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.yb-auth.has-image {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 44px;
  align-items: stretch;
}

.yb-auth.is-single.has-image {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* The image fills whatever height the cards settle on. Left in flow it would
   drive the row to its own intrinsic height instead — a portrait book cover
   stretched the column far past the card beside it. */
.yb-login-visual {
  position: relative;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--parchment-warm);
}

.yb-login-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Card ---- */
.yb-auth .yb-login-panel {
  padding: 38px 36px 36px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}

.yb-auth-head {
  margin-bottom: 26px;
}

.yb-auth-head .section-label {
  margin-bottom: 10px;
}

.yb-auth .yb-login-panel .section-title {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  text-align: left;
  margin-bottom: 14px;
}

/* The heading reads as one line, so the emphasised word keeps the italic but
   not a second color. */
.yb-auth .yb-login-panel .section-title em {
  color: inherit;
}

.yb-auth .yb-login-panel .section-divider {
  margin: 0 0 16px;
}

.yb-auth .yb-login-panel .section-description {
  margin: 0;
  max-width: 46ch;
}

/* ---- Form shell ----
   Woo's form.login and form.register carry a border, 20px of padding and a 2em
   margin, which drew a second box inside the card. The card is the frame; the
   form is only a stack of fields. */
.woocommerce .yb-auth-form,
.woocommerce-page .yb-auth-form,
body.woocommerce-account .woocommerce form.login.yb-auth-form,
body.woocommerce-account .woocommerce form.register.yb-auth-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
}

/* ---- Fields ---- */
.yb-auth-form .yb-form-field,
.woocommerce .yb-auth-form .form-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.yb-auth-form .yb-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  /* A validation message under one column makes that grid row taller. Without
     this the shorter column's field stretches to match it. */
  align-items: start;
}

.woocommerce .yb-auth-form label {
  display: block;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.yb-auth-form .yb-optional {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text-muted);
}

.yb-auth-form .yb-field-hint {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.yb-auth-form .yb-form-note,
.yb-auth-form .form-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--parchment-warm);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* WooCommerce prints the privacy notice into the register form. It inherits
   the article prose scale, which reads as body copy rather than fine print. */
.yb-auth-form .woocommerce-privacy-policy-text,
.yb-auth-form .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.yb-auth-form .woocommerce-privacy-policy-text a {
  color: var(--ink-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.yb-auth-form .woocommerce-privacy-policy-text a:hover {
  color: var(--ink-deep);
}

/* Woo sets inputs at `.woocommerce form .form-row .input-text`, so the theme
   has to match that weight to dress its own field. */
.woocommerce .yb-auth-form .input-text,
.woocommerce .yb-auth-form input[type='text'],
.woocommerce .yb-auth-form input[type='email'],
.woocommerce .yb-auth-form input[type='tel'],
.woocommerce .yb-auth-form input[type='password'] {
  width: 100%;
  min-width: 0;
  height: auto;
  /* Keep the box at its own height even when the row around it is taller. */
  flex: none;
  align-self: start;
  margin: 0;
  padding: 12px 15px;
  border: 1.5px solid var(--border-light);
  border-radius: 6px;
  background: var(--parchment);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-primary);
  box-shadow: none;
  transition: border-color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth),
    box-shadow 0.25s var(--ease-smooth);
}

.woocommerce .yb-auth-form .input-text::placeholder {
  color: var(--text-muted);
}

.woocommerce .yb-auth-form .input-text:hover {
  border-color: rgba(26, 39, 68, 0.18);
}

.woocommerce .yb-auth-form .input-text:focus,
.woocommerce .yb-auth-form input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--card-bg);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.16);
}

/* ---- Password reveal ----
   Woo's script wraps password inputs in `.password-input` and appends a toggle
   button. The wrapper has to fill the field the input would have filled. */
.woocommerce .yb-auth-form .password-input {
  display: block;
  position: relative;
  width: 100%;
}

.woocommerce .yb-auth-form .password-input input[type='password'],
.woocommerce .yb-auth-form .password-input input[type='text'] {
  padding-right: 46px;
}

.woocommerce .yb-auth-form .show-password-input {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.25s var(--ease-smooth);
}

.woocommerce .yb-auth-form .show-password-input:hover,
.woocommerce .yb-auth-form .show-password-input:focus-visible {
  opacity: 1;
}

/* ---- Validation ----
   Woo marks a rejected row with `.woocommerce-invalid`; `:user-invalid` covers
   what the browser catches before the request is sent. Neither fires while an
   untouched field is still being filled in. */
.woocommerce .yb-auth-form .form-row.woocommerce-invalid label,
.woocommerce .yb-auth-form .form-row.woocommerce-invalid .yb-required {
  color: #b4453d;
}

.woocommerce .yb-auth-form .form-row.woocommerce-invalid .input-text,
.woocommerce .yb-auth-form .input-text:user-invalid {
  border-color: #b4453d;
  background: rgba(180, 69, 61, 0.04);
}

.woocommerce .yb-auth-form .form-row.woocommerce-invalid .input-text:focus,
.woocommerce .yb-auth-form .input-text:user-invalid:focus {
  box-shadow: 0 0 0 3px rgba(180, 69, 61, 0.14);
}

.woocommerce .yb-auth-form .form-row.woocommerce-validated .input-text {
  border-color: rgba(47, 107, 79, 0.5);
}

/* ---- Remember me / lost password ---- */
.woocommerce .yb-auth-form .yb-login-actions {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: -2px 0 0;
}

.woocommerce .yb-auth-form .yb-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.woocommerce .yb-auth-form .yb-checkbox input[type='checkbox'] {
  width: 14px;
  height: 14px;
  /* The row is a flex container, so the box stretches to the label's line box
     without a fixed basis. */
  flex: 0 0 14px;
  margin: 0;
  accent-color: var(--ink-deep);
  cursor: pointer;
}

/* Woo's own checkout login panel prints this link too. */
.lost_password {
  font-size: 0.88rem;
  color: var(--ink-medium);
}

.yb-auth-form .lost_password,
.yb-auth-form .woocommerce-LostPassword {
  margin: 0;
  font-size: 0.87rem;
  color: var(--ink-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(44, 74, 124, 0.35);
  transition: color 0.25s var(--ease-smooth);
}

.yb-auth-form .lost_password:hover,
.yb-auth-form .woocommerce-LostPassword:hover {
  color: var(--ink-deep);
  text-decoration-color: currentColor;
}

/* ---- Submit ----
   `.btn-primary` is the glass button drawn for the dark hero; on a white card
   it is white on white, so the cards use the solid variants instead. */
.yb-auth-form .yb-auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  cursor: pointer;
}

.yb-auth-switch {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}

.yb-auth-switch a {
  color: var(--ink-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.yb-auth-switch a:hover {
  color: var(--ink-deep);
}

/* Woo's float clearers have no place in a flex column. */
.yb-auth-form .clear,
.woocommerce .yb-auth-form .form-row::before,
.woocommerce .yb-auth-form .form-row::after {
  display: none;
}

/* Notices sit above the cards, on the same measure. */
body.yb-account-guest .woocommerce-notices-wrapper {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

@media (max-width: 575px) {
  body.yb-account-guest .woocommerce-notices-wrapper {
    padding: 0 16px;
  }
}

/* The reset form is reachable while signed in too, where it renders inside the
   dashboard pane. One card is enough there. */
.yb-account-content .yb-auth {
  max-width: none;
  padding: 0;
}

.yb-account-content .yb-auth .yb-login-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1100px) {

  .shop-layout,
  .yb-cart-layout,
  .yb-checkout-layout,
  .yb-account-layout {
    grid-template-columns: 1fr;
  }


  /* `1fr` is `minmax(auto, 1fr)`: stacked, the one column would still grow to
     its widest child's min-content and take the page into a horizontal
     scroll. The cart's column has to be able to shrink to the screen. */
  .yb-cart-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-sidebar,
  .yb-cart-aside,
  .yb-account-nav {
    position: static;
  }

  /* The side image is decoration; below this width the cards need the room. */
  .yb-auth.has-image,
  .yb-auth.is-single.has-image {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .yb-auth.is-single.has-image {
    max-width: 560px;
  }

  /* Stacked, it reads as a banner above the card rather than a column. */
  .yb-login-visual {
    min-height: 0;
    height: 240px;
  }

  ul.products.columns-4 {
    --yb-shop-columns: 3;
  }
}

@media (max-width: 900px) {

  .product-layout,
  .quick-view-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* Stacked, the cover would otherwise run the full width of the page, and
     sticking it would pin it over the summary below. */
  .product-gallery-column {
    position: static;
    top: auto;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  ul.products,
  ul.products.columns-3,
  ul.products.columns-4 {
    --yb-shop-columns: 2;
  }

  /* Sign in above register, each on a comfortable measure. */
  .yb-auth .yb-login-panels.col2-set {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .yb-auth.is-split {
    max-width: 560px;
  }
}

@media (max-width: 768px) {

  /* The 320px floor keeps the panel level with the navigation column on
     desktop. Stacked, the nav sits above it, so the floor only shows up as
     empty space under a short table. */
  .yb-account-content {
    min-height: 0;
    padding: 24px 18px;
  }

  body.woocommerce-edit-address .yb-account-content {
    padding: 20px 16px 22px;
  }

  body.woocommerce-edit-address .woocommerce-Address {
    padding: 16px 18px;
  }

  body.woocommerce-edit-address .woocommerce-Addresses {
    margin-top: 22px;
  }

  .yb-cart-head {
    display: none;
  }

  .yb-auth {
    padding: 0 0 16px;
  }

  .section.product-section {
    padding-bottom: 60px;
  }

  .yb-auth .yb-login-panel {
    padding: 30px 24px 28px;
  }

  .yb-auth-head {
    margin-bottom: 22px;
  }

  .yb-account-content:has(.woocommerce-EditAccountForm) {
    padding: 28px 22px 30px;
  }

  .yb-account-content .woocommerce-EditAccountForm {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }

  .yb-account-content .woocommerce-EditAccountForm>.form-row-first,
  .yb-account-content .woocommerce-EditAccountForm>.form-row-last {
    grid-column: 1 / -1;
  }

  .yb-account-content .woocommerce-EditAccountForm fieldset {
    gap: 18px;
    padding: 22px 18px 24px;
  }

  .yb-account-content .woocommerce-EditAccountForm fieldset legend {
    font-size: 1.2rem;
  }

  .yb-account-content .woocommerce-EditAccountForm>p:has(> [name='save_account_details']) .button {
    width: 100%;
    min-width: 0;
  }

  .yb-cart-item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'product remove'
      'qty subtotal';
    gap: 14px;
    padding: 20px 0;
  }

  .yb-cart-item-product {
    grid-area: product;
  }

  .yb-cart-item-remove {
    grid-area: remove;
  }

  .yb-cart-item-qty {
    grid-area: qty;
    justify-content: flex-start;
  }

  .yb-cart-item-subtotal {
    grid-area: subtotal;
    text-align: right;
  }

  .yb-cart-item-price {
    display: none;
  }

  .yb-cart-item-mobile-price {
    display: block;
  }

  /* `nowrap` matters: in a wrapping column the items stretch to the flex
     line's width — their max-content — rather than the container's, and the
     coupon row ran past a 320px screen's column. */
  .yb-cart-actions,
  .yb-cart-actions-right {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  /* Stacked, the actions run down the page, so the coupon's `flex-basis` would
     be read as a 320px height. */
  .yb-cart-coupon {
    flex: 0 0 auto;
    align-items: center;
  }

  .yb-cart-actions .btn {
    justify-content: center;
  }

  .yb-order-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .yb-order-total {
    text-align: left;
  }

  .yb-checkout-steps li:not(:last-child)::after {
    width: 20px;
  }

  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .yb-quick-view-panel {
    padding: 30px 22px;
  }

  .product-features--centered {
    grid-auto-flow: row;
  }

  /* Wrapping breaks the tab strip: the active tab's -1px overlap can only meet
     the panel from the last row, so any tab that wraps floats away from it.
     Keeping one row and letting the labels shrink holds the tabs joined to the
     panel. Scrolling is avoided here on purpose — an overflow container would
     clip that same -1px overlap. */
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    gap: 2px;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li {
    flex: 0 1 auto;
    min-width: 0;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 11px 12px;
    font-size: 0.88rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .woocommerce div.product .woocommerce-tabs .panel {
    padding: 24px 20px;
    border-radius: 0 8px 8px 8px;
  }

  .woocommerce table.shop_attributes th {
    width: 40%;
  }

  .hero-inner {
    padding: 120px 20px 90px;
  }

  .scroll-indicator {
    bottom: 10px;
  }

  .product-price-box {
    margin: 10px 0;
  }

}

@media (max-width: 560px) {

  /* ---- Order received ----
     The whole page had no responsive rules of its own, so every card kept
     its desktop padding and the order summary kept a multi-column grid on a
     phone. */
  .woocommerce-order {
    padding: 0 16px var(--section-y);
  }

  /* `auto-fit` with a 160px minimum still fitted two columns on a 360px
     screen, which left "Payment method:" wrapping mid-label. One per row. */
  .woocommerce-order-overview,
  .woocommerce-thankyou-order-details {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
    margin: 24px 0;
  }

  .woocommerce-order-details,
  .woocommerce-customer-details {
    margin-top: 28px;
  }

  .woocommerce-customer-details address {
    padding: 16px;
  }

  /* The order table is two columns of prose and a price; at this width the
     cell padding is what pushes it into a horizontal scroll. */
  .woocommerce-order-details th,
  .woocommerce-order-details td {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  /* The section keeps 48px of padding a side, which leaves the three tabs
     fighting over what is left. Tighten them rather than truncate the labels. */
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 10px 8px;
    font-size: 0.8rem;
    letter-spacing: 0;
  }

  ul.products,
  ul.products.columns-2,
  ul.products.columns-3,
  ul.products.columns-4 {
    --yb-shop-columns: 1;
  }

  .yb-mini-cart {
    width: 100vw;
  }

  form.cart,
  .woocommerce-variation-add-to-cart {
    flex-direction: column;
    align-items: stretch;
  }

  .single_add_to_cart_button,
  .woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100%;
  }

  /* The stepper is 135px wide and 46px tall on desktop, which is a lot of a
     narrow screen for a field that holds one or two digits. Both axes shrink
     here — 34px cells on a 38px row — while the cells stay equal to each other
     and the grid keeps its single fixed row, so the −, number and + stay in
     identical boxes with the same borders, dividers and radius. 38px is still
     above the comfortable tap floor. The stepper keeps to the left edge of the
     column, like the rest of the product details, rather than centring over
     the full-width button below it. */
  .quantity,
  .qty-control {
    --qty-cell: 34px;
    grid-template-rows: 38px;
    align-self: flex-start;
  }

  /* The glyphs scale with the smaller cell so they stay visually centred
     rather than crowding the dividers. */
  .qty-btn {
    font-size: 0.95rem;
  }

  .qty-control input,
  .quantity input.qty,
  .woocommerce .quantity input.qty {
    font-size: 0.88rem;
  }

  .yb-auth .yb-login-panel {
    padding: 26px 20px 24px;
    border-radius: 10px;
  }

  /* Two name fields side by side leave neither enough room to read. */
  .yb-auth-form .yb-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .scroll-indicator {
    left: 42%;
  }

  /* Wrapped, "Lost your password?" reads as part of the checkbox row unless it
     is given its own line. */
  .woocommerce .yb-auth-form .yb-login-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  /* ---- Cart ----
     One even 20px gutter at every phone width, a touch wider than
     --section-x so the cart table's edges keep clear of the screen. */
  .woocommerce-cart #primary .section.page-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .yb-cart-layout {
    gap: 32px;
  }

  /* Global buttons carry a 200px floor (--btn-min-w). Beside the coupon field
     that floor plus the field's intrinsic width came to 399px, which set the
     stacked column's minimum and pushed the whole cart off a 320–414px
     screen. The Apply button only needs its label. */
  .yb-cart-coupon .btn {
    flex-shrink: 0;
    min-width: 0;
    padding-left: 22px;
    padding-right: 22px;
  }

  .yb-cart-actions-right .btn {
    width: 100%;
    min-width: 0;
  }

  .yb-cart-item {
    column-gap: 12px;
    row-gap: 16px;
  }

  .yb-cart-item-product {
    gap: 14px;
    align-items: flex-start;
  }

  .yb-cart-item-thumb img {
    width: 64px;
    height: 88px;
  }

  .yb-cart-item-details {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.woocommerce-cart .page-content .yb-cart-item-title {
    font-size: 1.02rem;
  }

  .yb-cart-item-qty,
  .yb-cart-item-subtotal {
    align-self: center;
  }

  .yb-cart-item-subtotal {
    white-space: nowrap;
  }

  .yb-summary {
    padding: 22px 18px;
  }

  .summary-row {
    gap: 12px;
  }

  .summary-row:not(.summary-row--shipping):not(.summary-row--calculator)> :last-child {
    text-align: right;
  }
}


@media (max-width: 390px) {
  .page-hero {
    padding: 100px 20px 60px;
  }

  .article-hero {
    padding: 100px 20px var(--article-gap);
  }

  .article-body h2 {
    line-height: 1.2;
  }

  .comment-form {
    margin-top: 20px;
  }

  .article-tag {
    padding: 6px 10px;
  }

  .footer-links {
    gap: 10px;
  }

  .footer-grid {
    margin-bottom: 20px;
  }

  .insights-pagination .page-numbers {
    min-width: 37px;
    min-height: 35px;
  }

  .type-post {
    margin-bottom: 20px;
  }

  /* Matches the tightened posts-list-to-pagination spacing in theme.css; this
     file loads last, so leaving 40px here would undo it at this width. */
  .insights-grid {
    margin-bottom: 16px;
  }

  .section.legal-section .legal-body.article-body ul {
    padding-left: 15px;
  }

  .footer-links {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 19px;
    flex-wrap: wrap;
  }

  .scroll-top {
    right: 18px;
  }
}

.section.product-section {
  padding-bottom: 60px;
}

.woocommerce-error,
.woocommerce-error li {
  color: #b4453d;
}

.woocommerce-error a {
  color: inherit;
  text-decoration: underline;
}

.product-price,
.product-price .amount {
  font-size: 18px !important;
}

#yb-search-field:focus-visible {
  outline: none;
}

.yb-cart-item-price,
.yb-cart-item-subtotal {
  overflow: hidden;
}

@media (max-width: 768px) {
  .section.product-section {
    padding-bottom: 0px;
  }

  /* WooCommerce buttons deliberately keep their desktop size here.
     This block used to force `padding: 9px 18px !important` on the whole
     `.button` group, and because of the `!important` it also flattened
     #place_order, .checkout-button and .single_add_to_cart_button — the
     three buttons that most need to stay large on a phone. Size now comes
     from the shared tokens at every viewport. */
}

/* ------------------------------------------------------------
   WISHLIST — MOBILE CARD LAYOUT

   Below 768px YITH throws away the desktop table and re-renders the
   wishlist server-side as `ul.wishlist_table.mobile > li` (see
   init_wishlist_responsive() in jquery.yith-wcwl.js). None of the table
   styling carries over, and the plugin's own mobile defaults lean on
   inline-block widths that collapse on a narrow screen. These rules
   rebuild each row as a card that reads like the desktop table.
   ------------------------------------------------------------ */
.wishlist_table.mobile {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

.wishlist_table.mobile li {
  display: block;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--card-bg);
}

/* The plugin sizes these with inline-block percentages that do not hold up
   on a phone; flex keeps the thumbnail and details side by side instead. */
.wishlist_table.mobile li .item-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0 0 14px;
}

.wishlist_table.mobile li .item-wrapper .product-thumbnail {
  display: block;
  flex: 0 0 84px;
  max-width: 84px;
  margin: 0;
}

.wishlist_table.mobile li .item-wrapper .product-thumbnail a {
  display: block;
  border: 0;
}

.wishlist_table.mobile li .item-wrapper .product-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.wishlist_table.mobile li .item-wrapper .item-details {
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.wishlist_table.mobile li .item-details .product-name h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 500;
}

.wishlist_table.mobile li .item-details .product-name h3 a {
  color: var(--ink-deep);
  text-decoration: none;
}

.wishlist_table.mobile li .item-details .product-name h3 a:hover {
  color: var(--ink-medium);
}

/* Price / stock rows: same label-value pairing the desktop columns give,
   stacked as rows. */
.wishlist_table.mobile li .item-details table.item-details-table,
.wishlist_table.mobile li table.additional-info {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0 0 12px;
}

.wishlist_table.mobile li .item-details table.item-details-table td,
.wishlist_table.mobile li table.additional-info td {
  border: 0;
  padding: 3px 0;
  font-size: 0.88rem;
  vertical-align: top;
}

.wishlist_table.mobile li .item-details table.item-details-table td.label,
.wishlist_table.mobile li table.additional-info td.label {
  width: 40%;
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
}

.wishlist_table.mobile li .item-details table.item-details-table td.value,
.wishlist_table.mobile li table.additional-info td.value {
  text-align: right;
  color: var(--text-primary);
}

.wishlist_table.mobile li .product-stock-status span.wishlist-in-stock,
.wishlist_table.mobile li .value span.wishlist-in-stock {
  color: #2f6b4f;
}

.wishlist_table.mobile li .value span.wishlist-out-of-stock {
  color: #8f3931;
}

/* Cart button and remove link share the footer row of the card. */
.wishlist_table.mobile li .additional-info-wrapper {
  display: block;
  padding: 0;
}

.wishlist_table.mobile li .additional-info-wrapper .product-add-to-cart,
.wishlist_table.mobile li .additional-info-wrapper .move-to-another-wishlist {
  text-align: left;
  margin: 0 0 10px;
}

/* YITH renders this link with `add_to_cart alt` but no `.button`, so the
   theme's button styling never reaches it. */
.wishlist_table.mobile li .product-add-to-cart a,
.woocommerce .wishlist_table.mobile li .product-add-to-cart a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  box-sizing: border-box;
  border: var(--btn-border) solid var(--ink-deep);
  border-radius: var(--btn-radius);
  background: var(--ink-deep);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: var(--btn-font);
  line-height: var(--btn-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: all 0.35s var(--ease-elegant);
}

.wishlist_table.mobile li .product-add-to-cart a:hover,
.woocommerce .wishlist_table.mobile li .product-add-to-cart a:hover {
  background: var(--ink-medium);
  border-color: var(--ink-medium);
  color: var(--cream);
}

.wishlist_table.mobile li .additional-info-wrapper .product-remove {
  text-align: right;
  margin: 0;
}

.wishlist_table.mobile li .additional-info-wrapper .product-remove a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.3s var(--ease-elegant);
}

.wishlist_table.mobile li .additional-info-wrapper .product-remove a:hover {
  color: #8f3931;
}

/* The title row and its inline edit form wrap rather than overflow. */
@media (max-width: 768px) {
  .wishlist-title-container .wishlist-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .wishlist-title-container .wishlist-title h2 {
    font-size: 1.5rem;
    margin: 0;
  }

  .wishlist-title-container .hidden-title-form input[type='text'] {
    width: 100%;
    max-width: 100%;
  }

  .yith-wcwl-form {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ------------------------------------------------------------
   SELECT DROPDOWNS

   Plain <select> fields (checkout, my-account, the review form, the
   shipping calculator) had no arrow of their own, so they fell back to
   the browser's native control — a different glyph and inset on every
   browser, sitting in whatever padding the field happened to have.
   Variations and ordering already draw their own matching chevron; this
   gives the rest of the theme the same one so every closed select reads
   as one design instead of two.

   Woo also swaps the country/state fields for Select2, whose open
   options panel is appended to <body> and, unstyled, renders in
   Select2's own white-and-blue skin — wrong fonts, wrong colours, and a
   z-index that isn't guaranteed to clear the fixed navbar or a sticky
   summary card next to it. The rules below give that panel the theme's
   surface, type and spacing, pin it above every other layer on the page,
   and match it to the field's own width so it never juts past the
   control that opened it or overlaps neighbouring content.
   ------------------------------------------------------------ */
body.woocommerce-checkout form .form-row select,
.woocommerce-MyAccount-content select,
.yb-account-content .woocommerce-EditAccountForm select,
#reviews .comment-form select,
.woocommerce form .shipping-calculator-form .form-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a2744' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* The Select2 container replaces the native select visually but sits at
   the same spot in the form. This base rule covers every instance in the
   theme; the checkout/account/shipping-calculator selectors after it only
   exist because Woo's own `.form-row` rules outrank a bare class at that
   depth and would otherwise win back the border and padding. */
.select2-container--default .select2-selection--single {
  height: auto;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--cream);
  padding: 12px 40px 12px 16px;
  transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

body.woocommerce-checkout form .form-row .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.16);
}

/* `normal`, as every text input in the theme has (Woo sets it on them), so
   a Select2 box is exactly as tall as the inputs either side of it. */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: normal;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-primary);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  height: 8px;
  width: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--ink-deep) transparent transparent;
  border-width: 6px 6px 0;
  margin: 0;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--ink-deep);
  border-width: 0 6px 6px;
}

/* The options panel: Select2 appends this outside the form, at the end
   of <body>, so it is styled on its own rather than nested under the
   field. `!important` on the two layout properties matches Select2's own
   inline `style` attribute, which is how it sets the panel's width and
   position at open time and would otherwise win over a plain rule. */
.select2-dropdown {
  z-index: 100001 !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 4px;
  background: var(--cream);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  font-family: var(--font-serif);
}

.select2-search--dropdown {
  padding: 8px;
  background: var(--cream);
  border-bottom: 1px solid var(--border-light);
}

.select2-search--dropdown .select2-search__field {
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--gold);
}

.select2-results__options {
  max-height: 280px;
  padding: 6px 0;
}

.select2-results__option {
  padding: 9px 16px;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(201, 169, 110, 0.16);
  color: var(--ink-deep);
}

.select2-container--default .select2-results__option[aria-selected='true'] {
  background: rgba(26, 39, 68, 0.05);
  color: var(--ink-deep);
  font-weight: 600;
}

.select2-results__option--disabled {
  color: var(--text-muted);
}

.select2-results__message {
  padding: 9px 16px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

#add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
  font-size: 13px;
}
/* ---------------------------------------------------------------------------
   Dropdowns: no visible outline in any state
   Selects, Select2's single-select button and the search field inside its
   panel all keep their border, padding and colours — only the focus ring,
   the box-shadow the open state added and the browser's own outline go.
   Placed last so it outranks the per-context rules earlier in this file.
   --------------------------------------------------------------------------- */
select,
select:hover,
select:active,
select:focus,
select:focus-visible,
select:focus-within,
.woocommerce select,
.woocommerce select:focus,
.woocommerce-ordering select,
.woocommerce-ordering select:focus,
.woocommerce-checkout select,
.woocommerce-checkout select:focus,
body.woocommerce-checkout form .form-row select:focus,
.woocommerce form .shipping-calculator-form .form-row select:focus,
.woocommerce div.product form.cart table.variations select:focus,
#reviews .comment-form select:focus {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

.select2-container,
.select2-container:focus,
.select2-container *:focus,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--single:active,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:focus-visible,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
body.woocommerce-checkout form .form-row .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered:focus,
.select2-dropdown,
.select2-search--dropdown .select2-search__field,
.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   CHEQUE + COD ROWS — SMALLER BOX AT EVERY VIEWPORT

   `.wc_payment_method > label` is a block-level flex box inside a grid column,
   so both rows stretch the full width of the summary card regardless of how
   short their label is. These two shrink to fit their text instead: inline-flex
   sizes the box to its content, and the padding and inner gap come down from
   14px/16px/10px.

   Scoped to the cheque and COD list items only, so every other payment row
   keeps the full-width treatment. Border, radius, background, type, colour and
   the checked gold state are all inherited unchanged from the base rule.
   --------------------------------------------------------------------------- */
.wc_payment_method.payment_method_cheque>label,
.wc_payment_method.payment_method_cod>label,
li.payment_method_cheque>label,
li.payment_method_cod>label {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  padding: 9px 12px;
  gap: 8px;
}

/* ---------------------------------------------------------------------------
   PAYMENT ROWS — SHARED LEFT EDGE

   The radio input sits outside the label, so each label box starts indented by
   the radio's width while the payment_box description below stays flush with
   the list edge. Each row becomes a flex line with the radio held at its
   intrinsic size, and the description is pushed in by the same amount so the
   label boxes and the description text all line up on one left edge.

   Spacing only — border, radius, background, type, colour and the checked gold
   state are untouched.
   --------------------------------------------------------------------------- */
:root {
  --wc-payment-indent: 26px;
}

body.woocommerce-checkout #payment ul.payment_methods>li.wc_payment_method,
.wc_payment_methods>li.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

body.woocommerce-checkout #payment ul.payment_methods>li.wc_payment_method>input[type="radio"],
.wc_payment_methods>li.wc_payment_method>input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  margin: 0;
}

body.woocommerce-checkout #payment ul.payment_methods>li.wc_payment_method>label,
.wc_payment_methods>li.wc_payment_method>label {
  margin: 0 0 0 calc(var(--wc-payment-indent) - 16px);
}

body.woocommerce-checkout #payment ul.payment_methods>li.wc_payment_method>.payment_box,
.wc_payment_methods>li.wc_payment_method>.payment_box {
  flex: 0 0 100%;
  margin-left: var(--wc-payment-indent);
}

/* ---------------------------------------------------------------------------
   SMALL PHONES — CHECKOUT / PAYMENT BUTTON ALIGNMENT

   The two gateway labels are long ("Order Request / Direct Confirmation",
   "Cash on Delivery"), so on a narrow screen they can still reach the edge of
   the summary card even at the reduced padding set above, which drags the
   Place Order button out of line with the cart's Checkout button.

   Padding is not repeated here — the base rule above already sets it for every
   viewport. This block only lets those labels wrap below 480px and holds the
   two buttons on one centre line. Height, type, colours and the selected state
   are untouched, and the selectors stay scoped to the cheque and COD list
   items so no other payment row, button or section is affected.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {

  /* Both buttons share one width and one centre line. */
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
  body.woocommerce-checkout #payment #place_order {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* The label is flex, so let the long title wrap rather than overflow. */
  .wc_payment_method.payment_method_cheque>label,
  .wc_payment_method.payment_method_cod>label,
  li.payment_method_cheque>label,
  li.payment_method_cod>label {
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------------------------
   320–380px PHONES — RADIO AND GATEWAY LABEL ON ONE LINE

   At these widths the label box drops onto its own line under the radio input
   because the row has no room left. The list item is made a single flex line
   with the radio held at its intrinsic size, and only the label's font size,
   padding and margin come down so the title still fits inside the box.

   Scoped to the cheque and COD rows within this narrow range, so every wider
   viewport and every other payment row keeps its current appearance.
   --------------------------------------------------------------------------- */
@media (min-width: 320px) and (max-width: 380px) {

  .wc_payment_methods li.payment_method_cheque,
  .wc_payment_methods li.payment_method_cod {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .wc_payment_methods li.payment_method_cheque>input[type="radio"],
  .wc_payment_methods li.payment_method_cod>input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
  }

  .wc_payment_method.payment_method_cheque>label,
  .wc_payment_method.payment_method_cod>label,
  li.payment_method_cheque>label,
  li.payment_method_cod>label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.25;
    padding: 6px 8px;
    margin: 0;
    gap: 6px;
  }
}