/*
Additions for cart/checkout/account -- kidzncrew-new never had static pages
for these (see docs/PAGE-INVENTORY.md's "views with no static reference"
note), so there's no markup to port verbatim. Rather than reimplement
WooCommerce's cart-totals/checkout-fields/order-review logic by hand (real
tax/shipping/coupon/payment-gateway behaviour that's easy to get subtly
wrong), this restyles WooCommerce's own generated markup and class names
using the design system's existing tokens (colours, radius, shadow from
style.css's :root) -- kept in this separate file rather than edited into
the ported style.css, so that file stays a clean, verifiable copy of the
approved static site's stylesheet.
*/

/* Class-name collision: contact.html's own .form-row (style.css, name/email
   side by side) is display:grid;grid-template-columns:1fr 1fr -- and
   WooCommerce reuses the exact class name ".form-row" for every single
   billing/shipping/address field wrapper it renders (checkout, account
   edit-address, this shipping calculator). Inheriting that 2-column grid
   turns every one of those into two ~50%-width grid cells instead of a
   normal label-above-field block row, most visibly on the fields whose
   real content is a wide element (a Select2 country/state dropdown lands
   in one ~111px-wide cell instead of the field's full width) -- confirmed
   live, not a rounding artifact. contact.html's own usage never carries
   any of WooCommerce's own companion classes below, so this can be scoped
   precisely without touching style.css's ported rule or contact.html's
   intended 2-column layout at all.  */
.form-row.form-row-wide,.form-row.form-row-first,.form-row.form-row-last,.form-row.address-field,.form-row.validate-required,.form-row.woocommerce-validated,.form-row.woocommerce-invalid,.form-row.place-order{display:block}
/* .form-row.place-order (checkout/payment.php) is the same collision as
   above, one level further down: its own direct children (the terms-and-
   conditions/privacy-notice wrapper, then the #place_order button) landed
   in column 1/column 2 of the inherited 2-column grid -- the button sitting
   beside the payment description instead of on its own line below it. */
#place_order{margin-top:20px}

/* WooCommerce's own convention after a .form-row-first/-last pair (checkout
   billing name fields, account edit-address/edit-account, the lost-password
   form below) -- a bare <div class="clear"></div> with no rule of its own
   anywhere in this theme, so it never actually cleared anything. */
.clear{clear:both}

/* Lost/reset password, redesigned as a single shared panel with two
   columns inside it (see the woocommerce_before/after_lost_password_form
   and _reset_password_form hooks in inc/woocommerce-hooks.php that wrap
   the form, plus kidzncrew_render_account_featured_column() for the 2nd
   column) -- no static reference for this exists, kidzncrew-new never
   modeled it. Two independently-carded boxes side by side (the first cut
   of this) read as sloppy once their heights didn't match; one panel
   with an internal divider reads as one deliberate composition instead,
   regardless of how tall either side's content ends up being. */
