/* Homepage Beauty study. Keep all image/pin geometry in the original photo ratio. */
#shop.beauty-edit { background:var(--paper); padding-block:80px; }
#shop .beauty-heading { align-items:end; padding-bottom:32px; margin-bottom:32px; border-bottom:1px solid var(--line); }
#shop .beauty-heading h2 { font:400 clamp(48px,5.5vw,80px)/1.1 "Cormorant Garamond",serif; letter-spacing:-2px; margin:16px 0 0; }
#shop .beauty-heading h2 i { color:var(--olive); font-weight:400; }
#shop .beauty-heading-note { max-width:320px; padding-bottom:4px; }
#shop .beauty-heading-note p { font-size:12px; color:var(--muted); line-height:2; margin:12px 0 0; }
#shop .beauty-spread { grid-template-columns:1.12fr 1fr; gap:48px; }
#shop .beauty-zone-label { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:9px; letter-spacing:1.5px; color:var(--muted); padding:0 0 16px; }
#shop .look-photo { border-radius:0; }
#shop .look-photo>img { width:100%; height:auto; }
#shop .look-stamp { border-radius:0; background:var(--paper); color:var(--olive); font-size:8px; left:16px; bottom:16px; }
#shop { --beauty-pin-white:#fff; }
#shop .hotspot { width:48px; height:48px; padding:2px; }
#shop .hotspot>span { width:44px; height:44px; font-size:18px; font-weight:400; background:color-mix(in srgb,var(--olive) 16%,transparent); color:var(--beauty-pin-white); border:2px solid var(--beauty-pin-white); box-shadow:none; }
#shop .hotspot[aria-pressed="true"]>span { background:color-mix(in srgb,var(--olive) 30%,transparent); color:var(--beauty-pin-white); box-shadow:0 0 0 3px color-mix(in srgb,var(--beauty-pin-white) 18%,transparent); }
#shop .look-caption { border-bottom:1px solid var(--line); padding-bottom:20px; margin-top:20px; }
#shop .look-caption .en { font-size:24px; color:var(--olive); }
#shop .look-side { min-width:0; }
#shop .look-side-top { border:0; }
#shop .look-detail { border:0; border-radius:0; background:transparent; }
#shop .look-product-image { isolation:isolate; height:280px; padding:24px 40px; background:color-mix(in srgb,var(--paper) 88%,var(--line)); overflow:hidden; }
#shop .look-product-image img { position:relative; z-index:1; mix-blend-mode:multiply; max-width:85%; transition:transform .6s; }
#shop .beauty-product-word { position:absolute; z-index:0; bottom:8px; left:20px; font-size:56px; font-style:italic; line-height:1; color:color-mix(in srgb,var(--olive) 18%,var(--paper)); }
#shop .look-product-copy { padding:24px 0 0; }
#shop .look-product-copy h3 { font:400 28px/1.5 "Noto Serif Thai",serif; margin:8px 0; }
#shop .look-variant { display:inline-block; border-bottom:1px solid var(--line); padding-bottom:8px; font-size:12px; }
#shop .look-description { margin:12px 0; font-size:12px; line-height:1.8; min-height:44px; }
#shop .look-link-pending { padding:0 0 16px; border:0; color:var(--muted); font-size:11px; }
#shop .beauty-picks-label { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:16px; margin-top:8px; }
#shop .beauty-picks-label>span:last-child { font-size:8px; letter-spacing:1px; color:var(--muted); }
#shop .look-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:12px 0; }
#shop .look-option { display:grid; grid-template-columns:48px 1fr; align-items:center; gap:8px; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 8px; background:transparent; color:var(--muted); text-align:left; }
#shop .look-option img { height:48px; margin:0; }
#shop .look-option[aria-pressed="true"] { background:color-mix(in srgb,var(--paper) 90%,var(--olive)); border-color:var(--olive); color:var(--ink); box-shadow:none; }
#shop .option-num { font-size:7px; left:4px; top:0; }
#shop .look-demo-note { font-size:9px; margin:12px 0 0; color:var(--muted); }
#shop .product-disclaimer { margin-top:32px; font-size:10px; }
#shop :is(.look-option,.hotspot):focus-visible { outline:2px solid var(--olive); outline-offset:4px; }
@media(hover:hover) { #shop .look-product-image:hover img { transform:scale(1.025); } }
@media(max-width:1050px) { #shop .beauty-spread { gap:32px; } #shop .look-product-image { height:240px; } #shop .look-option { grid-template-columns:1fr; text-align:center; } }
@media(max-width:700px) { #shop.beauty-edit { padding-block:48px; } #shop .beauty-heading { display:block; padding-bottom:24px; margin-bottom:24px; } #shop .beauty-heading-note { margin-top:24px; } #shop .beauty-heading h2 { font-size:52px; } #shop .beauty-spread { grid-template-columns:minmax(0,1fr); gap:32px; } #shop .beauty-zone-label { font-size:8px; letter-spacing:1px; } #shop .look-caption { gap:8px; } #shop .look-caption .en { font-size:21px; } #shop .look-caption>span:last-child { font-size:8px; } #shop .look-product-image { isolation:isolate; height:280px; } #shop .look-product-copy h3 { font-size:25px; } #shop .look-side { scroll-margin-top:24px; } }
@media(prefers-reduced-motion:reduce) { #shop .look-product-image img { transition:none; } #shop .look-product-image:hover img { transform:none; } }

/* Three-story design preview; crops and markers share the same fixed frame. */
#shop .beauty-slide-viewport { position:relative; overflow:clip; }
#shop .beauty-slide-outgoing { position:absolute; inset:0 0 auto; width:100%; pointer-events:none; }
#shop .look-photo.beauty-cropped { aspect-ratio:857/919; }
#shop .look-photo.beauty-cropped>img { position:absolute; max-width:none; object-fit:fill; }
#shop .beauty-slider-nav { display:grid; grid-template-columns:220px minmax(0,1fr) auto; gap:24px; align-items:center; border-bottom:1px solid var(--line); padding:24px 0; margin-top:0; }
#shop .beauty-slider-nav[hidden],#shop .beauty-slide-demo[hidden],#shop [data-beauty-pause][hidden] { display:none; }
#shop .beauty-slider-intro>.en { font-size:27px; margin:8px 0; line-height:1.2; }
#shop .beauty-slide-count { font-size:10px; letter-spacing:2px; color:var(--muted); }
#shop .beauty-all-link { position:relative; display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--olive); font-size:11px; line-height:20px; text-decoration:none; transition:color .2s; white-space:nowrap; }
#shop .beauty-all-link::after { content:""; position:absolute; left:0; right:0; top:calc(50% + 12px); border-bottom:1px solid currentColor; pointer-events:none; }
#shop .beauty-all-link:hover { color:var(--ink); }
#shop .beauty-all-link:focus-visible { outline:2px solid var(--olive); outline-offset:4px; }
#shop .beauty-heading-note .beauty-all-link { margin-top:12px; }
#shop .beauty-slider-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
#shop .beauty-slider-meta .beauty-slide-count { white-space:nowrap; }
@media(max-width:700px) { #shop .beauty-slider-meta { gap:0 8px; } }
@media(prefers-reduced-motion:reduce) { #shop .beauty-all-link { transition:none; } }
#shop .beauty-slide-picks { display:flex; gap:12px; min-width:0; }
#shop .beauty-slide-pick { position:relative; display:flex; align-items:center; gap:12px; flex:1; min-width:0; padding:8px; border:0; border-bottom:2px solid transparent; color:var(--muted); background:transparent; text-align:left; cursor:pointer; }
#shop .beauty-slide-pick[aria-pressed="true"] { color:var(--ink); border-color:var(--olive); background:color-mix(in srgb,var(--paper) 90%,var(--olive)); }
#shop .beauty-slide-thumb { display:block; position:relative; overflow:hidden; width:56px; aspect-ratio:857/919; flex-shrink:0; background:var(--line); }
#shop .beauty-slide-thumb img { position:absolute; max-width:none; object-fit:fill; }
#shop .beauty-slide-pick-copy { display:grid; gap:8px; min-width:0; }
#shop .beauty-slide-pick-copy small { font-size:7px; letter-spacing:1px; }
#shop .beauty-slide-pick-copy>.en { font-size:20px; line-height:1.1; }
#shop .beauty-slider-actions { display:flex; gap:8px; align-items:center; }
#shop .beauty-slide-arrow,#shop .beauty-slide-pause { appearance:none; min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:50%; color:var(--olive); background:transparent; cursor:pointer; font:inherit; }
#shop .beauty-slide-pause { border-radius:24px; padding:0 12px; font-size:10px; }
#shop .beauty-slide-arrow:hover,#shop .beauty-slide-pause:hover { background:var(--olive); color:var(--paper); }
#shop .beauty-slider-nav button:focus-visible { outline:2px solid var(--olive); outline-offset:3px; }
#shop .beauty-slide-demo { color:var(--muted); font-size:10px; margin:12px 0 0; }
@media(max-width:1050px) { #shop .beauty-slider-nav { grid-template-columns:1fr auto; } #shop .beauty-slider-intro { grid-column:1; } #shop .beauty-slide-picks { grid-row:2; grid-column:1/-1; } #shop .beauty-slider-actions { grid-row:1; grid-column:2; } }
@media(max-width:700px) { #shop .beauty-slider-nav { gap:20px 8px; } #shop .beauty-slider-intro>.en { font-size:22px; } #shop .beauty-slider-intro .eyebrow { font-size:8px; letter-spacing:1px; } #shop .beauty-slide-picks { gap:8px; } #shop .beauty-slide-pick { display:block; padding:8px 4px; } #shop .beauty-slide-thumb { width:100%; max-width:88px; margin-bottom:12px; } #shop .beauty-slide-pick-copy>.en { font-size:18px; } #shop .beauty-slider-actions { gap:4px; } #shop .beauty-slide-pause { padding:0 8px; } }


#shop [hidden] { display:none !important; }
#shop .beauty-slide-thumb img { width:100%; height:100%; object-fit:cover; }
#shop .beauty-slide-picks { overflow-x:auto; }
#shop .beauty-slide-pick { flex:1 0 140px; }
#shop .beauty-shade-dot { display:inline-block; width:12px; height:12px; border-radius:50%; border:1px solid var(--line); margin-right:6px; vertical-align:middle; }
#shop .look-option > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#shop .beauty-load-state { color:var(--muted); padding-block:32px; }
#shop .look-photo > img { display:block; }
#shop .beauty-slide-pick-copy > .en { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }