/* MarquePeptides — shop archive, single-product, cart/checkout/account styles. Ported from the approved static design. */

/* ===== CATALOG (archive-product) ===== */
.catalog-layout { padding: 60px 0; }
.catalog-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 16px; }
.catalog-count { font-size: 13px; color: var(--text-muted); }
.catalog-count strong { color: var(--ink-navy); }
.catalog-sort select { padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--ink-navy); background: var(--white); cursor: pointer; }
.catalog-grid-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: flex-start; }
.filter-panel { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 24px; position: sticky; top: 100px; }
.filter-group { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.filter-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.filter-group h4 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--brass-gold); font-weight: 700; margin-bottom: 14px; }
.filter-option { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--ink-navy); cursor: pointer; }
.filter-option input { accent-color: var(--clinical-teal); }
.filter-option .count { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.price-range { display: flex; gap: 8px; align-items: center; }
.price-range input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 13px; width: 100%; }
.price-range span { color: var(--text-muted); }
.filter-apply { width: 100%; margin-top: 10px; }
.filter-clear { font-size: 12px; color: var(--clinical-teal); cursor: pointer; margin-top: 4px; text-decoration: underline; display: inline-block; }
.catalog-grid-layout .products-grid { grid-template-columns: repeat(3, 1fr); }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.pagination a, .pagination span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--ink-navy); }
.pagination .current { background: var(--ink-navy); color: var(--white); border-color: var(--ink-navy); }
.pagination a:hover { border-color: var(--clinical-teal); color: var(--clinical-teal); }
.filter-toggle-btn { display: none; }
.catalog-no-results { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.catalog-no-results p:first-child { font-size: 16px; color: var(--ink-navy); font-weight: 700; margin-bottom: 8px; }
.catalog-no-results a { color: var(--clinical-teal); }
@media (max-width: 1024px) {
  .catalog-grid-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .catalog-grid-layout .products-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-toggle-btn { display: block; padding: 10px 16px; background: var(--ink-navy); color: var(--white); border-radius: 6px; font-size: 13px; font-weight: 600; }
  .filter-panel { display: none; }
  .filter-panel.open { display: block; }
}
@media (max-width: 767px) {
  .catalog-layout { padding: 40px 0; }
  .catalog-grid-layout .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Generic fallback for any WooCommerce-generated button/link we haven't restyled explicitly */
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 4px; background: var(--brass-gold); color: var(--ink-navy); border: 2px solid transparent; transition: all 0.2s;
}
.woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover { background: var(--ink-navy); color: var(--white); }
.woocommerce .required { color: #c0392b; text-decoration: none; }

/* ===== CART ===== */
.cart-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 16px; }
.cart-row { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 16px; align-items: center; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; }
.cart-row .thumb { display: block; width: 64px; height: 64px; border-radius: 8px; background: linear-gradient(135deg, var(--brass-gold-soft), var(--brass-gold)); }
.cart-row .name { font-weight: 700; color: var(--ink-navy); font-size: 14px; display: block; }
.cart-row .size { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cart-qty { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; }
.cart-qty button { width: 30px; height: 30px; font-size: 15px; color: var(--ink-navy); }
.cart-qty input.mp-qty-input { width: 40px; text-align: center; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-navy); -moz-appearance: textfield; }
.cart-qty input.mp-qty-input::-webkit-outer-spin-button, .cart-qty input.mp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-price { font-weight: 700; color: var(--ink-navy); font-size: 14px; min-width: 70px; text-align: right; }
.cart-remove { color: var(--text-muted); font-size: 12px; text-decoration: underline; display: inline-block; margin-top: 4px; }
.cart-remove:hover { color: #c0392b; }
.cart-empty { text-align: center; padding: 80px 20px; color: var(--text-muted); }
.cart-empty svg { margin: 0 auto 20px; opacity: 0.3; }
.cart-summary { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 28px; position: sticky; top: 100px; }
.cart-summary h3 { font-size: 16px; font-weight: 800; color: var(--ink-navy); margin-bottom: 20px; }
.cart-summary-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-muted); padding: 8px 0; }
.cart-summary-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px; font-weight: 800; color: var(--ink-navy); font-size: 18px; }
.cart-summary .btn { display: flex; }
@media (max-width: 1024px) { .cart-layout { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .cart-row { grid-template-columns: 48px 1fr; grid-template-areas: "thumb name" "thumb qty" "thumb price"; } .cart-row .thumb { grid-area: thumb; } }

/* ===== CHECKOUT ===== */
/* Three grid items: the coupon form (a true DOM sibling of <form name="checkout"> — see
   form-checkout.php for why), plus checkout-form-card and cart-summary, which reach this
   grid as direct items via display:contents on the checkout <form> itself. */
/* checkout-form-card spans both rows (it's much taller than coupon-card + cart-summary
   combined) so its height doesn't force row 1 to stretch to fit it — an `auto` row 1
   would size to the TALLEST item placed in it, and since formCard shares row 1 with the
   short coupon-card, an unspanned formCard would balloon row 1 to ~1500px and shove
   cart-summary (row 2) far down below coupon-card. Spanning both rows plus routing the
   spanning item's extra required height into row 2 via `1fr` (rather than letting Grid's
   default equal-split-across-spanned-rows behavior inflate row 1 too) keeps row 1 close
   to coupon-card's own natural height, so coupon-card and cart-summary sit close together
   the way two independently-sized sidebar cards should, while any leftover height from
   the taller left column just becomes trailing whitespace below cart-summary instead. */
.checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto 1fr; gap: 24px 40px; align-items: start; }
/* min-width:0 overrides the grid item default of min-width:auto — without it, some wide
   descendant (e.g. the long "District of Columbia"-length state <select>) sets a min-content
   floor on the column track that's wider than the viewport, blowing out the whole grid on
   mobile instead of letting the column actually shrink to fit. */