.account-form-panel{width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.account-form-panel-col{padding:48px}
.account-form-panel-divider{align-self:stretch;width:1px;background:var(--line);margin:36px 0}
@media (max-width:820px){
	.account-form-panel{grid-template-columns:1fr}
	.account-form-panel-divider{display:none}
	.account-form-panel-col{padding:28px 28px 8px}
}
/* Both core forms reuse .form-row-first/-last: lost-password's single
   field carries -first alone with no -last to pair with (a real, correct
   48%-float-left rule for actual pairs -- checkout's First/Last name --
   applied to a field with no pair), and reset-password's two password
   fields ARE a real pair, but 48% each reads as cramped in a column this
   narrow. Both are simplest fixed the same way: full width in this panel. */
.account-form-panel-col .form-row-first,.account-form-panel-col .form-row-last{width:100%;float:none}
.account-form-panel-col button[type="submit"]{width:100%;margin-top:4px}
.account-form-card-footer{margin:18px 0 0;font-size:.88rem;font-weight:650;text-align:center}
.account-form-card-footer a{color:var(--pink)}

/* Compact horizontal product callout (thumbnail beside title/price/button,
   the same shape as the blog sidebar's .popular-post widget) -- not the
   full vertical shop-grid .product-card page-contact.php's own featured-
   product panel uses, which was too tall next to this form's much shorter
   content (see the comment above kidzncrew_render_account_featured_column
   for why). */
.featured-product-mini{display:flex;gap:16px;align-items:flex-start;margin-top:16px}
.featured-product-mini .thumb{width:88px;height:88px;border-radius:14px;flex:none;overflow:hidden;background:var(--cream-2)}
.featured-product-mini .thumb img{width:100%;height:100%;object-fit:cover}
.featured-product-mini h4{font-size:.95rem;margin:0 0 4px;line-height:1.3}
.featured-product-mini h4 a:hover{color:var(--pink)}
.featured-product-mini .product-price{font-size:.95rem;font-weight:800;color:var(--pink);margin:0 0 8px}
.featured-product-mini .btn-cart{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:.8rem;min-height:auto;border-radius:10px}
.featured-product-mini .btn-cart svg{width:13px;height:13px}

/* Form fields (checkout billing/shipping, account edit-address/edit-account).
   The static contact form only ever used placeholder-only .form-field
   inputs with no visible <label>; a real address form needs labels. */
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.form-row .required{color:var(--pink);text-decoration:none}
.form-row input:not([type="checkbox"]):not([type="radio"]),.form-row select,.form-row textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-family:inherit;font-size:.92rem;color:var(--ink);background:#fbfcfd;transition:border-color .2s ease}
.form-row input:not([type="checkbox"]):not([type="radio"]):focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--pink);background:#fff}
/* The rule above targets text-like inputs only; a checkbox (e.g. "Remember
   me") inside the same .form-row would otherwise inherit width:100%/padding/
   border-radius from it and render as a wide pink-bordered pill instead of a
   normal checkbox. */
.form-row input[type="checkbox"],.form-row input[type="radio"]{width:16px;height:16px;margin:0 6px 0 0;accent-color:var(--pink);vertical-align:middle}
.form-row-first,.form-row-last{width:48%;float:left}

/* Select2 (country/state dropdowns on the checkout/shipping-calculator/
   address forms): WooCommerce visually hides the real <select> the .form-
   row rule above targets and replaces it with this widget instead, so
   without rules aimed at Select2's own classes it rendered in Select2's
   bundled default theme -- a small grey-bordered 4px-radius box that
   doesn't match this design system's inputs at all (visibly inconsistent
   next to the plain text inputs on the same form, e.g. Town/City, which
   Select2 never touches). */
