/* Retail Signature Storefront 6.3.1
   Mobile, accessibility and performance layer */

/* Keyboard access */
.pp631-skip-link{
  position:fixed;
  z-index:100000;
  top:10px;
  left:10px;
  padding:12px 16px;
  border-radius:6px;
  background:#fff;
  color:#17131a;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  transform:translateY(-180%);
  transition:transform .16s ease;
}
.pp631-skip-link:focus{transform:translateY(0)}
.pp631-main-anchor{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
}

body.pp631-mobile-accessibility-performance :where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible{
  outline:3px solid #ff5fa1!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 5px rgba(106,44,255,.22)!important;
}

body.pp631-mobile-accessibility-performance :where(input,select,textarea):focus-visible{
  border-color:#a126c5!important;
}

.pp631-menu-toggle,
.pp631-menu-close,
.pp631-submenu-toggle{
  display:none;
}

.pp631-nav-backdrop{
  position:fixed;
  z-index:9998;
  inset:0;
  display:none;
  border:0;
  background:rgba(8,9,16,.72);
  backdrop-filter:blur(5px);
}
body.pp631-nav-open .pp631-nav-backdrop{display:block}
body.pp631-nav-open{overflow:hidden}

/* Below-fold rendering containment. */
body.home .pp61-best,
body.home .pp630-now,
body.home .pp61-assurance,
body.home .pp61-campaigns,
body.home .pp630-recent,
body.pp62-design-framework .pp61-footer,
body.pp62-product .pp630-complements{
  content-visibility:auto;
  contain-intrinsic-size:500px;
}

/* Make status and validation messages visible without changing logic. */
body.pp631-mobile-accessibility-performance :where(
  .woocommerce-error,
  .woocommerce-message,
  .woocommerce-info,
  .wc-block-components-notice-banner
){
  scroll-margin-top:130px;
}

