/* ==========================================================================
   WOOCOMMERCE — "The Ledger" reskin
   Only enqueued on shop/product/cart/checkout/account pages (see
   websavers_enqueue_assets in functions.php). Restyles WooCommerce's own
   semantic markup with the site's existing tokens rather than forking
   template files — same fonts, colors, radius, and the "statement" ledger
   motif reused for cart totals / order review, since that's literally an
   itemised list of charges already.
   ========================================================================== */

.woocommerce-wrap{ padding:44px 34px 80px; }
@media (max-width:640px){ .woocommerce-wrap{ padding:34px 20px 60px; } }

/* ---- Notices --------------------------------------------------------- */
/* wc_print_notice() outputs either "<text> <a>Button</a>" (Browse products)
   or "<a>Button</a> <text>" (Confirm email address) depending on the notice
   — button-then-text order matters with flex-wrap:wrap: once the button plus
   the (often long) sentence after it can't both fit on one line, wrap drops
   the whole text onto its own full-width second line with the button stranded
   alone above it, instead of the two staying on one row. Flex is still the
   right base (the bare text becomes an anonymous flex item keeping the
   container's own left padding regardless of button position/order), but the
   row itself must stay nowrap — the anonymous text item still wraps its own
   sentence internally once it's forced to shrink next to the fixed-width
   button, it just doesn't drop to a whole separate line. */
.woocommerce-message, .woocommerce-error, .woocommerce-info,
.woocommerce-noreviews, p.no-comments{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:12px;
  font-family:var(--font-body); font-size:14px; padding:14px 16px; border-radius:var(--radius-sm);
  margin:0 0 var(--space-lg); list-style:none;
}
.woocommerce-message{ background:#e5f6ec; color:#1a7a42; border:1px solid #b7e3c6; }
.woocommerce-error{ background:#fdecea; color:#b3261e; border:1px solid #f3c2bd; }
.woocommerce-info{ background:var(--color-statement-bg); color:var(--color-ink); border:1px solid var(--color-line); }
/* WooCommerce core reserves padding-left:3.5em on these notices for an
   icon-font glyph (::before, position:absolute, "font-family: WooCommerce")
   — our padding above is much tighter, so that glyph was rendering directly
   on top of the first couple of characters (e.g. "Have a coupon?"). Nothing
   else on the site uses icon-font glyphs in body text, so disable it outright
   rather than reverse-engineer padding to match an icon font's exact metrics. */
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before{ content:none; }
.woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button{
  font-family:var(--font-body); font-weight:600; font-size:13px; background:var(--color-ink); color:#fff;
  padding:8px 14px; border-radius:var(--radius-sm); text-decoration:none; flex-shrink:0;
  /* Some notices print "<a>Button</a> text" (e.g. Confirm email address),
     others print "text <a>Button</a>" (e.g. Browse products) — flex `order`
     pins the button to the end of the row regardless of that source order,
     so it's always on the right. */
  order:2;
}
@media (max-width:480px){
  .woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews, p.no-comments{
    flex-wrap:wrap;
  }
}

/* ---- Breadcrumbs ------------------------------------------------------ */
.woocommerce-breadcrumb{
  font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-muted); margin-bottom:26px;
}
.woocommerce-breadcrumb a{ color:var(--color-muted); }
.woocommerce-breadcrumb a:hover{ color:var(--color-ink); }

/* ---- Buttons (shared across shop/cart/checkout/account) --------------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-cart .checkout-button,
.woocommerce-page .button, #place_order{
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  background:var(--color-accent); color:#fff; padding:13px 22px; border:none;
  border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; display:inline-block;
  transition:background .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
#place_order:hover{ background:var(--color-accent-dark); color:#fff; }
.woocommerce a.button.alt, #place_order{ background:var(--color-ink); }
.woocommerce a.button.alt:hover, #place_order:hover{ background:var(--color-accent); }
.woocommerce a.added_to_cart{ font-size:12.5px; font-weight:600; color:var(--color-accent); margin-left:10px; }

/* ---- Price everywhere — mono/tabular, the site's signature number treatment */
.woocommerce .price, .woocommerce-Price-amount{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--color-accent); font-weight:600;
}
.woocommerce del .woocommerce-Price-amount{ color:var(--color-muted); font-weight:400; opacity:.7; }
.woocommerce ins{ text-decoration:none; }
/* WooCommerce's own stylesheet sets an olive `color` on these two exact selectors, wrapped
   in `:where(body:not(...))` — :where() contributes zero specificity, but the rest of each
   selector still outweighs the generic rule above, so it wins on source order alone being
   equal isn't even reached. Matching the same selectors here (loaded after WC's own CSS)
   overrides them without needing !important. */
