/* ============================================================
   MUSEF - SHOP + PRODUCT
   WooCommerce archive, filter sidebar and single product.
   Requires msf-tokens.css to be loaded first.
   ============================================================ */

.woocommerce,
.woocommerce-page{ font-family:var(--msf-font); }

/* ============================================================
   1. ARCHIVE HEADER + TOOLBAR
   ============================================================ */
.woocommerce .woocommerce-products-header{ margin-bottom:22px; }
.woocommerce .woocommerce-products-header__title{
  font-size:clamp(26px,3.4vw,38px);
  line-height:1.15; color:var(--msf-ink); margin:0 0 8px;
}
.woocommerce .term-description{ color:var(--msf-muted); font-size:15px; max-width:70ch; }

.woocommerce .msf-shop-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding:0 0 16px; margin-bottom:24px;
  border-bottom:1px solid var(--msf-line);
}
.woocommerce .woocommerce-result-count{
  margin:0; color:var(--msf-muted); font-size:14px;
}
.woocommerce .woocommerce-ordering select{
  height:42px; padding:0 38px 0 16px;
  border:1px solid var(--msf-line); border-radius:999px;
  background-color:var(--msf-bg); color:var(--msf-ink);
  font:inherit; font-size:14px;
}
.woocommerce .woocommerce-ordering select:focus{ border-color:var(--msf-accent); outline:none; }

/* ============================================================
   2. PRODUCT CARDS
   ============================================================ */
.woocommerce ul.products{ margin:0; padding:0; list-style:none; }

.woocommerce ul.products li.product{
  background:var(--msf-bg);
  border:1px solid var(--msf-line); border-radius:16px;
  padding:14px 14px 18px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.woocommerce ul.products li.product:hover{
  border-color:var(--msf-accent);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  transform:translateY(-3px);
}

.woocommerce ul.products li.product a img{
  border-radius:12px; margin-bottom:14px;
  background:var(--msf-field); aspect-ratio:1/1; object-fit:contain;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--msf-font); font-size:15px; font-weight:800;
  line-height:1.4; color:var(--msf-ink);
  padding:0; margin:0 0 8px;
  /* long device names must not push the price out of the card */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title{ color:var(--msf-accent); }

.woocommerce ul.products li.product .price{
  color:var(--msf-ink); font-size:17px; font-weight:700;
  margin:0 0 14px; display:block;
}
.woocommerce ul.products li.product .price del{ color:var(--msf-muted); font-weight:400; font-size:14px; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

/* push the button to the bottom so uneven titles still line up */
.woocommerce ul.products li.product .button{ margin-top:auto; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--msf-tap); padding:0 18px;
  border-radius:999px; border:1px solid var(--msf-accent);
  background:var(--msf-accent); color:#fff;
  font-size:14px; font-weight:600; line-height:1.2;
  text-align:center; text-decoration:none;
  transition:background .18s, color .18s;
}
.woocommerce ul.products li.product .button:hover{ background:var(--msf-accent-dark); border-color:var(--msf-accent-dark); color:#fff; }
.woocommerce ul.products li.product .added_to_cart{
  margin-top:8px; background:transparent; color:var(--msf-accent);
}
.woocommerce ul.products li.product .added_to_cart:hover{ background:var(--msf-accent-soft); color:var(--msf-accent); }

.woocommerce span.onsale{
  background:var(--msf-accent); color:#fff;
  min-height:0; min-width:0; padding:4px 12px;
  border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em;
  line-height:1.6;
}

/* ============================================================
   3. FILTER SIDEBAR
   ============================================================ */
#secondary .widget{
  background:var(--msf-bg);
  border:1px solid var(--msf-line); border-radius:14px;
  padding:18px; margin-bottom:18px;
}
#secondary .widget .widget-title,
#secondary .widget h2{
  font-family:var(--msf-font); font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--msf-ink); margin:0 0 14px; padding:0; border:0;
}
#secondary .widget ul{ list-style:none; margin:0; padding:0; }
#secondary .widget ul li{ margin:0; padding:0; border:0; }
#secondary .widget ul li + li{ margin-top:2px; }
#secondary .widget ul a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:38px; padding:6px 10px; border-radius:8px;
  color:var(--msf-ink); text-decoration:none; font-size:14.5px;
  transition:background .18s, color .18s;
}
#secondary .widget ul a:hover{ background:var(--msf-hover); color:var(--msf-accent); }
#secondary .widget ul li.current-cat > a,
#secondary .widget ul li.chosen > a{
  background:var(--msf-accent-soft); color:var(--msf-accent); font-weight:600;
}
#secondary .widget ul li .count{ color:var(--msf-muted); font-size:12.5px; }

/* a chosen layered-nav term gets a clear "x" affordance */
.woocommerce-widget-layered-nav-list .chosen a::after{
  content:'\00d7'; margin-left:6px; font-size:16px; line-height:1;
}

#secondary .widget_product_search form{ display:flex; gap:8px; }
#secondary .widget_product_search .search-field{
  flex:1 1 auto; min-width:0; height:42px; padding:0 14px;
  border:1px solid var(--msf-line); border-radius:999px;
  background:var(--msf-field); color:var(--msf-ink);
  font:inherit; font-size:14px;
}
#secondary .widget_product_search .search-field:focus{ background:#fff; border-color:var(--msf-accent); outline:none; }
#secondary .widget_product_search button[type="submit"]{
  flex:0 0 auto; height:42px; padding:0 16px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--msf-accent); color:#fff; font:inherit; font-size:14px; font-weight:600;
}
#secondary .widget_product_search button[type="submit"]:hover{ background:var(--msf-accent-dark); color:#fff; }

.woocommerce .price_slider_wrapper .ui-slider{
  background:var(--msf-line); border:0; border-radius:999px; height:5px; margin:10px 0 18px;
}
.woocommerce .price_slider_wrapper .ui-slider .ui-slider-range{ background:var(--msf-accent); border-radius:999px; }
.woocommerce .price_slider_wrapper .ui-slider .ui-slider-handle{
  width:18px; height:18px; top:-7px; margin-left:-9px;
  background:#fff; border:2px solid var(--msf-accent); border-radius:50%;
}
.woocommerce .price_slider_amount{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13.5px; }
.woocommerce .price_slider_amount .price_label{ color:var(--msf-muted); order:1; }
.woocommerce .price_slider_amount .button{
  order:2; min-height:38px; padding:0 16px;
  border-radius:999px; border:1px solid var(--msf-accent);
  background:transparent; color:var(--msf-accent);
  font-size:13px; font-weight:600;
}
.woocommerce .price_slider_amount .button:hover{ background:var(--msf-accent); color:#fff; }

/* ============================================================
   4. SINGLE PRODUCT
   ============================================================ */
.woocommerce div.product{ font-family:var(--msf-font); }

.woocommerce div.product div.images img{
  border-radius:16px; background:var(--msf-field);
}
.woocommerce div.product div.images .flex-control-thumbs{ margin-top:12px; gap:10px; display:flex; }
.woocommerce div.product div.images .flex-control-thumbs li{ width:auto; flex:0 0 78px; margin:0; padding:0; }
.woocommerce div.product div.images .flex-control-thumbs img{
  border:1px solid var(--msf-line); border-radius:10px; opacity:1;
  transition:border-color .18s;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover{ border-color:var(--msf-accent); }

.woocommerce div.product .product_title{
  font-size:clamp(23px,2.8vw,33px);
  /* the shop cards went to 800; the product page's own name follows. */
  font-weight:800;
  line-height:1.2; color:var(--msf-ink); margin:0 0 12px;
}
.woocommerce div.product p.price{
  color:var(--msf-ink); font-size:clamp(24px,2.6vw,30px); font-weight:700;
  margin:0 0 6px;
}
.woocommerce div.product p.price del{ color:var(--msf-muted); font-weight:400; font-size:.62em; }
.woocommerce div.product p.price ins{ text-decoration:none; }
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--msf-muted); font-size:15px; line-height:1.75;
  padding-top:14px; margin-top:14px; border-top:1px solid var(--msf-line);
}
.woocommerce div.product .woocommerce-product-details__short-description ul{ margin:0; padding-left:20px; }
.woocommerce div.product .woocommerce-product-details__short-description li{ margin-bottom:7px; }

/* ---------- variation picker + add to cart ---------- */
.woocommerce div.product form.cart{ margin-top:22px; }
.woocommerce div.product form.cart table.variations{ margin-bottom:16px; border:0; }
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td{
  border:0; padding:0 0 10px; background:none; vertical-align:middle;
}
.woocommerce div.product form.cart table.variations th.label label{
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--msf-ink);
}
.woocommerce div.product form.cart table.variations select{
  width:100%; max-width:340px; height:var(--msf-tap);
  padding:0 40px 0 16px;
  border:1px solid var(--msf-line); border-radius:999px;
  background-color:var(--msf-bg); color:var(--msf-ink);
  font:inherit; font-size:15px;
}
.woocommerce div.product form.cart table.variations select:focus{ border-color:var(--msf-accent); outline:none; }
.woocommerce div.product form.cart .reset_variations{
  color:var(--msf-accent); font-size:13px; text-decoration:none;
}

.woocommerce div.product form.cart div.quantity{ margin-right:12px; }
.woocommerce div.product form.cart div.quantity .qty{
  height:var(--msf-tap); width:78px; padding:0 8px; text-align:center;
  border:1px solid var(--msf-line); border-radius:999px;
  background:var(--msf-bg); color:var(--msf-ink); font:inherit; font-size:15px;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.single_add_to_cart_button{
  min-height:var(--msf-tap); padding:0 34px;
  border:1px solid var(--msf-accent); border-radius:999px;
  background:var(--msf-accent); color:#fff;
  font-size:16px; font-weight:600; line-height:1.2;
  transition:background .18s;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover{
  background:var(--msf-accent-dark); border-color:var(--msf-accent-dark); color:#fff;
}
.woocommerce div.product .stock.in-stock{ color:#1F7A44; font-size:14px; font-weight:600; }
.woocommerce div.product .stock.out-of-stock{ color:#B23B3B; font-size:14px; font-weight:600; }

.woocommerce div.product .product_meta{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--msf-line);
  font-size:13.5px; color:var(--msf-muted);
}
.woocommerce div.product .product_meta a{ color:var(--msf-accent); text-decoration:none; }

/* ---------- reassurance strip ---------- */
.msf-prod-usp{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px; list-style:none;
  margin:22px 0 0; padding:16px 0 0;
  border-top:1px solid var(--msf-line);
}
.msf-prod-usp li{ display:flex; align-items:center; gap:11px; margin:0; min-width:0; }
.msf-prod-usp__icon{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:var(--msf-accent-soft); color:var(--msf-accent);
  display:flex; align-items:center; justify-content:center;
}
.msf-prod-usp__icon svg{ width:19px; height:19px; }
.msf-prod-usp__copy{ min-width:0; color:inherit; text-decoration:none; }
a.msf-prod-usp__copy:hover .msf-prod-usp__t{ color:var(--msf-accent); }
.msf-prod-usp__t{ display:block; font-size:13.5px; font-weight:600; color:var(--msf-ink); line-height:1.3; }
.msf-prod-usp__s{ display:block; font-size:12px; color:var(--msf-muted); line-height:1.4; }

/* ============================================================
   5. TABS + RELATED
   ============================================================ */
.woocommerce div.product .woocommerce-tabs{ margin-top:46px; }
.woocommerce div.product .woocommerce-tabs ul.tabs{
  margin:0 0 22px; padding:0; display:flex; gap:6px; flex-wrap:wrap;
  border-bottom:1px solid var(--msf-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  margin:0; padding:0; background:none; border:0; border-radius:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block; padding:12px 18px; margin-bottom:-1px;
  border-bottom:2px solid transparent;
  color:var(--msf-muted); font-size:14.5px; font-weight:600; text-decoration:none;
  transition:color .18s, border-color .18s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{ color:var(--msf-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--msf-accent); border-bottom-color:var(--msf-accent);
}
.woocommerce div.product .woocommerce-tabs .panel{
  color:var(--msf-muted); font-size:15px; line-height:1.8; max-width:78ch;
}
.woocommerce div.product .woocommerce-tabs .panel h2{
  font-size:22px; color:var(--msf-ink); margin:0 0 12px;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th{ color:var(--msf-ink); }

.woocommerce .related > h2,
.woocommerce .upsells > h2{
  font-size:clamp(21px,2.4vw,28px);
  color:var(--msf-ink); margin:0 0 22px;
}
.woocommerce .related,
.woocommerce .upsells{ margin-top:52px; }

/* ============================================================
   6. MESSAGES
   ============================================================ */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  border-top-color:var(--msf-accent); border-radius:10px;
  font-size:14.5px;
}
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button{
  border-radius:999px; background:var(--msf-accent); color:#fff;
}

/* ============================================================
   7. BREAKPOINTS
   ============================================================ */
@media (max-width:920px){
  .woocommerce div.product .woocommerce-tabs{ margin-top:34px; }
  .woocommerce .related,
  .woocommerce .upsells{ margin-top:38px; }
}

@media (max-width:640px){
  .woocommerce .msf-shop-bar{ gap:10px; }
  /* the sort form is a flex item beside Filters; only the select fills it */
  .woocommerce .msf-shop-bar .woocommerce-ordering{ flex:1 1 0; width:auto; margin:0; }
  .woocommerce .woocommerce-ordering select{ width:100%; }
  .woocommerce ul.products li.product{ padding:10px 10px 14px; border-radius:14px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:14px; }
  .woocommerce ul.products li.product .price{ font-size:15.5px; margin-bottom:10px; }
  .woocommerce ul.products li.product .button{ padding:0 10px; font-size:13px; }

  .msf-prod-usp{ grid-template-columns:1fr; gap:10px; }

  .woocommerce div.product form.cart table.variations select{ max-width:none; }
  .woocommerce div.product form.cart div.quantity{ margin-right:8px; }
  .woocommerce div.product form.cart button.single_add_to_cart_button{
    flex:1 1 auto; padding:0 18px;
  }
  .woocommerce div.product form.cart .msf-cart-row{ display:flex; gap:8px; }

  /* tab strip scrolls rather than stacking into a tall block */
  .woocommerce div.product .woocommerce-tabs ul.tabs{
    flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{ display:none; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{ white-space:nowrap; padding:12px 14px; }
}

/* ============================================================
   8. A11Y
   ============================================================ */
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
#secondary a:focus-visible{
  outline:2px solid var(--msf-accent);
  outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product .button{ transition:none; }
  .woocommerce ul.products li.product:hover{ transform:none; }
}
/* ============================================================
   9. BUY NOW / ASK A QUESTION
   ============================================================ */

/* On a card the primary action is Buy Now, so Add to cart steps back
   to an outline. Both are full width and stacked - two half-width
   buttons under a two-line product title get too cramped on a phone. */
.woocommerce ul.products li.product .button{
  background:transparent; color:var(--msf-accent);
  border-color:var(--msf-accent);
}
.woocommerce ul.products li.product .button:hover{
  background:var(--msf-accent-soft); border-color:var(--msf-accent); color:var(--msf-accent);
}

.woocommerce ul.products li.product .msf-buy-now{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:var(--msf-tap); margin-top:8px; padding:0 18px;
  border:1px solid var(--msf-accent); border-radius:999px;
  background:var(--msf-accent); color:#fff;
  font-size:14px; font-weight:600; line-height:1.2;
  text-align:center; text-decoration:none;
  transition:background .18s, border-color .18s;
}
.woocommerce ul.products li.product .msf-buy-now:hover{
  background:var(--msf-accent-dark); border-color:var(--msf-accent-dark); color:#fff;
}

/* Single product: Add to cart and Buy it now sit on one row.
   form.cart is only made a flex row when it is NOT a variations form -
   there the attribute table is a sibling and would end up beside the
   button instead of above it. */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}


/* Add to cart becomes the secondary action here too */
.woocommerce div.product form.cart button.single_add_to_cart_button{
  background:transparent; color:var(--msf-accent); border-color:var(--msf-accent);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover{
  background:var(--msf-accent-soft); border-color:var(--msf-accent); color:var(--msf-accent);
}

.msf-ask{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; margin-top:14px; padding:0 20px;
  border:1px solid var(--msf-wa-deep); border-radius:999px;
  background:var(--msf-wa-deep); color:#fff; text-decoration:none;
  font-size:14.5px; font-weight:600;
  transition:filter .18s, background .18s;
}
.msf-ask svg{ width:18px; height:18px; color:#fff; }
.msf-ask:hover{ background:var(--msf-wa-deep); border-color:var(--msf-wa-deep); color:#fff; filter:brightness(1.18); }

/* The archive Buy Now jumps here; offset it clear of the sticky header. */
.msf-anchor{ display:block; height:0; overflow:hidden; scroll-margin-top:calc(var(--msf-r1) + 78px); }

/* ============================================================
   10. SHOP INTRO: LEDE + CATEGORY TILES
   ============================================================ */
.woocommerce .msf-shop-lede{
  color:var(--msf-muted); font-size:16px; line-height:1.7;
  max-width:64ch; margin:0 0 22px;
}

.msf-cats{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 28px; }
.msf-cats__tile{
  display:flex; align-items:center; gap:10px;
  min-height:52px; padding:8px 16px 8px 10px;
  border:1px solid var(--msf-line); border-radius:999px;
  background:var(--msf-bg); color:var(--msf-ink); text-decoration:none;
  transition:border-color .18s, background .18s, color .18s;
}
.msf-cats__tile--all{ padding-left:18px; }
.msf-cats__tile:hover{ border-color:var(--msf-accent); color:var(--msf-accent); }
.msf-cats__tile.is-current{
  background:var(--msf-accent); border-color:var(--msf-accent); color:#fff;
}
.msf-cats__img{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  overflow:hidden; background:var(--msf-field);
}
.msf-cats__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.msf-cats__name{ font-size:14.5px; font-weight:600; white-space:nowrap; }
.msf-cats__count{
  font-size:12px; opacity:.7;
  padding:1px 8px; border-radius:999px; background:var(--msf-hover);
}
.msf-cats__tile.is-current .msf-cats__count{ background:rgba(255,255,255,.22); opacity:1; }

/* ============================================================
   11. PROMISES + HELP CTA
   ============================================================ */
.msf-promises{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 26px; list-style:none;
  margin:38px 0 0; padding:24px 0 0;
  border-top:1px solid var(--msf-line);
}
.msf-promises li{
  display:flex; align-items:flex-start; gap:10px; margin:0;
  font-size:14.5px; color:var(--msf-ink); line-height:1.5;
}
.msf-promises__tick{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background:var(--msf-accent-soft); color:var(--msf-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; line-height:1;
}

.msf-shop-cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  margin-top:30px; padding:24px 26px;
  background:var(--msf-accent-soft); border-radius:16px;
}
.msf-shop-cta__copy{ min-width:0; }
.msf-shop-cta__t{
  display:block; font-size:19px; font-weight:600;
  color:var(--msf-ink); line-height:1.3;
}
.msf-shop-cta__s{ display:block; font-size:14px; color:var(--msf-muted); margin-top:4px; }
.msf-shop-cta__btn{
  display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  min-height:var(--msf-tap); padding:0 24px;
  border-radius:999px; background:var(--msf-wa); color:#fff;
  font-size:15px; font-weight:600; text-decoration:none;
  transition:filter .18s;
}
.msf-shop-cta__btn svg{ width:19px; height:19px; }
.msf-shop-cta__btn:hover{ filter:brightness(.93); color:#fff; }

/* ============================================================
   12. DESCRIPTION FEATURES + SPEC TABLE
   ============================================================ */
.woocommerce .msf-feature-list{ list-style:none; margin:0; padding:0; }
.woocommerce .msf-feature-list li{
  position:relative; padding-left:30px; margin-bottom:10px;
}
.woocommerce .msf-feature-list li::before{
  content:'\2713'; position:absolute; left:0; top:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--msf-accent-soft); color:var(--msf-accent);
  font-size:12px; font-weight:700; line-height:20px; text-align:center;
}

.woocommerce table.shop_attributes{ border:0; margin:0; }
.woocommerce table.shop_attributes tr{ border-bottom:1px solid var(--msf-line); }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td{
  border:0; padding:13px 0; font-style:normal; line-height:1.6;
}
.woocommerce table.shop_attributes th{
  width:34%; color:var(--msf-ink); font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.woocommerce table.shop_attributes td{ color:var(--msf-muted); font-size:14.5px; }
.woocommerce table.shop_attributes td p{ margin:0; padding:0; }

/* ============================================================
   13. BREAKPOINTS FOR THE NEW BLOCKS
   ============================================================ */
@media (max-width:640px){
  .msf-cats{ gap:8px; margin-bottom:22px; }
  .msf-cats__tile{ min-height:46px; padding:6px 13px 6px 8px; }
  .msf-cats__tile--all{ padding-left:15px; }
  .msf-cats__img{ width:30px; height:30px; }
  .msf-cats__name{ font-size:13.5px; }

  .msf-promises{ grid-template-columns:1fr; gap:11px; margin-top:30px; }

  .msf-shop-cta{ padding:20px; text-align:center; justify-content:center; }
  .msf-shop-cta__btn{ width:100%; justify-content:center; }

  
  .woocommerce div.product form.cart button.single_add_to_cart_button{ flex:1 1 auto; }
  .msf-ask{ width:100%; justify-content:center; }

  .woocommerce table.shop_attributes th{ width:42%; font-size:12px; }
  .woocommerce table.shop_attributes td{ font-size:13.5px; }
}
/* ============================================================
   14. TOOLBAR: RESULT COUNT LEFT, FILTERS + SORT RIGHT
   ============================================================ */
.woocommerce .msf-shop-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* auto margin instead of space-between: with three children
   space-between would strand the filter control in the middle. */
.woocommerce .msf-shop-bar .woocommerce-result-count{ margin-right:auto; }
.woocommerce .msf-shop-bar .woocommerce-ordering{ margin:0; }

/* ============================================================
   15. FILTERS DROPDOWN
   A native <details>, so it opens with JavaScript unavailable.
   ============================================================ */
.msf-filters{ position:relative; }

.msf-filters__toggle{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 18px;
  border:1px solid var(--msf-line); border-radius:999px;
  background:var(--msf-bg); color:var(--msf-ink);
  font-size:14px; font-weight:600; line-height:1;
  cursor:pointer; user-select:none;
  list-style:none;                      /* kills the disclosure triangle */
  transition:border-color .18s, color .18s;
}
.msf-filters__toggle::-webkit-details-marker{ display:none; }
.msf-filters__toggle::marker{ content:''; }
.msf-filters__toggle svg{ width:18px; height:18px; flex:0 0 auto; }
.msf-filters__toggle:hover{ border-color:var(--msf-accent); color:var(--msf-accent); }
.msf-filters[open] > .msf-filters__toggle{ border-color:var(--msf-accent); color:var(--msf-accent); }

.msf-filters__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:var(--msf-accent); color:#fff;
  font-size:11.5px; font-weight:700; line-height:1;
}

.msf-filters__panel{
  position:absolute; z-index:30; top:calc(100% + 10px); right:0;
  width:min(92vw,340px);
  padding:18px;
  background:var(--msf-bg);
  border:1px solid var(--msf-line); border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  max-height:min(70vh,560px); overflow-y:auto; overscroll-behavior:contain;
}
.msf-filters__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid var(--msf-line);
}
.msf-filters__title{
  font-size:12.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--msf-ink);
}
.msf-filters__clear{ color:var(--msf-accent); font-size:13px; text-decoration:none; }
.msf-filters__clear:hover{ text-decoration:underline; }

/* Widgets rendered inside the panel. Flat here - the panel is already
   the card, so they must not draw a second border inside it. */
.msf-filters__widgets .widget{
  background:none; border:0; border-radius:0;
  padding:0; margin:0 0 18px;
}
.msf-filters__widgets .widget:last-child{ margin-bottom:0; }
.msf-filters__widgets .widget .widget-title,
.msf-filters__widgets .widget h2{
  font-family:var(--msf-font); font-size:12.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--msf-muted); margin:0 0 10px; padding:0; border:0;
}
.msf-filters__widgets .widget ul{ list-style:none; margin:0; padding:0; }
.msf-filters__widgets .widget ul li{ margin:0; padding:0; border:0; }
.msf-filters__widgets .widget ul a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:36px; padding:5px 10px; border-radius:8px;
  color:var(--msf-ink); text-decoration:none; font-size:14.5px;
  transition:background .18s, color .18s;
}
.msf-filters__widgets .widget ul a:hover{ background:var(--msf-hover); color:var(--msf-accent); }
.msf-filters__widgets .widget ul li.current-cat > a,
.msf-filters__widgets .widget ul li.chosen > a{
  background:var(--msf-accent-soft); color:var(--msf-accent); font-weight:600;
}
.msf-filters__widgets .widget ul li .count{ color:var(--msf-muted); font-size:12.5px; }
.msf-filters__widgets .widget_product_search form{ display:flex; gap:8px; }
.msf-filters__widgets .widget_product_search .search-field{
  flex:1 1 auto; min-width:0; height:40px; padding:0 14px;
  border:1px solid var(--msf-line); border-radius:999px;
  background:var(--msf-field); color:var(--msf-ink); font:inherit; font-size:14px;
}
.msf-filters__widgets .widget_product_search .search-field:focus{ background:#fff; border-color:var(--msf-accent); outline:none; }
.msf-filters__widgets .widget_product_search button[type="submit"]{
  flex:0 0 auto; height:40px; padding:0 15px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--msf-accent); color:#fff; font:inherit; font-size:13.5px; font-weight:600;
}

/* ============================================================
   16. STICKY PRODUCT GALLERY
   The gallery, the summary AND the description tabs sit in one wrapper,
   opened and closed by msf_product_top_open()/_close() in msf-woo.php.

   The gallery is a grid item spanning both rows, so its grid area - and
   with it the box position:sticky may travel inside - runs from the top
   of the summary to the bottom of the description. That is what keeps
   the photo alongside the description rather than releasing it as soon
   as the summary ends.

   Below 993px the page stacks and a sticky image would simply sit on
   top of the text, so none of this applies there.
   ============================================================ */
.woocommerce div.product .msf-product-top{ margin-bottom:6px; }

@media (min-width:993px){
  /* an ancestor with overflow other than visible silently kills
     position:sticky, so this is asserted rather than assumed */
  .woocommerce div.product{ display:block; overflow:visible; }

  .woocommerce div.product .msf-product-top{
    display:grid;
    /* The photos are square, so the gallery column is also its height -
       a fluid column meant a 636px-tall image filling the whole screen.
       Capping the column caps the photo.

       The cap is tied to the viewport because the thumbnails sit under
       the photo and have to stay in view, otherwise nothing tells the
       visitor there are more pictures. Reserved above and below:
         132px  the gallery's own sticky offset, --msf-r1 + 24px
          16px  .flex-viewport's margin under the photo
          78px  a thumbnail (they are square, 78px wide)
          12px  .flex-control-thumbs margin-top
          24px  air under the strip
         ----
         262px
       480px stays the ceiling on a tall screen, and 280px the floor on a
       very short one - below that the photo is too small to read and
       scrolling is the better answer. */
    grid-template-columns:minmax(0,clamp(280px,calc(100vh - 262px),480px)) minmax(0,1fr);
    column-gap:52px;
    row-gap:44px;
    align-items:start;
  }

  /* placed by hand - auto-placement would put the tabs in the empty
     cell beside the gallery instead of under the summary */
  /* WooCommerce ships these as selector LISTS with an #content variant:
     `.woocommerce #content div.product div.images` is (1,3,2) and an ID
     outranks any number of classes, so the plain class version below was
     losing and the gallery kept width:48% INSIDE its grid column. Both
     variants are written out so we win whether or not #content exists. */
  .woocommerce #content div.product .msf-product-top > .woocommerce-product-gallery,
  .woocommerce div.product .msf-product-top > .woocommerce-product-gallery{
    grid-column:1; grid-row:1 / span 2;
    float:none; width:auto; margin:0;
    position:sticky;
    top:calc(var(--msf-r1) + 24px);   /* clear of the sticky header row 1 */
  }
  .woocommerce #content div.product .msf-product-top > .summary,
  .woocommerce div.product .msf-product-top > .summary{
    grid-column:2; grid-row:1;
    float:none; width:auto; margin:0;
  }
  .woocommerce #content div.product .msf-product-top > .woocommerce-tabs,
  .woocommerce div.product .msf-product-top > .woocommerce-tabs{
    grid-column:2; grid-row:2;
    clear:none; margin:0;
  }

  /* Astra prints the same two widths AGAIN, under a longer chain, in its
     inline woocommerce-general CSS:
       .woocommerce #content .ast-woocommerce-container div.product div.images  {width:50%}
       .woocommerce #content .ast-woocommerce-container div.product div.summary {width:46%}
     That is (1,4,2) - one type selector more than the (1,4,1) rules above -
     so width:auto lost and both columns rendered at 50%/46% of their grid
     track: measured 246px and 222px inside a 1027px wrapper.
     min-width is a property none of those rules set and it clamps the used
     width whoever wins width, so this settles it instead of adding one more
     chain to out-specify. */
  .woocommerce div.product .msf-product-top > .woocommerce-product-gallery,
  .woocommerce div.product .msf-product-top > .summary{
    min-width:100%;
  }
}

/* Stacked, the photo would run the full width of the page - on a tablet a
   720px square that pushes the price and the buttons below the fold.
   Capped and centred here; on a phone the cap does not bind and the photo
   stays full width, which is what a phone wants. */
@media (max-width:992px){
  .woocommerce div.product .woocommerce-product-gallery{
    max-width:420px;
    margin-inline:auto;
  }
}
/* ============================================================
   17. PRODUCT FAQ
   ============================================================ */
.msf-faq{ margin-top:52px; }
.msf-faq__heading{
  font-size:clamp(21px,2.4vw,28px);
  color:var(--msf-ink); line-height:1.2; margin:0 0 20px;
}
.msf-faq__item{ border-bottom:1px solid var(--msf-line); }
.msf-faq__item:first-of-type{ border-top:1px solid var(--msf-line); }

.msf-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:var(--msf-tap); padding:16px 2px;
  background:none; cursor:pointer; list-style:none;
  font-size:16px; font-weight:600; color:var(--msf-ink); line-height:1.45;
  transition:color .18s;
}
.msf-faq__q::-webkit-details-marker{ display:none; }
.msf-faq__q::marker{ content:''; }
.msf-faq__q:hover{ color:var(--msf-accent); }
.msf-faq__item[open] > .msf-faq__q{ color:var(--msf-accent); }

/* plus that becomes a minus, drawn rather than shipped as an icon */
.msf-faq__sign{ position:relative; flex:0 0 auto; width:20px; height:20px; }
.msf-faq__sign::before,
.msf-faq__sign::after{
  content:''; position:absolute; background:var(--msf-accent); border-radius:2px;
  transition:transform .22s ease, opacity .22s ease;
}
.msf-faq__sign::before{ left:0; top:9px; width:20px; height:2px; }
.msf-faq__sign::after{ left:9px; top:0; width:2px; height:20px; }
.msf-faq__item[open] .msf-faq__sign::after{ transform:rotate(90deg); opacity:0; }

.msf-faq__a{
  padding:0 2px 20px;
  color:var(--msf-muted); font-size:15px; line-height:1.8; max-width:78ch;
}
.msf-faq__a p{ margin:0; }

@media (prefers-reduced-motion:reduce){
  .msf-faq__sign::before,
  .msf-faq__sign::after{ transition:none; }
}

@media (max-width:640px){
  /* Filters and Sorting split the row, each exactly the same width.
     position:static hands the panel's positioning up to .msf-shop-bar, so
     it spans the whole row instead of being trapped in a half-width
     flex item. */
  .msf-filters{ flex:1 1 0; width:auto; min-width:0; position:static; }
  .msf-filters__toggle{ width:100%; justify-content:center; }
  .msf-filters__panel{
    top:calc(100% + 8px); left:0; right:0; width:auto;
    max-height:min(70vh,520px);
  }
  .woocommerce .msf-shop-bar .woocommerce-result-count{ margin-right:0; width:100%; }

  .msf-faq{ margin-top:38px; }
  .msf-faq__q{ font-size:15px; padding:14px 2px; }
  .msf-faq__a{ font-size:14.5px; padding-bottom:16px; }
}
/* ============================================================
   18. FILTERS AND SORTING ARE ONE CONTROL PAIR
   They read as the same kind of control, so the box is defined once
   here instead of twice with values free to drift apart.
   ============================================================ */
.woocommerce .msf-shop-bar{ position:relative; }

.woocommerce .msf-shop-bar .woocommerce-ordering select,
.msf-filters__toggle{
  box-sizing:border-box;
  height:42px; min-height:42px;
  border:1px solid var(--msf-line); border-radius:999px;
  background-color:var(--msf-bg); color:var(--msf-ink);
  font-family:inherit; font-size:14px; font-weight:500;
}
/* room for the native dropdown arrow on one, even padding on the other */
.woocommerce .msf-shop-bar .woocommerce-ordering select{ padding:0 38px 0 16px; }
.msf-filters__toggle{ padding:0 18px; }
/* ============================================================
   19. BREADCRUMB
   Fills the empty band above the product and gives the page a sense of
   place. Printed by msf_product_breadcrumb().
   ============================================================ */
.woocommerce .msf-crumbs{ margin:0 0 20px; }
.woocommerce .msf-crumbs ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  list-style:none; margin:0; padding:0;
}
.woocommerce .msf-crumbs li{ display:flex; align-items:center; gap:7px; margin:0; padding:0; }
/* chevron drawn from two borders - no icon, no font */
.woocommerce .msf-crumbs li + li::before{
  content:''; flex:0 0 auto; width:5px; height:5px;
  border-right:1.5px solid var(--msf-line);
  border-bottom:1.5px solid var(--msf-line);
  transform:rotate(-45deg);
}
.woocommerce .msf-crumbs a,
.woocommerce .msf-crumbs span{ font-size:13.5px; line-height:1.5; }
.woocommerce .msf-crumbs a{
  color:var(--msf-muted); text-decoration:none; transition:color .18s;
}
.woocommerce .msf-crumbs a:hover{ color:var(--msf-accent); }
.woocommerce .msf-crumbs span[aria-current]{ color:var(--msf-ink); font-weight:600; }
/* the product title runs long; the crumb shows what fits and keeps the
   full text in the title attribute and in the schema */
.woocommerce .msf-crumbs span[aria-current]{
  max-width:46ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============================================================
   20. PRICE IN THE BRAND COLOUR
   The live price carries the accent; the struck-through original stays
   quiet so the discount reads at a glance instead of competing.
   ============================================================ */
.woocommerce div.product p.price,
.woocommerce div.product p.price ins,
.woocommerce div.product p.price ins .amount,
.woocommerce div.product .woocommerce-variation-price .price,
.woocommerce div.product .woocommerce-variation-price .price ins{
  color:var(--msf-accent);
}
.woocommerce div.product p.price del,
.woocommerce div.product p.price del .amount,
.woocommerce div.product .woocommerce-variation-price del{
  color:var(--msf-muted); opacity:1; font-weight:400;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount{ color:var(--msf-accent); }
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount{ color:var(--msf-muted); }

/* ============================================================
   21. ADD TO CART + BUY IT NOW SHARE ONE ROW
   ============================================================ */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
}
.woocommerce div.product form.cart div.quantity{ flex:0 0 auto; margin:0; }

.woocommerce div.product form.cart button.single_add_to_cart_button{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 20px; white-space:nowrap;
  /* WooCommerce gives .button a margin-bottom:1em, and align-items:center
     centres the MARGIN box - so that 16px lifted both buttons 8px above
     the quantity field and read as the quantity sitting too low. */
  margin:0;
  transition:transform .18s ease, box-shadow .18s ease,
             background .18s ease, color .18s ease, border-color .18s ease;
}

/* lift on hover, settle on press - enough to feel responsive without
   moving the row around */
.woocommerce div.product form.cart button.single_add_to_cart_button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(234,106,51,.26);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:active{
  transform:translateY(0); box-shadow:none;
}

/* ============================================================
   22. ASK A QUESTION
   Sits under the pair as a full-width third action, so the row above
   stays a clean two-up.
   ============================================================ */
.woocommerce div.product .msf-ask{
  display:flex; width:100%; margin-top:12px;
  align-items:center; justify-content:center;
  min-height:48px;
}

@media (prefers-reduced-motion:reduce){
  .woocommerce div.product form.cart button.single_add_to_cart_button{ transition:none; }
  .woocommerce div.product form.cart button.single_add_to_cart_button:hover{ transform:none; }
}

@media (max-width:640px){
  /* "Add to cart" and "Buy Now" are short enough to share one row even
     on a small phone, so the row stays nowrap and the two split whatever
     is left after the quantity box */
  .woocommerce div.product form.cart:not(.variations_form),
  .woocommerce div.product .woocommerce-variation-add-to-cart{ gap:8px; flex-wrap:wrap; }
  .woocommerce div.product form.cart div.quantity .qty{ width:58px; height:48px; }
  .woocommerce div.product form.cart button.single_add_to_cart_button{
    flex:1 1 0; min-width:0; min-height:48px;
    padding:0 10px; font-size:15px;
  }
  .woocommerce div.product .msf-ask{ min-height:48px; font-size:14px; }
  .woocommerce .msf-crumbs{ margin-bottom:14px; }
  .woocommerce .msf-crumbs a,
  .woocommerce .msf-crumbs span{ font-size:12.5px; }
  .woocommerce .msf-crumbs span[aria-current]{ max-width:22ch; }
}
@media (max-width:380px){
  /* last squeeze before the pair would have to wrap */
  .woocommerce div.product form.cart div.quantity .qty{ width:52px; }
  .woocommerce div.product form.cart button.single_add_to_cart_button{ padding:0 6px; font-size:14px; }
}
/* ============================================================
   23. DISCOUNT BADGE ON THE PHOTO
   msf_move_sale_flash() renders it inside the gallery; this anchors it
   to the top-left of the image. Woo's own rule is (0,2,1) and pins it to
   the top-RIGHT of div.product, so both the #content and plain variants
   are written out to outrank it either way.
   ============================================================ */
.woocommerce #content div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery{ position:relative; }

.woocommerce #content div.product .woocommerce-product-gallery .onsale,
.woocommerce div.product .woocommerce-product-gallery .onsale{
  position:absolute; top:14px; left:14px; right:auto; bottom:auto;
  margin:0; z-index:4;
  padding:6px 14px; border-radius:999px;
  background:var(--msf-accent); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.03em; line-height:1.5;
  min-width:0; min-height:0;
}

@media (max-width:640px){
  .woocommerce #content div.product .woocommerce-product-gallery .onsale,
  .woocommerce div.product .woocommerce-product-gallery .onsale{
    top:10px; left:10px; padding:5px 11px; font-size:11px;
  }
}
/* ============================================================
   24. SHOP CARD DISCOUNT BADGE, ON THE IMAGE
   Astra ships `.woocommerce-js ul.products li.product .onsale
   { top:0; right:0; left:auto; margin:-.5em -.5em 0 0 }` at (0,4,2) -
   that negative margin is exactly what pushes the badge OUTSIDE the
   photo's corner, and its min-width/min-height of 3em make it a circle.
   Outranked here at (0,5,2) by naming the li's own .type-product class,
   with the .woocommerce-js and #content variants spelled out too so it
   wins whichever of them is on the page.
   ============================================================ */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-js ul.products li.product .astra-shop-thumbnail-wrap{ position:relative; }

.woocommerce ul.products li.product.type-product .onsale,
.woocommerce-js ul.products li.product.type-product .onsale,
.woocommerce #content ul.products li.product.type-product .onsale{
  position:absolute; top:10px; left:10px; right:auto; bottom:auto;
  margin:0; z-index:3;
  min-width:0; min-height:0;
  padding:5px 12px; border-radius:999px;
  background:var(--msf-accent); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.03em;
  line-height:1.5; text-align:center; white-space:nowrap;
}

@media (max-width:640px){
  .woocommerce ul.products li.product.type-product .onsale,
  .woocommerce-js ul.products li.product.type-product .onsale,
  .woocommerce #content ul.products li.product.type-product .onsale{
    top:8px; left:8px; padding:4px 10px; font-size:11px;
  }
}
/* ============================================================
   25. RAZORPAY MAGIC CHECKOUT "BUY NOW"
   Razorpay's PDP button ships as
   <button id="btn-1cc-pdp" class="button alt single_add_to_cart_button">
   - the same class WooCommerce puts on Add to cart. Our rule turns that
   class into the outline/secondary style, so Buy Now was rendering
   identically to Add to cart. Targeted by its id, which outranks that
   class rule, it becomes the primary action again.
   ============================================================ */
.woocommerce div.product #btn-1cc-pdp,
.woocommerce #content div.product #btn-1cc-pdp{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--msf-tap); padding:0 20px;
  /* Razorpay ships #btn-1cc-pdp{margin-left:5px} inline - an id rule, so
     the class reset above cannot reach it. */
  margin:0;
  border:1px solid var(--msf-accent); border-radius:999px;
  background:var(--msf-accent); color:#fff;
  font-size:16px; font-weight:600; line-height:1.2;
  white-space:nowrap; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.woocommerce div.product #btn-1cc-pdp:hover,
.woocommerce #content div.product #btn-1cc-pdp:hover{
  background:var(--msf-accent-dark); border-color:var(--msf-accent-dark); color:#fff;
  transform:translateY(-2px); box-shadow:0 8px 18px rgba(234,106,51,.26);
}
.woocommerce div.product #btn-1cc-pdp:active{ transform:translateY(0); box-shadow:none; }
/* Razorpay adds .disabled when no variation is chosen or qty is 0 */
.woocommerce div.product #btn-1cc-pdp.disabled,
.woocommerce div.product #btn-1cc-pdp:disabled{
  background:var(--msf-line); border-color:var(--msf-line);
  color:var(--msf-muted); cursor:not-allowed;
  transform:none; box-shadow:none;
}

@media (max-width:640px){
  .woocommerce div.product #btn-1cc-pdp{ min-height:48px; padding:0 10px; font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .woocommerce div.product #btn-1cc-pdp{ transition:none; }
  .woocommerce div.product #btn-1cc-pdp:hover{ transform:none; }
}

/* ============================================================
   26. MY ACCOUNT: SIGN IN / SIGN UP
   A first-time visitor used to land on two forms side by side and have to
   read both before deciding anything. Now msf_signin_chooser() in
   inc/msf-account-ui.php prints one card with three choices - email,
   Google, create an account - and WooCommerce's own Login and Register
   forms sit below it as panels that open on demand.

   The panels are only collapsed under .msf-js, the flag functions.php
   writes in wp_head. If assets/js/msf-account.js never runs, both forms
   stay on screen and the two buttons remain plain anchors to
   #customer_login, so a dead toggle can never lock anyone out.

   WooCommerce floats those columns at width:48% - (0,3,0) - so everything
   here hangs off #customer_login, which is (1,2,0) and outranks it.
   min-width repeats the point for the same reason as section 16.
   ============================================================ */
/* The cap is for the sign-in screen only. Orders and Addresses share the
   woocommerce-account body class and must stay full width - see
   msf_account_body_class() in inc/msf-account-ui.php. */
.woocommerce-account.msf-account-signin .woocommerce,
.woocommerce-account.msf-account-signin .entry-header{
  max-width:460px;
  margin-inline:auto;
}

.woocommerce-account .entry-header h1{
  font-size:clamp(26px,3vw,32px);
  line-height:1.2;
  margin-bottom:6px;
}

/* ---------- the chooser ---------- */
.msf-signin{
  padding:28px;
  background:var(--msf-bg);
  border:1px solid var(--msf-line);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.msf-signin__title{
  font-size:22px;
  line-height:1.25;
  color:var(--msf-ink);
  margin:0 0 6px;
}

.msf-signin__lede{
  font-size:14px;
  line-height:1.5;
  color:var(--msf-muted);
  margin:0 0 22px;
}

.msf-signin__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:48px;
  padding:0 18px;
  font-size:15.5px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:999px;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.msf-signin__btn + .msf-signin__btn{ margin-top:12px; }

.msf-signin__btn:focus-visible{
  outline:2px solid var(--msf-ink);
  outline-offset:2px;
}

.msf-signin__btn--primary{
  color:#fff;
  background:var(--msf-accent);
  border-color:var(--msf-accent);
}

.msf-signin__btn--primary:hover,
.msf-signin__btn--primary:focus{
  color:#fff;
  background:var(--msf-accent-dark);
  border-color:var(--msf-accent-dark);
  transform:translateY(-1px);
}

/* Google's brand guidance asks for its own button, not a themed one. */
.msf-signin__btn--google{
  color:var(--msf-ink);
  background:var(--msf-bg);
  border-color:#DADCE0;
}

.msf-signin__btn--google:hover,
.msf-signin__btn--google:focus{
  color:var(--msf-ink);
  background:var(--msf-hover);
  border-color:#C8CBD0;
}

.msf-signin__btn--ghost{
  color:var(--msf-ink);
  background:var(--msf-bg);
  border-color:var(--msf-ink);
}

.msf-signin__btn--ghost:hover,
.msf-signin__btn--ghost:focus{
  color:#fff;
  background:var(--msf-ink);
  border-color:var(--msf-ink);
}

.msf-signin__or{
  position:relative;
  margin:22px 0 16px;
  text-align:center;
}

.msf-signin__or::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:var(--msf-line);
}

.msf-signin__or span{
  position:relative;
  padding:0 12px;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--msf-muted);
  background:var(--msf-bg);
}

/* the multicoloured G from msf_google_glyph() */
.msf-auth__g{ flex:0 0 auto; display:block; }

/* ---------- the two forms, as panels ---------- */
.woocommerce-account #customer_login{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:0;
}

.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2{
  float:none;
  width:auto;
  min-width:100%;
  margin:16px 0 0;
  padding:26px;
  background:var(--msf-bg);
  border:1px solid var(--msf-line);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* Collapsed only where the script can open them again. */
.msf-js .woocommerce-account #customer_login > .u-column1,
.msf-js .woocommerce-account #customer_login > .u-column2{
  display:none;
}

.msf-js .woocommerce-account #customer_login > .is-open{
  display:block;
}

.woocommerce-account #customer_login h2{
  font-size:19px;
  line-height:1.25;
  color:var(--msf-ink);
  margin:0 0 18px;
  padding:0;
  border:0;
}

/* ---------- fields ---------- */
.woocommerce-account #customer_login .form-row{
  margin:0 0 16px;
  padding:0;
  display:block;
}

.woocommerce-account #customer_login label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  line-height:1.3;
  color:var(--msf-ink);
  margin:0 0 6px;
}

.woocommerce-account #customer_login label .required{
  color:var(--msf-accent);
  text-decoration:none;
  border:0;
}

.woocommerce-account #customer_login .woocommerce-Input,
.woocommerce-account #customer_login input.input-text{
  box-sizing:border-box;
  width:100%;
  min-height:46px;
  padding:0 14px;
  font:inherit;
  font-size:15px;
  color:var(--msf-ink);
  background:var(--msf-bg);
  border:1px solid var(--msf-line);
  border-radius:10px;
  box-shadow:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}

.woocommerce-account #customer_login .woocommerce-Input:hover,
.woocommerce-account #customer_login input.input-text:hover{
  border-color:#D8D8D8;
}

/* Astra draws a dotted focus outline on inputs; this is a ring that matches
   the rest of the shop UI instead. */
.woocommerce-account #customer_login .woocommerce-Input:focus,
.woocommerce-account #customer_login input.input-text:focus{
  outline:0;
  border-style:solid;
  border-width:1px;
  border-color:var(--msf-accent);
  box-shadow:0 0 0 3px var(--msf-accent-soft);
}

.woocommerce-account #customer_login .woocommerce-form-login__rememberme{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:400;
  color:var(--msf-muted);
  margin:0 0 16px;
  cursor:pointer;
}

.woocommerce-account #customer_login .woocommerce-form-login__rememberme input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--msf-accent);
}

/* ---------- submit ---------- */
.woocommerce-account #customer_login button.woocommerce-button,
.woocommerce-account #customer_login button.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:var(--msf-tap);
  padding:0 20px;
  font:inherit;
  font-size:16px;
  font-weight:600;
  line-height:1;
  color:#fff;
  background:var(--msf-accent);
  border:1px solid var(--msf-accent);
  border-radius:999px;
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.woocommerce-account #customer_login button.woocommerce-button:hover,
.woocommerce-account #customer_login button.button:hover,
.woocommerce-account #customer_login button.woocommerce-button:focus,
.woocommerce-account #customer_login button.button:focus{
  color:#fff;
  background:var(--msf-accent-dark);
  border-color:var(--msf-accent-dark);
  transform:translateY(-1px);
}

.woocommerce-account #customer_login button.woocommerce-button:focus-visible,
.woocommerce-account #customer_login button.button:focus-visible{
  outline:2px solid var(--msf-ink);
  outline-offset:2px;
}

/* ---------- lost password + privacy note ---------- */
.woocommerce-account #customer_login .woocommerce-LostPassword{
  margin:14px 0 0;
  font-size:14px;
  text-align:center;
}

.woocommerce-account #customer_login .woocommerce-LostPassword a{
  color:var(--msf-accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.woocommerce-account #customer_login .woocommerce-LostPassword a:hover,
.woocommerce-account #customer_login .woocommerce-LostPassword a:focus-visible{
  border-bottom-color:currentColor;
}

.woocommerce-account #customer_login .woocommerce-privacy-policy-text{
  margin:0 0 18px;
}

.woocommerce-account #customer_login .woocommerce-privacy-policy-text p{
  font-size:12.5px;
  line-height:1.6;
  color:var(--msf-muted);
  margin:0;
}

.woocommerce-account #customer_login .woocommerce-privacy-policy-text a{
  color:var(--msf-muted);
  text-decoration:underline;
}

/* ---------- phones ---------- */
@media (max-width:640px){
  .msf-signin{ padding:24px 18px; border-radius:14px; }
  .woocommerce-account #customer_login > .u-column1,
  .woocommerce-account #customer_login > .u-column2{
    padding:22px 18px;
    border-radius:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  .msf-signin__btn,
  .woocommerce-account #customer_login .woocommerce-Input,
  .woocommerce-account #customer_login input.input-text,
  .woocommerce-account #customer_login button.woocommerce-button,
  .woocommerce-account #customer_login button.button{
    transition:none;
  }
  .msf-signin__btn--primary:hover,
  .woocommerce-account #customer_login button.woocommerce-button:hover,
  .woocommerce-account #customer_login button.button:hover{
    transform:none;
  }
}

/* ============================================================
   27. MY ACCOUNT DASHBOARD
   Once the page is as wide as the header (section 14 in
   msf-overrides.css), WooCommerce's floated 30% / 68% split puts the
   little menu of links in a 394px column, which reads as a mistake. A
   grid with a fixed menu column keeps it the size the links actually
   need and hands the rest of the width to the table.

   Scoped away from the sign-in screen with :not(.msf-account-signin) -
   that class is added in inc/msf-account-ui.php - because when logged
   out this wrapper holds the chooser card, not a menu and a table.
   ============================================================ */
@media (min-width:993px){
  .woocommerce-account:not(.msf-account-signin) .woocommerce{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    column-gap:40px;
    align-items:start;
  }

  /* The notices belong across the top, not beside the menu. */
  .woocommerce-account:not(.msf-account-signin) .woocommerce > .woocommerce-notices-wrapper{
    grid-column:1 / -1;
  }

  /* WooCommerce floats these at 30%/68%; min-width settles the used width
     whoever wins `width`, same reasoning as section 16. */
  .woocommerce-account:not(.msf-account-signin) .woocommerce > .woocommerce-MyAccount-navigation{
    grid-column:1;
    float:none;
    width:auto;
    min-width:100%;
  }

  .woocommerce-account:not(.msf-account-signin) .woocommerce > .woocommerce-MyAccount-content{
    grid-column:2;
    float:none;
    width:auto;
    min-width:100%;
    margin:0;
  }
}

/* ============================================================
   28. REVIEW STARS
   Astra prints one colour for the whole widget in its inline
   woocommerce-general CSS:

     .woocommerce .star-rating,
     .woocommerce .comment-form-rating .stars a,
     .woocommerce .star-rating::before { color: var(--ast-global-color-3); }

   which resolves to #6E6155 - the SAME muted brown for the filled
   stars and for the empty track behind them, so a 3-star rating and
   a 5-star rating look identical. Splitting the two is therefore not
   only a colour change; it is what makes a rating readable at all.

   The filled stars take the brand accent, the track a pale wash of
   the same colour, so they read as one family with an obvious
   difference between them.

   Astra's selectors are (0,2,0) for the widget and (0,2,1) for the
   track. Leading with body - which carries the woocommerce class on
   the shop, on a product and on a category archive alike - adds one
   type to each and settles it without a longer chain.
   ============================================================ */

body.woocommerce .star-rating,
body.woocommerce .woocommerce-product-rating .star-rating{
  color:var(--msf-accent);
}

/* The unfilled track. The rgba line is the fallback; browsers that
   understand color-mix take the second and follow the token if it
   ever moves. */
body.woocommerce .star-rating::before{
  color:rgba(234,106,51,.26);
  color:color-mix(in srgb, var(--msf-accent) 26%, #FFFFFF);
}

/* ---- the stars you click when writing a review ---- */

body.woocommerce .comment-form-rating .stars a::before,
body.woocommerce p.stars a::before{
  color:rgba(234,106,51,.32);
  color:color-mix(in srgb, var(--msf-accent) 32%, #FFFFFF);
  transition:color .15s ease;
}

/* WooCommerce swaps the glyph with content: on these same states, so
   the colour has to follow exactly the same set or a star changes
   shape without changing colour. */
body.woocommerce .comment-form-rating .stars:hover a::before,
body.woocommerce p.stars:hover a::before,
body.woocommerce .comment-form-rating .stars.selected a.active::before,
body.woocommerce p.stars.selected a.active::before,
body.woocommerce .comment-form-rating .stars.selected a:not(.active)::before,
body.woocommerce p.stars.selected a:not(.active)::before{
  color:var(--msf-accent);
}

body.woocommerce .comment-form-rating .stars a:hover~a::before,
body.woocommerce p.stars a:hover~a::before,
body.woocommerce .comment-form-rating .stars.selected a.active~a::before,
body.woocommerce p.stars.selected a.active~a::before{
  color:rgba(234,106,51,.32);
  color:color-mix(in srgb, var(--msf-accent) 32%, #FFFFFF);
}

body.woocommerce p.stars a:focus-visible{
  outline:2px solid var(--msf-accent);
  outline-offset:2px;
  border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  body.woocommerce p.stars a::before{ transition:none; }
}