/* mobile.css — phone and tablet polish for every page (also hides the page scrollbar). Loaded AFTER style.css / site-chrome.css.
   Sections: 1 base · 2 navigation · 3 home hero · 4 about · 5 product gallery · 6 forms · 7 tap targets · 8 floating offer tab */

/* ---------- 0. no page scrollbar on the right (scrolling still works with wheel, touch, keyboard) ---------- */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- 1. base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, [role="button"], label, input, select, textarea { touch-action: manipulation; }
body { -webkit-tap-highlight-color: transparent; }
img, video, svg { max-width: 100%; }

/* ---------- 2. navigation: hamburger instead of tiny cramped links ---------- */
.site-menu-btn,
.site-menu-panel { display: none; }

@media (max-width: 700px) {
  .site-nav { padding: 12px 12px; }
  .site-logo { height: 46px; padding: 0 15px; }
  .site-logo span { font-size: 10px; }
  .site-logo strong { font-size: 19px; }

  /* the four text links move into the menu panel */
  .site-links { max-width: none; padding: 3px; gap: 2px; }
  .site-links a { display: none; }

  .site-menu-btn,
  .site-links .site-bag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .site-links .site-bag svg { width: 19px; height: 19px; }
  .site-links .site-bag b { top: 3px; right: 5px; }

  .site-menu-btn { flex-direction: column; gap: 5px; }
  .site-menu-btn span {
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s ease, opacity .2s ease;
  }
  .site-nav.menu-open .site-menu-btn span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
  .site-nav.menu-open .site-menu-btn span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }
  .site-menu-btn:focus-visible { outline: 1px solid #111; outline-offset: 2px; }

  .site-menu-panel {
    display: block;
    position: absolute;
    top: 70px;
    left: 12px;
    right: 12px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 22px;
    background: rgba(247, 246, 242, .94);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .site-nav.menu-open .site-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }
  .site-nav.menu-open { transform: none !important; z-index: 90; }
  .site-menu-panel a {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 18px;
    border-radius: 14px;
    color: #111;
    font: 500 16px/1 var(--font, 'DM Sans', system-ui, sans-serif);
    letter-spacing: .01em;
    text-decoration: none;
  }
  .site-menu-panel a + a { border-top: 1px solid rgba(17, 17, 17, .08); border-top-left-radius: 0; border-top-right-radius: 0; }
  .site-menu-panel a:active,
  .site-menu-panel a:focus-visible { background: rgba(17, 17, 17, .06); outline: 0; }
  .site-menu-panel a[aria-current="page"] { background: rgba(17, 17, 17, .07); font-weight: 600; }
}

/* ---------- 3. home hero ---------- */
@media (max-width: 900px) {
  /* the text wash used to start with a hard white edge; now it fades in from nothing */
  .hero-copy::before {
    left: -22px;
    right: auto;
    width: 100vw;
    top: -32vh;
    bottom: -118px;
    background: linear-gradient(180deg,
      rgba(247, 246, 242, 0) 0%,
      rgba(247, 246, 242, .5) 26%,
      rgba(247, 246, 242, .84) 52%,
      rgba(247, 246, 242, .9) 100%);
  }
}
/* short screens (small phones, phones on their side): never squash the copy into the photo */
@media (max-width: 900px) and (max-height: 640px) {
  .hero { height: 640px; min-height: 640px; max-height: none; }
}

/* ---------- 4. about page: the photo has text and icons baked in, so it sits ABOVE the numbers on phones ---------- */
@media (max-width: 900px) {
  .ab-impact { padding-top: calc(clamp(230px, 68vw, 420px) + 24px); }
  .ab-impact .ab-media { inset: 0 0 auto 0; height: clamp(230px, 68vw, 420px); }
  .ab-impact .ab-media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 22%; }
  .ab-impact::before {
    inset: 0 0 auto 0;
    height: clamp(230px, 68vw, 420px);
    background: linear-gradient(rgba(107, 74, 54, .05) 40%, #6b4a36 100%);
  }
}

/* ---------- 5. product gallery: big photo first, thumbnails in a row underneath ---------- */
@media (max-width: 767px) {
  .gallery-layout { flex-direction: column-reverse; gap: 10px; height: auto; }
  .thumbnails-col {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
  }
  .thumb-btn { flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1; min-height: 0; }
  .main-image-wrap { width: 100%; flex: none; height: auto; aspect-ratio: 1 / 1; }
}

/* ---------- 6. forms: 16px stops iPhones from zooming in when a field is tapped ---------- */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
  .ct-f input, .ct-f select, .ct-f textarea { min-height: 50px; }
  .site-footer .sf-field input { min-height: 46px; }
}

/* ---------- 7. tap targets: at least ~44px to hit with a thumb ---------- */
@media (max-width: 900px) {
  .qty-btn { min-width: 44px; min-height: 44px; }
  .modal-close-btn { width: 44px; height: 44px; }
  .rm-star { min-width: 42px; min-height: 42px; }
  .ab-arr button, .nu-arrows button, [data-nu-prev], [data-nu-next] { min-width: 44px; min-height: 44px; }
  .nu-info-more { display: inline-flex; align-items: center; min-height: 44px; }
  /* tiny carousel dots: keep the look, widen the invisible touch area */
  button[aria-label^="Go to page"],
  button[aria-label^="Slide "] { position: relative; }
  button[aria-label^="Go to page"]::after,
  button[aria-label^="Slide "]::after { content: ''; position: absolute; inset: -17px -8px; }
}

/* ---------- 8. floating offer tab: smaller, and kept off the hero ---------- */
@media (max-width: 700px) {
  html .ox-tab {
    min-height: 40px;
    padding: 9px 15px;
    font-size: 10px;
    transition: translate .7s cubic-bezier(.2, .8, .2, 1), background .3s ease, opacity .3s ease;
  }
  html.has-hero:not(.past-hero) .ox-tab { opacity: 0; pointer-events: none; }
}

/* ---------- 9. home perks: icon on top, text underneath, so four short cards fit a phone ---------- */
@media (max-width: 600px) {
  .nu-perks .nu-wrap { gap: 26px 16px; }
  .nu-perk { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nu-ico, .nu-ico svg { width: 32px; height: 32px; }
  .nu-perk b { font-size: 16px; }
  .nu-perk div > span { font-size: 14px; margin-top: 2px; }
}

/* ---------- 10. product reviews on phones: small photo beside the text, not a giant photo on top ---------- */
@media (max-width: 519px) {
  .review-item {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 0;
  }
  .review-photo-wrap { order: 2; width: 88px; max-width: 88px; flex: 0 0 88px; }
  .review-main { order: 1; }
  .review-person { margin-bottom: 12px; gap: 12px; }
  .review-avatar { width: 38px; height: 38px; font-size: 13px; }
  .review-text { font-size: 15px; line-height: 1.55; margin-bottom: 14px; }
  .review-meta { row-gap: 10px; padding-top: 12px; }
  .review-meta > div { padding: 0 12px 0 10px; }
  .review-meta > div:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 359px) {
  .review-photo-wrap { width: 72px; max-width: 72px; flex-basis: 72px; }
}

@media (max-width: 519px) {
  /* review details: Age + Skin type side by side, Texture underneath */
  .review-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .review-meta > div,
  .review-meta > div:first-child { padding: 0; border-left: 0; min-width: 0; }
  .review-meta > div:nth-child(1) { order: 1; }
  .review-meta > div:nth-child(3) { order: 2; }
  .review-meta > div:nth-child(2) { order: 3; grid-column: 1 / -1; }
}

/* sticky "Add to cart" bar: price stays on one line, button never shrinks */
.tx-sticky-info { min-width: 0; }
.tx-sticky-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-sticky-info span { white-space: nowrap; }
.tx-sticky button { flex-shrink: 0; }
@media (max-width: 359px) {
  .tx-sticky button { padding-left: 18px; padding-right: 18px; letter-spacing: .1em; }
}

/* ---------- 11. home best sellers on phones/tablets: swipe row of product cards instead of a long stack with an orphan card ---------- */
@media (max-width: 900px) {
  .nu-best-list {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .nu-best-list::-webkit-scrollbar { display: none; }
  .nu-best-list .nu-pc { flex: 0 0 min(86%, 340px); scroll-snap-align: start; }
}
.tx-sticky { gap: 12px; }

/* ---------- 12. home promo cards on tablets: photo on the right with a fade (like desktop), text stays clear on the left ---------- */
@media (min-width: 601px) and (max-width: 1000px) {
  .nu-promo { min-height: 300px; }
  .nu-promo::before {
    width: 64%;
    opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40%);
  }
  .nu-promo::after {
    background: linear-gradient(90deg, rgba(var(--wash), .96) 0, rgba(var(--wash), .9) 42%, rgba(var(--wash), .4) 58%, rgba(var(--wash), 0) 76%);
  }
  .nu-promo h3 { max-width: 62%; }
  .nu-promo p { max-width: 54%; }
}

/* product card: photo on top, name + price, four short benefit points, two buttons */
@media (max-width: 900px) {
  .nu-best-list { align-items: stretch; margin-inline: -2px; padding: 2px 2px 8px; }
  .nu-best-list .nu-pc {
    display: flex;
    flex-direction: column;
    background: #f8f4ec;
    border: 1px solid rgba(49, 51, 30, .1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(49, 51, 30, .07);
  }
  .nu-best-list .nu-pc-img { border-radius: 0; aspect-ratio: 1 / 1; }
  .nu-best-list .nu-pc-meta { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; padding: 16px 18px 0; }
  .nu-best-list .nu-pc-cat { order: -1; grid-column: 1; grid-row: 1; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nu-muted, #6d6b58); }
  .nu-best-list .nu-pc-name { grid-column: 1; grid-row: 2; font-size: 19px; line-height: 1.25; }
  .nu-best-list .nu-pc-price { grid-column: 1; grid-row: 3; text-align: left; font-size: 16px; }
  .nu-best-list .nu-pc-buy { display: flex; flex-direction: column; flex: 1; margin: 0; padding: 0 18px 18px; }
  .nu-pc-points {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 16px 0 20px;
    padding: 16px 0 0;
    border-top: 1px solid var(--nu-line, rgba(49, 51, 30, .16));
  }
  .nu-pc-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--nu-ink, #2b2c19);
  }
  .nu-pc-points li::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 0;
    border-radius: 50%;
    background: var(--nu-olive, #605c39) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3ede3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  }
  .nu-best-list .nu-info-btns { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nu-best-list .nu-btn { justify-content: center; gap: 8px; min-height: 46px; padding: 12px 8px; font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
}