.woocommerce ul.products li.product .price{ color:var(--color-accent); }
.woocommerce ul.products li.product .price .from{ color:var(--color-muted); }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--color-accent); }

/* ==========================================================================
   SHOP / ARCHIVE — product grid
   ========================================================================== */
.woocommerce-result-count, .woocommerce-ordering{
  font-family:var(--font-mono); font-size:12px; color:var(--color-muted); margin-bottom:20px;
}
.woocommerce-ordering select{
  font-family:var(--font-body); font-size:13px; padding:8px 10px; border:1px solid var(--color-line);
  border-radius:var(--radius-sm); background:var(--color-card); color:var(--color-ink);
}
ul.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; list-style:none; margin:0; padding:0; }
@media (max-width:900px){ ul.products{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ ul.products{ grid-template-columns:1fr; } }
ul.products li.product{
  background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius-md);
  padding:20px; position:relative; transition:border-color .15s ease, transform .15s ease;
}
ul.products li.product:hover{ border-color:var(--color-accent); transform:translateY(-2px); }
ul.products li.product a{ text-decoration:none; color:inherit; display:block; }
ul.products li.product img{ border-radius:var(--radius-sm); margin-bottom:14px; }
/* None of our products have real photos yet — WooCommerce's generic grey
   placeholder icon reads as an unfinished page, not "no image needed", and
   doesn't match the flat text-first card style used everywhere else on the
   site (.pf-card, .svc-card). Hide it; a real product photo added later
   will display normally since this only targets the placeholder file. */
