/* Spartan Peptides: WooCommerce replacement stylesheet.

   This file is the theme's stand in for Woo's three default sheets:
   woocommerce-general, woocommerce-layout and woocommerce-smallscreen.
   inc/performance.php dequeues all three the moment this file exists, so
   anything Woo prints and this file does not cover renders unstyled.

   Scope rules:
   - Design tokens come from assets/css/site.css. No new palette here.
   - Things site.css already owns are NOT repeated: notices, breadcrumb,
     pagination, form rows and the .button family all live there.
   - Page specific layout stays in shop.css, product.css and checkout.css.
     This file only covers the Woo components those files do not reach.
   - Low specificity on purpose. This sheet is the base layer, the page
     sheets are allowed to win.

   Sections
     1.  Layout resets (what woocommerce-layout.css used to do)
     2.  Product loops (ul.products)
     3.  Buttons and add to cart
     4.  Prices
     5.  Stock and availability
     6.  Quantity input
     7.  Variation form
     8.  Sale flash
     9.  Star ratings and reviews
     10. Product data tabs
     11. Related products and up-sells
     12. Cart page
     13. Checkout
     14. My account
     15. Orders, downloads and the thank you page
     16. Odds and ends
     17. Small screens (what woocommerce-smallscreen.css used to do)
*/

/* ---------------------------------------------------------------------------
   1. Layout resets
   Woo's layout sheet floated .images and .summary side by side and cleared
   rows with generated content. The theme lays those out with CSS grid, so all
   that is needed here is a neutral starting point.
   ------------------------------------------------------------------------- */

.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message{list-style:none}

.woocommerce div.product div.images,
.woocommerce div.product div.summary{float:none;width:auto;clear:none}

.woocommerce .col2-set{display:block;width:auto}
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2{float:none;width:auto}

.woocommerce img.alignleft{float:left;margin:0 20px 20px 0}
.woocommerce img.alignright{float:right;margin:0 0 20px 20px}
.woocommerce .clear{clear:both}

.woocommerce table{border-collapse:collapse;width:100%}
.woocommerce table th,
.woocommerce table td{vertical-align:top}

.woocommerce .screen-reader-text,
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.woocommerce-store-notice{display:block;padding:14px 20px;background:var(--ink);color:#fff;text-align:center;font:500 12px/1.5 var(--display);letter-spacing:.14em;text-transform:uppercase}
.woocommerce-store-notice a{text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------------------
   2. Product loops
   The shop archive builds its own grid (.grid-shop, archive-product.php), but
   related products, up-sells and cross-sells go through Woo's own
   woocommerce_product_loop_start(), which prints <ul class="products">.
   ------------------------------------------------------------------------- */

.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 28px;margin:0;padding:0;list-style:none}
.woocommerce ul.products.columns-1{grid-template-columns:1fr}
.woocommerce ul.products.columns-2{grid-template-columns:repeat(2,1fr)}
.woocommerce ul.products.columns-3{grid-template-columns:repeat(3,1fr)}
.woocommerce ul.products > *{min-width:0}
.woocommerce ul.products li.product{float:none;width:auto;min-width:0;margin:0;padding:0;list-style:none}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{content:none}

.woocommerce .woocommerce-no-products-found{grid-column:1/-1}

/* ---------------------------------------------------------------------------
   3. Buttons and add to cart
   site.css already draws .woocommerce .button in the design's pill shape.
   What is left is the loop button, the "view cart" link Woo appends after an
   ajax add, and the single product submit.
   ------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:56px;padding:0 30px;border:0;border-radius:50px;
  background:var(--blue);color:#fff;cursor:pointer;
  font:500 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 14px 30px -10px rgba(5,14,31,.45);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),opacity .3s}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{background:var(--blue-h);box-shadow:0 20px 40px -12px rgba(5,14,31,.55)}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{background:var(--blue);color:#fff}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{background:var(--blue-h)}
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Woo's ajax spinner and tick on a loop button. */
.woocommerce a.button.loading,
.woocommerce button.button.loading{opacity:.7;pointer-events:none}
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after{content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp-woo-spin .8s linear infinite}
@keyframes sp-woo-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .woocommerce a.button.loading::after,
  .woocommerce button.button.loading::after{animation-duration:2.4s}
}

/* "View cart" link Woo drops in after an ajax add to cart. */
.woocommerce a.added_to_cart{
  display:inline-flex;align-items:center;height:40px;margin-left:12px;padding:0 18px;
  border:1px solid var(--line);border-radius:30px;background:#fff;color:var(--navy);
  font:500 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .3s,background .3s,color .3s}