.checkout-form-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 32px; grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.coupon-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; grid-column: 2; grid-row: 1; min-width: 0; }
.checkout-layout .cart-summary { grid-column: 2; grid-row: 2; min-width: 0; }
.checkout-form-card h3 { margin: 24px 0 14px; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; font-weight: 800; color: var(--brass-gold); }
.checkout-form-card h3:first-child { margin-top: 0; }
.checkout-form-card .woocommerce-billing-fields__field-wrapper,
.checkout-form-card .woocommerce-billing-fields { display: block; }
.checkout-form-card .form-row { margin-bottom: 14px; }
.checkout-form-card .form-row label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.checkout-form-card .form-row label .required { color: #c0392b; text-decoration: none; }
.checkout-form-card .form-row input,
.checkout-form-card .form-row select,
.checkout-form-card .form-row textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--off-white); }
.checkout-form-card .form-row input:focus,
.checkout-form-card .form-row select:focus,
.checkout-form-card .form-row textarea:focus { outline: none; border-color: var(--clinical-teal); background: var(--white); }
.checkout-form-card .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.checkout-form-card .form-row-wide { grid-column: 1 / -1; }
.checkout-form-card .woocommerce-account-fields { margin-top: 6px; }
.checkout-form-card .create-account { background: var(--off-white); border-radius: 8px; padding: 16px; margin: 6px 0 14px; }
.checkout-form-card .create-account label.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text); cursor: pointer; }
.checkout-form-card .create-account input[type="checkbox"] { margin-top: 3px; width: auto; }
.payment-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.payment-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.payment-option.active { border-color: var(--clinical-teal); background: var(--clinical-teal-light); }
.payment-option.is-disabled { cursor: not-allowed; opacity: 0.55; }
.payment-option input { width: auto; margin-top: 3px; }
.payment-option .pname { font-weight: 600; font-size: 14px; color: var(--ink-navy); }
.payment-option .pnote { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.eligibility-check-wrap .woocommerce-terms-and-conditions-wrapper .form-row { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; padding: 16px; background: var(--brass-gold-light); border-radius: 8px; font-size: 13px; line-height: 1.6; }
.eligibility-check-wrap label.checkbox { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.eligibility-check-wrap input[type="checkbox"] { margin-top: 3px; width: auto; }
.eligibility-check-wrap .woocommerce-terms-and-conditions-checkbox-text a { color: var(--clinical-teal); text-decoration: underline; }
#place_order { display: block; }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.woocommerce-checkout-review-order-table th { text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.woocommerce-checkout-review-order-table td { padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
.woocommerce-checkout-review-order-table td.product-total { text-align: right; font-weight: 700; color: var(--ink-navy); white-space: nowrap; }
.woocommerce-checkout-review-order-table .cart-subtotal td, .woocommerce-checkout-review-order-table .order-total td { text-align: right; font-weight: 700; }
.woocommerce-checkout-review-order-table tfoot th { text-align: left; font-size: 13px; color: var(--text-muted); padding: 8px 0; }
.woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { border-top: 1px solid var(--border); font-size: 18px; color: var(--ink-navy); padding-top: 16px; }
.woocommerce-shipping-totals select { padding: 8px; border: 1px solid var(--border); border-radius: 6px; }
.checkout-form-card .woocommerce-billing-fields > h3:first-child { display: none; }

/* Coupon — moved out of the disconnected notice-above-everything spot WooCommerce
   defaults to, into its own small card that sits directly above Order Summary (see
   form-checkout.php for why it has to stay a DOM sibling of <form name="checkout"> rather
   than a child of .cart-summary — it's a separate <form> and can't nest inside another).
   The toggle notice already inherits the site's .woocommerce-info styling; this covers
   the revealed input+button row, which WooCommerce ships with no real styling at all. */
.coupon-card .woocommerce-form-coupon-toggle { margin: 0; }
.coupon-card .woocommerce-info { margin-bottom: 0; }
.coupon-card .checkout_coupon.woocommerce-form-coupon {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
}
.coupon-card .checkout_coupon .form-row { margin: 0; flex: 1 1 140px; }
.coupon-card .checkout_coupon .form-row-last { flex: 0 0 auto; }
.coupon-card .checkout_coupon input.input-text {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 14px; color: var(--text); background: var(--off-white);
}
.coupon-card .checkout_coupon input.input-text:focus { outline: none; border-color: var(--clinical-teal); background: var(--white); }
.coupon-card .checkout_coupon button.button {
  padding: 12px 20px; background: var(--ink-navy); color: var(--white); border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  white-space: nowrap; transition: background 0.2s;
}
.coupon-card .checkout_coupon button.button:hover { background: var(--clinical-teal); }
.coupon-card .checkout_coupon .clear { display: none; }

/* Checkout cross-sell row ("Add To Your Order") — ported 1:1 from the approved design's
   recommend.js addon-card styling, now server-rendered from real cart/category data. */
.cart-addons { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.cart-addons-title { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--brass-gold); margin-bottom: 12px; }
.mp-cart-addon-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: stretch; }
.mp-cart-addon-card { flex: 0 0 130px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 12px; text-align: center; display: flex; flex-direction: column; }
.mp-cart-addon-card img { max-width: 50%; margin: 0 auto 8px; }
.mp-cart-addon-card .n { font-size: 12px; font-weight: 700; color: var(--ink-navy); margin-bottom: 2px; line-height: 1.25; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.mp-cart-addon-card .p { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.mp-cart-addon-card .addon-add-btn { width: 100%; padding: 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid var(--ink-navy); border-radius: 5px; background: var(--white); color: var(--ink-navy); margin-top: auto; }
.mp-cart-addon-card .addon-add-btn:hover { background: var(--ink-navy); color: var(--white); }
.mp-cart-addon-card .addon-add-btn:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 480px) {
  .coupon-card .checkout_coupon.woocommerce-form-coupon { flex-direction: column; }
  /* .form-row's flex-basis:140px (a WIDTH hint for the desktop row layout) becomes a
     HEIGHT hint once flex-direction switches to column here — that's what was forcing
     the input's wrapper to a fixed 140px tall box, leaving a big empty gap above the
     Apply Coupon button. Reset both rows to their natural auto height in column mode. */
  .coupon-card .checkout_coupon .form-row { flex: 0 0 auto; }
  .coupon-card .checkout_coupon button.button { width: 100%; }
}

@media (max-width: 1050px) {
  /* 1050px rather than the site's usual 1024px breakpoint — iPad Pro 13" in portrait is
     1032px wide, which fell just above 1024 and was rendering the desktop 2-column
     layout instead of this stacked, reordered one. Single column now — fall back to
     source order via `order` instead of the explicit desktop grid-column/grid-row
     placement. Order Summary + suggested add-ons come first so shoppers can review what
     they're buying before filling in shipping details, then the coupon field, then the
     shipping/payment form. */
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-layout .cart-summary { grid-column: auto; grid-row: auto; order: 1; }
  .coupon-card { grid-column: auto; grid-row: auto; order: 2; }
  .checkout-form-card { grid-column: auto; grid-row: auto; order: 3; }
  .checkout-form-card .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* Order details + customer address (thank-you page, view-order, order emails-on-screen) */
.woocommerce-order-details, .woocommerce-customer-details { max-width: 700px; margin: 40px auto 0; text-align: left; }
.woocommerce-order-details__title, .woocommerce-column__title { font-size: 16px; font-weight: 800; color: var(--ink-navy); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.woocommerce-table--order-details { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.woocommerce-table--order-details th { text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); padding: 0 0 10px; border-bottom: 1px solid var(--border); }
.woocommerce-table--order-details td { padding: 12px 0; font-size: 14px; border-bottom: 1px solid var(--border); }
.woocommerce-table--order-details tfoot th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 13px; }
.woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td { font-size: 17px; font-weight: 800; color: var(--ink-navy); padding-top: 16px; }
.woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.woocommerce-customer-details address { font-style: normal; font-size: 14px; color: var(--text); line-height: 1.7; background: var(--off-white); border-radius: 8px; padding: 20px; }
@media (max-width: 767px) { .woocommerce-columns--addresses { grid-template-columns: 1fr; } }

#order-confirmation { text-align: center; padding: 60px 20px; }
#order-confirmation .check-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--clinical-teal); color: var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
#order-confirmation h2 { font-size: 24px; color: var(--ink-navy); margin-bottom: 10px; }
#order-confirmation p { color: var(--text-muted); font-size: 14px; }
#order-confirmation .order-num { font-family: 'SF Mono', monospace; font-weight: 700; color: var(--brass-gold); font-size: 16px; margin: 12px 0; }

/* ===== ACCOUNT (login / register / dashboard) ===== */
.account-tabs { display: flex; justify-content: center; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 auto 32px; max-width: 460px; }
.account-tab { padding: 14px 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; }
.account-tab.active { color: var(--ink-navy); border-bottom-color: var(--brass-gold); }
.account-panel { display: none; max-width: 460px; margin: 0 auto; }
.account-panel.active { display: block; }
.account-note { background: var(--clinical-teal-light); border-left: 3px solid var(--clinical-teal); padding: 14px 18px; border-radius: 0 6px 6px 0; font-size: 13px; color: var(--text); max-width: 460px; margin: 0 auto 24px; line-height: 1.6; }
.oauth-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.btn-oauth { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 20px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; transition: all 0.15s; }
.btn-oauth:hover { border-color: var(--ink-navy); box-shadow: var(--shadow-sm); }
.oauth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.account-panel .form-field { margin-bottom: 14px; }
.account-panel .form-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.account-panel .form-field input, .account-panel .form-field select { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--off-white); }
.account-panel .form-field input:focus, .account-panel .form-field select:focus { outline: none; border-color: var(--clinical-teal); background: var(--white); }
.account-panel .select-wrap select { appearance: none; -webkit-appearance: none; }
.account-panel .form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.account-panel .mp-form-section-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--brass-gold); margin-bottom: 14px; font-weight: 700; }
.account-panel .eligibility-check { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0; padding: 16px; background: var(--brass-gold-light); border-radius: 8px; font-size: 13px; line-height: 1.6; }
.account-panel .eligibility-check input { margin-top: 3px; width: auto; }
.account-panel .required { color: #c0392b; text-decoration: none; }
.account-panel .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; }
.account-panel .woocommerce-form-login__rememberme input { width: auto; }
.account-panel .woocommerce-LostPassword { text-align: center; margin-top: 14px; font-size: 13px; }
.account-panel .woocommerce-LostPassword a { color: var(--clinical-teal); }
.account-panel .woocommerce-privacy-policy-text { margin-bottom: 16px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.account-panel .mp-form-note { margin: 4px 0 20px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 767px) { .account-panel .form-row-2col { grid-template-columns: 1fr; } }

/* My Account dashboard (logged-in) */
.woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--ink-navy); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--ink-navy); color: var(--white); }
.woocommerce-MyAccount-navigation li a:hover { background: var(--off-white); }
.woocommerce-MyAccount-content { max-width: 760px; }
/* Logged-out login/register view isn't inside .u-columns (no sidebar) — center it on the page. */
.container > .woocommerce-MyAccount-content { margin: 0 auto; }
.woocommerce-account .u-columns { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
@media (max-width: 767px) { .woocommerce-account .u-columns { grid-template-columns: 1fr; } }

/* Dashboard (My Account — Profile / Order History / Saved Addresses) */
.dash-sidebar { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 10px; position: sticky; top: 100px; }
.dash-sidebar ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.dash-nav-item { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.dash-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.dash-nav-item:hover { background: var(--off-white); color: var(--ink-navy); }
.dash-nav-item.active { background: var(--clinical-teal-light); color: var(--clinical-teal-dark); }
.dash-nav-item.signout { color: #c0392b; margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0; padding-top: 16px; }
.dash-nav-item.signout:hover { background: rgba(192,57,43,0.06); }
.dash-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 32px; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.dash-card-head h2 { font-size: 20px; font-weight: 800; color: var(--ink-navy); }
.dash-card-head p { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.profile-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--brass-gold); margin-bottom: 6px; }
.profile-field .val { font-size: 15px; color: var(--ink-navy); font-weight: 600; padding: 12px 14px; background: var(--off-white); border-radius: 6px; border: 1px solid var(--border); }
.orders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.orders-table th { text-align: left; padding: 12px 14px; background: var(--off-white); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--brass-gold); border-bottom: 2px solid var(--border); }
.orders-table td { padding: 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.orders-table tr:last-child td { border-bottom: none; }
.order-status { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
.order-status.delivered { background: var(--clinical-teal-light); color: var(--clinical-teal-dark); }
.order-status.shipped { background: var(--brass-gold-light); color: #8a6d1f; }
.order-status.processing { background: #eef1f4; color: var(--text-muted); }
.order-status.cancelled { background: #fdecea; color: #7a2c22; }
.order-link { font-size: 12px; font-weight: 700; color: var(--clinical-teal); text-transform: uppercase; letter-spacing: 0.4px; }
.address-card { border: 1px solid var(--border); border-radius: 10px; padding: 20px; max-width: 420px; margin-bottom: 20px; }
.address-card:last-child { margin-bottom: 0; }
.address-card .addr-tag { display: inline-block; background: var(--clinical-teal-light); color: var(--clinical-teal-dark); font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 3px; margin-bottom: 12px; }
.address-card .addr-lines { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.address-card .addr-actions { display: flex; gap: 16px; }
.address-card .addr-actions a { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--clinical-teal); }
@media (max-width: 1024px) {
  .dash-sidebar { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
  .dash-sidebar ul { flex-direction: row; }
  .dash-nav-item.signout { margin-top: 0; border-top: none; padding-top: 13px; }
}
@media (max-width: 767px) {
  .profile-grid { grid-template-columns: 1fr; }
  .orders-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Orders table */
.woocommerce-orders-table { width: 100%; border-collapse: collapse; }
.woocommerce-orders-table th { text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); padding: 0 0 10px; border-bottom: 1px solid var(--border); }
.woocommerce-orders-table td { padding: 14px 10px 14px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.woocommerce-orders-table .button { display: inline-block; padding: 6px 14px; border: 1px solid var(--ink-navy); border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-navy); margin: 2px 4px 2px 0; }
.woocommerce-orders-table .button:hover { background: var(--ink-navy); color: var(--white); }
mark.order-status { background: var(--clinical-teal-light); color: var(--clinical-teal-dark); padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.woocommerce-Message, .woocommerce-info { background: var(--off-white); border-left: 3px solid var(--clinical-teal); padding: 14px 18px; border-radius: 0 6px 6px 0; font-size: 13px; margin-bottom: 20px; list-style: none; }
.woocommerce-Message a, .woocommerce-info a { color: var(--clinical-teal); font-weight: 600; }
.woocommerce-error { background: #fdecea; border-left: 3px solid #c0392b; padding: 14px 18px; border-radius: 0 6px 6px 0; font-size: 13px; margin-bottom: 20px; list-style: none; color: #7a2c22; }

/* Checkout "Returning customer? Click here to login" toggle — uses WooCommerce's default
   global/form-login.php template (no theme override), so it needs its own styling here. */
.woocommerce-form-login.login { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.woocommerce-form-login.login > p:first-child { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.woocommerce-form-login .form-row { margin-bottom: 14px; }
.woocommerce-form-login label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.woocommerce-form-login input.input-text { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--off-white); }
.woocommerce-form-login input.input-text:focus { outline: none; border-color: var(--clinical-teal); background: var(--white); }
.woocommerce-form-login .password-input { display: block; position: relative; }
.woocommerce-form-login .show-password-input { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; }
.woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 14px; }
.woocommerce-form-login__rememberme input { width: auto; }
.woocommerce-form-login__submit { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 4px; background: var(--brass-gold); color: var(--ink-navy); border: none; cursor: pointer; transition: all 0.2s; }
.woocommerce-form-login__submit:hover { background: var(--ink-navy); color: var(--white); }
.woocommerce-form-login .lost_password { margin-top: 14px; font-size: 13px; }
.woocommerce-form-login .lost_password a { color: var(--clinical-teal); }

/* Addresses */
.woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.woocommerce-Address { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 24px; }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.woocommerce-Address-title h3 { font-size: 14px; font-weight: 800; color: var(--ink-navy); text-transform: uppercase; letter-spacing: 0.5px; }
.woocommerce-Address-title a { font-size: 12px; color: var(--clinical-teal); }
.woocommerce-Address address { font-style: normal; font-size: 14px; color: var(--text); line-height: 1.7; }
@media (max-width: 767px) { .woocommerce-Addresses { grid-template-columns: 1fr; } }

/* Lost/reset password is a standalone logged-out page (no sidebar) — center it, unlike
   the account details/address forms which sit in the logged-in dashboard next to the nav. */
.woocommerce-ResetPassword { max-width: 440px; margin: 0 auto; }

/* Account details form + edit-address form + lost/reset password forms */
.woocommerce-EditAccountForm .form-row, .woocommerce-address-fields .form-row,
.woocommerce-ResetPassword .form-row { margin-bottom: 14px; max-width: 440px; }
.woocommerce-EditAccountForm label, .woocommerce-address-fields label,
.woocommerce-ResetPassword label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.woocommerce-EditAccountForm input, .woocommerce-EditAccountForm select,
.woocommerce-address-fields input, .woocommerce-address-fields select,
.woocommerce-ResetPassword input { width: 100%; max-width: 440px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 14px; background: var(--off-white); }
.woocommerce-EditAccountForm fieldset { border: none; margin: 24px 0 0; padding: 0; }
.woocommerce-EditAccountForm legend { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--brass-gold); font-weight: 700; margin-bottom: 10px; }
.woocommerce-EditAccountForm button, .woocommerce-address-fields button,
.woocommerce-ResetPassword button { margin-top: 8px; }

/* ===== SINGLE PRODUCT ===== */
.pd-hero { background: linear-gradient(135deg, var(--ink-navy) 0%, #1a2c42 100%); position: relative; overflow: hidden; padding: 28px 0; min-height: 96px; display: flex; align-items: center; }
.pd-hero .container { position: relative; z-index: 2; }
.pd-hero .breadcrumb-mini { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 0; }
.pd-hero .breadcrumb-mini a { color: rgba(255,255,255,0.75); }
.pd-hero .breadcrumb-mini a:hover { color: var(--brass-gold); }
.pd-hero .breadcrumb-mini span { color: var(--white); }
@media (max-width: 767px) { .pd-hero { padding: 20px 0; min-height: 72px; } }

.product-detail { padding: 40px 0 80px; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px; }
.pd-grid > * { min-width: 0; }
.pd-images { position: sticky; top: 100px; align-self: start; }
.pd-image-main { aspect-ratio: 1; background: linear-gradient(180deg, var(--white), var(--off-white)); border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.pd-image-main img { max-width: 80%; max-height: 80%; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 8px 16px rgba(20,33,49,0.15)); }
.pd-image-main .ruo-lg { position: absolute; top: 20px; right: 20px; z-index: 3; background: var(--clinical-teal); color: var(--white); font-size: 10px; font-weight: 800; padding: 6px 12px; letter-spacing: 2px; border-radius: 4px; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.pd-thumb { aspect-ratio: 1; background: var(--off-white); border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s; overflow: hidden; }
.pd-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-thumb.active { border-color: var(--clinical-teal); border-width: 2px; }
.pd-info h1 { font-size: 40px; font-weight: 800; color: var(--ink-navy); letter-spacing: -1px; margin-bottom: 8px; line-height: 1.1; }
.pd-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.pd-meta span strong { color: var(--ink-navy); font-family: 'SF Mono', monospace; }
.pd-lead { font-size: 15px; color: var(--text); line-height: 1.7; margin-bottom: 28px; }
.pd-specs-table { background: var(--off-white); border-radius: 8px; padding: 20px 24px; margin-bottom: 28px; }
.pd-specs-table .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pd-specs-table .row:last-child { border-bottom: none; }
.pd-specs-table .row .label { color: var(--text-muted); }
.pd-specs-table .row .value { color: var(--ink-navy); font-weight: 600; font-family: 'SF Mono', monospace; text-align: right; }
.pd-purchase { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 28px; box-shadow: var(--shadow-sm); }
.pd-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.pd-price { font-size: 42px; font-weight: 800; color: var(--ink-navy); letter-spacing: -1.5px; }
.pd-qty-label, .pd-select-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 10px; }
.pd-size-selector { display: flex; gap: 8px; margin-bottom: 20px; }
.pd-size-option { flex: 1; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; text-align: center; cursor: pointer; transition: all 0.2s; }
.pd-size-option:hover { border-color: var(--clinical-teal-soft); }
.pd-size-option.active { border-color: var(--clinical-teal); background: var(--clinical-teal-light); border-width: 2px; }
.pd-size-option .size { font-size: 15px; font-weight: 700; color: var(--ink-navy); }
.pd-size-option .price-small { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pd-qty-row { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.pd-qty { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; }
.pd-qty button { width: 42px; height: 42px; font-size: 18px; color: var(--ink-navy); }
.pd-qty input { width: 60px; text-align: center; border: none; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink-navy); }
.pd-add-cart { flex: 1; }
.pd-actions-row { display: flex; gap: 10px; }
.pd-actions-row .btn { flex: 1; }
.pd-trust-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.pd-trust-mini > div { font-size: 11px; text-align: center; color: var(--text-muted); }
.pd-trust-mini strong { display: block; color: var(--ink-navy); font-size: 12px; margin-bottom: 2px; }
.pd-tabs { border-top: 1px solid var(--border); padding-top: 40px; }
.pd-tab-headers { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 32px; overflow-x: auto; }
.pd-tab-header { padding: 14px 24px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; margin-bottom: -1px; flex-shrink: 0; }
.pd-tab-header.active { color: var(--ink-navy); border-bottom-color: var(--brass-gold); }
.pd-tab-content { display: none; max-width: 800px; }
.pd-tab-content.active { display: block; }
.pd-tab-content h3 { font-size: 20px; font-weight: 700; color: var(--ink-navy); margin: 20px 0 10px; }
.pd-tab-content h3:first-child { margin-top: 0; }
.pd-tab-content p, .pd-tab-content li { font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 10px; }
.pd-tab-content ul { padding-left: 24px; margin-bottom: 16px; }
.pd-tab-content table { display: block; max-width: 100%; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.pd-tab-content table th { text-align: left; background: var(--off-white); padding: 10px 14px; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--brass-gold); border-bottom: 2px solid var(--border); }
.pd-tab-content table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.pd-tab-content table a { color: var(--clinical-teal); }
.pd-coa-card { background: var(--off-white); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.pd-coa-card .info h4 { font-size: 14px; color: var(--ink-navy); margin-bottom: 4px; }
.pd-coa-card .info p { font-size: 12px; color: var(--text-muted); margin: 0; }
@media (max-width: 1024px) {
  .pd-grid { grid-template-columns: 1fr; gap: 40px; }
  .pd-images { position: static; }
  .pd-info h1 { font-size: clamp(28px, 5vw, 36px); }
}
@media (max-width: 767px) {
  .product-detail { padding: 30px 0 50px; }
  .pd-info h1 { font-size: clamp(24px, 7vw, 32px); }
  .pd-price { font-size: 32px; }
  .pd-purchase { padding: 20px; }
  .pd-actions-row { flex-direction: column; }
  .pd-trust-mini { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  /* The qty stepper + "Add to Cart →" button don't both fit on one row at phone widths —
     the button's own min-content width pushed it past the viewport edge. Stack instead. */
  .pd-qty-row { flex-wrap: wrap; }
  .pd-add-cart { flex-basis: 100%; }
}