/* Out-of-stock corner ribbon on the single-product gallery */
.woocommerce div.product .woocommerce-product-gallery{position:relative;overflow:hidden}
.mtx-oos-ribbon{
    position:absolute;top:44px;left:-58px;width:220px;
    transform:rotate(-45deg);
    background:#b32d2e;color:#fff;text-align:center;
    padding:8px 0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.28);pointer-events:none;
}
.mtx-oos-ribbon[hidden]{display:none}
/* Visual state when out of stock: dim the add-to-cart area */
.mtx-oos .single_add_to_cart_button{opacity:.5;pointer-events:none;cursor:not-allowed}
.mtx-oos .quantity{opacity:.5;pointer-events:none}

/* Out-of-stock corner ribbon on the shop / catalog grid (block Product Collection) */
.woocommerce li.product.outofstock .wp-block-woocommerce-product-image,
li.product.outofstock .wp-block-woocommerce-product-image{position:relative;overflow:hidden}
li.product.outofstock .wp-block-woocommerce-product-image::after{
    content:"Out of stock";
    position:absolute;top:34px;left:-48px;width:180px;
    transform:rotate(-45deg);
    background:#b32d2e;color:#fff;text-align:center;
    padding:5px 0;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    z-index:9;box-shadow:0 2px 6px rgba(0,0,0,.25);pointer-events:none;
}

/* Hide the theme's default top-right "Out of Stock" pill on the grid (we use the ribbon instead) */
.woocommerce li.product.outofstock::after,
li.product.outofstock::after{content:none !important;display:none !important}

/* Related products grid: the block defaults to 5 columns, so 2-3 related items
   collapse into narrow strips. Use an auto-fill grid so cards keep a sensible
   width no matter how many there are. Scoped to the single product page. */
.single-product .wc-block-product-template.wp-block-woocommerce-product-template{
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
    gap:24px !important;
}

/* ============================================================
   Storefront proportion tightening (block-theme WooCommerce)
   Reins in the theme's oversized spacing, type, cards, badges.
   ============================================================ */

/* hide the theme's "In Stock" pill on product cards (keep the out-of-stock ribbon) */
li.product.instock::after{content:none !important;display:none !important}

/* --- single product page --- */
.single-product .product_title,
.single-product h1.wp-block-post-title,
.single-product h1.entry-title{font-size:26px !important;line-height:1.15;margin:0 0 8px}
.single-product .woocommerce-product-gallery{max-width:300px;margin-inline:0}
.single-product .wp-block-woocommerce-product-price,
.single-product p.price,
.single-product .price{font-size:19px !important;margin:0 0 12px}
.single-product .woocommerce-product-details__short-description,
.single-product .wp-block-woocommerce-product-details__short-description{font-size:14px;line-height:1.5;margin-bottom:14px}
.single-product .single_add_to_cart_button,
.single-product .wp-block-button__link{padding:11px 22px !important;font-size:14px !important}
.single-product .quantity input{padding:8px}
.single-product h2{font-size:20px !important;margin:0 0 12px}
/* tame the giant vertical gaps between single-product sections */
.single-product .wp-block-woocommerce-product-collection{margin-top:32px}

/* --- product grid cards (shop + related) --- */
li.product .wp-block-post-title,
li.product h2.wp-block-post-title,
li.product .woocommerce-loop-product__title{font-size:15px !important;line-height:1.25;margin:8px 0 4px}
li.product .wp-block-woocommerce-product-price,
li.product .price{font-size:14px !important}
li.product .wp-block-button__link,
li.product .add_to_cart_button,
li.product .wp-element-button{padding:8px 14px !important;font-size:12.5px !important}
li.product .wc-block-components-product-image img,
li.product .wp-block-woocommerce-product-image img{max-width:180px;margin-inline:auto}

/* --- shop header --- */
.woocommerce-products-header{margin-bottom:14px}
.woocommerce-products-header__title{font-size:28px !important}

/* --- cart page --- */
.woocommerce-cart .wp-block-woocommerce-cart{--wp--style--block-gap:16px}
.woocommerce-cart .wc-block-cart-items__row,
.woocommerce-cart table.wc-block-cart-items td{padding-top:10px !important;padding-bottom:10px !important}

