/* ================================================================
   PP-Lovable WooCommerce design (cart / checkout / shop / product)
   ----------------------------------------------------------------
   Extends the site-wide gold/orange system with the white-card +
   rounded-form treatment on the WooCommerce surfaces. Loaded ONLY
   on Woo pages (see sl_pp_woo_styles()).

   SAFE / INSTANT REVERT: remove the sl_pp_woo_styles enqueue line.
   Pure CSS — no functionality, no checkout logic touched.

   CONTRAST RULES (explicit, to avoid white-on-white / white-on-bright):
     - All form fields (input, textarea, select, .qty, Select2 box):
         white/near-white background + DARK text (#1a1a1a).
     - Select2 highlighted option: LIGHT warm background + DARK text.
     - Buttons stay gold + dark ink (from the site-wide sheet).
   ================================================================ */

:root {
  --ppw-gold:        oklch(0.72 0.16 70);
  --ppw-ink:         oklch(0.18 0.02 250);
  --ppw-warm:        #e07b30;
  --ppw-card:        #ffffff;
  --ppw-bg:          #f7f8fb;
  --ppw-text:        #1a1a1a;
  --ppw-muted:       #5a5a5a;
  --ppw-border:      rgba(20, 24, 40, 0.10);
  --ppw-radius:      16px;
  --ppw-radius-sm:   10px;
  --ppw-shadow:      0 2px 24px rgba(0, 0, 0, 0.07);
  --ppw-focus:       0 0 0 3px oklch(0.78 0.16 70 / 0.18);
}

/* ================================================================
   1. Tables (cart contents + cart totals + order review) -> white cards
   ================================================================ */
.woocommerce table.shop_table {
  background: var(--ppw-card);
  border: 1px solid var(--ppw-border) !important;
  border-radius: var(--ppw-radius) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  box-shadow: var(--ppw-shadow);
  margin-bottom: 26px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-cart .cart-col {
  border-color: var(--ppw-border) !important;  /* was #222 — soften */
  color: var(--ppw-text);
}
.woocommerce table.shop_table thead th,
.woocommerce table.shop_table tfoot th {
  background: var(--ppw-bg);
  color: var(--ppw-text);
  font-weight: 700;
}
.woocommerce table.shop_table td { padding: 16px 14px; }

/* ================================================================
   2. Cart totals + checkout panels -> cards
   ================================================================ */
/* OceanWP multistep checkout containers (the real ones on this site):
   .checkout_billing / .checkout_shipping / #order_info / #order_checkout_payment.
   The default-checkout selectors are kept too (harmless if absent). */
.woocommerce .cart_totals,
.woocommerce-checkout .checkout_billing,
.woocommerce-checkout .checkout_shipping,
.woocommerce-checkout #order_info,
.woocommerce-checkout #order_checkout_payment,
.woocommerce form.checkout #customer_details .col-1,
.woocommerce form.checkout #customer_details .col-2 {
  background: var(--ppw-card);
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius);
  box-shadow: var(--ppw-shadow);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.woocommerce .cart_totals h2,
.woocommerce #order_review_heading,
.woocommerce-checkout #order_info h3,
.woocommerce-checkout .checkout_billing h3,
.woocommerce-checkout .checkout_shipping h3 {
  margin-top: 0;
  color: var(--ppw-text);
}
/* Tables that sit INSIDE the cards — flatten so we don't nest a card in a card */
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout #order_review table.shop_table,
.woocommerce-checkout #order_info table.shop_table {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0;
}
/* #order_review is just a wrapper around the two cards above — keep it plain */
.woocommerce-checkout #order_review {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* #payment lives INSIDE the payment card — keep it transparent (no nested box) */
.woocommerce-checkout #payment {
  background: transparent !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  background: var(--ppw-bg);
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius-sm);
  padding: 14px 16px;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--ppw-bg) !important;
  color: var(--ppw-text);
  border-radius: var(--ppw-radius-sm);
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--ppw-bg) !important;
}

/* ================================================================
   3. Form fields — DARK text on light bg (no white-on-white)
   ================================================================ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form input[type="number"],
.woocommerce form input[type="search"],
.woocommerce form textarea,
.woocommerce form select,
.woocommerce .quantity input.qty,
.woocommerce #coupon_code {
  background-color: var(--ppw-card) !important;
  color: var(--ppw-text) !important;            /* readable dark text */
  border: 1px solid var(--ppw-border) !important;
  border-radius: var(--ppw-radius-sm) !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
}
.woocommerce .quantity input.qty {
  padding: 10px 8px !important;
  text-align: center;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus,
.woocommerce #coupon_code:focus {
  border-color: var(--ppw-gold) !important;
  box-shadow: var(--ppw-focus) !important;
  outline: none;
}
/* Placeholder + labels readable */
.woocommerce form .form-row label { color: var(--ppw-text); }
.woocommerce form ::placeholder { color: var(--ppw-muted); opacity: 1; }
/* Native select: force dark option text (some browsers inherit) */
.woocommerce form select option { color: var(--ppw-text); background: var(--ppw-card); }

/* ================================================================
   4. Select2 (country / state dropdowns) — the contrast-critical bit
      Select2's dropdown is appended to <body>, so these are global
      (this file only loads on Woo pages, so scope stays contained).
   ================================================================ */
.select2-container--default .select2-selection--single {
  background-color: var(--ppw-card) !important;
  border: 1px solid var(--ppw-border) !important;
  border-radius: var(--ppw-radius-sm) !important;
  height: 46px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ppw-text) !important;             /* DARK selected text on white box */
  line-height: 46px !important;
  padding-left: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ppw-muted) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px !important;
}
.select2-dropdown {
  background-color: var(--ppw-card) !important;
  border-color: var(--ppw-border) !important;
  color: var(--ppw-text) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--ppw-card) !important;
  color: var(--ppw-text) !important;
  border: 1px solid var(--ppw-border) !important;
  border-radius: 8px !important;
}
.select2-container--default .select2-results__option {
  color: var(--ppw-text) !important;             /* dark option text */
  background-color: var(--ppw-card) !important;
}
/* Hovered/keyboard-highlighted option: LIGHT warm bg + DARK text (readable) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: #fff3ec !important;
  color: var(--ppw-ink) !important;
}
/* Currently selected option */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--ppw-bg) !important;
  color: var(--ppw-text) !important;
}

/* ================================================================
   5. Coupon row + small touches
   ================================================================ */
.woocommerce .cart .actions .coupon { gap: 8px; }
.woocommerce-cart .wc-proceed-to-checkout { padding-top: 4px; }
.woocommerce a.remove {
  color: var(--ppw-warm) !important;
  border-color: var(--ppw-warm) !important;
}
.woocommerce a.remove:hover {
  background: #c96820 !important;   /* darker warm so white "×" keeps contrast */
  color: #fff !important;
}

/* ================================================================
   6. Checkout hero — title + word of encouragement (sl_pp_checkout_hero)
   ================================================================ */
.pp-checkout-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  padding: 22px 26px;
  border-radius: var(--ppw-radius);
  background: linear-gradient(135deg, #fff7ef 0%, #ffffff 72%);
  border: 1px solid #f0d4b0;
  box-shadow: var(--ppw-shadow);
}
.pp-checkout-hero__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ppw-gold);
  color: var(--ppw-ink);   /* dark icon on gold — readable */
}
.pp-checkout-hero__title {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--ppw-text);
}
.pp-checkout-hero__sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ppw-muted);
}
.pp-checkout-hero__sub strong { color: #c96820; }  /* warm emphasis, readable on light */

@media (max-width: 600px) {
  .pp-checkout-hero {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 20px 18px;
  }
}

/* ================================================================
   7. WooCommerce CHECKOUT BLOCK (this site's checkout is the block,
      not the classic form). Was rendering step titles WHITE on white.
      Force dark, readable text everywhere + card the layout.
   ================================================================ */

/* --- ASAP fix: dark base text + dark headings (no white-on-white).
       Base color set on the container so children inherit; WooCommerce's
       own error-red / link colors still win where they're explicitly set. --- */
.wp-block-woocommerce-checkout,
.wc-block-checkout,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__description,
.wc-block-components-title,
.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__description,
.wc-block-components-product-name,
.wc-block-checkout__main p,
.wc-block-checkout__sidebar p {
  color: var(--ppw-text) !important;
}
.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-weight: 800 !important;
}
/* Muted helper/optional text stays a readable grey (not white) */
.wc-block-components-checkout-step__description,
.wc-block-components-text-input label,
.wc-block-components-address-card__address,
.wc-block-components-formatted-money-amount {
  color: var(--ppw-muted) !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--ppw-text) !important;
}

/* --- Inputs / selects / comboboxes: white bg + DARK text --- */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-select select,
.wc-block-components-combobox input,
.wc-block-components-address-form input,
.wc-block-components-textarea {
  background-color: var(--ppw-card) !important;
  color: var(--ppw-text) !important;            /* readable — no white-on-white */
  border: 1px solid var(--ppw-border) !important;
  border-radius: var(--ppw-radius-sm) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-select select:focus {
  border-color: var(--ppw-gold) !important;
  box-shadow: var(--ppw-focus) !important;
  outline: none;
}
/* Combobox dropdown list (country/state) — dark options on white */
.wc-block-components-combobox-list {
  background-color: var(--ppw-card) !important;
  border-color: var(--ppw-border) !important;
}
.wc-block-components-combobox-list-option {
  color: var(--ppw-text) !important;
  background-color: var(--ppw-card) !important;
}
.wc-block-components-combobox-list-option.is-highlighted,
.wc-block-components-combobox-list-option--is-highlighted,
.wc-block-components-combobox-list-option[aria-selected="true"] {
  background-color: #fff3ec !important;
  color: var(--ppw-ink) !important;
}

/* --- Full-width checkout + page title ---
   WooCommerce constrains the block to max-width:calc(90% + 32px) and
   auto-centres it, so it sits NARROWER than (and offset from) the rest of
   the page content (the "You're almost done" hero). Span the full content
   width so the form/recap start and end exactly where the hero does. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout.alignwide {
  max-width: none !important;
  width: 100% !important;        /* .alignwide pins a wide-size width; override it */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;     /* kill the 24px gap below the hero (tight spacing) */
}
.pp-checkout-page-title {
  margin: 0 0 18px !important;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ppw-text);
}
@media (max-width: 600px) {
  .pp-checkout-page-title { font-size: 26px; }
}
/* Trim OceanWP's 50px content top-padding on checkout so the title sits
   close under the breadcrumb (user dislikes big gaps between blocks). */
body.woocommerce-checkout #content-wrap.container {
  padding-top: 12px !important;
}

/* --- Select fields (Country/Region, State): make room for the floating
   label so it no longer overlaps the selected value. Mirror the text
   inputs (padding-top:16px, height:50px) which already float correctly. --- */
.wc-blocks-components-select__select {
  box-sizing: border-box !important;
  height: 50px !important;
  padding: 16px 32px 0 14px !important;  /* top room for label, right room for arrow */
  background-color: var(--ppw-card) !important;
  color: var(--ppw-text) !important;
  border: 1px solid var(--ppw-border) !important;
  border-radius: var(--ppw-radius-sm) !important;
}
.wc-blocks-components-select__select:focus {
  border-color: var(--ppw-gold) !important;
  box-shadow: var(--ppw-focus) !important;
  outline: none;
}
.wc-blocks-components-select__label {
  left: 14px !important;   /* align label with the value text */
}

/* --- Two-column layout (AUTHORITATIVE) ---
   ROOT CAUSE of "main goes under the recap": the real flex parent of the two
   columns is .wc-block-components-sidebar-layout (WooCommerce sets it to
   display:flex; FLEX-WRAP:WRAP). The columns size at main=65% + sidebar=35%
   = exactly 100%, so the MOMENT anything adds width on top (our card padding,
   a margin, a gap, the 1px borders) the row exceeds 100% and flex-wrap drops
   the main column below. And because the parent flips to flex-direction:
   row-reverse when the fields-block is the last child, the dropped main lands
   UNDER-AND-TO-THE-RIGHT — exactly the reported symptom.
   The previous fix targeted .wc-block-checkout__form, which is NOT the flex
   parent of the columns, so it was a no-op. Own the REAL parent instead:
   force NOWRAP (can never wrap), let main shrink to fit, pin the sidebar.
   WooCommerce's own direction (row-reverse) and gutter are left intact. */
@media (min-width: 1000px) {
  .wc-block-components-sidebar-layout {
    flex-wrap: nowrap !important;     /* the actual fix — no wrap, no drop */
    align-items: flex-start !important;
    gap: 24px !important;             /* gap between cards; safe under nowrap */
  }
  .wc-block-components-sidebar-layout .wc-block-components-main,
  .wc-block-checkout__main {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;          /* shrink instead of forcing overflow */
    padding-right: 24px !important;   /* card padding (replaces WC % gutter) */
  }
  .wc-block-components-sidebar-layout .wc-block-components-sidebar,
  .wc-block-checkout__sidebar {
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    margin: 0 !important;
  }
}

/* --- MOBILE: kill the duplicate order summary ---
   Below 700px (container width) WooCommerce renders the order summary TWICE:
   a collapsed peek in the sidebar at the TOP (just "Order summary + total")
   AND the full "fill" summary at the BOTTOM. Hide the top sidebar duplicate;
   the bottom fill keeps the complete summary (items + totals). Uses a
   container query so it matches WC's own 700px breakpoint and never touches
   the desktop sidebar. (.wp-block-woocommerce-checkout has container-type.) */
@container (max-width: 699px) {
  .wc-block-checkout__sidebar { display: none !important; }
}

/* --- Card the two columns ---
   padding via border-box so the cards never grow past their flex track. */
.wc-block-checkout__main,
.wc-block-checkout__sidebar {
  box-sizing: border-box !important;
  background: var(--ppw-card) !important;
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius);
  box-shadow: var(--ppw-shadow);
  padding: 22px 24px !important;
}

/* The block order-summary sidebar ships with no visible heading. Add a
   readable "Order Checkout" title at the top of the recap card. */
.wc-block-checkout__sidebar::before {
  content: "Order Checkout";
  display: block !important;
  margin: 0 0 16px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--ppw-text) !important;
}