ul.products li.product img[src*="woocommerce-placeholder"],
div.product img[src*="woocommerce-placeholder"],
img.woocommerce-placeholder{ display:none !important; }
ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display); font-weight:500; font-size:17px; color:var(--color-ink); margin:0 0 6px;
}
ul.products li.product .price{ font-size:14px; display:block; margin-bottom:12px; }
ul.products li.product .button{
  font-size:13px; padding:9px 16px; width:100%; text-align:center; box-sizing:border-box;
}
ul.products li.product .onsale{
  position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.05em; background:var(--color-warm); color:#fff;
  padding:4px 9px; border-radius:var(--radius-pill); min-height:0; min-width:0; line-height:1.4;
}
.woocommerce-pagination{ margin-top:30px; }
.woocommerce-pagination ul.page-numbers{
  display:flex; gap:8px; list-style:none; padding:0; font-family:var(--font-mono); font-size:13px;
}
.woocommerce-pagination a, .woocommerce-pagination span{
  display:block; padding:8px 13px; border:1px solid var(--color-line); border-radius:var(--radius-sm); color:var(--color-ink);
}
.woocommerce-pagination .current{ background:var(--color-ink); color:#fff; border-color:var(--color-ink); }

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
.woocommerce div.product{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:flex-start; }
@media (max-width:820px){ .woocommerce div.product{ grid-template-columns:1fr; } }
.woocommerce div.product .woocommerce-product-gallery{ max-width:100%; }
.woocommerce div.product .woocommerce-product-gallery img{ border-radius:var(--radius-lg); }
/* No real product photo yet (placeholder hidden above) — collapse to a single
   column instead of leaving an empty gallery-shaped gap beside the summary. */
.woocommerce div.product:has(.woocommerce-product-gallery img[src*="woocommerce-placeholder"]){ grid-template-columns:1fr; }
.woocommerce div.product:has(.woocommerce-product-gallery img[src*="woocommerce-placeholder"]) .woocommerce-product-gallery{ display:none !important; }
.woocommerce div.product .product_title{ font-size:clamp(26px,3.4vw,38px); margin-bottom:10px; }
.woocommerce div.product p.price{ font-size:22px; margin-bottom:16px; display:block; }
.woocommerce div.product .woocommerce-product-details__short-description{ color:var(--color-muted); margin-bottom:20px; }
.woocommerce div.product .stock{
  font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-muted); display:inline-block; margin-bottom:14px;
}
.woocommerce div.product .stock.in-stock{ color:#1a7a42; }
.woocommerce div.product .stock.out-of-stock{ color:#b3261e; }

/* Variations table (TLD / hosting plan selectors) */
.woocommerce div.product table.variations{ width:100%; margin-bottom:18px; }
.woocommerce div.product table.variations td{ padding:6px 0; vertical-align:middle; }
.woocommerce div.product table.variations label{ font-size:13px; font-weight:600; color:var(--color-ink); }
.woocommerce div.product table.variations select{
  width:100%; border:1.5px solid var(--color-line); border-radius:var(--radius-sm); padding:11px 12px;
  font-family:var(--font-body); font-size:14.5px; color:var(--color-ink); background:var(--color-card);
}
.woocommerce div.product table.variations select:focus{ outline:2px solid var(--color-accent); outline-offset:1px; border-color:var(--color-accent); }
.woocommerce div.product .reset_variations{ font-size:12px; color:var(--color-muted); margin-left:10px; }
.woocommerce div.product .woocommerce-variation-price .price{ font-size:19px; }
.woocommerce div.product .woocommerce-variation-add-to-cart{ margin-top:10px; }

/* Quantity input + add to cart row */
.woocommerce div.product form.cart{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.woocommerce div.product .quantity{ margin:0; }
.woocommerce div.product .quantity .qty{
  width:64px; border:1.5px solid var(--color-line); border-radius:var(--radius-sm); padding:11px 10px;
  font-family:var(--font-mono); font-size:14.5px; color:var(--color-ink); text-align:center;
}

/* Meta line (SKU / category) */
.woocommerce div.product .product_meta{
  font-family:var(--font-mono); font-size:11.5px; color:var(--color-muted); margin-top:22px;
  padding-top:16px; border-top:1px solid var(--color-line);
}
.woocommerce div.product .product_meta a{ color:var(--color-muted); }

/* Tabs (Description / Additional information / Reviews) */
.woocommerce-tabs ul.tabs{
  list-style:none; display:flex; gap:24px; padding:0; margin:40px 0 0; border-bottom:1px solid var(--color-line);
}
.woocommerce-tabs ul.tabs li{ margin:0; }
.woocommerce-tabs ul.tabs li a{
  display:inline-block; padding:12px 0; font-size:14px; font-weight:500; color:var(--color-muted); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.woocommerce-tabs ul.tabs li.active a{ color:var(--color-ink); border-bottom-color:var(--color-accent); }
.woocommerce-tabs .panel{ padding:26px 0; color:var(--color-muted); max-width:74ch; }
.woocommerce-tabs .panel h2{ font-size:22px; }

/* Related products */
.related.products{ margin-top:56px; padding-top:40px; border-top:1px solid var(--color-line); }
.related.products > h2{ margin-bottom:20px; }

/* ==========================================================================
   CART — totals styled as the site's "statement" ledger component
   ========================================================================== */
.woocommerce-cart-form table.shop_table{ width:100%; border-collapse:collapse; margin-bottom:30px; }
.woocommerce-cart-form table.shop_table th{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-muted); text-align:left; padding:0 12px 12px 0; border-bottom:1px solid var(--color-line);
}
.woocommerce-cart-form table.shop_table td{ padding:16px 12px 16px 0; border-bottom:1px solid var(--color-line); vertical-align:middle; }
/* WooCommerce's own JS adds .shop_table_responsive and stacks each <td> into a
   full-width block on narrow containers — the desktop padding above assumes
   cells sit side-by-side (padding-left:0, relying on the row's own left inset),
   which leaves stacked text flush against the card's left edge once each cell
   becomes its own full-width row. Restore matching left padding there. */
.woocommerce-cart-form table.shop_table_responsive td{ padding-left:12px; }
.woocommerce-cart-form .product-name a{ color:var(--color-ink); font-weight:500; }
.woocommerce-cart-form .product-name dl.variation{ font-size:12.5px; color:var(--color-muted); margin-top:4px; }
.woocommerce-cart-form .product-remove a{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; color:var(--color-muted); text-decoration:none; font-size:18px;
}
.woocommerce-cart-form .product-remove a:hover{ background:#fdecea; color:#b3261e; }
.woocommerce-cart-form .product-quantity .qty{
  width:60px; border:1.5px solid var(--color-line); border-radius:var(--radius-sm); padding:9px 8px;
  font-family:var(--font-mono); text-align:center;
}
.woocommerce-cart-form .coupon{ display:flex; gap:10px; align-items:center; }
.woocommerce-cart-form .coupon input#coupon_code{
  border:1.5px solid var(--color-line); border-radius:var(--radius-sm); padding:11px 12px; font-size:14px;
}

.cart-collaterals{ display:flex; justify-content:flex-end; }
.cart_totals{
  width:100%; max-width:400px; background:var(--color-card); border:1px solid var(--color-line);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card);
}
.cart_totals h2{
  font-family:var(--font-body); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--color-muted); padding:16px 20px; margin:0; border-bottom:1px dashed var(--color-line);
}
.cart_totals table{ width:100%; border-collapse:collapse; }
.cart_totals table tr:not(:last-child) th, .cart_totals table tr:not(:last-child) td{ border-bottom:1px solid var(--color-line); }
.cart_totals table th, .cart_totals table td{ padding:13px 20px; font-size:13.5px; text-align:left; }
.cart_totals table th{ font-weight:400; color:var(--color-muted); }
.cart_totals table td{ text-align:right; }
.cart_totals table tr.order-total{ background:var(--color-statement-bg); }
.cart_totals table tr.order-total th, .cart_totals table tr.order-total td{ border-bottom:none; }
.cart_totals table tr.order-total th{ font-weight:600; color:var(--color-ink); }
.cart_totals table tr.order-total .woocommerce-Price-amount{ font-size:16px; }
.cart_totals .checkout-button{ display:block; text-align:center; }
/* WooCommerce core's `.woocommerce a.button{ margin:0 }` outspecifies the
   line above (2 classes + a type selector beats our 2 classes), stripping
   the button's left/right margin so it sits flush against the card edges
   while the rows above keep their own padding. Match that specificity here
   instead of guessing at !important. */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .cart_totals .wc-proceed-to-checkout a.checkout-button{
  margin:16px 20px 20px;
}
.woocommerce-shipping-calculator .shipping-calculator-form{ padding:16px 20px 4px; }
.woocommerce-shipping-calculator select, .woocommerce-shipping-calculator input{
  width:100%; margin-bottom:10px; border:1.5px solid var(--color-line); border-radius:var(--radius-sm); padding:9px 10px;
}

/* ==========================================================================
   CHECKOUT — same ledger treatment for order review; form fields match
   the site's existing .form-input pattern from the contact page
   ========================================================================== */
/* form.checkout has 3 direct children: .col2-set (billing/shipping fields),
   an <h3 id="order_review_heading"> ("Your order"), and
   .woocommerce-checkout-review-order (the order summary table) — .col2-set
   and the review block are SIBLINGS, not nested inside a shared wrapper, so
   the 2-column layout has to apply to the form itself. Grid auto-placement
   alone isn't enough here: the visible "Your order" <h3> sits between them
   as its own child, so without explicit placement it consumes column 2 of
   row 1 and pushes the actual review table down to row 2 (same X position
   as .col2-set, i.e. still stacked, not side-by-side) — each child needs an
   explicit column/row. */
.woocommerce-checkout form.checkout{ display:grid; grid-template-columns:1.1fr .9fr; gap:0 44px; align-items:start; }
.woocommerce-checkout form.checkout > .col2-set{ grid-column:1; grid-row:1 / span 2; }
.woocommerce-checkout form.checkout > h3{ grid-column:2; grid-row:1; margin-top:0; }
.woocommerce-checkout form.checkout > .woocommerce-checkout-review-order{ grid-column:2; grid-row:2; }
@media (max-width:900px){
  .woocommerce-checkout form.checkout{ grid-template-columns:1fr; }
  .woocommerce-checkout form.checkout > .col2-set,
  .woocommerce-checkout form.checkout > h3,
  .woocommerce-checkout form.checkout > .woocommerce-checkout-review-order{ grid-column:1; }
  .woocommerce-checkout form.checkout > .col2-set{ grid-row:1; }
  .woocommerce-checkout form.checkout > h3{ grid-row:2; }
  .woocommerce-checkout form.checkout > .woocommerce-checkout-review-order{ grid-row:3; }
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{ width:100%; float:none; }
.woocommerce-checkout h3{ font-size:20px; margin-top:0; }
.woocommerce-checkout .form-row{ margin-bottom:16px; }
.woocommerce-checkout .form-row label{ display:block; font-size:13px; font-weight:600; color:var(--color-ink); margin-bottom:6px; }
.woocommerce-checkout .form-row .required{ color:var(--color-accent); text-decoration:none; }
.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea{
  width:100%; border:1.5px solid var(--color-line); border-radius:var(--radius-sm); padding:12px 14px;
  font-family:var(--font-body); font-size:15px; color:var(--color-ink); background:var(--color-card); box-sizing:border-box;
}
.woocommerce-checkout input.input-text:focus, .woocommerce-checkout select:focus, .woocommerce-checkout textarea:focus{
  outline:2px solid var(--color-accent); outline-offset:1px; border-color:var(--color-accent);
}
/* Browsers apply a default reddish border to empty required fields via :invalid —
   this shows before the visitor has even touched the form, which reads as a design
   bug rather than validation. Keep the neutral border until they actually interact. */
.woocommerce-checkout input.input-text:invalid, .woocommerce-checkout select:invalid{
  border-color:var(--color-line); box-shadow:none;
}
.woocommerce-checkout .woocommerce-additional-fields{ margin-top:10px; }

#order_review{
  background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-card);
}
#order_review table.shop_table{ width:100%; border-collapse:collapse; }
#order_review table.shop_table thead th{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-muted); text-align:left; padding:16px 20px; border-bottom:1px dashed var(--color-line);
}
#order_review table.shop_table td, #order_review table.shop_table td.product-total{ text-align:right; }
#order_review table.shop_table tbody td, #order_review table.shop_table tbody th,
#order_review table.shop_table tfoot td, #order_review table.shop_table tfoot th{
  padding:13px 20px; font-size:13.5px; border-bottom:1px solid var(--color-line); text-align:left;
}
#order_review table.shop_table tbody th{ font-weight:400; }
#order_review table.shop_table tfoot tr.order-total{ background:var(--color-statement-bg); }
#order_review table.shop_table tfoot tr.order-total th, #order_review table.shop_table tfoot tr.order-total td{ border-bottom:none; font-weight:600; }

