/* Store pages: Korean store-name hero type and the SALES POINT band (markup from storage/store-pages/apply_sales.py). */

/* Store hero: identical markup on every store page (apply_sales.py). Text column with a two-level type title,
   photograph edge to edge on the right. Specific selectors because the older orbit/reference hero rules still match. */
body.store-orbit main section.hx-hero{position:relative;display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,6fr)!important;grid-template-rows:none!important;align-items:stretch!important;gap:0!important;height:auto!important;min-height:clamp(640px,84vh,900px)!important;max-height:none!important;margin:0!important;padding:0!important;background:#fff!important;color:#111;overflow:hidden!important;border-bottom:1px solid #c6c6c2}
body.store-orbit main section.hx-hero::before,body.store-orbit main section.hx-hero::after{content:none!important;display:none!important}
.hx-hero-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(56px,6vw,112px) clamp(40px,4.5vw,88px) clamp(40px,4vw,64px) clamp(40px,5.5vw,104px);border-right:1px solid #c6c6c2}
.hx-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 clamp(28px,3vw,44px);font-size:15px;font-weight:600;letter-spacing:.02em;color:#62625e}
.hx-eyebrow::before{content:"";flex:none;width:10px;height:10px;background:#ff5a1f}
.hx-title{margin:0 0 clamp(28px,3vw,40px);font-family:'Noto Sans KR',sans-serif;color:#111}
.hx-brand{display:flex;align-items:center;gap:16px;font-size:clamp(22px,1.9vw,32px);font-weight:600;line-height:1.2;letter-spacing:-.04em}
.hx-brand::after{content:"";flex:0 0 clamp(40px,4vw,72px);height:3px;background:#ff5a1f}
.hx-branch{display:block;margin:clamp(6px,.8vw,14px) 0 0 -.04em;font-size:clamp(64px,6.6vw,136px);font-weight:700;line-height:1.04;letter-spacing:-.075em;white-space:nowrap}
.hx-lead{max-width:30em;margin:0 0 clamp(28px,3vw,40px);font-size:17px;line-height:1.85;color:#4c4c47}
.hx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-bottom:clamp(44px,5vw,72px)}
.hx-visit{display:inline-flex;align-items:center;gap:18px;padding:16px 26px;background:#111;color:#fff!important;font-size:16px;font-weight:600;text-decoration:none;transition:background .25s}
.hx-visit span{transition:transform .3s}
.hx-visit:hover,.hx-visit:focus-visible{background:#ff5a1f}
.hx-visit:hover span{transform:translateX(4px)}
.hx-place{padding-bottom:5px;border-bottom:1px solid #111;color:#111!important;font-size:15px;text-decoration:none}
/* Info rows: label left, value right, ruled like the store's visit table. */
.hx-facts{max-width:560px;margin:0;border-top:1px solid #111}
.hx-facts>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid #c6c6c2}
.hx-facts dt{font:700 13px/1.4 Arial,'Noto Sans KR',sans-serif;letter-spacing:.08em;color:#ff5a1f}
.hx-facts dd{margin:0;font-size:15px;line-height:1.6;color:#111}
.hx-facts a{color:inherit;text-decoration:none}
.hx-hero-media{position:relative;min-height:100%;margin:0;overflow:hidden;background:#111}
.hx-hero-media img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;box-shadow:none!important;animation:hx-zoom 1.6s cubic-bezier(.2,.7,.2,1) both}
.hx-hero-media figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:64px clamp(20px,2.4vw,36px) clamp(18px,2vw,28px);background:linear-gradient(transparent,#000000a8);color:#fff;font-size:15px}
.hx-hero-media figcaption a{padding-bottom:3px;border-bottom:1px solid #ffffff88;color:#fff;text-decoration:none}
.hx-hero-copy>*{animation:hx-rise .8s cubic-bezier(.2,.7,.2,1) both}
.hx-hero-copy>:nth-child(2){animation-delay:.08s}.hx-hero-copy>:nth-child(3){animation-delay:.16s}.hx-hero-copy>:nth-child(4){animation-delay:.24s}.hx-hero-copy>:nth-child(5){animation-delay:.32s}
@keyframes hx-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hx-zoom{from{transform:scale(1.06)}to{transform:none}}
@media(max-width:1100px){body.store-orbit main section.hx-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}}
@media(max-width:900px){
 body.store-orbit main section.hx-hero{grid-template-columns:minmax(0,1fr)!important;min-height:0!important}
 .hx-hero-copy{padding:44px 24px 36px;border-right:0}
 .hx-facts>div{grid-template-columns:80px minmax(0,1fr)}
 .hx-branch{font-size:clamp(52px,15vw,84px)}
 .hx-lead{font-size:16px}
 .hx-actions{margin-bottom:36px}
 .hx-hero-media{aspect-ratio:4/3;min-height:0}
}
@media(prefers-reduced-motion:reduce){.hx-hero-copy>*,.hx-hero-media img{animation:none}}

/* SALES POINT band */
.sx-band{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,2fr);gap:clamp(36px,4vw,64px) clamp(40px,5vw,96px);align-items:start;margin:0;padding:clamp(72px,8vw,136px) var(--sr-pad,48px);background:#111;color:#f5f3ed;font-family:'Noto Sans KR',Arial,sans-serif}
.sx-band>*:not(.sx-head){grid-column:2;min-width:0}
.sx-head{grid-column:1;grid-row:1 / span 5}
.sx-eyebrow{margin:0 0 22px;font:700 13px/1 Arial,sans-serif;letter-spacing:.24em;color:#ff5a1f}
.sx-head h2{margin:0 0 34px;font-size:clamp(32px,3.1vw,48px);font-weight:700;line-height:1.3;letter-spacing:-.055em;color:#fff}
.sx-place{display:inline-block;padding-bottom:6px;border-bottom:1px solid #ffffff66;color:#fff;font-size:15px;transition:color .2s,border-color .2s}
.sx-place:hover{color:#ff5a1f;border-color:#ff5a1f}
.sx-label{margin:0 0 18px;font:700 13px/1.4 Arial,'Noto Sans KR',sans-serif;letter-spacing:.12em;color:#9d9b95}

.sx-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid #ffffff2e}
.sx-points li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:6px 14px;align-items:start;padding:30px 0 32px;border-bottom:1px solid #ffffff2e}
.sx-points li:nth-child(odd){padding-right:36px;border-right:1px solid #ffffff2e}
.sx-points li:nth-child(even){padding-left:36px}
.sx-no{grid-row:1 / span 2;padding-top:7px;font:700 15px/1 Arial,sans-serif;color:#ff5a1f}
.sx-points h3{margin:0;font-size:clamp(19px,1.55vw,23px);font-weight:600;line-height:1.45;letter-spacing:-.04em;color:#fff}
.sx-points p{grid-column:2;margin:4px 0 0;font-size:15px;line-height:1.7;color:#c9c7c1}
.sx-badge{grid-column:3;grid-row:1;padding:5px 12px;border-radius:999px;background:#ff5a1f;color:#111;font-size:14px;font-weight:700;line-height:1.4;white-space:nowrap}

.sx-extras{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.sx-extras li{padding:9px 16px;border:1px solid #ffffff40;border-radius:999px;font-size:15px;line-height:1.5;color:#f5f3ed}

.sx-marquee{display:flex;overflow:hidden}
.sx-marquee ul{display:flex;flex:none;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.sx-marquee li{position:relative;padding:0 .75em 0 0;margin-right:.75em;font-size:clamp(26px,2.5vw,40px);font-weight:600;line-height:1.35;letter-spacing:-.045em;color:#fff;white-space:nowrap}
.sx-marquee li::after{content:"";position:absolute;right:-4px;top:55%;width:7px;height:7px;border-radius:50%;background:#ff5a1f;transform:translateY(-50%)}
.sx-marquee.is-moving{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.sx-marquee.is-moving ul{flex-wrap:nowrap;animation:sx-marquee 42s linear infinite}
.sx-marquee.is-moving:hover ul{animation-play-state:paused}
@keyframes sx-marquee{to{transform:translateX(-100%)}}

.sx-prices dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid #ffffff2e}
.sx-prices dl>div{padding:24px 24px 0 0}
.sx-prices dl>div+div{padding-left:24px;border-left:1px solid #ffffff2e}
.sx-prices dt{min-height:3.2em;font-size:15px;line-height:1.6;color:#c9c7c1}
.sx-prices dd{margin:12px 0 0;font:700 clamp(32px,3vw,46px)/1 Arial,'Noto Sans KR',sans-serif;letter-spacing:-.04em;color:#fff}
.sx-prices dd small{margin-left:4px;font-size:16px;font-weight:700;letter-spacing:0;color:#ff5a1f}
.sx-source{margin:0;font-size:14px;line-height:1.7;color:#8f8d87}

@media(max-width:900px){
 .sx-band{grid-template-columns:minmax(0,1fr);padding:64px 24px}
 .sx-band>*,.sx-head{grid-column:1!important;grid-row:auto}
 .sx-head h2{margin-bottom:24px}
 .sx-points{grid-template-columns:minmax(0,1fr)}
 .sx-points li,.sx-points li:nth-child(odd),.sx-points li:nth-child(even){padding:24px 0;border-right:0}
 .sx-prices dl{grid-template-columns:minmax(0,1fr)}
 .sx-prices dl>div,.sx-prices dl>div+div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-left:0;border-bottom:1px solid #ffffff2e}
 .sx-prices dt{min-height:0}
 .sx-prices dd{margin:0;font-size:28px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.sx-marquee.is-moving ul{animation:none;flex-wrap:wrap}.sx-marquee.is-moving ul+ul{display:none}.sx-marquee.is-moving{-webkit-mask-image:none;mask-image:none}}

.sx-marquee:not(.is-moving) li:last-child::after{display:none}
.store-orbit main section.sx-band{padding-bottom:clamp(72px,8vw,136px)}
@media(max-width:900px){.store-orbit main section.sx-band{padding-bottom:64px}}

/* Store hero typing (store-hero.js). Until the script runs the name is held back; if it never runs, it appears anyway. */
.hx-type-pending .hx-title>span{visibility:hidden;animation:hx-unhide 0s 2.5s forwards}
@keyframes hx-unhide{to{visibility:visible}}
.hx-type-on .hx-title>span{position:relative}
.hx-ghost{visibility:hidden}
.hx-typed{position:absolute;left:0;top:0;white-space:nowrap}
.hx-type-on .hx-brand .hx-typed{top:50%;transform:translateY(-50%)}
.hx-title .is-typing .hx-typed::after{content:"";display:inline-block;width:.07em;height:.86em;margin-left:.06em;background:#ff5a1f;vertical-align:-.06em;animation:hx-caret .9s steps(1) infinite}
.hx-title.is-typed .is-typing .hx-typed::after{display:none}
@keyframes hx-caret{50%{opacity:0}}
.hx-type-on .hx-brand::after{transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.3,.6,.2,1)}
.hx-type-on .hx-brand.is-typed::after{transform:scaleX(1)}
.hx-type-on .hx-hero-copy>.hx-title{animation:none}
/* 부산본점's reference layout leaves main unpadded and offsets each section instead; line the hero up with them. */
@media(min-width:1101px){body.store-orbit.ref-two-active main section.hx-hero{margin-right:96px!important}}
