/* Storefront polish layer (responsive + premium polish pass, additive only).
   Loaded after app-storefront.css. Desktop >=1280 mouse layout is untouched by
   construction: every rule below is gated by media (pointer: coarse) + width, or is
   a transition/transform that never shifts layout, or is hover-gated.
 */

/* 1. Touch floor extension - closes the gaps the base floor leaves open:
   footer text links/accordion/social/brand, mega-menu quick links, search close,
   and text inputs/selects. Coarse pointers below the desktop width only. */
@media (pointer: coarse) and (max-width: 1279.98px) {
  footer a,
  footer button,
  .mega-panel a,
  button#searchClose,
  .search-overlay__close {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
  .mega-panel a { width: 100%; }
  /* Breadcrumb links: uniform 44px touch floor (short labels like the Home crumb render < 44px wide). */
  nav[aria-label="Breadcrumb"] a { min-width: 44px; justify-content: center; }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { min-height: 44px; }
  /* 404 category chips: py-2 pills render 40px tall. */
  .alayn-404-cats a { min-height: 44px; }
  /* Tablet+ accordion headings (>=640px desktop layout keeps the buttons as text-height headings). */
  .site-footer--modern .footer-accordion-btn { min-height: 44px; }
}

/* 2. Consistent interaction motion: unify the site transition rhythm (150-300ms band,
   refined easing) - additive: only duration/timing are refined, never properties. */
@media (prefers-reduced-motion: no-preference) {
  a, button, input, select, textarea, [role="button"] {
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* 3. Micro-interactions - transform/opacity only, jank-free, hover-gated. */
  @media (hover: hover) {
    .pc-image img {
      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .pc-image:hover img { transform: scale(1.03); }
    .btn-gold:active,
    .btn-outline:active,
    .btn-primary:active,
    .btn-secondary:active { transform: scale(0.98); }
  }
}

/* 4. Mobile-menu sub-category links: match the .mm-link 44px touch floor.
   .mm-sub__link had only vertical padding (~40px) in the fullscreen drawer.
   Additive; the drawer is hidden on desktop so >=1280 layout is untouched. */
.mm-sub__link {
  display: flex;
  align-items: center;
  min-height: 44px;
}


/* 5. Shine sweeps -> transform (2026-08-23 responsive-polish).
   Four decorative pseudo-elements animated `left`, which re-lays-out the element on
   every frame of the sweep. translateX is pixel-identical here: the travel distance is
   only rescaled from "% of the containing block" to "% of the element's own width".
     .pro-btn--primary:before  -100% -> 150%  = 250% of button / 60% wide  = 416.667%
     .trust-badge:after        -100% -> 100%  = 200% of badge  / 100% wide = 200%
     .pc-shine                  -60% -> 120%  = 180% of card   / 50% wide  = 360%
     .pcx-cta::after            -65% -> 125%  = 190% of cta    / 45% wide  = 422.222%
   Durations/easings are copied verbatim from the source rules, and the whole block is
   gated on no-preference so the existing reduced-motion kill-switch still wins. */
@media (prefers-reduced-motion: no-preference) {
  .pro-btn--primary:before { transition: transform .8s ease; }
  .pro-btn--primary:hover:before { left: -100%; transform: translateX(416.667%); }

  .trust-badge:after { transition: transform .6s ease; }
  .trust-badge:hover:after { left: -100%; transform: translateX(200%); }

  .pc-shine { transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
  .product-card-fx:hover .pc-shine { left: -60%; transform: translateX(360%) skewX(-20deg); opacity: 1; }

  .pcx-cta::after { transition: transform .6s ease; }
  .pcx-cta:hover::after { left: -65%; transform: translateX(422.222%) skewX(-18deg); }
}


/* 6. iOS dynamic viewport (2026-08-23 responsive-polish).
   Three storefront rules still measured in 100vh. On mobile Safari 100vh resolves to the
   LARGE viewport (toolbars hidden), so the sticky product gallery rendered taller than the
   visible area whenever the toolbars were on screen. dvh is identical to vh on every
   desktop browser, so the >=1280 layout is untouched by construction.
   .pro-gallery__main is re-scoped to >=1025px on purpose: the source resets it to
   height:auto inside @media (max-width:1024px), and this later layer must not outrank
   that reset on phones/tablets. */
@supports (height: 100dvh) {
  @media (min-width: 1025px) {
    .pro-gallery__main { height: calc(100dvh - 60px); }
  }
  .pro-product { min-height: 100dvh; }
  .pro-shop { min-height: 100dvh; }
}


/* 7. Touch floor, round 2 (2026-08-23 responsive-polish).
   Measured on a real coarse-pointer viewport (375 and 320 CSS px, DPR 2) across 15 public
   pages; these are every control left under 44px that the section-1 floor does not reach.
   All of it is gated to coarse pointers below the desktop width, so >=1280 is untouched.
   Block-level controls get min-height; the two INLINE text links get padding-block instead —
   vertical padding on an inline box grows the hit area without touching the line box, so the
   sentence they sit in does not reflow. */
@media (pointer: coarse) and (max-width: 1279.98px) {
  /* product page: variant / size option buttons rendered 40px at 320px */
  .pro-opt,
  .pro-size { min-height: 44px; }

  /* login: "Get help linking orders" rendered 43px */
  #linkOrdersHelpBtn { min-height: 44px; }

  /* blog index: "Read More" rendered 37px (already inline-flex + centred) */
  .alayn-blog-card__more { min-height: 44px; }

  /* sitemap: link list rendered 32-40px */
  .alayn-sitemap-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* creator/join: FAQ disclosure headers rendered 34px */
  summary { min-height: 44px; }

  /* inline sentence links — hit area only, zero reflow */
  .alayn-404-help a { padding-block: 11px; }
  form p a[href="/terms"],
  form p a[href="/privacy"] { padding-block: 13px; }
}

/* 7b. Touch floor, round 3 (2026-08-25, unit U6 — /login only).
   Round 2 above gave the two legal links their 44px HEIGHT via padding-block but left
   the WIDTH at 28px (Terms) / 34px (Privacy), measured headless at 360 and 768 CSS px
   with hasTouch. padding-inline:8px takes the border boxes to 44.17px and 49.72px;
   margin-inline:-4px gives back half of the added run so the centred sentence keeps
   its original spacing. Both are INLINE boxes, so neither property touches the line
   box: the sentence stays on one line and the <p> stays 34.59px tall at both widths.
   The two padded boxes end up 4.7px apart at 360px — adjacent, never overlapping. */
@media (pointer: coarse) and (max-width: 1279.98px) {
  form p a[href="/terms"],
  form p a[href="/privacy"] {
    padding-inline: 8px;
    margin-inline: -4px;
  }
}

/* 7c. /login marketing-consent checkbox tap target (2026-08-25, unit U6).
   The native <input type=checkbox> rendered 13x16 at 360px (flex-shrunk) and 16x16 at
   768px. Chrome ignores padding/border on an appearance:auto checkbox — verified
   headless — so the input's own box cannot be grown without scaling the painted glyph.
   The input is therefore wrapped in <span class="al-consent__hit"> inside its existing
   <label>: the span is the 44x44 target (a label descendant, so a tap anywhere in it
   toggles the input natively) while the painted box stays 16x16.

   Base rule reproduces the `mt-1 h-4 w-4` the input used to carry, so fine-pointer
   rendering is byte-identical. The coarse override grows the span to 44x44 and cancels
   the growth with negative margins (-10/-14/-14/-14) so the row geometry is unchanged:
   the glyph stays at the label's origin +0,+4 and the text still starts at +26px.
   The 44px box is centred on the glyph, landing inside the 16px margins the row already
   had above and below it — it does not reach the e-mail field or the Continue button. */
.al-consent__hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 4px;
}
.al-consent__hit > input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
}
@media (pointer: coarse) and (max-width: 1279.98px) {
  .al-consent__hit {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: -10px -14px -14px;
  }
}

/* 8. Prose/legal body links (.blog-content): 44px hit area on touch, zero reflow.
   Measured 29px tall on /terms and /privacy (coarse pointer, 375/320 CSS px).
   padding-block on an inline box grows the hit area without touching the line box
   (same technique as section 7); block links simply meet the floor. The media gate
   keeps desktop >=1280 untouched. */
@media (pointer: coarse) and (max-width: 1279.98px) {
  .blog-content a { padding-block: 8px; }
}

/* 9. Header account/notification dropdown + logout buttons (2026-08-23).
   The two logout <form>/<button> pairs carried an inline reset
   (padding:0; font:inherit; border:none) that beat their own classes:
   - desktop #accDrop: the Logout row lost .sh-dropdown__item's 10px/16px padding
     and rendered at 15px flush to the panel edge, its fill bleeding over the 14px
     rounded corners while the sibling <a> rows sat 16px in.
   - mobile .mm-footer: the Logout button lost .mm-btn's padding + the
     --outline-danger border, and the inline <form> would not flex next to
     "My Account".
   Markup now carries classes only; the boxes below restore them. The panel also
   sat 2.5px inside the fixed header's bottom border (button bottom 89.5 + 8 vs
   header bottom 100) — +14px clears it, and overflow:hidden clips any full-bleed
   row fill to the rounded corners. */
.sh-dropdown { top: calc(100% + 14px); overflow: hidden; }
.sh-dropdown__item { min-height: 44px; }
.sh-dropdown__form { display: block; margin: 0; }
button.sh-dropdown__item {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.mm-footer__logout { display: block; margin: 0; flex: 1 1 0%; }
.mm-footer__logout .mm-btn { width: 100%; font-family: inherit; }

/* ============================================
   VISUAL POLISH - Premium additive layer
   Gold/charcoal design system match.
   Desktop >=1280 unaffected (additive effects).
   ============================================ */

.site-header.scrolled {
    box-shadow: 0 1px 12px rgba(31,41,55,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255,255,255,.92);
}

.product-card {
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) {
    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(212,165,55,.14), 0 2px 8px rgba(17,24,39,.06);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .product-card:hover img { transform: scale(1.04); }
    .product-card img { transition: transform .35s cubic-bezier(.4,0,.2,1); }
}

.pro-btn--primary,
[class*="bg-gold"][class*="text-white"] {
    background-image: linear-gradient(135deg, #D4A537, #E8BE5A);
    box-shadow: 0 2px 6px rgba(212,165,55,.22);
    transition: background-image .15s ease, box-shadow .18s ease;
}
.pro-btn--primary:hover,
[class*="bg-gold"][class*="text-white"]:hover {
    background-image: linear-gradient(135deg, #C49530, #D4A537);
    box-shadow: 0 4px 14px rgba(212,165,55,.32);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .product-card, .product-card img { transition: none; } .pro-btn--primary, [class*="bg-gold"] { transition: none; } }