.woocommerce a.added_to_cart:hover{border-color:var(--navy);background:var(--navy);color:#fff}

/* The single product submit. product.css restyles it inside .pdp-info, this is
   the base so it is never Woo purple anywhere else (quick view, shortcodes). */
.woocommerce button.single_add_to_cart_button{min-width:220px}

/* ---------------------------------------------------------------------------
   4. Prices
   Navy, display face, struck through originals muted.
   ------------------------------------------------------------------------- */

.woocommerce .price,
.woocommerce span.amount,
.woocommerce bdi{color:var(--navy)}
.woocommerce div.product p.price,
.woocommerce div.product span.price{font:400 30px/1 var(--display);color:var(--navy)}
.woocommerce .price del,
.woocommerce del{opacity:1;color:var(--muted);text-decoration:line-through;font-weight:400}
.woocommerce .price del .amount,
.woocommerce del .amount,
.woocommerce del bdi{color:var(--muted)}
.woocommerce .price ins,
.woocommerce ins{text-decoration:none;background:none;font-weight:inherit}
.woocommerce .woocommerce-price-suffix{font:400 13px/1.4 var(--body);color:var(--muted)}
.woocommerce .price .from{font:400 12px var(--body);color:var(--muted)}
.woocommerce .tax_label{font-size:.7em;color:var(--muted)}

/* ---------------------------------------------------------------------------
   5. Stock and availability
   ------------------------------------------------------------------------- */

.woocommerce .stock{margin:12px 0 0;font:500 12px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.woocommerce .stock.in-stock{color:var(--navy)}
.woocommerce .stock.available-on-backorder{color:var(--muted)}
.woocommerce .stock.out-of-stock{color:var(--err)}
.woocommerce .wc-no-matching-variations{margin:18px 0 0;font-size:14px;color:var(--err)}
.woocommerce .backorder_notification{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}

/* ---------------------------------------------------------------------------
   6. Quantity input
   assets/js/product.js injects .qty-step buttons around Woo's own input, so the
   pill has to read as one control whether or not the script has run.
   ------------------------------------------------------------------------- */

.woocommerce .quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:30px;background:#fff;overflow:hidden}
.woocommerce .quantity input.qty{
  width:64px;height:54px;border:0;background:none;text-align:center;outline:0;
  font:500 16px/1 var(--display);color:var(--navy);
  -moz-appearance:textfield;appearance:textfield}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.woocommerce .quantity .qty-step{width:46px;height:54px;display:grid;place-items:center;border:0;background:none;color:var(--navy);font-size:12px;cursor:pointer;transition:color .3s}
.woocommerce .quantity .qty-step:hover{color:var(--blue-h)}
.woocommerce .quantity .qty-step[disabled]{opacity:.35;cursor:default}
.woocommerce .quantity label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------------------------------------------------------------------------
   7. Variation form
   Woo prints a <table class="variations">. The design has no table there, so
   each row is turned into a stacked label + control block.
   ------------------------------------------------------------------------- */

.woocommerce .variations{width:100%;margin:22px 0 0;border:0;border-collapse:collapse}
.woocommerce .variations tbody,
.woocommerce .variations tr{display:block}
.woocommerce .variations tr{margin-bottom:18px}
.woocommerce .variations th,
.woocommerce .variations td{display:block;padding:0;border:0;text-align:left}
.woocommerce .variations th.label label{display:block;margin-bottom:12px;font:500 11px/1.4 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.woocommerce .variations td.value{position:relative}
.woocommerce .variations select{
  width:100%;height:52px;padding:0 44px 0 18px;
  border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--navy);
  font:400 15px/1 var(--body);outline:0;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 22px) 23px,calc(100% - 16px) 23px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  transition:border-color .3s,box-shadow .3s}
.woocommerce .variations select:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(10,31,68,.08)}
.woocommerce .variations select:disabled{opacity:.5;cursor:not-allowed}

.woocommerce a.reset_variations{
  display:inline-block;margin-top:10px;
  font:500 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  transition:color .3s}
.woocommerce a.reset_variations:hover{color:var(--navy)}

.woocommerce .woocommerce-variation{margin-top:18px}
.woocommerce .woocommerce-variation-description{font-size:14px;line-height:1.7;color:var(--text)}
.woocommerce .woocommerce-variation-price{margin:16px 0 4px}
.woocommerce .woocommerce-variation-price .price{font:400 26px/1 var(--display);color:var(--navy)}
.woocommerce .woocommerce-variation-availability .stock{margin-top:8px}
.woocommerce .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.woocommerce .woocommerce-variation-add-to-cart-disabled button.single_add_to_cart_button{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Grouped products keep Woo's table, drawn like the design's spec rows. */
.woocommerce table.group_table{border:1px solid var(--line);border-radius:22px;overflow:hidden;margin:22px 0 0}
.woocommerce table.group_table td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--navy);vertical-align:middle}
.woocommerce table.group_table tr:last-child td{border-bottom:0}
.woocommerce table.group_table .woocommerce-grouped-product-list-item__label a{color:var(--navy)}

/* ---------------------------------------------------------------------------
   8. Sale flash
   inc/woocommerce.php moves the badge onto the media tile on both the loop and
   the single product, so it is always positioned against a tile.
   ------------------------------------------------------------------------- */

.woocommerce span.onsale{
  position:absolute;top:14px;left:14px;z-index:3;
  padding:7px 14px;border-radius:30px;background:var(--navy);color:#fff;
  font:500 10.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}

/* ---------------------------------------------------------------------------
   9. Star ratings and reviews
   Woo's stars are a font glyph (star, filled star) from WooCommerce's own
   webfont, which ships with the plugin and is not affected by the dequeue.
   ------------------------------------------------------------------------- */

