/* FindMy — WooCommerce shop styles
 * Loaded after WooCommerce's own stylesheets so brand rules win on load order.
 * Requires findmy-tokens.css and findmy-landing.css. */

/* ── Chrome guard ──────────────────────────────────────────────────────────
 * WooCommerce resets img sizing, which blew up the header and footer logos.
 * findmy-landing.css hardens these by specificity; repeating them here means the
 * win is also guaranteed by load order (this file depends on WooCommerce's).
 * !important because a plugin rule carrying it would still beat specificity —
 * confined to these two rules, and to the site chrome only. */
.fml .fml-header .fml-logo img { height:26px !important; max-height:26px !important; width:auto !important; max-width:none !important; display:block; }
.fml .fml-footer .fml-footer__grid img { height:30px !important; max-height:30px !important; width:auto !important; max-width:none !important; display:block; }
.fml .fml-header .fml-btn img, .fml .fml-footer .fml-footer__links img { height:auto !important; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.fml-shop { padding:56px 40px 96px; }
.fml-shop__inner { max-width:1100px; margin:0 auto; }
/* The hero above a shop view takes the shop's measure instead of the marketing
 * pages' narrower 840px one, so the eyebrow and the title start on the same
 * line as the gallery below them rather than 130px inside it. Both carry the
 * same side padding, and both drop it to 20px at the same 860px breakpoint, so
 * the two stay flush all the way down. */
.fml-pagehero--shop .fml-pagehero__inner { max-width:1100px; }
.fml .woocommerce-breadcrumb { font-size:13px; color:var(--fg-3); margin:0 0 26px; }
.fml .woocommerce-breadcrumb a { color:var(--fg-3); text-decoration:none; }
.fml .woocommerce-breadcrumb a:hover { color:var(--fm-teal-dark); }

/* Toolbar: result count + sorting */
.fml-shop__bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-bottom:18px; margin-bottom:32px; border-bottom:1px solid var(--fm-border); }
.fml .woocommerce-result-count { margin:0; font-size:13.5px; color:var(--fg-3); }
.fml .woocommerce-ordering { margin:0; }
.fml .woocommerce-ordering select,
.fml .woocommerce-widget-layered-nav-dropdown select,
.fml .variations select {
  appearance:none; -webkit-appearance:none;
  height:38px; padding:0 38px 0 14px;
  border:1px solid var(--fm-border); border-radius:var(--radius-sm);
  background:#fff url("../icons/chevron-down-tealdark.svg") no-repeat right 13px center/13px 13px;
  font-family:var(--font-sans); font-size:14px; color:var(--fg-1); cursor:pointer;
}
.fml .woocommerce-ordering select:focus-visible { outline:2px solid var(--fm-teal); outline-offset:2px; }

/* ── Product grid ──────────────────────────────────────────────────────── */
.fml ul.products { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; margin:0 !important; padding:0; width:100%; }
.fml ul.products li.product-category { width:auto !important; float:none !important; margin:0 !important; }
.fml ul.products::before, .fml ul.products::after { content:none; }
.fml ul.products li.product {
  /* WooCommerce sizes loop items with a percentage width and floats them; both
   * fight the grid, so they are overridden outright here. */
  width:auto !important; float:none !important; clear:none !important; margin:0 !important;
  display:flex; flex-direction:column; padding:0; text-align:left;
  background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden;
  transition:border-color var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard);
}
.fml ul.products li.product:hover { border-color:var(--fm-teal-40); box-shadow:var(--shadow-2); }
.fml ul.products li.product > a:first-of-type { display:flex; flex-direction:column; flex:1 1 auto; text-decoration:none; color:inherit; }
.fml ul.products li.product img { display:block; width:100%; height:auto; margin:0; aspect-ratio:4/3; object-fit:contain; background:var(--bg-2); padding:22px; border-bottom:1px solid var(--fm-divider); }
.fml ul.products li.product .woocommerce-loop-product__title {
  /* Pushes everything below it to the bottom of the card, so prices and buttons
   * line up across a row even when only some products carry a star rating. */
  padding:20px 22px 0; margin:0 0 auto;
  font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium);
  font-size:18px; line-height:1.3; color:var(--fg-1);
}
.fml ul.products li.product .woocommerce-loop-product__link:hover .woocommerce-loop-product__title { color:var(--fm-teal-dark); }
.fml ul.products li.product .price { display:block; padding:0 22px; margin:0; font-size:16px; font-weight:var(--fw-medium); color:var(--fm-teal-dark); }
.fml ul.products li.product .price del { color:var(--fg-4); font-weight:400; margin-right:8px; }
.fml ul.products li.product .price ins { text-decoration:none; }
.fml ul.products li.product .woocommerce-product-details__short-description { padding:10px 22px 0; font-size:14px; line-height:1.55; color:var(--fg-2); }
.fml ul.products li.product .star-rating { margin:12px 22px 0; font-size:13px; }
.fml ul.products li.product .price { padding-top:12px; }
.fml ul.products li.product .button {
  display:inline-flex !important; width:auto !important; align-self:flex-start;
  align-items:center; justify-content:center; text-align:center;
  margin:16px 22px 24px; margin-top:auto;
}
.fml ul.products li.product .added_to_cart { display:block; padding:0 22px 22px; margin-top:-12px; font-size:13px; color:var(--fm-teal-dark); }