/* --- Place order button -> gold pill + dark ink --- */
.wc-block-components-button.contained,
.wc-block-checkout__actions_row .wc-block-components-button {
  background-color: var(--ppw-gold) !important;
  color: var(--ppw-ink) !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
}
.wc-block-components-button.contained:hover {
  background-color: oklch(0.66 0.16 70) !important;
  color: var(--ppw-ink) !important;
}

/* ================================================================
   8. "Your Orders" account panel (My Account ▸ Orders)
      Template: oceanwp/woocommerce/myaccount/orders.php
      - titled header with brand icon
      - order # bold, date small + muted beneath it
      - colour-coded status badges + clickable USPS tracking pill
      - calm total (no all-green), neat item-count subline
      - reorganised action buttons (primary View, ghost rest, My cards)
   ================================================================ */

/* --- Panel header --- */
.pp-orders-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}
.pp-orders-head__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ppw-gold);
  color: var(--ppw-ink);
}
.pp-orders-head__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ppw-text);
}
.pp-orders-head__sub {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ppw-muted);
}

/* --- Table shell (inherits the white-card shop_table look; add rhythm) --- */
.woocommerce-account .pp-orders-table {
  width: 100%;
  max-width: 100%;
  font-size: 15px;
  border-collapse: collapse;
  /* fixed layout makes the % column widths authoritative (incl. the trimmed
     Order # col) and stops long content from blowing the table wider. */
  table-layout: fixed;
}
.woocommerce-account .pp-orders-table th,
.woocommerce-account .pp-orders-table td {
  box-sizing: border-box;
  overflow-wrap: anywhere;   /* break long order #s / tracking nums, no overflow */
}
.woocommerce-account .pp-orders-table thead th.woocommerce-orders-table__header {
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ppw-muted) !important;
  padding: 14px 16px !important;
}
.woocommerce-account .pp-orders-table tbody td.woocommerce-orders-table__cell {
  padding: 18px 16px !important;
  vertical-align: middle;
  border-top: 1px solid var(--ppw-border) !important;
}
.woocommerce-account .pp-orders-table tbody tr:hover td {
  background: #fffaf4;
}

/* --- Order number + date stacked --- */
.pp-order-number {
  display: inline-block;
  font-weight: 800;
  font-size: 16px;
  color: var(--ppw-text) !important;
  text-decoration: none;
}
.pp-order-number:hover { color: #c96820 !important; }
.pp-order-date {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ppw-muted);
}

/* --- Status badges (colour-coded pills) --- */
.pp-order-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pp-order-badge--pending,
.pp-order-badge--on-hold      { background: #fdf2d6; color: #8a6300; border-color: #f3d98a; }
.pp-order-badge--processing   { background: #e3f0ff; color: #1f5fb0; border-color: #bcd9ff; }
.pp-order-badge--printed      { background: #fff0e0; color: #b45309; border-color: #f7c590; }
.pp-order-badge--completed    { background: #e3f6ea; color: #1f7a45; border-color: #b8e6c8; }
.pp-order-badge--cancelled,
.pp-order-badge--failed       { background: #fde6e6; color: #b32626; border-color: #f5bcbc; }
.pp-order-badge--refunded     { background: #eceef2; color: #4a5160; border-color: #d6dae2; }

/* --- Status badge + tracking stacked (badge over tracking) --- */
.pp-order-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* --- USPS tracking link --- */
.pp-order-tracking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 9999px;
  background: var(--ppw-bg);
  border: 1px solid var(--ppw-border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ppw-text) !important;
  text-decoration: none !important;
  transition: background .15s, border-color .15s;
}
.pp-order-tracking:hover {
  background: #fff3ec;
  border-color: var(--ppw-gold);
  color: #c96820 !important;
}
.pp-order-tracking__label { color: var(--ppw-muted); }
.pp-order-tracking:hover .pp-order-tracking__label { color: #c96820; }
.pp-order-tracking__num { font-weight: 700; letter-spacing: 0.3px; }

/* --- Total (calm, single accent) ---
   The real total is the DIRECT price-amount; scope the bold/ink there so the
   woo-discount-rules "You saved" amount (a nested .awdr-you-saved-text the
   plugin appends inside get_formatted_order_total) is NOT swept up as bold. */
.pp-order-total {
  display: block;
  font-weight: 800 !important;
  font-size: 16px;
  color: var(--ppw-text) !important;   /* kill the all-green; ink instead */
}
.pp-order-total > .woocommerce-Price-amount,
.pp-order-total > .woocommerce-Price-amount bdi {
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--ppw-text) !important;
}
.pp-order-items {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ppw-muted);
}

/* --- "You saved $X" -> small calm label under the total (not bold, not loud).
   Both the words and the amount share one muted green (plugin sets an inline
   color:green we override). --- */
.pp-order-total .awdr-you-saved-text {
  display: block;
  margin-top: 4px;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  color: #4f9d6b !important;          /* muted green, not the loud inline green */
}
.pp-order-total .awdr-you-saved-text .woocommerce-Price-amount,
.pp-order-total .awdr-you-saved-text .woocommerce-Price-amount bdi {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #4f9d6b !important;          /* amount matches the label, not ink-bold */
}

/* --- Column widths: keep Actions narrow (stacked pills), give the room to
   Status so badge + tracking pill breathe. --- */
/* Order # column trimmed (~40% narrower) — # + date wrap fine in a tight col. */
.woocommerce-account .pp-orders-table th.woocommerce-orders-table__header-order-number,
.woocommerce-account .pp-orders-table td.woocommerce-orders-table__cell-order-number {
  width: 15%;
}
/* Light-orange tint on the Order # cell so each order block is easy to spot
   (stays tinted on row hover too). */
.woocommerce-account .pp-orders-table td.woocommerce-orders-table__cell-order-number,
.woocommerce-account .pp-orders-table tbody tr:hover td.woocommerce-orders-table__cell-order-number {
  background: #fff3e6;
}
.woocommerce-account .pp-orders-table th.woocommerce-orders-table__header-order-status,
.woocommerce-account .pp-orders-table td.woocommerce-orders-table__cell-order-status {
  width: 40%;
}
.woocommerce-account .pp-orders-table th.woocommerce-orders-table__header-order-actions,
.woocommerce-account .pp-orders-table td.woocommerce-orders-table__cell-order-actions {
  width: 140px;
}

/* --- Action buttons (compact, STACKED — View / My cards under each other) --- */
.pp-order-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.pp-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  border: 1px solid var(--ppw-border) !important;
  background: #fff !important;
  color: var(--ppw-text) !important;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.pp-order-btn svg { flex: 0 0 auto; width: 13px; height: 13px; }
.pp-order-btn:hover { transform: translateY(-1px); }
/* Primary: View order */
.pp-order-btn--view {
  background: var(--ppw-gold) !important;
  color: var(--ppw-ink) !important;
  border-color: transparent !important;
}
/* white text on hover — beats the global a:hover gold override so the label
   doesn't go orange-on-orange */
.pp-order-btn--view:hover { background: oklch(0.66 0.16 70) !important; color: #fff !important; }
/* Pay again — warm accent */
.pp-order-btn--pay {
  background: #fff3ec !important;
  color: #c96820 !important;
  border-color: #f3c79c !important;
}
.pp-order-btn--pay:hover { background: #ffe8d6 !important; }
/* My cards — ghost gold outline */
.pp-order-btn--cards {
  border-color: var(--ppw-gold) !important;
  color: #b45309 !important;
}
.pp-order-btn--cards:hover {
  background: #fff3ec !important;
  color: #c96820 !important;
}
/* Cancel — muted/danger ghost */
.pp-order-btn--cancel { color: #b32626 !important; border-color: #f0c2c2 !important; }
.pp-order-btn--cancel:hover { background: #fde6e6 !important; }

/* --- Mobile: stacked rows with data-title labels --- */
@media (max-width: 768px) {
  /* table layout reverts to block cards here — kill fixed layout so the cards
     size to the viewport, and clamp the table to its container width. */
  .woocommerce-account .pp-orders-table {
    table-layout: auto;
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .woocommerce-account .pp-orders-table tbody { display: block; width: 100%; }
  .woocommerce-account .pp-orders-table thead { display: none; }
  .woocommerce-account .pp-orders-table tbody tr.order {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    border: 1px solid var(--ppw-border);
    border-radius: var(--ppw-radius);
    background: var(--ppw-card);
    box-shadow: var(--ppw-shadow);
    overflow: hidden;
  }
  .woocommerce-account .pp-orders-table tbody td.woocommerce-orders-table__cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    text-align: right;
    border-top: 1px solid var(--ppw-border) !important;
    padding: 13px 16px !important;
    width: auto !important;   /* override desktop % widths on the stacked cells */
  }
  /* let the value side shrink/wrap instead of pushing the card wider */
  .woocommerce-account .pp-orders-table tbody td.woocommerce-orders-table__cell > * { min-width: 0; }
  .woocommerce-account .pp-orders-table tbody td.woocommerce-orders-table__cell::before { min-width: 0; }
  .woocommerce-account .pp-orders-table tbody tr.order td:first-child { border-top: 0 !important; }
  .woocommerce-account .pp-orders-table tbody td.woocommerce-orders-table__cell::before {
    content: attr(data-title);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ppw-muted);
    text-align: left;
    flex: 0 0 auto;
  }
  /* number/date + total read better left-aligned in the value side */
  .pp-order-date, .pp-order-items { text-align: right; }
  /* badge/tracking stack hugs the right edge in the stacked card */
  .pp-order-status-wrap { align-items: flex-end; }
  /* widths are desktop-only; on stacked cards let actions wrap to the right */
  .woocommerce-account .pp-orders-table td.woocommerce-orders-table__cell-order-status,
  .woocommerce-account .pp-orders-table td.woocommerce-orders-table__cell-order-actions { width: auto; }
  .pp-order-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  }
  .pp-order-btn { flex: 0 0 auto; }
}

/* ================================================================
   9. Dashboard landing (My Account ▸ Dashboard)
      Template: oceanwp/woocommerce/myaccount/dashboard.php
      - "Your Dashboard" title
      - welcome card + CTA to /card-printing
      - 3 square stat blocks (orders / cards / boosters)
      - "Recent Orders" panel (reuses .pp-orders-table) + See all orders
   ================================================================ */
.pp-dash-title {
  margin: 0 0 18px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ppw-text);
}

/* --- Welcome card + CTA --- */
.pp-dash-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 22px;
  padding: 22px 24px;
  border-radius: var(--ppw-radius);
  border: 1px solid var(--ppw-border);
  background:
    radial-gradient(120% 140% at 100% 0%, #fff3e6 0%, rgba(255,243,230,0) 55%),
    var(--ppw-card);
  box-shadow: var(--ppw-shadow);
}
.pp-dash-welcome__text { flex: 1 1 280px; min-width: 0; }
.pp-dash-welcome__title {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ppw-text);
}
.pp-dash-welcome__sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ppw-muted);
}
.pp-dash-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: var(--ppw-gold) !important;
  color: var(--ppw-ink) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 6px 16px rgba(201,104,32,0.22);
  transition: background .15s, transform .05s, box-shadow .15s;
}
.pp-dash-cta:hover {
  background: oklch(0.66 0.16 70) !important;
  color: #fff !important;   /* beat global a:hover gold; no orange-on-orange */
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201,104,32,0.28);
}
.pp-dash-cta:hover svg { stroke: #fff !important; }

/* --- 3 square stat blocks --- */
.pp-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 26px;
}
.pp-dash-stat {
  /* icon on the LEFT, number + label stacked to its right → shorter block */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon num"
    "icon label";
  align-items: center;
  column-gap: 14px;
  padding: 16px 20px;
  border-radius: var(--ppw-radius);
  border: 1px solid var(--ppw-border);
  background: var(--ppw-card);
  box-shadow: var(--ppw-shadow);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.pp-dash-stat:hover {
  transform: translateY(-2px);
  border-color: var(--ppw-gold);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.pp-dash-stat__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff3e6;
  color: #b45309;
}
.pp-dash-stat__num {
  grid-area: num;
  align-self: end;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--ppw-text);
}
.pp-dash-stat__label {
  grid-area: label;
  align-self: start;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ppw-muted);
}