.woocommerce .star-rating{
  position:relative;display:inline-block;overflow:hidden;
  width:5.4em;height:1.2em;line-height:1.2;
  font-family:star;font-size:13px;font-weight:400;color:var(--navy)}
.woocommerce .star-rating::before{content:"\73\73\73\73\73";position:absolute;top:0;left:0;color:var(--line)}
.woocommerce .star-rating span{position:absolute;top:0;left:0;overflow:hidden;padding-top:1.2em;float:left}
.woocommerce .star-rating span::before{content:"\53\53\53\53\53";position:absolute;top:0;left:0}
.woocommerce .woocommerce-product-rating{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.woocommerce .woocommerce-product-rating .woocommerce-review-link{font:400 13px var(--body);color:var(--muted)}

.woocommerce #reviews #comments{margin-top:6px}
.woocommerce #reviews h2{font:400 22px/1.2 var(--display);text-transform:uppercase;color:var(--navy);margin-bottom:22px}
.woocommerce #reviews ol.commentlist{margin:0;padding:0;list-style:none;display:grid;gap:18px}
.woocommerce #reviews ol.commentlist li{margin:0;padding:0;list-style:none}
.woocommerce #reviews .comment_container{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff}
.woocommerce #reviews .comment_container img.avatar{width:48px;height:48px;border-radius:50%;background:#EEF0F3}
.woocommerce #reviews .comment-text{min-width:0}
.woocommerce #reviews .meta{margin:6px 0 10px;font:500 11px/1.6 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.woocommerce #reviews .meta strong{color:var(--navy)}
.woocommerce #reviews .description{font-size:15px;line-height:1.75;color:var(--text)}
.woocommerce #reviews .description p{margin-bottom:12px}
.woocommerce #reviews .description p:last-child{margin-bottom:0}

.woocommerce #review_form_wrapper{margin-top:36px}
.woocommerce #review_form .comment-reply-title{display:block;margin-bottom:18px;font:500 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.woocommerce #review_form .comment-form{display:grid;gap:16px}
.woocommerce #review_form .comment-form input[type="text"],
.woocommerce #review_form .comment-form input[type="email"]{width:100%;height:52px;padding:0 18px;border:1px solid var(--line);border-radius:14px;font:400 15px var(--body);color:var(--navy);outline:0;transition:border-color .3s,box-shadow .3s}
.woocommerce #review_form .comment-form textarea{width:100%;height:150px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;font:400 15px/1.7 var(--body);color:var(--navy);outline:0;resize:vertical;transition:border-color .3s,box-shadow .3s}
.woocommerce #review_form .comment-form input:focus,
.woocommerce #review_form .comment-form textarea:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(10,31,68,.08)}
.woocommerce #review_form .comment-form label{display:block;margin-bottom:8px;font:500 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.woocommerce #review_form .comment-form-rating p.stars{display:flex;gap:6px;margin:0}
.woocommerce #review_form .comment-form-rating p.stars a{width:26px;height:26px;display:grid;place-items:center;font-family:star;font-size:16px;color:var(--line);text-indent:0;transition:color .25s}
.woocommerce #review_form .comment-form-rating p.stars a::before{content:"\53"}
.woocommerce #review_form .comment-form-rating p.stars:hover a,
.woocommerce #review_form .comment-form-rating p.stars.selected a.active,
.woocommerce #review_form .comment-form-rating p.stars.selected a:not(.active){color:var(--navy)}
.woocommerce #review_form .comment-form-rating p.stars a:hover ~ a{color:var(--line)}
.woocommerce .woocommerce-noreviews{margin-bottom:22px}

/* ---------------------------------------------------------------------------
   10. Product data tabs
   product.css draws the tabs inside .pdp-after. This is the base, so a tabbed
   product rendered anywhere else is still readable.
   ------------------------------------------------------------------------- */

.woocommerce .woocommerce-tabs ul.tabs{display:flex;flex-wrap:wrap;gap:30px;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.woocommerce .woocommerce-tabs ul.tabs li{margin:0;padding:0;list-style:none}
.woocommerce .woocommerce-tabs ul.tabs li a{display:block;padding:18px 0;font:500 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .3s,box-shadow .3s}
.woocommerce .woocommerce-tabs ul.tabs li a:hover{color:var(--navy)}
.woocommerce .woocommerce-tabs ul.tabs li.active a{color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.woocommerce .woocommerce-tabs .panel{margin:0;padding:40px 0}
.woocommerce .woocommerce-tabs .panel > h2:first-child{font:400 26px/1.15 var(--display);text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.woocommerce .woocommerce-tabs .panel p{margin-bottom:14px;font-size:15.5px;line-height:1.8}
.woocommerce .woocommerce-tabs .panel ul,
.woocommerce .woocommerce-tabs .panel ol{margin:0 0 18px 20px}
.woocommerce table.shop_attributes{width:100%;border-collapse:collapse;font-size:14px}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left}
.woocommerce table.shop_attributes th{font:500 11px/1.9 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.woocommerce table.shop_attributes td{color:var(--navy)}
.woocommerce table.shop_attributes td p{margin:0}

/* ---------------------------------------------------------------------------
   11. Related products and up-sells
   ------------------------------------------------------------------------- */

.woocommerce .related,
.woocommerce .up-sells,
.woocommerce .cross-sells{padding-top:70px}
.woocommerce .related > h2,
.woocommerce .up-sells > h2,
.woocommerce .cross-sells > h2{
  margin-bottom:36px;
  font:400 clamp(30px,3.6vw,44px)/1 var(--display);letter-spacing:-.035em;
  text-transform:uppercase;color:var(--navy)}

/* ---------------------------------------------------------------------------
   12. Cart page
   checkout.css owns the design's cart layout. These are the safety rails for
   Woo markup that layout does not name: the raw shop_table, the remove link,
   the coupon row and the cross sells.
   ------------------------------------------------------------------------- */

.woocommerce table.shop_table{width:100%;border-collapse:collapse;font-size:14.5px;color:var(--navy)}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{padding:16px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.woocommerce table.shop_table thead th{font:500 11px/1.9 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.woocommerce table.shop_table tfoot th{font:500 12px/1.6 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.woocommerce table.shop_table img{width:62px;height:62px;border-radius:14px;object-fit:cover;background:#EEF0F3}
.woocommerce table.shop_table .product-remove{width:40px;text-align:center}

.woocommerce a.remove{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  font:400 18px/1 var(--body);text-decoration:none;
  transition:background .3s,border-color .3s,color .3s}
.woocommerce a.remove:hover{background:var(--err);border-color:var(--err);color:#fff}

.woocommerce dl.variation{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.woocommerce dl.variation dt,
.woocommerce dl.variation dd{display:inline;margin:0;font-weight:400}
.woocommerce dl.variation dd{margin-right:10px}
.woocommerce dl.variation dd p{display:inline;margin:0}

.woocommerce .cart-collaterals .cart_totals{width:auto;float:none}
.woocommerce .wc-proceed-to-checkout{padding-top:18px}
.woocommerce .wc-proceed-to-checkout a.checkout-button{width:100%}

.woocommerce .shipping-calculator-button{font:500 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);text-decoration:underline;text-underline-offset:4px}
.woocommerce ul#shipping_method{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.woocommerce ul#shipping_method li{margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:10px;font-size:14px}
.woocommerce ul#shipping_method input{accent-color:var(--navy)}
.woocommerce .woocommerce-shipping-destination{margin-top:10px;font-size:13px;color:var(--muted)}

/* ---------------------------------------------------------------------------
   12b. Cart and Checkout blocks
   The staging site's Cart and Checkout pages use WooCommerce's block versions,
   not the classic shortcodes, so the theme's cart.php / form-checkout.php never
   run there. The wc-blocks-style sheet is untouched by the dequeue and handles
   the layout; only the primary buttons need to stop being the block default
   grey and become the design's navy pill.
   ------------------------------------------------------------------------- */

.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link){
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 30px;border:0;border-radius:50px;
  background:var(--blue);color:#fff;
  font:500 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 14px 30px -10px rgba(5,14,31,.45);
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover{background:var(--blue-h);box-shadow:0 20px 40px -12px rgba(5,14,31,.55)}
.wc-block-components-button:not(.is-link) .wc-block-components-button__text{color:inherit}
.wc-block-components-button.is-link{color:var(--navy)}

.wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount{color:var(--navy)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font:400 24px/1 var(--display)}
.wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2{font-family:var(--display);color:var(--navy)}

/* ---------------------------------------------------------------------------
   13. Checkout
   checkout.css draws the design's two column checkout. Here: the Woo chrome
   around it that the design never had.
   ------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle{margin-bottom:22px}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register{margin:0 0 26px;padding:24px;border:1px solid var(--line);border-radius:24px;background:#fff}
.woocommerce form.checkout h3,
.woocommerce form.checkout .woocommerce-billing-fields h3,
.woocommerce form.checkout .woocommerce-shipping-fields h3{margin-bottom:18px;font:400 20px/1.2 var(--display);text-transform:uppercase;color:var(--navy)}
.woocommerce #payment{margin-top:8px}
.woocommerce #payment ul.payment_methods{margin:0;padding:0 0 18px;list-style:none;border-bottom:1px solid var(--line)}
.woocommerce #payment ul.payment_methods li{margin:0 0 12px;padding:0;list-style:none}
.woocommerce #payment ul.payment_methods li label{display:inline-flex;align-items:center;gap:10px;font:500 13px/1.4 var(--display);color:var(--navy);letter-spacing:.04em;text-transform:none}
.woocommerce #payment ul.payment_methods li input[type="radio"]{width:18px;height:18px;accent-color:var(--navy)}
.woocommerce #payment div.payment_box{position:relative;margin:10px 0 0;padding:16px 18px;border-radius:16px;background:#F4F6FA;font-size:13.5px;line-height:1.6;color:var(--text)}
.woocommerce #payment div.payment_box p:last-child{margin-bottom:0}
.woocommerce #payment .form-row.place-order{margin:22px 0 0;padding:0}
.woocommerce #payment #place_order{width:100%}
.woocommerce .woocommerce-terms-and-conditions-wrapper{margin-bottom:18px}
.woocommerce .woocommerce-privacy-policy-text{font-size:13px;line-height:1.6;color:var(--muted)}
.woocommerce .blockUI.blockOverlay{position:relative}
.woocommerce .blockUI.blockOverlay::before{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid rgba(10,31,68,.2);border-top-color:var(--navy);border-radius:50%;animation:sp-woo-spin .8s linear infinite}

/* ---------------------------------------------------------------------------
   14. My account
   No design page exists for these, so they are drawn from the same tokens:
   a navy pill nav beside a plain content column.
   ------------------------------------------------------------------------- */

.woocommerce-account .woocommerce{display:grid;grid-template-columns:240px 1fr;gap:50px;align-items:start;padding:40px 0 90px}
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce > form.login,
.woocommerce-account .woocommerce > form.register,
.woocommerce-account .woocommerce > .sp-auth,
.woocommerce-account .woocommerce > .u-columns,
.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account .woocommerce > .woocommerce-ResetPassword{grid-column:1/-1}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)){display:block;max-width:560px;margin-inline:auto}

.woocommerce-MyAccount-navigation ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.woocommerce-MyAccount-navigation li{margin:0;padding:0;list-style:none}
.woocommerce-MyAccount-navigation li a{
  display:block;padding:12px 18px;border-radius:30px;
  font:500 12px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  transition:background .3s,color .3s}
.woocommerce-MyAccount-navigation li a:hover{color:var(--navy)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--navy);color:#fff}

.woocommerce-MyAccount-content{min-width:0}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{margin-bottom:16px;font:400 22px/1.2 var(--display);text-transform:uppercase;color:var(--navy)}
.woocommerce-MyAccount-content p{margin-bottom:14px;font-size:15px;line-height:1.75}
.woocommerce-MyAccount-content mark{background:none;color:var(--navy);font-weight:500}
.woocommerce-MyAccount-content .woocommerce-Address{margin-bottom:26px}
.woocommerce-MyAccount-content address{font-style:normal;font-size:15px;line-height:1.8;color:var(--text)}
.woocommerce-EditAccountForm fieldset{margin-top:26px;padding:0;border:0}
.woocommerce-EditAccountForm legend{padding:0;font:500 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.woocommerce form.login .woocommerce-form-login__rememberme,
.woocommerce form.register .woocommerce-form__label-for-checkbox{margin-bottom:14px}
.woocommerce form.login .lost_password{margin-top:12px;font-size:13px}
.woocommerce form.login .lost_password a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------------------
   14b. Log in and create account, one card
   Core stacks two separate forms in two columns, which reads as two pages on a
   phone. One card with a tab switcher instead: the visitor sees one place to
   get in and picks what they are doing. The panels are plain hidden/shown, so
   the page works with no JavaScript at all (both panels render, the tab strip
   simply does nothing).
   ------------------------------------------------------------------------- */

.sp-auth{max-width:520px;margin:0 auto;padding:36px 0 90px}
.sp-auth .woocommerce-form{margin:0;padding:0;border:0;border-radius:0;background:none}

.sp-auth-tabs{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;
  margin-bottom:28px;padding:4px;border-radius:40px;background:#F4F6FA}
.sp-auth-ink{
  position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);
  border-radius:40px;background:var(--navy);
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.sp-auth[data-tab="register"] .sp-auth-ink{transform:translateX(100%)}
.sp-auth-tab{
  position:relative;z-index:1;height:44px;padding:0 10px;border:0;border-radius:40px;background:none;cursor:pointer;
  font:500 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  transition:color .35s}
.sp-auth-tab[aria-selected="true"]{color:#fff}
.sp-auth-tab:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.sp-auth-panel[hidden]{display:none}
.sp-auth-panel.is-on{animation:sp-auth-in .45s cubic-bezier(.16,1,.3,1) both}
@keyframes sp-auth-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.sp-auth-lead{margin:0 0 22px;font-size:15px;line-height:1.7;color:var(--muted)}
.sp-auth .woocommerce-form-login__submit,
.sp-auth .woocommerce-form-register__submit{width:100%;margin-top:6px}
.sp-auth .woocommerce-LostPassword{margin:14px 0 0;text-align:center;font-size:13px}

.sp-auth-swap{
  margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);
  text-align:center;font-size:14px;color:var(--muted)}
.sp-auth-link{
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.sp-auth-link:hover{opacity:.7}

.sp-auth-ruo{
  display:flex;gap:10px;align-items:flex-start;
  margin:26px 0 0;padding:16px 18px;border-radius:16px;background:#F4F6FA;
  font-size:12.5px;line-height:1.6;color:var(--muted)}
.sp-auth-ruo i{margin-top:2px;color:var(--navy)}

@media (prefers-reduced-motion:reduce){
  .sp-auth-ink{transition:none}
  .sp-auth-panel.is-on{animation:none}
}

@media (max-width:600px){
  .sp-auth{padding:24px 0 70px}
  .sp-auth-tab{font-size:11px;letter-spacing:.08em}
}

/* ---------------------------------------------------------------------------
   15. Orders, downloads and the thank you page
   ------------------------------------------------------------------------- */

.woocommerce .woocommerce-order{padding:40px 0 90px}
.woocommerce ul.woocommerce-thankyou-order-details,
.woocommerce ul.order_details{
  display:flex;flex-wrap:wrap;gap:14px;margin:0 0 30px;padding:24px;
  border:1px solid var(--line);border-radius:24px;list-style:none;background:#fff}
.woocommerce ul.order_details li{
  margin:0;padding:0 22px 0 0;border-right:1px solid var(--line);list-style:none;
  font:500 10.5px/1.6 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.woocommerce ul.order_details li:last-child{border-right:0;padding-right:0}
.woocommerce ul.order_details li strong{display:block;margin-top:6px;font:400 16px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--navy)}
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details{margin-top:36px}
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title{margin-bottom:16px;font:400 20px/1.2 var(--display);text-transform:uppercase;color:var(--navy)}
.woocommerce table.woocommerce-table--order-details td.product-name a{color:var(--navy)}
.woocommerce table.my_account_orders td.woocommerce-orders-table__cell-order-actions a.button{height:40px;padding:0 18px;font-size:11px}
.woocommerce .woocommerce-pagination{margin-top:30px}
.woocommerce table.wishlist_table,
.woocommerce table.woocommerce-table--downloads th,
.woocommerce table.woocommerce-table--downloads td{font-size:14px}
.woocommerce .woocommerce-customer-details address{
  padding:20px;border:1px solid var(--line);border-radius:20px;
  font-style:normal;font-size:15px;line-height:1.8;color:var(--text)}

/* ---------------------------------------------------------------------------
   16. Odds and ends
   ------------------------------------------------------------------------- */

.woocommerce form.woocommerce-form-track-order,
.woocommerce form.lost_reset_password{max-width:560px}
.woocommerce .password-input,
.woocommerce .show-password-input{position:relative;display:block}
.woocommerce .show-password-input{position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--muted)}
.woocommerce .show-password-input::after{content:"\f06e";font-family:"Font Awesome 6 Free";font-weight:900}
.woocommerce .show-password-input.display-password::after{content:"\f070"}
.woocommerce .woocommerce-password-strength{margin-top:8px;padding:8px 14px;border-radius:12px;font:500 11px/1.4 var(--display);letter-spacing:.1em;text-transform:uppercase;text-align:center}
.woocommerce .woocommerce-password-strength.short,
.woocommerce .woocommerce-password-strength.bad{background:#FFF6F5;color:var(--err)}
.woocommerce .woocommerce-password-strength.good,
.woocommerce .woocommerce-password-strength.strong{background:#F4F6FA;color:var(--navy)}
.woocommerce .post-password-form input[type="submit"]{height:56px;padding:0 30px;border:0;border-radius:50px;background:var(--blue);color:#fff;font:500 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-widget-layered-nav-dropdown select{
  height:46px;padding:0 40px 0 16px;border:1px solid var(--line);border-radius:30px;background:#fff;
  color:var(--navy);font:500 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}

/* ---------------------------------------------------------------------------
   17. Small screens
   Replaces woocommerce-smallscreen.css. Woo broke at 768px, the design breaks
   at 760px, so the theme's breakpoint is used everywhere.
   ------------------------------------------------------------------------- */

@media (max-width:760px){
  .woocommerce ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{grid-template-columns:repeat(2,1fr);gap:24px 16px}

  .woocommerce div.product p.price,
  .woocommerce div.product span.price{font-size:26px}

  .woocommerce .woocommerce-tabs ul.tabs{gap:22px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .woocommerce .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
  .woocommerce .woocommerce-tabs .panel{padding:30px 0 10px}

  .woocommerce .related,
  .woocommerce .up-sells,
  .woocommerce .cross-sells{padding-top:50px}

  /* Woo's own responsive tables: the head row is hidden and each cell carries
     its label in data-title, which is what Woo's markup already provides. */
  .woocommerce table.shop_table_responsive thead{display:none}
  .woocommerce table.shop_table_responsive tbody tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .woocommerce table.shop_table_responsive tbody th{display:none}
  .woocommerce table.shop_table_responsive tr td{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:6px 0;border:0;text-align:right}
  .woocommerce table.shop_table_responsive tr td::before{
    content:attr(data-title) ": ";
    font:500 10.5px/1.6 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left}
  .woocommerce table.shop_table_responsive tr td.product-remove::before,
  .woocommerce table.shop_table_responsive tr td.actions::before{content:none}
  .woocommerce table.shop_table_responsive tr td.actions{display:block;text-align:left}

  .woocommerce-account .woocommerce{grid-template-columns:1fr;gap:26px;padding-top:20px}
  .woocommerce-MyAccount-navigation ul{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:none}
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}

  .woocommerce ul.order_details{gap:16px;padding:20px}
  .woocommerce ul.order_details li{padding-right:0;border-right:0;flex:1 1 44%}

  /* iOS zooms any field under 16px on focus. */
  .woocommerce .variations select,
  .woocommerce .quantity input.qty,
  .woocommerce #review_form .comment-form input[type="text"],
  .woocommerce #review_form .comment-form input[type="email"],
  .woocommerce #review_form .comment-form textarea{font-size:16px}
}

/* ---------------------------------------------------------------------------
   Notice buttons
   A notice is a status line, not a call to action, so its "view cart" link is
   a small pill. The generic .woocommerce a.button rule above is more specific
   than the notice rule in site.css, hence this override.
   ------------------------------------------------------------------------- */

.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button{
  margin-left:auto;height:34px;padding:0 16px;border-radius:24px;gap:8px;
  font:500 10px/1 var(--display);letter-spacing:.14em;box-shadow:none}
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce .woocommerce-error a.button:hover{box-shadow:none}

/* ---------------------------------------------------------------------------
   Notices that stay on the page
   Woo prints them as the first thing inside <main>, where the fixed header sits
   on top of them. They get the container's width and enough headroom to clear
   the header, so an error is never hidden behind it.
   ------------------------------------------------------------------------- */

main > .woocommerce-notices-wrapper:has(.woocommerce-message, .woocommerce-info, .woocommerce-error){
  width:min(var(--container),100% - 40px);margin:0 auto;padding:130px 0 0}
main > .woocommerce-notices-wrapper:has(.woocommerce-message, .woocommerce-info, .woocommerce-error) + .page-hero,
main > .woocommerce-notices-wrapper:has(.woocommerce-message, .woocommerce-info, .woocommerce-error) + .pdp{padding-top:30px}
main > .woocommerce-notices-wrapper .woocommerce-message,
main > .woocommerce-notices-wrapper .woocommerce-info,
main > .woocommerce-notices-wrapper .woocommerce-error{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0;padding:16px 20px;border-radius:16px;border:1px solid var(--line);
  background:#F4F6F9;font-size:14px;color:var(--navy);list-style:none}
main > .woocommerce-notices-wrapper .woocommerce-error{
  border-color:rgba(192,68,76,.35);background:rgba(192,68,76,.08)}

@media (max-width:640px){
  main > .woocommerce-notices-wrapper:has(.woocommerce-message, .woocommerce-info, .woocommerce-error){padding-top:100px}
}

/* ---------------------------------------------------------------------------
   My account
   WooCommerce provides the pages; these are the design's manners on top.
   ------------------------------------------------------------------------- */

/* A logged in customer gets a filled icon, so the header says which state you
   are in without adding a word of chrome. */
.h-right .circle.account.is-in{background:var(--blue)}

.woocommerce-account .woocommerce{padding-top:10px}
.woocommerce-account .page-hero{padding-bottom:30px}

/* Address blocks read as cards, and "add" is a button, not a bare link. */
.woocommerce-account .woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.woocommerce-account .woocommerce-Address{margin:0;padding:26px;border:1px solid var(--line);border-radius:22px;background:#fff}
.woocommerce-account .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.woocommerce-account .woocommerce-Address-title a.edit{font-size:10px;letter-spacing:.1em}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{margin:0;font:400 20px/1.2 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--navy)}
.woocommerce-account .woocommerce-Address-title a.edit{
  display:inline-flex;align-items:center;flex:none;white-space:nowrap;height:36px;padding:0 16px;border-radius:24px;
  border:1px solid var(--navy);color:var(--navy);
  font:500 10.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.woocommerce-account .woocommerce-Address-title a.edit:hover{background:var(--navy);color:#fff}
.woocommerce-account .woocommerce-Address address{font-style:normal;font-size:14.5px;line-height:1.7;color:var(--text)}

@media (max-width:768px){
  .woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   Account dashboard
   Core ships one line of text here. This is the same information laid out as a
   landing screen: greeting, real figures, recent orders, and the few places a
   customer actually goes next. Shadows carry the navy of the brand rather than
   flat black, and the number rows use tabular figures so they line up.
   ------------------------------------------------------------------------- */

.sp-dash{display:grid;gap:34px}
.sp-dash-hello{display:grid;gap:10px}
.sp-dash-eyebrow{margin:0;font:500 11px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sp-dash-hello h2{margin:0;font:400 clamp(28px,3.4vw,42px)/1.05 var(--display);letter-spacing:-.02em;color:var(--navy)}
.sp-dash-hello h2 span{color:var(--blue)}
.sp-dash-sub{margin:0;max-width:56ch;font-size:15px;line-height:1.7;color:var(--text);text-wrap:pretty}

/* Figures. Three across on desktop, but the first one carries the weight. */
.sp-dash-facts{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.sp-fact{padding:22px 24px;border-radius:20px;background:#F6F8FB;border:1px solid var(--line)}
.sp-fact span{display:block;font:500 10.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sp-fact b{display:block;margin-top:12px;font:400 30px/1 var(--display);letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}

.sp-status{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:30px;
  font:500 10.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  background:#EDF1F7;color:var(--navy)}
.sp-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sp-status-completed{background:rgba(31,122,86,.12);color:#1F7A56}
.sp-status-processing{background:rgba(10,31,68,.08);color:var(--navy)}
.sp-status-on-hold,.sp-status-pending{background:rgba(190,140,30,.14);color:#8A6410}
.sp-status-cancelled,.sp-status-failed,.sp-status-refunded{background:rgba(192,68,76,.12);color:#A63B42}
.sp-fact b.sp-status{display:inline-flex;width:auto;margin-top:14px;font-size:10.5px}

.sp-dash-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 16px}
.sp-dash-sec-head h3,
h3.sp-dash-sec-head{margin:0;font:500 11px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.sp-dash-sec-head a{font:500 10.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  border-bottom:1px solid currentColor;padding-bottom:3px}

/* Recent orders: rows, not a table. Each one is a link target on its own. */
.sp-order-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.sp-order-list li{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:20px;
  padding:18px 22px;border-top:1px solid var(--line);background:#fff;transition:background-color .3s var(--ease)}
.sp-order-list li:first-child{border-top:0}
.sp-order-list li:hover{background:#FAFBFD}
.sp-order-main b{display:block;font:500 15px var(--display);color:var(--navy);font-variant-numeric:tabular-nums}
.sp-order-main span{font-size:12.5px;color:var(--muted)}
.sp-order-total{font:500 15px var(--display);color:var(--navy);font-variant-numeric:tabular-nums}
.sp-order-view{display:inline-flex;align-items:center;gap:8px;font:500 10.5px/1 var(--display);
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.sp-order-view i{transition:transform .35s var(--ease)}
.sp-order-view:hover i{transform:translateX(4px)}

/* Empty state: a composed screen, not a blank panel. */
.sp-dash-empty{padding:44px 36px;border-radius:24px;border:1px solid var(--line);
  background:radial-gradient(520px 260px at 12% 0%,rgba(10,31,68,.05),transparent 70%),#FAFBFD;max-width:720px}
.sp-dash-empty-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:20px;box-shadow:0 16px 30px -16px rgba(10,31,68,.55)}
.sp-dash-empty h3{margin:22px 0 10px;font:400 24px/1.15 var(--display);letter-spacing:-.01em;color:var(--navy)}
.sp-dash-empty p{margin:0;max-width:52ch;font-size:14.5px;line-height:1.7;color:var(--text);text-wrap:pretty}
.sp-dash-empty-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Shortcuts. Deliberately not three equal columns: the grid fills by width. */
.sp-link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.sp-link-card{display:block;padding:22px 22px 20px;border-radius:20px;border:1px solid var(--line);background:#fff;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.sp-link-card:hover{border-color:transparent;transform:translateY(-3px);box-shadow:0 20px 38px -24px rgba(10,31,68,.5)}
.sp-link-card:active{transform:translateY(0)}
.sp-link-card:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.sp-link-card i{font-size:17px;color:var(--blue)}
.sp-link-card b{display:block;margin:14px 0 6px;font:500 15px/1.3 var(--display);color:var(--navy)}
.sp-link-card span{font-size:13px;line-height:1.55;color:var(--muted)}

.sp-dash-ruo{display:flex;gap:10px;align-items:flex-start;margin:0;padding-top:24px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--muted)}
.sp-dash-ruo i{margin-top:2px;color:var(--navy)}

@media (max-width:900px){
  .sp-dash-facts{grid-template-columns:1fr 1fr}
  .sp-order-list li{grid-template-columns:1fr auto;row-gap:10px}
  .sp-order-list li .sp-order-total{grid-column:1;justify-self:start}
  .sp-order-list li .sp-order-view{grid-column:2;justify-self:end}
}
@media (max-width:560px){
  .sp-dash-facts{grid-template-columns:1fr}
  .sp-dash-empty{padding:30px 22px}
  .sp-dash-empty-actions .btn{width:100%;justify-content:center}
}

/* A grid item defaults to min-width:auto, so a wide row inside pushes the whole
   account column past the screen on a phone. These keep it in its track. */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-navigation ul,
.sp-dash,.sp-dash-facts,.sp-dash-orders,.sp-order-list,.sp-link-grid,.sp-order-main{min-width:0}
.sp-order-main b,.sp-order-main span{overflow-wrap:anywhere}

@media (max-width:560px){
  .sp-link-grid{grid-template-columns:1fr}
  .sp-order-list li{grid-template-columns:1fr auto;gap:8px 14px;padding:16px 18px}
}

/* ---------------------------------------------------------------------------
   Account layout: wide, with the menu pinned
   The account screens are a working area, not reading matter, so they use the
   full width rather than the 1140px reading container the content pages use,
   and the menu stays in view while the panel beside it scrolls.
   ------------------------------------------------------------------------- */

.woocommerce-account .sec.tight > .container{width:min(1560px,100% - 64px)}
.woocommerce-account .page-hero > .container{width:min(1560px,100% - 64px)}
.woocommerce-account .woocommerce{grid-template-columns:260px minmax(0,1fr);gap:56px}

.woocommerce-account .woocommerce-MyAccount-navigation{position:sticky;top:110px;align-self:start}
/* site.css clips main on the x axis to stop wide sections bleeding sideways, and
   that clip is what stops the menu sticking. The account screens have nothing
   that bleeds, so the clip is lifted here and only here. */
.woocommerce-account main{overflow:visible}

@media (max-width:1000px){
  /* Stacked here, so pinning it would only eat the screen. */
  .woocommerce-account .woocommerce-MyAccount-navigation{position:static}
}
@media (max-width:640px){
  .woocommerce-account .sec.tight > .container,
  .woocommerce-account .page-hero > .container{width:min(1560px,100% - 40px)}
}