/* Shop — Direction D · Daylight
   Loaded only on WooCommerce pages. Everything here assumes base.css tokens. */

/* ---------------------------------------------------------------- picker */
.mowerpick{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--c); border:1px solid var(--ln); border-radius:var(--r);
  padding:18px 22px; margin:0 0 30px;
}
.mowerpick label{
  font-family:var(--fd); font-style:italic; font-weight:700; font-size:14px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink);
}
.mowerpick select{
  font-family:var(--fb); font-size:16px; color:var(--ink);
  background:var(--p); border:1px solid var(--ln2); border-radius:999px;
  padding:11px 18px; min-width:230px; cursor:pointer;
}
.mowerpick select:focus-visible{outline:2px solid var(--g2); outline-offset:2px}
.mowerpick .btn{padding:11px 22px; font-size:14px}
/* The picker's JS hides the submit button by setting the hidden attribute, but the
   browser's own [hidden]{display:none} is a single-element rule and .btn's
   display:inline-flex outranks it, so the button stayed visible. This rule is
   specific enough to win. Without JS the attribute is never set and the button
   shows, which is the point. */
.mowerpick .btn[hidden]{display:none}
.mowerpick .clear{
  font-family:var(--fm); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mu);
}

/* ---------------------------------------------------------------- breadcrumb + notices */
.gm-crumb{
  font-family:var(--fm); font-size:12px; letter-spacing:.05em;
  color:var(--mu); margin:0 0 18px;
}
.gm-crumb a{color:var(--mu); text-decoration:none; border-bottom:1px solid var(--ln2)}
.gm-crumb a:hover{color:var(--g1)}
.gm-crumb .sep{opacity:.45; padding:0 4px}

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--c); border:1px solid var(--ln); border-left:3px solid var(--g2);
  border-radius:10px; padding:14px 18px; margin:0 0 22px; list-style:none;
  font-size:16px; color:var(--bd);
}
.woocommerce-error{border-left-color:var(--flag)}

.woocommerce-result-count{
  font-family:var(--fm); font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--mu); margin:0 0 18px;
}
.woocommerce-ordering select{
  font-family:var(--fb); font-size:15px; padding:9px 14px;
  border:1px solid var(--ln2); border-radius:999px; background:var(--c);
}

/* ---------------------------------------------------------------- product grid */

/* WooCommerce ships woocommerce-layout.css, which floats each product and gives it
   width:22.05%. Inside a CSS grid that makes every card 22% of its own column — they
   collapse to about 57px. Those rules are .woocommerce ul.products li.product, so the
   resets below carry an extra class to outrank them rather than resorting to
   !important. Keep the .woocommerce prefix on any new rule that fights the plugin. */
.woocommerce .shop ul.products li.product,
.shop ul.products li.product{
  width:auto; float:none; clear:none; margin:0;
}
.woocommerce .shop ul.products::before,
.woocommerce .shop ul.products::after{content:none; display:none}

.shop ul.products{
  list-style:none; margin:0; padding:0;
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
}
.shop ul.products li.product{
  background:var(--c); border:1px solid var(--ln); border-radius:var(--r);
  padding:16px 16px 18px; display:flex; flex-direction:column; gap:2px;
  position:relative;
}
.shop ul.products li.product a{text-decoration:none; color:inherit}

/* The image box is a fixed square. Husqvarna's studio shots vary wildly in how much
   of the frame the part fills — a small bearing is shot as large as a mower house —
   so a fixed box with contain is what keeps the grid from looking random.

   The tile is WHITE, not the cream ground: some of Husqvarna's images have a white
   backdrop baked in rather than transparency, and on a cream tile those showed as a
   hard white rectangle. White also matches what a phone photo shot on white paper
   will look like, so Scott's own pictures will drop in without a seam. */
.shop ul.products li.product img{
  width:100%; height:172px; object-fit:contain;
  background:#fff; border:1px solid var(--ln); border-radius:10px;
  margin:0 0 12px; padding:10px;
}
.shop ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--fd); font-style:italic; font-weight:700; text-transform:uppercase;
  font-size:15px; line-height:1.15; color:var(--ink); margin:0 0 4px; letter-spacing:0;
}
.gm-sku{
  display:block; font-family:var(--fm); font-size:11.5px; letter-spacing:.08em;
  color:var(--mu); margin:0 0 6px;
}
.gm-fits{
  display:block; font-size:13px; line-height:1.35; color:var(--bd);
  margin:0 0 10px;
}
.gm-fits .more{color:var(--mu)}
.shop ul.products li.product .price{
  font-family:var(--fd); font-style:italic; font-weight:700; font-size:19px;
  color:var(--g1); margin:auto 0 12px; display:block;
}
.shop ul.products li.product .button{
  display:inline-block; text-align:center; text-decoration:none;
  font-family:var(--fd); font-style:italic; font-weight:700; font-size:13.5px;
  text-transform:uppercase; letter-spacing:.07em; padding:11px 18px;
  border-radius:999px; border:1.5px solid var(--ln2); color:var(--g1);
  background:transparent; cursor:pointer;
}
.shop ul.products li.product .button:hover{border-color:var(--g2); background:#EAF4E5}
.shop ul.products li.product .added_to_cart{
  display:block; margin-top:8px; font-family:var(--fm); font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--g1);
}
.woocommerce-loop-product__link{display:flex; flex-direction:column}