/* --- Recent orders panel --- */
.pp-dash-recent {
  padding: 22px 24px;
  border-radius: var(--ppw-radius);
  border: 1px solid var(--ppw-border);
  background: var(--ppw-card);
  box-shadow: var(--ppw-shadow);
}
.pp-dash-recent__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}
.pp-dash-recent__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ppw-text);
}
/* the recent table shares the .pp-orders-table look; trim its outer margins */
.pp-dash-recent .pp-orders-table { margin: 0; }
.pp-dash-empty {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--ppw-muted);
}
.pp-dash-seeall {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.pp-dash-seeall__btn { padding: 9px 18px !important; font-size: 13px !important; }

@media (max-width: 768px) {
  .pp-dash-welcome { padding: 18px; }
  .pp-dash-cta { width: 100%; justify-content: center; }
  /* 3-across gets cramped on a phone; stack to full-width rows */
  .pp-dash-stats { grid-template-columns: 1fr; gap: 12px; }
  .pp-dash-stat { padding: 14px 18px; }
  .pp-dash-recent { padding: 18px; }
}

/* ================================================================
   10. Addresses (My Account ▸ Addresses + Edit address)
       Templates: oceanwp/woocommerce/myaccount/my-address.php
                  oceanwp/woocommerce/myaccount/form-edit-address.php
       - branded header (icon + title + sub), matches the dashboard
       - billing / shipping as cards with icon, address, Edit/Add button
       - edit form wrapped in a card with a back link + Save button
   ================================================================ */
/* --- Shared header (also used by the edit form) --- */
.pp-addr-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}
.pp-addr-head__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ppw-gold);
  color: var(--ppw-ink);
}
.pp-addr-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ppw-text);
}
.pp-addr-sub {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ppw-muted);
}

/* --- Address cards grid --- */
.pp-addr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.pp-addr-card {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border-radius: var(--ppw-radius);
  border: 1px solid var(--ppw-border);
  background: var(--ppw-card);
  box-shadow: var(--ppw-shadow);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.pp-addr-card:hover {
  transform: translateY(-2px);
  border-color: var(--ppw-gold);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.pp-addr-card__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ppw-border);
}
.pp-addr-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff3e6;
  color: #b45309;
}
.pp-addr-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ppw-text);
}
.pp-addr-card__body {
  flex: 1 1 auto;        /* push the button to the card bottom, equal heights */
  margin: 0 0 16px;
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ppw-text);
}
.pp-addr-empty {
  display: inline-block;
  color: var(--ppw-muted);
  font-style: italic;
}