/* Sale flash — amber, the brand's attention colour.
 * Woo's own `.woocommerce ul.products li.product .onsale` carries three classes
 * and pulls the badge out of the card with a negative margin, so this selector
 * has to out-rank it rather than merely follow it. */
.fml ul.products li.product span.onsale,
.fml div.product span.onsale,
.fml span.onsale {
  position:absolute; top:14px; left:14px; right:auto; min-height:0; min-width:0; line-height:1;
  margin:0 !important; padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--fm-amber); color:var(--fg-1);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:var(--fw-medium);
}
.fml ul.products li.product, .fml div.product { position:relative; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.fml .woocommerce a.button,
.fml .woocommerce button.button,
.fml .woocommerce input.button,
.fml a.button, .fml button.button, .fml input.button,
.fml #respond input#submit,
.fml .woocommerce-message a.button,
.fml .wc-block-components-button {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:42px; padding:0 20px; border:0; border-radius:var(--radius-sm);
  background:var(--fm-teal); color:#fff;
  font-family:var(--font-sans); font-size:14.5px; font-weight:var(--fw-medium); line-height:1;
  text-align:center; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background var(--duration-base) var(--easing-standard);
}
.fml .woocommerce a.button:hover, .fml .woocommerce button.button:hover,
.fml .woocommerce input.button:hover, .fml a.button:hover, .fml button.button:hover,
.fml input.button:hover, .fml #respond input#submit:hover { background:var(--fm-teal-dark); color:#fff; }
.fml .woocommerce a.button:active, .fml .woocommerce button.button:active { background:var(--fm-teal-darker); }
.fml .woocommerce a.button:focus-visible, .fml .woocommerce button.button:focus-visible,
.fml .woocommerce input.button:focus-visible { outline:2px solid var(--fm-teal); outline-offset:2px; }
.fml .woocommerce a.button.alt, .fml .woocommerce button.button.alt, .fml .woocommerce input.button.alt { background:var(--fm-teal); color:#fff; }
.fml .woocommerce a.button.alt:hover, .fml .woocommerce button.button.alt:hover { background:var(--fm-teal-dark); }
.fml .woocommerce a.button.disabled, .fml .woocommerce button.button:disabled,
.fml .woocommerce button.button.disabled { opacity:0.4; cursor:not-allowed; }
.fml .woocommerce a.added_to_cart { align-self:flex-start; }
/* Secondary actions (update cart, continue shopping) */
.fml .woocommerce button[name="update_cart"],
.fml .woocommerce a.button.wc-backward {
  background:#fff; color:var(--fg-1); border:1px solid var(--fm-border);
}
.fml .woocommerce button[name="update_cart"]:hover,
.fml .woocommerce a.button.wc-backward:hover { background:var(--bg-2); color:var(--fg-1); }

/* ── Single product ────────────────────────────────────────────────────── */
.fml div.product { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.fml div.product .woocommerce-product-gallery { float:none; width:auto; margin:0; }
.fml div.product .woocommerce-product-gallery__wrapper { border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:var(--bg-2); overflow:hidden; }
.fml div.product .woocommerce-product-gallery img { display:block; width:100%; height:auto; padding:34px; }
.fml div.product .summary { float:none; width:auto; margin:0; }
.fml div.product .product_title { font-size:clamp(26px,3.2vw,38px); line-height:1.12; margin:0 0 14px; }
.fml div.product .summary p.price, .fml div.product .summary span.price { display:block; margin:0 0 20px; font-size:26px; font-weight:var(--fw-medium); color:var(--fm-teal-dark); }
.fml div.product .summary p.price del { font-size:19px; color:var(--fg-4); font-weight:400; margin-right:10px; }
.fml div.product .summary p.price ins { text-decoration:none; }
.fml div.product .woocommerce-product-details__short-description { font-size:16px; line-height:1.65; color:var(--fg-2); }
.fml div.product .woocommerce-product-details__short-description p { margin:0 0 14px; }
.fml div.product form.cart { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:26px 0 22px; padding-top:24px; border-top:1px solid var(--fm-border); }
.fml div.product form.cart .button { height:48px; padding:0 26px; font-size:15.5px; }
.fml div.product .product_meta { padding-top:20px; border-top:1px solid var(--fm-border); font-size:13px; color:var(--fg-3); }
.fml div.product .product_meta > span { display:block; margin-bottom:6px; }
.fml div.product .product_meta a { color:var(--fm-teal-dark); text-decoration:none; }
.fml div.product .stock { font-size:13.5px; color:var(--fm-olive); margin:0 0 14px; }
.fml div.product .stock.out-of-stock { color:var(--status-danger); }

/* Quantity */
.fml .quantity { display:inline-flex; }
.fml .quantity input.qty {
  width:74px; height:48px; padding:0 10px; text-align:center;
  border:1px solid var(--fm-border); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:15px; color:var(--fg-1); background:#fff;
}
.fml .quantity input.qty:focus-visible { outline:2px solid var(--fm-teal); outline-offset:2px; }

/* Product tabs */
.fml div.product .woocommerce-tabs { grid-column:1 / -1; margin-top:24px; }
.fml div.product .woocommerce-tabs ul.tabs { display:flex; flex-wrap:wrap; gap:28px; list-style:none; margin:0 0 26px; padding:0 0 0; border-bottom:1px solid var(--fm-border); }
.fml div.product .woocommerce-tabs ul.tabs::before { content:none; }
.fml div.product .woocommerce-tabs ul.tabs li { margin:0; padding:0; border:0; background:none; border-radius:0; }
.fml div.product .woocommerce-tabs ul.tabs li::before, .fml div.product .woocommerce-tabs ul.tabs li::after { content:none; }
.fml div.product .woocommerce-tabs ul.tabs li a {
  display:block; padding:0 0 14px; font-size:14.5px; font-weight:var(--fw-medium);
  color:var(--fg-3); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.fml div.product .woocommerce-tabs ul.tabs li.active a, .fml div.product .woocommerce-tabs ul.tabs li a:hover { color:var(--fm-teal-dark); }
.fml div.product .woocommerce-tabs ul.tabs li.active a { border-bottom-color:var(--fm-teal); }
.fml div.product .woocommerce-tabs .panel { max-width:760px; font-size:16px; line-height:1.65; color:var(--fg-2); }
.fml div.product .woocommerce-tabs .panel h2 { font-size:22px; margin-bottom:14px; }
.fml div.product .shop_attributes { width:100%; border-collapse:collapse; font-size:14.5px; }
.fml div.product .shop_attributes th, .fml div.product .shop_attributes td { border:1px solid var(--fm-border); padding:10px 12px; text-align:left; }
.fml div.product .shop_attributes th { background:var(--bg-2); font-weight:var(--fw-medium); width:34%; }

/* Related / upsells */
.fml .related, .fml .upsells, .fml .cross-sells { grid-column:1 / -1; margin-top:72px; padding-top:48px; border-top:1px solid var(--fm-border); }
.fml .related > h2, .fml .upsells > h2, .fml .cross-sells > h2 { font-size:26px; margin-bottom:28px; }

/* ── Cart & checkout ───────────────────────────────────────────────────── */
.fml .woocommerce table.shop_table {
  width:100%; border-collapse:collapse; border:1px solid var(--fm-border); border-radius:var(--radius-lg);
  overflow:hidden; font-size:14.5px; margin:0 0 32px;
}
.fml .woocommerce table.shop_table th { background:var(--bg-2); border-bottom:1px solid var(--fm-border); padding:14px 16px; text-align:left; font-weight:var(--fw-medium); color:var(--fg-1); font-size:13px; letter-spacing:0.04em; text-transform:uppercase; }
.fml .woocommerce table.shop_table td { border-top:1px solid var(--fm-divider); padding:16px; color:var(--fg-2); }
.fml .woocommerce table.shop_table td.product-name a { color:var(--fg-1); text-decoration:none; font-weight:var(--fw-medium); }
.fml .woocommerce table.shop_table td.product-name a:hover { color:var(--fm-teal-dark); }
.fml .woocommerce table.shop_table img { width:56px; height:auto; border-radius:var(--radius-sm); border:1px solid var(--fm-border); }
.fml .woocommerce a.remove { color:var(--fg-3); font-weight:400; }
.fml .woocommerce a.remove:hover { background:none; color:var(--status-danger); }
.fml .cart-collaterals, .fml .woocommerce .cart-collaterals .cart_totals { width:100%; float:none; }
.fml .cart_totals h2, .fml #order_review_heading, .fml .woocommerce-billing-fields h3, .fml .woocommerce-additional-fields h3 { font-size:22px; margin-bottom:18px; }
.fml .woocommerce .cart-collaterals .cart_totals table.shop_table th { text-transform:none; font-size:14.5px; letter-spacing:0; background:#fff; }
.fml .wc-proceed-to-checkout { padding:0; }
.fml .wc-proceed-to-checkout a.checkout-button { display:flex; height:50px; font-size:16px; }
.fml .woocommerce form .form-row { padding:0; margin:0 0 18px; }
.fml .woocommerce form .form-row label { display:block; margin-bottom:7px; font-size:13px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml .woocommerce form .form-row .required { color:var(--status-danger); text-decoration:none; }
.fml .woocommerce form .form-row input.input-text,
.fml .woocommerce form .form-row textarea,
.fml .woocommerce form .form-row .select2-container .select2-selection--single,
.fml .woocommerce-form input.input-text {
  width:100%; min-height:42px; padding:11px 14px;
  border:1px solid var(--fm-border); border-radius:var(--radius-sm); background:#fff;
  font-family:var(--font-sans); font-size:15px; color:var(--fg-1); line-height:1.4;
}
.fml .woocommerce form .form-row textarea { min-height:110px; resize:vertical; }
.fml .woocommerce form .form-row input.input-text:focus,
.fml .woocommerce form .form-row textarea:focus { outline:2px solid var(--fm-teal); outline-offset:1px; border-color:var(--fm-teal); }
.fml #add_payment_method #payment, .fml .woocommerce-cart #payment, .fml .woocommerce-checkout #payment { background:var(--bg-2); border:1px solid var(--fm-border); border-radius:var(--radius-lg); }
.fml .woocommerce-checkout #payment div.payment_box { background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-sm); font-size:14px; color:var(--fg-2); }
.fml .woocommerce-checkout #payment div.payment_box::before { border-bottom-color:#fff; }
.fml .woocommerce-checkout-review-order-table tfoot th { font-weight:var(--fw-medium); }
.fml .woocommerce .col2-set, .fml .woocommerce-page .col2-set { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.fml .woocommerce .col2-set .col-1, .fml .woocommerce .col2-set .col-2 { float:none; width:auto; }

/* Coupon row */
.fml .woocommerce .cart .actions .coupon { display:flex; gap:10px; align-items:center; float:none; }
.fml .woocommerce .cart .actions .coupon .input-text { width:190px; height:42px; padding:0 14px; border:1px solid var(--fm-border); border-radius:var(--radius-sm); font-size:14px; }
.fml .woocommerce .cart .actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }

/* ── Order received / order detail ────────────────────────────────────── */
.fml .woocommerce-order { max-width:820px; }
.fml .woocommerce-notice--success { margin-bottom:28px; font-size:16.5px; color:var(--fg-2); }
.fml ul.woocommerce-order-overview {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  margin:0 0 44px; padding:0; list-style:none;
  background:var(--fm-border); border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden;
}
.fml ul.woocommerce-order-overview li {
  float:none; margin:0; padding:16px 18px; border:0; background:#fff;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-3);
}
.fml ul.woocommerce-order-overview li strong {
  display:block; margin-top:8px;
  font-family:var(--font-sans); font-size:16px; font-weight:var(--fw-medium); letter-spacing:0; text-transform:none; color:var(--fg-1);
}
.fml .woocommerce-order-details__title, .fml .woocommerce-column__title, .fml .woocommerce-customer-details h2 { font-size:24px; margin:0 0 18px; }
.fml .woocommerce-columns--addresses { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:44px; }
.fml .woocommerce-columns--addresses .woocommerce-column { float:none; width:auto; }
.fml .woocommerce-customer-details address {
  padding:20px 22px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff;
  font-style:normal; font-size:15px; line-height:1.7; color:var(--fg-2);
}
.fml .woocommerce-customer-details address p { margin:0; }

/* ── Cart & Checkout blocks (WooCommerce Blocks) ───────────────────────── */
.fml .wp-block-woocommerce-cart, .fml .wp-block-woocommerce-checkout { font-family:var(--font-sans); color:var(--fg-2); }
.fml .wc-block-components-title, .fml .wc-block-cart__totals-title, .fml .wc-block-components-checkout-step__title { font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml .wc-block-components-product-name { color:var(--fm-teal-dark); font-weight:var(--fw-medium); text-decoration:none; }
.fml .wc-block-components-product-name:hover { color:var(--fm-teal-darker); }
.fml .wc-block-components-totals-item__value, .fml .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color:var(--fg-1); }
.fml .wc-block-components-button:not(.is-link) { background:var(--fm-teal); border-radius:var(--radius-sm); font-family:var(--font-sans); font-weight:var(--fw-medium); }
.fml .wc-block-components-button:not(.is-link):hover { background:var(--fm-teal-dark); }
.fml .wc-block-cart__submit-button, .fml .wc-block-components-checkout-place-order-button { min-height:50px; font-size:16px; }
.fml .wc-block-components-text-input input, .fml .wc-block-components-quantity-selector { border-radius:var(--radius-sm); }
.fml .wc-block-components-quantity-selector { border:1px solid var(--fm-border); }
.fml .wc-block-components-panel__button { color:var(--fg-1); font-weight:var(--fw-medium); }
.fml .wc-block-components-order-summary__button-text { color:var(--fg-1); }
.fml .wc-block-cart-items__header { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-3); }

/* ── Notices ───────────────────────────────────────────────────────────── */
.fml .woocommerce-message, .fml .woocommerce-info, .fml .woocommerce-error, .fml .woocommerce-noreviews {
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  margin:0 0 28px; padding:16px 20px; border:1px solid var(--fm-border); border-left-width:1px;
  border-radius:var(--radius-lg); background:var(--bg-2); color:var(--fg-1);
  font-size:14.5px; line-height:1.5; list-style:none;
}
.fml .woocommerce-message::before, .fml .woocommerce-info::before, .fml .woocommerce-error::before { content:none; }
.fml .woocommerce-message { background:var(--status-success-bg); border-color:#D3DFAF; }
.fml .woocommerce-info { background:var(--fm-teal-20); border-color:var(--fm-teal-40); }
.fml .woocommerce-error { background:#F7E2DE; border-color:#E4BDB5; }
.fml .woocommerce-message .button, .fml .woocommerce-info .button, .fml .woocommerce-error .button { margin-left:auto; height:36px; padding:0 16px; font-size:13.5px; }

/* ── Pagination ────────────────────────────────────────────────────────── */
.fml .woocommerce nav.woocommerce-pagination { margin-top:44px; }
.fml .woocommerce nav.woocommerce-pagination ul { display:inline-flex; gap:6px; border:0; }
.fml .woocommerce nav.woocommerce-pagination ul li { border:0; margin:0; overflow:visible; }
.fml .woocommerce nav.woocommerce-pagination ul li a, .fml .woocommerce nav.woocommerce-pagination ul li span {
  display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px;
  border:1px solid var(--fm-border); border-radius:var(--radius-sm); background:#fff;
  font-size:14px; color:var(--fg-2); text-decoration:none;
}
.fml .woocommerce nav.woocommerce-pagination ul li a:hover { border-color:var(--fm-teal-40); color:var(--fm-teal-dark); background:#fff; }
.fml .woocommerce nav.woocommerce-pagination ul li span.current { background:var(--fm-teal); border-color:var(--fm-teal); color:#fff; }

/* ── Account & misc ────────────────────────────────────────────────────── */
.fml .woocommerce-MyAccount-navigation ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.fml .woocommerce-MyAccount-navigation a { display:block; padding:10px 14px; border-radius:var(--radius-sm); font-size:14.5px; color:var(--fg-2); text-decoration:none; }
.fml .woocommerce-MyAccount-navigation a:hover { background:var(--bg-2); color:var(--fg-1); }
.fml .woocommerce-MyAccount-navigation li.is-active a { background:var(--fm-teal-20); color:var(--fm-teal-dark); font-weight:var(--fw-medium); }
.fml .woocommerce-Price-amount { white-space:nowrap; }
.fml .star-rating span, .fml .star-rating { color:var(--fm-amber); letter-spacing:0.08em; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1080px) {
  .fml ul.products { grid-template-columns:1fr 1fr; }
  .fml div.product { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:860px) {
  .fml-shop { padding:40px 20px 72px; }
  .fml .woocommerce .col2-set, .fml .woocommerce-page .col2-set { grid-template-columns:1fr; gap:0; }
  .fml .woocommerce .cart .actions { flex-direction:column; align-items:stretch; }
  .fml .woocommerce .cart .actions .coupon .input-text { flex:1; width:auto; }
}
@media (max-width:560px) {
  .fml ul.products { grid-template-columns:1fr; }
}

/* ── Product cards (findmy/woo-products) ───────────────────────────────────
 * The .fml-prod card from findmy-landing.css, filled with a real product. Only
 * what the hand-entered version has no use for is added here: a grid that takes
 * a column count, a linked title, a price line and the loop's buy button. */
.fml-prods--grid { display:grid; grid-template-columns:repeat(var(--fml-cols,3),minmax(0,1fr)); align-items:stretch; }
.fml-prods--grid .fml-prod { flex:none; }
.fml .fml-prod h3 a { color:inherit; text-decoration:none; }
.fml .fml-prod h3 a:hover { color:var(--fm-teal-dark); }
.fml .fml-prod__img { display:block; }
.fml-prod__desc p { margin:0 0 10px; }
.fml-prod__desc p:last-child { margin-bottom:0; }
.fml-prod__price { font-size:19px; font-weight:var(--fw-medium); color:var(--fm-teal-dark); }
.fml-prod__price del { margin-right:8px; font-size:15px; font-weight:400; color:var(--fg-4); }
.fml-prod__price ins { text-decoration:none; }
.fml-prod__price .woocommerce-price-suffix { font-size:12.5px; font-weight:400; color:var(--fg-3); }
/* Pinned to the bottom so buttons line up across a row of uneven descriptions. */
.fml-prod__buy { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:auto; padding-top:4px; }
.fml .fml-prod__buy .button { margin:0; }
.fml .fml-prod__buy .added_to_cart { font-size:13px; color:var(--fm-teal-dark); text-decoration:none; }

@media (max-width:1080px) { .fml-prods--grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px)  { .fml-prods--grid { grid-template-columns:minmax(0,1fr); } }

/* ── Header cart ───────────────────────────────────────────────────────────
 * Sits between the language switcher and the CTA, matching the button's height
 * so the three read as one row of controls. */
.fml .fml-cart {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none;
  border:1px solid var(--fm-border-strong); border-radius:var(--radius-pill);
  background:#fff; color:var(--fg-2); text-decoration:none;
  transition:color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}
.fml .fml-cart:hover { color:var(--fm-teal); border-color:var(--fm-teal); }
.fml .fml-cart:focus-visible { outline:2px solid var(--fm-teal); outline-offset:2px; }
.fml .fml-cart svg { display:block; width:19px; height:19px; }
.fml .fml-cart__count {
  position:absolute; top:-5px; right:-6px;
  display:flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--radius-pill); background:var(--fm-teal); color:#fff;
  font-family:var(--font-mono); font-size:10.5px; font-weight:var(--fw-medium); line-height:1;
}

/* ── Cart ──────────────────────────────────────────────────────────────── */
/* The block cart brings WordPress's own button styling with it — a dark pill
   that belongs to no part of this site. Give it the theme's button instead. */
.fml .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  display:inline-flex; align-items:center; height:50px; padding:0 26px;
  border-radius:var(--radius-sm); background:var(--fm-teal); color:#fff;
  font-family:var(--font-sans); font-size:16px; font-weight:var(--fw-medium); line-height:1;
  transition:background var(--duration-base) var(--easing-standard);
}
.fml .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover { background:var(--fm-teal-dark); color:#fff; }
/* Woo's crying face fills 160px of an otherwise quiet page. */
/* Woo paints this face as a mask over a solid colour, sized 160px. Shrinking
   the box alone crops the mask, so the mask is scaled with it — and the
   colour comes from the palette rather than near-black. */
.fml .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  width:88px; height:88px; -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  background-color:var(--fm-teal-40); opacity:1;
}
.fml .wc-block-cart__empty-cart__title { margin-bottom:6px; }
.fml .wp-block-woocommerce-empty-cart-block p { font-size:16px; color:var(--fg-3); }
.fml .wp-block-woocommerce-empty-cart-block .wp-block-buttons { margin-top:22px; }
/* A 48px thumbnail of a product photographed upright is barely a picture. */
.fml .wc-block-cart-item__image { width:88px; }
.fml .wc-block-cart-item__image img { width:88px; height:auto; border:1px solid var(--fm-border); border-radius:var(--radius-sm); background:var(--bg-2); }

/* ── Product bundles: the package chooser ─────────────────────────────────
 * Findmy's packages are a bundle holding one optional row per pack size, so
 * Product Bundles renders them as a table of checkboxes. assets/js/findmy-bundle.js
 * rewrites that table into a radio group of cards and marks the form
 * .fml-pkg-ready — every rule below is scoped to that class, so a page without
 * JavaScript keeps the plugin's own working layout instead of a half-styled one. */

/* The plugin drops its form in a wrapper *after* .summary, which the two-column
 * product grid would place under the gallery — where the screenshot found it.
 * Pinning all three makes the summary and the buy-box read as one column. */
.fml div.product.product-type-bundle { column-gap:56px; row-gap:20px; }
.fml div.product.product-type-bundle .woocommerce-product-gallery { grid-column:1; grid-row:1 / span 2; }
.fml div.product.product-type-bundle .summary { grid-column:2; grid-row:1; }
.fml div.product.product-type-bundle .summary-add-to-cart-form { grid-column:2; grid-row:2; }
.fml div.product.product-type-bundle .summary .product_meta { margin-top:18px; }

/* The gallery fills its column.
 *
 * WooCommerce's woocommerce-layout.css floats the gallery at width:48%, a rule
 * written for its own two-column float layout. Inside the theme's grid that
 * column is already half the page, so the picture ends up at a quarter of the
 * width it was given and the rest of the column stands empty. The `.images`
 * class is carried here purely to out-rank that selector.
 *
 * A square panel rather than the image's own shape: a package's photograph may
 * be a studio cut-out or a wide landscape shot, and a box that changes height
 * per product would leave the buy-box beside it floating at a different place
 * on every page. object-fit:contain then fits either one without cropping —
 * switch it to `cover` if you would rather photographs bleed to the edges, at
 * the cost of cropping the cut-outs. */
.fml div.product.product-type-bundle .woocommerce-product-gallery.images {
  float:none; width:100%; max-width:none; margin:0;
}
.fml div.product.product-type-bundle .woocommerce-product-gallery__image,
.fml div.product.product-type-bundle .woocommerce-product-gallery__image--placeholder {
  display:block; width:100%; margin:0; aspect-ratio:1;
}
.fml div.product.product-type-bundle .woocommerce-product-gallery__image > a { display:block; width:100%; height:100%; }
.fml div.product.product-type-bundle .woocommerce-product-gallery img {
  width:100%; height:100%; padding:34px; object-fit:contain;
}

/* form.cart is a flex row for a simple product; a bundle stacks a chooser, a
 * total and a button, so it goes back to block flow. */
.fml div.product form.cart.bundle_form { display:block; margin:0; padding-top:0; border-top:0; }

.fml .fml-pkg-ready .fml-pkg__label {
  margin:0 0 12px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-3);
}

/* The table itself carries no layout any more: tbody is the card grid and each
 * row is a card.
 *
 * One track per pack size, always on one line. The pack sizes are a comparison
 * — 5 against 10 against 20 — and a set that wraps 2 + 1 stops reading as one,
 * so the cards shrink together rather than breaking the row. --fml-pkg-count is
 * set by findmy-bundle.js from the number of packages it found; the fallback of
 * 3 only applies if the property never arrives. minmax(0,1fr) is what lets a
 * track go below its content's width — with the default `auto` minimum the
 * widest price would silently reintroduce the wrap. */
.fml .fml-pkg-ready table.bundled_products { display:block; width:100%; margin:0; border:0; border-collapse:collapse; }
.fml .fml-pkg-ready table.bundled_products thead { display:none; }
.fml .fml-pkg-ready table.bundled_products tbody {
  display:grid; grid-template-columns:repeat(var(--fml-pkg-count,3),minmax(0,1fr)); gap:12px;
  padding-top:11px; /* room for the "Mest valgt" flag straddling the top edge */
}

.fml .fml-pkg-ready tr.bundled_product {
  position:relative; display:block; min-width:0; padding:20px 10px 18px; cursor:pointer;
  background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg);
  transition:border-color var(--duration-base) var(--easing-standard),
             box-shadow var(--duration-base) var(--easing-standard),
             background var(--duration-base) var(--easing-standard);
}
.fml .fml-pkg-ready tr.bundled_product:hover { border-color:var(--fm-teal-40); box-shadow:var(--shadow-2); }
.fml .fml-pkg-ready tr.bundled_product:focus-visible { outline:2px solid var(--fm-teal); outline-offset:2px; }
.fml .fml-pkg-ready tr.bundled_product.is-selected {
  background:var(--fm-teal-20); border-color:var(--fm-teal); box-shadow:inset 0 0 0 1px var(--fm-teal);
}

/* The plugin's own cells stay in the DOM — they hold the checkbox and the
 * quantity field it submits — so they are hidden the way a skip link is, not
 * with display:none, which would take a live form control out of the page. */
.fml .fml-pkg-ready tr.bundled_product .details,
.fml .fml-pkg-ready tr.bundled_product td.bundled_item_qty_col {
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.fml .fml-pkg-ready tr.bundled_product td.bundled_item_images_col { display:none; }
.fml .fml-pkg-ready tr.bundled_product td.bundled_item_details_col { display:block; padding:0; border:0; }

.fml-pkg__card { display:flex; flex-direction:column; align-items:center; min-width:0; text-align:center; }
.fml-pkg__flag {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:4px 10px; border-radius:var(--radius-pill); background:var(--fm-amber); color:var(--fg-1);
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; font-weight:var(--fw-medium);
}
.fml-pkg__qty {
  font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium);
  font-size:34px; line-height:1; color:var(--fg-1);
}
.fml-pkg__unit { margin-top:4px; font-size:12.5px; line-height:1.3; color:var(--fg-3); }
.fml-pkg__price { margin-top:14px; font-size:14.5px; font-weight:var(--fw-medium); color:var(--fm-teal-dark); }
.fml-pkg__per { font-size:11.5px; color:var(--fg-3); }
/* Olive rather than teal: on the selected card the teal wash would swallow it.
 * Text is near-black rather than olive-on-olive, the way the sale flash sets
 * dark type on amber — the brand olive on its own tint falls short of AA. */
.fml-pkg__ship {
  margin-top:8px; padding:3px 8px; border-radius:var(--radius-pill);
  background:var(--fm-teal-20); color:var(--fm-teal-darker);
  font-size:11.5px; font-weight:var(--fw-medium); line-height:1.3;
}
.fml-pkg__ship::before { content:'✓ '; }
.fml-pkg__ship[hidden] { display:none; }
.fml-pkg__save {
  margin-top:11px; padding:3px 8px; border-radius:var(--radius-pill);
  background:var(--status-success-bg); color:var(--fg-1);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; font-weight:var(--fw-medium);
}
/* A pack size outside the bundle's Min/Max Bundle Size. Shown rather than
 * hidden, so the range on offer still reads as a range — but not selectable,
 * because the plugin would refuse it at add-to-cart. */
.fml .fml-pkg-ready tr.bundled_product.is-unavailable { opacity:0.45; cursor:not-allowed; }
.fml .fml-pkg-ready tr.bundled_product.is-unavailable:hover { border-color:var(--fm-border); box-shadow:none; }

/* A range row's heading: the plugin's own quantity field, wearing the big
 * number's clothes, with a button either side. It is the real form control —
 * nothing here mirrors a value — so it stays focusable and keyboard-editable
 * while reading as the card's headline. */
/* The buttons keep their size and the field takes what is left, so the row fits
   whatever width the card has rather than pushing past its edges. */
.fml-pkg__count { display:flex; align-items:center; justify-content:center; gap:4px; align-self:stretch; }
.fml .fml-pkg-ready .fml-pkg__count .quantity { display:block; flex:1 1 auto; min-width:0; margin:0; }
.fml .fml-pkg-ready .fml-pkg__count .quantity label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.fml .fml-pkg-ready .fml-pkg__count input.bundled_qty {
  width:100%; min-width:0; height:auto; padding:0; border:0; background:transparent;
  font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium);
  font-size:34px; line-height:1; text-align:center; color:var(--fg-1);
  -moz-appearance:textfield; appearance:textfield;
}
.fml .fml-pkg-ready .fml-pkg__count input.bundled_qty::-webkit-outer-spin-button,
.fml .fml-pkg-ready .fml-pkg__count input.bundled_qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.fml .fml-pkg-ready .fml-pkg__count input.bundled_qty:focus-visible { outline:2px solid var(--fm-teal); outline-offset:3px; border-radius:var(--radius-sm); }
/* The buttons are an affordance for the chosen card only; the field itself is
   always there, so an unselected card still reads as a number. */
.fml-pkg__count .fml-pkg__step-btn { flex:none; width:26px; height:28px; font-size:15px; visibility:hidden; }
.fml .fml-pkg-ready tr.bundled_product.is-selected .fml-pkg__count .fml-pkg__step-btn { visibility:visible; }

/* The package stepper — how many of the chosen pack size to buy.
 * It carries the bundle's real quantity field, moved onto whichever card is
 * selected, so the form still submits the one input WooCommerce reads. Only the
 * selected card shows it: there is a single package count, and three visible
 * steppers would suggest you could buy two 10-packs and a 5-pack at once. */
.fml-pkg__step { display:none; align-items:center; gap:2px; margin-top:12px; }
.fml .fml-pkg-ready tr.bundled_product.is-selected .fml-pkg__step { display:inline-flex; }
.fml-pkg__step-btn {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:32px; padding:0;
  border:1px solid var(--fm-border); border-radius:var(--radius-sm);
  background:#fff; color:var(--fg-1);
  font-family:var(--font-sans); font-size:16px; line-height:1; cursor:pointer;
  transition:border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}
.fml-pkg__step-btn:hover:not(:disabled) { border-color:var(--fm-teal); color:var(--fm-teal-dark); }
.fml-pkg__step-btn:disabled { opacity:0.35; cursor:not-allowed; }
/* The quantity wrapper keeps the plugin's screen-reader label, which must not
   take up a line of its own between the two buttons. */
.fml-pkg__step .quantity { display:block; margin:0; }
.fml-pkg__step .quantity label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.fml .fml-pkg-ready .fml-pkg__step .quantity input.qty {
  width:44px; height:32px; padding:0 2px; border-radius:var(--radius-sm);
  font-size:14.5px; text-align:center;
}
.fml-pkg__sum {
  margin-top:8px; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:0.04em; color:var(--fg-3);
}

.fml-pkg__check {
  position:absolute; top:9px; right:9px; display:none;
  align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:var(--radius-circle); background:var(--fm-teal); color:#fff;
}
.fml-pkg__check svg { width:12px; height:12px; }
.fml .fml-pkg-ready tr.bundled_product.is-selected .fml-pkg__check { display:flex; }
/* On a card whose heading is a stepper the tick would sit on the + button, and
   it has nothing left to say: those buttons appear only on the chosen card,
   which is the same cue. Carries .is-selected so it outranks the rule above. */
.fml .fml-pkg-ready tr.bundled_product.has-count.is-selected .fml-pkg__check { display:none; }

/* Total, button and reassurances */
.fml .fml-pkg-ready .bundle_wrap { margin-top:24px; padding-top:20px; border-top:1px solid var(--fm-border); }
.fml .fml-pkg-ready .bundle_price {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 18px;
  font-size:28px; font-weight:var(--fw-medium); color:var(--fg-1);
}
.fml .fml-pkg-ready .bundle_price:empty { display:none; }
.fml .fml-pkg-ready .bundle_price::before {
  content:attr(data-label); flex:none;
  font-family:var(--font-sans); font-size:13.5px; font-weight:400; color:var(--fg-3);
}
.fml .fml-pkg-ready .bundle_price .price,
.fml .fml-pkg-ready .bundle_price p { margin:0; font-size:inherit; font-weight:inherit; color:var(--fg-1); text-align:right; }
.fml .fml-pkg-ready .bundle_price del { margin-right:10px; font-size:17px; font-weight:400; color:var(--fg-4); }
.fml .fml-pkg-ready .bundle_price ins { text-decoration:none; }

.fml .fml-pkg-ready .bundle_error .woocommerce-info { margin:0 0 16px; padding:12px 16px; font-size:13.5px; }
.fml .fml-pkg-ready .bundle_availability { margin:0 0 12px; font-size:13.5px; color:var(--fm-olive); }
.fml .fml-pkg-ready .bundle_availability:empty { display:none; }

.fml .fml-pkg-ready .bundle_button { display:flex; align-items:flex-end; gap:12px; }
/* The bundle's own quantity buys the package twice over, which needs saying —
 * an unlabelled "1" beside a package chooser reads as the number of e-bjeller. */
.fml .fml-pkg-ready .bundle_button .quantity { display:block; flex:none; }
.fml .fml-pkg-ready .bundle_button .quantity::before {
  content:attr(data-label); display:block; margin-bottom:7px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-3);
}
.fml .fml-pkg-ready .bundle_button .quantity input.qty { width:66px; height:52px; }
.fml .fml-pkg-ready .bundle_button .single_add_to_cart_button { flex:1 1 auto; height:52px; font-size:16px; }

.fml-pkg__assurances { display:flex; flex-wrap:wrap; gap:8px 22px; margin:18px 0 0; padding:0; list-style:none; }
.fml-pkg__assurances li { display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--fg-3); }
.fml-pkg__assurances li::before {
  content:""; flex:none; width:15px; height:15px; background:var(--fm-teal);
  /* Drawn by the mask, the way the empty-cart face is, so the row needs no icon file. */
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/15px 15px no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/15px 15px no-repeat;
}

@media (max-width:1080px) {
  /* The product grid is one column here, so the explicit placement is undone
     rather than fought — otherwise the form would sit in a column that is gone. */
  .fml div.product.product-type-bundle .woocommerce-product-gallery,
  .fml div.product.product-type-bundle .summary,
  .fml div.product.product-type-bundle .summary-add-to-cart-form { grid-column:1; grid-row:auto; }
  /* The square that balanced the buy-box beside it becomes a full-width square
     once the two stack — most of a phone screen spent before the price. It goes
     landscape, and the viewport cap keeps the chooser reachable without a scroll
     on a short window. */
  .fml div.product.product-type-bundle .woocommerce-product-gallery__image,
  .fml div.product.product-type-bundle .woocommerce-product-gallery__image--placeholder {
    aspect-ratio:3/2; max-height:56vh;
  }
}
@media (max-width:420px) {
  /* Below this the three cards are narrower than their own price, so they
     become a stacked list. A two-row grid rather than a wrapping flex line:
     the quantity spans both rows on the left, and the flag and the saving get
     a row of their own instead of straddling the card's top edge. */
  .fml .fml-pkg-ready table.bundled_products tbody { grid-template-columns:1fr; padding-top:0; }
  .fml .fml-pkg-ready tr.bundled_product { padding:14px 16px; }
  .fml-pkg__card {
    display:grid; grid-template-columns:auto 1fr auto; align-items:center;
    column-gap:12px; row-gap:4px; text-align:left;
  }
  .fml-pkg__qty { grid-column:1; grid-row:1 / span 2; font-size:30px; }
  .fml-pkg__unit { grid-column:2; grid-row:1; margin-top:0; }
  .fml-pkg__flag { position:static; transform:none; grid-column:2; grid-row:2; justify-self:start; }
  .fml-pkg__price { grid-column:3; grid-row:1; justify-self:end; margin-top:0; }
  .fml-pkg__save { grid-column:3; grid-row:2; justify-self:end; margin-top:0; }
  /* The stepper and its caption get rows of their own under the unit name,
     rather than landing wherever auto-placement puts them. */
  .fml .fml-pkg-ready tr.bundled_product.is-selected .fml-pkg__step {
    grid-column:2 / -1; grid-row:3; justify-self:start; margin-top:10px;
  }
  .fml-pkg__sum { grid-column:2 / -1; grid-row:4; justify-self:start; margin-top:6px; }
  .fml-pkg__per, .fml-pkg__check { display:none; }
  .fml .fml-pkg-ready tr.bundled_product.is-selected .fml-pkg__check { display:none; }
}