/* Constrain full-width commerce pages (cart/checkout blocks) so they don't run edge-to-edge */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.woocommerce-cart .wc-block-cart,
.woocommerce-checkout .wc-block-checkout{
  max-width:1200px;
  margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;
  box-sizing:border-box;
}
@media (max-width:600px){
  .wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{padding-left:14px;padding-right:14px}
}

/* Out-of-stock ribbon disabled via Mutoryx Settings — also hides the waitlist button */
body.mtx-no-ribbon .mtx-oos-ribbon,
body.mtx-no-ribbon li.product.outofstock .wp-block-woocommerce-product-image::after{display:none !important;content:none !important}
body.mtx-no-ribbon button.mtx-wl-open{display:none !important}


/* Related products (block Product Collection) — fix collapsed narrow cards.
   The block ships an is-flex-container/columns-5 width on items while rendering as
   a grid, which squeezes items to ~30px. Force a sane auto-fill grid + full-width items. */
body.single-product ul.wc-block-product-template{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(200px,240px)) !important;
    justify-content:flex-start !important;
    gap:24px !important;
}
body.single-product ul.wc-block-product-template > li.product,
body.single-product ul.wc-block-product-template > li.wc-block-product{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    flex:initial !important;
}

/* Buttons: ensure horizontal padding (block Product buttons ship with 0 side padding) */
body ul.wc-block-product-template li.wc-block-product a.wp-block-button__link,
body ul.wc-block-product-template li.product a.wp-block-button__link,
body .woocommerce ul.products li.product a.button,
body .woocommerce ul.products li.product a.wp-block-button__link,
body .wp-block-woocommerce-cart .wp-block-button__link.wp-block-button__link,
body .wp-block-woocommerce-checkout .wp-block-button__link.wp-block-button__link,
body .woocommerce a.button.button, body .woocommerce button.button.button,
body .wc-block-components-button.wc-block-components-button{
    padding-left:22px !important;
    padding-right:22px !important;
}

/* Join-the-waitlist button: animated attention background */
button.mtx-wl-open{
    position:relative; overflow:hidden;
    border:none !important;
    color:#fff !important;
    font-weight:700 !important; letter-spacing:.08em;
    padding:14px 22px !important;
    border-radius:8px !important;
    background:linear-gradient(90deg,#0a586d,#0d6f8a,#18a7c4,#0d6f8a,#0a586d) !important;
    background-size:220% 100% !important;
    animation:mtxWlFlow 3.5s linear infinite, mtxWlPulse 2.2s ease-in-out infinite;
    cursor:pointer;
}
button.mtx-wl-open::after{
    content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg); pointer-events:none;
    animation:mtxWlShine 3s ease-in-out infinite;
}
@keyframes mtxWlFlow{0%{background-position:0% 0}100%{background-position:220% 0}}
@keyframes mtxWlPulse{0%,100%{box-shadow:0 0 0 0 rgba(13,111,138,.5)}50%{box-shadow:0 0 0 10px rgba(13,111,138,0)}}
@keyframes mtxWlShine{0%{left:-60%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){
    button.mtx-wl-open{animation:none}
    button.mtx-wl-open::after{display:none}
}

/* ============================================================
   Cart page — tighten the block cart to match the checkout density
   ============================================================ */
body .wp-block-woocommerce-cart{font-size:14px;color:#1a2b32}
body .wc-block-cart *{line-height:1.4}
/* column headers */
body .wc-block-cart-items__header{font-size:11px !important;letter-spacing:.06em;text-transform:uppercase;color:#6b7680;padding-bottom:8px}
/* rows */
body .wc-block-cart-items__row{font-size:14px}
body .wc-block-cart-items__row td{padding:12px 10px !important;border-top:1px solid #eef1f4}
body table.wc-block-cart-items{margin:0}
/* product image */
body .wc-block-cart-item__image{width:64px}
body .wc-block-cart-item__image img{width:56px !important;height:56px;object-fit:contain;border:1px solid #e0dce0;border-radius:12px;background:#edeaed}
/* product name + meta */
body .wc-block-cart-item__product-name,
body .wc-block-cart-item__product a{font-size:15px !important;font-weight:600;color:#131A26;text-decoration:none}
body .wc-block-cart-item__product a:hover{color:#0d6f8a}
body .wc-block-components-product-metadata,
body .wc-block-cart-item__product .wc-block-components-product-details{font-size:12px !important;color:#6b7680;margin-top:2px}
body .wc-block-cart-item__prices,body .wc-block-cart-item__total,
body .wc-block-components-product-price{font-size:14px !important;font-weight:600;color:#1a2b32}
/* quantity stepper */
body .wc-block-components-quantity-selector{max-width:104px !important;font-size:13px !important;border:1px solid #d7dbe0;border-radius:6px}
body .wc-block-components-quantity-selector input{font-size:13px !important}
body .wc-block-components-quantity-selector__button{font-size:16px !important;width:30px}
/* remove-item link */
body .wc-block-cart-item__remove-link{font-size:11px !important;color:#8a919c}
/* totals sidebar */
body .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
body .wc-block-cart__totals-title{font-size:12px !important;letter-spacing:.05em}
body .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
body .wc-block-cart__sidebar > .wc-block-components-panel,
body .wc-block-cart__sidebar{font-size:13px}
body .wc-block-components-totals-item{font-size:13px !important;padding:4px 0 !important}
body .wc-block-components-totals-item__label{color:#586074}
body .wc-block-components-totals-footer-item{font-size:16px !important;font-weight:800}
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:18px !important;color:#131A26}
/* coupon panel */
body .wc-block-components-panel__button{font-size:13px !important;padding:10px 0 !important}
/* checkout button */
body .wc-block-cart__submit-button,
body .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button{
  font-size:14px !important;font-weight:700;padding:13px 20px !important;border-radius:8px !important;min-height:0 !important;
}
/* sidebar card look to match checkout summary */
body .wc-block-cart__sidebar .wc-block-components-sidebar{background:#fafbfc;border:1px solid #e3e6ea;border-radius:10px;padding:16px}

/* Single product: tabs + description were oversized (~20px) — bring in line with the site */
body .single-product .wp-block-woocommerce-product-details,
body .single-product .woocommerce-tabs,
body .single-product .woocommerce-Tabs-panel,
body .single-product .woocommerce-Tabs-panel p,
body .single-product .woocommerce-Tabs-panel li,
body .single-product #tab-description p,
body .single-product #tab-description li{font-size:15px !important;line-height:1.6 !important;color:#3c434a}
body .single-product .wc-tabs li a{font-size:14px !important;font-weight:600}
body .single-product .woocommerce-Tabs-panel h2{font-size:18px !important;line-height:1.25 !important;margin:0 0 10px}
body .single-product .woocommerce-tabs table.shop_attributes th,
body .single-product .woocommerce-tabs table.shop_attributes td{font-size:14px !important}

/* ============================================================
   Base typography normalization — theme sets body to its "Large"
   preset (~20px); bring it back to a normal 16px so content isn't oversized.
   Component-level sizes (hero, checkout, cart, stats) set their own and are unaffected.
   ============================================================ */
html body{font-size:16px}

/* Single-product review form was inheriting the oversized base */
body .single-product #reviews .comment-reply-title,
body .single-product .woocommerce-Reviews-title{font-size:18px !important;font-weight:700;line-height:1.25}
body .single-product #reviews p,
body .single-product .comment-form label,
body .single-product .comment-form-comment,
body .single-product .comment-notes{font-size:14px !important;line-height:1.5}
body .single-product .comment-form input[type=text],
body .single-product .comment-form input[type=email],
body .single-product .comment-form textarea{font-size:14px !important;padding:9px 12px}
body .single-product .comment-form-rating label{font-size:14px !important}
body .single-product #reviews .stars a{font-size:18px !important}
body .single-product .comment-form .form-submit input,
body .single-product #respond .submit{font-size:14px !important;padding:11px 20px !important}

/* Single product: stack SKU / Category on their own lines (block product meta) */
body .wp-block-woocommerce-product-meta .wp-block-group{
  display:block !important;   /* stack SKU / Category on their own lines */
}
body .wp-block-woocommerce-product-meta .wp-block-group > *{ display:block !important; margin:0 0 4px !important; }
body .single-product .product_meta > span,
body .single-product .product_meta .sku_wrapper,
body .single-product .product_meta .posted_in,
body .single-product .product_meta .tagged_as{display:block;margin:0 0 4px}

/* Single product: pull the summary in close to the photo (gallery column was ~half width) */
body .single-product .wp-block-columns:has(.woocommerce-product-gallery){
  column-gap:36px !important; gap:36px !important; align-items:flex-start !important;
}
body .single-product .wp-block-columns:has(.woocommerce-product-gallery) > .wp-block-column:first-child{
  flex:0 0 340px !important; width:340px !important; max-width:340px !important; min-width:0 !important;
}
body .single-product .wp-block-columns:has(.woocommerce-product-gallery) > .wp-block-column:last-child{
  flex:1 1 auto !important; max-width:none !important;
}

/* ============================================================
   Soft rounded corners on photos + boxes (match the home cards)
   ============================================================ */
body .woocommerce-product-gallery img,
body .woocommerce-product-gallery__image,
body .woocommerce-product-gallery,
body li.product img,
body li.product .wp-block-woocommerce-product-image img,
body .wp-block-woocommerce-product-image img,
body .attachment-woocommerce_thumbnail,
body .wp-post-image{border-radius:14px !important}
/* boxes / panels */
body .woocommerce-form-login,
body .woocommerce-form-register,
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error,
body .woocommerce-noreviews,
body .wc-block-components-notice-banner,
body .single-product .woocommerce-tabs .panel,
body .mtxco-summary,
body .mtxco-pay{border-radius:14px !important}

/* Round the image WRAPPERS too (their square background was showing behind rounded imgs) */
body .wc-block-components-product-image,
body .wc-block-components-product-image a,
body li.product .wp-block-woocommerce-product-image,
body li.product .wp-block-woocommerce-product-image a,
body .wp-block-woocommerce-product-image,
body .woocommerce-product-gallery__image,
body .woocommerce-product-gallery__wrapper,
body li.product a img,
body .wc-block-grid__product-image{border-radius:14px !important;overflow:hidden !important}

/* Round the whole product CARD (catalog + related) so the corner reads even with
   the light-gray photo background — clips the image + top accent to the radius. */
body li.product,
body li.wc-block-product,
body ul.products li.product,
body .wc-block-product-template li.wc-block-product{
  border-radius:16px !important;
  overflow:hidden !important;
}

/* Make the PHOTO itself read as rounded: a hairline border traces the curve
   (the light-gray photo bg on a white card made the rounded corners invisible). */
body li.product .wc-block-components-product-image,
body li.product .wp-block-woocommerce-product-image,
body .wc-block-product-template li.wc-block-product .wc-block-components-product-image,
body .woocommerce-product-gallery__image,
body .woocommerce-product-gallery{
  border:1px solid #e3e6ea !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

/* Fill only the PHOTO area with the photo's own background (card body stays white) */
body li.product .wc-block-components-product-image,
body li.product .wp-block-woocommerce-product-image,
body .wc-block-product-template li.wc-block-product .wc-block-components-product-image,
body .woocommerce-product-gallery,
body .woocommerce-product-gallery__image{background:#edeaed !important;border-color:#e0dce0 !important}

/* ---- Certificate of Analysis (COA) tab ---- */
.mtx-coa{font-size:14px;line-height:1.55;color:#131A26}
.mtx-coa h2{font-size:18px;margin:0 0 8px}
.mtx-coa-intro{margin:0 0 10px;color:#3a4653}
.mtx-coa-disclaimer{
  font-size:12.5px;line-height:1.5;color:#5a6673;
  background:#f5f7f9;border:1px solid #e3e6ea;border-left:3px solid #0d6f8a;
  border-radius:8px;padding:10px 12px;margin:0 0 18px;
}
.mtx-coa-doc{border:1px solid #e3e6ea;border-radius:12px;overflow:hidden;margin:0 0 16px;background:#fff}
.mtx-coa-doc-head{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#f7f9fb;border-bottom:1px solid #e3e6ea}
.mtx-coa-badge{font-size:10px;font-weight:800;letter-spacing:.08em;color:#fff;background:#0d6f8a;padding:2px 8px;border-radius:20px}
.mtx-coa-label{font-weight:700;font-size:13px;color:#131A26}
.mtx-coa-dl{margin-left:auto;font-size:12.5px;font-weight:700;text-decoration:none;color:#0d6f8a;padding:5px 12px;border:1px solid #0d6f8a;border-radius:8px;transition:background .2s,color .2s}
.mtx-coa-dl:hover{background:#0d6f8a;color:#fff}
.mtx-coa-frame{display:block;width:100%;height:560px;border:0;background:#f2f4f6}
.mtx-coa-img{display:block;width:100%;height:auto;background:#f2f4f6}
.mtx-coa-fallback{padding:24px;text-align:center;color:#5a6673;font-size:13px}
@media (max-width:600px){ .mtx-coa-frame{height:420px} .mtx-coa-doc-head{flex-wrap:wrap} .mtx-coa-dl{margin-left:0} }

/* ---- Catalog: search + family-category filter bar + keep-shopping ---- */
.mtx-catbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 22px}
.mtx-catsearch{display:flex;flex:1 1 260px;min-width:220px}
.mtx-catsearch input[type=search]{flex:1;padding:10px 12px;border:1px solid #d7dde3;border-radius:10px 0 0 10px;font-size:14px;background:#fff}
.mtx-catsearch button{padding:10px 16px;border:0;border-radius:0 10px 10px 0;background:#0d6f8a;color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.mtx-catsearch button:hover{background:#0b5f77}
.mtx-catfilter{flex:0 1 300px;padding:10px 12px;border:1px solid #d7dde3;border-radius:10px;font-size:14px;background:#fff;cursor:pointer}
.mtx-keepshopping{display:inline-block;margin:16px 0 0;padding:10px 18px;border:1px solid #0d6f8a;border-radius:10px;color:#0d6f8a;font-weight:700;text-decoration:none;font-size:14px}
.mtx-keepshopping:hover{background:#0d6f8a;color:#fff}
@media(max-width:600px){.mtx-catbar{flex-direction:column;align-items:stretch}.mtx-catfilter{flex-basis:auto}}

/* Catalog bar: constrain control heights (theme stretches search inputs) */
.mtx-catbar{align-items:flex-start}
.mtx-catsearch{align-items:center;height:46px}
.mtx-catbar input[type=search],
.mtx-catbar .mtx-catsearch button,
.mtx-catbar .mtx-catfilter{height:46px;min-height:0;line-height:1.2;box-sizing:border-box}
.mtx-catsearch input[type=search]{width:100%}

/* Catalog bar: kill block-theme injected margins, keep it tight */
.mtx-catbar{margin:8px 0 20px!important;row-gap:10px}
.mtx-catbar > *, .mtx-catbar form, .mtx-catbar select{margin:0!important}
.mtx-catsearch{max-width:440px}

/* Catalog bar inner wrapper: single flex row, immune to theme block spacing */
.mtx-catbar{display:block!important;margin:6px 0 20px!important}
.mtx-catbar-inner{display:flex!important;flex-wrap:wrap;gap:12px;align-items:center}
.mtx-catbar-inner > *{margin:0!important}
.mtx-catbar-inner .mtx-catsearch{flex:1 1 260px;max-width:440px}
.mtx-catbar-inner .mtx-catfilter{flex:0 1 300px}

/* Out-of-stock "join the waiting list" CTA on catalog cards */
.mtx-waitlist-cta{display:block;margin:10px auto 0;max-width:92%;text-align:center;padding:9px 12px;font-size:13px;line-height:1.3;text-decoration:none;color:#8a5a00;background:linear-gradient(90deg,#fff3d6,#ffe7b0,#fff3d6);background-size:200% 100%;border:1px solid #f0d28a;border-radius:10px;animation:mtxWaitPulse 3s ease-in-out infinite}
.mtx-waitlist-cta strong{color:#0d6f8a}
.mtx-waitlist-cta:hover{background-position:100% 0}
@keyframes mtxWaitPulse{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){.mtx-waitlist-cta{animation:none}}

/* Family-category filter to the right (by the sort dropdown); search stays left */
.mtx-catbar-inner{justify-content:space-between;flex-wrap:wrap}
.mtx-catbar-inner .mtx-catsearch{flex:0 1 460px}
.mtx-catbar-inner .mtx-catfilter{margin-left:auto;flex:0 0 auto;min-width:250px}
@media(max-width:640px){.mtx-catbar-inner .mtx-catfilter{margin-left:0;width:100%}}