/* ---------------------------------------------------------------- single product */
.shop-single div.product{
  display:grid; gap:40px; align-items:start;
  grid-template-columns:minmax(0,440px) minmax(0,1fr);
}
.shop-single div.product .woocommerce-product-gallery{
  background:var(--c); border:1px solid var(--ln); border-radius:var(--r); padding:22px;
  position:relative;
}
/* WooCommerce's zoom trigger is a bare 🔍 glyph. Keep the affordance, lose the sticker. */
.woocommerce-product-gallery__trigger{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ln); border-radius:999px; background:var(--p);
  font-size:14px; line-height:1; text-decoration:none; opacity:.6;
}
.woocommerce-product-gallery__trigger:hover{opacity:1; border-color:var(--ln2)}
.shop-single div.product .woocommerce-product-gallery img{
  width:100%; height:auto; max-height:380px; object-fit:contain; margin:0 auto;
  background:#fff;
}
.shop-single div.product .summary{margin:0}
.shop-single div.product .product_title{
  font-size:clamp(22px,3vw,30px); margin:0 0 10px;
}
.shop-single div.product .price{
  font-family:var(--fd); font-style:italic; font-weight:700;
  font-size:28px; color:var(--g1); margin:0 0 4px; display:block;
}
.shop-single .woocommerce-product-details__short-description{
  font-family:var(--fm); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mu); margin:0 0 16px;
}
.shop-single .stock{
  display:inline-block; font-family:var(--fm); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 12px; border-radius:999px;
  background:#EAF4E5; color:var(--g1); margin:0 0 18px;
}
.shop-single .stock.out-of-stock{background:var(--flag-w); color:var(--flag)}
.shop-single form.cart{display:flex; gap:12px; align-items:center; margin:0 0 20px; flex-wrap:wrap}
.shop-single form.cart .quantity input{
  width:78px; font-family:var(--fb); font-size:16px; text-align:center;
  padding:12px 10px; border:1px solid var(--ln2); border-radius:999px; background:var(--c);
}
.shop-single form.cart button.button{
  font-family:var(--fd); font-style:italic; font-weight:700; font-size:15px;
  text-transform:uppercase; letter-spacing:.07em; padding:14px 28px;
  border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  background:linear-gradient(95deg,#2E9E2E,#6FDA5F); color:#07130A;
}
.shop-single form.cart button.button:hover{filter:brightness(1.07)}
.shop-single .product_meta{
  font-family:var(--fm); font-size:12px; letter-spacing:.05em;
  color:var(--mu); border-top:1px solid var(--ln); padding-top:14px; margin-top:4px;
}
.shop-single .product_meta a{color:var(--mu)}

/* tabs */
.woocommerce-tabs{grid-column:1 / -1; margin-top:8px}
.woocommerce-tabs ul.tabs{
  list-style:none; margin:0 0 22px; padding:0 0 2px;
  display:flex; gap:24px; border-bottom:1px solid var(--ln); flex-wrap:wrap;
}
.woocommerce-tabs ul.tabs li a{
  display:inline-block; padding:0 0 12px; text-decoration:none;
  font-family:var(--fd); font-style:italic; font-weight:700; font-size:13.5px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--mu);
  border-bottom:2px solid transparent; margin-bottom:-3px;
}
.woocommerce-tabs ul.tabs li.active a{color:var(--ink); border-bottom-color:var(--g2)}
.woocommerce-tabs h2{display:none}
.woocommerce-tabs .panel p{font-size:17px; color:var(--bd); max-width:var(--read)}
.woocommerce-tabs table.shop_attributes{
  width:100%; max-width:824px; border-collapse:collapse; font-size:16px;
}
.woocommerce-tabs table.shop_attributes th{
  text-align:left; padding:12px 16px 12px 0; width:190px; vertical-align:top;
  font-family:var(--fm); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--g2); font-weight:600; border-bottom:1px solid var(--ln);
}
.woocommerce-tabs table.shop_attributes td{
  padding:12px 0; color:var(--bd); border-bottom:1px solid var(--ln);
}
.woocommerce-tabs table.shop_attributes td p{margin:0; max-width:none}

/* related */
.related.products{grid-column:1 / -1; margin-top:16px; border-top:1px solid var(--ln); padding-top:32px}
.related.products > h2{font-size:clamp(20px,2.6vw,25px); margin:0 0 22px}

/* ---------------------------------------------------------------- cart / checkout / account */
.woocommerce table.shop_table{
  width:100%; border-collapse:collapse; background:var(--c);
  border:1px solid var(--ln); border-radius:var(--r); overflow:hidden; font-size:16px;
}
.woocommerce table.shop_table th{
  text-align:left; padding:14px 16px; background:var(--s2);
  font-family:var(--fm); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--bd); font-weight:600;
}
.woocommerce table.shop_table td{padding:14px 16px; border-top:1px solid var(--ln); color:var(--bd)}
.woocommerce table.shop_table img{width:56px; height:56px; object-fit:contain; background:var(--p); border-radius:8px}
.woocommerce .cart-collaterals,.woocommerce-checkout-review-order{margin-top:28px}
.woocommerce .cart_totals h2,.woocommerce-billing-fields h3,#order_review_heading{
  font-size:20px; margin:0 0 16px;
}
.woocommerce form .form-row{margin:0 0 16px}
.woocommerce form .form-row label{
  display:block; font-family:var(--fm); font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mu); margin:0 0 6px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%; font-family:var(--fb); font-size:16px; color:var(--ink);
  background:var(--c); border:1px solid var(--ln2); border-radius:10px; padding:13px 15px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{outline:2px solid var(--g2); outline-offset:1px}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  font-family:var(--fd); font-style:italic; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.07em; padding:13px 24px;
  border-radius:999px; border:1.5px solid var(--ln2); background:transparent;
  color:var(--g1); cursor:pointer; text-decoration:none; display:inline-block;
}
.woocommerce .button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #place_order{
  background:linear-gradient(95deg,#2E9E2E,#6FDA5F); color:#07130A; border-color:transparent;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:860px){
  .shop-single div.product{grid-template-columns:1fr; gap:26px}
  .shop-single div.product .woocommerce-product-gallery img{max-height:300px}
}
@media (max-width:640px){
  .shop ul.products{grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px}
  .shop ul.products li.product{padding:12px 12px 14px}
  .shop ul.products li.product img{height:120px; margin-bottom:9px}
  .shop ul.products li.product .woocommerce-loop-product__title{font-size:13.5px}
  .gm-fits{font-size:12px}
  .mowerpick{padding:15px 16px; gap:10px}
  .mowerpick select{min-width:0; width:100%}
  .mowerpick .btn{width:100%}
}

/* ---------------------------------------------------------------- featured strip */
.gm-featured{margin:0 0 34px}
.gm-featured-head{display:flex; flex-direction:column; gap:6px; margin:0 0 20px}
.gm-featured-head h2{font-size:clamp(20px,2.6vw,26px)}
.gm-featured-head .lede{font-size:16px}
.gm-featured + .mowerpick{margin-top:0}
/* A quiet rule between the showcase and the working part of the page. */
.gm-featured::after{
  content:""; display:block; height:1px; background:var(--ln); margin:30px 0 0;
}
@media(max-width:640px){
  .gm-featured{margin-bottom:24px}
  .gm-featured::after{margin-top:22px}
}

/* ------------------------------------------------- out of stock call-to-action */
.gm-oos{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin:0 0 26px; padding:16px 18px;
  background:var(--flag-w); border:1px solid var(--ln); border-radius:var(--r);
}
.gm-oos .btn{flex:0 0 auto; padding:11px 22px; font-size:14px}
.gm-oos span{flex:1 1 240px; font-size:14px; color:var(--mu); line-height:1.5}

/* ------------------------------------------------- catalogue mode (checkout closed) */
.gm-cat-note{
  background:var(--flag-w); border:1px solid var(--ln); border-left:4px solid var(--flag);
  border-radius:var(--r); padding:16px 20px; margin:0 0 26px;
  font-size:15.5px; line-height:1.55; color:var(--bd); max-width:none;
}
.gm-cat-note strong{color:var(--flag)}
.gm-cat-note a{color:var(--g1)}

.gm-ask{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 18px}
.gm-ask .btn{padding:12px 24px; font-size:14px}

.gm-partsform{
  background:var(--c); border:1px solid var(--ln); border-radius:var(--r);
  padding:20px 22px; margin:0 0 26px;
}
.gm-ask-part{font-size:14px; color:var(--mu); margin:0 0 16px}
.gm-ask-part strong{color:var(--ink)}
.gm-ask-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.gm-partsform label{
  display:flex; flex-direction:column; gap:5px;
  font-family:var(--fm); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bd);
}
.gm-partsform label span{color:var(--mu); text-transform:none; letter-spacing:0; font-size:11px}
.gm-partsform input,.gm-partsform textarea{
  font-family:var(--fb); font-size:15.5px; color:var(--ink);
  background:var(--p); border:1px solid var(--ln2); border-radius:10px;
  padding:10px 13px; width:100%;
}
.gm-partsform input:focus-visible,.gm-partsform textarea:focus-visible{
  outline:2px solid var(--g2); outline-offset:1px;
}
.gm-ask-notes{margin:14px 0 0}
/* The honeypot must be reachable by a bot and invisible to a person — not display:none,
   which some bots check for, and not off-screen in a way that steals focus. */
.gm-ask-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.gm-partsform button[type="submit"]{margin:18px 0 0}
.gm-ask-privacy{font-size:13px; color:var(--mu); margin:12px 0 0}