/* ==========================================================================
   Chai Nest — MOBILE POLISH PASS (v1.0.0)
   Loaded after the theme stylesheet by mu-plugins/loop-mobile-polish.php.
   Phone/touch-only overrides — desktop layouts are untouched.
   To revert: delete mu-plugins/loop-mobile-polish.php (and this file).
   ========================================================================== */

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* ---- 1. Touch feel: no grey tap flash, a small press-in on everything tappable ---- */
@media (hover:none){
  a, button, summary, label, input, select, [role="button"]{ -webkit-tap-highlight-color:transparent; }

  .btn, .pdp-atc, .qa-modal__submit, .cartp-btn, #place_order, .footer-ig-btn,
  .shop-card__qa, .product-card .js-quick-add, .pdp-size__pill, .qa-size,
  .shop-mbar > *, .header-icon-link, .nav-toggle, .wishlist-heart, .shop-card__heart{
    transition:transform .12s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
  }
  .btn:active, .pdp-atc:active, .qa-modal__submit:active, .cartp-btn:active, #place_order:active, .footer-ig-btn:active,
  .shop-card__qa:active, .product-card .js-quick-add:active, .pdp-size__pill:active, .qa-size:active,
  .shop-mbar > *:active, .header-icon-link:active, .nav-toggle:active, .wishlist-heart:active, .shop-card__heart:active{
    transform:scale(.95);
  }

  .product-card, .shop-card, .pdp-card, .hero-shot, .ugc-tile{ transition:transform .18s ease; }
  .product-card:active, .shop-card:active, .pdp-card:active, .hero-shot:active, .ugc-tile:active{ transform:scale(.98); }
}

