/* SaveMyFit stage 22 (2026-11-05): centred logo, tape-measure menu on the left, shop preview, square banners on the
   last quote screen, embed mode inside the shop. Loaded on / and /size after the page's own styles. */

/* ---------------------------------------------------------------- header: [tape button | logo | language] */
.topbar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:10px}
.topbar>.smf-tm{grid-column:1;grid-row:1;justify-self:start}
.topbar>.logo{grid-column:2;grid-row:1;justify-self:center}
.topbar>.lang{grid-column:3;grid-row:1;justify-self:end}
#bannerTop{display:none!important}

/* the button is 44 px for the thumb; the drawn tape case is 28 px and its edge sits exactly on the page gutter,
   the same distance from the screen edge as the language pill on the other side */
.smf-tm{position:relative;height:44px;min-width:44px;margin:0;margin-inline-start:-8px;padding:0 8px;border:0;border-radius:12px;
  background:transparent;color:var(--ink,#1F1B17);display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  font:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .2s}
/* the dark case (not the tape tab hanging under it) sits on the header's centre line, level with the logo and the pill;
   right-to-left pages mirror the case so its flat side faces the screen edge there too */
.smf-tm svg{width:28px;height:28px;display:block;flex:none;transform:translateY(2.5px)}
[dir=rtl] .smf-tm svg{transform:translateY(2.5px) scaleX(-1)}
.smf-tm .smf-tm-l{display:none}
.smf-tm:hover,.smf-tm[aria-expanded=true]{background:var(--paper-2,#EFE7DB)}
.smf-tm:focus-visible{outline:2px solid var(--ink,#1F1B17);outline-offset:2px}
.smf-tm .smf-tab{transition:transform .3s cubic-bezier(.22,.8,.2,1),opacity .2s}
.smf-tm[aria-expanded=true] .smf-tab{transform:translateY(-4px);opacity:0}
@media(min-width:900px){.smf-tm{height:46px;padding-inline-start:8px;padding-inline-end:14px}.smf-tm .smf-tm-l{display:inline}}
/* inside the shop (custom order) the menu is not shown; its column stays so the logo stays in the middle */
html.smf-embed .smf-tm{visibility:hidden;pointer-events:none}

/* phones: the two sides of the logo are the same 44 × 38 chip, the tape case on the left and a two-letter language
   code on the right, each 16 px from its screen edge, so the logo has exactly the same space on both sides.
   An invisible strip above and below makes each one 44 px tall for the thumb. */
@media(max-width:599px){
  .smf-tm,.topbar .lang-btn{box-sizing:border-box;width:44px;min-width:44px;height:38px;margin:0;padding:0;gap:0;justify-content:center;
    border:1px solid #D8CCBD;border-radius:999px;background:rgba(255,253,250,.78)}
  .smf-tm:hover,.smf-tm[aria-expanded=true]{background:var(--paper-2,#EFE7DB)}
  .smf-tm svg{width:26px;height:26px;transform:translateY(2.3px)}
  [dir=rtl] .smf-tm svg{transform:translateY(2.3px) scaleX(-1)}
  .topbar .lang-btn{position:relative}
  .smf-tm:before,.topbar .lang-btn:before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
  .topbar .lang-btn #langCur,.topbar .lang-btn svg{display:none}
  .topbar .lang-btn:after{content:var(--smf-lc,"TH");font-size:13px;font-weight:600;line-height:1;letter-spacing:.06em;padding-inline-start:.06em}
}
html[lang=th]{--smf-lc:"TH"}html[lang=en]{--smf-lc:"EN"}html[lang=ms]{--smf-lc:"MS"}
html[lang=ko]{--smf-lc:"KO"}html[lang=ja]{--smf-lc:"JA"}html[lang=ar]{--smf-lc:"AR"}

/* the old bottom links (Dynamic Size System, Size Chart Builder, privacy, terms) now live in the menu */
#dynMark,#szMark,#legalLinks{display:none!important}
@media(max-width:899px){.stage.is-home .panel{padding-bottom:calc(14px + env(safe-area-inset-bottom))}}

/* ---------------------------------------------------------------- the tape menu */
.smf-dim{position:fixed;left:0;right:0;bottom:0;top:var(--smf-top,60px);z-index:60;background:rgba(31,27,23,.34);
  opacity:0;pointer-events:none;transition:opacity .3s}
.smf-dim.on{opacity:1;pointer-events:auto}
.smf-drop{position:fixed;top:var(--smf-top,60px);inset-inline-start:0;inset-inline-end:0;z-index:61;
  max-height:calc(100dvh - var(--smf-top,60px) - 10px);overflow:auto;overscroll-behavior:contain;
  background:#FFFDFA;border-radius:0 0 20px 20px;box-shadow:0 22px 44px -22px rgba(31,27,23,.55);
  padding:0 var(--gutter,16px) 18px;padding-inline-start:calc(var(--gutter,16px) - 2px);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .6s cubic-bezier(.22,.8,.2,1),visibility 0s linear .6s}
.smf-drop.on{clip-path:inset(0 0 -40px 0);visibility:visible;transition:clip-path .6s cubic-bezier(.22,.8,.2,1),visibility 0s}
@media(min-width:900px){.smf-drop{inset-inline-end:auto;width:410px;inset-inline-start:calc(var(--gutter,32px) - 10px);padding-inline-start:12px}}
.smf-tl{list-style:none;margin:0;padding:0}
.smf-row{display:grid;grid-template-columns:28px minmax(0,1fr);min-height:70px}
.smf-row.minor{min-height:52px}
/* the tape: yellow, millimetre ticks on both edges, a long tick and its number where each item starts */
.smf-seg{position:relative;background-color:var(--gold,#E2AE45);
  background-image:repeating-linear-gradient(to bottom,#1F1B17 0 1px,transparent 1px 6px),repeating-linear-gradient(to bottom,#1F1B17 0 1px,transparent 1px 6px);
  background-size:6px 100%,6px 100%;background-position:left top,right top;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(31,27,23,.12)}
.smf-seg:before{content:"";position:absolute;top:0;inset-inline-start:0;width:16px;height:2px;background:#1F1B17}
.smf-cm{position:absolute;top:6px;inset-inline-start:8px;font-size:10px;font-weight:700;line-height:1;color:#1F1B17;
  font-variant-numeric:tabular-nums;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.smf-mi{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;width:100%;min-height:inherit;
  margin:0;padding:10px 6px;padding-inline-start:16px;border:0;border-bottom:1px solid var(--paper-2,#EFE7DB);
  background:transparent;color:var(--ink,#1F1B17);font:inherit;text-align:start;text-decoration:none;cursor:pointer;
  opacity:0;transform:translateX(-8px);transition:opacity .28s ease,transform .28s ease,background .2s}
[dir=rtl] .smf-mi{transform:translateX(8px)}
.smf-drop.on .smf-mi{opacity:1;transform:none}
.smf-row:nth-child(2) .smf-mi{transition-delay:.07s}.smf-row:nth-child(3) .smf-mi{transition-delay:.14s}
.smf-row:nth-child(4) .smf-mi{transition-delay:.21s}.smf-row:nth-child(5) .smf-mi{transition-delay:.28s}
.smf-row:nth-child(6) .smf-mi{transition-delay:.35s}
.smf-mi:hover,.smf-mi:focus-visible{background:var(--paper,#F6F1EA);outline:none}
.smf-lab{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.smf-lab svg{width:18px;height:18px;flex:none}
.smf-sub{font-size:12.5px;line-height:1.35;color:var(--ink-2,#4A433C)}
.smf-row.minor .smf-lab{font-size:14.5px;font-weight:500;color:var(--ink-2,#4A433C)}
.smf-hook{width:34px;height:12px;margin-inline-start:-3px;background:#C9C1B6;border-radius:0 0 6px 6px;
  box-shadow:inset 0 -2px 0 rgba(31,27,23,.18)}
@media(prefers-reduced-motion:reduce){.smf-drop,.smf-drop.on,.smf-mi{transition:none}}

/* ---------------------------------------------------------------- shop preview (same window) */
html.smf-lock,html.smf-lock body{overflow:hidden}
.smf-sdim{position:fixed;inset:0;z-index:70;background:rgba(31,27,23,.45);opacity:0;pointer-events:none;transition:opacity .3s}
.smf-sdim.on{opacity:1;pointer-events:auto}
.smf-shop{position:fixed;left:0;right:0;bottom:0;z-index:71;height:88dvh;display:flex;flex-direction:column;
  background:#FFFDFA;border-radius:22px 22px 0 0;box-shadow:0 -20px 50px -24px rgba(31,27,23,.6);
  padding:10px 16px calc(16px + env(safe-area-inset-bottom));transform:translateY(102%);visibility:hidden;
  transition:transform .45s cubic-bezier(.22,.8,.2,1),visibility 0s linear .45s}
.smf-shop.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.22,.8,.2,1),visibility 0s}
.smf-grab{width:44px;height:5px;border-radius:9px;background:var(--line,#E4D9CA);align-self:center;margin-bottom:10px;flex:none}
.smf-sh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--paper-2,#EFE7DB);flex:none}
.smf-sh-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.smf-sh-name b{font-size:16px;letter-spacing:.14em}
.smf-sh-name small{font-size:12.5px;color:var(--ink-2,#4A433C)}
.smf-x{width:44px;height:44px;flex:none;border:0;border-radius:12px;background:var(--paper,#F6F1EA);color:var(--ink,#1F1B17);
  display:grid;place-items:center;cursor:pointer;padding:0}
.smf-x svg{width:18px;height:18px}
.smf-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 0;align-content:start}
.smf-pc{display:flex;flex-direction:column;gap:6px;color:var(--ink,#1F1B17);text-decoration:none}
.smf-pimg{aspect-ratio:3/4;border-radius:14px;background:var(--paper-2,#EFE7DB);overflow:hidden}
.smf-pimg img{width:100%;height:100%;object-fit:cover;display:block}
.smf-pn{font-size:13.5px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.smf-pp{font-size:13px;color:var(--ink-2,#4A433C)}
.smf-pc.ghost .smf-pimg{animation:smfPulse 1.2s ease-in-out infinite alternate}
@keyframes smfPulse{from{opacity:.55}to{opacity:1}}
.smf-msg{grid-column:1/-1;margin:24px 0;text-align:center;font-size:14px;color:var(--ink-2,#4A433C)}
.smf-sh-foot{flex:none;display:flex;flex-direction:column;gap:10px}
.smf-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:14px;
  background:var(--ink,#1F1B17);color:#FFFDFA;text-decoration:none;font-weight:700;font-size:15.5px}
.smf-cta:hover{background:var(--ink-2,#4A433C);color:#FFFDFA}
.smf-fine{margin:0;text-align:center;font-size:12px;color:var(--ink-2,#4A433C)}
@media(min-width:900px){
  .smf-shop{left:50%;right:auto;top:50%;bottom:auto;width:min(920px,calc(100vw - 64px));height:auto;max-height:min(720px,calc(100dvh - 80px));
    border-radius:22px;padding:22px 24px 24px;transform:translate(-50%,-46%) scale(.98);opacity:0;
    transition:opacity .3s,transform .35s cubic-bezier(.22,.8,.2,1),visibility 0s linear .35s}
  .smf-shop.on{transform:translate(-50%,-50%);opacity:1;transition:opacity .3s,transform .35s cubic-bezier(.22,.8,.2,1),visibility 0s}
  .smf-grab{display:none}
  .smf-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .smf-sh-foot{flex-direction:row-reverse;align-items:center;justify-content:space-between}
}

/* ---------------------------------------------------------------- last quote screen: square banners */
#finalAlbum.smf-sq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;height:auto!important;min-height:0;background:none}
#finalAlbum.smf-sq.one{grid-template-columns:minmax(0,360px);justify-content:center}
@media(min-width:600px){#finalAlbum.smf-sq:not(.one){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){#finalAlbum.smf-sq:not(.one){grid-template-columns:repeat(4,minmax(0,1fr))}}
.smf-sqi{position:relative;display:block;aspect-ratio:1/1;margin:0;padding:0;border:0;border-radius:14px;overflow:hidden;
  background:var(--paper-2,#EFE7DB);color:#fff;text-decoration:none;cursor:pointer;font:inherit}
.smf-sqi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.8,.2,1)}
.smf-sqi:hover img{transform:scale(1.03)}
.smf-sqi:focus-visible{outline:2px solid var(--ink,#1F1B17);outline-offset:2px}
.smf-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 9px;font-size:12.5px;line-height:1.35;text-align:start;
  background:linear-gradient(rgba(20,17,14,0),rgba(20,17,14,.66));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.smf-go{position:absolute;top:8px;inset-inline-end:8px;width:28px;height:28px;border-radius:50%;background:rgba(255,253,250,.94);
  color:#1F1B17;display:grid;place-items:center;box-shadow:0 2px 6px rgba(20,17,14,.18)}
.smf-go svg{width:15px;height:15px}