/* --- Edit / Add button --- */
.pp-addr-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px !important;
  border-radius: 9999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: 1px solid var(--ppw-gold) !important;
  background: #fff !important;
  color: #b45309 !important;
  transition: background .15s, color .15s, border-color .15s, transform .05s;
}
.pp-addr-btn:hover {
  background: #fff3ec !important;
  color: #c96820 !important;
  transform: translateY(-1px);
}
/* "Add" (no address yet) = filled gold to nudge the action */
.pp-addr-btn--add {
  background: var(--ppw-gold) !important;
  color: var(--ppw-ink) !important;
  border-color: transparent !important;
}
.pp-addr-btn--add:hover {
  background: oklch(0.66 0.16 70) !important;
  color: #fff !important;   /* beat global a:hover gold; no orange-on-orange */
}

/* --- Edit form --- */
.pp-addr-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  color: var(--ppw-muted) !important;
}
.pp-addr-back:hover { color: #c96820 !important; }
.pp-addr-form-card {
  padding: 24px 26px;
  border-radius: var(--ppw-radius);
  border: 1px solid var(--ppw-border);
  background: var(--ppw-card);
  box-shadow: var(--ppw-shadow);
}
.pp-addr-form-card .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 18px;
}
/* full-width fields that shouldn't be halved */
.pp-addr-form-card #billing_company_field,
.pp-addr-form-card #shipping_company_field,
.pp-addr-form-card #billing_address_1_field,
.pp-addr-form-card #shipping_address_1_field,
.pp-addr-form-card #billing_address_2_field,
.pp-addr-form-card #shipping_address_2_field { grid-column: 1 / -1; }
.pp-addr-form-actions { margin: 8px 0 0; }
.pp-addr-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  background: var(--ppw-gold) !important;
  color: var(--ppw-ink) !important;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(201,104,32,0.22);
  transition: background .15s, transform .05s, box-shadow .15s;
}
.pp-addr-save:hover {
  background: oklch(0.66 0.16 70) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201,104,32,0.28);
}

@media (max-width: 768px) {
  .pp-addr-title { font-size: 22px; }
  .pp-addr-grid { grid-template-columns: 1fr; }
  .pp-addr-form-card { padding: 18px; }
  .pp-addr-form-card .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
  .pp-addr-save { width: 100%; justify-content: center; }
}

/* ================================================================
   11. Edit account (My Account ▸ Account details)
       Template: oceanwp/woocommerce/myaccount/form-edit-account.php
       - reuses the branded header (.pp-addr-head) + form card
         (.pp-addr-form-card) + gold save button (.pp-addr-save)
       - first/last name on one row, the rest full width
       - "Password change" becomes a divided sub-section
   ================================================================ */
.pp-acct-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 18px;
}
/* WooCommerce floats these; grid items ignore float, but kill the % width too */
.pp-acct-form > .form-row {
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.pp-acct-form > .form-row-first { grid-column: 1; }
.pp-acct-form > .form-row-last  { grid-column: 2; }
.pp-acct-form > .form-row-wide,
.pp-acct-form > fieldset,
.pp-acct-form > .pp-addr-form-actions { grid-column: 1 / -1; }
.pp-acct-form > .clear { display: none; }
.pp-acct-form #account_display_name_description em {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ppw-muted);
}
.pp-acct-form fieldset {
  margin: 10px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--ppw-border);
}
.pp-acct-form fieldset legend {
  padding: 0;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ppw-text);
}
.pp-acct-form .pp-addr-form-actions { margin-top: 6px; }

@media (max-width: 768px) {
  .pp-acct-form { grid-template-columns: 1fr; }
  .pp-acct-form > .form-row-first,
  .pp-acct-form > .form-row-last { grid-column: 1; }
}

/* ================================================================
   12. Payment methods (My Account ▸ Payment methods)
       Template: oceanwp/woocommerce/myaccount/payment-methods.php
       - branded header (.pp-addr-head)
       - methods table inherits the white-card .shop_table look (sec 1)
       - friendly empty state + gold "Add payment method" button
   ================================================================ */
.pp-pay-table { margin-bottom: 22px; }
.pp-pay-table .button {
  display: inline-block;
  margin: 0 4px 4px 0;
}
/* Empty state card */
.pp-pay-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 34px 24px;
  border-radius: var(--ppw-radius);
  border: 1px dashed var(--ppw-border);
  background: var(--ppw-card);
  box-shadow: var(--ppw-shadow);
}
.pp-pay-empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #fff3e6;
  color: #b45309;
}
.pp-pay-empty__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ppw-text);
}
.pp-pay-empty__sub {
  margin: 0;
  font-size: 14px;
  color: var(--ppw-muted);
}
.pp-pay-actions { margin: 20px 0 0; }
.pp-pay-add { text-decoration: none !important; }

/* ================================================================
   13. Vendor tab (My Account ▸ Vendor)
       Markup: frozen [vendor_thankyou_page] shortcode, wrapped in
       .pp-vendor by oceanwp/functions.php. CSS ONLY — no markup or
       functionality changed; every control kept, just re-skinned to
       the gold/orange white-card standard and fixed for contrast.
       (!important is used where the shortcode sets dark inline styles
       or bootstrap/custom.css set white-on-white.)
   ================================================================ */
/* --- Strip the heavy dark theme shell --- */
.pp-vendor .event-schedule-area-two,
.pp-vendor .bg-color { background: transparent !important; }
.pp-vendor .pad100 { padding: 8px 0 0 !important; }
.pp-vendor { color: var(--ppw-text); }

/* Hide the "Vendor Module" heading — we already show the branded "Vendor"
   title above the tabs. */
.pp-vendor .section-title { display: none !important; }

/* --- Tabs: segmented control (white-on-white was invisible before) --- */
.pp-vendor ul.custom-tab {
  display: inline-flex !important;
  justify-content: flex-start;
  gap: 4px;
  border: 1px solid var(--ppw-border) !important;
  border-radius: 12px;
  background: var(--ppw-bg);
  padding: 5px !important;
  margin: 0 0 20px !important;
  flex-wrap: wrap;
}
.pp-vendor ul.custom-tab li { margin: 0 !important; }
.pp-vendor ul.custom-tab li a {
  display: block;
  color: var(--ppw-muted) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border-radius: 9px;
  transition: color .15s, background .15s, box-shadow .15s;
}
.pp-vendor ul.custom-tab li a:hover { color: var(--ppw-text) !important; }
.pp-vendor ul.custom-tab li a.active,
.pp-vendor ul.custom-tab li a.active.show {
  color: #b45309 !important;
  background: var(--ppw-card) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
/* drop the old sliding underline — the filled pill is the active cue */
.pp-vendor ul.custom-tab li a:before { display: none !important; }

/* Enforce tab show/hide even if Bootstrap CSS fails to load. Otherwise the
   hidden "My Listings" tab (#home, first in the DOM) leaks above #tycard as
   stray white space + its lone "Listing" input (looks like a search box). */
.pp-vendor .tab-content > .tab-pane { display: none !important; }
.pp-vendor .tab-content > .tab-pane.active { display: block !important; }

/* ===== THANK YOU tab: one block — card+upload left, form right ===== */
/* The whole tab is a single white block. */
.pp-vendor #tycard.tab-pane {
  background: var(--ppw-card);
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius);
  box-shadow: var(--ppw-shadow);
  padding: 24px 26px;
}
/* the bootstrap .row holds left (card) + right (form), tops aligned */
.pp-vendor #tycard .row { align-items: flex-start; margin: 0; }
.pp-vendor #tycard .row > .col-md-6 { padding: 0 14px; }
/* vertical divider between the two columns */
.pp-vendor #tycard .row > .col-md-6:last-child { border-left: 1px solid var(--ppw-border); }

/* LEFT: preview card + full-width upload, centered & a touch bigger */
.pp-vendor #card-background-div { margin: 0 !important; }   /* kill the .mt-5 dead space above the card */
.pp-vendor .card-bx-row { justify-content: center; margin: 0 !important; }
.pp-vendor .card-bx-row .card-bx-holder { max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; }
.pp-vendor .col-3-shell {
  background: var(--ppw-bg) !important;
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius) !important;
  box-shadow: none;
  padding: 14px !important;
  margin-bottom: 0 !important;   /* .cell-bot-gap dead space below the card */
  /* the frozen markup pins this to inline width:fit-content, which (with the
     image's max-width:100%) collapses the preview. Let it be a full-width card. */
  width: 100% !important;
}
/* "Thank you card Saved" label removed */
.pp-vendor .card-title-holder { display: none !important; }
.pp-vendor .thankyouImg,
.pp-vendor .card-img-holder img {
  border-radius: 12px;
  width: 315px !important;      /* restore the original preview size (custom.css) */
  max-width: 100% !important;
  height: auto;
  margin: 0 auto !important;    /* kill the .mt-3 gap above the image, keep centered */
  display: block;
}
.pp-vendor .card-img-holder { margin: 0 !important; line-height: 0; }
.pp-vendor .canChange { margin-top: 12px !important; }
.pp-vendor #uploadbtnF.cta-btn1 { width: 100% !important; }

/* RIGHT: the two forms become transparent sections inside the one block */
.pp-vendor .sub-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* separator between the header-text form and the message-text form */
.pp-vendor .sub-section.mt-5 {
  border-top: 1px solid var(--ppw-border);
  margin-top: 16px !important;
  padding-top: 16px !important;
}
.pp-vendor #tycard br { display: none; }   /* drop the <br> between the two forms */

/* lay each form out: text + font-style full width; size + position share a row */
.pp-vendor .sub-section > div[style] {
  margin-left: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: flex-end;
}
.pp-vendor .sub-section > div > div { flex: 1 1 100%; min-width: 0; margin-top: 0 !important; }
.pp-vendor .sub-section > div > div.mt-3:not(.flex-container) { flex: 1 1 calc(50% - 8px); }
.pp-vendor .sub-section p[style] {
  color: var(--ppw-text) !important;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px !important;
}
.pp-vendor .sub-section input,
.pp-vendor .sub-section textarea,
.pp-vendor .sub-section select { width: 100% !important; }
.pp-vendor .sub-section textarea#thankyoutxt2 { min-height: 64px; }
/* font-style row: select grows, color wheel sits next to it */
.pp-vendor .flex-container > div[style*="display: flex"] { width: 100% !important; align-items: center; gap: 8px !important; }
.pp-vendor label[for="color1Picker"] img,
.pp-vendor label[for="color2Picker"] img { width: 34px; height: 34px; cursor: pointer; }

/* The tycard top row is a Bootstrap .row (flex-wrap). The error + Save/Reset
   blocks are siblings of the two columns, so flex-wrap dropped them onto a
   full-width line at the very bottom. Turn the row into an explicit 2-col grid
   so error + buttons land in column 2, directly under the RIGHT form, with no
   bottom dead space. (Trailing empty preview row is hidden below.) */
.pp-vendor #tycard > .row:not([style*="justify-content"]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 28px;
  row-gap: 0;
}
/* Bootstrap 5 gives .col-md-6 width:50%, which inside this grid resolves
   against the already-half-width track -> each column collapses to ~1/4.
   Force the grid-item columns to fill their own track. */
.pp-vendor #tycard > .row:not([style*="justify-content"]) > .col-md-6 { width: 100% !important; max-width: 100% !important; flex: none !important; }
.pp-vendor #tycard > .row:not([style*="justify-content"]) > .col-md-6:first-child  { grid-column: 1; grid-row: 1; }
.pp-vendor #tycard > .row:not([style*="justify-content"]) > .col-md-6:nth-child(2) { grid-column: 2; grid-row: 1; }
.pp-vendor #tycard > .row:not([style*="justify-content"]) > .flex-container:has(#ty-error) { grid-column: 2; grid-row: 2; margin: 14px 0 0 !important; }
.pp-vendor #tycard > .row:not([style*="justify-content"]) > .flex-container:has(.cta-btn1) { grid-column: 2; grid-row: 3; }

/* Save / Reset — bigger, centered, sitting right under the right column */
.pp-vendor #tycard .flex-container:has(.cta-btn1) {
  justify-content: center !important;
  gap: 12px;
  margin: 16px 0 0 !important;
  padding: 0;
  border-top: 0;
}
.pp-vendor #tycard .flex-container:has(.cta-btn1) .cta-btn1 {
  flex: 1 1 0;
  max-width: 200px;
  padding: 13px 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}
.pp-vendor #ty-error { margin: 0 auto !important; }
/* hide the trailing empty preview row the shortcode leaves at the bottom */
.pp-vendor #tycard > .row[style*="justify-content"] { display: none; }

/* --- Form controls: dark inline boxes / gray selects → light + dark text --- */
.pp-vendor .thankyoutxt,
.pp-vendor input#thankyoutxt1,
.pp-vendor textarea#thankyoutxt2,
.pp-vendor select.thankyouRange,
.pp-vendor select#txt1Style,
.pp-vendor select#txt2Style {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--ppw-text) !important;
  border: 1.5px solid var(--ppw-border) !important;
  border-radius: var(--ppw-radius-sm) !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
}
/* OceanWP forces select{height:2.25em} which, with border-box + our padding,
   vertically clips the selected text. Release the fixed height so the box
   sizes to its content (tall script fonts like Pacifico fit too). */
.pp-vendor select.thankyouRange,
.pp-vendor select#txt1Style,
.pp-vendor select#txt2Style {
  height: auto !important;
  min-height: 46px !important;
  line-height: 1.4 !important;
  overflow: visible !important;
}
.pp-vendor .thankyoutxt::placeholder { color: var(--ppw-muted) !important; opacity: 1; }
.pp-vendor .thankyoutxt:focus,
.pp-vendor select.thankyouRange:focus {
  outline: none !important;
  border-color: var(--ppw-gold) !important;
  box-shadow: var(--ppw-focus) !important;
}