@media (max-width:767px){

  /* ---- 2. Header menu: big thumb-friendly rows, dimmed page, ✕ when open ---- */
  .nav-toggle{
    position:relative; width:40px; height:40px; padding:0; border-radius:999px;
    align-items:center; justify-content:center;
  }
  .nav-toggle[aria-expanded="true"]{ background:var(--ink); color:#fff; }
  .nav-toggle[aria-expanded="true"] svg{ opacity:0; }
  .nav-toggle[aria-expanded="true"]::before,
  .nav-toggle[aria-expanded="true"]::after{
    content:""; position:absolute; left:11px; top:19px; width:18px; height:2px;
    border-radius:2px; background:currentColor; transform:rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"]::after{ transform:rotate(-45deg); }

  .main-nav{
    border-radius:0 0 24px 24px;
    /* the second shadow dims the page below; clip-path keeps it off the header */
    box-shadow:0 18px 30px -12px rgba(46,43,56,.25), 0 0 0 100vmax rgba(46,43,56,.32);
    clip-path:inset(0 0 -100vmax 0);
    animation:lmpMenu .22s cubic-bezier(.22,1,.36,1);
  }
  .main-nav ul{ padding:6px 0 14px; }
  .main-nav a{
    display:flex; align-items:center; justify-content:space-between;
    min-height:58px; padding:0 var(--gutter);
    font-family:var(--font-head); font-size:21px; font-weight:700; line-height:1.1;
  }
  .main-nav a::after{
    content:""; flex:none; width:8px; height:8px; margin-right:4px;
    border-top:2px solid currentColor; border-right:2px solid currentColor;
    transform:rotate(45deg); opacity:.35;
  }
  .main-nav a:active{ color:var(--flash); }

  /* ---- 3. Product cards (shop grid + home): one clean, consistent card ---- */
  .shop-grid, body.home .product-grid{ gap:12px; }

  .shop-card, body.home .product-card{ border-radius:18px; }
  .shop-card__body, body.home .product-card__body{ padding:10px 12px 12px; gap:0; }
  .shop-card__name, body.home .product-card__title{
    font-family:var(--font-body); font-weight:700; font-size:14px; line-height:1.3;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
    overflow:hidden; min-height:2.6em;
  }
  .shop-card__foot, body.home .product-card__footer{
    flex-wrap:nowrap; align-items:center; gap:8px; padding-top:8px; margin-top:auto;
  }
  .shop-card__price, body.home .product-card__price{ font-family:var(--font-body); font-weight:700; font-size:15px; }
  .shop-card__foot:has(.shop-card__oos){ flex-wrap:wrap; gap:6px; }
  .shop-card__oos{
    white-space:nowrap; font-size:11.5px; font-weight:600; line-height:1;
    padding:6px 10px; border-radius:999px; background:rgba(46,43,56,.07);
  }

  /* "Quick Add" becomes the same round + button the home cards use (44px tap area) */
  .shop-card__qa,
  body.home .product-card .js-quick-add{
    position:relative; z-index:2; flex:none; display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; min-width:36px; min-height:36px; padding:0; border-radius:50%; gap:0;
    font-size:0; line-height:1; background:var(--ink); border:0; color:#fff;
    box-shadow:0 4px 12px -4px rgba(46,43,56,.45);
  }
  .shop-card__qa::before,
  body.home .product-card .js-quick-add::before{ content:"+"; font-family:var(--font-body); font-size:22px; font-weight:500; line-height:1; margin-top:-2px; }
  .shop-card__qa::after,
  body.home .product-card .js-quick-add::after{ content:""; position:absolute; inset:-5px; border-radius:50%; }

  /* ---- 4. Product page ---- */
  /* the sticky bar sits over the end of the page, not in the middle of it */
  .pdp{ padding-bottom:8px; }
  body:has(.pdp-bar){ padding-bottom:calc(67px + env(safe-area-inset-bottom)); }

  /* sticky bar: price was being squeezed to "379.00 MA" */
  .pdp-bar{ align-items:center; }
  .pdp-bar__total{ flex:0 0 auto; }
  .pdp-bar__label{ font-size:11px; }
  .pdp-bar .pdp-atc{ min-width:0; }

  /* perks: the WhatsApp line's icon now sits level with its text */
  .pdp-perk:has(> a){ align-items:center; }
  .pdp-perk:has(> a) a{ min-height:40px; }
  /* this box repeated the perks list right above it word for word */
  .pdp-trust{ display:none; }

  /* "You might also like": text had no padding (inline span), cards were cramped */
  .pdp-related{ padding-bottom:12px; }
  .pdp-card{ width:auto; flex:0 0 44%; }
  .pdp-card__body{ display:block; padding:10px 12px 12px; }
  .pdp-card__name{
    font-size:13.5px; line-height:1.3;
    /* !important: the markup sets display:block inline */
    display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  }
  .pdp-card__price{ font-size:14.5px; margin-top:6px; }

  .pdp-wa-fab{ bottom:calc(80px + env(safe-area-inset-bottom)); }

  /* ---- 5. Shop + cart: same fix — room for the bottom bar goes after the footer ---- */
  .shop{ padding-bottom:28px; }
  body:has(.shop-tabbar){ padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
  .cartp{ padding-bottom:28px; }
  body:has(.cartp-bar){ padding-bottom:calc(118px + env(safe-area-inset-bottom)); }

  /* ---- 6. Checkout: price under the product name instead of a squeezed column ---- */
  /* table → stacked rows, so the name isn't boxed into the table's first column */
  body.loop-page-checkout table.woocommerce-checkout-review-order-table,
  body.loop-page-checkout table.woocommerce-checkout-review-order-table > tbody,
  body.loop-page-checkout table.woocommerce-checkout-review-order-table > tfoot{ display:block; width:100%; }
  body.loop-page-checkout table.woocommerce-checkout-review-order-table > thead{ display:none; }
  body.loop-page-checkout table.woocommerce-checkout-review-order-table > tfoot tr{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
  body.loop-page-checkout table.woocommerce-checkout-review-order-table > tfoot tr.cart-subtotal,
  body.loop-page-checkout table.woocommerce-checkout-review-order-table > tfoot tr.order-total{ border-top:1.5px solid var(--lilac); }
  body.loop-page-checkout table.woocommerce-checkout-review-order-table > tfoot tr.cart-subtotal > *,
  body.loop-page-checkout table.woocommerce-checkout-review-order-table > tfoot tr.order-total > *{ border-top:0 !important; }
  body.loop-page-checkout table.woocommerce-checkout-review-order-table tbody tr.cart_item{ display:flex; flex-direction:column; width:100%; }
  body.loop-page-checkout table.woocommerce-checkout-review-order-table tbody td.product-name{
    height:auto; padding-bottom:4px; font-size:14.5px; line-height:1.35;
  }
  body.loop-page-checkout table.woocommerce-checkout-review-order-table tbody td.product-total{
    text-align:left; padding:0 0 16px 68px; min-height:34px; color:var(--flash);
  }
  body.loop-page-checkout table.woocommerce-checkout-review-order-table tbody tr + tr td.product-total{ border-top:0; }
  .sc-review-head a{ display:inline-flex; align-items:center; min-height:40px; }

  /* ---- 7. Small tap targets ---- */
  .cart-toast__close{ width:32px; height:32px; top:8px; right:8px; }
  .cart-toast__close::after{ content:""; position:absolute; inset:-6px; }
}

/* ---- 8. Quick Add: bottom sheet on phones (easy to reach with a thumb) ---- */
@media (max-width:600px){
  .qa-modal{ align-items:flex-end; padding:0; }
  .qa-modal__panel{
    max-width:none; max-height:88vh; border-radius:26px 26px 0 0;
    box-shadow:0 -12px 40px rgba(46,43,56,.22);
    transform:translateY(100%); transition:transform .34s cubic-bezier(.22,1,.36,1);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .qa-modal.is-open .qa-modal__panel{ transform:none; }
  .qa-modal__panel::before{
    content:""; position:absolute; z-index:3; top:8px; left:50%; width:40px; height:5px; margin-left:-20px;
    border-radius:5px; background:rgba(255,255,255,.95); box-shadow:0 1px 4px rgba(46,43,56,.25);
  }
  .qa-modal__media{ min-height:0; height:190px; }
  .qa-modal__body{ padding:18px 20px 20px; }
  .qa-modal__close{ top:14px; right:14px; width:36px; height:36px; z-index:3; background:rgba(255,255,255,.94); box-shadow:0 2px 8px rgba(46,43,56,.15); }
  .qa-modal__close::after{ content:""; position:absolute; inset:-4px; }
  .qa-modal__submit{ min-height:52px; }

  /* ---- 9. Home ---- */
  /* hero photos a little shorter so the headline shows on the first screen */
  body.home .hero__image--photos{ height:min(94vw, 372px); }
  body.home .hero h1{ font-size:30px; line-height:1.12; }
  body.home .hero p{ font-size:14.5px; }
  /* the two buttons sit side by side instead of stacking */
  body.home .hero__actions{ flex-direction:row; flex-wrap:nowrap; gap:10px; margin-top:18px; }
  body.home .hero__actions .btn{ width:auto; flex:1 1 0; min-width:0; min-height:50px; padding:0 12px; font-size:15px; white-space:nowrap; }
  body.home .hero__actions .btn--primary{ flex-grow:1.55; }

  /* trust badges: 2×2 readable chips instead of four 10.5px captions */
  body.home .trust-bar{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px;
    padding-top:20px; padding-bottom:4px; border:0; text-align:left;
  }
  body.home .trust-item{
    flex-direction:row; align-items:center; justify-content:flex-start; gap:10px;
    padding:12px; border-radius:14px; background:rgba(255,255,255,.72);
    box-shadow:inset 0 0 0 1px rgba(46,43,56,.06);
    font-size:13px; font-weight:600; line-height:1.25;
  }
  body.home .trust-item svg{ flex:none; width:20px; height:20px; }

  /* ---- 10. Footer: links big enough to tap ---- */
  .footer-acc ul li{ margin:0; }
  .footer-acc ul a{ display:inline-flex; align-items:center; min-height:40px; }
  .footer-bottom a{ display:inline-flex; align-items:center; min-height:36px; }
  .site-footer .whatsapp-link{ display:inline-flex; align-items:center; min-height:44px; }
}

@keyframes lmpMenu{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .main-nav{ animation:none !important; }
  .qa-modal__panel{ transition:none !important; }
  .product-card:active, .shop-card:active, .pdp-card:active, .hero-shot:active, .ugc-tile:active{ transform:none; }
}