#payment{ background:var(--color-card); border:1px solid var(--color-line); border-top:none; }
#payment ul.payment_methods{ list-style:none; padding:16px 20px; margin:0; border-bottom:1px solid var(--color-line); }
#payment ul.payment_methods li{ padding:8px 0; font-size:14px; }
#payment ul.payment_methods li label{ margin-left:8px; font-weight:500; }
#payment .payment_box{
  background:var(--color-statement-bg); padding:14px 16px; margin:10px 0 4px; border-radius:var(--radius-sm); font-size:13px; color:var(--color-muted);
}
#payment #place_order{ width:100%; margin:16px 20px 20px; box-sizing:border-box; }

/* ==========================================================================
   MY ACCOUNT
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content{ max-width:74ch; }

/* Dashboard quick-link cards — see websavers_account_dashboard_quick_links()
   in functions.php. Replaces WooCommerce's default single paragraph of
   inline links (Orders / Addresses / Account details) with the same
   card treatment used elsewhere on the site (.svc-card, .hosting-plan-card). */
.account-dashboard-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:28px 0 8px; }
@media (max-width:640px){ .account-dashboard-links{ grid-template-columns:1fr; } }
.account-dashboard-card{
  display:block; background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius-md);
  padding:20px; text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease;
}
.account-dashboard-card:hover{ border-color:var(--color-accent); transform:translateY(-2px); }
.account-dashboard-card h3{ font-size:16px; margin-bottom:6px; }
.account-dashboard-card p{ font-size:13px; color:var(--color-muted); margin-bottom:12px; }
.account-dashboard-card-link{ font-size:12.5px; font-weight:600; color:var(--color-accent); }

.woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; margin:0 0 40px; display:flex; flex-direction:column; gap:8px; max-width:220px; }
.woocommerce-MyAccount-navigation li{
  border:1px solid var(--color-line); border-radius:var(--radius-pill); background:var(--color-card);
}
.woocommerce-MyAccount-navigation li a{
  display:block; padding:9px 18px; font-size:13.5px; font-weight:500; color:var(--color-muted); text-decoration:none; text-align:center;
}
.woocommerce-MyAccount-navigation li.is-active{ background:var(--color-ink); border-color:var(--color-ink); }
.woocommerce-MyAccount-navigation li.is-active a{ color:#fff; }

.woocommerce-orders-table, .shop_table.order_details{ width:100%; border-collapse:collapse; margin-bottom:20px; }
.woocommerce-orders-table th, .shop_table.order_details th{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-muted); text-align:left; padding:0 12px 12px 0; border-bottom:1px solid var(--color-line);
}
.woocommerce-orders-table td, .shop_table.order_details td{ padding:14px 12px 14px 0; border-bottom:1px solid var(--color-line); font-size:13.5px; }
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; }

.woocommerce-form-login, .woocommerce-form-register, .woocommerce-EditAccountForm, .woocommerce-address-fields{ max-width:420px; }
.woocommerce-form-login .form-row label, .woocommerce-form-register .form-row label,
.woocommerce-EditAccountForm .form-row label, .woocommerce-address-fields .form-row label{
  display:block; font-size:13px; font-weight:600; color:var(--color-ink); margin-bottom:6px;
}
.woocommerce-form-login input.input-text, .woocommerce-form-register input.input-text,
.woocommerce-EditAccountForm input.input-text, .woocommerce-address-fields input.input-text,
.woocommerce-address-fields select{
  width:100%; border:1.5px solid var(--color-line); border-radius:var(--radius-sm); padding:12px 14px;
  font-family:var(--font-body); font-size:15px; color:var(--color-ink); background:var(--color-card); box-sizing:border-box;
  margin-bottom:14px;
}
.woocommerce-form-login .woocommerce-form-login__rememberme{ font-size:13px; color:var(--color-muted); }
.woocommerce-form-login .lost_password, .woocommerce-form-register .u-column2{ font-size:13px; margin-top:14px; }

