/* =========================================================================
   Pecan & Petal - My Account slice (UrbanStems-style)
   Styles WooCommerce my-account templates. Targets REAL WooCommerce /
   Storefront class names only. ALL palette colors come from the central
   theme layer variables (--pnp-*, defined in mu-plugins/zzz-pnp-overrides.php).
   No palette hex is hardcoded here. #fff surfaces, neutral shadows tinted
   from var(--pnp-ink), and tints derived with color-mix() from the palette
   are structural, not brand palette values, and stay retunable in one place.

   Scope: every rule is prefixed with .woocommerce-account (the <body> class
   WooCommerce adds on all account pages, logged in or out) so nothing leaks
   into cart, the block checkout, or other slices.

   Palette in use (from zzz-pnp-overrides.php :root):
     --pnp-bronze       #6e5a43  bands, active pills, buttons, accents
     --pnp-bronze-dark  #574733  hover
     --pnp-peach        #f6ede7  page ground
     --pnp-coral        #c6634a  attention (cancelled / failed / errors)
     --pnp-ink          #2a2620  body text
   Bands are DARK bronze with WHITE (#fff) text, per brand.
   Fonts: Fraunces (display headings), Manrope (body/labels).
   ========================================================================= */

/* ---- local structural tokens, all derived from the palette variables ---- */
.woocommerce-account{
  --pnp-acc-surface:#fff;
  --pnp-acc-line:color-mix(in srgb, var(--pnp-bronze) 16%, #fff);
  --pnp-acc-line-strong:color-mix(in srgb, var(--pnp-bronze) 30%, #fff);
  --pnp-acc-tint:color-mix(in srgb, var(--pnp-peach) 70%, #fff);
  --pnp-acc-tint-strong:color-mix(in srgb, var(--pnp-peach) 55%, var(--pnp-bronze) 6%);
  --pnp-acc-radius:14px;
  --pnp-acc-radius-sm:10px;
  --pnp-acc-shadow:
    0 1px 2px color-mix(in srgb, var(--pnp-ink) 6%, transparent),
    0 12px 30px color-mix(in srgb, var(--pnp-ink) 6%, transparent);
  --pnp-acc-ring:0 0 0 3px color-mix(in srgb, var(--pnp-bronze) 28%, transparent);
  --pnp-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pnp-display:"Fraunces",Georgia,serif;

  /* nav / card icons: shape-only SVGs used as alpha masks so the fill color
     is always var(--pnp-bronze) (or #fff on active bands). No # in the SVGs. */
  --pnp-ic-dashboard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
  --pnp-ic-orders:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1.5 11H4.5L3 9z'/%3E%3Cpath d='M8 9V6a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --pnp-ic-downloads:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M8 11l4 4 4-4'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
  --pnp-ic-address:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4-4-7-7-7-11a7 7 0 0 1 14 0c0 4-3 7-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
  --pnp-ic-payment:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h3'/%3E%3C/svg%3E");
  --pnp-ic-account:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
  --pnp-ic-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4'/%3E%3Cpath d='M10 8l-4 4 4 4'/%3E%3Cpath d='M6 12h9'/%3E%3C/svg%3E");
  --pnp-ic-default:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3C/svg%3E");
}

/* =========================================================================
   1. PAGE FRAME + LAYOUT
      .woocommerce wraps the shortcode output. On logged-in pages it holds
      <nav.woocommerce-MyAccount-navigation> + <div.woocommerce-MyAccount-content>.
      On the login page it holds the login form only (no nav) -> :has() keeps
      the sidebar grid off the login screen.
   ========================================================================= */
.woocommerce-account .woocommerce{
  max-width:1200px;
  margin-inline:auto;
  font-family:var(--pnp-body);
  color:var(--pnp-ink);
}

/* the "My account" page title, when the theme prints one */
.woocommerce-account .entry-header .entry-title,
.woocommerce-account h1.entry-title{
  font-family:var(--pnp-display);
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 1.6rem;
}

@media (min-width:769px){
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
    display:grid;
    grid-template-columns:262px minmax(0,1fr);
    gap:2.4rem;
    align-items:start;
  }
  /* neutralise Storefront's float layout so the grid governs widths */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{
    float:none;
    width:auto;
    margin:0;
  }
}

/* =========================================================================
   2. SIDEBAR NAVIGATION
      nav.woocommerce-MyAccount-navigation > ul > li.woocommerce-MyAccount-navigation-link--{endpoint}
      Active item gets .is-active. Icons are CSS masks (color = palette var).
   ========================================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation{
  background:var(--pnp-acc-surface);
  border:1px solid var(--pnp-acc-line);
  border-radius:var(--pnp-acc-radius);
  box-shadow:var(--pnp-acc-shadow);
  padding:.6rem;
  position:sticky;
  top:1.5rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{
  margin:0;
  border:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:flex;
  align-items:center;
  gap:.72rem;
  padding:.72rem .85rem;
  border-radius:var(--pnp-acc-radius-sm);
  font-family:var(--pnp-body);
  font-weight:600;
  font-size:.94rem;
  line-height:1.2;
  color:var(--pnp-ink);
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}

/* shared icon base (nav pseudo + dashboard card span) */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before,
.woocommerce-account .pnp-acc-card__icon{
  content:"";
  display:inline-block;
  flex:0 0 auto;
  width:20px;
  height:20px;
  background-color:var(--pnp-bronze);
  -webkit-mask:var(--pnp-ic-default) center / contain no-repeat;
  mask:var(--pnp-ic-default) center / contain no-repeat;
}
@supports not ((-webkit-mask:url("i")) or (mask:url("i"))){
  /* if masks are unsupported, drop the swatch rather than show a solid block */
  .woocommerce-account .woocommerce-MyAccount-navigation li a::before,
  .woocommerce-account .pnp-acc-card__icon{ background-color:transparent; }
}

/* per-endpoint icon (nav) */
.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before{-webkit-mask-image:var(--pnp-ic-dashboard);mask-image:var(--pnp-ic-dashboard);}
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before{-webkit-mask-image:var(--pnp-ic-orders);mask-image:var(--pnp-ic-orders);}
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before{-webkit-mask-image:var(--pnp-ic-downloads);mask-image:var(--pnp-ic-downloads);}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before{-webkit-mask-image:var(--pnp-ic-address);mask-image:var(--pnp-ic-address);}
.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before{-webkit-mask-image:var(--pnp-ic-payment);mask-image:var(--pnp-ic-payment);}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before{-webkit-mask-image:var(--pnp-ic-account);mask-image:var(--pnp-ic-account);}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before{-webkit-mask-image:var(--pnp-ic-logout);mask-image:var(--pnp-ic-logout);}

/* hover (light): peach tint band, bronze text + icon */
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible{
  background:var(--pnp-acc-tint);
  color:var(--pnp-bronze);
  outline:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover::before,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible::before{
  background-color:var(--pnp-bronze);
}

/* active (dark band): bronze fill, WHITE text + icon */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--pnp-bronze);
  color:#fff;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover{
  background:var(--pnp-bronze-dark);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before{
  background-color:#fff;
}
/* keep the logout item quietly separated at the foot of the list */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout{
  margin-top:.35rem;
  padding-top:.35rem;
  border-top:1px solid var(--pnp-acc-line);
}

/* =========================================================================
   3. CONTENT PANEL
   ========================================================================= */
.woocommerce-account .woocommerce-MyAccount-content{
  background:var(--pnp-acc-surface);
  border:1px solid var(--pnp-acc-line);
  border-radius:var(--pnp-acc-radius);
  box-shadow:var(--pnp-acc-shadow);
  padding:2rem 2.25rem 2.25rem;
  min-height:340px;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3{
  font-family:var(--pnp-display);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--pnp-ink);
  margin-top:0;
}
.woocommerce-account .woocommerce-MyAccount-content > p{
  color:color-mix(in srgb, var(--pnp-ink) 78%, #fff);
  line-height:1.6;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.pnp-acc-card){
  color:var(--pnp-bronze);
  text-underline-offset:2px;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.pnp-acc-card):hover{
  color:var(--pnp-bronze-dark);
}

/* =========================================================================
   4. DASHBOARD (works with the dashboard.php template part in this slice)
      Greeting header + quick-link cards. Degrades gracefully: if the
      template part is not installed, the core dashboard paragraphs simply
      inherit the content-panel typography above.
   ========================================================================= */
.woocommerce-account .pnp-acc-hello{
  margin:0 0 1.6rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--pnp-acc-line);
}
.woocommerce-account .pnp-acc-hello__title{
  font-family:var(--pnp-display);
  font-size:2rem;
  font-weight:600;
  letter-spacing:-.015em;
  margin:0 0 .3rem;
}
.woocommerce-account .pnp-acc-hello__sub{
  margin:0;
  font-size:1rem;
  color:color-mix(in srgb, var(--pnp-ink) 70%, #fff);
}
.woocommerce-account .pnp-acc-hello__logout{
  margin-left:.4rem;
  font-weight:600;
  color:var(--pnp-bronze);
  text-decoration:underline;
  text-underline-offset:2px;
}

.woocommerce-account .pnp-acc-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.woocommerce-account .pnp-acc-card{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:.9rem;
  row-gap:.15rem;
  align-items:center;
  padding:1.25rem 1.3rem;
  border:1px solid var(--pnp-acc-line);
  border-radius:var(--pnp-acc-radius-sm);
  background:var(--pnp-acc-surface);
  text-decoration:none;
  color:var(--pnp-ink);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.woocommerce-account .pnp-acc-card:hover{
  border-color:var(--pnp-acc-line-strong);
  background:var(--pnp-acc-tint);
  box-shadow:var(--pnp-acc-shadow);
  transform:translateY(-2px);
}
.woocommerce-account .pnp-acc-card__icon{
  width:26px;
  height:26px;
  grid-row:1 / span 2;
}
.woocommerce-account .pnp-acc-card--orders .pnp-acc-card__icon{-webkit-mask-image:var(--pnp-ic-orders);mask-image:var(--pnp-ic-orders);}
.woocommerce-account .pnp-acc-card--edit-address .pnp-acc-card__icon{-webkit-mask-image:var(--pnp-ic-address);mask-image:var(--pnp-ic-address);}
.woocommerce-account .pnp-acc-card--payment-methods .pnp-acc-card__icon{-webkit-mask-image:var(--pnp-ic-payment);mask-image:var(--pnp-ic-payment);}
.woocommerce-account .pnp-acc-card--edit-account .pnp-acc-card__icon{-webkit-mask-image:var(--pnp-ic-account);mask-image:var(--pnp-ic-account);}
.woocommerce-account .pnp-acc-card--downloads .pnp-acc-card__icon{-webkit-mask-image:var(--pnp-ic-downloads);mask-image:var(--pnp-ic-downloads);}
.woocommerce-account .pnp-acc-card__label{
  font-family:var(--pnp-display);
  font-weight:600;
  font-size:1.12rem;
  line-height:1.2;
}
.woocommerce-account .pnp-acc-card__desc{
  grid-column:2;
  font-size:.85rem;
  color:color-mix(in srgb, var(--pnp-ink) 62%, #fff);
}

/* =========================================================================
   5. ORDERS TABLE
      table.woocommerce-orders-table.woocommerce-MyAccount-orders
      rows carry .woocommerce-orders-table__row--status-{status}
      -> per-status coloring is CSS-only. See the OPTIONAL status-pill hook
         in INTEGRATION.md to upgrade the plain status text into a boxed chip.
   ========================================================================= */
.woocommerce-account .woocommerce-orders-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:0;
  font-size:.95rem;
}
.woocommerce-account .woocommerce-orders-table thead th{
  font-family:var(--pnp-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--pnp-ink) 55%, #fff);
  text-align:left;
  padding:.4rem .8rem .8rem;
  border-bottom:1px solid var(--pnp-acc-line-strong);
}
.woocommerce-account .woocommerce-orders-table tbody td{
  padding:1rem .8rem;
  border-bottom:1px solid var(--pnp-acc-line);
  vertical-align:middle;
}
.woocommerce-account .woocommerce-orders-table tbody tr:last-child td{
  border-bottom:0;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a{
  font-weight:700;
  color:var(--pnp-bronze);
  text-decoration:none;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover{
  color:var(--pnp-bronze-dark);
  text-decoration:underline;
}
.woocommerce-account .woocommerce-orders-table__cell-order-total{
  font-weight:600;
}
/* actions cell: keep buttons compact + right aligned on desktop */
.woocommerce-account .woocommerce-orders-table__cell-order-actions{
  white-space:nowrap;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button{
  margin:.15rem .15rem .15rem 0;
}

/* status: CSS-only per-status color on the plain text (no template change) */
.woocommerce-account .woocommerce-orders-table__cell-order-status{
  font-weight:700;
  letter-spacing:.02em;
}
.woocommerce-account [class*="woocommerce-orders-table__row--status-completed"] .woocommerce-orders-table__cell-order-status{
  color:var(--pnp-bronze);
}
.woocommerce-account [class*="woocommerce-orders-table__row--status-processing"] .woocommerce-orders-table__cell-order-status,
.woocommerce-account [class*="woocommerce-orders-table__row--status-on-hold"] .woocommerce-orders-table__cell-order-status,
.woocommerce-account [class*="woocommerce-orders-table__row--status-pending"] .woocommerce-orders-table__cell-order-status{
  color:color-mix(in srgb, var(--pnp-bronze) 82%, #fff);
}
.woocommerce-account [class*="woocommerce-orders-table__row--status-cancelled"] .woocommerce-orders-table__cell-order-status,
.woocommerce-account [class*="woocommerce-orders-table__row--status-failed"] .woocommerce-orders-table__cell-order-status,
.woocommerce-account [class*="woocommerce-orders-table__row--status-refunded"] .woocommerce-orders-table__cell-order-status{
  color:var(--pnp-coral);
}

/* status PILL: applies when the optional status-column hook wraps the status
   text in <span class="pnp-status pnp-status--{status}"> (see INTEGRATION.md).
   Palette-only: completed = solid bronze band (white text); in-progress =
   peach chip with bronze text; attention states = coral chip. */
.woocommerce-account .pnp-status{
  display:inline-block;
  padding:.28em .7em;
  border-radius:999px;
  font-family:var(--pnp-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.2;
  white-space:nowrap;
  background:var(--pnp-acc-tint);
  color:var(--pnp-bronze);
  border:1px solid var(--pnp-acc-line-strong);
}
.woocommerce-account .pnp-status--completed{
  background:var(--pnp-bronze);
  color:#fff;
  border-color:var(--pnp-bronze);
}
.woocommerce-account .pnp-status--cancelled,
.woocommerce-account .pnp-status--failed,
.woocommerce-account .pnp-status--refunded{
  background:color-mix(in srgb, var(--pnp-coral) 14%, #fff);
  color:var(--pnp-coral);
  border-color:color-mix(in srgb, var(--pnp-coral) 40%, #fff);
}

/* empty-orders state ("No order has been made yet.") + its Browse button */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message.woocommerce-Message--info,
.woocommerce-account .woocommerce-MyAccount-content .no_orders{
  text-align:left;
}

/* pagination on the orders list */
.woocommerce-account .woocommerce-pagination{
  margin-top:1.6rem;
}
.woocommerce-account .woocommerce-pagination .button,
.woocommerce-account .woocommerce-Pagination .button{
  margin-right:.4rem;
}

/* =========================================================================
   6. VIEW ORDER  (view-order.php: order status + details + customer details)
   ========================================================================= */
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-customer-details h2{
  font-family:var(--pnp-display);
  font-weight:600;
  margin:1.8rem 0 1rem;
}
/* the "Order #123 was placed on ... and is currently {status}." intro */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child,
.woocommerce-account .woocommerce-order p.order-info{
  font-size:1rem;
}
/* order overview strip (used on the order confirmation / some themes on view) */
.woocommerce-account .woocommerce-order-overview{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  margin:1.5rem 0;
  padding:0;
  border:1px solid var(--pnp-acc-line);
  border-radius:var(--pnp-acc-radius-sm);
  overflow:hidden;
  background:var(--pnp-acc-line);
}
.woocommerce-account .woocommerce-order-overview li{
  flex:1 1 120px;
  margin:0;
  padding:1rem 1.2rem;
  background:var(--pnp-acc-surface);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--pnp-ink) 55%, #fff);
  border:0;
}
.woocommerce-account .woocommerce-order-overview li strong{
  display:block;
  margin-top:.35rem;
  font-family:var(--pnp-display);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:normal;
  text-transform:none;
  color:var(--pnp-ink);
}

/* order + customer details tables */
.woocommerce-account .woocommerce-table--order-details,
.woocommerce-account .woocommerce-table--customer-details{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--pnp-acc-line);
  border-radius:var(--pnp-acc-radius-sm);
  overflow:hidden;
}
.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td,
.woocommerce-account .woocommerce-table--customer-details th,
.woocommerce-account .woocommerce-table--customer-details td{
  padding:.85rem 1rem;
  border-bottom:1px solid var(--pnp-acc-line);
  text-align:left;
}
.woocommerce-account .woocommerce-table--order-details tfoot th,
.woocommerce-account .woocommerce-table--order-details tfoot td{
  background:var(--pnp-acc-tint);
}
.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child td{
  font-family:var(--pnp-display);
  font-size:1.05rem;
  border-bottom:0;
}

/* graceful styling for a shipment-tracking plugin block, if present */
.woocommerce-account .wc-shipment-tracking-info,
.woocommerce-account .woocommerce-order .tracking{
  margin:1.2rem 0;
  padding:1rem 1.2rem;
  background:var(--pnp-acc-tint);
  border:1px solid var(--pnp-acc-line);
  border-radius:var(--pnp-acc-radius-sm);
}

/* =========================================================================
   7. ADDRESSES  (my-address.php)
      .woocommerce-Addresses.col2-set > .woocommerce-Address(.col-1/.col-2)
      header.woocommerce-Address-title.title > h3 + a.edit ; <address>
   ========================================================================= */
.woocommerce-account .woocommerce-Addresses{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem;
  margin-top:.4rem;
}
.woocommerce-account .woocommerce-Address{
  width:auto;
  float:none;
  background:var(--pnp-acc-surface);
  border:1px solid var(--pnp-acc-line);
  border-radius:var(--pnp-acc-radius-sm);
  padding:1.4rem 1.5rem 1.5rem;
}
.woocommerce-account .woocommerce-Address-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.8rem;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
  margin:0;
  font-family:var(--pnp-display);
  font-size:1.2rem;
  font-weight:600;
}
/* the "Edit" link as a small outline pill */
.woocommerce-account .woocommerce-Address-title .edit{
  flex:0 0 auto;
  padding:.4em 1em;
  border:1px solid var(--pnp-acc-line-strong);
  border-radius:999px;
  font-family:var(--pnp-body);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pnp-bronze);
  text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce-account .woocommerce-Address-title .edit:hover{
  background:var(--pnp-bronze);
  border-color:var(--pnp-bronze);
  color:#fff;
}
.woocommerce-account .woocommerce-Address address{
  font-style:normal;
  line-height:1.7;
  color:color-mix(in srgb, var(--pnp-ink) 82%, #fff);
}

/* =========================================================================
   8. FORMS  (form-edit-address.php, form-edit-account.php, and the
      login/register/lost-password forms). Inputs get an editorial peach-tinted
      field with a bronze focus ring. Two-up grid for name/address pairs.
   ========================================================================= */
.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-form-row{
  float:none;
  width:auto;
  margin:0 0 1.15rem;
  padding:0;
}
.woocommerce-account form label,
.woocommerce-account .woocommerce-form-row label{
  display:block;
  margin-bottom:.35rem;
  font-family:var(--pnp-body);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  color:color-mix(in srgb, var(--pnp-ink) 78%, #fff);
}
.woocommerce-account form label .required{
  color:var(--pnp-coral);
  border:0;
}
/* the field controls */
.woocommerce-account .woocommerce-MyAccount-content input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account form.woocommerce-form-login input.input-text,
.woocommerce-account form.woocommerce-form-login input[type=password],
.woocommerce-account form.woocommerce-form-register input.input-text,
.woocommerce-account form.woocommerce-form-register input[type=password],
.woocommerce-account form.woocommerce-ResetPassword input.input-text{
  width:100%;
  box-sizing:border-box;
  padding:.72rem .9rem;
  font-family:var(--pnp-body);
  font-size:1rem;
  color:var(--pnp-ink);
  background:color-mix(in srgb, var(--pnp-peach) 45%, #fff);
  border:1px solid var(--pnp-acc-line-strong);
  border-radius:var(--pnp-acc-radius-sm);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-content input:not([type=checkbox]):not([type=radio]):focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account form.woocommerce-form-login input:focus,
.woocommerce-account form.woocommerce-form-register input:focus,
.woocommerce-account form.woocommerce-ResetPassword input:focus{
  outline:none;
  background:var(--pnp-acc-surface);
  border-color:var(--pnp-bronze);
  box-shadow:var(--pnp-acc-ring);
}
.woocommerce-account form .form-row em,
.woocommerce-account form .form-row .description,
.woocommerce-account .woocommerce-EditAccountForm fieldset legend + span{
  font-size:.82rem;
  color:color-mix(in srgb, var(--pnp-ink) 55%, #fff);
}

/* edit-address: two-up grid for first/last, wide rows span both columns */
@media (min-width:600px){
  .woocommerce-account .woocommerce-address-fields__field-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:1.25rem;
    align-items:start;
  }
  .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide,
  .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row.notes{
    grid-column:1 / -1;
  }
  .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-first{grid-column:1;}
  .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-last{grid-column:2;}
}

/* edit-account: name pair side by side, everything else full width */
@media (min-width:600px){
  .woocommerce-account .woocommerce-EditAccountForm{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:1.25rem;
    align-items:start;
  }
  .woocommerce-account .woocommerce-EditAccountForm > p,
  .woocommerce-account .woocommerce-EditAccountForm > fieldset{
    grid-column:1 / -1;
  }
  .woocommerce-account .woocommerce-EditAccountForm > p.woocommerce-form-row--first{grid-column:1;}
  .woocommerce-account .woocommerce-EditAccountForm > p.woocommerce-form-row--last{grid-column:2;}
}
.woocommerce-account .woocommerce-EditAccountForm fieldset{
  grid-column:1 / -1;
  margin:.6rem 0 1.2rem;
  padding:1.4rem 1.5rem;
  border:1px solid var(--pnp-acc-line);
  border-radius:var(--pnp-acc-radius-sm);
  background:var(--pnp-acc-tint);
}
.woocommerce-account .woocommerce-EditAccountForm fieldset legend{
  font-family:var(--pnp-display);
  font-size:1.05rem;
  font-weight:600;
  padding:0 .4rem;
  margin-left:-.4rem;
}

/* remember-me + inline checkboxes read as normal-weight, aligned */
.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account label.woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:500;
  color:var(--pnp-ink);
}
.woocommerce-account .woocommerce-form-login__rememberme input,
.woocommerce-account label.woocommerce-form__label-for-checkbox input{
  width:auto;
  margin:0;
}

/* =========================================================================
   9. PAYMENT METHODS  (payment-methods.php)
      NOTE: styling only. No payment logic, gateways, or markup behavior is
      touched here.
   ========================================================================= */
.woocommerce-account .woocommerce-MyAccount-paymentMethods{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--pnp-acc-line);
  border-radius:var(--pnp-acc-radius-sm);
  overflow:hidden;
  margin-bottom:1.4rem;
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods th{
  font-family:var(--pnp-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--pnp-ink) 55%, #fff);
  text-align:left;
  padding:.9rem 1rem;
  background:var(--pnp-acc-tint);
  border-bottom:1px solid var(--pnp-acc-line);
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods td{
  padding:.9rem 1rem;
  border-bottom:1px solid var(--pnp-acc-line);
  vertical-align:middle;
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods tr:last-child td{
  border-bottom:0;
}
.woocommerce-account .payment-method-actions .button{
  margin:.1rem .3rem .1rem 0;
}
/* the default saved-card badge sometimes rendered by gateways */
.woocommerce-account .woocommerce-MyAccount-paymentMethods .payment-method--default,
.woocommerce-account .woocommerce-MyAccount-paymentMethods .default{
  color:var(--pnp-bronze);
  font-weight:700;
}

/* =========================================================================
   10. LOGIN / REGISTER / LOST PASSWORD  (form-login.php, lost-password.php)
       #customer_login.col2-set holds both forms when registration is enabled.
       Each form becomes a centered auth card. Standalone login (registration
       disabled) is centered on its own.
   ========================================================================= */
.woocommerce-account #customer_login.col2-set{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  max-width:940px;
  margin:1rem auto 2rem;
  align-items:start;
}
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2{
  float:none;
  width:auto;
  margin:0;
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword{
  background:var(--pnp-acc-surface);
  border:1px solid var(--pnp-acc-line);
  border-radius:var(--pnp-acc-radius);
  box-shadow:var(--pnp-acc-shadow);
  padding:2rem 2rem 2.1rem;
}
/* standalone (registration disabled, or the lost-password page) */
.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account .woocommerce > .woocommerce-ResetPassword{
  max-width:460px;
  margin-inline:auto;
}
/* the h2 headings that sit above each auth form */
.woocommerce-account #customer_login h2,
.woocommerce-account .woocommerce > h2{
  font-family:var(--pnp-display);
  font-weight:600;
  font-size:1.5rem;
  text-align:center;
  margin:0 0 .4rem;
}
.woocommerce-account #customer_login .col-1 > h2,
.woocommerce-account #customer_login .col-2 > h2{
  text-align:left;
}
.woocommerce-account .woocommerce-form-login .lost_password,
.woocommerce-account .woocommerce-LostPassword{
  margin-top:.8rem;
  font-size:.9rem;
}
.woocommerce-account .woocommerce-form-login .lost_password a{
  color:var(--pnp-bronze);
}
/* the full-width submit button inside auth cards (colors inherit global bronze) */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-ResetPassword .button{
  width:100%;
  margin-top:.4rem;
}
.woocommerce-account .woocommerce-privacy-policy-text{
  font-size:.82rem;
  color:color-mix(in srgb, var(--pnp-ink) 60%, #fff);
}
.woocommerce-account .woocommerce-privacy-policy-text p{margin:.6rem 0 0;}

/* =========================================================================
   11. NOTICES  (scoped to account so cart / block checkout are untouched)
   ========================================================================= */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-Message{
  font-family:var(--pnp-body);
  background:var(--pnp-acc-tint);
  border-radius:var(--pnp-acc-radius-sm);
  border:1px solid var(--pnp-acc-line);
  border-left:3px solid var(--pnp-bronze);
  color:var(--pnp-ink);
  padding:1rem 1.2rem;
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before{
  color:var(--pnp-bronze);
}
.woocommerce-account .woocommerce-error{
  border-left-color:var(--pnp-coral);
  background:color-mix(in srgb, var(--pnp-coral) 8%, #fff);
}
.woocommerce-account .woocommerce-error::before{
  color:var(--pnp-coral);
}

/* =========================================================================
   12. RESPONSIVE
       Below 769px the sidebar stacks above the content. Below 768px
       WooCommerce's own shop_table_responsive collapses the orders and
       payment tables into stacked rows with data-title labels; we leave that
       intact and only soften spacing.
   ========================================================================= */
@media (max-width:768px){
  .woocommerce-account .woocommerce-MyAccount-navigation{
    position:static;
    margin-bottom:1.4rem;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    display:flex;
    flex-wrap:wrap;
    gap:.3rem;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li{
    flex:1 1 auto;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout{
    flex-basis:100%;
    border-top:1px solid var(--pnp-acc-line);
    margin-top:.35rem;
  }
  .woocommerce-account .woocommerce-MyAccount-content{
    padding:1.4rem 1.25rem 1.6rem;
  }
  .woocommerce-account .pnp-acc-cards,
  .woocommerce-account .woocommerce-Addresses{
    grid-template-columns:1fr;
  }
  .woocommerce-account #customer_login.col2-set{
    grid-template-columns:1fr;
  }
  .woocommerce-account .pnp-acc-hello__title{
    font-size:1.7rem;
  }
  /* keep WooCommerce's stacked responsive tables tidy inside our cards */
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive tr,
  .woocommerce-account .woocommerce-MyAccount-paymentMethods.shop_table_responsive tr{
    border:1px solid var(--pnp-acc-line);
    border-radius:var(--pnp-acc-radius-sm);
    margin-bottom:1rem;
    display:block;
    padding:.3rem .2rem;
  }
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive td,
  .woocommerce-account .woocommerce-MyAccount-paymentMethods.shop_table_responsive td{
    border-bottom:1px solid var(--pnp-acc-line);
  }
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive td:last-child{
    border-bottom:0;
  }
}