/* Range sliders → gold accent (works modern browsers; no markup change) */
.pp-vendor input[type="range"].thankyouRange {
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--ppw-gold);
  height: 6px;
  border-radius: 999px;
  background: #ece7df !important;
  padding: 0 !important;
}
.pp-vendor input[type="range"].thankyouRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ppw-gold);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer;
}
.pp-vendor input[type="range"].thankyouRange::-moz-range-thumb {
  width: 18px; height: 18px; border: 2px solid #fff;
  border-radius: 50%; background: var(--ppw-gold); cursor: pointer;
}
.pp-vendor label[for="color1Picker"] img,
.pp-vendor label[for="color2Picker"] img {
  width: 34px; height: 34px; cursor: pointer; vertical-align: middle;
}

/* --- Buttons --- */
/* primary gold pill: .cta-btn1, native #saveListingBtn, bootstrap .btn-primary */
.pp-vendor .cta-btn1,
.pp-vendor #saveListingBtn,
.pp-vendor .btn-primary,
.pp-vendor .modal-footer .btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto !important;
  min-width: 120px;
  padding: 11px 22px !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  background: var(--ppw-gold) !important;
  color: var(--ppw-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  text-align: center;
  box-shadow: 0 6px 16px rgba(201,104,32,0.22);
  cursor: pointer;
  transition: background .15s, transform .05s, box-shadow .15s;
}
.pp-vendor .cta-btn1:hover,
.pp-vendor #saveListingBtn:hover,
.pp-vendor .btn-primary:hover {
  background: oklch(0.66 0.16 70) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201,104,32,0.28);
}
/* icon-only listing buttons (add / upload) stay compact circles */
.pp-vendor .list-btn-div .btn-primary,
.pp-vendor .subOption .btn-primary,
.pp-vendor .uploadListBtn {
  min-width: 0 !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
}
/* danger / remove button → our red, same pill shape */
.pp-vendor .btn-danger {
  min-width: 0 !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  background: #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(220,38,38,.18);
  transition: background .15s, transform .05s;
}
.pp-vendor .btn-danger:hover { background: #b91c1c !important; transform: translateY(-1px); }

/* --- My Listings tree: dark boxes → light cards, dark connectors softened --- */
.pp-vendor #addListing .parent-p-listing,
.pp-vendor .parent-p-listing {
  background: var(--ppw-bg) !important;
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius) !important;
  padding: 14px 18px 14px 30px !important;
}
.pp-vendor #addListing .listing-name,
.pp-vendor .listing-name {
  color: var(--ppw-text) !important;
  background: #fff !important;
  border: 1.5px solid var(--ppw-border) !important;
  border-radius: var(--ppw-radius-sm) !important;
  padding: 6px 10px !important;
  font-size: 18px !important;
}
.pp-vendor .gray-bar:before { background-color: var(--ppw-border) !important; }
.pp-vendor .gray-bar-h:before,
.pp-vendor .gray-bar-h-p:before { background-color: var(--ppw-border) !important; }
.pp-vendor .upload-listing-msg,
.pp-vendor .subUploading { color: var(--ppw-muted) !important; }

/* --- Error / status box --- */
.pp-vendor .custom-bx#ty-error,
.pp-vendor #ty-error {
  background: #fff5f5 !important;
  border: 1.5px solid #fca5a5;
  border-radius: 12px;
  color: #7f1d1d !important;
  font-size: 14.5px;
  padding: 12px 16px !important;
  margin: 0 auto !important;
}
.pp-vendor #ty-error strong { color: #b91c1c; }

/* --- Modals: gray → white card --- */
.pp-vendor + .listingModal .modal-content,
.listingModal .modal-content {
  background: var(--ppw-card) !important;
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
.listingModal .modal-header,
.listingModal .modal-footer { border-color: var(--ppw-border) !important; }
.listingModal .modal-title { color: var(--ppw-text) !important; font-weight: 800; }
.listingModal .modal-body .form-control,
.listingModal .modal-body input[type="text"] {
  background: #fff !important;
  color: var(--ppw-text) !important;
  border: 1.5px solid var(--ppw-border) !important;
  border-radius: var(--ppw-radius-sm) !important;
}
.listingModal .modal-body .col-form-label { color: var(--ppw-text) !important; }
.listingModal .modal-header .close,
.listingModal .close {
  background: transparent !important;
  color: var(--ppw-muted) !important;
  border: 0;
  font-size: 22px;
  opacity: .8;
}
.listingModal .close:hover { opacity: 1; color: #b91c1c !important; }
.listingModal .btn-primary {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-width: 120px; padding: 11px 22px !important;
  border-radius: 9999px !important; border: 1px solid transparent !important;
  background: var(--ppw-gold) !important; color: var(--ppw-ink) !important;
  font-weight: 700 !important; text-transform: none !important; cursor: pointer;
}
.listingModal .btn-primary:hover { background: oklch(0.66 0.16 70) !important; color:#fff !important; }

@media (max-width: 768px) {
  .pp-vendor .card-bx-holder { max-width: 100% !important; flex: 0 0 100% !important; }
  .pp-vendor ul.custom-tab li a { font-size: 14px !important; padding: 9px 14px !important; }
  /* collapse the grid to a single column so everything stacks */
  .pp-vendor #tycard > .row:not([style*="justify-content"]) { grid-template-columns: 1fr; }
  .pp-vendor #tycard > .row:not([style*="justify-content"]) > * { grid-column: 1 !important; grid-row: auto !important; }
  .pp-vendor #tycard .row > .col-md-6 { padding: 0; }
  .pp-vendor #tycard .row > .col-md-6:last-child {
    border-left: 0;
    border-top: 1px solid var(--ppw-border);
    margin-top: 18px;
    padding-top: 18px;
  }
  .pp-vendor #tycard.tab-pane { padding: 18px; }
  .pp-vendor #tycard .flex-container:has(.cta-btn1) { justify-content: center !important; }
}

/* ----------------------------------------------------------------
   13b. Bootstrap guard for the My Account menu.
   The frozen [vendor_thankyou_page] shortcode enqueues Bootstrap 5 CSS,
   whose Reboot rewrites body typography (font-family / weight / line-height).
   The left account nav has no font rules of its own, so it inherits body and
   visibly shifts ON THE VENDOR PAGE ONLY. Pin it to the site's real theme
   values (Montserrat 16/500, line-height 1.8) so it looks identical on every
   account page. Applies to all account pages — a no-op where Bootstrap is
   absent, an override where it isn't. Scoped to the nav, so nothing else moves.
   ---------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-navigation ul,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  font-family: "Montserrat", "Open Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
}

/* ================================================================
   14. Pay for order (order-pay endpoint)
       Template: oceanwp/woocommerce/checkout/form-pay.php
       - branded title + hero (reuses section 6 classes)
       - two columns like checkout: LEFT payment, RIGHT order summary
       - contrast-safe (no dark/black boxes); Select2 from section 4
   ================================================================ */
.pp-pay { margin: 8px 0 0; }
.pp-pay .pp-checkout-page-title {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ppw-text);
}

/* two-column grid (form is the flex container).
   NOTE: the form id is #order_review, and OceanWP's woocommerce.css ships
   `.woocommerce-checkout #order_review { float:right; width:48% }`. The body
   carries `.woocommerce-checkout` on this endpoint, so that id+class selector
   out-specifies a plain `.pp-pay-grid` class and the form would float into a
   48% box (collapsing both columns). We must match its specificity and force
   the layout back, hence `#order_review.pp-pay-grid` + !important below. */
.pp-pay #order_review.pp-pay-grid {
  display: flex !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
}
.pp-pay .pp-pay-main { flex: 1 1 auto; min-width: 0; float: none; width: auto; }
.pp-pay .pp-pay-summary { flex: 0 0 380px; max-width: 380px; float: none; width: auto; }

