/*
Theme Name: PackFirst
Description: PackFirst pop-stamp bundle-builder store (WooCommerce).
Version: 1.0
Author: PackFirst
*/

  :root{
    --skybg:#DCEEFB; --paper:#FDFBF4; --ink:#141414; --cobalt:#1D46E0; --sun:#FFC93C;
    --mint:#BFE8D4; --red:#E0341D; --cream:#FDFBEF; --stagebg:#E7F1FB; --ok:#1E9E5A;
    --disp:"Archivo Black",Arial,sans-serif; --body:"Archivo",Arial,sans-serif;
    --bord:3px solid var(--ink);
  }
  *{box-sizing:border-box;margin:0}
  body{background:var(--skybg) url('assets/img/bg_sky.webp') center top / cover no-repeat fixed;color:var(--ink);font-family:var(--body);line-height:1.45}
  img{max-width:100%}
  .num{font-variant-numeric:tabular-nums}

  /* ===== HEADER ===== */
  /* vertical rotating announcement: one message at a time, slides up every ~5s */
  .marquee{background:var(--cobalt);color:#fff;overflow:hidden;border-bottom:var(--bord);height:38px}
  .ann-track{display:flex;flex-direction:column;animation:annslide 15s infinite}
  .ann-item{height:38px;flex:none;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 14px;font-weight:700;font-size:13px;letter-spacing:.02em;white-space:nowrap}
  @keyframes annslide{
    0%,28%      {transform:translateY(0)}
    33.3%,61.6% {transform:translateY(-25%)}
    66.6%,95%   {transform:translateY(-50%)}
    100%        {transform:translateY(-75%)}
  }
  @media(prefers-reduced-motion:reduce){.ann-track{animation:none}}
  @media(max-width:560px){.marquee,.ann-item{height:34px}.ann-item{font-size:12px}}
  nav{display:flex;align-items:center;justify-content:space-between;padding:9px 3vw;background:var(--paper);border-bottom:var(--bord);position:sticky;top:0;z-index:40}
  .brand{font-family:var(--disp);font-size:24px;text-decoration:none;color:var(--ink)}
  .brand span{color:var(--cobalt)}
  .nav-rate{font-weight:700;font-size:14px}
  .nav-rate .s{color:var(--red);letter-spacing:1px}

  .sky{position:relative}

  .wrap{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:16px 3vw 24px;
    display:grid;grid-template-columns:0.94fr 1.06fr;gap:clamp(20px,2.4vw,30px);align-items:stretch}
  /* grid/flex children must be allowed to shrink or long content forces horizontal overflow */
  .wrap>*{min-width:0}

  /* ===== LEFT: logo + image + thumbnails ===== */
  .leftcol{display:flex;flex-direction:column}
  .pdp-logo{align-self:flex-start;display:inline-block;text-decoration:none;margin-bottom:22px;line-height:0}
  .pdp-logo img{width:211px;max-width:60vw;height:auto;display:block}
  .logo-word{font-family:var(--disp);font-size:24px;letter-spacing:-.5px;line-height:1}
  .logo-word .ac{color:var(--cobalt)}
  .leftcol{align-self:start}
  .frame{flex:1 1 auto;display:flex;flex-direction:column;gap:8px}
  .stage{flex:1;position:relative;background:#fff;border:none;border-radius:0;display:flex;padding:0;min-height:0;overflow:hidden}
  .stage-best{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--disp);font-size:11px;color:#fff;background:var(--red);border:2.5px solid var(--ink);border-radius:0;padding:5px 12px;box-shadow:none;letter-spacing:.02em}
  .stage-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:7px}
  .stage-dots i{width:8px;height:8px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);opacity:.55;transition:.2s}
  .stage-dots i.on{opacity:1;background:var(--cobalt);border-color:var(--cobalt);width:20px;border-radius:0}
  .watch-demo{position:absolute;right:14px;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:13px;color:#fff;background:var(--ink);border:2.5px solid var(--ink);border-radius:0;padding:9px 16px;box-shadow:none;cursor:pointer}
  .watch-demo .wd-play{color:var(--sun);font-size:11px}
  .watch-demo:hover{background:#000}
  .uae-proof{font-size:13px;font-weight:600;color:#555;white-space:nowrap}
  .uae-proof .uae-sep{margin:0 2px;color:#999}
  .uae-proof b{font-weight:800;color:var(--ink)}
  .uae-proof .flag{font-size:14px}
  @media(max-width:560px){.uae-proof{font-size:12px}.watch-demo{font-size:11px;padding:7px 12px}.stage-best{font-size:9.5px;padding:4px 9px}}
  /* video thumbnail (first thumb) */
  .thumbs .thumb-video{position:relative;overflow:hidden}
  .thumbs .thumb-video img{object-fit:cover;aspect-ratio:1/1}
  .thumbs .thumb-video .tv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;padding-left:2px;pointer-events:none}
  .thumbs .thumb-video .tv-dur{position:absolute;bottom:5px;right:6px;background:rgba(0,0,0,.78);color:#fff;font-size:9px;font-weight:800;padding:1px 5px;border-radius:0;letter-spacing:.02em;pointer-events:none}
  /* demo video popup */
  .vid-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
  .vid-modal[hidden]{display:none}
  .vid-backdrop{position:absolute;inset:0;background:rgba(10,15,30,.74)}
  .vid-box{position:relative;width:min(560px,92vw);background:#000;border:var(--bord);border-radius:0;box-shadow:none;overflow:hidden}
  .vid-box video{display:block;width:100%;height:auto;background:#000}
  .vid-close{position:absolute;top:-14px;right:-14px;z-index:2;width:38px;height:38px;border-radius:50%;background:var(--sun);border:var(--bord);font-size:24px;line-height:1;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:none}
  @media(max-width:560px){.vid-close{top:-10px;right:-10px;width:34px;height:34px;font-size:21px}}
  .imgbox{flex:1;background:#fff;border-radius:0;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .imgbox img{width:100%;height:auto;object-fit:contain;display:block}
  .imgbox img.fit-contain{object-fit:contain}  /* box image #4: show full, not cropped */
  .usb-stk{position:absolute;top:16px;right:16px;font-family:var(--disp);font-size:12px;background:var(--mint);border:var(--bord);border-radius:0;padding:8px 15px;box-shadow:none;transform:rotate(-3deg);white-space:nowrap}
  .thumbs{display:flex;gap:12px}
  .thumbs button{flex:1;background:#fff;border:2px solid var(--ink);border-radius:0;padding:12px;cursor:pointer;box-shadow:none}
  .thumbs button.active{border-color:var(--sun);box-shadow:none}
  .thumbs img,.thumbs .ph{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;display:block}
  .thumbs .ph{display:flex;align-items:center;justify-content:center;font-size:30px}

  /* ===== RIGHT: title block + panel ===== */
  .right{position:relative;margin-top:106px}  /* align title top with image-box top (which sits below the logo) */
  .badges{position:relative;height:34px;margin-bottom:8px}
  .n1{position:absolute;top:4px;left:0;font-family:var(--disp);font-size:12px;background:var(--ink);color:#fff;border-radius:0;padding:6px 12px}
  .cult{position:absolute;top:-4px;left:60px;font-family:var(--disp);font-size:13px;background:var(--sun);border:var(--bord);border-radius:0;padding:6px 16px;box-shadow:none;transform:rotate(-4deg)}
  .approve{position:absolute;top:34px;right:-6px;width:96px;height:96px;border:3px dashed var(--red);border-radius:50%;
    display:flex;align-items:center;justify-content:center;text-align:center;color:var(--red);font-family:var(--disp);font-size:11px;line-height:1.25;transform:rotate(12deg);background:rgba(255,255,255,.4);z-index:5}
  h1{font-family:var(--disp);font-size:clamp(22px,2.3vw,36px);line-height:1.1;text-transform:uppercase;letter-spacing:-1px;margin-bottom:6px;position:relative;z-index:2}
  h1 .l1,h1 .l2{white-space:nowrap}
  /* mobile: shrink the headline so each line stays on one line — exactly 2 lines, never 3 */
  @media(max-width:560px){ h1{font-size:clamp(17px,5.2vw,28px)} h1 .l1,h1 .l2{white-space:nowrap} }
  h1 mark{background:var(--sun);padding:0 8px}
  .buyline{display:flex;align-items:baseline;justify-content:space-between;gap:2px 14px;flex-wrap:wrap;margin-bottom:11px}
  @media(max-width:560px){.buyline{flex-direction:column;align-items:flex-start;gap:0}}
  .stars{font-size:24px}.stars .s{color:var(--red);letter-spacing:1.5px}.stars b{font-weight:700;font-size:18px;margin-left:8px}
  .stars .revsep{color:#555;font-weight:600;margin:0 3px}
  .stars .revcount{font-size:15px;font-weight:700;color:var(--cobalt);cursor:pointer;text-decoration:underline}
  .stars a.revcount:hover{color:var(--cobalt-d,#1636B8)}
  #reviews{scroll-margin-top:14px}
  .pricebox{display:inline-flex;align-items:baseline;gap:9px;background:#fff;border:var(--bord);border-radius:0;box-shadow:none;padding:9px 18px}
  .pricebox .p{font-family:var(--disp);font-size:26px}
  .pricebox small{font-weight:700;font-size:12px;color:#555}

  .pack{background:#fff;border:var(--bord);border-radius:0;box-shadow:none;overflow:hidden}
  .pack-head{background:var(--cobalt);color:#fff;padding:8px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .pack-head h2{font-family:var(--disp);font-size:18px;letter-spacing:.02em}
  .pack-head .deal{font-size:12px;font-weight:700;background:var(--sun);color:var(--ink);border-radius:0;padding:5px 13px}
  .pack-subhead{font-size:12.5px;font-weight:600;color:#cfe0ff;line-height:1.3}
  .pack-subhead b{color:var(--sun)}
  /* clean, plain-language bundle-savings guide */
  .offer{margin:2px 0 10px;padding:10px 14px 8px;background:#FFF3CC;border:2.5px solid var(--ink);border-radius:0;color:var(--ink)}
  .ms-msg{font-family:var(--body);font-size:12.5px;font-weight:700;text-align:center;line-height:1.3;margin-bottom:10px}
  .ms-bar{position:relative;height:8px;background:#E7D49C;border-radius:0;margin:0 8px}
  .ms-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--cobalt),var(--sun));border-radius:0;transition:width .45s cubic-bezier(.2,.7,.2,1)}
  .ms-pt{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid #C7AE67;z-index:2;transition:.25s}
  .ms-pt.cur.on{background:var(--cobalt);border-color:var(--cobalt);box-shadow:none}
  .ms-pt.goal.on{background:var(--sun);border-color:#e0a800;box-shadow:none}
  .ms-pt.next{animation:mspulse 1.3s ease-in-out infinite}
  @keyframes mspulse{0%,100%{box-shadow:none}50%{box-shadow:none}}
  @media(prefers-reduced-motion:reduce){.ms-pt.next{animation:none}}
  .ms-legend{display:flex;justify-content:space-between;font-family:var(--disp);font-size:9.5px;color:#9a884f;margin-top:9px}
  .ms-legend span{flex:1}
  .ms-legend span:nth-child(2){text-align:center}
  .ms-legend span:last-child{text-align:right}
  .ms-legend span.cur.on{color:var(--cobalt)}
  .ms-legend span.goal.on{color:#a87b00}
  .offer b{color:var(--cobalt)}
  .offer.max{background:#E4F5EC}
  .offer.max b{color:var(--ok)}

  /* bidet hero row (optional, has its own stepper) */
  .herorow{margin:6px 18px 2px;display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;
    background:#FFF6D8;border:3px solid var(--ink);border-radius:0;padding:8px 12px}
  .herorow .thumb{width:64px;height:64px}
  /* badge above name above price, like the reference: BESTSELLER · Portable Bidet · AED 179 */
  .herorow .best{display:inline-block;white-space:nowrap;font-family:var(--disp);font-size:8.5px;color:#fff;background:var(--red);border-radius:0;padding:2px 8px;margin:0 0 4px 0;letter-spacing:.02em}
  .herorow .c-name{font-size:15px;font-weight:800;line-height:1.15}
  .herorow .c-price{font-size:13.5px;margin-top:4px}

  .sheet{display:flex;gap:9px}
  .pack-scroll{max-height:none;overflow:visible}
  .pack-scroll::-webkit-scrollbar{width:9px}
  .pack-scroll::-webkit-scrollbar-thumb{background:#cdbf95;border-radius:0;border:2px solid #FFF6D8}
  .pack-scroll::-webkit-scrollbar-track{background:transparent}
  .pack-scroll{scrollbar-width:thin;scrollbar-color:#cdbf95 transparent}
  .more-toggle{display:block;width:calc(100% - 36px);margin:8px 18px 5px;padding:11px;background:#fff;border:3px solid var(--cobalt);border-radius:0;box-shadow:none;font-family:var(--disp);font-size:13.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--cobalt);cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
  .more-toggle:hover{background:#EAF0FF;transform:translate(2px,2px);box-shadow:none}
  .more-toggle .mt-arrow{display:inline-block;margin-left:4px;font-size:15px}
  /* featured add-ons: stacked single column, compact so the panel stays short */
  /* featured add-ons: 4 vertical cards side by side (image on top, add at bottom) */
  #sheet{gap:9px;align-items:stretch}
  #sheet .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 9px;flex:0 0 calc((100% - 18px)/3)}
  #sheet .thumb{width:100%;height:112px;flex:none;border-radius:0}
  #sheet .thumb img{width:100%;height:100%;object-fit:cover;padding:0;border-radius:0}
  /* show the full product (slightly zoomed out) for these */
  #sheet #card-passport .thumb img,#sheet #card-adapter .thumb img{object-fit:contain;padding:3px}
  #sheet #card-powerbank .thumb{overflow:hidden}
  #sheet #card-powerbank .thumb img{object-fit:contain;padding:0;transform:scale(1.12)}
  #sheet #card-powerbank .zoom{right:4px;bottom:4px}
  #sheet .c-name{font-size:11.5px;line-height:1.25}
  #sheet .c-price{font-size:13px;font-weight:800;margin:2px 0 6px}
  #sheet .c-ctrl{width:100%;margin-top:auto;display:flex;flex-direction:column;align-items:center}
  /* +Add and the quantity stepper share identical width + height so the card never resizes on swap */
  #sheet .addbtn{width:100%;height:36px;padding:0 8px}
  #sheet .miniq{width:100%;height:36px;margin:0}
  #sheet .miniq button{flex:1 1 0;width:auto;height:100%;font-size:16px}
  #sheet .miniq .q{flex:1 1 0;width:auto;min-width:0;line-height:34px;font-size:14px}
  /* ===== add-on carousel: desktop = [‹] 3 cards [›], mobile = swipe ===== */
  .pc-wrap{position:relative;display:flex;align-items:center;gap:8px;padding:0 12px}
  .pc-viewport{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:9px 0 6px}
  .pc-viewport::-webkit-scrollbar{display:none}
  .pc-arrow{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--ink);color:var(--ink);font-family:var(--disp);font-size:18px;line-height:1;cursor:pointer;transition:background .12s}
  .pc-arrow:hover{background:var(--sun)}
  .pc-arrow[disabled]{opacity:.3;cursor:default;background:#fff}
  .pc-cue{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:2px 18px 4px;min-height:16px}
  .pc-dots{display:none}
  .pc-dots i{width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.24;cursor:pointer;transition:.2s}
  .pc-dots i.on{opacity:1;width:16px;border-radius:0;background:var(--cobalt)}
  .pc-swipe{font-size:12px;font-weight:800;color:var(--cobalt);white-space:nowrap;cursor:pointer;text-decoration:underline;text-underline-offset:3px;-webkit-tap-highlight-color:transparent;padding:2px 0}
  .pc-swipe:active{opacity:.6}
  .pc-swipe.gone{opacity:0}
  @media(min-width:1001px){.pc-swipe{display:none}}
  @media(max-width:1000px){.pc-wrap{padding:0} .pc-arrow{display:none} #sheet .card{flex:0 0 31%} #sheet .card:first-child{margin-left:18px} #sheet .card:last-child{margin-right:18px}}
  @media(max-width:560px){#sheet .card{flex:0 0 44%}}
  /* more add-ons popup: wider + taller, products stacked single-column with larger images */
  #moreOverlay .modal{max-width:700px}
  .more-sub{font-size:15.5px;color:var(--ink);font-weight:800;margin:0 0 16px;line-height:1.4}
  #moreOverlay .sheet{grid-template-columns:1fr;gap:11px;padding:2px 0}
  #moreOverlay .card{grid-template-columns:72px 1fr auto;gap:14px;padding:13px 15px}
  #moreOverlay .thumb{width:72px;height:72px}
  #moreOverlay .c-name{font-size:14.5px}
  #moreOverlay .c-price{font-size:14px;margin-top:4px}
  .card{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;min-width:0;
    background:var(--cream);border:3px solid var(--ink);border-radius:0;padding:8px 11px;transition:background .12s}
  .card>*,.herorow>*,.rowline>*{min-width:0}
  .card.on{background:#FFF3CC}
  /* bigger image box, product shown at natural size (no zoom); card width unchanged */
  .thumb{width:52px;height:52px;flex:none;background:#fff;border:2px solid var(--ink);border-radius:0;display:flex;align-items:center;justify-content:center;padding:4px}
  .thumb img{width:100%;height:100%;min-height:0;object-fit:contain;display:block}
  .thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:26px}
  .card .ph{display:flex;align-items:center;justify-content:center;font-size:22px}
  .c-name{font-size:12.5px;font-weight:700;line-height:1.22;overflow-wrap:break-word}
  .c-price{font-size:13px;font-weight:700;margin-top:4px}
  .c-price s{color:#8a8a8a;font-weight:400;font-size:11px;margin-left:5px}
  .tbc{color:var(--red);font-weight:700;font-size:12px}

  /* quantity stepper */
  .miniq{display:flex;align-items:center;border:2.5px solid var(--ink);border-radius:0;overflow:hidden;background:#fff}
  .miniq button{width:27px;height:29px;border:0;background:#fff;font-family:var(--disp);font-size:15px;cursor:pointer;line-height:1}
  .miniq button:hover{background:var(--sun)}
  .miniq .q{width:24px;text-align:center;font-weight:700;font-size:13px;border-inline:2.5px solid var(--ink);line-height:29px;background:var(--paper)}
  .miniq.dis{opacity:.35;pointer-events:none}
  /* tap-to-add: companion cards show "+ Add" until added, then the stepper */
  .card .miniq{display:none}
  .card.on .miniq{display:flex}
  .card.on .addbtn{display:none}
  .addbtn{font-family:var(--disp);font-size:12.5px;background:var(--ink);color:#fff;border:2.5px solid var(--ink);border-radius:0;padding:8px 16px;cursor:pointer;white-space:nowrap}
  .addbtn:hover{background:var(--cobalt);border-color:var(--cobalt)}
  .addbtn:disabled{opacity:.35;cursor:not-allowed}
  .addbtn:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}

  .foot{padding:2px 20px 10px}
  .divider{border-top:2px dashed #D8D2C2;margin:6px 0 8px}
  .rowline{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;padding:3px 0}
  .rowline.sub{color:#333;font-weight:600}
  .rowline.disc{display:none;color:var(--ok);font-weight:800}
  .rowline.disc.show{display:flex;animation:saveIn .42s cubic-bezier(.2,.7,.2,1)}
  @keyframes saveIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.rowline.disc.show{animation:none}}
  .rowline.save{color:var(--ok);font-weight:700;font-size:13px}
  .rowline.total{margin-top:6px}
  .rowline.total .lbl{font-family:var(--disp);font-size:20px}
  .rowline.total .amt{font-family:var(--disp);font-size:22px}
  .cta{display:block;width:100%;margin-top:8px;background:#F04424;color:#FFFFFF;font-family:var(--disp);font-size:17px;letter-spacing:.02em;padding:12px;border:var(--bord);border-radius:0;box-shadow:none;cursor:pointer;transition:transform .1s,box-shadow .1s}
  .cta:hover{transform:translate(2px,2px);box-shadow:none}
  .cta:disabled{background:#bbb;cursor:not-allowed}
  /* sticky add-to-cart (mobile only) */
  .stickybar{display:none}
  @media(max-width:900px){
    .stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;align-items:center;gap:12px;background:var(--skybg);border-top:3px solid var(--ink);padding:9px 16px;box-shadow:none}
    .sb-info{display:flex;flex-direction:column;line-height:1.1}
    .sb-name{font-size:11px;font-weight:700;color:#666}
    .sb-price{font-family:var(--disp);font-size:18px;font-weight:800;color:var(--ink)}
    .sb-btn{margin-left:auto;flex:none;font-family:var(--disp);font-size:13.5px;letter-spacing:.02em;color:#fff;background:var(--red);border:3px solid var(--ink);border-radius:0;box-shadow:none;padding:12px 18px;cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap}
    .sb-btn:active{transform:translate(2px,2px);box-shadow:none}
    .sb-btn:disabled{background:#bbb;border-color:#999;box-shadow:none}
    .site-footer{padding-bottom:78px}
  }
  .cta:focus-visible,.miniq:focus-within{outline:3px solid var(--cobalt);outline-offset:2px}
  .mini{text-align:center;font-size:11.5px;font-weight:600;color:#555;margin-top:8px}
  .trust-cta{margin-top:9px}
  .tc-ship{display:flex;align-items:center;justify-content:center;gap:8px;background:#EAF0FF;border:2px solid var(--cobalt);border-radius:0;padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--ink);text-align:center;line-height:1.3}
  .tc-ship b{color:var(--cobalt)}
  .tc-points{display:flex;justify-content:center;gap:8px 18px;flex-wrap:wrap;margin-top:11px}
  .tc-points span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink)}
  .tc-points svg{width:16px;height:16px;stroke:var(--cobalt);fill:none;stroke-width:2.2;flex:none}
  .tc-cod{text-align:center;font-size:11.5px;font-weight:600;color:#555;margin-top:10px}

  /* ===== full-width sections below the PDP ===== */
  .section{max-width:1400px;margin:0 auto 22px;padding:0 3vw}
  .panel{background:#fff;border:var(--bord);border-radius:0;box-shadow:none;padding:20px 26px}
  .sec-title{font-family:var(--disp);font-size:clamp(22px,2.4vw,30px);text-transform:uppercase;margin-bottom:6px}
  .sec-note{font-size:13.5px;font-weight:600;color:#555;margin-bottom:15px}
  .benefit-line{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.5;margin:12px 0 14px}
  .benefit-strip{display:flex;flex-wrap:wrap;align-items:center;margin:4px 0 12px;background:#EAF0FF;border:2.5px solid var(--ink);border-radius:0;padding:9px 2px}
  .benefit-strip span{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:5px;font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.15;white-space:nowrap;letter-spacing:-.4px;padding:2px 2px}
  .benefit-strip span+span{border-left:1.5px solid rgba(15,20,30,.15)}
  .benefit-strip i{font-style:normal;font-size:25px;line-height:1;flex:none}
  /* mobile: clean 2x2 grid; minmax(0,1fr) stops tracks growing to content width, text wraps */
  @media(max-width:760px){
    .benefit-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 10px;padding:10px 12px}
    .benefit-strip span{min-width:0;white-space:normal;overflow-wrap:anywhere;justify-content:flex-start;padding:4px 2px;font-size:12.5px;gap:6px}
    .benefit-strip span+span{border-left:0}
    .benefit-strip i{font-size:20px}
  }
  /* narrow small-laptop 2-col: same clean 2x2 so it doesn't wrap 3+1 with a stray divider */
  @media(min-width:1001px) and (max-width:1200px){
    .benefit-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px}
    .benefit-strip span{min-width:0;white-space:normal;overflow-wrap:break-word;justify-content:flex-start}
    .benefit-strip span+span{border-left:0}
  }
  /* ===== SMART FEATURES banner ===== */
  .smart{padding:clamp(20px,3.5vw,44px) 3vw;position:relative;z-index:2}
  .smart-inner{max-width:1240px;margin:0 auto;background:linear-gradient(180deg,#E7F1FF 0%,#F5F9FF 100%);border-radius:26px;padding:clamp(22px,3.4vw,46px)}
  .smart-title{font-family:var(--disp);color:var(--cobalt);font-size:clamp(21px,3.1vw,40px);line-height:1.06;letter-spacing:-.5px;text-transform:uppercase}
  .smart-sub{color:#26344e;font-size:clamp(13.5px,1.5vw,19px);font-weight:600;margin-top:10px;max-width:56ch}
  .smart-grid{display:grid;grid-template-columns:repeat(4,1fr) 1.08fr;gap:clamp(14px,1.8vw,26px);margin-top:clamp(20px,2.8vw,38px);align-items:start}
  .feat{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
  .feat-ic{width:clamp(54px,6vw,84px);height:clamp(54px,6vw,84px);border-radius:50%;background:#D8E8FB;color:var(--cobalt);display:flex;align-items:center;justify-content:center;flex:none}
  .feat-ic svg{width:50%;height:50%}
  .feat-t{font-family:var(--disp);color:var(--cobalt);font-size:clamp(13.5px,1.35vw,18px);text-transform:uppercase;line-height:1.15;margin-top:3px}
  .feat-d{color:#3b4a62;font-size:clamp(12.5px,1.05vw,15px);line-height:1.5;font-weight:500}
  .feat-hl{background:#123C8C;border-radius:20px;color:#fff;padding:clamp(18px,2vw,26px);text-align:center;align-items:center;align-self:stretch;justify-content:center}
  .feat-hl .feat-ic{background:rgba(255,255,255,.14);color:#fff}
  .feat-hl .feat-t{color:#fff}
  .feat-hl .feat-d{color:#cddbff}
  .feat-hl .hl-rule{display:block;width:44px;height:3px;background:rgba(255,255,255,.55);border-radius:2px;margin:4px auto 6px}
  @media(max-width:900px){
    .smart-grid{grid-template-columns:1fr 1fr}
    .feat-hl{grid-column:1 / -1}
  }
  .hero-price{font-family:var(--disp);font-size:clamp(23px,2.4vw,28px);font-weight:800;color:var(--ink);margin:0;white-space:nowrap}
  .hero-price s{color:#9a9a9a;font-size:18px;font-weight:600;margin-left:9px}
  /* social proof band */
  .social-head{text-align:center;margin-bottom:15px}
  .social-rate{font-size:14px;font-weight:700;color:var(--ink);margin-top:6px}
  .social-rate .s{color:var(--red);letter-spacing:2px}
  .sf-card{max-width:760px;margin:0 auto 16px;text-align:center;background:#fff;border:var(--bord);border-radius:0;box-shadow:none;padding:20px 28px}
  .sf-stars{color:var(--red);font-size:20px;letter-spacing:3px;margin-bottom:12px}
  .sf-quote{font-family:var(--disp);font-size:clamp(17px,1.9vw,22px);line-height:1.4;color:var(--ink);margin-bottom:12px}
  .sf-by{font-size:13px;font-weight:700;color:#555}
  .social-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin:0 auto}
  .sp-card{background:#fff;border:2.5px solid var(--ink);border-radius:0;box-shadow:none;padding:18px}
  .sp-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
  .sp-who{font-family:var(--disp);font-size:12.5px}
  .sp-vf{font-size:10px;font-weight:800;color:var(--ok);white-space:nowrap}
  .sp-stars{color:var(--red);font-size:13px;letter-spacing:1px;margin-bottom:8px}
  .sp-card p{font-size:13px;color:#333;line-height:1.5}
  @media(max-width:820px){.social-cards{grid-template-columns:1fr}}

  /* SEE IT IN ACTION */
  .videos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .vcard{position:relative;aspect-ratio:9/16;border:3px solid var(--ink);border-radius:0;overflow:hidden;box-shadow:none;background:#0c1622;cursor:pointer}
  .vcard video,.vcard img{width:100%;height:100%;object-fit:cover;display:block}
  .vcard .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
  .vcard .play span{width:58px;height:58px;border-radius:50%;background:rgba(20,20,20,.55);border:3px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px}
  .vcard .cap{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;font-family:var(--disp);font-size:13px;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.9);pointer-events:none}

  /* REVIEWS */
  .rev-top{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;background:var(--paper);border:3px solid var(--ink);border-radius:0;padding:16px 20px;margin-bottom:15px}
  .avg .lbl{font-family:var(--disp);font-size:12px;letter-spacing:.06em}
  .avg .big{font-size:24px;color:var(--red);letter-spacing:2px;margin-top:4px}
  .avg .cnt{font-size:12px;color:#666;font-weight:600;margin-top:2px}
  .bars{display:grid;gap:5px;max-width:340px}
  .bar-row{display:grid;grid-template-columns:56px 1fr 42px;gap:8px;align-items:center;font-size:11.5px;font-weight:700}
  .bar{height:14px;background:#E2DCCB;border:2px solid var(--ink);border-radius:0;overflow:hidden}
  .bar div{height:100%;background:var(--ink)}
  .bar-row .n{text-align:right;color:#555}
  .rev-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
  .writebtn{font-family:var(--disp);font-size:13px;background:var(--ink);color:#fff;border:0;border-radius:0;padding:11px 20px;cursor:pointer;white-space:nowrap}
  .sortsel{font-family:var(--body);font-weight:700;font-size:12px;border:2.5px solid var(--ink);border-radius:0;padding:8px 14px;background:#fff;cursor:pointer}
  .rcard{background:var(--paper);border:3px solid var(--ink);border-radius:0;padding:14px 18px;margin-bottom:10px}
  .rcard .who{display:flex;align-items:center;gap:8px;font-size:13.5px}
  .rcard .who b{font-family:var(--disp);font-size:14px}
  .rcard .vf{display:inline-flex;align-items:center;gap:4px;color:#0a7a2f;font-weight:700;font-size:12px}
  .rcard .rst{color:var(--red);font-size:15px;letter-spacing:1px;margin:8px 0 4px}
  .rcard .rtitle{font-family:var(--disp);font-size:15px;text-transform:uppercase;margin-bottom:4px}
  .rcard .rtext{font-size:14px;color:#2c2c2c}
  .rcard .rbottom{font-size:12.5px;color:#666;margin-top:10px}
  .showmore{display:block;margin:6px auto 0;font-family:var(--disp);font-size:13px;background:var(--ink);color:#fff;border:0;border-radius:0;padding:12px 28px;cursor:pointer}
  .rcard.hidden{display:none}

  /* FAQ */
  details.faq{border:3px solid var(--ink);border-radius:0;margin-bottom:10px;background:var(--paper);overflow:hidden}
  details.faq summary{font-family:var(--disp);font-size:14px;text-transform:uppercase;padding:15px 18px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;list-style:none}
  details.faq summary::-webkit-details-marker{display:none}
  details.faq summary::after{content:"⌄";font-size:18px;transition:transform .2s}
  details.faq[open] summary::after{transform:rotate(180deg)}
  details.faq .ans{padding:0 18px 16px;font-size:14px;color:#333;max-width:70ch;line-height:1.55}
  details.faq[open]{background:#fff}

  /* ===== TRUST BAR ===== */
  .trustbar{background:#fff;border:var(--bord);border-radius:0;box-shadow:none;padding:20px 12px;overflow:hidden}
  /* Desktop: one 5-across row. The track is transparent; each .trust-set is the grid. */
  .trust-track{display:contents}
  .trust-set{display:grid;grid-template-columns:repeat(5,1fr)}
  .trust-set[aria-hidden]{display:none}
  .trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:4px 10px;border-right:1.5px solid #ECE4D2}
  .trust-set .trust-item:last-child{border-right:0}
  .trust-ic{width:54px;height:54px}
  .trust-ic svg{width:100%;height:100%;display:block}
  .trust-lbl{font-size:13.5px;font-weight:700;line-height:1.32;color:var(--ink)}
  /* Mobile: seamless auto-scrolling slider — two identical sets sliding as one loop. */
  @media(max-width:820px){
    .trustbar{padding:24px 0}
    .trust-track{display:flex;flex-wrap:nowrap;width:max-content;animation:trustscroll 26s linear infinite}
    /* flex:0 0 auto stops the sets collapsing on iOS Safari (which was overlapping the items) */
    .trust-set,.trust-set[aria-hidden]{display:flex;flex:0 0 auto}
    .trust-item{flex:0 0 150px;min-width:150px;border-right:1.5px solid #ECE4D2}
    .trust-set .trust-item:last-child{border-right:1.5px solid #ECE4D2}  /* keep divider at the loop seam */
    .trust-item .trust-ic{width:46px;height:46px}
    .trustbar:hover .trust-track,.trust-track:active{animation-play-state:paused}
  }
  @keyframes trustscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.trust-track{animation:none}}

  /* ===== SITE FOOTER ===== */
  .site-footer{background:var(--ink);color:#CFC9B8;border-top:4px solid var(--sun);margin-top:8px}
  .foot-top{max-width:1400px;margin:0 auto;padding:32px 4vw 24px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.5fr;gap:clamp(22px,2.6vw,34px)}
  .foot-top>*{min-width:0}
  .fbrand{display:inline-block;text-decoration:none;line-height:0}
  .fbrand img{width:200px;max-width:64vw;height:auto;display:block}
  .foot-brand p{font-size:13.5px;line-height:1.6;margin:12px 0 16px;max-width:34ch;color:#B9B3A4}
  .socials{display:flex;gap:10px}
  .socials a{width:38px;height:38px;border:2px solid #3a3a3a;border-radius:0;display:flex;align-items:center;justify-content:center;color:#CFC9B8;transition:all .15s}
  .socials a:hover{background:var(--sun);color:var(--ink);border-color:var(--sun)}
  .socials svg{width:18px;height:18px;fill:currentColor}
  .foot-col h4{font-family:var(--disp);font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
  .foot-col a{display:block;font-size:13.5px;color:#B9B3A4;text-decoration:none;padding:5px 0}
  .foot-col a:hover{color:var(--sun)}
  /* footer accordions: styled like the headings on desktop, non-collapsible; become tappable on mobile */
  .foot-acc>summary{list-style:none;font-family:var(--disp);font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;cursor:default;pointer-events:none}
  .foot-acc>summary::-webkit-details-marker{display:none}
  .foot-acc>summary .chev{display:none;width:20px;height:20px;stroke:#B9B3A4;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .foot-news h4{font-family:var(--disp);font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
  .foot-news p{font-size:13px;color:#B9B3A4;margin-bottom:12px;line-height:1.5}
  .news-form{display:flex;gap:8px}
  .news-form input{flex:1;min-width:0;border:2px solid #3a3a3a;border-radius:0;padding:11px 12px;background:#1c1c1c;color:#fff;font-size:13px}
  .news-form input:focus{outline:2px solid var(--sun)}
  .news-form button{background:var(--sun);color:var(--ink);font-family:var(--disp);font-size:12px;border:0;border-radius:0;padding:0 16px;cursor:pointer;white-space:nowrap}
  .trust-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:#B9B3A4}
  .trust-row b{color:#fff}
  .foot-pay{border-top:1px solid #2a2a2a}
  .foot-pay-in{max-width:1400px;margin:0 auto;padding:18px 4vw;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .foot-pay .lbl{font-size:11px;font-weight:700;color:#8a8578;text-transform:uppercase;letter-spacing:.06em}
  .pay-icons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .pay{height:30px;min-width:46px;border-radius:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 9px;font-weight:800;font-size:12px;background:#fff;color:#1a1a1a;letter-spacing:.02em}
  .pay-visa{color:#1a1f71;font-style:italic}
  .pay-amex{background:#1f72cd;color:#fff;font-size:10px}
  .pay-apple{background:#000;color:#fff;font-size:12px}
  .pay-apple svg{width:12px;height:12px;fill:#fff;margin-right:1px}
  .pay-gpay{color:#5f6368}
  .pay-tabby{background:#3fdcbe;color:#04292b;font-style:italic}
  .pay-tamara{background:#f9d548;color:#1a1a1a}
  .pay-cod{background:#1E9E5A;color:#fff;font-size:10px}
  .pay-mc{gap:0;padding:0 7px}
  .pay-mc i{width:14px;height:14px;border-radius:50%;display:block}
  .pay-mc i:first-child{background:#eb001b}
  .pay-mc i:last-child{background:#f79e1b;margin-left:-6px;mix-blend-mode:multiply}
  .foot-copy{margin-left:auto;font-size:12px;color:#8a8578}
  @media(max-width:820px){
    .foot-top{grid-template-columns:1fr 1fr}
    .foot-news{grid-column:1 / -1}
    .foot-pay-in{flex-direction:column;text-align:center}
    .foot-copy{margin-left:0}
  }

  @media(max-width:900px){ .videos{grid-template-columns:1fr 1fr} .rev-top{grid-template-columns:1fr;text-align:center} .bars{max-width:none;width:100%;margin:0} .bar-row{grid-template-columns:64px 1fr 40px} }

  /* Apple Pay button under ADD */
  .applepay{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:8px;background:#000;color:#fff;font-family:var(--body);font-weight:700;font-size:16px;padding:8px 16px;border:var(--bord);border-radius:0;box-shadow:none;cursor:pointer;transition:transform .1s,box-shadow .1s}
  .applepay:hover{transform:translate(2px,2px);box-shadow:none}
  .applepay:disabled{background:#999;cursor:not-allowed}
  .applepay svg{width:34px;height:34px;fill:#fff}
  .applepay:focus-visible,.cta:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}

  /* checkout popup */
  .overlay{position:fixed;inset:0;background:rgba(10,15,25,.55);z-index:100;display:none;align-items:center;justify-content:center;padding:18px}
  .overlay.open{display:flex}
  .modal{background:#fff;border:var(--bord);border-radius:0;box-shadow:none;width:100%;max-width:470px;max-height:94vh;display:flex;flex-direction:column;overflow:hidden}
  .modal-head{background:var(--cobalt);color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;flex:none}
  .modal-head h3{font-family:var(--disp);font-size:17px}
  .modal-close{background:none;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1}
  .modal-body{padding:18px 20px 22px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .osum{background:var(--paper);border:2.5px solid var(--ink);border-radius:0;padding:12px 14px;margin-bottom:16px;font-size:13.5px}
  .osum .l{display:flex;justify-content:space-between;padding:2px 0}
  .osum .tot{font-family:var(--disp);font-size:16px;border-top:2px dashed #d8d2c2;margin-top:6px;padding-top:6px}
  .seclbl{font-family:var(--disp);font-size:12px;text-transform:uppercase;margin:6px 0 8px;letter-spacing:.03em}
  .field{margin-bottom:10px}
  .field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;color:#666;margin-bottom:3px}
  .field input,.field select,.field textarea{width:100%;border:2.5px solid var(--ink);border-radius:0;padding:11px 12px;font-family:var(--body);font-size:14px;background:#fff;resize:vertical}
  .star-pick{display:flex;gap:4px}
  .star-pick button{background:none;border:0;font-size:30px;line-height:1;color:#d8d2c2;cursor:pointer;padding:0}
  .star-pick button.on{color:var(--red)}
  .star-pick button:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
  .rv-err{color:var(--red);font-weight:700;font-size:13px;min-height:18px;margin:2px 0}
  .rbadge-new{font-size:10px;font-weight:800;color:#fff;background:var(--ok);border-radius:0;padding:1px 7px;margin-left:6px;vertical-align:middle}
  .field input:focus,.field select:focus{outline:2px solid var(--cobalt);outline-offset:1px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cardnote{font-size:11px;color:#888;margin:2px 0 12px}
  /* promo code (collapsed to avoid coupon-hunting distraction) */
  .promo{margin:0 0 14px}
  .promo-toggle{background:none;border:0;color:var(--cobalt);font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline;padding:0}
  .promo-row{display:flex;gap:8px;margin-top:9px}
  .promo-row[hidden]{display:none}
  .promo-row input{flex:1;min-width:0;border:2.5px solid var(--ink);border-radius:0;padding:10px 12px;font-size:14px;text-transform:uppercase}
  .promo-row button{background:var(--ink);color:#fff;font-family:var(--disp);font-size:12px;border:0;border-radius:0;padding:0 16px;cursor:pointer}
  .promo-msg{font-size:12.5px;font-weight:700;margin-top:7px}
  .promo-msg.ok{color:var(--ok)} .promo-msg.err{color:var(--red)}
  .paybtn{width:100%;background:#F04424;color:#FFFFFF;font-family:var(--disp);font-size:16px;padding:15px;border:var(--bord);border-radius:0;box-shadow:none;cursor:pointer;margin-top:6px}
  .paybtn:hover{transform:translate(2px,2px);box-shadow:none}
  .modal-mini{text-align:center;font-size:11px;color:#888;margin-top:10px}
  .confirm{text-align:center;padding:20px 8px}
  .confirm .tick{width:64px;height:64px;border-radius:50%;background:#1E9E5A;color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;border:var(--bord)}
  .confirm h4{font-family:var(--disp);font-size:20px;text-transform:uppercase;margin-bottom:8px}
  .confirm p{font-size:14px;color:#444;max-width:32ch;margin:0 auto 6px}

  /* quick view */
  #qvOverlay .modal{max-width:580px;max-height:85vh}
  .thumb{cursor:zoom-in;position:relative}
  /* magnifier badge = visible "tap to view" cue on each companion image */
  .zoom{position:absolute;right:-7px;bottom:-7px;width:24px;height:24px;background:var(--cobalt);border:2.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:zoom-in;box-shadow:none}
  .zoom:hover{background:var(--cobalt-d,#1636B8)}
  .zoom svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;pointer-events:none}
  .qv-main{width:100%;height:400px;object-fit:contain;background:#fff;border:2.5px solid var(--ink);border-radius:0;padding:10px}
  .qv-thumbs{display:flex;gap:8px;margin-top:10px}
  .qv-thumbs button{flex:0 0 66px;height:60px;background:#fff;border:2.5px solid var(--ink);border-radius:0;padding:5px;cursor:pointer}
  .qv-thumbs button.active{border-color:var(--cobalt);box-shadow:none}
  .qv-thumbs img{width:100%;height:100%;object-fit:contain;display:block}
  .qv-name{font-family:var(--disp);font-size:19px;margin:16px 0 6px}
  .qv-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:4px}
  .qv-price .now{font-family:var(--disp);font-size:22px}
  .qv-price s{color:#8a8a8a;font-size:14px}
  .qv-price .save{font-size:11px;font-weight:800;color:var(--ok);background:#E4F5EC;border-radius:0;padding:2px 8px}
  .qv-tbc{color:var(--red);font-weight:800}
  .qv-desc{font-size:14px;color:#333;line-height:1.55;margin:12px 0 4px}
  .qv-desc p{margin-bottom:10px}
  .qv-feat{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:5px}
  .qv-feat li{position:relative;padding-left:20px;font-size:13px;color:#333}
  .qv-feat li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
  .qv-add{width:100%;margin-top:12px;background:#F04424;color:#fff;font-family:var(--disp);font-size:16px;padding:15px;border:var(--bord);border-radius:0;box-shadow:none;cursor:pointer}
  .qv-add:hover{transform:translate(2px,2px);box-shadow:none}
  .qv-add:focus-visible,.qv-thumbs button:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
  .qv-in{font-family:var(--disp);font-size:14px;color:var(--ok);text-align:center;margin-top:12px}

  /* ===== narrow desktop / small-laptop (incl. 1366 & Windows 125% scaling) ===== */
  @media(max-width:1200px){
    .wrap{grid-template-columns:0.9fr 1.1fr;gap:22px}
    .right{margin-top:92px}
  }
  /* ===== tablet & below: stack to a single column ===== */
  @media(max-width:1000px){
    /* single column; interleave leftcol+right leaves so the title block sits ABOVE the image */
    .wrap{grid-template-columns:1fr;gap:clamp(5px,1.6vw,9px);max-width:720px;padding-top:5px}
    .leftcol,.right{display:contents}
    .pdp-logo{order:1;justify-self:start;align-self:start;margin-bottom:0}
    h1{order:2;margin-top:0;margin-bottom:0}
    .buyline{order:3;margin-top:-4px;margin-bottom:0}
    .frame{order:4;margin-top:0}
    .benefit-strip{order:5;margin-top:12px}
    .pack{order:6}
    .stage{min-height:0}
    /* single-column: logo is a small left-aligned brand-stamp */
    .pdp-logo img{width:132px;max-width:38vw}
    /* upsell grid: 2 across on tablet so cards & tap targets stay comfortable */
    #sheet{grid-template-columns:1fr 1fr}
  }
  @media(max-width:560px){
    .sheet{grid-template-columns:1fr}
    .pdp-logo img{width:108px;max-width:32vw}
    .stage{min-height:0}
    /* comfortable mobile tap targets — do NOT shrink these to fit more in */
    .miniq button{width:42px;height:42px;font-size:18px}
    .miniq .q{width:34px;line-height:42px;font-size:15px}
    .addbtn{padding:12px 16px;font-size:13px}
    #sheet .addbtn{padding:0 8px}
    .thumbs button{padding:5px}
    .zoom{width:30px;height:30px}
    .zoom svg{width:15px;height:15px}
  }

  /* ===== targeted mobile bug-fixes ===== */
  .mt-short{display:none}
  .more-toggle{white-space:nowrap}
  .ms-legend .lg-short{display:none}
  .ms-legend span{white-space:nowrap}
  .ms-msg .msg-short{display:none}
  .tc-points .tp-short{display:none}
  .pack-subhead .ps-short{display:none}
  .cta{white-space:nowrap}
  .rcard .who{flex-wrap:wrap}
  .rcard .who-id{display:inline-flex;align-items:baseline;gap:4px;min-width:0}
  .rcard .loc{white-space:nowrap;color:#666;font-weight:600}
  .tc-ship .tc-ic{flex:none;font-size:16px;line-height:1}
  .tc-points span{white-space:nowrap}

  @media(max-width:560px){
    /* hero row: image sets the height; BESTSELLER hugs image top, price hugs image bottom */
    #hero-row{display:flex;align-items:stretch;gap:10px}
    #hero-row .thumb{width:56px;height:60px;flex:none}
    #hero-row .hr-mid{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;flex:1 1 auto;min-width:0}
    #hero-row .best{margin:0}
    #hero-row .c-name{min-width:0;font-size:14px;line-height:1.2}
    #hero-row .c-price{margin-top:0}
    #hero-row .miniq{flex:none;align-self:center}
    #hero-row .miniq button{width:24px;height:24px;font-size:13px}
    #hero-row .miniq .q{width:22px;line-height:24px;font-size:15px}
    /* review line: keep stars, reviews AND "1,900+ UAE travelers" all on ONE line */
    .stars{font-size:14.5px;white-space:nowrap}
    .stars .s{letter-spacing:.5px}
    .stars b{font-size:13.5px;margin-left:4px}
    .stars .revsep{margin:0 2px}
    .stars .revcount{font-size:12.5px}
    .uae-proof{font-size:12.5px}
    .uae-proof .flag{font-size:13px}
    /* pack sub-heading: full sentence, shrunk to stay on one line */
    .pack-subhead{white-space:nowrap;font-size:11px}
    .pack-subhead .ps-full{display:inline}
    .pack-subhead .ps-short{display:none}
    /* review header: "Name · City" on line 1, verified badge drops to line 2 */
    .rcard .who-id{flex-basis:100%}
    /* "More travel essentials" popup cards: img | title(line1) / price + Add(line2) */
    #moreOverlay .card{grid-template-columns:64px 1fr auto;grid-template-areas:"img name name" "img price ctrl";column-gap:12px;row-gap:1px;align-items:start}
    #moreOverlay .card>div:not(.c-ctrl){display:contents}
    #moreOverlay .thumb{grid-area:img;width:64px;height:64px;align-self:start}
    #moreOverlay .c-name{grid-area:name;min-width:0}
    #moreOverlay .c-price{grid-area:price;margin-top:0;align-self:start}
    #moreOverlay .c-ctrl{grid-area:ctrl;justify-self:end;align-self:center}
    #moreOverlay .addbtn{padding:3px 14px;font-size:13px}
    /* full "VIEW 5 MORE TRAVEL ESSENTIALS ↓" shrunk to stay on one line */
    .more-toggle{font-size:11.5px;letter-spacing:-.3px}
    .mt-full{display:inline}
    .mt-short{display:none}
    /* #2(progress) compact milestone labels + short single-line unlock message */
    .ms-legend .lg-full{display:none}
    .ms-legend .lg-short{display:inline}
    /* progress message: full sentence, shrunk to stay on one line */
    .ms-msg{font-size:11px;white-space:nowrap;letter-spacing:-.2px}
    .ms-msg .msg-full{display:inline}
    .ms-msg .msg-short{display:none}
    /* #3 hide subtotal (shown only with a discount) + drop price from the button */
    .cta{white-space:nowrap;font-size:15px}
    .cta-price{display:none}
    /* #4 delivery banner: one centered line, drop the trailing "across the UAE" */
    .tc-ship{white-space:nowrap;font-size:12px}
    .tc-extra{display:none}
    /* trust strip: on mobile keep only "Free shipping over AED 150", centered on one line
       (use > so these only hit the outer items, not the nested tp-full/tp-short spans) */
    .tc-points{flex-wrap:nowrap;gap:0;font-size:12px;justify-content:center}
    .tc-points svg{display:none}
    .tc-points>span{white-space:nowrap;gap:6px}
    .tc-points>span:nth-child(n+2){display:none}
    .tc-points>span:first-child::before{content:"\2713";color:var(--ok);font-weight:800}
    .tc-points .tp-full{display:none}
    .tc-points .tp-short{display:inline}
    /* #6 footer: accordion style — no logo, tappable sections, then newsletter + socials */
    .foot-top{grid-template-columns:1fr;gap:0;text-align:left}
    .foot-brand .fbrand,.foot-brand p{display:none}       /* remove logo + tagline on mobile */
    .foot-brand{order:4;margin-top:20px}
    .foot-top>:nth-child(3){order:1}   /* Help accordion */
    .foot-top>:nth-child(2){order:2}   /* Information accordion */
    .foot-news{order:3;margin-top:24px;grid-column:auto}
    /* collapsible accordions */
    .foot-acc{border-bottom:1px solid #2c2c2c}
    .foot-acc>summary{pointer-events:auto;cursor:pointer;margin:0;padding:16px 2px;font-size:14px}
    .foot-acc>summary .chev{display:block;transition:transform .2s}
    .foot-acc[open]>summary .chev{transform:rotate(180deg)}
    .foot-acc>a{padding:9px 2px}
    .foot-acc[open]{padding-bottom:10px}
  }

/* ===== inner pages (cart / checkout / account) branded wrapper ===== */
.pf-innerbar{background:var(--paper);border-bottom:var(--bord);padding:14px 4vw;position:relative;z-index:2}
.pf-innerlogo img{height:50px;width:auto;display:block}
.pf-inner{position:relative;z-index:2;max-width:1100px;margin:26px auto 70px;padding:22px 26px;background:#fff;border:var(--bord);border-radius:0;box-shadow:none}
.pf-inner .pf-h1{font-family:var(--disp);font-size:clamp(22px,3vw,32px);text-transform:uppercase;margin-bottom:16px}
.pf-inner a{color:var(--cobalt)}
@media(max-width:640px){.pf-inner{margin:16px auto 50px;padding:16px 14px;box-shadow:none}}