/* ---- Edit Account / Edit Address — card wrapper + two-column form rows -
   Both templates output the same WC "form-row-first/-last/-wide" field
   classes as checkout's billing fields, but with no container of their own
   applying any card styling, so they were rendering as a bare list of inputs
   floating in the page instead of a bounded block. edit-address.php also
   prints its "Billing/Shipping address" <h2> as a sibling BEFORE the
   .woocommerce-address-fields div (not inside it), so that heading is styled
   via the body class WooCommerce adds rather than the div itself. */
.woocommerce-EditAccountForm, .woocommerce-address-fields{
  background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:32px; box-sizing:border-box; max-width:560px;
}
body.woocommerce-edit-address h2{ font-family:var(--font-body); font-weight:600; font-size:20px; margin:0 0 18px; }

/* WooCommerce core's `.woocommerce form .form-row-first{ float:left }` (2
   classes + the `form` type selector) outspecifies a plain 2-class override,
   same issue as the checkout-button margin fix above — scope with the
   body class WooCommerce already adds to every My Account page to win. */
body.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
body.woocommerce-account .woocommerce-address-fields .form-row-first{ float:left; width:47%; clear:none; }
body.woocommerce-account .woocommerce-EditAccountForm .form-row-last,
body.woocommerce-account .woocommerce-address-fields .form-row-last{ float:right; width:47%; clear:none; }
body.woocommerce-account .woocommerce-EditAccountForm .form-row-wide,
body.woocommerce-account .woocommerce-address-fields .form-row-wide{ clear:both; width:100%; }
body.woocommerce-account .woocommerce-EditAccountForm .clear,
body.woocommerce-account .woocommerce-address-fields .clear{ clear:both; display:block; }