/* left + right share the white-card look */
.pp-pay-main #payment {
  background: var(--ppw-card);
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius);
  box-shadow: var(--ppw-shadow);
  padding: 22px 24px;
}
.pp-pay-section-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ppw-text);
}

/* --- Payment method list (contrast-safe) --- */
.pp-pay .wc_payment_methods.payment_methods {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}
.pp-pay .wc_payment_methods li {
  list-style: none;
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius-sm);
  background: var(--ppw-card);
  transition: border-color .15s, box-shadow .15s;
}
.pp-pay .wc_payment_methods li:hover { border-color: var(--ppw-gold); }
.pp-pay .wc_payment_methods li label {
  display: inline-block;
  color: var(--ppw-text) !important;
  font-weight: 700;
  margin: 0 0 0 6px;
  cursor: pointer;
}
.pp-pay .wc_payment_methods li input[type="radio"] { accent-color: var(--ppw-gold); }
.pp-pay .wc_payment_methods li img { vertical-align: middle; margin-left: 8px; max-height: 28px; width: auto; }
/* gateway description / fields box: light bg + dark text (never dark-on-dark) */
.pp-pay .payment_box {
  margin: 12px 0 0;
  padding: 14px 16px !important;
  background: var(--ppw-bg) !important;
  border-radius: var(--ppw-radius-sm) !important;
  color: var(--ppw-text) !important;
  font-size: 14px;
  line-height: 1.6;
}
.pp-pay .payment_box,
.pp-pay .payment_box * { color: var(--ppw-text) !important; }
.pp-pay .payment_box:before { border-bottom-color: var(--ppw-bg) !important; }
.pp-pay .payment_box input,
.pp-pay .payment_box select,
.pp-pay .payment_box textarea {
  background: #fff !important;
  color: var(--ppw-text) !important;
  border: 1px solid var(--ppw-border) !important;
  border-radius: var(--ppw-radius-sm) !important;
}

/* --- Terms + pay button --- */
.pp-pay #payment .form-row { margin: 16px 0 0; padding: 0; }
.pp-pay .woocommerce-terms-and-conditions-wrapper { margin: 0 0 14px; }
.pp-pay #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 26px !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  background: var(--ppw-gold) !important;
  color: var(--ppw-ink) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(201,104,32,0.22);
  transition: background .15s, transform .05s, box-shadow .15s;
}
.pp-pay #place_order:hover {
  background: oklch(0.66 0.16 70) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201,104,32,0.28);
}

/* --- Order summary: ONE white card wrapping title + table ---
   The form id is #order_review, so section 2 flattens any .shop_table inside
   it (border/shadow stripped) AND the theme ships id-level rules
   `.woocommerce #order_review table.shop_table …` (specificity 1,1,1) that
   recolour the header/footer cells — on the live site those leave white text
   on the gray cells (white-on-white). So we DON'T rely on the table being the
   card: we wrap it in `.pp-pay-summary__card` (the structure div) and force the
   table fully transparent with consistent dark text at id-level specificity. */
.pp-pay-summary__card {
  background: var(--ppw-card);
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius);
  box-shadow: var(--ppw-shadow);
  padding: 22px 24px;
}
.pp-pay-summary__card .pp-pay-section-title { margin: 0 0 4px; }

/* kill the inherited card/banding so the table reads as plain rows on the white
   card. id-level (#order_review) + !important to outrank theme + section 2. */
#order_review .pp-pay-summary__card .pp-pay-table,
#order_review .pp-pay-summary__card .pp-pay-table thead,
#order_review .pp-pay-summary__card .pp-pay-table tbody,
#order_review .pp-pay-summary__card .pp-pay-table tfoot,
#order_review .pp-pay-summary__card .pp-pay-table tr,
#order_review .pp-pay-summary__card .pp-pay-table th,
#order_review .pp-pay-summary__card .pp-pay-table td {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#order_review .pp-pay-summary__card .pp-pay-table {
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100%;
}
/* every cell: dark, readable text (beats theme `#order_review …th{color:#444}`
   and any sitewide white-text rule) */
#order_review .pp-pay-summary__card .pp-pay-table th,
#order_review .pp-pay-summary__card .pp-pay-table td,
#order_review .pp-pay-summary__card .pp-pay-table th *,
#order_review .pp-pay-summary__card .pp-pay-table td * {
  color: var(--ppw-text) !important;
}
/* column headers: muted, small, with a hairline under the head row */
#order_review .pp-pay-summary__card .pp-pay-table thead th {
  color: var(--ppw-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--ppw-border) !important;
}
#order_review .pp-pay-summary__card .pp-pay-table thead th.product-quantity,
#order_review .pp-pay-summary__card .pp-pay-table thead th.product-total { text-align: right; }
/* line items */
#order_review .pp-pay-summary__card .pp-pay-table tbody td {
  padding: 14px 0 !important;
  vertical-align: top;
  border-bottom: 1px solid var(--ppw-border) !important;
}
#order_review .pp-pay-summary__card .pp-pay-table tbody tr:last-child td { border-bottom: 0 !important; }
#order_review .pp-pay-summary__card .pp-pay-table .product-name { font-weight: 700; }
#order_review .pp-pay-summary__card .pp-pay-table .product-name em { font-weight: 400; font-style: normal; color: var(--ppw-muted) !important; font-size: 13px; display: block; margin-top: 3px; }
#order_review .pp-pay-summary__card .pp-pay-table td.product-quantity,
#order_review .pp-pay-summary__card .pp-pay-table td.product-subtotal { text-align: right; white-space: nowrap; }
/* totals */
#order_review .pp-pay-summary__card .pp-pay-table tfoot th,
#order_review .pp-pay-summary__card .pp-pay-table tfoot td {
  padding: 10px 0 !important;
  text-align: left;
  font-weight: 600;
}
#order_review .pp-pay-summary__card .pp-pay-table tfoot td.product-total { text-align: right; white-space: nowrap; }
#order_review .pp-pay-summary__card .pp-pay-table tfoot tr:first-child th,
#order_review .pp-pay-summary__card .pp-pay-table tfoot tr:first-child td { padding-top: 16px !important; border-top: 1px solid var(--ppw-border) !important; }
#order_review .pp-pay-summary__card .pp-pay-table tfoot tr:last-child th,
#order_review .pp-pay-summary__card .pp-pay-table tfoot tr:last-child td {
  font-size: 17px !important;
  font-weight: 800 !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--ppw-border) !important;
}

@media (max-width: 980px) {
  .pp-pay #order_review.pp-pay-grid { flex-direction: column; }
  .pp-pay .pp-pay-main,
  .pp-pay .pp-pay-summary { flex: 1 1 auto; max-width: 100%; width: 100%; }
  /* summary first so the customer sees what they pay, then the methods */
  .pp-pay .pp-pay-summary { order: -1; }
}
@media (max-width: 600px) {
  .pp-pay .pp-checkout-page-title { font-size: 24px; }
  .pp-pay-main #payment { padding: 18px; }
}