.form-row .select2-container{width:100%!important}
.form-row .select2-container .select2-selection--single{height:auto;min-height:48px;display:flex;align-items:center;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fbfcfd;transition:border-color .2s ease}
.form-row .select2-container .select2-selection--single .select2-selection__rendered{padding:0;line-height:normal;font-size:.92rem;color:var(--ink)}
.form-row .select2-container .select2-selection--single .select2-selection__placeholder{color:var(--muted)}
.form-row .select2-container .select2-selection--single .select2-selection__arrow{height:100%;top:0;right:12px;width:16px}
.form-row .select2-container--default.select2-container--open .select2-selection--single,
.form-row .select2-container--focus .select2-selection--single{border-color:var(--pink);background:#fff}
.select2-dropdown{border:1px solid var(--line);border-radius:12px;overflow:hidden;font-family:inherit;box-shadow:var(--shadow-sm)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:var(--pink);color:#fff}

/* WooCommerce's own JS wraps every password field in <span class="password-
   input"> and appends a .show-password-input toggle button -- unstyled,
   it rendered as an empty ~16x6px box (no icon, no size) since its icon
   comes from WooCommerce's own dequeued stylesheet. Same eye/eye-slash
   glyph WooCommerce ships, recoloured to the design system's --muted. */
.password-input{position:relative;display:block}
.password-input input[type="password"],.password-input input[type="text"]{padding-right:2.5rem}
.show-password-input{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:20px;height:20px;padding:0;border:0;background:transparent;cursor:pointer}
.show-password-input:before{content:"";display:block;width:20px;height:20px;background-repeat:no-repeat;background-size:contain;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2 5.3 11.1 5.1 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23647186"/></svg>')}
.show-password-input.display-password:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M18.3 9.5C15 4.9 8.5 3.8 3.9 7.2C2.7 8.1 1.7 9.3 0.9 10.6C1.1 11 1.4 11.4 1.7 11.8C5 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.8 18.3 9.5ZM10.1 7.2C10.6 6.7 11.4 6.7 11.9 7.2C12.4 7.7 12.4 8.5 11.9 9C11.4 9.5 10.6 9.5 10.1 9C9.6 8.5 9.6 7.7 10.1 7.2ZM10 14.9C6.9 14.9 4 13.3 2.3 10.7C3.5 9 5.1 7.8 7 7.2C6.3 8 6 8.9 6 9.9C6 12.1 7.7 14 10 14C12.2 14 14.1 12.3 14.1 10V9.9C14.1 8.9 13.7 7.9 13 7.2C14.9 7.8 16.5 9 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23647186"/></svg>')}
.form-row-last{float:right}
.form-row-wide{clear:both}
.woocommerce-billing-fields,.woocommerce-shipping-fields,.woocommerce-additional-fields{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:22px}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,#order_review_heading{font-size:1.05rem;margin-bottom:16px}
.woocommerce-form-login,.woocommerce-form-coupon{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:22px}

/* Checkout field-level validation: checkout.js's own inline per-field
   message (.checkout-inline-error-message, appended directly into
   .form-row on failed AJAX validation) rendered as an unstyled second copy
   of the same text already in the top notice list -- intentional WC
   behaviour for accessibility, but needs to look deliberate rather than
   like a duplicate. Sitewide notice styling itself
   (.woocommerce-error/-message/-info, .woocommerce-invalid) lives in
   style.css, not here -- wc_add_notice() output isn't limited to cart/
   checkout/account, it also renders on the shop archive and single product
   pages (e.g. an out-of-stock add-to-cart attempt), which don't load this
   file. */
.checkout-inline-error-message{margin:6px 0 0;font-size:.8rem;color:var(--pink-dark)}

/* Shared totals table styling: WooCommerce's cart-totals.php and
   checkout/review-order.php both output .shop_table with the same
   tr.cart-subtotal / tr.order-total row classes -- one set of rules
   covers both without overriding either template. */
.shop_table{width:100%;border-collapse:collapse}
.shop_table th,.shop_table td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top}
.shop_table tr:last-child th,.shop_table tr:last-child td{border-bottom:0}

/* Shipping row (tr.woocommerce-shipping-totals): the method list, the
   "options will be updated at checkout" note, and the "Calculate shipping"
   toggle all rendered back-to-back with only their own browser-default
   margins -- no space between them, and the toggle had no button styling
   at all, just plain link text. */
/* The default .shop_table th/td sit side by side as table columns, which
   works for the short Subtotal/Total rows but squeezed this row's country/
   state/city/postcode fields into whatever was left of the 340px totals
   column after the "Shipment" label. A previous fix stacked th above td via
   display:block, but that only ever LOOKED right on the "no methods yet"
   empty state -- once a real shipping method list rendered, the row's own
   width stopped resolving against the table (a display:block table cell's
   width:100% needs its *row* to also be a normal block box to resolve
   against, and blockifying the row broke ITS width the same way, since
   its own parent (tbody) was still a table-row-group) -- confirmed live,
   the row measured ~237px inside a ~290px-wide column, leaving a visible
   gap on the right. Fixed at the template level instead (see this theme's
   cart-shipping.php/cart-totals.php overrides): the <th>/<td> pair is now
   a single <td colspan="2">, which reliably spans its full row width via
   ordinary table layout with no display override needed at all. */
.shop_table tr.woocommerce-shipping-totals td{padding:10px 0;border-bottom:1px solid var(--line)}
.shipping-row-label{display:block;font-weight:700;color:var(--ink);margin-bottom:8px}
.woocommerce-shipping-methods{margin:0 0 8px;list-style:none}
.woocommerce-shipping-methods li{margin-bottom:4px}
.woocommerce-shipping-destination{margin:0 0 10px;color:var(--muted)}
.shipping-calculator-button{display:inline-block;margin-top:4px;color:var(--pink);font-weight:700;font-size:.88rem;text-decoration:none;border-radius:4px}
.shipping-calculator-button:hover{text-decoration:underline}
.shipping-calculator-button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
/* WooCommerce renders this as a real <section> element, which collides
   with style.css's global `section{padding:96px 0}` rule (meant for
   full-width page bands like .page-hero) -- that's a ~91px gap of
   unwanted top/bottom padding on what's meant to be a small in-page
   toggle panel, not a page section. */
.shipping-calculator-form{margin-top:12px;padding:0}
.shop_table tr.order-total th,.shop_table tr.order-total td{font-weight:800;font-size:1.05rem;color:var(--ink)}

/* Cart page */
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;margin-top:24px}
@media (max-width:900px){.cart-layout{grid-template-columns:1fr}}
table.cart-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
table.cart-table th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:16px 18px;border-bottom:1px solid var(--line)}
table.cart-table td{padding:18px;border-bottom:1px solid var(--line);vertical-align:middle}
table.cart-table tr:last-child td{border-bottom:0}
table.cart-table .product-thumbnail img{width:64px;height:64px;object-fit:contain;border-radius:12px;background:var(--cream-2)}
table.cart-table .product-name a{font-weight:700;color:var(--ink)}
table.cart-table .product-remove a{color:var(--muted);font-size:1.2rem;text-decoration:none}
table.cart-table .product-remove a:hover{color:var(--pink)}
table.cart-table .cart-actions-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:100%}
table.cart-table .cart-actions-row .coupon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:280px}
table.cart-table .cart-actions-row .form-field{margin:0}
table.cart-table .cart-actions-row>button[name="update_cart"]{margin-left:auto}
.cart-collaterals .widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm)}
.wc-proceed-to-checkout a{display:flex;justify-content:center}