.woocommerce-EditAccountForm span[id$="_description"]{
  display:block; font-size:12px; color:var(--color-muted); margin:4px 0 14px; line-height:1.4;
}
.woocommerce-EditAccountForm fieldset{
  border:1px solid var(--color-line); border-radius:var(--radius-md); padding:22px 20px 4px; margin:10px 0 22px;
}
.woocommerce-EditAccountForm fieldset legend{
  font-family:var(--font-body); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-muted); padding:0 8px; margin-left:-8px;
}
@media (max-width:640px){
  .woocommerce-EditAccountForm, .woocommerce-address-fields{ padding:22px; }
  body.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
  body.woocommerce-account .woocommerce-address-fields .form-row-first,
  body.woocommerce-account .woocommerce-EditAccountForm .form-row-last,
  body.woocommerce-account .woocommerce-address-fields .form-row-last{
    float:none; width:100%;
  }
}

/* ---- Address book (myaccount/my-address.php) — the Billing/Shipping
   overview cards on /my-account/edit-address/ itself (one level up from the
   actual edit forms styled above). WooCommerce's own markup here has no
   container styling at all — .woocommerce-Address was rendering as a bare
   heading + link + address text with no card, divider, or spacing. */
.woocommerce-Addresses{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin:28px 0 8px; }
.woocommerce-Address{
  background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:24px;
}
/* Core's `.col2-set .col-1/.col-2{ float:...; width:48% }` (2 classes) still
   applies its width to our grid item even though grid ignores the float —
   width isn't neutralised by switching display context, so it needs an
   explicit, equally-specific reset. */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address{ width:auto; float:none; }
/* Core's clearfix hack (`.col2-set::before/::after{ content:" "; display:table }`,
   meant for the old float layout) turns into two REAL grid items once this
   container is display:grid — a generated box with content isn't display:none,
   so it still gets placed in the grid, silently pushing Billing into column 2
   (the ::before eats column 1) and Shipping down into row 2 (the ::after eats
   the other column-2 slot). Has to be switched off outright. */
body.woocommerce-account .woocommerce-Addresses::before, body.woocommerce-account .woocommerce-Addresses::after{ display:none; content:none; }
.woocommerce-Address-title{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 14px; padding-bottom:14px; border-bottom:1px dashed var(--color-line);
}
.woocommerce-Address-title h2{ font-family:var(--font-body); font-weight:600; font-size:16px; margin:0; }
.woocommerce-Address-title a.edit{ font-size:12.5px; font-weight:600; color:var(--color-accent); text-decoration:none; flex-shrink:0; }
.woocommerce-Address-title a.edit:hover{ text-decoration:underline; }
/* WC prints "You have not set up this type of address yet." into the same
   <address> tag as a real formatted address (no distinguishing class), so
   this can't target the empty state alone — one calm, non-italic treatment
   for both. */
.woocommerce-Address address{ font-style:normal; font-size:14px; color:var(--color-ink); line-height:1.6; }
@media (max-width:640px){ .woocommerce-Addresses{ grid-template-columns:1fr; } }