@media(max-width:980px){
  /* Product page: clear mobile sequence and usable purchase controls. */
  body.pp62-product .retail-v120-pdp__main,
  body.pp62-product .retail-v162-pdp__main,
  body.pp62-product .retail-v163-pdp__main{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  body.pp62-product .retail-v120-pdp__gallery,
  body.pp62-product .retail-v162-pdp__gallery,
  body.pp62-product .retail-v163-pdp__gallery{
    min-height:420px!important;
  }

  body.pp62-product .woocommerce-product-gallery__image a{
    min-height:370px!important;
  }

  body.pp62-product .retail-v120-pdp__summary,
  body.pp62-product .retail-v162-pdp__summary,
  body.pp62-product .retail-v163-pdp__summary{
    position:static!important;
  }

  body.pp62-product .retail-v120-pdp__purchase form.cart{
    display:grid!important;
    grid-template-columns:130px minmax(0,1fr)!important;
    gap:12px!important;
  }

  body.pp62-product .retail-v120-pdp__purchase .single_add_to_cart_button{
    min-height:52px!important;
  }

  /* Checkout and account forms retain full field width. */
  body.pp62-commerce-checkout :where(
    .woocommerce-checkout,
    .wc-block-checkout,
    .wc-block-components-sidebar-layout
  ){
    grid-template-columns:1fr!important;
  }

  body.pp62-commerce-checkout :where(
    .form-row-first,
    .form-row-last,
    .woocommerce-billing-fields__field-wrapper>p,
    .woocommerce-shipping-fields__field-wrapper>p
  ){
    float:none!important;
    width:100%!important;
  }

  body.pp62-commerce-checkout :where(input,select,textarea),
  body.pp62-account :where(input,select,textarea){
    min-height:48px!important;
    font-size:16px!important;
  }
}

@media(max-width:820px){
  /* Header: retain logo, search, account and bag, then open navigation as a drawer. */
  body.pp62-design-framework .pp626-main-header__inner{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    width:calc(100% - 24px)!important;
    padding:10px 0 12px!important;
  }

  body.pp62-design-framework .pp626-logo{
    width:min(205px,56vw)!important;
  }

  body.pp62-design-framework .pp626-actions{
    gap:5px!important;
  }

  body.pp62-design-framework .pp626-action{
    min-width:44px!important;
    min-height:44px!important;
    justify-content:center!important;
  }

  body.pp62-design-framework .pp626-action span:last-child{
    display:none!important;
  }

  body.pp62-design-framework .pp626-action--wishlist{
    display:none!important;
  }

  body.pp62-design-framework .pp626-search{
    grid-column:1/-1!important;
    grid-row:2!important;
  }

  body.pp62-design-framework .pp626-search .wp-block-search__inside-wrapper{
    min-height:48px!important;
  }

  .pp631-menu-toggle{
    display:inline-flex!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    border:1px solid #ded4da!important;
    border-radius:50%!important;
    background:#fff!important;
    color:#17131a!important;
    box-shadow:none!important;
    font-size:0!important;
  }

  .pp631-menu-toggle::before{
    content:"";
    width:20px;
    height:14px;
    background:
      linear-gradient(#17131a,#17131a) 0 0/100% 2px no-repeat,
      linear-gradient(#17131a,#17131a) 0 50%/100% 2px no-repeat,
      linear-gradient(#17131a,#17131a) 0 100%/100% 2px no-repeat;
  }

  body.pp631-nav-open .pp631-menu-toggle::before{
    width:18px;
    height:18px;
    background:
      linear-gradient(#17131a,#17131a) center/18px 2px no-repeat,
      linear-gradient(#17131a,#17131a) center/2px 18px no-repeat;
    transform:rotate(45deg);
  }

  body.pp62-design-framework .pp626-menu-row{
    position:fixed!important;
    z-index:9999!important;
    inset:0 0 0 auto!important;
    display:block!important;
    width:min(88vw,380px)!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#080910!important;
    border-left:1px solid rgba(255,45,128,.30)!important;
    box-shadow:-20px 0 60px rgba(0,0,0,.38)!important;
    transform:translateX(105%)!important;
    visibility:hidden!important;
    transition:transform .22s ease,visibility .22s ease!important;
  }

  body.admin-bar.pp62-design-framework .pp626-menu-row{
    top:46px!important;
    min-height:calc(100dvh - 46px)!important;
  }

  body.pp631-nav-open.pp62-design-framework .pp626-menu-row{
    transform:translateX(0)!important;
    visibility:visible!important;
  }

  body.pp62-design-framework .pp626-menu-row__inner{
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0 18px 28px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }

  .pp631-menu-close{
    display:flex!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    margin:14px 0 18px auto!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(255,255,255,.20)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.06)!important;
    color:#fff!important;
    box-shadow:none!important;
    font-size:24px!important;
    line-height:1!important;
  }

  body.pp62-design-framework .pp626-nav__list{
    display:block!important;
    min-width:0!important;
    width:100%!important;
    padding:0!important;
  }

  body.pp62-design-framework .pp626-nav__item{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    width:100%!important;
    border-bottom:1px solid rgba(255,255,255,.09)!important;
  }

  body.pp62-design-framework .pp626-nav__item>a{
    min-height:54px!important;
    padding:0 8px!important;
    font-size:12px!important;
    letter-spacing:.03em!important;
  }

  body.pp62-design-framework .pp626-nav__item>a b{
    display:none!important;
  }

  .pp631-submenu-toggle{
    display:flex!important;
    width:48px!important;
    min-width:48px!important;
    height:54px!important;
    min-height:54px!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    border:0!important;
    border-left:1px solid rgba(255,255,255,.09)!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    box-shadow:none!important;
    font-size:20px!important;
    transform:none!important;
  }

  .pp631-submenu-toggle[aria-expanded="true"]{
    color:#ff65a5!important;
  }

  .pp631-submenu-toggle[aria-expanded="true"] span{
    transform:rotate(180deg);
  }

  body.pp62-design-framework .pp626-nav__dropdown{
    position:static!important;
    grid-column:1/-1!important;
    display:none!important;
    width:100%!important;
    padding:10px 4px 18px!important;
    border:0!important;
    border-radius:0!important;
    background:#100d16!important;
    box-shadow:none!important;
  }

  body.pp62-design-framework .pp626-nav__item.is-submenu-open>.pp626-nav__dropdown{
    display:block!important;
  }

  body.pp62-design-framework .pp626-nav__dropdown ul{
    grid-template-columns:1fr!important;
  }

  body.pp62-design-framework .pp626-nav__dropdown li a{
    min-height:44px!important;
    align-items:center!important;
    padding:9px 8px!important;
    font-size:11px!important;
  }

  body.pp62-design-framework .pp626-nav__all{
    min-height:44px!important;
    align-items:center!important;
  }

  /* All common customer controls meet minimum touch size. */
  body.pp631-mobile-accessibility-performance :where(
    .wp-element-button,
    .wp-block-button__link,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .wc-block-components-button,
    input[type="submit"],
    button,
    select
  ){
    min-height:44px;
  }

  /* Homepage mobile reading order and product-card width. */
  body.home .pp61-hero__copy{
    padding-inline:20px!important;
  }

  body.home .pp61-hero__art{
    min-height:340px!important;
  }

  body.home .pp61-best__track{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(250px,78vw)!important;
    grid-template-columns:none!important;
    gap:12px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    padding-bottom:10px!important;
  }

  body.home .pp61-best__track>.pp61-product-card{
    min-width:0!important;
    scroll-snap-align:start!important;
  }

  body.home .pp61-best__next{display:none!important}

  /* Product/cart actions stack without cramped text. */
  body.pp62-product .retail-v120-pdp__purchase form.cart{
    grid-template-columns:1fr!important;
  }

  body.pp62-product .retail-v120-pdp__purchase .quantity{
    width:132px!important;
  }

  body.pp62-commerce-cart .retail-v120-cart-form__actions{
    flex-wrap:wrap!important;
  }

  body.pp62-commerce-cart .retail-v120-cart-form__actions .coupon{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    width:100%!important;
    gap:8px!important;
  }

  body.pp62-commerce-cart .retail-v120-cart-form__actions>button{
    width:100%!important;
  }

  /* Category title and copy do not overflow narrow screens. */
  body.pp62-product-category .retail-v120-category-hero h1,
  body.pp62-shop .retail-v120-category-hero h1{
    font-size:clamp(46px,15vw,64px)!important;
    overflow-wrap:anywhere!important;
  }

  body.pp62-product-category .retail-v120-category-hero__links,
  body.pp62-shop .retail-v120-category-hero__links{
    gap:7px!important;
  }

  /* Footer is readable rather than compressed. */
  body.pp62-design-framework .pp61-footer__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.pp62-design-framework .pp61-footer__brand,
  body.pp62-design-framework .pp61-payments{
    grid-column:1/-1!important;
  }
}

@media(max-width:560px){
  body.pp62-design-framework .pp626-logo{
    width:min(180px,52vw)!important;
  }

  body.pp62-design-framework .pp626-actions{
    gap:2px!important;
  }

  body.pp62-product .woocommerce-product-gallery__image a{
    min-height:300px!important;
  }

  body.pp62-product .retail-v120-pdp__gallery,
  body.pp62-product .retail-v162-pdp__gallery,
  body.pp62-product .retail-v163-pdp__gallery{
    min-height:340px!important;
    padding:10px!important;
  }

  body.pp62-commerce-cart .retail-v120-cart-form__actions .coupon{
    grid-template-columns:1fr!important;
  }

  body.pp62-design-framework .pp61-footer__grid{
    grid-template-columns:1fr!important;
  }

  body.pp62-design-framework .pp61-footer__brand,
  body.pp62-design-framework .pp61-payments{
    grid-column:auto!important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@media(prefers-contrast:more){
  body.pp631-mobile-accessibility-performance :where(a,button,input,select,textarea){
    border-color:currentColor!important;
  }

  body.pp631-mobile-accessibility-performance :where(
    .pp626-nav__item>a,
    .pp61-footer a
  ){
    color:#fff!important;
  }
}