/* Checkout */
.checkout-layout{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start;margin-top:24px}
@media (max-width:900px){.checkout-layout{grid-template-columns:1fr}}
.wc_payment_methods{list-style:none;margin:0 0 16px;padding:0}
.wc_payment_methods .wc_payment_method{padding:12px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.wc_payment_methods .payment_box{background:var(--cream-2);border-radius:12px;padding:14px 16px;margin-top:10px;font-size:.86rem;color:var(--muted)}
#place_order{width:100%;min-height:50px;border-radius:14px;background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;font-weight:800;font-size:.95rem;border:0;cursor:pointer;margin-top:12px}

/* Order received (thank-you) page -- also the Checkout page (is_checkout()
   covers its order-received/order-pay endpoints too, which is why this
   lives here rather than a separate stylesheet) -- and the equivalent
   order-details view under My Account, since both render through the same
   woocommerce_thankyou -> woocommerce_order_details_table() -> order/
   order-details.php + order-details-customer.php path. None of this had
   any styling: the success/failure message used a different class scheme
   (.woocommerce-notice) than the notice-list styling in style.css
   (.woocommerce-message/-error/-info), and the order-overview summary,
   order-details table title and customer-address columns had no rules
   pointed at them at all. */
.woocommerce-notice{margin:0 0 22px;padding:16px 20px;border-radius:var(--radius-md);font-size:.95rem;font-weight:650}
.woocommerce-notice--success{background:#eaf7e6;border:1px solid #cfe9c6;color:#2d6e1e}
.woocommerce-notice--error{background:#fff0f1;border:1px solid #f8c8cd;color:var(--pink-dark)}
.woocommerce-thankyou-order-failed-actions{display:flex;gap:12px;margin-top:-8px}
.woocommerce-order-overview{list-style:none;display:flex;flex-wrap:wrap;gap:20px;margin:0 0 28px;padding:20px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.woocommerce-order-overview li{font-size:.85rem;color:var(--muted)}
.woocommerce-order-overview li strong{display:block;margin-top:2px;font-size:.98rem;color:var(--ink)}
.woocommerce-order-details{margin-bottom:28px}
.woocommerce-order-details__title,.woocommerce-column__title{font-size:1.05rem;margin-bottom:16px}
.woocommerce-customer-details{margin-top:28px}
.woocommerce-customer-details address{font-size:.9rem;color:var(--muted);line-height:1.6;font-style:normal}
.woocommerce-customer-details--phone,.woocommerce-customer-details--email{margin:4px 0 0}
.woocommerce-order-details .order-actions-button,.woocommerce-order-details .woocommerce-button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;font-size:.85rem;font-weight:700;text-decoration:none;background:var(--cream-2);color:var(--ink);margin:2px 6px 2px 0}
.woocommerce-order-details .order-actions-button:hover,.woocommerce-order-details .woocommerce-button:hover{background:#f5f7fa}

/* My Account */
.account-layout{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start;margin-top:24px}
@media (max-width:820px){.account-layout{grid-template-columns:1fr}}

/* Login/Register (logged-out my-account.php): WooCommerce's own
   form-login.php wraps both forms in .u-columns.col2-set/.u-column1.col-1/
   .u-column2.col-2 specifically so they can sit side by side -- no CSS at
   all targeted those classes, so they stacked vertically as two full-width
   sections instead. */
.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin-top:24px}
@media (max-width:820px){.col2-set{grid-template-columns:1fr}}
.col2-set .woocommerce-form-login,.col2-set .woocommerce-form-register{margin-bottom:0;height:100%}

/* .account-form-panel.two-col: the same panel shell lost/reset-password
   uses below, reused here for Login/Register (see the
   woocommerce_before/after_customer_login_form hooks in
   inc/woocommerce-hooks.php) -- display:block overrides the base
   .account-form-panel rule's 3-column grid (built for the lost-password
   layout's divider element), since the 2-column split here is already
   handled by .col2-set above; a vertical border stands in for a
   dedicated divider element instead, since form-login.php's own markup
   can't be reached to inject one between the two <form>s. */
.account-form-panel.two-col{display:block;padding:48px}
.account-form-panel.two-col .col2-set{margin-top:0}
.account-form-panel.two-col h2{font-size:1.3rem;margin-bottom:20px}
.account-form-panel.two-col .col2-set .woocommerce-form-login,
.account-form-panel.two-col .col2-set .woocommerce-form-register{background:none;border:0;padding:0;box-shadow:none;margin-bottom:0;height:auto}
.account-form-panel.two-col .col2-set .u-column2{border-left:1px solid var(--line);padding-left:48px}
@media (max-width:820px){.account-form-panel.two-col .col2-set .u-column2{border-left:0;padding-left:0;margin-top:8px}}
.account-nav{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:12px;box-shadow:var(--shadow-sm)}
.account-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.account-nav a{display:block;padding:10px 14px;border-radius:10px;font-size:.9rem;font-weight:650;color:var(--ink)}
.account-nav li.is-active a{background:var(--cream-2);color:var(--pink)}
.account-nav a:hover{background:#f5f7fa}
.account-content{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow-sm)}
.account-content table.shop_table{margin-top:10px}
.account-content .button{display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:44px;padding:11px 20px;border-radius:12px;background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;font-weight:700;font-size:.9rem;border:0;cursor:pointer;text-decoration:none}