/* KOOMKAA marketplace surface — HDmall-class information architecture on the
   60/30/10 palette (sky #B3E5FC / warm #FF7043 / accent #FFF9C4).
   Tokens live in koomkaa-premium.css; this file only adds components.

   Why a second file: koomkaa-premium.css still carries the legacy-theme
   adaptations. Keeping the marketplace shell separate means the legacy layer
   can be deleted page by page without taking the new UI down with it. */

/* ---------- shared primitives ---------- */
/* The legacy theme reset sets `input, button, select, textarea { width:100% }`
   globally. Undo it for this surface only — :where() keeps this at zero
   specificity so every explicit width below still wins. */
.kk-store :where(.kk-hd,.kk-drawer,.kk-tabbar,.kk-pkg,.kk-rail-outer,.kk-promo,.kk-hd-footer) button { width:auto; }
.kk-store .kk-hd { --gutter:clamp(16px,4vw,40px); }
.kk-store .kk-wrap { width:min(1320px,calc(100% - var(--gutter, 24px) * 2)); margin-inline:auto; }
.kk-store .kk-chip { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 9px; font-size:11px; line-height:1.6; font-weight:500; white-space:nowrap; background:var(--kk-primary-50); color:var(--kk-primary-900); border:1px solid #cfeafb; }
.kk-store .kk-chip--warm { background:var(--kk-secondary-50); color:#9c3a12; border-color:#ffd9c9; }
.kk-store .kk-chip--accent { background:var(--kk-accent); color:var(--kk-accent-ink); border-color:var(--kk-accent-line); }
.kk-store .kk-chip--ghost { background:#fff; color:var(--kk-muted); border-color:var(--kk-line); }
.kk-store .kk-save { display:inline-flex; align-items:center; border-radius:6px; padding:2px 7px; font-size:11px; font-weight:700; background:var(--kk-accent); color:var(--kk-accent-ink); border:1px solid var(--kk-accent-line); }
.kk-store .kk-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Section header: title left, "see all" right — same rhythm on every rail. */
.kk-store .kk-shead { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 14px; }
.kk-store .kk-shead-l { display:flex; align-items:center; gap:12px; min-width:0; }
.kk-store .kk-shead h2 { font-size:clamp(18px,2.2vw,23px); font-weight:700; letter-spacing:-.4px; color:var(--kk-ink); margin:0; line-height:1.5; }
.kk-store .kk-shead p { margin:3px 0 0; font-size:12.5px; color:var(--kk-muted); }
.kk-store .kk-shead-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:var(--kk-primary); color:var(--kk-primary-900); font-size:18px; flex-shrink:0; }
.kk-store .kk-seeall { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-size:13px; font-weight:600; color:var(--kk-primary-700); min-height:40px; }
.kk-store .kk-seeall:hover { color:var(--kk-secondary-deep); }

/* ---------- scroll rail ---------- */
/* HDmall uses arrow-only carousels that trap keyboard users and hide how much
   is left. This rail is a real scroll container: snap points, visible
   scrollbar affordance on desktop hover, arrows that disable at the ends. */
.kk-store .kk-rail-outer { position:relative; }
.kk-store .kk-rail { display:grid; grid-auto-flow:column; grid-auto-columns:var(--card,232px); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:2px; padding:2px 2px 10px; scrollbar-width:thin; scrollbar-color:#c7e3f4 transparent; overscroll-behavior-x:contain; }
.kk-store .kk-rail > * { scroll-snap-align:start; }
.kk-store .kk-rail::-webkit-scrollbar { height:6px; }
.kk-store .kk-rail::-webkit-scrollbar-thumb { background:#c7e3f4; border-radius:99px; }
.kk-store .kk-rail::-webkit-scrollbar-track { background:transparent; }
.kk-store .kk-rail-btn { position:absolute; top:calc(50% - 40px); z-index:2; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--kk-line); background:#fff; color:var(--kk-ink); box-shadow:0 6px 18px #0e355016; cursor:pointer; font-size:15px; padding:0; transition:opacity .18s,background .18s; }
.kk-store .kk-rail-btn:hover { background:var(--kk-primary-50); }
.kk-store .kk-rail-btn[disabled] { opacity:0; pointer-events:none; }
.kk-store .kk-rail-btn--prev { left:-14px; }
.kk-store .kk-rail-btn--next { right:-14px; }
@media(max-width:900px){ .kk-store .kk-rail-btn { display:none; } }

/* End-cap: a card, not a link lost under the fold. */
.kk-store .kk-rail-end { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; border:1px dashed #a8cfe6; border-radius:16px; background:var(--kk-primary-50); color:var(--kk-primary-900); font-size:13px; font-weight:600; padding:20px; }
.kk-store .kk-rail-end span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fff; color:var(--kk-secondary-deep); }

/* ---------- header ---------- */
.kk-store .kk-hd-header { position:sticky; top:0; z-index:60; background:#fff; box-shadow:0 1px 0 var(--kk-line); }
.kk-store .kk-hd-promo { background:linear-gradient(90deg,var(--kk-primary) 0%,#cdeeff 55%,var(--kk-accent) 100%); color:#0b3f5e; font-size:12px; }
.kk-store .kk-hd-promo .kk-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:34px; }
.kk-store .kk-hd-promo strong { font-weight:700; }
.kk-store .kk-hd-promo a { color:#0b3f5e; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.kk-store .kk-hd-bar { display:flex; align-items:center; gap:clamp(12px,2vw,28px); min-height:68px; }
.kk-store .kk-hd-logo { display:inline-flex; align-items:center; gap:9px; flex-shrink:0; font-size:24px; font-weight:800; letter-spacing:-1.2px; color:var(--kk-ink); }
.kk-store .kk-hd-logo em { font-style:normal; color:var(--kk-secondary); }
.kk-store .kk-hd-logo-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--kk-primary); color:var(--kk-primary-900); font-size:17px; }

/* Search owns the row — it is the primary task on a package marketplace. */
.kk-store .kk-hd-search { flex:1; min-width:0; position:relative; display:flex; align-items:center; gap:8px; height:46px; padding:0 6px 0 16px; border-radius:999px; background:#fff; border:1.5px solid var(--kk-primary-200); transition:border-color .16s,box-shadow .16s; }
/* Focus state stays inside the pill: the border darkens and doubles via an
   inset shadow, so nothing is drawn outside the control. Some visible change
   has to remain — a keyboard user has no cursor to tell them where they are —
   and #0277BD on white is 4.6:1, well clear of the 3:1 an indicator needs. */
.kk-store .kk-hd-search:focus-within { border-color:var(--kk-primary-700); }
.kk-store .kk-hd-search > i { color:var(--kk-primary-700); font-size:15px; flex-shrink:0; }
.kk-store .kk-hd-search input { flex:1; min-width:0; height:42px; border:0; outline:none; background:transparent; font-size:14px; color:var(--kk-ink); }
.kk-store .kk-hd-search input::placeholder { color:#8aa6b7; }
.kk-store .kk-hd-search button { flex:0 0 auto; width:auto; height:36px; padding:0 18px; border:0; border-radius:999px; background:var(--kk-secondary-deep); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
.kk-store .kk-hd-search button:hover { background:var(--kk-secondary-press); }

/* Suggestions: typed terms are the fastest path to a package. */
.kk-store .kk-hd-sugg { position:absolute; inset:52px 0 auto; background:#fff; border:1px solid var(--kk-line); border-radius:16px; box-shadow:0 18px 40px #0e355021; padding:10px; z-index:5; }
.kk-store .kk-hd-sugg p { margin:6px 10px 8px; font-size:11px; letter-spacing:.6px; font-weight:700; color:var(--kk-muted); }
.kk-store .kk-hd-sugg a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; font-size:13.5px; color:var(--kk-ink); }
.kk-store .kk-hd-sugg a:hover { background:var(--kk-primary-50); color:var(--kk-primary-900); }
.kk-store .kk-hd-sugg i { color:var(--kk-primary-700); font-size:13px; }

.kk-store .kk-hd-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.kk-store .kk-hd-act { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:58px; min-height:48px; padding:4px 8px; border-radius:12px; color:var(--kk-ink); font-size:11px; }
.kk-store .kk-hd-act:hover { background:var(--kk-primary-50); color:var(--kk-primary-900); }
.kk-store .kk-hd-act i { font-size:17px; }
.kk-store .kk-hd-act-count { position:relative; }
.kk-store .kk-hd-act-count b { position:absolute; top:0; right:6px; display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:99px; background:var(--kk-secondary-deep); color:#fff; font-size:10.5px; font-weight:700; }
.kk-store .kk-hd-login { display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 18px; border-radius:999px; background:var(--kk-secondary-deep); color:#fff; font-size:13px; font-weight:600; white-space:nowrap; }
.kk-store .kk-hd-login:hover { background:var(--kk-secondary-press); color:#fff; }

/* Category row + mega menu */
.kk-store .kk-hd-nav { border-top:1px solid #eaf4fa; }
.kk-store .kk-hd-nav .kk-wrap { display:flex; align-items:center; gap:6px; min-height:46px; overflow-x:auto; scrollbar-width:none; }
.kk-store .kk-hd-nav .kk-wrap::-webkit-scrollbar { display:none; }
.kk-store .kk-hd-nav a,.kk-store .kk-hd-nav button { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border:0; border-radius:999px; background:transparent; color:#2c5877; font-size:13px; font-weight:500; white-space:nowrap; cursor:pointer; }
.kk-store .kk-hd-nav a:hover,.kk-store .kk-hd-nav button:hover { background:var(--kk-primary-50); color:var(--kk-primary-900); }
.kk-store .kk-hd-nav .is-primary { background:var(--kk-primary); color:var(--kk-primary-900); font-weight:600; }
.kk-store .kk-hd-nav .is-primary:hover { background:var(--kk-primary-200); }
.kk-store .kk-hd-nav .kk-hd-nav-end { margin-left:auto; color:var(--kk-secondary-deep); font-weight:600; }

.kk-store .kk-mega { position:absolute; left:0; right:0; background:#fff; border-top:1px solid var(--kk-line); box-shadow:0 22px 40px #0e35501f; z-index:59; }
.kk-store .kk-mega-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px 26px; padding:26px 0 30px; }
.kk-store .kk-mega-col > a:first-child { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--kk-ink); padding:6px 0 10px; }
.kk-store .kk-mega-col > a:first-child i { color:var(--kk-primary-700); }
.kk-store .kk-mega-col a + a { display:block; font-size:13px; color:var(--kk-muted); padding:6px 0 6px 29px; border-radius:8px; }
.kk-store .kk-mega-col a + a:hover { color:var(--kk-secondary-deep); }
.kk-store .kk-mega-foot { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 0 20px; border-top:1px solid #eef6fb; font-size:12.5px; color:var(--kk-muted); }

/* ---------- mobile shell ---------- */
.kk-store .kk-hd-burger { display:none; }
.kk-store .kk-tabbar { display:none; }
@media(max-width:900px){
  .kk-store .kk-hd-bar { flex-wrap:wrap; gap:10px; min-height:0; padding-block:10px; }
  .kk-store .kk-hd-search { order:3; flex-basis:100%; height:42px; }
  .kk-store .kk-hd-search button { padding:0 14px; }
  .kk-store .kk-hd-actions { margin-left:auto; }
  /* Bookings and cart live in the bottom tab bar on mobile — repeating them
     here is what forces the top row to wrap onto two lines. */
  .kk-store .kk-hd-act { display:none; }
  .kk-store .kk-hd-login { height:38px; padding:0 14px; font-size:12.5px; }
  .kk-store .kk-hd-logo { font-size:21px; }
  .kk-store .kk-hd-promo .kk-wrap > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kk-store .kk-hd-promo a { display:none; }
  .kk-store .kk-hd-burger { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--kk-line); border-radius:12px; background:#fff; color:var(--kk-ink); font-size:17px; cursor:pointer; }
  .kk-store .kk-hd-nav { display:none; }
  /* Bottom tab bar replaces HDmall's floating chat bubble, which sits on top
     of content and gives no wayfinding. */
  .kk-store .kk-tabbar { position:fixed; inset:auto 0 0; z-index:58; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:#fffffff5; backdrop-filter:blur(14px); border-top:1px solid var(--kk-line); padding-bottom:env(safe-area-inset-bottom); }
  .kk-store .kk-tabbar a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:56px; font-size:10.5px; color:#4c7690; }
  .kk-store .kk-tabbar a i { font-size:17px; }
  .kk-store .kk-tabbar a.is-active { color:var(--kk-secondary-deep); font-weight:600; }
  .kk-store .kk-tabbar a b { position:absolute; transform:translate(14px,-12px); display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:var(--kk-secondary-deep); color:#fff; font-size:10px; }
  .kk-store .kk-hd-footer { padding-bottom:74px; }
}

/* Slide-in category drawer for mobile */
.kk-store .kk-drawer { position:fixed; inset:0; z-index:70; background:#0e355073; }
.kk-store .kk-drawer-panel { position:absolute; inset:0 auto 0 0; width:min(340px,88vw); background:#fff; overflow-y:auto; padding:18px 18px calc(24px + env(safe-area-inset-bottom)); }
.kk-store .kk-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--kk-line); }
.kk-store .kk-drawer-head button { width:38px; height:38px; border:1px solid var(--kk-line); border-radius:10px; background:#fff; font-size:16px; cursor:pointer; color:var(--kk-ink); }
.kk-store .kk-drawer details { border-bottom:1px solid #eef6fb; }
.kk-store .kk-drawer summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 2px; font-size:14px; font-weight:600; color:var(--kk-ink); cursor:pointer; list-style:none; }
.kk-store .kk-drawer summary::-webkit-details-marker { display:none; }
.kk-store .kk-drawer details a { display:block; padding:9px 2px 9px 14px; font-size:13px; color:var(--kk-muted); }
.kk-store .kk-drawer-links { padding-top:14px; }
.kk-store .kk-drawer-links a { display:flex; align-items:center; gap:10px; padding:11px 2px; font-size:13.5px; color:var(--kk-ink); }
.kk-store .kk-drawer-links i { color:var(--kk-primary-700); width:18px; }

/* ---------- home: hero + quick entries ---------- */
.kk-store .kk-hd-top { background:linear-gradient(180deg,#eaf7fe 0%,#f7fcff 62%,#fff 100%); padding-block:clamp(20px,3vw,34px) clamp(24px,3vw,38px); }
.kk-store .kk-hd-title { font-size:clamp(24px,3.6vw,38px); line-height:1.4; font-weight:700; letter-spacing:-1px; color:var(--kk-ink); margin:0 0 4px; }
.kk-store .kk-hd-title em { font-style:normal; color:var(--kk-secondary-deep); }
.kk-store .kk-hd-sub { font-size:14px; color:var(--kk-muted); margin:0 0 20px; }

.kk-store .kk-quicknav { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:16px; }
.kk-store .kk-quick { position:relative; display:flex; align-items:center; gap:12px; min-height:92px; padding:16px 40px 16px 16px; border-radius:18px; background:var(--kk-primary); color:var(--kk-ink); overflow:hidden; transition:transform .18s,box-shadow .18s; }
.kk-store .kk-quick:hover { transform:translateY(-2px); color:var(--kk-ink); }
.kk-store .kk-quick i { display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; border-radius:14px; background:#fff; color:var(--kk-primary-700); font-size:20px; }
.kk-store .kk-quick span { display:block; font-size:11.5px; color:#4a7793; }
.kk-store .kk-quick strong { display:block; font-size:16px; font-weight:700; line-height:1.5; }
.kk-store .kk-quick::after { content:"\203A"; position:absolute; right:16px; top:50%; transform:translateY(-55%); font-size:22px; color:#7fb6d5; }
.kk-store .kk-quick:nth-child(2) { background:var(--kk-primary-100); }
.kk-store .kk-quick:nth-child(3) { background:var(--kk-secondary-50); }
.kk-store .kk-quick:nth-child(3) i { color:var(--kk-secondary-deep); }
.kk-store .kk-quick:nth-child(3) span { color:#a05a3c; }
.kk-store .kk-quick:nth-child(3)::after { color:#e2a184; }
.kk-store .kk-quick:nth-child(4) { background:var(--kk-accent); }
.kk-store .kk-quick:nth-child(4) i { color:var(--kk-accent-ink); }
.kk-store .kk-quick:nth-child(4) span { color:#8d7118; }
.kk-store .kk-quick:nth-child(4)::after { color:#c4ad55; }
.kk-store .kk-quick:nth-child(5) { background:linear-gradient(135deg,var(--kk-primary-700),#01466E); color:#fff; }
.kk-store .kk-quick:nth-child(5) i { background:#ffffff26; color:#fff; }
.kk-store .kk-quick:nth-child(5) span { color:#bfe6fa; }
.kk-store .kk-quick:nth-child(5)::after { color:#8fd8fa; }
@media(max-width:900px){ .kk-store .kk-quicknav { grid-template-columns:repeat(2,1fr); gap:10px; } .kk-store .kk-quick:nth-child(5) { grid-column:1/-1; } .kk-store .kk-quick { min-height:78px; padding:13px 32px 13px 13px; } .kk-store .kk-quick i { width:40px; height:40px; font-size:17px; } .kk-store .kk-quick strong { font-size:14px; } }

/* Hero: promo carousel + assist panel */
/* Assist panel leads on the narrow column, carousel takes the wide one. */
.kk-store .kk-hd-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.62fr); gap:16px; margin-top:4px; }
/* Stacked, the photo carousel is the stronger opener, so it jumps ahead of
   the panel — the only place source order and visual order diverge here. */
@media(max-width:1040px){ .kk-store .kk-hd-split { grid-template-columns:1fr; } .kk-store .kk-hd-split .kk-promo { order:-1; min-height:330px; } }
/* The track is absolutely positioned so the photo fills the frame exactly,
   which means this box can no longer grow to fit slide copy — the floor has
   to be tall enough for the tallest slide instead. */
.kk-store .kk-promo { position:relative; border-radius:20px; overflow:hidden; background:var(--kk-primary-100); min-height:370px; }
/* Absolute rather than height:100% — an overflow-x container reserves room
   for a horizontal scrollbar even with scrollbar-width:none, which left a
   strip of the container background showing under the photo. */
.kk-store .kk-promo-track { position:absolute; inset:0; display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.kk-store .kk-promo-track::-webkit-scrollbar { display:none; }
.kk-store .kk-promo-slide { position:relative; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:center; gap:10px; height:100%; padding:clamp(22px,3vw,38px); color:#fff; }
.kk-store .kk-promo-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kk-store .kk-promo-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,#04283bf5 0%,#062f47d6 46%,#08304952 100%); }
.kk-store .kk-promo-slide > * { position:relative; z-index:1; }
.kk-store .kk-promo-slide > *:not(img):not(.kk-chip) { text-shadow:0 1px 3px #04283bb3; }
.kk-store .kk-promo-slide .kk-chip { align-self:flex-start; background:var(--kk-accent); color:var(--kk-accent-ink); border-color:transparent; font-weight:700; }
.kk-store .kk-promo-slide h3 { font-size:clamp(20px,2.8vw,30px); font-weight:700; line-height:1.45; letter-spacing:-.6px; margin:0; max-width:20ch; color:#fff; }
.kk-store .kk-promo-slide p { font-size:14px; margin:0; color:#e2f2fc; max-width:34ch; }
.kk-store .kk-promo-price { display:flex; align-items:baseline; gap:9px; margin-top:2px; }
.kk-store .kk-promo-price b { font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-1px; color:var(--kk-accent); }
.kk-store .kk-promo-price del { font-size:14px; color:#a9cee4; }
.kk-store .kk-promo-cta { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; height:42px; margin-top:8px; padding:0 20px; border-radius:999px; background:var(--kk-secondary); color:#fff; font-size:13.5px; font-weight:700; }
.kk-store .kk-promo-cta:hover { background:var(--kk-secondary-deep); color:#fff; }
.kk-store .kk-promo-dots { position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:6px; z-index:2; }
.kk-store .kk-promo-dots button { width:22px; height:4px; border:0; border-radius:99px; background:#ffffff5c; cursor:pointer; padding:0; }
.kk-store .kk-promo-dots button.is-active { background:#fff; width:30px; }

.kk-store .kk-assist { display:flex; flex-direction:column; gap:12px; border:1px solid var(--kk-line); border-radius:20px; background:#fff; padding:18px; }
.kk-store .kk-assist-head { display:flex; align-items:center; gap:10px; }
.kk-store .kk-assist-head i { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--kk-primary); color:var(--kk-primary-900); font-size:16px; }
.kk-store .kk-assist-head h2 { font-size:16px; font-weight:700; color:var(--kk-ink); margin:0; }
.kk-store .kk-assist-head p { font-size:11.5px; color:var(--kk-muted); margin:2px 0 0; }
.kk-store .kk-assist-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.kk-store .kk-assist-grid a { display:flex; align-items:center; gap:9px; min-height:52px; padding:9px 11px; border:1px solid #e8f4fb; border-radius:13px; background:var(--kk-primary-50); color:var(--kk-ink); font-size:12.5px; line-height:1.5; font-weight:500; }
.kk-store .kk-assist-grid a:hover { border-color:var(--kk-primary-200); background:#e4f4fe; color:var(--kk-primary-900); }
.kk-store .kk-assist-grid i { color:var(--kk-primary-700); font-size:15px; flex-shrink:0; }
.kk-store .kk-assist-foot { margin-top:auto; border-radius:14px; background:var(--kk-accent); border:1px solid var(--kk-accent-line); padding:12px 14px; }
.kk-store .kk-assist-foot p { margin:0 0 8px; font-size:12.5px; color:var(--kk-accent-ink); font-weight:600; }
.kk-store .kk-assist-foot a { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#8a3a10; }

/* ---------- provider rail ---------- */
.kk-store .kk-provider { display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:16px 12px; border:1px solid var(--kk-line); border-radius:16px; background:#fff; color:var(--kk-ink); transition:border-color .18s,box-shadow .18s; }
.kk-store .kk-provider:hover { border-color:var(--kk-primary-200); color:var(--kk-ink); }
.kk-store .kk-provider-logo { display:grid; place-items:center; width:62px; height:62px; border-radius:50%; background:var(--kk-primary-50); border:1px solid #e3f2fb; font-size:19px; font-weight:800; color:var(--kk-primary-700); overflow:hidden; }
.kk-store .kk-provider-logo img { width:100%; height:100%; object-fit:cover; }
.kk-store .kk-provider b { font-size:12.5px; font-weight:600; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kk-store .kk-provider span { font-size:11px; color:var(--kk-muted); }

/* ---------- package card ---------- */
/* Fixed-height regions (image, chips, title, meta) so a rail of cards never
   ends up ragged the way HDmall's does when titles or chip counts differ. */
.kk-store .kk-pkg { display:flex; flex-direction:column; height:100%; min-width:0; background:#fff; border:1px solid var(--kk-line); border-radius:16px; overflow:hidden; transition:box-shadow .2s,border-color .2s,transform .2s; }
.kk-store .kk-pkg:hover { border-color:var(--kk-primary-200); transform:translateY(-2px); }
.kk-store .kk-pkg-media { position:relative; aspect-ratio:1.32; background:var(--kk-primary-50); overflow:hidden; }
.kk-store .kk-pkg-media > a { display:block; height:100%; }
.kk-store .kk-pkg-media img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.kk-store .kk-pkg:hover .kk-pkg-media img { transform:scale(1.04); }
.kk-store .kk-pkg-flag { position:absolute; left:9px; top:9px; display:inline-flex; align-items:center; gap:5px; border-radius:7px; padding:3px 8px; font-size:11px; font-weight:700; background:var(--kk-secondary-deep); color:#fff; }
.kk-store .kk-pkg-fav { position:absolute; right:8px; top:8px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:0; background:#ffffffe8; color:#5b7a8c; font-size:13px; cursor:pointer; padding:0; }
.kk-store .kk-pkg-fav:hover,.kk-store .kk-pkg-fav[aria-pressed="true"] { background:#fff; color:var(--kk-secondary-deep); }
.kk-store .kk-pkg-body { display:flex; flex-direction:column; flex:1; gap:7px; padding:12px 13px 13px; }
.kk-store .kk-pkg-chips { display:flex; gap:5px; overflow:hidden; height:22px; }
.kk-store .kk-pkg h3 { font-size:13.5px; line-height:1.65; font-weight:600; margin:0; color:var(--kk-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:45px; }
.kk-store .kk-pkg h3 a { color:inherit; }
.kk-store .kk-pkg h3 a:hover { color:var(--kk-primary-700); }
.kk-store .kk-pkg-meta { display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--kk-muted); }
.kk-store .kk-pkg-meta > span { display:flex; align-items:center; gap:6px; min-width:0; }
.kk-store .kk-pkg-meta > span > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kk-store .kk-pkg-meta i { color:#8aafc4; font-size:11px; flex-shrink:0; }
.kk-store .kk-pkg-rate { color:var(--kk-accent-ink); font-weight:600; }
.kk-store .kk-pkg-rate i { color:#f0ad00; }
.kk-store .kk-pkg-price { margin-top:auto; padding-top:9px; border-top:1px solid #eef6fb; }
.kk-store .kk-pkg-price small { display:block; font-size:10.5px; color:var(--kk-muted); margin-bottom:2px; }
.kk-store .kk-pkg-price b { font-size:19px; font-weight:800; letter-spacing:-.5px; color:var(--kk-primary-700); }
.kk-store .kk-pkg-price-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.kk-store .kk-pkg-price del { font-size:11.5px; color:#8aa6b7; }
.kk-store .kk-pkg-actions { display:flex; gap:7px; margin-top:10px; }
.kk-store .kk-pkg-actions .kk-pkg-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; border:0; border-radius:10px; background:var(--kk-secondary-deep); color:#fff; font-size:12.5px; font-weight:600; cursor:pointer; padding:0 10px; }
.kk-store .kk-pkg-actions .kk-pkg-btn:hover { background:var(--kk-secondary-press); color:#fff; }
.kk-store .kk-pkg-actions .kk-pkg-btn.is-added { background:var(--kk-success-bg); color:var(--kk-success); }
.kk-store .kk-pkg-actions .kk-pkg-btn[disabled] { background:#e4edf3; color:#5b7a8c; cursor:not-allowed; }
.kk-store .kk-pkg-actions .kk-pkg-ghost { flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--kk-line); border-radius:10px; background:#fff; color:var(--kk-ink); cursor:pointer; padding:0; }
.kk-store .kk-pkg-actions .kk-pkg-ghost:hover { background:var(--kk-primary-50); border-color:var(--kk-primary-200); }

/* Package grid, used on listing + curated blocks */
.kk-store .kk-pkg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; }
@media(max-width:560px){ .kk-store .kk-pkg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .kk-store .kk-pkg h3 { font-size:12.5px; min-height:42px; } .kk-store .kk-pkg-price b { font-size:17px; } }

/* Lead promo card that opens a deal row (HDmall's first cell) */
.kk-store .kk-lead { position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; min-height:100%; border-radius:16px; overflow:hidden; padding:18px; color:#fff; background:var(--kk-primary-700); }
.kk-store .kk-lead img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kk-store .kk-lead::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#052c43fa 18%,#062f47c2 58%,#08304952 100%); }
.kk-store .kk-lead > * { position:relative; z-index:1; }
.kk-store .kk-lead strong { font-size:16px; font-weight:700; line-height:1.5; color:#fff; }
.kk-store .kk-lead > *:not(img) { text-shadow:0 1px 3px #04283bb3; }
.kk-store .kk-lead span { font-size:12px; color:#cfe9f8; }
.kk-store .kk-lead b { margin-top:2px; font-size:26px; font-weight:800; color:var(--kk-accent); letter-spacing:-.6px; }
.kk-store .kk-lead em { align-self:flex-start; margin-top:6px; font-style:normal; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px; background:var(--kk-secondary); color:#fff; font-size:12.5px; font-weight:700; }

/* ---------- sections ---------- */
.kk-store .kk-band { padding-block:clamp(22px,3vw,34px); }
.kk-store .kk-band--tint { background:var(--kk-surface); }
.kk-store .kk-band--sky { background:linear-gradient(180deg,#f2fbff,#fff); }

/* Editorial CTA banner */
/* Brand gradient: deep sky into #FF7043. Blue sits under the copy and orange
   under the icon chips — white body text on #FF7043 is 2.74:1, so the warm
   end stays where nothing has to be read at small size. */
.kk-store .kk-cta { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:26px; border-radius:22px; padding:clamp(24px,3vw,38px); background:linear-gradient(115deg,#01466E 0%,var(--kk-primary-700) 38%,#E64A19 82%,var(--kk-secondary) 100%); color:#fff; overflow:hidden; }
.kk-store .kk-cta h2 { font-size:clamp(20px,2.6vw,28px); font-weight:700; line-height:1.45; margin:0 0 8px; color:#fff; letter-spacing:-.6px; }
.kk-store .kk-cta p { font-size:13.5px; line-height:1.8; color:#e3f3fc; margin:0 0 16px; max-width:46ch; }
.kk-store .kk-cta-btn { display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 22px; border-radius:999px; background:var(--kk-accent); color:#5c4400; font-size:14px; font-weight:700; }
.kk-store .kk-cta-btn:hover { background:#fff; color:#5c4400; }
.kk-store .kk-cta-points { display:grid; gap:10px; }
.kk-store .kk-cta-points div { display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:14px; background:#ffffff2e; font-size:13px; }
.kk-store .kk-cta-points i { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#ffffff29; flex-shrink:0; }
@media(max-width:900px){ .kk-store .kk-cta { grid-template-columns:1fr; } }

/* Steps */
.kk-store .kk-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.kk-store .kk-steps > div { position:relative; padding:20px 16px; border:1px solid var(--kk-line); border-radius:16px; background:#fff; }
.kk-store .kk-steps b { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--kk-primary); color:var(--kk-primary-900); font-size:13px; margin-bottom:11px; }
.kk-store .kk-steps h3 { font-size:14px; font-weight:700; color:var(--kk-ink); margin:0 0 5px; }
.kk-store .kk-steps p { font-size:12.5px; line-height:1.75; color:var(--kk-muted); margin:0; }
@media(max-width:900px){ .kk-store .kk-steps { grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .kk-store .kk-steps { grid-template-columns:1fr; } }

/* SEO copy */
.kk-store .kk-seo { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px 34px; padding-block:clamp(26px,3vw,40px); border-top:1px solid var(--kk-line); }
.kk-store .kk-seo h2 { font-size:16px; font-weight:700; color:var(--kk-ink); margin:0 0 8px; }
.kk-store .kk-seo p { font-size:13px; line-height:1.95; color:var(--kk-muted); margin:0 0 10px; }
.kk-store .kk-seo p a,.kk-store .kk-seo > div > a { color:var(--kk-primary-700); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.kk-store .kk-seo p a:hover,.kk-store .kk-seo > div > a:hover { color:var(--kk-secondary-deep); }

/* ---------- footer ---------- */
.kk-store .kk-hd-footer { background:#f6fbfe; border-top:1px solid var(--kk-line); }
.kk-store .kk-hd-footer-trust { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-block:26px; border-bottom:1px solid var(--kk-line); text-align:center; }
.kk-store .kk-hd-footer-trust strong { display:block; font-size:13.5px; color:var(--kk-ink); margin-bottom:5px; }
.kk-store .kk-hd-footer-trust p { font-size:11.5px; line-height:1.8; color:var(--kk-muted); margin:0; }
.kk-store .kk-hd-footer-grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:26px; padding-block:32px; }
.kk-store .kk-hd-footer h3 { font-size:13px; font-weight:700; color:var(--kk-ink); margin:0 0 12px; }
.kk-store .kk-hd-footer-grid a:not(.kk-hd-logo) { display:block; font-size:12.5px; color:var(--kk-muted); padding:6px 0; }
.kk-store .kk-hd-footer-grid a:not(.kk-hd-logo):hover { color:var(--kk-secondary-deep); }
.kk-store .kk-hd-footer-about p { font-size:12.5px; line-height:1.9; color:var(--kk-muted); margin:14px 0; max-width:44ch; }
.kk-store .kk-hd-footer-badges { display:flex; flex-wrap:wrap; gap:8px; }
.kk-store .kk-hd-footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-block:16px; border-top:1px solid var(--kk-line); font-size:11.5px; color:var(--kk-muted); }
@media(max-width:900px){ .kk-store .kk-hd-footer-trust { grid-template-columns:repeat(2,1fr); } .kk-store .kk-hd-footer-grid { grid-template-columns:1fr 1fr; } }

/* ---------- PDP additions ---------- */
.kk-store .kk-pdp-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.kk-store .kk-pdp-meta { display:grid; gap:10px; padding:14px 0; margin:14px 0; border-block:1px solid var(--kk-line); }
.kk-store .kk-pdp-meta > div { display:flex; align-items:center; gap:11px; font-size:13px; color:var(--kk-ink); }
.kk-store .kk-pdp-meta i { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:9px; background:var(--kk-primary-50); color:var(--kk-primary-700); font-size:13px; }
.kk-store .kk-pdp-meta a { margin-left:auto; flex-shrink:0; font-size:12.5px; font-weight:600; color:var(--kk-primary-700); }
.kk-store .kk-pdp-highlights { display:grid; gap:9px; margin:14px 0 0; padding:0; list-style:none; }
.kk-store .kk-pdp-highlights li { display:flex; gap:10px; font-size:13px; line-height:1.75; color:var(--kk-ink); }
.kk-store .kk-pdp-highlights li b { display:grid; place-items:center; width:21px; height:21px; flex-shrink:0; margin-top:2px; border-radius:6px; background:var(--kk-accent); color:var(--kk-accent-ink); font-size:11px; }
.kk-store .kk-pdp-saveline { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:6px; }

@media(prefers-reduced-motion:reduce){ .kk-store .kk-hd *,.kk-store .kk-pkg,.kk-store .kk-quick { transition:none!important; } }

@layer premium {
  /* The legacy overrides repaint every anchor with
     `.ekomart-root a:not(.rts-btn)…` — specificity (0,6,1), which outranks any
     reasonable component selector. Components here set their own colour, so
     the only casualty is body copy links; give those back their affordance
     once, in the layer this project already reserves for legacy escalation. */
  .kk-store .kk-seo a {
    color: var(--kk-primary-700) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
  }
  .kk-store .kk-seo a:hover { color: var(--kk-secondary-deep) !important; }
}

@layer premium {
  /* The global focus ring in koomkaa-premium.css draws a 3px offset outline on
     every focusable element. A text input always matches :focus-visible — mouse
     click included — so clicking the search field stamped a hard-cornered
     rectangle inside the rounded pill.

     The pill itself carries the focus indicator (border + ring on
     :focus-within), so the inner outline is both redundant and the wrong shape.
     Same layer as the rule it overrides, so specificity decides. */
  .kk-store .kk-hd-search input:focus,
  .kk-store .kk-hd-search input:focus-visible {
    outline: none !important;
  }
}

@layer premium {
  /* Same legacy rule as above (`.ekomart-root a:not(.rts-btn)…`, specificity
     (0,6,1)) repaints anchor-based buttons with the body ink, so the filled
     pills lost their white label. Restore the label colour here, and drop the
     photo-legibility text-shadow on buttons — a solid pill does not need it. */
  .kk-store .kk-hd-login,
  .kk-store .kk-hd-login:hover,
  .kk-store .kk-hd-login:visited,
  .kk-store .kk-promo-cta,
  .kk-store .kk-promo-cta:hover,
  .kk-store .kk-promo-cta:visited,
  .kk-store .kk-lead em {
    color: #fff !important;
    text-shadow: none !important;
  }
  /* Accent pill keeps its dark label — white on #FFF9C4 is unreadable. */
  .kk-store .kk-cta-btn,
  .kk-store .kk-cta-btn:hover,
  .kk-store .kk-cta-btn:visited {
    color: #5c4400 !important;
    text-shadow: none !important;
  }
  .kk-store .kk-seeall { color: var(--kk-primary-700) !important; }
  .kk-store .kk-seeall:hover { color: var(--kk-secondary-deep) !important; }
}

/* ---------- inline icons ---------- */
/* Links that carry an icon become flex rows so the glyph sits on the text's
   optical centre instead of its baseline. */
.kk-store .kk-hd-promo a,
.kk-store .kk-hd-nav .kk-hd-nav-end,
.kk-store .kk-text-link { display:inline-flex; align-items:center; gap:7px; }
/* Footer columns are lists: `flex`, not `inline-flex`, or every link in a
   column collapses onto one wrapped line. */
.kk-store .kk-hd-footer-grid a:not(.kk-hd-logo) { display:flex; align-items:center; gap:7px; }
.kk-store .kk-hd-promo a svg,
.kk-store .kk-hd-nav a svg,
.kk-store .kk-seeall svg,
.kk-store .kk-hd-footer-grid a svg,
.kk-store .kk-text-link svg,
.kk-store .kk-button svg { flex-shrink:0; font-size:1.05em; }
.kk-store .kk-hd-footer-grid a:not(.kk-hd-logo) svg { color:var(--kk-primary-700); }
/* Re-assert the mobile hide: the display rule above sits later in the file
   than the header media query and would otherwise bring this link back. */
@media(max-width:900px){ .kk-store .kk-hd-promo a { display:none; } }

/* ---------- compare ---------- */
/* The compare toggle is deliberately quieter than a primary CTA: shortlisting
   is a step on the way to reading the package, not the conversion itself. */
.kk-store .kk-pkg-actions .kk-pkg-compare { background:#fff; border:1px solid var(--kk-primary-200); color:var(--kk-primary-900); }
.kk-store .kk-pkg-actions .kk-pkg-compare:hover { background:var(--kk-primary-50); border-color:var(--kk-primary-600); color:var(--kk-primary-900); }
.kk-store .kk-pkg-actions .kk-pkg-compare.is-on { background:var(--kk-primary); border-color:var(--kk-primary-600); color:var(--kk-primary-900); }
.kk-store .kk-pkg-actions .kk-pkg-compare[disabled] { background:#f2f6f9; border-color:var(--kk-line); color:#8aa6b7; }

.kk-store .kk-cmp-tray { position:fixed; inset:auto 0 0; z-index:57; background:#fffffff2; backdrop-filter:blur(14px); border-top:1px solid var(--kk-line); box-shadow:0 -6px 24px #0e355014; padding-block:10px; }
.kk-store .kk-cmp-tray .kk-wrap { display:flex; align-items:center; gap:14px; }
.kk-store .kk-cmp-tray-items { display:flex; gap:8px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; padding-block:2px; }
.kk-store .kk-cmp-tray-items::-webkit-scrollbar { display:none; }
.kk-store .kk-cmp-pill { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; max-width:230px; padding:5px 8px 5px 5px; border:1px solid var(--kk-line); border-radius:999px; background:#fff; }
.kk-store .kk-cmp-pill img { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.kk-store .kk-cmp-pill b { font-size:12px; font-weight:500; color:var(--kk-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kk-store .kk-cmp-pill button { width:22px; height:22px; flex-shrink:0; border:0; border-radius:50%; background:var(--kk-primary-50); color:#4c7690; font-size:11px; cursor:pointer; padding:0; }
.kk-store .kk-cmp-pill button:hover { background:var(--kk-secondary-50); color:#9c3a12; }
.kk-store .kk-cmp-tray-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.kk-store .kk-cmp-clear { border:0; background:transparent; color:var(--kk-muted); font-size:12.5px; cursor:pointer; min-height:40px; padding:0 4px; text-decoration:underline; text-underline-offset:3px; }
.kk-store .kk-cmp-go { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 20px; border:0; border-radius:999px; background:var(--kk-secondary); color:#fff; font-size:13.5px; font-weight:700; cursor:pointer; }
.kk-store .kk-cmp-go:hover { background:var(--kk-secondary-press); }
.kk-store .kk-cmp-go[disabled] { background:#e4edf3; color:#5b7a8c; cursor:not-allowed; }

.kk-store .kk-cmp-sheet { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:clamp(12px,3vw,40px); background:#0e355073; }
.kk-store .kk-cmp-panel { display:flex; flex-direction:column; width:min(1100px,100%); max-height:100%; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 30px 60px #0e355040; }
.kk-store .kk-cmp-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid var(--kk-line); }
.kk-store .kk-cmp-head h2 { margin:0; font-size:18px; font-weight:700; color:var(--kk-ink); }
.kk-store .kk-cmp-head button { width:38px; height:38px; border:1px solid var(--kk-line); border-radius:10px; background:#fff; color:var(--kk-ink); font-size:15px; cursor:pointer; }
.kk-store .kk-cmp-scroll { overflow:auto; }
.kk-store .kk-cmp-table { width:100%; border-collapse:collapse; }
.kk-store .kk-cmp-table th,.kk-store .kk-cmp-table td { padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid #eef6fb; font-size:13px; color:var(--kk-ink); }
.kk-store .kk-cmp-table thead th { position:sticky; top:0; background:#fff; border-bottom:1px solid var(--kk-line); min-width:180px; }
.kk-store .kk-cmp-table thead th img { display:block; width:100%; height:96px; object-fit:cover; border-radius:10px; margin-bottom:8px; }
.kk-store .kk-cmp-table thead th a { font-size:13px; font-weight:600; color:var(--kk-ink); line-height:1.6; }
.kk-store .kk-cmp-table thead th a:hover { color:var(--kk-primary-700); }
.kk-store .kk-cmp-table tbody th { width:150px; font-size:12px; font-weight:600; color:var(--kk-muted); background:var(--kk-primary-50); }
.kk-store .kk-cmp-price { font-size:17px; font-weight:800; color:var(--kk-primary-700); }
.kk-store .kk-cmp-table del { color:#8aa6b7; }
.kk-store .kk-cmp-view { display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:999px; background:var(--kk-secondary); color:#fff; font-size:12.5px; font-weight:600; }
.kk-store .kk-cmp-view:hover { background:var(--kk-secondary-press); color:#fff; }

@media(max-width:900px){
  /* Sit above the bottom tab bar rather than under it. */
  /* 57px = the tab bar's 56px min-height plus its 1px top border. */
  .kk-store .kk-cmp-tray { bottom:calc(57px + env(safe-area-inset-bottom)); }
  .kk-store .kk-cmp-tray .kk-wrap { gap:10px; }
  .kk-store .kk-cmp-pill b { max-width:90px; }
  .kk-store .kk-cmp-clear { display:none; }
  .kk-store .kk-cmp-go { height:38px; padding:0 14px; font-size:12.5px; }
  .kk-store .kk-cmp-panel { border-radius:16px; }
  .kk-store .kk-cmp-table tbody th { width:110px; }
}

@layer premium {
  /* Anchor-based buttons again — the legacy `a` rule would repaint these. */
  .kk-store .kk-cmp-view,
  .kk-store .kk-cmp-view:hover,
  .kk-store .kk-cmp-view:visited { color:#fff !important; text-decoration:none !important; }
  .kk-store .kk-cmp-table thead th a { color:var(--kk-ink) !important; }
}

/* Compact service banners with a coordinated medical illustration strip. */
.kk-store .kk-quicknav { gap:12px; margin-top:20px; }
.kk-store .kk-quick:nth-child(n) { isolation:isolate; min-height:116px; height:116px; display:flex; align-items:center; gap:6px; padding:10px 26px 0 6px; border-radius:16px; background:linear-gradient(125deg,#ddf6f1,#f5fcfb); color:#143c4c; }
.kk-store .kk-quick:nth-child(2) { background:linear-gradient(125deg,#ddedff,#f5faff); }
.kk-store .kk-quick:nth-child(3) { background:linear-gradient(125deg,#eee5fc,#faf7ff); }
.kk-store .kk-quick:nth-child(4) { background:linear-gradient(125deg,#fff0dc,#fffbf4); }
.kk-store .kk-quick:nth-child(5) { background:linear-gradient(125deg,#d6edf1,#f0f9fc); }
.kk-store .kk-quick::after { display:none; }
/* One file per category rather than one sprite: the source artwork is not
   evenly spaced, so fixed-percentage sprite offsets clipped every tile. */
/* The illustration is the tile's anchor, not a bullet: it fills the card's
   height and sits on the bottom edge so the artwork reads at a glance and
   the row scans as a set. */
.kk-store .kk-quick > .kk-cat-art { align-self:stretch; flex:0 0 100px; width:100px; height:100%; object-fit:contain; object-position:center bottom; }
.kk-store .kk-quick:nth-child(n) .kk-quick-copy { color:#143c4c; }
.kk-store .kk-quick-copy small { display:block; font-size:11.5px; color:#50717e; margin-bottom:3px; }
.kk-store .kk-quick-copy { padding-bottom:10px; }
.kk-store .kk-quick-copy strong { font-size:17px; line-height:1.45; font-weight:700; letter-spacing:-.3px; }
.kk-store .kk-quick:nth-child(n) .kk-quick-arrow { position:absolute; right:9px; top:50%; transform:translateY(-50%); display:flex; color:#477b8b; font-size:15px; }
.kk-store .kk-quick:focus-visible,.kk-store .kk-provider-card:focus-visible { outline:3px solid #007fa7; outline-offset:4px; }

/* Fixed compact widths leave room for additional providers. */
.kk-store .kk-providers-band { background:linear-gradient(180deg,#f0f8fc,#fbfdfe); padding-block:28px; }
.kk-store .kk-providers-band .kk-rail { grid-auto-columns:200px; gap:12px; }
.kk-store .kk-provider-card { display:flex; flex-direction:column; background:#fff; border:1px solid #deebf0; border-radius:16px; overflow:hidden; color:var(--kk-ink); transition:transform .2s,box-shadow .2s; }
.kk-store .kk-provider-card:hover { color:var(--kk-ink); transform:translateY(-3px); border-color:var(--kk-primary-200); }
.kk-store .kk-provider-cover { position:relative; height:88px; display:grid; place-items:center; background:linear-gradient(130deg,#cceaf0,#e9f5f7); overflow:hidden; }
.kk-store .kk-provider-cover > img { width:100%; height:100%; object-fit:cover; }
.kk-store .kk-provider-placeholder { font-size:40px; color:#6ca4b7; }
.kk-store .kk-provider-tag { display:none; }
.kk-store .kk-provider-details { position:relative; display:flex; flex-direction:column; flex:1; padding:22px 12px 12px; }
.kk-store .kk-provider-brand { position:absolute; right:12px; top:-24px; width:44px; height:44px; display:grid; place-items:center; background:white; border:3px solid #fff; border-radius:12px; box-shadow:0 4px 10px #123e5015; overflow:hidden; color:#167a96; font-size:24px; }
.kk-store .kk-provider-brand img { width:100%; height:100%; object-fit:contain; padding:2px; }
.kk-store .kk-provider-eyebrow { display:none; }
.kk-store .kk-provider-details h3 { font-size:14px; line-height:1.55; font-weight:600; margin:0 0 10px; min-height:44px; color:var(--kk-ink); }
.kk-store .kk-provider-cta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:9px; border-top:1px solid #eaf1f4; color:#006981; font-size:12px; font-weight:600; }
.kk-store .kk-provider-cta > span { display:flex; font-size:16px; }

/* Equal halves for comparison and quick view, without a cart action. */
.kk-store .kk-pkg-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.kk-store .kk-pkg-actions .kk-pkg-compare,.kk-store .kk-pkg-actions .kk-pkg-ghost { width:100%; min-width:0; min-height:40px; height:40px; padding:0 6px; font-size:12px; }
.kk-store .kk-pkg-compare svg { font-size:18px; flex-shrink:0; }
.kk-store .kk-pkg-actions .kk-pkg-ghost { font-size:18px; }
.kk-store .kk-pkg button:focus-visible { outline:3px solid #007fa7; outline-offset:3px; }
@media(max-width:1100px) and (min-width:901px) { .kk-store .kk-quick > .kk-cat-art { flex-basis:74px; width:74px; } .kk-store .kk-quick-copy strong { font-size:13px; } .kk-store .kk-quick-copy small { font-size:10px; } }
@media(max-width:900px) { .kk-store .kk-quicknav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .kk-store .kk-quick:nth-child(n) { min-height:100px; height:100px; padding:10px 22px 10px 8px; gap:6px; } .kk-store .kk-quick > .kk-cat-art { flex-basis:78px; width:78px; } .kk-store .kk-quick-copy strong { font-size:14px; } .kk-store .kk-quick-copy small { font-size:10px; } .kk-store .kk-providers-band .kk-rail { grid-auto-columns:180px; } }
@media(prefers-reduced-motion:reduce) { .kk-store .kk-provider-card { transition:none; } }

/* ---------- category artwork ---------- */
/* Illustrated icons replace the line glyphs where a category is named. They
   size to the slot they sit in, so the same component works in a 46px tile, a
   40px section badge and a 22px list row. */
.kk-store .kk-cat-art { width:100%; height:100%; object-fit:contain; display:block; }
.kk-store .kk-shead-icon > .kk-cat-art { width:30px; height:30px; }
.kk-store .kk-assist-grid a > .kk-cat-art { width:22px; height:22px; flex-shrink:0; }

/* Icon-only compare (listing grid): same footprint as the quick-view button so
   the pair reads as one control group. */
.kk-store .kk-pkg-actions .kk-pkg-compare--icon { gap:0; padding:0; }
.kk-store .kk-pkg-actions .kk-pkg-compare--icon svg { font-size:19px; }

/* ---------- cart drawer ---------- */
.kk-store .kk-drawer-scrim { position:fixed; inset:0; z-index:90; background:#0e355070; animation:kk-fade .18s ease-out; }
.kk-store .kk-cart-drawer { position:absolute; inset:0 0 0 auto; display:flex; flex-direction:column; width:min(430px,100%); background:#fff; box-shadow:-18px 0 50px #0e355033; animation:kk-slide-in .24s cubic-bezier(.22,.8,.3,1); }
@keyframes kk-fade { from { opacity:0 } to { opacity:1 } }
@keyframes kk-slide-in { from { transform:translateX(100%) } to { transform:none } }
@media(prefers-reduced-motion:reduce){ .kk-store .kk-drawer-scrim,.kk-store .kk-cart-drawer { animation:none; } }

.kk-store .kk-cart-drawer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--kk-line); }
.kk-store .kk-cart-drawer-head h2 { margin:0; font-size:18px; font-weight:700; color:var(--kk-ink); }
.kk-store .kk-cart-drawer-head p { margin:3px 0 0; font-size:12.5px; color:var(--kk-muted); }
.kk-store .kk-cart-drawer-head button { flex-shrink:0; width:38px; height:38px; border:1px solid var(--kk-line); border-radius:10px; background:#fff; color:var(--kk-ink); font-size:15px; cursor:pointer; }
.kk-store .kk-cart-drawer-head button:hover { background:var(--kk-primary-50); }

.kk-store .kk-cart-drawer-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:4px 0 12px; }
.kk-store .kk-cart-drawer-group { padding:14px 20px 4px; }
.kk-store .kk-cart-drawer-group h3 { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:12.5px; font-weight:600; color:var(--kk-primary-900); }
.kk-store .kk-cart-drawer-group h3 i { color:var(--kk-primary-700); }
.kk-store .kk-cart-drawer-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #eef6fb; }
.kk-store .kk-cart-drawer-item:last-child { border-bottom:0; }
.kk-store .kk-cart-drawer-item > img { width:64px; height:72px; flex-shrink:0; border-radius:10px; object-fit:cover; background:var(--kk-primary-50); }
.kk-store .kk-cart-drawer-info { flex:1; min-width:0; }
.kk-store .kk-cart-drawer-info > a { display:block; font-size:13.5px; font-weight:600; line-height:1.6; color:var(--kk-ink); }
.kk-store .kk-cart-drawer-info > a:hover { color:var(--kk-primary-700); }
.kk-store .kk-cart-drawer-info > span { display:block; font-size:11.5px; color:var(--kk-muted); margin-top:2px; }
.kk-store .kk-cart-drawer-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:9px; }
.kk-store .kk-cart-drawer-row strong { font-size:15px; font-weight:700; color:var(--kk-primary-700); }
.kk-store .kk-cart-drawer-remove { margin-top:6px; padding:4px 0; border:0; background:transparent; color:#9c3a12; font-size:11.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.kk-store .kk-cart-drawer-remove[disabled] { color:#8aa6b7; cursor:wait; }

.kk-store .kk-cart-drawer-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:56px 28px; }
.kk-store .kk-cart-drawer-empty > span { display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:var(--kk-secondary-50); color:var(--kk-secondary-deep); font-size:22px; margin-bottom:4px; }
.kk-store .kk-cart-drawer-empty h3 { margin:0; font-size:17px; font-weight:700; color:var(--kk-ink); }
.kk-store .kk-cart-drawer-empty p { margin:0 0 8px; font-size:13px; line-height:1.8; color:var(--kk-muted); }

.kk-store .kk-cart-drawer-foot { border-top:1px solid var(--kk-line); background:#f8fcff; padding:16px 20px calc(16px + env(safe-area-inset-bottom)); }
.kk-store .kk-cart-drawer-foot dl { margin:0 0 10px; }
.kk-store .kk-cart-drawer-foot dl > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; font-size:13px; color:var(--kk-muted); }
.kk-store .kk-cart-drawer-foot dd { margin:0; color:var(--kk-ink); font-weight:500; }
.kk-store .kk-cart-drawer-total { border-top:1px solid var(--kk-line); margin-top:6px; padding-top:11px !important; }
.kk-store .kk-cart-drawer-total dt { font-weight:600; color:var(--kk-ink); }
.kk-store .kk-cart-drawer-total dd { font-size:22px; font-weight:800; letter-spacing:-.5px; color:var(--kk-primary-700); }
.kk-store .kk-cart-drawer-foot > p { margin:0 0 12px; font-size:11.5px; line-height:1.7; color:var(--kk-muted); }
.kk-store .kk-cart-drawer-cta { display:flex; align-items:center; justify-content:center; gap:9px; height:48px; border-radius:12px; background:var(--kk-secondary); color:#fff; font-size:14px; font-weight:700; }
.kk-store .kk-cart-drawer-cta:hover { background:var(--kk-secondary-press); color:#fff; }
.kk-store .kk-cart-drawer-cta[aria-disabled="true"] { background:#e4edf3; color:#5b7a8c; cursor:wait; }
.kk-store .kk-cart-drawer-link { display:block; margin-top:10px; text-align:center; font-size:12.5px; color:var(--kk-primary-700); }

@media(max-width:520px){
  .kk-store .kk-cart-drawer { width:100%; }
  .kk-store .kk-cart-drawer-item > img { width:56px; height:64px; }
}

@layer premium {
  /* Anchor-based buttons inside the drawer — the legacy `a` rule repaints them. */
  .kk-store .kk-cart-drawer-cta,
  .kk-store .kk-cart-drawer-cta:hover,
  .kk-store .kk-cart-drawer-cta:visited { color:#fff !important; }
  .kk-store .kk-cart-drawer-cta[aria-disabled="true"] { color:#5b7a8c !important; }
  .kk-store .kk-cart-drawer-info > a { color:var(--kk-ink) !important; }
  .kk-store .kk-cart-drawer-link { color:var(--kk-primary-700) !important; }
}

/* Provider directory: quiet teal accents, clear search, compact catalog. */
.kk-store .kk-directory { background:#f7fafc; padding-bottom:60px; }
.kk-store .kk-directory-kicker { display:block; color:var(--kk-primary-700); font-size:11px; font-weight:700; letter-spacing:1.8px; margin-bottom:12px; }
.kk-store .kk-directory-head { display:grid; grid-template-columns:1fr auto; align-items:center; gap:26px; padding-block:36px; }
.kk-store .kk-directory h1 { color:#173c4d; font-size:clamp(26px,3vw,38px); font-weight:650; line-height:1.45; margin:0 0 12px; }
.kk-store .kk-directory-head p { color:#5b7481; font-size:15px; margin:0; line-height:1.8; }
.kk-store .kk-directory-seal { display:flex; align-items:center; gap:18px; padding:22px 28px; border:1px solid #d5e8eb; border-radius:20px; background:#edf7f7; }
.kk-store .kk-directory-seal > svg { font-size:38px; color:#0b8492; }
.kk-store .kk-directory-seal span { font-size:12px; color:#50717e; }
.kk-store .kk-directory-seal b { display:block; color:#164557; font-size:30px; line-height:1.2; }
.kk-store .kk-directory-search { grid-column:1/-1; display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #ccdee5; border-radius:14px; padding:0 20px; box-shadow:0 6px 20px #153f5010; margin:0; }
.kk-store .kk-directory-search i { color:#087b87; font-size:20px; }
.kk-store .kk-directory-search input { width:100%; border:0; height:60px; background:transparent; margin:0; padding:0; box-shadow:none; font-size:16px; }
.kk-store .kk-directory-search:focus-within { outline:2px solid #087b87; outline-offset:2px; }
.kk-store .kk-directory-search button { background:#edf5f7; border:0; border-radius:50%; width:28px; height:28px; padding:0; }
.kk-store .kk-directory-body { display:grid; grid-template-columns:220px minmax(0,1fr); gap:30px; }
.kk-store .kk-directory-filter { align-self:start; padding:22px 18px; border:1px solid #dfebef; border-radius:16px; background:#fff; }
.kk-store .kk-directory-filter h2 { font-size:16px; font-weight:700; margin:0 0 20px; color:#214b5c; }
.kk-store .kk-directory-filter > p { font-size:12px; color:#69818d; }
.kk-store .kk-directory-filter > button { display:flex; align-items:center; justify-content:space-between; width:100%; margin:7px 0; padding:12px; border:1px solid transparent; border-radius:10px; color:#4e6976; background:transparent; font-size:14px; }
.kk-store .kk-directory-filter > button.is-active { color:#006a79; border-color:#bbdfe4; background:#eaf7f8; font-weight:600; }
.kk-store .kk-directory-filter b { font-size:12px; }
.kk-store .kk-directory-help { margin-top:28px; padding-top:22px; border-top:1px solid #e7eef2; }
.kk-store .kk-directory-help > svg { font-size:28px; color:#16818d; margin-bottom:10px; }
.kk-store .kk-directory-help h3 { font-size:14px; line-height:1.6; }
.kk-store .kk-directory-help p { font-size:12px; line-height:1.9; color:#69818d; }
.kk-store .kk-directory-help a { display:flex; gap:8px; align-items:center; color:#087b87; font-size:12px; font-weight:600; }
.kk-store .kk-directory-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 22px; }
.kk-store .kk-directory-toolbar h2 { font-size:22px; color:#1b4253; margin:0 0 4px; font-weight:650; }
.kk-store .kk-directory-toolbar p { color:#6c8390; font-size:13px; margin:0; }
.kk-store .kk-directory-toolbar label { display:flex; align-items:center; gap:9px; font-size:12px; color:#617b89; white-space:nowrap; }
.kk-store .kk-directory-toolbar select { border:1px solid #d5e3e8; border-radius:10px; padding:9px 28px 9px 12px; background:white; color:#214b5c; font-size:13px; }
.kk-store .kk-directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.kk-store .kk-directory-grid .kk-provider-cover { height:130px; }
.kk-store .kk-directory-grid .kk-provider-details { padding:25px 18px 16px; }
.kk-store .kk-directory-grid .kk-provider-details h3 { font-size:16px; min-height:50px; }
.kk-store .kk-directory-grid .kk-provider-brand { width:54px; height:54px; top:-29px; }
.kk-store .kk-directory-more,.kk-store .kk-directory-empty button { display:block; margin:28px auto 0; padding:12px 24px; background:#0b7483; color:#fff; border:0; border-radius:10px; font-size:14px; }
.kk-store .kk-directory-empty { text-align:center; background:white; border:1px dashed #c6dce5; border-radius:18px; padding:60px 20px; }
.kk-store .kk-directory-empty > svg { font-size:45px; color:#81abb9; margin-bottom:20px; }
.kk-store .kk-directory-empty h3 { font-size:20px; }
.kk-store .kk-directory-empty p { color:#68818e; font-size:14px; }

/* Package detail: editorial gallery with an offer-aware booking sidebar. */
.kk-store .kk-product-premium { background:var(--kk-surface); padding-bottom:45px; }
.kk-store .kk-product-heading { padding-block:28px 26px; }
.kk-store .kk-product-heading h1 { color:var(--kk-ink); font-size:clamp(25px,2.6vw,36px); line-height:1.5; font-weight:650; margin:0 0 13px; max-width:1040px; }
.kk-store .kk-product-byline { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:14px; color:var(--kk-muted); }
.kk-store .kk-product-byline > svg { color:var(--kk-primary-700); font-size:20px; }
.kk-store .kk-product-byline a { color:var(--kk-primary-700); font-size:12px; }
.kk-store .kk-product-layout { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:30px; align-items:start; padding-bottom:48px; }
.kk-store .kk-product-content { min-width:0; }
.kk-store .kk-product-gallery { padding:10px; background:#fff; border:1px solid var(--kk-line); border-radius:20px; }
.kk-store .kk-product-image { position:relative; overflow:hidden; border-radius:14px; }
.kk-store .kk-product-image > img { display:block; width:100%; aspect-ratio:1.55; object-fit:cover; }
.kk-store .kk-product-image-label { position:absolute; left:18px; bottom:18px; border-radius:8px; background:#ffffffed; color:var(--kk-ink); font-size:12px; font-weight:600; padding:7px 12px; }
.kk-store .kk-product-nav { display:flex; align-items:center; gap:24px; overflow-x:auto; margin-top:26px; border-bottom:1px solid var(--kk-line); scrollbar-width:none; }
.kk-store .kk-product-nav a { display:block; padding:16px 0; white-space:nowrap; font-size:14px; font-weight:600; color:var(--kk-muted); border-bottom:3px solid transparent; }
.kk-store .kk-product-nav a:hover,.kk-store .kk-product-nav a:focus-visible { color:var(--kk-primary-700); border-bottom-color:var(--kk-primary-700); }
.kk-store .kk-product-section { scroll-margin-top:22px; background:white; border:1px solid var(--kk-line); border-radius:16px; padding:28px; margin-top:20px; }
.kk-store .kk-product-section h2 { font-size:23px; font-weight:600; color:var(--kk-ink); margin:0 0 18px; }
.kk-store .kk-product-section p { font-size:15px; line-height:1.95; color:var(--kk-muted); margin:0 0 18px; }
.kk-store .kk-product-description { white-space:pre-line; }
.kk-store .kk-product-tags { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.kk-store .kk-product-tags span { padding:6px 12px; border-radius:7px; background:var(--kk-primary-50); color:var(--kk-primary-900); font-size:12px; }
.kk-store .kk-product-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--kk-line); padding-top:22px; margin-top:26px; gap:16px; }
.kk-store .kk-product-facts div { display:flex; flex-direction:column; gap:8px; }
.kk-store .kk-product-facts i { color:var(--kk-primary-700); font-size:20px; }
.kk-store .kk-product-facts small { color:var(--kk-muted); font-size:11px; }
.kk-store .kk-product-facts b { color:var(--kk-ink); font-size:12px; font-weight:600; }
.kk-store .kk-product-advice { display:flex; gap:15px; padding:18px; border-radius:12px; background:var(--kk-primary-50); }
.kk-store .kk-product-advice i { color:var(--kk-primary-700); font-size:20px; margin-top:4px; }
.kk-store .kk-product-advice p { margin:0; font-size:14px; }
.kk-store .kk-product-offers { display:grid; gap:12px; }
.kk-store .kk-product-offer { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--kk-line); border-radius:13px; }
.kk-store .kk-product-offer.is-selected { border-color:var(--kk-primary-600); background:var(--kk-primary-50); }
.kk-store .kk-product-offer-logo { width:42px; height:42px; flex-shrink:0; display:grid; place-items:center; border-radius:10px; background:var(--kk-primary-50); color:var(--kk-primary-700); font-size:25px; }
.kk-store .kk-product-offer h3 { font-size:14px; line-height:1.6; font-weight:600; margin:0 0 5px; color:var(--kk-ink); }
.kk-store .kk-product-offer a { color:var(--kk-primary-700); font-size:11px; }
.kk-store .kk-product-offer small { display:block; color:var(--kk-muted); font-size:11px; margin-top:5px; }
.kk-store .kk-product-offer-action { margin-left:auto; text-align:right; flex-shrink:0; }
.kk-store .kk-product-offer-action strong { display:block; color:var(--kk-primary-700); font-size:18px; margin-bottom:7px; }
.kk-store .kk-product-offer-action button { border:1px solid var(--kk-primary-200); background:white; color:var(--kk-primary-900); border-radius:7px; padding:6px 13px; font-size:12px; }
.kk-store .kk-product-offer-action button[aria-pressed="true"] { background:var(--kk-primary-700); color:white; border-color:var(--kk-primary-700); }
.kk-store .kk-product-offer-action button:disabled { opacity:.5; cursor:not-allowed; }
.kk-store .kk-product-section details { border-top:1px solid var(--kk-line); padding:16px 0; }
.kk-store .kk-product-section summary { color:var(--kk-ink); cursor:pointer; font-size:15px; font-weight:600; }
.kk-store .kk-product-section details p { margin:14px 0 0; font-size:14px; }
.kk-store .kk-product-booking { position:sticky; top:20px; padding:25px; border:1px solid var(--kk-line); border-radius:18px; background:white; box-shadow:0 12px 34px #0e35500d; }
.kk-store .kk-product-booking-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
.kk-store .kk-product-booking-top > span:first-child { font-size:10px; color:var(--kk-muted); font-weight:700; letter-spacing:1.4px; }
.kk-store .kk-product-booking h2 { font-size:21px; line-height:1.55; font-weight:600; margin:0 0 8px; color:var(--kk-ink); }
.kk-store .kk-product-booking-title { font-size:13px; color:var(--kk-muted); line-height:1.8; margin:0; }
.kk-store .kk-product-price { display:flex; flex-wrap:wrap; align-items:center; gap:7px 13px; padding-top:23px; }
.kk-store .kk-product-price small { width:100%; color:var(--kk-muted); font-size:12px; }
.kk-store .kk-product-price strong { color:var(--kk-primary-700); font-size:38px; font-weight:700; line-height:1.2; letter-spacing:-1px; }
.kk-store .kk-product-price del { font-size:14px; color:#8aa6b7; }
.kk-store .kk-product-tax-note { color:var(--kk-muted); font-size:11px; line-height:1.8; margin:10px 0 22px; }
.kk-store .kk-product-provider-select { display:block; color:var(--kk-muted); font-size:13px; }
.kk-store .kk-product-provider-select select { width:100%; min-width:0; margin-top:9px; padding:12px 24px 12px 10px; border:1px solid var(--kk-line); border-radius:9px; background:var(--kk-primary-50); font-size:13px; color:var(--kk-ink); }
.kk-store .kk-product-booking .kk-booking-quantity { margin:20px 0; padding-top:20px; }
.kk-store .kk-product-booking > .kk-add-button { width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; gap:12px; border-radius:11px; border:0; background:var(--kk-secondary); color:#fff; font-size:15px; padding:13px; }
.kk-store .kk-product-booking > .kk-add-button:hover { background:var(--kk-secondary-press); }
.kk-store .kk-product-booking > .kk-add-button.is-unavailable { background:#e4edf3; color:var(--kk-muted); cursor:not-allowed; }
.kk-store .kk-product-cart-link { display:block; text-align:center; margin-top:12px; font-size:14px; color:var(--kk-primary-700); }
.kk-store .kk-product-booking-note { display:flex; gap:9px; align-items:center; color:var(--kk-muted); font-size:11px; line-height:1.8; padding-top:17px; margin-top:17px; border-top:1px solid var(--kk-line); }
.kk-store .kk-product-booking-note i { color:var(--kk-primary-700); font-size:18px; }
.kk-store .kk-product-premium button:focus-visible,.kk-store .kk-directory button:focus-visible { outline:3px solid var(--kk-primary-600); outline-offset:3px; }
@media(max-width:1100px) { .kk-store .kk-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .kk-store .kk-product-layout { grid-template-columns:minmax(0,1fr) 330px; gap:20px; } .kk-store .kk-product-booking { padding:20px; } }
@media(max-width:900px) { .kk-store .kk-directory-head { grid-template-columns:1fr; gap:20px; padding-block:25px; } .kk-store .kk-directory-seal { display:none; } .kk-store .kk-directory-body { grid-template-columns:1fr; gap:20px; } .kk-store .kk-directory-filter { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; } .kk-store .kk-directory-filter > h2,.kk-store .kk-directory-filter > p,.kk-store .kk-directory-help { display:none; } .kk-store .kk-directory-filter > button { width:auto; gap:12px; margin:0; } .kk-store .kk-product-layout { grid-template-columns:1fr; } .kk-store .kk-product-booking { position:static; grid-row:2; } .kk-store .kk-product-premium { padding-bottom:100px; } .kk-store .kk-product-premium .kk-mobile-booking { bottom:calc(57px + env(safe-area-inset-bottom)); padding-bottom:12px; z-index:55; } .kk-store .kk-product-heading { padding-block:22px; } }
@media(max-width:550px) { .kk-store .kk-directory-grid { gap:10px; } .kk-store .kk-directory-grid .kk-provider-cover { height:100px; } .kk-store .kk-directory-grid .kk-provider-details { padding:25px 12px 14px; } .kk-store .kk-directory-grid .kk-provider-details h3 { font-size:14px; } .kk-store .kk-directory-toolbar { align-items:flex-start; flex-direction:column; gap:12px; } .kk-store .kk-directory-toolbar h2 { font-size:20px; } .kk-store .kk-directory-search { padding-inline:14px; } .kk-store .kk-directory-search input { font-size:14px; } .kk-store .kk-product-heading h1 { font-size:25px; } .kk-store .kk-product-section { padding:20px 16px; } .kk-store .kk-product-section h2 { font-size:20px; } .kk-store .kk-product-nav { gap:22px; } .kk-store .kk-product-nav a { font-size:13px; } .kk-store .kk-product-offer { flex-wrap:wrap; padding:12px; } .kk-store .kk-product-offer-logo { display:none; } .kk-store .kk-product-offer-action { display:flex; width:100%; justify-content:space-between; align-items:center; } .kk-store .kk-product-offer-action strong { margin:0; } .kk-store .kk-product-facts { gap:8px; } }

@media(max-width:900px) { .kk-store .kk-product-content { display:contents; } .kk-store .kk-product-gallery { grid-row:1; } .kk-store .kk-product-booking { grid-row:2; } .kk-store .kk-product-nav { grid-row:3; margin-top:0; } .kk-store .kk-product-section { margin-top:0; } }

/* Booking flow: one document scroll container keeps sticky sidebars anchored. */
html:has(> body.kk-store), body.kk-store { overflow-x:clip; overflow-y:visible; }
@media(min-width:901px) {
  .kk-store .kk-product-booking { top:24px; align-self:start; max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
}
.kk-store .kk-cart-page,.kk-store .kk-checkout-page { background:var(--kk-surface); }
.kk-store .kk-cart-page .kk-page-heading { margin-bottom:30px; }
.kk-store .kk-cart-page .kk-page-heading h1 { font-size:32px; font-weight:650; color:var(--kk-ink); }
.kk-store .kk-cart-grid { grid-template-columns:minmax(0,1fr) 360px; gap:28px; }
.kk-store .kk-cart-group { border-color:var(--kk-line); border-radius:16px; box-shadow:0 3px 12px #0e355004; }
.kk-store .kk-cart-group > h2 { padding:17px 22px; background:var(--kk-primary-50); font-weight:600; }
.kk-store .kk-cart-item { padding:22px; gap:16px; }
.kk-store .kk-cart-item > img { width:88px; height:88px; flex-shrink:0; }
.kk-store .kk-cart-item-actions { gap:12px; }
.kk-store .kk-cart-item-actions > strong { font-size:20px; color:var(--kk-primary-700); }
.kk-store .kk-cart-summary { border-radius:16px; padding:24px; box-shadow:0 12px 34px #0e35500d; }
.kk-store .kk-cart-summary h2 { font-size:22px; font-weight:600; margin:9px 0 20px; }
.kk-store .kk-cart-summary .kk-button { background:var(--kk-secondary); }
.kk-store .kk-cart-summary .kk-button:hover { background:var(--kk-secondary-press); }
.kk-store .kk-cart-summary .kk-button[aria-disabled="true"] { background:#e4edf3; color:var(--kk-muted); cursor:wait; }
.kk-store .kk-cart-total dd { color:var(--kk-primary-700); }
.kk-store .kk-cart-feedback { margin:12px 20px; padding:10px 13px; border-radius:9px; font-size:12px; line-height:1.8; background:var(--kk-primary-50); color:var(--kk-primary-900); }
.kk-store .kk-cart-grid .kk-cart-feedback { margin:0 0 16px; }
.kk-store .kk-cart-feedback.is-error { background:#fff1ed; color:#a03c25; border:1px solid #f2d5cb; }
.kk-store .kk-cart-drawer { width:min(440px,100%); }
.kk-store .kk-cart-drawer-head { padding:21px 22px 18px; }
.kk-store .kk-cart-drawer-body { min-height:0; background:var(--kk-surface); padding:0 12px; }
.kk-store .kk-cart-drawer-group { margin:14px 0; padding:15px 12px 8px; border:1px solid var(--kk-line); border-radius:13px; background:#fff; }
.kk-store .kk-cart-drawer-group h3 { font-size:12px; line-height:1.7; }
.kk-store .kk-cart-drawer-item { gap:11px; padding:11px 0; }
.kk-store .kk-cart-drawer-item > img { width:60px; height:64px; border-radius:8px; }
.kk-store .kk-cart-drawer-info > a { font-size:13px; line-height:1.7; }
.kk-store .kk-cart-drawer-row { gap:8px; flex-wrap:wrap; }
.kk-store .kk-cart-drawer-row strong { margin-left:auto; font-size:15px; }
.kk-store .kk-cart-drawer-foot { flex-shrink:0; padding:16px 22px calc(16px + env(safe-area-inset-bottom)); background:white; box-shadow:0 -6px 22px #0e355007; }
.kk-store .kk-cart-drawer-foot dt { font-weight:400; }
.kk-store .kk-cart-drawer-cta { background:var(--kk-primary); height:46px; font-weight:600; border-radius:10px; }
.kk-store .kk-cart-drawer-cta:hover { background:var(--kk-primary-200); }
.kk-store .kk-cart-drawer-link { min-height:28px; display:flex; justify-content:center; align-items:center; }
.kk-store .kk-cart-drawer .kk-quantity,.kk-store .kk-cart-page .kk-quantity { display:inline-grid; grid-template-columns:30px 30px 30px; width:92px; height:32px; flex-shrink:0; border:1px solid var(--kk-line); border-radius:8px; overflow:hidden; }
.kk-store .kk-cart-drawer .kk-quantity button,.kk-store .kk-cart-page .kk-quantity button { display:grid; place-items:center; width:30px; min-width:0; height:30px; min-height:0; padding:0; margin:0; border:0; border-radius:0; font-size:16px; line-height:1; background:#f5f9fa; color:#22596b; }
.kk-store .kk-cart-drawer .kk-quantity input,.kk-store .kk-cart-page .kk-quantity input { width:30px; min-width:0; height:30px; min-height:0; margin:0; padding:0; border:0; border-radius:0; font-size:12px; line-height:30px; color:var(--kk-ink); box-shadow:none; }
.kk-store .kk-quantity button:disabled { color:#a3bfd0; cursor:not-allowed; }
.kk-store .kk-quantity button:focus-visible { outline:2px solid var(--kk-primary-600); outline-offset:-2px; }
.kk-store .kk-checkout-header { background:#fff; border-bottom:1px solid var(--kk-line); }
.kk-store .kk-checkout-header > div { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
/* โลโก้จริง ขนาดเดียวกับหัวเว็บหน้าร้าน (156x76) */
.kk-store .kk-checkout-brand { display:inline-flex; align-items:center; flex-shrink:0; }
.kk-store .kk-checkout-brand img { display:block; width:156px; height:76px; object-fit:contain; }
.kk-store .kk-checkout-header-label { font-size:12px; color:var(--kk-muted); letter-spacing:.8px; }
.kk-store .kk-checkout-back { color:var(--kk-primary-900); font-size:13px; font-weight:600; padding:10px 14px; border:1px solid var(--kk-line); border-radius:10px; }
.kk-store .kk-checkout-main { padding-top:30px; padding-bottom:50px; }
.kk-store .kk-checkout-main .kk-page-heading { margin:28px 0; }
.kk-store .kk-checkout-main .kk-page-heading h1 { font-size:32px; color:var(--kk-ink); font-weight:650; margin-top:9px; }
.kk-store .kk-checkout-main .kk-page-heading p { font-size:14px; }
.kk-store .kk-checkout-grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start; }
.kk-store .kk-checkout-steps,.kk-store .kk-checkout-review-column { min-width:0; }
.kk-store .kk-checkout-review-column { position:sticky; top:24px; }
.kk-store .kk-checkout-footer { display:flex; justify-content:space-between; gap:16px; padding-block:22px; border-top:1px solid var(--kk-line); color:var(--kk-muted); font-size:11px; line-height:1.8; }
.kk-store .kk-payment-radio { width:18px; height:18px; border:1px solid var(--kk-primary-200); border-radius:50%; flex-shrink:0; }
.kk-store .kk-payment-radio[data-selected="true"] { border:5px solid var(--kk-primary-700); background:white; }
.kk-store .kk-checkout-grid [role="radio"] { border-radius:11px; padding:16px; }
.kk-store .kk-checkout-grid [role="radio"][aria-checked="true"] { border-color:var(--kk-primary-600); background:var(--kk-primary-50); }
.kk-store .kk-checkout-grid [role="radio"][aria-disabled="true"] { opacity:.6; cursor:wait; }
@layer premium {
  .kk-store .kk-checkout-grid [data-testid^="checkout-step-"] { padding:24px!important; border-radius:15px!important; border-color:var(--kk-line)!important; }
  .kk-store .kk-checkout-grid [data-testid^="checkout-step-"][data-open="false"] { padding:20px 24px!important; }
  .kk-store .kk-checkout-grid [data-testid^="checkout-step-"][data-open="false"] > div:first-child { margin-bottom:0!important; }
  .kk-store .kk-checkout-grid [data-testid^="checkout-step-"][data-open="false"] form:has(p),.kk-store .kk-checkout-grid [data-testid^="checkout-step-"][data-open="false"] > div:nth-child(2):has(p) { margin-top:16px; }
  .kk-store .kk-checkout-grid .ekomart-checkout-review { padding:24px!important; border-radius:15px!important; box-shadow:0 12px 34px #0e35500d!important; }
  .kk-store .kk-checkout-grid .button-text:not(:disabled) { background:var(--kk-secondary)!important; }
  .kk-store .kk-checkout-grid .button-text:not(:disabled):hover { background:var(--kk-secondary-press)!important; }
  .kk-store .kk-checkout-grid input:focus,.kk-store .kk-checkout-grid select:focus { border-color:var(--kk-primary-600)!important; outline:none!important; }
  .kk-store .kk-checkout-grid .kk-review-items article { grid-template-columns:52px minmax(0,1fr); gap:12px; position:relative; }
  .kk-store .kk-checkout-grid .kk-review-items article > img { width:52px; height:60px; }
  .kk-store .kk-checkout-grid .kk-review-items article > strong { grid-column:2; text-align:left; margin-top:-7px; color:var(--kk-primary-700); }
}
@media(max-width:1000px) {
  .kk-store .kk-checkout-grid { grid-template-columns:minmax(0,1fr) 330px; gap:20px; }
  .kk-store .kk-cart-grid { grid-template-columns:minmax(0,1fr) 320px; gap:20px; }
}
@media(max-width:800px) {
  .kk-store .kk-cart-grid,.kk-store .kk-checkout-grid { grid-template-columns:1fr; }
  .kk-store .kk-checkout-review-column { position:static; }
  .kk-store .kk-checkout-header > div { min-height:72px; }
  .kk-store .kk-checkout-header-label { display:none; }
  .kk-store .kk-checkout-main { padding-top:22px; }
  .kk-store .kk-checkout-main .kk-page-heading h1,.kk-store .kk-cart-page .kk-page-heading h1 { font-size:26px; }
  .kk-store .kk-checkout-back { padding:8px 10px; font-size:12px; }
  .kk-store .kk-checkout-brand img { width:124px; height:60px; }
  .kk-store .kk-checkout-footer { flex-direction:column; gap:6px; }
}
@media(max-width:520px) {
  .kk-store .kk-cart-item { padding:17px; gap:12px; }
  .kk-store .kk-cart-item > img { width:68px; height:72px; }
  .kk-store .kk-cart-group > h2 { padding:15px 17px; }
  .kk-store .kk-cart-summary { padding:21px; }
  .kk-store .kk-cart-drawer-head { padding:17px 18px; }
  .kk-store .kk-cart-drawer-foot { padding-inline:18px; }
}
@media(max-height:580px) { .kk-store .kk-cart-drawer { overflow-y:auto; } .kk-store .kk-cart-drawer-body { flex:1 0 auto; } }
@media(min-width:901px) {
  .kk-store .kk-product-booking { top:170px; max-height:calc(100dvh - 194px); padding:20px; }
  .kk-store .kk-product-booking-top { margin-bottom:13px; }
  .kk-store .kk-product-booking .kk-product-price { padding-top:15px; }
  .kk-store .kk-product-booking .kk-product-tax-note { margin-bottom:15px; }
  .kk-store .kk-product-booking .kk-booking-quantity { margin:13px 0; padding-top:13px; }
  .kk-store .kk-product-booking-note { margin-top:12px; padding-top:12px; }
  .kk-store .kk-cart-summary { top:170px; }
}

/* Drawer footer actions share one row; both are the same height so the pair
   reads as a single decision. Narrow phones stack them instead of truncating. */
.kk-store .kk-cart-drawer-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:10px; }
.kk-store .kk-cart-drawer .kk-cart-drawer-cta,
.kk-store .kk-cart-drawer-actions .kk-cart-drawer-link { height:46px; margin:0; padding:0 12px; border-radius:10px; font-size:13.5px; white-space:nowrap; }
.kk-store .kk-cart-drawer-actions .kk-cart-drawer-link { display:flex; align-items:center; justify-content:center; border:1px solid var(--kk-line); background:#fff; font-weight:600; }
.kk-store .kk-cart-drawer-actions .kk-cart-drawer-link:hover { background:var(--kk-primary-50); border-color:var(--kk-primary-200); }
@media(max-width:360px){ .kk-store .kk-cart-drawer-actions { grid-template-columns:1fr; } }

/* Drawer line item: title and a quiet trash control share the first row. */
.kk-store .kk-cart-drawer-title { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.kk-store .kk-cart-drawer-title > a { flex:1; min-width:0; display:block; font-size:13px; font-weight:600; line-height:1.7; color:var(--kk-ink); }
.kk-store .kk-cart-drawer-title > a:hover { color:var(--kk-primary-700); }
.kk-store .kk-cart-drawer-remove { flex:0 0 32px; width:32px; height:32px; margin:-4px -6px 0 0; padding:0; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#8aa6b7; font-size:17px; cursor:pointer; text-decoration:none; }
.kk-store .kk-cart-drawer-remove:hover { background:var(--kk-secondary-50); color:#c13c10; }
.kk-store .kk-cart-drawer-remove[disabled] { opacity:.5; cursor:wait; }
@layer premium { .kk-store .kk-cart-drawer-title > a { color:var(--kk-ink) !important; } }

/* "Review booking" wears the template's primary sky (#B3E5FC). The label is
   deep navy, not white: white on #B3E5FC is ~1.3:1 and would vanish, navy
   #01466E on it is ~7.6:1. */
.kk-store .kk-cart-drawer .kk-cart-drawer-cta { background:var(--kk-primary); border:1px solid var(--kk-primary-200); }
.kk-store .kk-cart-drawer .kk-cart-drawer-cta:hover { background:var(--kk-primary-200); }
.kk-store .kk-cart-drawer .kk-cart-drawer-cta[aria-disabled="true"] { background:#e4edf3; border-color:#e4edf3; }
@layer premium {
  .kk-store .kk-cart-drawer .kk-cart-drawer-cta,
  .kk-store .kk-cart-drawer .kk-cart-drawer-cta:hover,
  .kk-store .kk-cart-drawer .kk-cart-drawer-cta:visited { color:var(--kk-primary-900) !important; }
  .kk-store .kk-cart-drawer .kk-cart-drawer-cta[aria-disabled="true"] { color:#5b7a8c !important; }
}

/* Drawer exit: panel slides back to the edge it came from while the scrim
   fades. 220ms ease-in (enter is 240ms ease-out) and input is dropped the
   moment closing starts so a second click cannot land on a vanishing panel. */
.kk-store .kk-drawer-scrim.is-closing { animation:kk-fade-out .22s ease-in forwards; pointer-events:none; }
.kk-store .kk-drawer-scrim.is-closing .kk-cart-drawer { animation:kk-slide-out .22s cubic-bezier(.4,0,1,1) forwards; }
@keyframes kk-fade-out { from { opacity:1 } to { opacity:0 } }
@keyframes kk-slide-out { from { transform:none } to { transform:translateX(100%) } }
@media(prefers-reduced-motion:reduce){ .kk-store .kk-drawer-scrim.is-closing,.kk-store .kk-drawer-scrim.is-closing .kk-cart-drawer { animation:none; } }

/* While the cart drawer is open it already shows the item that was just
   added, so the "added to cart" toast is redundant — and it sits bottom-right,
   exactly on top of the drawer's footer actions. Suppress it for the duration. */
.kk-store:has(.kk-drawer-scrim) .ekomart-cart-toast-stack { display:none; }

/* ---------- coupon (checkout summary) ---------- */
/* Own class names: this box used to be `.kk-promo`, which it shared with the
   homepage hero carousel — it inherited the banner's 370px height and sky fill.
   Collapsed it is one quiet 46px row so it never competes with the total. */
.kk-store .kk-coupon { border:1px solid var(--kk-line); border-radius:12px; background:#fff; }
.kk-store .kk-coupon[open] { border-color:var(--kk-primary-200); background:var(--kk-primary-50); }
.kk-store .kk-coupon > summary { display:flex; align-items:center; gap:10px; min-height:46px; padding:0 14px; cursor:pointer; list-style:none; font-size:13.5px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-coupon > summary::-webkit-details-marker { display:none; }
.kk-store .kk-coupon-icon { font-size:18px; color:var(--kk-secondary-deep); flex-shrink:0; }
.kk-store .kk-coupon-label { flex:1; min-width:0; }
.kk-store .kk-coupon-hint { font-size:12px; font-weight:600; color:var(--kk-success); }
.kk-store .kk-coupon-chevron { font-size:15px; color:var(--kk-muted); flex-shrink:0; transition:transform .18s; }
.kk-store .kk-coupon[open] .kk-coupon-chevron { transform:rotate(180deg); }
.kk-store .kk-coupon-body { padding:0 14px 14px; }
.kk-store .kk-coupon-form { display:flex; gap:8px; }
.kk-store .kk-coupon-form input { flex:1; min-width:0; height:40px; padding:0 12px; border:1px solid var(--kk-primary-200); border-radius:9px; background:#fff; font-size:14px; letter-spacing:.6px; color:var(--kk-ink); outline:none; }
.kk-store .kk-coupon-form input::placeholder { letter-spacing:0; color:#8aa6b7; }
.kk-store .kk-coupon-form input:focus { border-color:var(--kk-primary-600); }
.kk-store .kk-coupon-form input[aria-invalid="true"] { border-color:#e3a58e; }
.kk-store .kk-coupon-form button { flex:0 0 auto; width:auto; height:40px; padding:0 16px; border:0; border-radius:9px; background:var(--kk-primary-700); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
.kk-store .kk-coupon-form button:hover { background:var(--kk-primary-900); }
.kk-store .kk-coupon-form button[disabled] { background:#e4edf3; color:#8aa6b7; cursor:not-allowed; }
.kk-store .kk-coupon-msg { margin:8px 2px 0; font-size:12px; line-height:1.6; }
.kk-store .kk-coupon-msg.is-ok { color:var(--kk-success); }
.kk-store .kk-coupon-msg.is-error { color:#b0431a; }
.kk-store .kk-coupon-applied { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.kk-store .kk-coupon-chip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 4px 0 10px; border:1px dashed var(--kk-secondary); border-radius:8px; background:var(--kk-secondary-50); color:#9c3a12; font-size:12px; font-weight:700; letter-spacing:.6px; }
.kk-store .kk-coupon-chip button { display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:6px; background:transparent; color:#9c3a12; font-size:12px; cursor:pointer; }
.kk-store .kk-coupon-chip button:hover { background:#ffd9c9; }
@media(max-width:900px){ .kk-store .kk-coupon-form input { font-size:16px; } } /* <16px makes iOS zoom the page */
@layer premium {
  /* The checkout grid forces 48px, 16px-padded inputs and full-width buttons on
     everything inside it — the coupon field opts out to stay compact. */
  .kk-store .kk-coupon-form input { min-height:0!important; height:40px!important; padding:0 12px!important; border:1px solid var(--kk-primary-200)!important; border-radius:9px!important; font-size:14px!important; background:#fff!important; }
  .kk-store .kk-coupon-form input:focus { border-color:var(--kk-primary-600)!important; outline:none!important; }
  .kk-store .kk-coupon-form input[aria-invalid="true"] { border-color:#e3a58e!important; }
  .kk-store .kk-coupon-form button { width:auto!important; min-height:0!important; }
  .kk-store .kk-coupon-msg { margin:8px 2px 0!important; font-size:12px!important; line-height:1.6!important; }
}
@media(max-width:900px){ @layer premium { .kk-store .kk-coupon-form input { font-size:16px!important; } } }

/* ---------- order confirmed ---------- */
.kk-store .kk-confirm { padding:clamp(28px,5vw,56px) 16px 64px; background:var(--kk-surface); }
.kk-store .kk-confirm-card { width:min(760px,100%); margin-inline:auto; background:#fff; border:1px solid var(--kk-line); border-radius:20px; padding:clamp(22px,4vw,40px); }
.kk-store .kk-confirm-head { text-align:center; }
.kk-store .kk-confirm-badge { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:var(--kk-primary); color:var(--kk-primary-900); font-size:30px; }
.kk-store .kk-confirm-head h1 { margin:0 0 8px; font-size:clamp(24px,3vw,30px); font-weight:700; color:var(--kk-ink); letter-spacing:-.5px; }
.kk-store .kk-confirm-head p { margin:0; font-size:14px; line-height:1.8; color:var(--kk-muted); }
.kk-store .kk-confirm-head p b { color:var(--kk-ink); font-weight:600; }
.kk-store .kk-confirm-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:26px 0; border:1px solid var(--kk-line); border-radius:14px; overflow:hidden; background:var(--kk-line); }
.kk-store .kk-confirm-meta > div { background:var(--kk-primary-50); padding:14px 16px; }
.kk-store .kk-confirm-meta dt { font-size:11.5px; font-weight:400; color:var(--kk-muted); margin-bottom:4px; }
.kk-store .kk-confirm-meta dd { margin:0; font-size:15px; font-weight:700; color:var(--kk-ink); }
.kk-store .kk-confirm-meta dd.is-total { color:var(--kk-primary-700); }
.kk-store .kk-confirm h2 { margin:0 0 12px; font-size:15px; font-weight:700; color:var(--kk-ink); }
.kk-store .kk-confirm-items { list-style:none; margin:0 0 26px; padding:0; border-top:1px solid var(--kk-line); }
.kk-store .kk-confirm-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #eef6fb; }
.kk-store .kk-confirm-item img { width:52px; height:56px; border-radius:9px; object-fit:cover; background:var(--kk-primary-50); flex-shrink:0; }
.kk-store .kk-confirm-item > div { flex:1; min-width:0; }
.kk-store .kk-confirm-item b { display:block; font-size:13.5px; font-weight:600; color:var(--kk-ink); line-height:1.6; }
.kk-store .kk-confirm-item span { font-size:12px; color:var(--kk-muted); }
.kk-store .kk-confirm-item strong { font-size:14px; color:var(--kk-primary-700); white-space:nowrap; }
.kk-store .kk-confirm-steps { list-style:none; margin:0 0 28px; padding:0; display:grid; gap:10px; }
.kk-store .kk-confirm-steps li { display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.7; color:var(--kk-ink); }
.kk-store .kk-confirm-steps li > span { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; border-radius:8px; background:var(--kk-accent); color:var(--kk-accent-ink); font-size:12px; font-weight:700; }
.kk-store .kk-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kk-store .kk-confirm-actions a { display:flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:12px; font-size:14px; font-weight:700; }
.kk-store .kk-confirm-primary { background:var(--kk-secondary); color:#fff; }
.kk-store .kk-confirm-primary:hover { background:var(--kk-secondary-press); color:#fff; }
.kk-store .kk-confirm-secondary { border:1px solid var(--kk-line); background:#fff; color:var(--kk-ink); }
.kk-store .kk-confirm-secondary:hover { background:var(--kk-primary-50); }
@media(max-width:600px){ .kk-store .kk-confirm-meta,.kk-store .kk-confirm-actions { grid-template-columns:1fr; } }
@layer premium {
  .kk-store .kk-confirm-primary,.kk-store .kk-confirm-primary:hover,.kk-store .kk-confirm-primary:visited { color:#fff!important; }
  .kk-store .kk-confirm-secondary,.kk-store .kk-confirm-secondary:hover,.kk-store .kk-confirm-secondary:visited { color:var(--kk-ink)!important; }
}

@layer premium {
  /* Step "แก้ไข" buttons share `.button-text` with the primary CTAs, so the
     checkout-wide orange fill swallowed them. Editing a finished step is a
     secondary action — keep it a quiet sky button so the real next step stays
     the only orange thing in view.

     Note this is keyed on the test id, so every step's Edit button must carry a
     data-testid ending in "edit-button" or it falls through to the orange primary
     style and shouts louder than the actual next action. */
  .kk-store .kk-checkout-grid [data-testid$="edit-button"],
  .kk-store .kk-checkout-grid [data-testid$="edit-button"].button-text:not(:disabled) {
    background:var(--kk-primary-50)!important; color:var(--kk-primary-900)!important;
    border:1px solid var(--kk-primary-200)!important; min-height:34px!important;
    padding:5px 14px!important; font-size:12.5px!important; font-weight:600!important;
  }
  .kk-store .kk-checkout-grid [data-testid$="edit-button"].button-text:not(:disabled):hover {
    background:var(--kk-primary)!important;
  }
}

/* ---------- gradient ring ---------- */
/* Replaces the thick orange top stripes: a 1.5px ring that runs orange → sky
   round the whole card. Drawn as a border-box background under a white
   padding-box layer, so it needs no pseudo-element and stays put inside
   scrolling cards like the product booking box. */
@property --kk-ring-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes kk-ring-spin { to { --kk-ring-angle:360deg; } }
@layer premium {
  .kk-store .kk-product-booking,
  .kk-store .kk-cart-summary,
  .kk-store .kk-confirm-card,
  .kk-store .kk-checkout-grid .ekomart-checkout-review,
  .kk-store .kk-checkout-grid [data-testid^="checkout-step-"][data-open="true"] {
    border:1.5px solid transparent!important;
    background:
      linear-gradient(#fff,#fff) padding-box,
      conic-gradient(from var(--kk-ring-angle), #FF7043, #FFB59E 14%, #B3E5FC 32%, #4FB3E8 50%, #B3E5FC 68%, #FFB59E 86%, #FF7043) border-box!important;
  }
}
/* Only the card the visitor should act on gets the slow travelling light —
   one moving thing per page. The checkout summary keeps a still ring so it
   doesn't compete with the step being filled in. */
.kk-store .kk-product-booking,
.kk-store .kk-cart-summary,
.kk-store .kk-confirm-card,
.kk-store .kk-checkout-grid [data-testid^="checkout-step-"][data-open="true"] { animation:kk-ring-spin 9s linear infinite; }
@media(prefers-reduced-motion:reduce){
  .kk-store .kk-product-booking,.kk-store .kk-cart-summary,.kk-store .kk-confirm-card,
  .kk-store .kk-checkout-grid [data-testid^="checkout-step-"][data-open="true"] { animation:none; }
}

/* Cart page: the trash control sits beside the quantity stepper, matching the
   drawer's icon instead of an underlined text link. */
.kk-store .kk-cart-item-controls { display:flex; align-items:center; gap:8px; }
.kk-store .kk-cart-remove { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; padding:0; border:1px solid var(--kk-line); border-radius:8px; background:#fff; color:#8aa6b7; font-size:16px; cursor:pointer; }
.kk-store .kk-cart-remove:hover { background:var(--kk-secondary-50); border-color:#ffd9c9; color:#c13c10; }
.kk-store .kk-cart-remove[disabled] { opacity:.5; cursor:wait; }

/* Search: the same orange → sky ring as the cards. */
.kk-store .kk-hd-search {
  border:1.5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--kk-ring-angle), #FF7043, #FFB59E 14%, #B3E5FC 32%, #4FB3E8 50%, #B3E5FC 68%, #FFB59E 86%, #FF7043) border-box;
}
/* Always travelling, per the owner's call — same 9s pace as the card rings. */
.kk-store .kk-hd-search,.kk-store .kk-hd-search:focus-within { border-color:transparent; animation:kk-ring-spin 9s linear infinite; }
@media(prefers-reduced-motion:reduce){ .kk-store .kk-hd-search,.kk-store .kk-hd-search:focus-within { animation:none; } }

/* Confirmation totals */
.kk-store .kk-confirm-totals { margin:0 0 26px; padding:12px 16px; border:1px solid var(--kk-line); border-radius:12px; background:var(--kk-surface); }
.kk-store .kk-confirm-totals > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; font-size:13px; }
.kk-store .kk-confirm-totals dt { font-weight:400; color:var(--kk-muted); }
.kk-store .kk-confirm-totals dt small { font-size:11.5px; }
.kk-store .kk-confirm-totals dd { margin:0; color:var(--kk-ink); font-weight:500; white-space:nowrap; }
.kk-store .kk-confirm-totals .is-grand { border-top:1px solid var(--kk-line); margin-top:6px; padding-top:10px; }
.kk-store .kk-confirm-totals .is-grand dt { color:var(--kk-ink); font-weight:600; }
.kk-store .kk-confirm-totals .is-grand dd { font-size:18px; font-weight:800; color:var(--kk-primary-700); }

@layer premium {
  /* Step buttons ("บันทึกและดำเนินการต่อ", "เลือกวิธีชำระเงิน", …) inherited the
     light body weight — thin white type on #FF7043 all but disappeared. */
  .kk-store .kk-checkout-grid .button-text:not(:disabled) { font-weight:700!important; font-size:15px!important; letter-spacing:.2px!important; }
}

/* Page headings (cart, checkout): the title holds the left edge and its
   one-line explainer sits on the right of the same row, aligned to the
   title's foot. Stacks again on narrow screens. */
.kk-store .kk-page-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"eyebrow eyebrow" "title note"; align-items:end; column-gap:32px; }
.kk-store .kk-page-heading > .kk-eyebrow { grid-area:eyebrow; }
.kk-store .kk-page-heading > h1 { grid-area:title; margin-bottom:0; }
.kk-store .kk-page-heading > p { grid-area:note; margin:0 0 10px; max-width:46ch; text-align:right; }
@media(max-width:800px){
  .kk-store .kk-page-heading { grid-template-columns:1fr; grid-template-areas:"eyebrow" "title" "note"; }
  .kk-store .kk-page-heading > p { text-align:left; max-width:none; margin-top:6px; }
}

/* ---------- account pages: sign in / sign up / forgot / reset ---------- */
.kk-store .kk-auth { min-height:100vh; display:flex; flex-direction:column; background:var(--kk-surface); }
.kk-store .kk-auth-wrap { width:min(1180px,100% - 32px); margin-inline:auto; }
.kk-store .kk-auth-top { background:#fff; border-bottom:1px solid var(--kk-line); }
.kk-store .kk-auth-top .kk-auth-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; }
.kk-store .kk-auth-back { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border:1px solid var(--kk-line); border-radius:10px; font-size:13px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-auth-back:hover { background:var(--kk-primary-50); }
.kk-store .kk-auth-main { flex:1; display:flex; align-items:center; padding-block:clamp(24px,5vw,56px); }
.kk-store .kk-auth-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:stretch; }

/* Brand panel: deep sky with two soft light orbs (sky and orange). */
.kk-store .kk-auth-brand { order:-1; position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:clamp(28px,4vw,52px); border-radius:24px; color:#fff; background:linear-gradient(150deg,#01466E 0%,#0277BD 55%,#0288D1 100%); }
.kk-store .kk-auth-brand::before { content:""; position:absolute; width:360px; height:360px; right:-130px; top:-130px; border-radius:50%; background:radial-gradient(circle,#B3E5FCa6 0%,#B3E5FC00 70%); z-index:-1; }
.kk-store .kk-auth-brand::after { content:""; position:absolute; width:320px; height:320px; left:-120px; bottom:-140px; border-radius:50%; background:radial-gradient(circle,#FF704380 0%,#FF704300 70%); z-index:-1; }
.kk-store .kk-auth-kicker { font-size:11px; font-weight:700; letter-spacing:2px; color:var(--kk-primary); }
.kk-store .kk-auth-brand h2 { margin:0; font-size:clamp(26px,3vw,36px); line-height:1.35; font-weight:700; letter-spacing:-.6px; color:#fff; }
.kk-store .kk-auth-brand > p { margin:0; font-size:14px; line-height:1.8; color:#d6eefb; max-width:40ch; }
.kk-store .kk-auth-points { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px; }
.kk-store .kk-auth-points li { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:#ffffff14; border:1px solid #ffffff26; backdrop-filter:blur(6px); }
.kk-store .kk-auth-points li > span { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:10px; background:var(--kk-primary); color:var(--kk-primary-900); font-size:17px; }
.kk-store .kk-auth-points b { display:block; font-size:14px; font-weight:600; color:#fff; }
.kk-store .kk-auth-points small { display:block; margin-top:2px; font-size:12px; line-height:1.7; color:#cfe9f8; }

/* Form card: the same travelling orange → sky ring as the cart/checkout cards. */
.kk-store .kk-auth-panel { display:flex; align-items:center; justify-content:center; }
.kk-store .kk-auth-card { width:100%; max-width:460px; padding:clamp(24px,3.5vw,40px); border-radius:22px; border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, conic-gradient(from var(--kk-ring-angle), #FF7043, #FFB59E 14%, #B3E5FC 32%, #4FB3E8 50%, #B3E5FC 68%, #FFB59E 86%, #FF7043) border-box;
  animation:kk-ring-spin 9s linear infinite; box-shadow:0 18px 50px #0e35500f; }
@media(prefers-reduced-motion:reduce){ .kk-store .kk-auth-card { animation:none; } }
.kk-store .kk-auth-head { margin-bottom:22px; }
.kk-store .kk-auth-head h1 { margin:0 0 6px; font-size:26px; font-weight:700; letter-spacing:-.5px; color:var(--kk-ink); line-height:1.4; }
.kk-store .kk-auth-head p { margin:0; font-size:13.5px; line-height:1.8; color:var(--kk-muted); }
.kk-store .kk-auth-head p b { color:var(--kk-ink); font-weight:600; }
.kk-store .kk-auth-badge { display:grid; place-items:center; width:56px; height:56px; margin-bottom:16px; border-radius:16px; background:var(--kk-primary); color:var(--kk-primary-900); font-size:26px; }
.kk-store .kk-auth-badge.is-warn { background:var(--kk-secondary-50); color:var(--kk-secondary-deep); }

.kk-store .kk-auth-form { display:grid; gap:16px; }
.kk-store .kk-auth-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kk-store .kk-auth-field > label { display:block; margin-bottom:7px; font-size:13px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-auth-control { position:relative; display:flex; align-items:center; }
.kk-store .kk-auth-icon { position:absolute; left:14px; display:flex; font-size:17px; color:#8aa6b7; pointer-events:none; }
.kk-store .kk-auth-control input { width:100%; height:48px; padding:0 14px 0 42px; border:1px solid var(--kk-line); border-radius:12px; background:#fff; font-size:15px; color:var(--kk-ink); outline:none; box-shadow:none; transition:border-color .15s; }
.kk-store .kk-auth-control:not(:has(.kk-auth-icon)) input { padding-left:14px; }
.kk-store .kk-auth-control:has(.kk-auth-reveal) input { padding-right:48px; }
.kk-store .kk-auth-control input::placeholder { color:#9db6c5; }
.kk-store .kk-auth-control input:hover { border-color:var(--kk-primary-200); }
.kk-store .kk-auth-control input:focus { border-color:var(--kk-primary-600); }
.kk-store .kk-auth-control:focus-within .kk-auth-icon { color:var(--kk-primary-700); }
.kk-store .kk-auth-reveal { position:absolute; right:6px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:9px; background:transparent; color:#8aa6b7; font-size:18px; cursor:pointer; }
.kk-store .kk-auth-reveal:hover { background:var(--kk-primary-50); color:var(--kk-primary-700); }
.kk-store .kk-auth-field.has-error .kk-auth-control input { border-color:#e3a58e; }
.kk-store .kk-auth-error { display:flex; align-items:center; gap:6px; margin:6px 0 0; font-size:12px; line-height:1.6; color:#b0431a; }
.kk-store .kk-auth-error svg { flex-shrink:0; }
.kk-store .kk-auth-row-end { display:flex; justify-content:flex-end; margin-top:-6px; }
.kk-store .kk-auth-link { font-size:13px; font-weight:600; color:var(--kk-primary-700); }

.kk-store .kk-auth-submit { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:50px; margin-top:4px; border:0; border-radius:12px; background:var(--kk-secondary); color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.kk-store .kk-auth-submit:hover { background:var(--kk-secondary-press); }
.kk-store .kk-auth-submit[disabled] { background:#e4edf3; color:#5b7a8c; cursor:wait; }
.kk-store .kk-auth-divider { display:flex; align-items:center; gap:12px; margin:22px 0 14px; font-size:12.5px; color:var(--kk-muted); }
.kk-store .kk-auth-divider::before,.kk-store .kk-auth-divider::after { content:""; flex:1; height:1px; background:var(--kk-line); }
.kk-store .kk-auth-secondary { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:48px; border:1px solid var(--kk-line); border-radius:12px; background:#fff; font-size:14px; font-weight:600; color:var(--kk-ink); cursor:pointer; }
.kk-store .kk-auth-secondary:hover { background:var(--kk-primary-50); border-color:var(--kk-primary-200); }
.kk-store .kk-auth-actions { display:grid; gap:10px; margin-top:6px; }
.kk-store .kk-auth-note { display:flex; gap:9px; align-items:flex-start; margin-bottom:16px; padding:11px 14px; border-radius:12px; background:var(--kk-primary-50); border:1px solid #cfeafb; font-size:13px; line-height:1.7; color:var(--kk-primary-900); }
.kk-store .kk-auth-note svg { flex-shrink:0; margin-top:3px; }
.kk-store .kk-auth-note.is-error { background:#fff3ee; border-color:#ffd9c9; color:#9c3a12; }

.kk-store .kk-auth-foot { padding-block:18px; border-top:1px solid var(--kk-line); font-size:11.5px; color:var(--kk-muted); }
.kk-store .kk-auth-foot .kk-auth-wrap { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* Password strength */
.kk-store .kk-pw { margin-top:10px; }
.kk-store .kk-pw-meter { height:5px; border-radius:99px; background:#e6f1f8; overflow:hidden; }
.kk-store .kk-pw-meter span { display:block; height:100%; border-radius:inherit; background:#c9d9e3; transition:width .2s,background .2s; }
.kk-store .kk-pw-meter[data-level="weak"] span { background:#e07a52; }
.kk-store .kk-pw-meter[data-level="fair"] span { background:#e8b23a; }
.kk-store .kk-pw-meter[data-level="strong"] span { background:var(--kk-success); }
.kk-store .kk-pw-label { margin:6px 0 8px; font-size:12px; color:var(--kk-muted); }
.kk-store .kk-pw-rules { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
.kk-store .kk-pw-rules li { display:flex; align-items:center; gap:6px; font-size:12px; color:#8aa6b7; }
.kk-store .kk-pw-rules li svg { font-size:14px; flex-shrink:0; }
.kk-store .kk-pw-rules li.is-ok { color:var(--kk-success); }

@media(max-width:900px){
  .kk-store .kk-auth-grid { grid-template-columns:1fr; }
  /* Phones: the form leads, the brand panel follows it (source order). */
  .kk-store .kk-auth-brand { order:0; padding:26px; }
  .kk-store .kk-auth-card { max-width:none; }
}
@media(max-width:520px){
  .kk-store .kk-auth-row,.kk-store .kk-pw-rules { grid-template-columns:1fr; }
  .kk-store .kk-auth-control input { font-size:16px; } /* <16px makes iOS zoom */
}
@media(prefers-reduced-motion:reduce){ .kk-store .kk-pw-meter span { transition:none; } }

@layer premium {
  .kk-store .kk-auth-back,.kk-store .kk-auth-back:visited,.kk-store .kk-auth-back:hover { color:var(--kk-ink)!important; }
  .kk-store .kk-auth-link,.kk-store .kk-auth-link:visited { color:var(--kk-primary-700)!important; }
  .kk-store .kk-auth-link:hover { color:var(--kk-secondary-deep)!important; }
  .kk-store .kk-auth-secondary,.kk-store .kk-auth-secondary:visited,.kk-store .kk-auth-secondary:hover { color:var(--kk-ink)!important; }
  .kk-store .kk-auth-submit,.kk-store .kk-auth-submit:hover,.kk-store .kk-auth-submit:visited { color:#fff!important; }
  .kk-store .kk-auth-submit[disabled] { color:#5b7a8c!important; }
  .kk-store .kk-auth-foot a,.kk-store .kk-auth-foot a:visited { color:var(--kk-primary-700)!important; }
}

@layer premium {
  /* The global :focus-visible outline (3px, offset 3px) drew a heavy ring
     around focused account fields — including the one react-hook-form focuses
     after a failed submit. The field's own border already turns blue. */
  .kk-store .kk-auth-control input:focus,
  .kk-store .kk-auth-control input:focus-visible { outline:none!important; }
}

/* ---------- package matcher (inside the assist panel) ---------- */
.kk-store .kk-cm-launch { --fill:#fff; display:flex; align-items:center; gap:9px; width:100%; min-height:52px; padding:9px 11px; border:1.5px solid transparent; border-radius:13px; text-align:left; cursor:pointer;
  background:linear-gradient(var(--fill),var(--fill)) padding-box, conic-gradient(from var(--kk-ring-angle), #FF7043, #FFB59E 14%, #B3E5FC 32%, #4FB3E8 50%, #B3E5FC 68%, #FFB59E 86%, #FF7043) border-box;
  animation:kk-ring-spin 9s linear infinite; color:var(--kk-ink); font-size:12.5px; font-weight:700; line-height:1.4; }
.kk-store .kk-cm-launch:hover { --fill:var(--kk-secondary-50); }
.kk-store .kk-cm-spark { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; border-radius:8px; background:var(--kk-secondary-50); color:var(--kk-secondary-deep); font-size:14px; }

.kk-store .kk-assist.is-matching { gap:10px; }
/* Grid item: without this the nowrap pick titles widen the hero on phones. */
.kk-store .kk-assist { min-width:0; max-width:100%; }
.kk-store .kk-cm-pick { min-width:0; }
.kk-store .kk-cm-head { display:flex; align-items:center; gap:8px; }
.kk-store .kk-cm-head h2 { flex:1; margin:0; font-size:15px; font-weight:700; color:var(--kk-ink); outline:none; }
.kk-store .kk-cm-iconbtn { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; padding:0; border:1px solid var(--kk-line); border-radius:9px; background:#fff; color:var(--kk-ink); font-size:14px; cursor:pointer; }
.kk-store .kk-cm-iconbtn:hover { background:var(--kk-primary-50); }
.kk-store .kk-cm-progress { height:4px; border-radius:99px; background:#e6f1f8; overflow:hidden; }
.kk-store .kk-cm-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#FF7043,#4FB3E8); transition:width .25s ease; }
.kk-store .kk-cm-steplabel { margin:-4px 0 0; font-size:11.5px; color:var(--kk-muted); }
.kk-store .kk-cm-body { display:grid; gap:12px; align-content:start; animation:kk-cm-in .22s ease-out; }
@keyframes kk-cm-in { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }

.kk-store .kk-cm-field { margin:0; padding:0; border:0; min-width:0; }
.kk-store .kk-cm-field legend { margin:0 0 7px; padding:0; font-size:12.5px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-cm-field legend small { font-weight:400; color:var(--kk-muted); }
.kk-store .kk-cm-chips { display:flex; flex-wrap:wrap; gap:6px; }
.kk-store .kk-cm-chip { position:relative; display:inline-flex; margin:0; cursor:pointer; }
/* Real inputs, visually hidden but still focusable — keyboard and screen
   readers get native radio/checkbox behaviour. */
.kk-store .kk-cm-chip input { position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.kk-store .kk-cm-chip span { display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:6px 12px; border:1px solid var(--kk-line); border-radius:999px; background:#fff; font-size:12.5px; line-height:1.4; color:var(--kk-ink); transition:background .15s,border-color .15s; }
.kk-store .kk-cm-chip span svg { font-size:13px; }
.kk-store .kk-cm-chip:hover span { border-color:var(--kk-primary-200); background:var(--kk-primary-50); }
.kk-store .kk-cm-chip input:checked + span { border-color:var(--kk-primary-600); background:var(--kk-primary); color:var(--kk-primary-900); font-weight:600; }
.kk-store .kk-cm-chip input:focus-visible + span { outline:2px solid var(--kk-primary-600); outline-offset:2px; }
.kk-store .kk-cm-privacy { display:flex; gap:6px; align-items:flex-start; margin:0; font-size:11.5px; line-height:1.6; color:var(--kk-muted); }
.kk-store .kk-cm-privacy svg { flex-shrink:0; margin-top:2px; color:var(--kk-success); }

.kk-store .kk-cm-foot { display:flex; gap:8px; margin-top:auto; }
.kk-store .kk-cm-next { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; height:44px; padding:0 12px; border:0; border-radius:11px; background:var(--kk-secondary); color:#fff; font-size:14px; font-weight:700; cursor:pointer; }
.kk-store .kk-cm-next:hover { background:var(--kk-secondary-press); }
.kk-store .kk-cm-next[disabled] { background:#e4edf3; color:#8aa6b7; cursor:not-allowed; }
.kk-store .kk-cm-ghost { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 14px; border:1px solid var(--kk-line); border-radius:11px; background:#fff; color:var(--kk-ink); font-size:13px; font-weight:600; cursor:pointer; }
.kk-store .kk-cm-ghost:hover { background:var(--kk-primary-50); }

.kk-store .kk-cm-summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; font-size:12px; color:var(--kk-muted); }
.kk-store .kk-cm-summary b { padding:2px 8px; border-radius:6px; background:var(--kk-primary-50); color:var(--kk-primary-900); font-weight:600; }
.kk-store .kk-cm-summary button { margin-left:auto; padding:0; border:0; background:transparent; color:var(--kk-primary-700); font-size:12px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.kk-store .kk-cm-picks { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.kk-store .kk-cm-pick { padding:9px 10px; border:1px solid var(--kk-line); border-radius:13px; background:#fff; }
.kk-store .kk-cm-pick.is-top { border-color:var(--kk-primary-200); background:var(--kk-primary-50); }
.kk-store .kk-cm-badge { display:inline-flex; margin-bottom:3px; padding:1px 7px; border-radius:6px; font-size:10.5px; font-weight:700; background:var(--kk-primary); color:var(--kk-primary-900); }
.kk-store .kk-cm-badge.is-value { background:var(--kk-accent); color:var(--kk-accent-ink); }
.kk-store .kk-cm-badge.is-also { background:#eef6fb; color:var(--kk-muted); }
.kk-store .kk-cm-pick-body { display:flex; align-items:center; gap:10px; }
.kk-store .kk-cm-pick-body img { width:52px; height:52px; flex-shrink:0; border-radius:9px; object-fit:cover; }
.kk-store .kk-cm-pick-body > div { flex:1; min-width:0; }
.kk-store .kk-cm-pick-body a { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; line-height:1.5; color:var(--kk-ink); }
.kk-store .kk-cm-pick-body a:hover { color:var(--kk-primary-700); }
.kk-store .kk-cm-pick-body small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; line-height:1.5; color:var(--kk-muted); }
.kk-store .kk-cm-pick-body b { flex-shrink:0; font-size:14px; font-weight:800; color:var(--kk-primary-700); }
.kk-store .kk-cm-empty { padding:14px; border-radius:12px; background:var(--kk-primary-50); font-size:13px; line-height:1.7; color:var(--kk-primary-900); }
.kk-store .kk-cm-note { margin:0; font-size:11px; line-height:1.6; color:var(--kk-muted); }
@media(prefers-reduced-motion:reduce){ .kk-store .kk-cm-body { animation:none; } .kk-store .kk-cm-progress span { transition:none; } .kk-store .kk-cm-launch { animation:none; } }
@layer premium {
  .kk-store .kk-cm-pick-body a,.kk-store .kk-cm-pick-body a:visited { color:var(--kk-ink)!important; }
  .kk-store .kk-cm-pick-body a:hover { color:var(--kk-primary-700)!important; }
  .kk-store .kk-cm-chip input:focus-visible { outline:none!important; }
  .kk-store .kk-cm-next[disabled] { background:#e4edf3!important; color:#8aa6b7!important; opacity:1!important; }
  /* legacy list rules add a margin to every <li> */
  .kk-store .kk-cm-picks > li { margin:0!important; }
}

/* ---------- account (overview / bookings / addresses / settings) ---------- */
.kk-store .kk-account { padding:28px 0 72px; }
.kk-store .kk-account .kk-page-heading { margin-bottom:26px; }
.kk-store .kk-acc-grid { display:grid; grid-template-columns:272px minmax(0,1fr); gap:28px; align-items:start; }
.kk-store .kk-acc-main { min-width:0; }
.kk-store .kk-acc-stack { display:grid; gap:18px; }

/* The side nav carries the page's one travelling ring. */
.kk-store .kk-acc-nav { position:sticky; top:96px; display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:20px; border:1.5px solid transparent; background:linear-gradient(#fff,#fff) padding-box, conic-gradient(from var(--kk-ring-angle), #FF7043, #FFB59E 14%, #B3E5FC 32%, #4FB3E8 50%, #B3E5FC 68%, #FFB59E 86%, #FF7043) border-box; animation:kk-ring-spin 9s linear infinite; }
.kk-store .kk-acc-id { display:flex; align-items:center; gap:12px; padding:4px 4px 14px; margin-bottom:6px; border-bottom:1px solid var(--kk-line); }
.kk-store .kk-acc-id > div { min-width:0; }
.kk-store .kk-acc-avatar { display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; border-radius:14px; background:var(--kk-primary); color:var(--kk-primary-900); font-size:17px; font-weight:700; }
.kk-store .kk-acc-id b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; color:var(--kk-ink); }
.kk-store .kk-acc-id small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--kk-muted); }
.kk-store .kk-acc-links { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.kk-store .kk-acc-links a { display:flex; align-items:center; gap:11px; min-height:44px; padding:0 12px; border-radius:12px; font-size:14px; font-weight:500; }
.kk-store .kk-acc-links a svg { flex-shrink:0; font-size:18px; color:var(--kk-muted); }
.kk-store .kk-acc-links a:hover { background:var(--kk-primary-50); }
.kk-store .kk-acc-links a.is-active { background:var(--kk-primary); font-weight:700; }
.kk-store .kk-acc-links a.is-active svg { color:var(--kk-primary-900); }
.kk-store .kk-acc-sep { display:block; height:1px; margin:6px 4px; background:var(--kk-line); }
.kk-store .kk-acc-logout { display:flex; align-items:center; gap:11px; width:100%; min-height:44px; padding:0 12px; border:0; border-radius:12px; background:transparent; font-size:14px; color:var(--kk-muted); text-align:left; cursor:pointer; }
.kk-store .kk-acc-logout svg { flex-shrink:0; font-size:18px; }
.kk-store .kk-acc-logout:hover { background:var(--kk-secondary-50); color:var(--kk-secondary-press); }

.kk-store .kk-acc-card { padding:20px 22px; border:1px solid var(--kk-line); border-radius:18px; background:#fff; }
.kk-store .kk-acc-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.kk-store .kk-acc-card-head h2 { margin:0; font-size:17px; font-weight:700; line-height:1.5; color:var(--kk-ink); }
.kk-store .kk-acc-card-head p { margin:2px 0 0; font-size:13px; line-height:1.7; color:var(--kk-muted); }
.kk-store .kk-acc-card-head > a { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:13px; font-weight:600; }

.kk-store .kk-acc-alert { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px; background:var(--kk-accent); border:1px solid var(--kk-accent-line); color:var(--kk-accent-ink); font-size:13.5px; }
.kk-store .kk-acc-alert > svg { flex-shrink:0; font-size:18px; }
.kk-store .kk-acc-alert p { flex:1; margin:0; line-height:1.7; }
.kk-store .kk-acc-alert a { white-space:nowrap; font-weight:700; }

.kk-store .kk-acc-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.kk-store .kk-acc-stat { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; align-items:center; padding:16px 18px; border:1px solid var(--kk-line); border-radius:16px; background:#fff; }
.kk-store .kk-acc-stat > span { grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--kk-primary-50); color:var(--kk-primary-700); font-size:20px; }
.kk-store .kk-acc-stat b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px; font-weight:800; line-height:1.35; color:var(--kk-ink); }
.kk-store .kk-acc-stat b em { font-style:normal; font-size:14px; font-weight:600; color:var(--kk-muted); }
.kk-store .kk-acc-stat small { font-size:12.5px; color:var(--kk-muted); }

.kk-store .kk-acc-booking { display:flex; align-items:center; gap:16px; padding:14px 16px; border:1px solid #e3f0f7; border-radius:14px; background:var(--kk-surface); }
.kk-store .kk-acc-booking:hover { border-color:var(--kk-primary-200); background:var(--kk-primary-50); }
.kk-store .kk-acc-booking-no { display:grid; place-items:center; min-width:54px; height:54px; padding:0 8px; flex-shrink:0; border:1px solid var(--kk-line); border-radius:14px; background:#fff; font-size:15px; font-weight:800; color:var(--kk-primary-700); }
.kk-store .kk-acc-booking-info { flex:1; min-width:0; }
.kk-store .kk-acc-booking-info b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14.5px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-acc-booking-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--kk-muted); }
.kk-store .kk-acc-booking-total { flex-shrink:0; text-align:right; }
.kk-store .kk-acc-booking-total small { display:block; font-size:11.5px; color:var(--kk-muted); }
.kk-store .kk-acc-booking-total b { font-size:16px; font-weight:800; color:var(--kk-primary-700); }
.kk-store .kk-acc-booking > svg { flex-shrink:0; color:var(--kk-muted); }

.kk-store .kk-acc-quick { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.kk-store .kk-acc-quick a { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:16px; border:1px solid var(--kk-line); border-radius:14px; }
.kk-store .kk-acc-quick a:hover { border-color:var(--kk-primary-200); background:var(--kk-primary-50); }
.kk-store .kk-acc-quick a > span { display:grid; place-items:center; width:38px; height:38px; margin-bottom:6px; border-radius:11px; background:var(--kk-primary-50); color:var(--kk-primary-700); font-size:18px; }
.kk-store .kk-acc-quick b { font-size:14px; font-weight:700; color:var(--kk-ink); }
.kk-store .kk-acc-quick small { font-size:12px; line-height:1.6; color:var(--kk-muted); }

.kk-store .kk-acc-empty { display:grid; justify-items:center; gap:8px; padding:30px 20px; border-radius:14px; background:var(--kk-surface); text-align:center; }
.kk-store .kk-acc-empty > span { display:grid; place-items:center; width:54px; height:54px; margin-bottom:4px; border-radius:16px; background:var(--kk-primary); color:var(--kk-primary-900); font-size:24px; }
.kk-store .kk-acc-empty h3 { margin:0; font-size:16px; font-weight:700; color:var(--kk-ink); }
.kk-store .kk-acc-empty p { max-width:44ch; margin:0 0 8px; font-size:13px; line-height:1.7; color:var(--kk-muted); }

.kk-store .kk-acc-toast { display:flex; align-items:center; gap:8px; margin:0; padding:10px 14px; border-radius:12px; background:var(--kk-success-bg); color:var(--kk-success); font-size:13.5px; font-weight:500; line-height:1.6; }
.kk-store .kk-acc-card .kk-acc-toast { margin-bottom:14px; }
.kk-store .kk-acc-card .kk-acc-toast--below { margin:12px 0 0; }
.kk-store .kk-acc-toast svg { flex-shrink:0; }
.kk-store .kk-acc-toast.is-error { background:#fff3ee; color:#9c3a12; }

.kk-store .kk-acc-dl { display:grid; margin:0; }
.kk-store .kk-acc-dl > div { display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; padding:14px 0; border-top:1px solid #edf4f8; }
.kk-store .kk-acc-dl > div:first-child { padding-top:4px; border-top:0; }
.kk-store .kk-acc-dl dt { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:var(--kk-muted); }
.kk-store .kk-acc-dl dt svg { flex-shrink:0; font-size:16px; }
.kk-store .kk-acc-dl dd { margin:0; overflow-wrap:anywhere; font-size:14.5px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-acc-dl dd small { display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--kk-muted); }
.kk-store .kk-acc-missing { font-weight:500; color:var(--kk-secondary-press); }

.kk-store .kk-acc-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid #e3f0f7; border-radius:14px; background:var(--kk-surface); }
.kk-store .kk-acc-row-icon { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border:1px solid var(--kk-line); border-radius:11px; background:#fff; color:var(--kk-primary-700); font-size:18px; }
.kk-store .kk-acc-row > div { flex:1; min-width:0; }
.kk-store .kk-acc-row b { display:block; font-size:14.5px; color:var(--kk-ink); }
.kk-store .kk-acc-row small { display:block; overflow-wrap:anywhere; font-size:12.5px; line-height:1.6; color:var(--kk-muted); }
.kk-store .kk-acc-row small strong { font-weight:600; color:var(--kk-ink); }
.kk-store .kk-acc-tip { display:flex; gap:8px; margin:14px 0 0; font-size:12.5px; line-height:1.7; color:var(--kk-muted); }
.kk-store .kk-acc-tip svg { flex-shrink:0; margin-top:3px; color:var(--kk-success); }

.kk-store .kk-acc-form { display:grid; gap:16px; }
.kk-store .kk-acc-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.kk-store .kk-acc-form-grid > .is-wide { grid-column:1 / -1; }
.kk-store .kk-auth-control select { width:100%; height:48px; padding:0 40px 0 14px; border:1px solid var(--kk-line); border-radius:12px; background:#fff; font-size:15px; color:var(--kk-ink); appearance:none; -webkit-appearance:none; outline:none; cursor:pointer; }
.kk-store .kk-auth-control select:hover { border-color:var(--kk-primary-200); }
.kk-store .kk-auth-control select:focus { border-color:var(--kk-primary-600); }
.kk-store .kk-auth-field.has-error .kk-auth-control select { border-color:#e3a58e; }
.kk-store .kk-select-caret { position:absolute; right:14px; font-size:16px; color:#8aa6b7; pointer-events:none; }

/* Buttons for account + dialogs */
.kk-store .kk-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; height:46px; padding:0 20px; border:0; border-radius:12px; background:var(--kk-secondary); color:#fff; font-size:14.5px; font-weight:700; white-space:nowrap; cursor:pointer; }
.kk-store .kk-btn-primary:hover { background:var(--kk-secondary-press); }
.kk-store .kk-btn-primary[disabled] { background:#e4edf3; color:#8aa6b7; cursor:wait; }
.kk-store .kk-btn-quiet { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto; height:42px; padding:0 16px; border:1px solid #cfe7f5; border-radius:11px; background:var(--kk-primary-50); color:var(--kk-primary-900); font-size:13.5px; font-weight:600; white-space:nowrap; cursor:pointer; }
.kk-store .kk-btn-quiet:hover { background:var(--kk-primary-100); border-color:var(--kk-primary-200); }
.kk-store .kk-btn-quiet[disabled] { color:#8aa6b7; cursor:wait; }
.kk-store .kk-btn-danger { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto; height:42px; padding:0 18px; border:0; border-radius:11px; background:var(--kk-secondary-press); color:#fff; font-size:13.5px; font-weight:700; white-space:nowrap; cursor:pointer; }
.kk-store .kk-btn-danger:hover { background:#BF360C; }
.kk-store .kk-btn-danger[disabled] { background:#e4edf3; color:#8aa6b7; cursor:wait; }
.kk-store .kk-icon-btn { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; padding:0; border:1px solid var(--kk-line); border-radius:10px; background:#fff; color:var(--kk-ink); font-size:16px; cursor:pointer; }
.kk-store .kk-icon-btn:hover { background:var(--kk-primary-50); border-color:var(--kk-primary-200); }
.kk-store .kk-icon-btn.is-danger:hover { background:var(--kk-secondary-50); border-color:#ffc9b5; color:var(--kk-secondary-press); }

/* Addresses */
.kk-store .kk-addr-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.kk-store .kk-addr-card { display:flex; flex-direction:column; gap:8px; min-height:180px; padding:16px 18px; border:1px solid var(--kk-line); border-radius:16px; background:#fff; }
.kk-store .kk-addr-card header { display:flex; align-items:center; gap:8px; }
.kk-store .kk-addr-tag { display:inline-flex; align-items:center; gap:6px; min-width:0; padding:4px 10px; border-radius:8px; background:var(--kk-primary-50); color:var(--kk-primary-900); font-size:13px; font-weight:700; }
.kk-store .kk-addr-default { padding:3px 8px; border-radius:7px; background:var(--kk-accent); color:var(--kk-accent-ink); font-size:11px; font-weight:700; }
.kk-store .kk-addr-actions { display:flex; gap:6px; margin-left:auto; }
.kk-store .kk-addr-name { margin:4px 0 0; font-size:14.5px; color:var(--kk-ink); }
.kk-store .kk-addr-name b { font-weight:700; }
.kk-store .kk-addr-name span { color:var(--kk-muted); }
.kk-store .kk-addr-lines { margin:0; font-size:13.5px; line-height:1.75; color:#3d5a6c; }
.kk-store .kk-addr-phone { display:flex; align-items:center; gap:6px; margin:auto 0 0; padding-top:10px; border-top:1px dashed #e3eef5; font-size:13px; color:var(--kk-muted); }
.kk-store .kk-addr-add { display:grid; place-items:center; align-content:center; gap:4px; width:100%; min-height:180px; padding:16px; border:1.5px dashed var(--kk-primary-200); border-radius:16px; background:var(--kk-surface); color:var(--kk-ink); text-align:center; cursor:pointer; }
.kk-store .kk-addr-add > span { display:grid; place-items:center; width:46px; height:46px; margin-bottom:6px; border-radius:13px; background:var(--kk-secondary-50); color:var(--kk-secondary-deep); font-size:22px; }
.kk-store .kk-addr-add b { font-size:14.5px; font-weight:700; }
.kk-store .kk-addr-add small { font-size:12px; color:var(--kk-muted); }
.kk-store .kk-addr-add:hover { border-color:var(--kk-primary-600); background:var(--kk-primary-50); }

/* Dialog */
.kk-store .kk-modal-root { position:fixed; inset:0; z-index:1300; display:flex; align-items:flex-start; justify-content:center; padding:clamp(16px,7vh,80px) 16px 16px; }
.kk-store .kk-modal-scrim { position:fixed; inset:0; background:#0e355066; backdrop-filter:blur(3px); animation:kk-modal-fade .18s ease-out; }
.kk-store .kk-modal { position:relative; display:flex; flex-direction:column; width:100%; max-width:600px; max-height:calc(100vh - clamp(32px,14vh,160px)); border-radius:20px; background:#fff; box-shadow:0 30px 80px #0e355033; outline:none; overflow:hidden; animation:kk-modal-in .24s cubic-bezier(.2,.8,.2,1); }
.kk-store .kk-modal.is-sm { max-width:440px; }
.kk-store .kk-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px 16px; border-bottom:1px solid #edf4f8; }
.kk-store .kk-modal-head h2 { margin:0; font-size:18px; font-weight:700; line-height:1.45; color:var(--kk-ink); text-transform:none; }
.kk-store .kk-modal-head p { margin:3px 0 0; font-size:13px; line-height:1.7; color:var(--kk-muted); }
.kk-store .kk-modal-close { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; padding:0; border:1px solid var(--kk-line); border-radius:10px; background:#fff; color:var(--kk-ink); font-size:16px; cursor:pointer; }
.kk-store .kk-modal-close:hover { background:var(--kk-primary-50); }
.kk-store .kk-modal-body { flex:1; min-height:0; overflow-y:auto; padding:18px 6px 22px; }
.kk-store .kk-modal-pad { padding:0 16px; }
.kk-store .kk-modal-text { margin:0 0 20px; font-size:14px; line-height:1.8; color:#3d5a6c; }
.kk-store .kk-modal-text b { color:var(--kk-ink); }
.kk-store .kk-modal-actions { display:flex; justify-content:flex-end; gap:10px; }
@keyframes kk-modal-in { from { opacity:0; transform:translateY(14px) scale(.98) } to { opacity:1; transform:none } }
@keyframes kk-modal-fade { from { opacity:0 } to { opacity:1 } }
@media(prefers-reduced-motion:reduce){ .kk-store .kk-acc-nav,.kk-store .kk-modal,.kk-store .kk-modal-scrim { animation:none; } }

@media(max-width:991px){
  /* minmax(0,…): the nowrap tab row must scroll, not widen the page */
  .kk-store .kk-acc-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .kk-store .kk-acc-nav { min-width:0; position:static; flex-direction:row; align-items:center; gap:6px; padding:6px; border-radius:16px; }
  .kk-store .kk-acc-id,.kk-store .kk-acc-sep { display:none; }
  .kk-store .kk-acc-links { display:flex; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
  .kk-store .kk-acc-links::-webkit-scrollbar { display:none; }
  .kk-store .kk-acc-links a { min-height:40px; white-space:nowrap; }
  .kk-store .kk-acc-logout { width:40px; min-height:40px; flex-shrink:0; justify-content:center; padding:0; }
  .kk-store .kk-acc-logout span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media(max-width:767px){
  .kk-store .kk-account { padding:18px 0 48px; }
  .kk-store .kk-acc-stats,.kk-store .kk-acc-quick,.kk-store .kk-addr-grid,.kk-store .kk-acc-form-grid { grid-template-columns:minmax(0,1fr); }
  .kk-store .kk-acc-card { padding:16px; }
  .kk-store .kk-acc-dl > div { grid-template-columns:1fr; gap:4px; }
  .kk-store .kk-acc-booking { flex-wrap:wrap; }
  .kk-store .kk-acc-booking-info { flex-basis:calc(100% - 70px); }
  .kk-store .kk-acc-booking-total { margin-left:70px; text-align:left; }
  .kk-store .kk-acc-row { flex-wrap:wrap; }
  .kk-store .kk-acc-row .kk-btn-quiet { width:100%; }
  .kk-store .kk-acc-card-head { flex-wrap:wrap; }
  .kk-store .kk-modal-root { align-items:flex-end; padding:0; }
  .kk-store .kk-modal { max-width:none; max-height:92vh; border-radius:20px 20px 0 0; }
  .kk-store .kk-modal-actions > * { flex:1; }
}

@layer premium {
  .kk-store .kk-acc-links a,.kk-store .kk-acc-booking,.kk-store .kk-acc-quick a { color:var(--kk-ink)!important; text-decoration:none!important; }
  .kk-store .kk-acc-links a.is-active { color:var(--kk-primary-900)!important; }
  .kk-store .kk-acc-card-head > a { color:var(--kk-primary-700)!important; text-decoration:none!important; }
  .kk-store .kk-acc-alert a { color:var(--kk-accent-ink)!important; text-decoration:underline!important; text-underline-offset:3px; }
  .kk-store a.kk-btn-primary { color:#fff!important; text-decoration:none!important; }
  .kk-store .kk-auth-control select:focus-visible { outline:none!important; }
}

/* Breadcrumb: the wrapper's flex gap already spaces the items, so the "/" only
   needs space on its right — otherwise it sits 16px from the left crumb and 8px
   from the right one. */
@layer premium {
  /* legacy style.css sets gap:25px on wide screens */
  .kk-store .navigator-breadcrumb-wrapper { gap:8px!important; }
  .kk-store .navigator-breadcrumb-wrapper .sep { margin:0 8px 0 0!important; }
}

/* Image logo (bunny + wordmark, ~2.06:1). Height drives the size everywhere. */
.kk-store .kk-hd-logo img { display:block; width:auto; max-width:none; height:76px; }
.kk-store .kk-hd-footer-about .kk-hd-logo img { height:92px; }
.kk-store .kk-auth-top .kk-hd-logo img { height:58px; }
.koomkaa-mnav__logo img,.koomkaa-drawer__logo { height:40px!important; width:auto!important; }
@media(max-width:991px){ .kk-store .kk-hd-logo img { height:58px; } }
@media(max-width:420px){ .kk-store .kk-hd-logo img { height:54px; } }

/* ---------- phone header: logo + search on one row ----------
   Account and categories live in the bottom tab bar, so the top row only
   carries the brand and search. */
.kk-store .kk-hd-search button i { display:none; }
@media(max-width:900px){
  .kk-store .kk-hd-bar { flex-wrap:nowrap; gap:10px; padding-block:10px; }
  .kk-store .kk-hd-actions,.kk-store .kk-hd-burger { display:none; }
  .kk-store .kk-hd-logo img { height:58px; }
  .kk-store .kk-hd-search { order:0; flex:1 1 auto; flex-basis:auto; height:46px; padding:0 5px 0 14px; }
  .kk-store .kk-hd-search-lead { display:none; }
  .kk-store .kk-hd-search input { height:40px; font-size:16px; } /* <16px makes iOS zoom */
  .kk-store .kk-hd-search button { display:grid; place-items:center; width:36px; height:36px; padding:0; border-radius:50%; font-size:15px; }
  .kk-store .kk-hd-search button i { display:block; }
  .kk-store .kk-hd-search button span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .kk-store .kk-tabbar button { width:auto; }
}
@media(max-width:380px){ .kk-store .kk-hd-logo img { height:50px; } }
@layer premium {
  @media(max-width:900px){
    /* global touch-target and button resets were stretching the round button */
    .kk-store .kk-hd-search button { width:36px!important; height:36px!important; min-height:0!important; min-width:0!important; padding:0!important; line-height:1!important; }
    .kk-store .kk-hd-search input { font-size:16px!important; }
  }
}

/* ---------- category sheet (opened from the "หมวดหมู่" tab) ---------- */
.kk-store .kk-cat-sheet { padding-top:16px; }
.kk-store .kk-drawer-head strong { font-size:17px; font-weight:700; color:var(--kk-ink); }
.kk-store .kk-drawer-head button { display:grid; place-items:center; }
.kk-store .kk-cat-sheet-all { display:flex; align-items:center; gap:10px; margin:14px 0 6px; padding:12px 14px; border-radius:14px; background:var(--kk-primary); color:var(--kk-primary-900); font-size:14px; font-weight:700; }
.kk-store .kk-cat-sheet-all svg:last-child { margin-left:auto; }
.kk-store .kk-cat-sheet-list { list-style:none; margin:0; padding:0; }
.kk-store .kk-cat-sheet-list > li { margin:0; padding:12px 0; border-bottom:1px solid #eef6fb; }
.kk-store .kk-cat-sheet-main { display:flex; align-items:center; gap:12px; color:var(--kk-ink); }
.kk-store .kk-cat-sheet-art { display:grid; place-items:center; width:52px; height:52px; flex-shrink:0; border-radius:14px; background:var(--kk-primary-50); overflow:hidden; color:var(--kk-primary-700); font-size:20px; }
.kk-store .kk-cat-sheet-art .kk-cat-art { width:46px; height:46px; object-fit:contain; }
.kk-store .kk-cat-sheet-name { flex:1; min-width:0; }
.kk-store .kk-cat-sheet-name b { display:block; font-size:14.5px; font-weight:700; }
.kk-store .kk-cat-sheet-name small { display:block; font-size:12px; color:var(--kk-muted); }
.kk-store .kk-cat-sheet-main > svg { flex-shrink:0; color:var(--kk-muted); }
.kk-store .kk-cat-sheet-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0 64px; }
.kk-store .kk-cat-sheet-chips a { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid var(--kk-line); border-radius:999px; background:#fff; font-size:12.5px; color:var(--kk-ink); }
.kk-store .kk-cat-sheet-chips a:hover { border-color:var(--kk-primary-200); background:var(--kk-primary-50); }
.kk-store .kk-drawer-links a svg { margin-left:auto; color:var(--kk-muted); }
@media(max-width:900px){
  /* Bottom sheet on phones — it rises from the tab that opened it. */
  .kk-store .kk-drawer-panel { inset:auto 0 0 0; width:100%; max-height:86vh; border-radius:22px 22px 0 0; animation:kk-sheet-up .26s cubic-bezier(.2,.8,.2,1); }
  .kk-store .kk-drawer { animation:kk-modal-fade .18s ease-out; }
}
@keyframes kk-sheet-up { from { transform:translateY(100%) } to { transform:none } }
@media(prefers-reduced-motion:reduce){ .kk-store .kk-drawer-panel,.kk-store .kk-drawer { animation:none; } }
@layer premium {
  .kk-store .kk-cat-sheet-all { color:var(--kk-primary-900)!important; text-decoration:none!important; }
  .kk-store .kk-cat-sheet-main,.kk-store .kk-cat-sheet-chips a { color:var(--kk-ink)!important; text-decoration:none!important; }
}

/* Carousel dots. The theme's mobile rule (ekomart-overrides.css:
   `.ekomart-root button:not(.nav-link) { min-height:44px }`) turned each 4px
   bar into a 44px-tall white capsule. The button is now a transparent 24px
   tap target (WCAG 2.5.8 minimum) and the bar is drawn inside it. */
.kk-store .kk-promo-dots { bottom:6px; gap:4px; }
.kk-store .kk-promo-dots button { position:relative; width:26px; height:24px; background:transparent; }
.kk-store .kk-promo-dots button::before { content:""; position:absolute; left:2px; right:2px; top:50%; height:4px; margin-top:-2px; border-radius:99px; background:#ffffff5c; transition:background .2s; }
.kk-store .kk-promo-dots button.is-active { width:34px; background:transparent; }
.kk-store .kk-promo-dots button.is-active::before { background:#fff; }
.kk-store .kk-promo-dots button:hover::before { background:#ffffffb3; }
@layer premium {
  .kk-store .kk-promo-dots button { min-height:0!important; min-width:0!important; height:24px!important; padding:0!important; background:transparent!important; }
  /* Same theme rule stretched every square icon button to 44px tall (32×44,
     36×44…). Each of these already sets its own size, ≥ the 24px minimum. */
  .kk-store :is(.kk-pkg-fav,.kk-cm-iconbtn,.kk-icon-btn,.kk-modal-close,.kk-acc-logout,.kk-drawer-head button,.kk-cart-remove,.kk-cm-summary button) { min-height:0!important; }
}

/* ---------- phone bottom bar: floating glass ----------
   Frosted, floats 10px off the edge, a thin orange → sky hairline border, and a
   sky "bubble" that springs to the active tab (index in --kk-tab). */
@media(max-width:900px){
  .kk-store .kk-tabbar { position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); inset-inline:10px; z-index:58;
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-flow:row; align-items:stretch; height:64px; padding:0 6px; border:0; border-radius:22px;
    background:linear-gradient(180deg,#ffffffcc,#edf8fec2); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
    box-shadow:0 14px 34px #0e355026, 0 2px 6px #0e355014, inset 0 1px 0 #ffffffe6; }
  .kk-store .kk-tabbar::before { content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg,#FFB59E,#B3E5FC 38%,#4FB3E8 62%,#FFB59E);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
  .kk-store .kk-tabbar-glow { position:absolute; top:7px; bottom:7px; left:6px; width:calc((100% - 12px) / 5); border-radius:16px; pointer-events:none;
    background:linear-gradient(135deg,#EDF8FE,#B3E5FC); box-shadow:inset 0 1px 0 #fff, 0 6px 14px #0288d129;
    transform:translateX(calc(var(--kk-tab, 0) * 100%)); transition:transform .42s cubic-bezier(.34,1.4,.5,1), opacity .2s; }
  .kk-store .kk-tabbar-glow.is-none { opacity:0; }
  .kk-store .kk-tabbar a { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:0; padding:0 2px; font-size:10.5px; font-weight:500; color:#4c7690; -webkit-tap-highlight-color:transparent; }
  .kk-store .kk-tabbar a svg { font-size:21px; transition:transform .18s ease, color .2s; }
  .kk-store .kk-tabbar a span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kk-store .kk-tabbar a:active svg { transform:scale(.86); }
  .kk-store .kk-tabbar a.is-active { color:var(--kk-primary-900); font-weight:700; }
  .kk-store .kk-tabbar a.is-active svg { color:var(--kk-primary-700); transform:translateY(-1px); }
  .kk-store .kk-tabbar a b { position:absolute; top:8px; left:calc(50% + 6px); transform:none; display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px;
    background:linear-gradient(135deg,#FF8A65,#FF7043); color:#fff; font-size:10px; font-weight:700; box-shadow:0 0 0 2px #fff, 0 3px 8px #ff704359; animation:kk-badge-pop .42s cubic-bezier(.34,1.6,.5,1); }
  /* Things that sit above the bar: it is now 64px tall, floating 10px up. */
  .kk-store .kk-hd-footer { padding-bottom:96px; }
  .kk-store .kk-cmp-tray { bottom:calc(82px + env(safe-area-inset-bottom)); }
  .kk-store .kk-product-premium .kk-mobile-booking { bottom:calc(82px + env(safe-area-inset-bottom)); }
  .kk-store .kk-product-premium { padding-bottom:130px; }
}
@keyframes kk-badge-pop { 0% { transform:scale(.3); opacity:0 } 100% { transform:scale(1); opacity:1 } }
@media(max-width:900px) and (prefers-reduced-motion:reduce){ .kk-store .kk-tabbar-glow,.kk-store .kk-tabbar a svg { transition:none; } .kk-store .kk-tabbar a b { animation:none; } }
@layer premium {
  @media(max-width:900px){
    .kk-store .kk-tabbar a,.kk-store .kk-tabbar a:visited { color:#4c7690!important; text-decoration:none!important; }
    .kk-store .kk-tabbar a.is-active { color:var(--kk-primary-900)!important; }
    .kk-store .kk-tabbar a:focus-visible { outline:2px solid var(--kk-primary-600)!important; outline-offset:-4px!important; border-radius:14px; }
  }
}

/* ---------- phones & tablets: search widens over the logo ----------
   On focus (and on hover where there is a mouse/trackpad) the search slides
   left across the logo while the logo fades back — the field gets the whole
   row for typing, and the brand returns when you leave. Desktop keeps both:
   its search is already wide. --kk-logo-w = logo height × 2.059 (its ratio). */
@media(max-width:900px){
  .kk-store .kk-hd-bar { --kk-logo-w:120px; }
  .kk-store .kk-hd-logo { position:relative; z-index:1; transition:opacity .28s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
  .kk-store .kk-hd-search { position:relative; z-index:2; transition:margin-left .42s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
  .kk-store .kk-hd-bar:has(.kk-hd-search:focus-within) .kk-hd-search { margin-left:calc(-1 * (var(--kk-logo-w) + 10px)); box-shadow:0 10px 26px #0e35501f; }
  .kk-store .kk-hd-bar:has(.kk-hd-search:focus-within) .kk-hd-logo { opacity:0; transform:translateX(-14px) scale(.9); pointer-events:none; }
}
@media(max-width:900px) and (hover:hover){
  .kk-store .kk-hd-bar:has(.kk-hd-search:hover) .kk-hd-search { margin-left:calc(-1 * (var(--kk-logo-w) + 10px)); box-shadow:0 10px 26px #0e35501f; }
  .kk-store .kk-hd-bar:has(.kk-hd-search:hover) .kk-hd-logo { opacity:0; transform:translateX(-14px) scale(.9); pointer-events:none; }
}
@media(max-width:420px){ .kk-store .kk-hd-bar { --kk-logo-w:112px; } }
@media(max-width:380px){ .kk-store .kk-hd-bar { --kk-logo-w:103px; } }
@media(max-width:900px) and (prefers-reduced-motion:reduce){ .kk-store .kk-hd-logo,.kk-store .kk-hd-search { transition:none; } }

/* ---------- category listing grid: columns per device ----------
   desktop ≥1200: 5 · iPad landscape (sidebar beside): 3 · iPad portrait: 3 ·
   phones: 2 with a compact card. Grid replaces bootstrap's 20% columns. */
@layer premium {
  .kk-store .shop-grid-sidebar-area .product-area-wrapper-shopgrid-list:not(.with-list) > .row { display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin:0!important; }
  .kk-store .shop-grid-sidebar-area .product-area-wrapper-shopgrid-list:not(.with-list) > .row > .kk-listing-cell { width:auto!important; max-width:none!important; flex:none!important; padding:0!important; margin:0!important; min-width:0; }
  @media(max-width:1199px){ .kk-store .shop-grid-sidebar-area .product-area-wrapper-shopgrid-list:not(.with-list) > .row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
  @media(max-width:767px){ .kk-store .shop-grid-sidebar-area .product-area-wrapper-shopgrid-list:not(.with-list) > .row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }
}
/* Phone card: tighter so two fit side by side without truncating the price. */
@media(max-width:767px){
  .kk-store .kk-listing-cell .kk-pkg { border-radius:14px; }
  .kk-store .kk-listing-cell .kk-pkg-media { aspect-ratio:1.18; }
  .kk-store .kk-listing-cell .kk-pkg-body { gap:5px; padding:9px 10px 10px; }
  .kk-store .kk-listing-cell .kk-pkg-chips { display:none; }
  .kk-store .kk-listing-cell .kk-pkg h3 { font-size:12.5px; line-height:1.55; min-height:39px; }
  .kk-store .kk-listing-cell .kk-pkg-meta { font-size:10.5px; gap:2px; }
  .kk-store .kk-listing-cell .kk-pkg-price { padding-top:7px; }
  .kk-store .kk-listing-cell .kk-pkg-price small { font-size:9.5px; }
  .kk-store .kk-listing-cell .kk-pkg-price b { font-size:16px; }
  .kk-store .kk-listing-cell .kk-pkg-actions { gap:6px; margin-top:8px; }
  .kk-store .kk-listing-cell .kk-pkg-actions .kk-pkg-btn,.kk-store .kk-listing-cell .kk-pkg-actions > * { min-height:34px; }
  .kk-store .kk-listing-cell .kk-pkg-fav { width:30px; height:30px; right:6px; top:6px; }
}

/* iPad landscape (992–1199): the filters now sit in a ~275px side column.
   The theme lays the filter boxes out in a row (made for a full-width band),
   which squeezed each to 128px — stack them and trim the padding. */
@layer premium {
  @media(min-width:992px) and (max-width:1199px){
    .kk-store .koomkaa-filters .sidebar-filter-main { flex-direction:column!important; flex-wrap:nowrap!important; gap:0!important; padding:16px!important; }
    .kk-store .koomkaa-filters .single-filter-box { width:100%!important; max-width:none!important; flex:none!important; margin:0 0 14px!important; }
    .kk-store .koomkaa-filters .single-filter-box .title { padding:10px 2px 10px!important; }
    .kk-store .koomkaa-filters .half-input-wrapper { gap:8px; }
    .kk-store .koomkaa-filters .half-input-wrapper .single { flex:1 1 0!important; min-width:0; }
    .kk-store .koomkaa-filters .filter-value-min-max { flex-wrap:wrap; gap:8px; }
  }
}


/* ============================================================================
   ช่องที่อยู่ไทยแบบค้นหาอัตโนมัติ (ThaiAddressFields) — checkout + บัญชีของฉัน
   ========================================================================== */
.kk-store .kk-thaddr { display:grid; gap:16px; }
.kk-store .kk-thaddr-search { position:relative; }
.kk-store .kk-thaddr-anchor { position:relative; }
.kk-store .kk-thaddr-hint { margin:6px 0 0; font-size:12px; line-height:1.6; color:var(--kk-muted); }
.kk-store .kk-thaddr-list { position:absolute; z-index:60; left:0; right:0; top:calc(100% + 4px); margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--kk-line); border-radius:12px; box-shadow:0 14px 36px #0e35501f; max-height:min(340px,55vh); overflow:auto; }
.kk-store .kk-thaddr-list[hidden] { display:none; }
.kk-store .kk-thaddr-option { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:8px 12px; border-radius:9px; cursor:pointer; color:var(--kk-ink); }
.kk-store .kk-thaddr-option[aria-selected="true"] { background:var(--kk-primary-100); }
.kk-store .kk-thaddr-option-text { display:flex; flex-direction:column; min-width:0; }
.kk-store .kk-thaddr-option-text b { font-size:14px; font-weight:600; line-height:1.5; }
.kk-store .kk-thaddr-option-text small { font-size:12px; line-height:1.5; color:var(--kk-muted); }
.kk-store .kk-thaddr-option mark { background:var(--kk-accent); color:inherit; border-radius:3px; padding:0 1px; }
.kk-store .kk-thaddr-zip { flex-shrink:0; padding:3px 8px; border-radius:7px; background:var(--kk-primary-50); color:var(--kk-primary-900); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.kk-store .kk-thaddr-empty { padding:12px; font-size:13px; line-height:1.6; color:var(--kk-muted); }
.kk-store .kk-thaddr-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.kk-store .kk-thaddr-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.kk-store .kk-thaddr-chips button { width:auto; min-height:44px; display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:6px 12px; border:1px solid var(--kk-line); border-radius:10px; background:#fff; color:var(--kk-ink); font-size:13px; font-weight:600; line-height:1.4; text-align:left; cursor:pointer; }
.kk-store .kk-thaddr-chips button small { font-size:12px; font-weight:400; color:var(--kk-muted); }
.kk-store .kk-thaddr-chips button:hover,
.kk-store .kk-thaddr-chips button:focus-visible { border-color:var(--kk-primary-600); background:var(--kk-primary-50); }
.kk-store .kk-thaddr-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.kk-store .kk-addr-line { display:block; }
@media (max-width:480px) {
  .kk-store .kk-thaddr-grid { grid-template-columns:1fr; }
}

/* หน้า checkout บังคับ padding:12px !important ให้ทุก input ผ่าน @layer premium
   (koomkaa-premium.css) — !important ที่อยู่ใน layer ชนะกฎนอก layer เสมอ
   ช่องค้นหาพื้นที่จึงไม่มีที่ให้ไอคอน ตัวอักษรตัวแรกโดนไอคอนทับ
   ต้องแก้ใน layer เดียวกันด้วย !important และ selector ที่เจาะจงกว่า */
@layer premium {
  .kk-store .kk-thaddr .kk-auth-control:has(> .kk-auth-icon) input {
    padding-left: 42px !important;
  }
}

/* ============================================================================
   การจองของฉัน — /user/orders และ /user/orders/[id]
   ========================================================================== */
.kk-store .kk-bk-count { margin:0 0 -6px; font-size:13px; color:var(--kk-muted); }
.kk-store .kk-bk-list { display:grid; gap:18px; }
.kk-store .kk-bk-card { border:1px solid var(--kk-line); border-radius:18px; background:#fff; overflow:hidden; }
.kk-store .kk-bk-head { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; padding:18px 22px; border-bottom:1px solid var(--kk-line); background:var(--kk-primary-50); }
.kk-store .kk-bk-id { display:flex; align-items:center; gap:14px; min-width:0; }
.kk-store .kk-bk-no { display:grid; place-items:center; min-width:52px; height:52px; padding:0 8px; flex-shrink:0; border:1px solid var(--kk-line); border-radius:14px; background:#fff; font-size:16px; font-weight:800; color:var(--kk-primary-900); font-variant-numeric:tabular-nums; }
.kk-store .kk-bk-id h2 { margin:0; font-size:17px; font-weight:700; line-height:1.45; color:var(--kk-ink); }
.kk-store .kk-bk-id p { margin:2px 0 0; font-size:13px; line-height:1.6; color:var(--kk-muted); }
.kk-store .kk-bk-chips { display:flex; flex-wrap:wrap; gap:8px; }
.kk-store .kk-bk-chip { display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:3px 12px; border:1px solid transparent; border-radius:999px; font-size:12.5px; font-weight:600; line-height:1.4; white-space:nowrap; }
.kk-store .kk-bk-chip::before { content:""; width:7px; height:7px; flex-shrink:0; border-radius:50%; background:currentColor; }
.kk-store .kk-bk-chip.is-warning { background:var(--kk-accent); border-color:var(--kk-accent-line); color:var(--kk-accent-ink); }
.kk-store .kk-bk-chip.is-info { background:var(--kk-primary-100); border-color:var(--kk-primary); color:var(--kk-primary-900); }
.kk-store .kk-bk-chip.is-success { background:var(--kk-success-bg); color:var(--kk-success); }
.kk-store .kk-bk-chip.is-danger { background:var(--kk-secondary-50); border-color:#ffd3c2; color:#b0431a; }
.kk-store .kk-bk-chip.is-neutral { background:var(--kk-surface); border-color:var(--kk-line); color:var(--kk-muted); }

.kk-store .kk-bk-provider { padding:18px 22px; }
.kk-store .kk-bk-provider + .kk-bk-provider { border-top:1px dashed var(--kk-line); }
.kk-store .kk-bk-provider-head { display:flex; align-items:center; justify-content:space-between; gap:10px 12px; flex-wrap:wrap; margin-bottom:14px; }
.kk-store .kk-bk-provider-name { display:flex; align-items:center; gap:10px; min-width:0; font-size:14.5px; font-weight:700; line-height:1.45; color:var(--kk-ink); }
.kk-store .kk-bk-provider-name small { display:block; font-size:12px; font-weight:500; color:var(--kk-muted); }
.kk-store .kk-bk-avatar { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; overflow:hidden; border:1px solid var(--kk-line); border-radius:10px; background:#fff; color:var(--kk-primary-700); object-fit:contain; }
.kk-store .kk-bk-avatar svg { width:18px; height:18px; }

.kk-store .kk-bk-items { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.kk-store .kk-bk-item { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:14px; }
.kk-store .kk-bk-thumb { display:block; width:64px; height:64px; border:1px solid var(--kk-line); border-radius:12px; background:var(--kk-surface); object-fit:cover; }
.kk-store .kk-bk-item-title { margin:0; font-size:14.5px; font-weight:600; line-height:1.5; color:var(--kk-ink); }
.kk-store .kk-bk-item-meta { display:flex; flex-wrap:wrap; gap:2px 14px; margin:3px 0 0; font-size:12.5px; line-height:1.6; color:var(--kk-muted); }
.kk-store .kk-bk-qty { font-weight:700; color:var(--kk-ink); }
.kk-store .kk-bk-price { margin:0; font-size:15px; font-weight:700; color:var(--kk-ink); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kk-store .kk-bk-method { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 0; padding:10px 14px; border-radius:11px; background:var(--kk-surface); font-size:13px; line-height:1.6; color:var(--kk-muted); }
.kk-store .kk-bk-method b { color:var(--kk-ink); font-weight:600; }
.kk-store .kk-bk-method > b { white-space:nowrap; font-variant-numeric:tabular-nums; }
.kk-store .kk-bk-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

.kk-store .kk-bk-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:16px 22px; border-top:1px solid var(--kk-line); }
.kk-store .kk-bk-total small { display:block; font-size:12px; color:var(--kk-muted); }
.kk-store .kk-bk-total b { font-size:21px; font-weight:800; line-height:1.3; color:var(--kk-primary-700); font-variant-numeric:tabular-nums; }

/* ความคืบหน้า: รับการจอง → ยืนยันนัดหมาย → เข้ารับบริการ */
.kk-store .kk-bk-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 18px; padding:0; list-style:none; }
.kk-store .kk-bk-step { position:relative; display:grid; justify-items:center; gap:6px; padding:0 4px; text-align:center; font-size:12.5px; line-height:1.5; color:var(--kk-muted); }
.kk-store .kk-bk-step::before { content:""; position:absolute; z-index:0; top:14px; left:-50%; width:100%; height:2px; background:var(--kk-line); }
.kk-store .kk-bk-step:first-child::before { display:none; }
.kk-store .kk-bk-step.is-done::before,
.kk-store .kk-bk-step.is-current::before { background:var(--kk-primary-600); }
.kk-store .kk-bk-dot { position:relative; z-index:1; display:grid; place-items:center; width:30px; height:30px; border:2px solid var(--kk-line); border-radius:50%; background:#fff; font-size:12.5px; font-weight:700; color:var(--kk-muted); }
.kk-store .kk-bk-dot svg { width:15px; height:15px; }
.kk-store .kk-bk-step.is-done .kk-bk-dot { border-color:var(--kk-primary-600); background:var(--kk-primary-600); color:#fff; }
.kk-store .kk-bk-step.is-current .kk-bk-dot { border-color:var(--kk-primary-600); color:var(--kk-primary-700); box-shadow:0 0 0 4px var(--kk-primary-100); }
.kk-store .kk-bk-step.is-done,
.kk-store .kk-bk-step.is-current { font-weight:600; color:var(--kk-ink); }
.kk-store .kk-bk-steps.is-canceled { opacity:.55; }

/* หน้ารายละเอียด */
.kk-store .kk-bk-back { display:inline-flex; align-items:center; gap:6px; width:max-content; font-size:13px; font-weight:600; }
.kk-store .kk-bk-back svg { transform:rotate(180deg); }
.kk-store .kk-bk-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0; padding:18px 22px; }
.kk-store .kk-bk-facts dt { margin:0 0 3px; font-size:12px; font-weight:500; color:var(--kk-muted); }
.kk-store .kk-bk-facts dd { margin:0; font-size:15px; font-weight:700; color:var(--kk-ink); font-variant-numeric:tabular-nums; }
.kk-store .kk-bk-facts dd.is-total { font-size:18px; color:var(--kk-primary-700); }
.kk-store .kk-bk-facts + .kk-bk-provider { border-top:1px solid var(--kk-line); padding-bottom:4px; }
.kk-store .kk-bk-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.kk-store .kk-bk-contact { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.kk-store .kk-bk-contact li { display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:14px; line-height:1.65; color:var(--kk-ink); overflow-wrap:anywhere; }
.kk-store .kk-bk-contact svg { width:18px; height:18px; margin-top:2px; color:var(--kk-primary-700); }
.kk-store .kk-bk-sum { display:grid; gap:10px; margin:0; }
.kk-store .kk-bk-sum > div { display:flex; justify-content:space-between; gap:12px; font-size:14px; }
.kk-store .kk-bk-sum dt { color:var(--kk-muted); }
.kk-store .kk-bk-sum dd { margin:0; font-weight:600; color:var(--kk-ink); font-variant-numeric:tabular-nums; }
.kk-store .kk-bk-sum > div.is-total { align-items:baseline; margin-top:4px; padding-top:12px; border-top:1px solid var(--kk-line); }
.kk-store .kk-bk-sum > div.is-total dt { font-weight:700; color:var(--kk-ink); }
.kk-store .kk-bk-sum > div.is-total dd { font-size:21px; font-weight:800; color:var(--kk-primary-700); }
.kk-store .kk-bk-note { margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--kk-muted); }

@media (max-width:760px) {
  .kk-store .kk-bk-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kk-store .kk-bk-split { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .kk-store .kk-bk-head, .kk-store .kk-bk-provider, .kk-store .kk-bk-foot, .kk-store .kk-bk-facts { padding-left:16px; padding-right:16px; }
  .kk-store .kk-bk-item { grid-template-columns:56px minmax(0,1fr); gap:12px; }
  .kk-store .kk-bk-thumb { width:56px; height:56px; }
  .kk-store .kk-bk-price { grid-column:2; text-align:left; }
  .kk-store .kk-bk-method { flex-direction:column; align-items:flex-start; gap:2px; }
  .kk-store .kk-bk-foot .kk-btn-quiet { width:100%; }
  .kk-store .kk-bk-step { font-size:12px; }
}

/* ลิงก์ในการ์ด: กฎเก่า `.ekomart-root a:not(.rts-btn)…` ทาสีลิงก์ทับทุกตัว ต้องแก้ใน layer */
@layer premium {
  .kk-store .kk-bk-item-title a { color:var(--kk-ink)!important; text-decoration:none!important; }
  .kk-store .kk-bk-item-title a:hover { color:var(--kk-primary-700)!important; text-decoration:underline!important; }
  .kk-store a.kk-bk-back { color:var(--kk-primary-700)!important; text-decoration:none!important; }
  .kk-store a.kk-btn-quiet { color:var(--kk-primary-900)!important; text-decoration:none!important; }
}

/* ---- checkout: payment method picker -------------------------------------- */
.kk-store .kk-pay-groups { display:flex; flex-direction:column; gap:18px; }
.kk-store .kk-pay-group-title { margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--kk-muted); }
/* Secondary methods are a picker, not a list: three to a row keeps the whole set on
   one screen instead of a tall column of near-identical rows. */
.kk-store .kk-pay-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
/* The primary methods (QR, card) carry a description and open a form, so they stay full width. */
.kk-store .kk-pay-grid[data-single] { grid-template-columns:minmax(0,1fr); }
@media (max-width:900px) { .kk-store .kk-pay-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .kk-store .kk-pay-grid { grid-template-columns:minmax(0,1fr); } }

.kk-store .kk-pay-option { display:block; cursor:pointer; border:1.5px solid var(--kk-line); border-radius:12px; background:#fff; padding:11px 12px; transition:border-color .16s, box-shadow .16s, background .16s; }
.kk-store .kk-pay-option:hover { border-color:var(--kk-primary-200); background:var(--kk-primary-50); }
.kk-store .kk-pay-option[data-selected] { border-color:var(--kk-primary-700); background:#fff; box-shadow:0 0 0 3px #e2f2fb; }
/* The whole tile is the control, so the focus ring belongs on the tile, not the input. */
.kk-store .kk-pay-option:focus-visible { outline:2px solid var(--kk-primary-700); outline-offset:2px; }
/* A method the cart cannot use (a missing phone number, say) must still read as a method. */
.kk-store .kk-pay-option[data-disabled] { opacity:.45; cursor:not-allowed; }

.kk-store .kk-pay-option-row { display:flex; align-items:center; gap:10px; }
.kk-store .kk-pay-icon { display:grid; place-items:center; border-radius:10px; flex-shrink:0; line-height:1; }
.kk-store .kk-pay-icon svg { display:block; }
/* Only the Thai banks fall back to a monogram — no public-domain logo exists for them. */
.kk-store .kk-pay-monogram { font-weight:800; letter-spacing:-.3px; line-height:1; }
/* Card network marks sit under the title at the weight of supporting text, not as
   another row of buttons competing with the method name. */
.kk-store .kk-pay-networks { display:inline-flex; align-items:center; gap:7px; margin-top:3px; color:#5b6b7a; }
.kk-store .kk-pay-option-text { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
/* Wallet names are long and the tiles are narrow — one clean line beats a wrap. */
.kk-store .kk-pay-option-title { font-size:13.5px; font-weight:600; color:var(--kk-ink); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kk-store .kk-pay-grid[data-single] .kk-pay-option-title { font-size:14px; white-space:normal; }
/* Long wallet names must truncate rather than push the tick out of the tile. */
.kk-store .kk-pay-option-hint { font-size:11.5px; color:var(--kk-muted); line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kk-store .kk-pay-option-check { flex-shrink:0; display:grid; place-items:center; width:20px; height:20px; color:var(--kk-primary-700); }
.kk-store .kk-pay-option-dot { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--kk-primary-200); }
/* In a three-across grid the empty radio dot is noise and eats width the name needs;
   the highlighted border already shows the selection, and the tick still appears. */
.kk-store .kk-pay-grid:not([data-single]) .kk-pay-option:not([data-selected]) .kk-pay-option-check { display:none; }

/* ---- checkout: card form -------------------------------------------------- */
.kk-store .kk-card-form { display:flex; flex-direction:column; gap:12px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--kk-line); }
.kk-store .kk-card-row { display:flex; gap:10px; }
.kk-store .kk-card-row > * { flex:1; min-width:0; }
.kk-store .kk-card-label { display:block; font-size:12px; font-weight:600; color:var(--kk-ink); margin-bottom:5px; }
.kk-store .kk-card-input { width:100%; height:44px; padding:0 13px; border:1.5px solid var(--kk-line); border-radius:10px; background:#fff; font-size:14px; color:var(--kk-ink); outline:none; transition:border-color .16s, box-shadow .16s; }
.kk-store .kk-card-input:focus { border-color:var(--kk-primary-700); box-shadow:0 0 0 3px #e2f2fb; }
.kk-store .kk-card-input::placeholder { color:#9aa8b5; }
.kk-store .kk-card-note { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--kk-muted); }

/* ---- checkout: PromptPay QR ----------------------------------------------- */
.kk-store .kk-qr-panel { display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px; border:1.5px solid var(--kk-line); border-radius:16px; background:#fff; margin-bottom:16px; }
.kk-store .kk-qr-panel img { width:230px; height:230px; object-fit:contain; }
.kk-store .kk-qr-title { font-size:14px; font-weight:650; color:var(--kk-ink); }
.kk-store .kk-qr-amount { font-size:22px; font-weight:750; color:var(--kk-ink); letter-spacing:-.5px; }
.kk-store .kk-qr-note { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--kk-muted); }
/* Reassures the customer the page is watching, instead of looking frozen. */
.kk-store .kk-qr-pulse { width:8px; height:8px; border-radius:50%; background:var(--kk-primary-700); animation:kk-qr-pulse 1.4s ease-in-out infinite; }
@keyframes kk-qr-pulse { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .kk-store .kk-qr-pulse { animation:none; opacity:.8; } }

/* Select styled to match .kk-auth-field inputs — the native control is kept so mobile
   gets its own picker, but the browser chrome arrow is replaced for consistency. */
.kk-store .kk-acc-select { width:100%; height:46px; padding:0 38px 0 14px; border:1.5px solid var(--kk-line); border-radius:10px; background:#fff; font-size:14px; color:var(--kk-ink); outline:none; appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7a89' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.kk-store .kk-acc-select:focus { border-color:var(--kk-primary-700); box-shadow:0 0 0 3px #e2f2fb; }
.kk-store .kk-auth-field.has-error .kk-acc-select { border-color:#d64545; }

/* ---- checkout: service options (step 02) ---------------------------------- */
.kk-store .kk-svc-groups { display:flex; flex-direction:column; gap:16px; }
/* Same small uppercase label as the payment groups, so both steps read as one form. */
.kk-store .kk-svc-seller-title { margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--kk-muted); }

.kk-store .kk-svc-select { position:relative; display:flex; width:100%; height:46px; align-items:center; justify-content:space-between; gap:10px; padding:0 14px; border:1.5px solid var(--kk-line); border-radius:12px; background:#fff; font-size:14px; color:var(--kk-ink); text-align:left; cursor:pointer; transition:border-color .16s, box-shadow .16s; }
.kk-store .kk-svc-select:hover { border-color:var(--kk-primary-200); }
.kk-store .kk-svc-select:focus-visible { outline:none; border-color:var(--kk-primary-700); box-shadow:0 0 0 3px #e2f2fb; }
.kk-store .kk-svc-select[data-placeholder] { color:var(--kk-muted); }
.kk-store .kk-svc-select[disabled] { opacity:.55; cursor:not-allowed; }

.kk-store .kk-svc-options { position:absolute; z-index:20; margin-top:6px; width:100%; max-height:280px; overflow:auto; border:1.5px solid var(--kk-line); border-radius:12px; background:#fff; box-shadow:0 12px 28px #0e355018; padding:4px; }
.kk-store .kk-svc-option { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:9px; font-size:14px; color:var(--kk-ink); cursor:pointer; }
.kk-store .kk-svc-option:hover,.kk-store .kk-svc-option[data-active="true"] { background:var(--kk-primary-50); }
.kk-store .kk-svc-option-price { font-size:13px; font-weight:600; color:var(--kk-primary-900); white-space:nowrap; }

/* Confirmed selection — reads as a receipt line, not another control. */
.kk-store .kk-svc-row { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1.5px solid #cfeafb; border-radius:12px; background:var(--kk-primary-50); }
.kk-store .kk-svc-row + .kk-svc-row { margin-top:8px; }
.kk-store .kk-svc-check { display:grid; place-items:center; width:20px; height:20px; flex-shrink:0; border-radius:50%; background:var(--kk-primary-700); color:#fff; font-size:11px; line-height:1; }
.kk-store .kk-svc-body { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.kk-store .kk-svc-seller { font-size:11px; color:var(--kk-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kk-store .kk-svc-name { font-size:13.5px; font-weight:600; color:var(--kk-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kk-store .kk-svc-price { font-size:13.5px; font-weight:650; color:var(--kk-ink); white-space:nowrap; flex-shrink:0; }
.kk-store .kk-svc-price[data-free] { color:var(--kk-primary-900); font-weight:600; }

/* 28px hit area with the icon at 14px: small enough not to shout, still tappable. */
.kk-store .kk-svc-remove { display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; padding:0; border:0; border-radius:8px; background:transparent; color:var(--kk-muted); cursor:pointer; transition:background .16s,color .16s; }
.kk-store .kk-svc-remove:hover { background:#fde8e8; color:#c0392b; }
.kk-store .kk-svc-remove:focus-visible { outline:2px solid #c0392b; outline-offset:1px; }

/* Collapsed summary once the step is done. */
.kk-store .kk-svc-summary { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--kk-line); border-radius:12px; background:#fff; }
.kk-store .kk-svc-summary + .kk-svc-summary { margin-top:8px; }

/* ---- checkout: contact details (step 01) ---------------------------------- */
.kk-store .kk-addr-summary { display:flex; flex-direction:column; gap:3px; }
.kk-store .kk-addr-name { font-size:14px; font-weight:650; color:var(--kk-ink); line-height:1.5; }
.kk-store .kk-addr-line { font-size:13px; color:var(--kk-muted); line-height:1.6; }

@layer premium {
  /* The address form inherited page-level rhythm — 16px grid gaps, 16px block
     margins and 48px inputs — which on a 3-4 row form reads as drifting apart
     rather than as one block. These are the checkout-only, tighter values. */
  .kk-store .kk-checkout-grid [data-testid="checkout-step-address"] form .grid { gap:12px!important; margin-block:12px!important; }
  .kk-store .kk-checkout-grid [data-testid="checkout-step-address"] .kk-auth-field > label { margin-bottom:5px!important; font-size:12.5px!important; }
  .kk-store .kk-checkout-grid [data-testid="checkout-step-address"] .kk-auth-control input,
  .kk-store .kk-checkout-grid [data-testid="checkout-step-address"] .kk-thaddr-grid input { min-height:0!important; height:44px!important; }
  .kk-store .kk-checkout-grid [data-testid="checkout-step-address"] .kk-form-intro { margin-bottom:14px!important; }
  /* The hint under the area search was sitting a full line away from the field. */
  .kk-store .kk-checkout-grid [data-testid="checkout-step-address"] .kk-thaddr-hint { margin-top:5px!important; }
  .kk-store .kk-checkout-grid [data-testid="checkout-step-address"] .kk-thaddr-grid { gap:12px!important; margin-top:12px!important; }
}