/* Stinger page bundle */

.st-subdept{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid #E3E3E8;}
.st-subdept-lab{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;font-size:13px;color:#6B6B76;
  margin-right:2px;}
.st-subdept-chip{display:inline-block;padding:7px 13px;border-radius:999px;
  border:1px solid #DCDCE1;background:#fff;color:#111;text-decoration:none;
  font-size:14px;line-height:1.2;white-space:nowrap;}
.st-subdept-chip:hover,.st-subdept-chip:focus{border-color:#C01C23;
  color:#C01C23;}
@media (max-width:600px){
  .st-subdept{gap:7px;margin:0 0 14px;padding:0 0 12px;
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;}
  .st-subdept::-webkit-scrollbar{display:none;}
  .st-subdept-chip{font-size:13.5px;padding:6px 12px;}
}


@media(max-width:600px){
  /* The same category link renders again directly under the gallery and a
     third time in the product meta, so this is a duplicate, not a route out. */
  .single-product .woocommerce-breadcrumb{display:none!important;}

  /* Height cap, not width: a bed cover is a wide photo and capping the width
     would letterbox it into the same 335px of page. */
  .single-product .woocommerce-product-gallery__wrapper img,
  .single-product .woocommerce-product-gallery__image img,
  .single-product .woocommerce-product-gallery img.wp-post-image{
    max-height:205px!important;width:auto!important;margin:0 auto!important;
    object-fit:contain!important;}
  .single-product .woocommerce-product-gallery{margin-bottom:10px!important;}
  /* Thumbnail strip: one swipeable row of 64px tiles (was 46x38 floats
     showing the part at about 18px - defect sweep 2026-09-26 #8). */
  body.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs{
    display:flex!important;flex-wrap:nowrap!important;gap:8px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0!important;padding:4px 10px 10px!important;}
  body.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar{display:none;}
  body.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs li{
    flex:0 0 64px!important;width:64px!important;height:64px!important;
    margin:0!important;float:none!important;clear:none!important;
    border:1px solid #e4e4e7;border-radius:6px;overflow:hidden;
    background:#fff;box-sizing:border-box;}
  body.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs li img{
    width:100%!important;height:100%!important;max-height:none!important;
    object-fit:contain!important;opacity:.55;display:block;}
  body.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active{opacity:1;}
  body.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs li:has(img.flex-active){border-color:#18181b;}

  /* Order the summary column. Every selector below is a direct child of
     .summary on this theme - checked against the rendered page, not guessed.
     The BNPL widget is NOT restyled, cropped or reimplemented; it is only
     stopped from sitting above the product title, and it lands beside the
     price, which is where its own lenders ask for it. */
  .single-product div.product .summary,
  .single-product div.product .entry-summary{
    display:flex!important;flex-direction:column;}
  .single-product div.product .summary > *{order:20;}
  .single-product div.product .summary > .single-product-category{order:1;}
  .single-product div.product .summary > .product_title{order:2;}
  .single-product div.product .summary > .price{order:3;}
  .single-product div.product .summary > .StripeElement{order:4;}
  .single-product div.product .summary > .stock{order:5;}
  /* The stock line Astra actually prints is .ast-stock-detail, not .stock,
     so until 2026-09-19 it fell through to order:20 and landed BELOW the
     button along with the fit answer. The preview Omar approved reads
     price, stock, fit, button - the shopper is told what it fits before
     they are asked to buy it, not after. */
  .single-product div.product .summary > .ast-stock-detail{order:4;}
  .single-product div.product .summary > .sas-cf--pdp{order:5;}
  /* The one-line fit ANSWER moves up; the long three-number checklist
     (.stinger-wheel-warn) deliberately does NOT. Measured at 375x812 on the
     AR910: with the checklist above the button too, the button fell to
     1009px - off the first screen, which is the exact fault this whole
     snippet exists to fix. One short line above the button, the detail
     below it. */
  .single-product div.product .summary > form.cart{order:6;}
  .single-product div.product .summary > .stinger-pickup-note{order:7;}
  .single-product div.product .summary
    > .woocommerce-product-details__short-description{order:8;}

  /* Approved preview v3.9 (2026-09-17): a large condensed title, 28px on a
     phone (the preview is clamp(28px,4vw,40px)). It was 20px. The 58px the
     empty pay-later slot below no longer takes pays for the extra height. */
  .single-product div.product .summary > .product_title{
    font-size:28px!important;line-height:.95!important;margin:2px 0 6px!important;}
  .single-product div.product .summary > .price{
    font-size:30px!important;font-weight:800!important;margin:0 0 8px!important;}

  /* The buy button was 128px wide beside a quantity stepper - a third of a
     375px screen. It now takes its own full-width row under the stepper.

     Full width rather than sharing the row with the stepper for a reason
     that only shows up on a phone: the pinned cart button is fixed at the
     bottom right and covers about 46px of whatever is there. Measured on
     this page it sat directly over the right-hand end of a 157px buy
     button. At full width the pinned cart eats a seventh of the target
     instead of a third of it. */
  .single-product div.product form.cart{display:flex!important;gap:10px;
    align-items:stretch;flex-wrap:wrap;margin:10px 0 12px!important;}
  .single-product div.product form.cart .quantity{flex:0 0 auto;margin:0!important;}
  .single-product div.product form.cart button.single_add_to_cart_button{
    flex:1 1 100%;min-height:52px!important;font-size:17px!important;
    width:100%!important;float:none!important;}

  /* The pinned cart button owns the bottom right corner of every page. */
  .single-product div.product{padding-bottom:60px;}
}

/* THE EMPTY BAND UNDER THE PRICE (all widths). Measured 2026-09-24 on the
   AR910 at 375px: a bare div#payment-method-message, 58px tall and EMPTY,
   sat between the set-of-4 price and Availability - the ~100px hole the
   approved preview does not have. It is the slot the pay-later strip mounts
   into, and snippet 132 defers that mount to the first tap or scroll. While
   it is empty it takes no room; the moment Stripe puts its element in it,
   it is no longer :empty and shows exactly where it always did. The widget
   itself is not restyled, cropped, moved or reworded (DECISIONS 2026-08-23,
   rule 1) - only the empty box before it exists. */
.single-product div.product .summary > #payment-method-message:empty{display:none!important;}


@media(max-width:900px){
  button.menu-toggle,.ast-mobile-menu-buttons button,
  .main-header-menu-toggle{min-width:44px!important;min-height:44px!important;}
}