/* OFFENSIVE SHOP / MOBILE POLISH v1.0.1
 * All changes are intentionally limited to mobile widths.
 * This stylesheet never modifies cart contents, Econt requests, checkout validation or product variations.
 */
@media screen and (max-width:700px) {
  /* HERO: the photo previously ended ~100-160px before the bottom of the hero.
     Make the image fill the entire existing section, retaining a legible gradient
     beneath WINTER and SHOP NOW. No changes to the desktop hero height. */
  body.home .hero .hero-media,
  body.home .hero picture.hero-media {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }
  body.home .hero .hero-media img {
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:61% 50%!important;
  }
  body.home .hero::after {
    background:
      linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.50) 25%,rgba(0,0,0,.16) 50%,transparent 77%),
      linear-gradient(90deg,rgba(0,0,0,.20),transparent 70%)!important;
  }
  body.home .hero .hero-eyebrow {font-size:9px;line-height:1.45;letter-spacing:.12em}

  /* THREE FEATURED PRODUCTS: preserve exactly three columns at 390px AND 320px.
     The category chip and favorite control no longer compete for the same space. */
  body.home .os-popular .os-three-products {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body.home .os-popular .os-three-products .product-card {min-width:0!important;grid-column:auto!important}
  body.home .os-popular .os-three-products .product-card__image {position:relative;overflow:hidden}
  body.home .os-popular .os-three-products .product-card__corner {
    top:5px!important;left:4px!important;
    padding:5px 4px!important;
    margin:0!important;
    max-width:calc(100% - 47px)!important;
    font-size:8px!important;
    line-height:1.15!important;
    letter-spacing:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  body.home .os-popular .os-three-products .os-wish-btn {
    width:40px!important;height:40px!important;
    min-width:40px!important;min-height:40px!important;
    top:3px!important;right:3px!important;
    padding:0!important;
    border:1px solid #d2d2d2;
    display:flex!important;align-items:center!important;justify-content:center!important;
    touch-action:manipulation;
  }
  body.home .os-popular .os-three-products .os-wish-btn svg {width:21px!important;height:21px!important}
  body.home .os-popular .os-three-products .product-card__meta {
    display:flex!important;flex-direction:column!important;
    gap:6px!important;padding:11px 1px 0!important;
    min-width:0!important;
    text-decoration:none;
  }
  body.home .os-popular .os-three-products .product-card__name {
    font-size:11px!important;
    line-height:1.35!important;
    letter-spacing:0!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow:hidden;
    overflow-wrap:anywhere;
  }
  /* The category already appears on the image: remove the redundant 8px metadata. */
  body.home .os-popular .os-three-products .product-card__meta small {display:none!important}
  body.home .os-popular .os-three-products .product-card__price {
    display:block!important;
    margin:0!important;
    font:900 12px/1.3 Arial,Helvetica,sans-serif!important;
    white-space:normal!important;
    color:#f4f2ec;
  }
  body.home .os-popular .section-heading__note {
    display:block!important;
    font-size:10px!important;
    letter-spacing:.07em!important;
    line-height:1.45!important;
    color:#b7b7b7!important;
  }
  body.home .os-popular .os-popular__foot {
    margin-top:24px!important;
    font-size:11px!important;
    letter-spacing:.06em!important;
    line-height:1.7!important;
    color:#dedede!important;
  }
  body.home .os-popular .os-popular__foot span {margin:0 7px!important}

  /* FLAGS + STICKERS: keep the two agreed cards side by side, with usable copy. */
  body.home .os-custom-duo__grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  body.home .os-custom-duo__body {padding:13px 11px 15px!important;min-width:0!important}
  body.home .os-custom-duo__body h3 {
    font-size:clamp(20px,5.3vw,27px)!important;
    line-height:1.08!important;
    letter-spacing:.02em!important;
    overflow-wrap:normal!important;
  }
  body.home .os-custom-duo__body p {
    font-size:12px!important;
    line-height:1.5!important;
    color:#c5c5c5!important;
    margin-bottom:12px!important;
  }
  body.home .os-custom-duo__badge {font-size:9px!important;line-height:1.3!important;padding:5px 6px!important}
  body.home .os-custom-duo__index {font-size:8px!important;letter-spacing:.04em!important}
  body.home .os-custom-duo__bottom {
    font-size:10px!important;
    letter-spacing:.035em!important;
    min-height:46px!important;
    line-height:1.45!important;
    padding-top:10px!important;
    align-items:center!important;
  }
  body.home .os-custom-duo__arrow {font-size:21px!important;flex:none}
  body.home .os-custom-duo__caption {font-size:11px!important;line-height:1.6!important;color:#aaa!important}
  body.home .os-custom-duo__header>p {font-size:12px!important;line-height:1.6!important;color:#c6c6c6!important}

  /* Small informational labels and footer links: legible and touch-friendly. */
  .os-announcement {font-size:10px!important;letter-spacing:.06em!important;line-height:1.4!important}
  .os-announcement .announcement__right {font-size:9px!important;line-height:1.4!important;letter-spacing:.06em!important}
  body.home .crew-note {font-size:11px!important;letter-spacing:.08em!important;line-height:1.5!important}
  .site-footer .footer-brand p {font-size:16px!important;letter-spacing:.055em!important;line-height:1.45!important}
  .site-footer .footer-column--nav h3 {font-size:12px!important;letter-spacing:.11em!important}
  .site-footer .footer-column--nav .footer-nav {gap:0!important}
  .site-footer .footer-column--nav .footer-nav a {
    display:flex!important;align-items:center!important;
    min-height:44px!important;
    padding:9px 2px!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.4!important;
    color:#d5d5d5!important;
    touch-action:manipulation;
  }
  .site-footer .footer-column--nav .footer-nav a:focus-visible {outline:2px solid #d42c32}
  .site-footer .footer-bottom {font-size:10px!important;line-height:1.6!important;letter-spacing:.03em!important}

  /* On iOS an input rendered below 16px can trigger unwanted page zoom on focus.
     Only normal text fields are targeted; radio/checkbox logic is untouched. */
  body.osf-site-page .osf-page input[type="text"],
  body.osf-site-page .osf-page input[type="number"],
  body.osf-site-page .osf-page textarea,
  body.woocommerce-checkout.osco-integrated form.checkout input.input-text,
  body.woocommerce-checkout.osco-integrated form.checkout input[type="search"],
  body.woocommerce-checkout.osco-integrated form.checkout .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body.woocommerce-checkout.osco-integrated form.checkout textarea,
  body.woocommerce-checkout.osco-integrated form.checkout select {
    font-size:16px!important;
  }

  /* Three order-progress tabs: stay on one row and avoid unreadable 7px labels. */
  body.woocommerce-cart .oscs-steps .oscs-step,
  body.woocommerce-checkout .osco-steps .osco-step {
    font-size:10px!important;
    letter-spacing:0!important;
    line-height:1.35!important;
    gap:5px!important;
    padding:9px 7px!important;
    min-height:59px!important;
    white-space:normal!important;
    overflow-wrap:normal;
  }
  body.woocommerce-cart .oscs-steps .oscs-number,
  body.woocommerce-checkout .osco-steps .osco-step b {font-size:12px!important;flex:none}
}
@media screen and (max-width:360px) {
  body.home .os-popular .os-three-products {gap:5px!important}
  body.home .os-popular .os-three-products .os-wish-btn {
    width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
    top:2px!important;right:2px!important;
  }
  body.home .os-popular .os-three-products .os-wish-btn svg {width:18px!important;height:18px!important}
  body.home .os-popular .os-three-products .product-card__corner {font-size:7px!important;max-width:calc(100% - 41px)!important;padding:4px 3px!important}
  body.home .os-popular .os-three-products .product-card__name {font-size:10px!important}
  body.home .os-custom-duo__body {padding:12px 8px!important}
  body.home .os-custom-duo__body h3 {font-size:20px!important}
  body.home .os-custom-duo__body p {font-size:11px!important}
  body.home .os-custom-duo__bottom {font-size:9px!important;letter-spacing:0!important}
  body.woocommerce-cart .oscs-steps .oscs-step,
  body.woocommerce-checkout .osco-steps .osco-step {font-size:9px!important;padding:7px 4px!important;gap:3px!important;min-height:62px!important}
  body.woocommerce-cart .oscs-steps .oscs-number,
  body.woocommerce-checkout .osco-steps .osco-step b {font-size:11px!important}
}

/* v1.0.1 — HERO SHOP NOW: move the open menu into a floating viewport layer.
   The JS relocates the existing menu node, preserving the original links,
   focus handling, and aria-controls. The image never loses its crop. */
@media screen and (max-width:700px) {
  #hero-shop-menu.osmp-floating-shop-menu {
    position:fixed!important;
    z-index:2147483000!important;
    top:0;
    left:0;
    width:245px;
    min-width:0!important;
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 24px);
    overflow-x:hidden;
    overflow-y:auto;
    margin:0!important;
    transform:none!important;
    box-sizing:border-box;
    overscroll-behavior:contain;
    box-shadow:0 18px 55px rgba(0,0,0,.9)!important;
  }
  #hero-shop-menu.osmp-floating-shop-menu[hidden]{display:none!important}
  #hero-shop-menu.osmp-floating-shop-menu a {
    min-height:54px;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:15px 17px!important;
    font-size:14px!important;
    line-height:1.3!important;
    letter-spacing:.06em!important;
    touch-action:manipulation;
  }

  /* Mobile order progress: number ABOVE its label. Each tab now has its full
     column width for the text, rather than sharing it with 01/02/03. */
  body.woocommerce-cart .oscs-steps,
  body.woocommerce-checkout:not(.woocommerce-order-received) .osco-steps {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    min-width:0!important;
    width:100%!important;
  }
  body.woocommerce-cart .oscs-steps .oscs-step,
  body.woocommerce-checkout:not(.woocommerce-order-received) .osco-steps .osco-step {
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    min-width:0!important;
    gap:6px!important;
    padding:11px 9px!important;
    min-height:69px!important;
    line-height:1.35!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:0!important;
    white-space:normal!important;
    text-align:left!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  body.woocommerce-cart .oscs-steps .oscs-step .oscs-label,
  body.woocommerce-checkout:not(.woocommerce-order-received) .osco-steps .osco-step span {
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:10px!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-weight:900!important;
    line-height:1.35!important;
    letter-spacing:0!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  body.woocommerce-cart .oscs-steps .oscs-step .oscs-number,
  body.woocommerce-checkout:not(.woocommerce-order-received) .osco-steps .osco-step b {
    display:block!important;
    flex:none!important;
    font:900 13px/1 Arial,Helvetica,sans-serif!important;
    color:#d82937!important;
  }
}
@media screen and (max-width:360px) {
  body.woocommerce-cart .oscs-steps .oscs-step,
  body.woocommerce-checkout:not(.woocommerce-order-received) .osco-steps .osco-step {
    padding:10px 6px!important;
    min-height:67px!important;
    gap:5px!important;
  }
  body.woocommerce-cart .oscs-steps .oscs-step .oscs-label,
  body.woocommerce-checkout:not(.woocommerce-order-received) .osco-steps .osco-step span {
    font-size:9px!important;
    line-height:1.3!important;
  }
}