/* 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; }
/* The heart on a card's photograph. Glass rather than a white disc: the photograph is the
   card's whole first impression and an opaque circle punched a hole in it. Frosted, with a
   hairline of light and a shadow under the stroke, it reads on a pale corridor and a dark
   scan alike without covering either. */
.kk-store .kk-pkg-fav { position:absolute; right:8px; top:8px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid #ffffff73; background:#ffffff40; -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3); color:#fff; font-size:13px; cursor:pointer; padding:0; box-shadow:0 2px 10px #0e35501f; transition:background .16s ease, transform .16s ease, color .16s ease; }
.kk-store .kk-pkg-fav svg { filter:drop-shadow(0 1px 2px #0e355073); }
.kk-store .kk-pkg-fav:hover { background:#ffffff8c; transform:scale(1.06); }
.kk-store .kk-pkg-fav:active { transform:scale(.96); }
/* Saved: the glass fills and the heart turns the brand's accent — the one state that
   should be unmistakable at a glance across a whole grid. */
.kk-store .kk-pkg-fav[aria-pressed="true"] { background:#fffffff2; border-color:#ffffff; color:var(--kk-secondary-deep); }
.kk-store .kk-pkg-fav[aria-pressed="true"] svg { filter:none; }
.kk-store .kk-pkg-fav:focus-visible { outline:2px solid #fff; outline-offset:2px; }
/* Blur is expensive over dozens of moving cards; a browser that cannot do it gets a
   slightly stronger tint so the heart still sits on something. */
@supports not (backdrop-filter:blur(1px)) { .kk-store .kk-pkg-fav { background:#ffffff8c; } }
.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; }
/* Hover: the card lifts a touch. No shadow — the lift alone says "this is a link". */
.kk-store .kk-provider-card:hover { color:var(--kk-ink); transform:translateY(-4px); }
@media (prefers-reduced-motion:reduce) { .kk-store .kk-provider-card:hover { transform:none; } }
.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; transition:border-color .16s ease, box-shadow .16s ease; }
.kk-store .kk-directory-search i { color:#087b87; font-size:20px; flex-shrink:0; }
/* `width:100%` made the field as wide as the whole row, on top of the icon and the gap
   beside it, so it hung past the rounded edge — and the browser's own focus ring drew
   around that true width, which is the square that appeared to escape the pill. */
.kk-store .kk-directory-search input { flex:1 1 auto; width:auto; min-width:0; border:0; height:60px; background:transparent; margin:0; padding:0; box-shadow:none; font-size:16px; }
/* One focus ring, on the pill, in the pill's own shape. The field inside gives up its own
   so the two cannot disagree about where the control's edge is. */
.kk-store .kk-directory-search input:focus,
.kk-store .kk-directory-search input:focus-visible { outline:none; box-shadow:none; }
.kk-store .kk-directory-search:focus-within { outline:0; border-color:#087b87; box-shadow:0 0 0 4px #087b871f, 0 6px 20px #153f5010; }
.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; }
}

/* ---------- checkout step 03 · appointment ---------- */
/* The clinic's diary as a two-week strip plus the chosen day's times. A month grid was
   tried first and read as "browse the calendar"; the strip reads as "these are the days
   we are open", which is the actual question. */
.kk-store .kk-appt-step { display:flex; flex-direction:column; gap:14px; }
.kk-store .kk-appt-visits { display:flex; flex-direction:column; gap:14px; }
.kk-store .kk-appt-visit { border:1.5px solid var(--kk-line); border-radius:14px; background:#fff; padding:14px; }
.kk-store .kk-appt-visit-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:12px; }
.kk-store .kk-appt-visit-title { font-size:14px; font-weight:600; color:var(--kk-ink); line-height:1.5; }
.kk-store .kk-appt-visit-seller { font-size:12px; color:var(--kk-muted); }

.kk-store .kk-appt-picker { display:flex; flex-direction:column; gap:12px; }
.kk-store .kk-appt-cal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kk-store .kk-appt-cal-month { font-size:13px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-appt-cal-nav { display:flex; gap:6px; }
.kk-store .kk-appt-cal-nav button { width:30px; height:30px; padding:0; display:grid; place-items:center; border:1px solid var(--kk-line); border-radius:8px; background:#fff; color:var(--kk-ink); font-size:16px; line-height:1; cursor:pointer; }
.kk-store .kk-appt-cal-nav button:hover:not(:disabled) { background:var(--kk-primary-50); border-color:var(--kk-primary-200); }
.kk-store .kk-appt-cal-nav button:disabled { opacity:.35; cursor:not-allowed; }

/* Horizontal scroll rather than wrap: a wrapped strip breaks the week into uneven rows
   and the shape of the clinic's week stops being readable at a glance. */
.kk-store .kk-appt-strip { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.kk-store .kk-appt-day-btn { flex:0 0 auto; width:54px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 6px; border:1.5px solid var(--kk-line); border-radius:12px; background:#fff; cursor:pointer; transition:border-color .16s, background .16s; }
.kk-store .kk-appt-day-btn:hover:not(:disabled) { border-color:var(--kk-primary-200); background:var(--kk-primary-50); }
.kk-store .kk-appt-day-btn[data-selected] { border-color:var(--kk-primary-700); background:var(--kk-primary-50); box-shadow:0 0 0 3px #e2f2fb; }
.kk-store .kk-appt-day-btn:disabled { opacity:.4; cursor:not-allowed; }
.kk-store .kk-appt-day-btn:focus-visible { outline:2px solid var(--kk-primary-700); outline-offset:2px; }
.kk-store .kk-appt-day-dow { font-size:11px; color:var(--kk-muted); }
.kk-store .kk-appt-day-num { font-size:16px; font-weight:700; color:var(--kk-ink); line-height:1.3; }
.kk-store .kk-appt-day-dot { width:5px; height:5px; border-radius:50%; background:transparent; }
.kk-store .kk-appt-day-dot[data-open] { background:var(--kk-secondary); }

.kk-store .kk-appt-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
.kk-store .kk-appt-slot { display:flex; flex-direction:column; align-items:center; gap:1px; padding:9px 6px; border:1.5px solid var(--kk-line); border-radius:10px; background:#fff; cursor:pointer; transition:border-color .16s, background .16s; }
.kk-store .kk-appt-slot:hover:not(:disabled) { border-color:var(--kk-primary-700); background:var(--kk-primary-50); }
.kk-store .kk-appt-slot:disabled { opacity:.5; cursor:not-allowed; }
.kk-store .kk-appt-slot:focus-visible { outline:2px solid var(--kk-primary-700); outline-offset:2px; }
.kk-store .kk-appt-slot-time { font-size:14px; font-weight:600; color:var(--kk-ink); font-variant-numeric:tabular-nums; }
.kk-store .kk-appt-slot-left { font-size:10.5px; color:#9c3a12; }

.kk-store .kk-appt-booked { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1.5px solid #bfe3cd; border-radius:12px; background:#f2fbf5; }
.kk-store .kk-appt-booked-tick { flex-shrink:0; color:#1f8a4c; }
.kk-store .kk-appt-booked-text { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.kk-store .kk-appt-booked-when { font-size:13.5px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-appt-booked-note { font-size:11.5px; color:var(--kk-muted); }
.kk-store .kk-appt-change { flex-shrink:0; width:auto; padding:0; border:0; background:none; font-size:12.5px; font-weight:600; color:var(--kk-primary-700); cursor:pointer; text-decoration:underline; }
.kk-store .kk-appt-change:disabled { opacity:.5; cursor:not-allowed; }

.kk-store .kk-appt-loading { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--kk-muted); margin:0; }
.kk-store .kk-appt-error { margin:0; font-size:12.5px; color:#b3261e; }

.kk-store .kk-appt-recap { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.kk-store .kk-appt-recap li { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; font-size:13px; }
.kk-store .kk-appt-recap-title { color:var(--kk-muted); min-width:0; }
.kk-store .kk-appt-recap-when { font-weight:600; color:var(--kk-ink); font-variant-numeric:tabular-nums; }

/* ---------- appointments on the order pages ---------- */
.kk-store .kk-confirm-appointments { display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }
.kk-store .kk-order-appointments { margin-top:16px; }
.kk-store .kk-order-appointments h2 { font-size:15px; font-weight:700; color:var(--kk-ink); margin:0 0 10px; }
.kk-store .kk-order-appointments ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.kk-store .kk-order-appointments > ul > li { border:1.5px solid var(--kk-line); border-radius:12px; padding:12px 14px; background:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
/* The left rail is the fastest read on this card: green means you are expected. */
.kk-store .kk-order-appointments > ul > li[data-tone="ok"] { border-left:4px solid #1f8a4c; }
.kk-store .kk-order-appointments > ul > li[data-tone="wait"] { border-left:4px solid var(--kk-secondary); }
.kk-store .kk-order-appointments > ul > li[data-tone="done"] { border-left:4px solid var(--kk-primary-700); }
.kk-store .kk-order-appointments > ul > li[data-tone="off"] { border-left:4px solid #b3261e; opacity:.75; }

.kk-store .kk-order-appt-when { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.kk-store .kk-order-appt-when strong { font-size:14px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-order-appt-when span { font-size:13px; color:var(--kk-muted); font-variant-numeric:tabular-nums; }

.kk-store .kk-order-appt-status { flex-shrink:0; border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:600; }
.kk-store .kk-order-appt-status[data-tone="ok"] { background:#e8f7ee; color:#1f8a4c; }
.kk-store .kk-order-appt-status[data-tone="wait"] { background:var(--kk-secondary-50); color:#9c3a12; }
.kk-store .kk-order-appt-status[data-tone="done"] { background:var(--kk-primary-50); color:var(--kk-primary-900); }
.kk-store .kk-order-appt-status[data-tone="off"] { background:#fdecea; color:#b3261e; }

.kk-store .kk-order-appt-note { flex-basis:100%; margin:0; font-size:12px; color:var(--kk-muted); line-height:1.6; }
.kk-store .kk-order-appt-error { flex-basis:100%; margin:0; font-size:12.5px; color:#b3261e; }

.kk-store .kk-order-appt-actions { flex-basis:100%; display:flex; flex-wrap:wrap; gap:8px; }
.kk-store .kk-order-appt-actions button { width:auto; padding:6px 14px; border:1.5px solid var(--kk-line); border-radius:999px; background:#fff; font-size:12.5px; font-weight:600; color:var(--kk-ink); cursor:pointer; }
.kk-store .kk-order-appt-actions button:hover:not(:disabled) { border-color:var(--kk-primary-700); background:var(--kk-primary-50); }
.kk-store .kk-order-appt-actions button[data-danger] { color:#b3261e; }
.kk-store .kk-order-appt-actions button[data-danger]:hover:not(:disabled) { border-color:#b3261e; background:#fdecea; }
.kk-store .kk-order-appt-actions button:disabled { opacity:.5; cursor:not-allowed; }

.kk-store .kk-order-appt-panel { flex-basis:100%; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--kk-line); padding-top:12px; }
.kk-store .kk-order-appt-panel > p { margin:0; font-size:13px; color:var(--kk-ink); line-height:1.6; }
.kk-store .kk-order-appt-panel input[type="text"] { height:38px; padding:0 12px; border:1.5px solid var(--kk-line); border-radius:10px; font-size:13px; }
.kk-store .kk-order-appt-days { display:flex; flex-direction:column; gap:10px; max-height:280px; overflow-y:auto; }
.kk-store .kk-order-appt-day { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.kk-store .kk-order-appt-day-label { flex:0 0 92px; font-size:12.5px; font-weight:600; color:var(--kk-muted); }
.kk-store .kk-order-appt-slots { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.kk-store .kk-order-appt-slots button { width:auto; padding:5px 11px; border:1.5px solid var(--kk-line); border-radius:8px; background:#fff; font-size:12.5px; font-weight:600; color:var(--kk-ink); cursor:pointer; font-variant-numeric:tabular-nums; }
.kk-store .kk-order-appt-slots button:hover:not(:disabled) { border-color:var(--kk-primary-700); background:var(--kk-primary-50); }
.kk-store .kk-order-appt-slots button:disabled { opacity:.5; cursor:not-allowed; }
.kk-store .kk-appt-recap-none { margin:0; font-size:13px; color:var(--kk-muted); }

/* The soonest visit, on the bookings list card. One line, because the list is for
   scanning — the full picture lives on the booking's own page. */
.kk-store .kk-bk-visit { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:0; padding:10px 16px; border-top:1px solid var(--kk-line); background:var(--kk-primary-50); font-size:13px; }
.kk-store .kk-bk-visit span { color:var(--kk-muted); font-size:12px; }
.kk-store .kk-bk-visit b { color:var(--kk-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.kk-store .kk-bk-visit small { color:var(--kk-primary-900); font-size:11.5px; }
.kk-store .kk-bk-visit[data-status="cancelled"],
.kk-store .kk-bk-visit[data-status="no_show"] { background:#fdecea; }
.kk-store .kk-bk-visit[data-status="cancelled"] b,
.kk-store .kk-bk-visit[data-status="no_show"] b { text-decoration:line-through; color:var(--kk-muted); }
.kk-store .kk-bk-visit[data-status="cancelled"] small,
.kk-store .kk-bk-visit[data-status="no_show"] small { color:#b3261e; }

/* ==========================================================================
   Seller storefront — the page a clinic designs for itself
   --------------------------------------------------------------------------
   Every brand colour arrives as --seller-* custom properties set on
   .kk-seller-page, never on :root, so a seller's palette stops at the edge of
   their own page and the marketplace header, footer and checkout keep their own.
   The shades are derived server-side to clear WCAG contrast; nothing here
   recomputes them.
   ========================================================================== */

.kk-store .kk-seller-page { --seller-radius:16px; background:#fff; }

/* ---------- hero ---------- */

.kk-store .kk-sh { position:relative; }
.kk-store .kk-sh-body { position:relative; z-index:2; padding:32px 0 28px; }

.kk-store .kk-sh-logo { width:72px; height:72px; border-radius:18px; object-fit:contain; background:#fff; border:1px solid var(--kk-line); padding:6px; flex-shrink:0; box-shadow:0 8px 24px #0e355014; }
.kk-store .kk-sh-logo--text { display:grid; place-items:center; font-size:24px; font-weight:800; color:var(--seller-ink); background:var(--seller-soft); border-color:var(--seller-line); }

.kk-store .kk-sh-name { margin:0; font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.6px; color:var(--kk-ink); line-height:1.35; }
.kk-store .kk-sh-tagline { margin:6px 0 0; font-size:15px; color:var(--seller-ink); font-weight:600; }
.kk-store .kk-sh-desc { margin:14px 0 0; font-size:14.5px; line-height:1.85; color:var(--kk-muted); max-width:70ch; }

.kk-store .kk-sh-chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.kk-store .kk-sh-chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 11px; font-size:12px; font-weight:600; background:var(--seller-soft); color:var(--seller-ink); border:1px solid var(--seller-line); }
.kk-store .kk-sh-chip svg { width:13px; height:13px; flex-shrink:0; }
.kk-store .kk-sh-chip--ok svg { color:var(--seller-ink); }

/* classic — a light band. Works with any logo and any brand colour, which is why
   it is also the fallback whenever a seller picked a cover layout but no cover. */
.kk-store .kk-sh--classic { background:linear-gradient(180deg,var(--seller-soft),#fff); border-bottom:1px solid var(--seller-line); }
.kk-store .kk-sh-classic-row { display:flex; align-items:center; gap:18px; }
/* On a phone a long clinic name wraps to three lines and the centred logo floats level
   with the middle of them, leaving the first line hanging over it. Aligned to the top, the
   logo and the name start together. */
@media(max-width:767px) {
  .kk-store .kk-sh-classic-row { align-items:flex-start; gap:14px; }
  .kk-store .kk-sh--classic .kk-sh-logo { width:60px; height:60px; border-radius:15px; }
}

/* immersive — cover behind a scrim. The scrim is a gradient rather than a flat
   overlay so a bright sky at the top of a photo cannot wash out the name. */
.kk-store .kk-sh--immersive { min-height:340px; display:flex; align-items:flex-end; overflow:hidden; }
.kk-store .kk-sh--immersive .kk-sh-cover { position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; }
.kk-store .kk-sh--immersive .kk-sh-scrim { position:absolute; inset:0; background:linear-gradient(180deg,#0b1f2a00 0%,#0b1f2a4d 45%,#0b1f2ae6 100%); }
.kk-store .kk-sh--immersive .kk-sh-body { padding:72px 0 30px; color:#fff; }
.kk-store .kk-sh--immersive .kk-sh-name { color:#fff; margin-top:14px; text-shadow:0 2px 18px #00000059; }
.kk-store .kk-sh--immersive .kk-sh-tagline { color:#ffffffe0; }
.kk-store .kk-sh--immersive .kk-sh-chip { background:#ffffff26; color:#fff; border-color:#ffffff40; backdrop-filter:blur(6px); }
.kk-store .kk-sh--immersive .kk-sh-chip--ok svg { color:#fff; }

/* split — photo beside the credentials */
.kk-store .kk-sh--split { background:var(--seller-soft); border-bottom:1px solid var(--seller-line); }
.kk-store .kk-sh-split-grid { display:grid; grid-template-columns:1fr; gap:0; }
.kk-store .kk-sh-split-photo { min-height:220px; background-size:cover; background-repeat:no-repeat; border-radius:var(--seller-radius); }
.kk-store .kk-sh-split-text { padding:26px 0 30px; }
@media (min-width:992px) {
  .kk-store .kk-sh-split-grid { grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:32px; align-items:center; padding:28px 0; }
  .kk-store .kk-sh-split-photo { min-height:320px; }
  .kk-store .kk-sh-split-text { padding:0; }
}

/* ---------- sections ---------- */

.kk-store .kk-ss { padding:38px 0; }
.kk-store .kk-ss + .kk-ss { border-top:1px solid var(--kk-line); }
.kk-store .kk-ss-narrow { max-width:76ch; }
.kk-store .kk-ss-title { margin:0 0 18px; font-size:clamp(18px,2.2vw,23px); font-weight:700; letter-spacing:-.4px; color:var(--kk-ink); }
/* A short brand-coloured rule under each heading — the one place the seller's colour
   appears on every section, so the page reads as theirs without tinting the content. */
.kk-store .kk-ss-title::after { content:""; display:block; width:38px; height:3px; border-radius:2px; background:var(--seller-accent); margin-top:9px; }
.kk-store .kk-ss-body { margin:0 0 12px; font-size:14.5px; line-height:1.9; color:var(--kk-ink); white-space:pre-line; }
.kk-store .kk-ss-note { margin:12px 0 0; font-size:12.5px; color:var(--kk-muted); }

.kk-store .kk-ss--about, .kk-store .kk-ss--hours, .kk-store .kk-ss--faq { background:var(--seller-soft); }

.kk-store .kk-ss-cta { display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:10px 20px; border-radius:999px; background:var(--seller-accent); font-size:14px; font-weight:600; }
.kk-store .kk-ss-quiet { font-size:13.5px; font-weight:600; }
/* The legacy theme paints every anchor #0e3550 through a five-deep :not() chain whose
   specificity (0,6,1) beats anything sane a component can write — which left the map
   button navy on blue at about 2:1. Same !important escape the theme's own button
   classes use (see a.kk-btn-primary). The colour itself is still the derived, contrast-
   checked one; only the cascade is being forced. */
.kk-store a.kk-ss-cta, .kk-store a.kk-ss-cta:hover, .kk-store a.kk-ss-cta svg { color:var(--seller-on-accent)!important; text-decoration:none!important; }
.kk-store a.kk-ss-cta svg { width:16px; height:16px; }
.kk-store a.kk-ss-cta:hover { filter:brightness(.93); }
.kk-store a.kk-ss-quiet, .kk-store a.kk-ss-quiet:hover { color:var(--seller-ink)!important; text-decoration:underline!important; }
.kk-store .kk-ss-foot { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:28px 0 48px; }

.kk-store .kk-ss-packages-list { display:flex; flex-direction:column; gap:14px; }
/* Packages on a seller's page follow the same column counts as the category listing —
   4 without a sidebar, 3 on tablets, 2 on phones. Bootstrap's col-12 used to drop phones
   to one card per row, which made the same catalogue look sparser here than everywhere
   else on the site. The cells reuse .kk-listing-cell so the compact phone card comes
   with them. */
.kk-store .kk-ss-packages-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media(max-width:1199px) { .kk-store .kk-ss-packages-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:767px) { .kk-store .kk-ss-packages-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }

/* ---------- accreditation ---------- */
.kk-store .kk-accred { list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.kk-store .kk-accred li { display:flex; align-items:center; gap:13px; padding:14px; border:1px solid var(--seller-line); border-radius:var(--seller-radius); background:#fff; }
.kk-store .kk-accred img { width:52px; height:52px; object-fit:contain; flex-shrink:0; }
.kk-store .kk-accred-mark { width:52px; height:52px; flex-shrink:0; display:grid; place-items:center; border-radius:13px; background:var(--seller-soft); color:var(--seller-ink); }
.kk-store .kk-accred-mark svg { width:24px; height:24px; }
.kk-store .kk-accred b { display:block; font-size:14px; color:var(--kk-ink); line-height:1.5; }
.kk-store .kk-accred span { display:block; font-size:12px; color:var(--kk-muted); margin-top:2px; }

/* ---------- doctors ---------- */
.kk-store .kk-doctors { list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); }
.kk-store .kk-doctors li { text-align:center; padding:18px 12px; border:1px solid var(--kk-line); border-radius:var(--seller-radius); background:#fff; }
.kk-store .kk-doctors img, .kk-store .kk-doctor-mark { width:92px; height:92px; border-radius:50%; object-fit:cover; margin:0 auto 11px; display:block; }
.kk-store .kk-doctor-mark { display:grid; place-items:center; background:var(--seller-soft); color:var(--seller-ink); }
.kk-store .kk-doctor-mark svg { width:38px; height:38px; }
.kk-store .kk-doctors b { display:block; font-size:14px; color:var(--kk-ink); line-height:1.5; }
.kk-store .kk-doctor-spec { display:block; font-size:12.5px; color:var(--seller-ink); font-weight:600; margin-top:3px; }
.kk-store .kk-doctor-cred { display:block; font-size:11.5px; color:var(--kk-muted); margin-top:4px; line-height:1.6; }

/* ---------- gallery ---------- */
/* A masonry-ish grid where the first photo takes two columns: a facility gallery
   usually leads with the frontage, and giving it room stops the row reading as
   eight interchangeable thumbnails. */
.kk-store .kk-gallery { list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
.kk-store .kk-gallery li { margin:0; position:relative; border-radius:var(--seller-radius); overflow:hidden; background:var(--seller-soft); }
.kk-store .kk-gallery img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block; }
.kk-store .kk-gallery figcaption { position:absolute; inset:auto 0 0; padding:18px 12px 9px; font-size:12px; color:#fff; background:linear-gradient(180deg,#0b1f2a00,#0b1f2acc); }
@media (min-width:768px) {
  .kk-store .kk-gallery { grid-template-columns:repeat(4,1fr); }
  .kk-store .kk-gallery li:first-child { grid-column:span 2; grid-row:span 2; }
  .kk-store .kk-gallery li:first-child img { aspect-ratio:1; }
}

/* ---------- facilities ---------- */
.kk-store .kk-facilities { list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.kk-store .kk-facilities li { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:999px; background:var(--seller-soft); border:1px solid var(--seller-line); font-size:13.5px; color:var(--kk-ink); }
.kk-store .kk-facilities svg { color:var(--seller-ink); width:16px; height:16px; flex-shrink:0; }

/* ---------- opening hours ---------- */
/* Rebuilt around one question: are they open right now. The status banner answers it, the
   week below answers "and when otherwise", and the bars make a half day or a lunch break
   visible as a shape instead of text to parse. */

.kk-store .kk-hours-card { border:1px solid var(--seller-line); border-radius:18px; background:#fff; overflow:hidden; box-shadow:0 10px 30px #0e35500f; }

.kk-store .kk-hours-status { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:18px 22px; background:var(--seller-soft); border-bottom:1px solid var(--seller-line); }
.kk-store .kk-hours-status strong { font-size:17px; font-weight:700; color:var(--kk-muted); letter-spacing:-.2px; }
.kk-store .kk-hours-status-sub { font-size:13.5px; color:var(--kk-muted); }
.kk-store .kk-hours-status[data-open] strong { color:#177245; }
.kk-store .kk-hours-status[data-open] .kk-hours-status-sub { color:#2f7d54; }

.kk-store .kk-hours-dot { width:10px; height:10px; border-radius:50%; background:#b6c2cb; flex-shrink:0; align-self:center; }
/* A quiet pulse only while actually open — an animation on "closed" is just noise. */
.kk-store .kk-hours-status[data-open] .kk-hours-dot { background:#22a35c; box-shadow:0 0 0 0 #22a35c66; animation:kk-hours-pulse 2.4s ease-out infinite; }
@keyframes kk-hours-pulse { 70% { box-shadow:0 0 0 9px #22a35c00; } 100% { box-shadow:0 0 0 0 #22a35c00; } }
@media(prefers-reduced-motion:reduce) { .kk-store .kk-hours-status[data-open] .kk-hours-dot { animation:none; } }

.kk-store .kk-hours-week { list-style:none; margin:0; padding:6px 0; }
.kk-store .kk-hours-week li { display:grid; grid-template-columns:minmax(96px,auto) minmax(0,1fr) minmax(104px,auto); align-items:center; gap:14px; padding:9px 22px; }
.kk-store .kk-hours-week li[data-today] { background:var(--seller-soft); }
.kk-store .kk-hours-week li[data-closed] { opacity:.62; }

.kk-store .kk-hours-day { display:flex; align-items:baseline; gap:7px; min-width:0; }
.kk-store .kk-hours-day b { font-size:13.5px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-hours-week li[data-today] .kk-hours-day b { color:var(--seller-ink); font-weight:700; }
.kk-store .kk-hours-day em { font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--seller-on-accent); background:var(--seller-accent); border-radius:999px; padding:2px 7px; }

.kk-store .kk-hours-bar { position:relative; height:8px; border-radius:999px; background:#eef2f5; overflow:hidden; }
.kk-store .kk-hours-bar i { position:absolute; top:0; bottom:0; border-radius:999px; background:var(--seller-accent); opacity:.55; }
.kk-store .kk-hours-week li[data-today] .kk-hours-bar i { opacity:1; }
/* The now marker sits above the bar so it stays visible over an open block. */
.kk-store .kk-hours-bar u { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; border-radius:2px; background:var(--kk-ink); box-shadow:0 0 0 2px #fff; }

.kk-store .kk-hours-time { font-size:13px; color:var(--kk-muted); text-align:right; font-variant-numeric:tabular-nums; }
.kk-store .kk-hours-week li[data-today] .kk-hours-time { color:var(--seller-ink); font-weight:700; }

.kk-store .kk-hours-changes { border-top:1px solid var(--seller-line); padding:16px 22px; }
.kk-store .kk-hours-changes h3 { font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--kk-muted); margin:0 0 10px; }
.kk-store .kk-hours-changes ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.kk-store .kk-hours-changes li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:13px; padding-left:13px; position:relative; }
.kk-store .kk-hours-changes li::before { content:""; position:absolute; left:0; top:6px; width:5px; height:5px; border-radius:50%; background:var(--seller-accent); }
.kk-store .kk-hours-changes li[data-closed]::before { background:#d97162; }
.kk-store .kk-hours-changes b { color:var(--kk-ink); font-weight:600; }
.kk-store .kk-hours-changes span { color:var(--kk-muted); }
.kk-store .kk-hours-changes em { font-style:normal; font-size:12px; color:var(--kk-muted); flex-basis:100%; }

.kk-store .kk-hours-foot { display:flex; flex-direction:column; gap:3px; border-top:1px solid var(--seller-line); background:#fbfdfe; padding:12px 22px; font-size:12px; color:var(--kk-muted); }

@media(max-width:600px) {
  .kk-store .kk-hours-status { padding:15px 16px; }
  .kk-store .kk-hours-status strong { font-size:15.5px; }
  .kk-store .kk-hours-week li { grid-template-columns:minmax(78px,auto) minmax(0,1fr); gap:10px; padding:8px 16px; row-gap:4px; }
  /* The bar keeps its column; the times drop under it rather than squeezing to nothing. */
  .kk-store .kk-hours-time { grid-column:2; text-align:left; font-size:12px; }
  .kk-store .kk-hours-changes,.kk-store .kk-hours-foot { padding-inline:16px; }
}

/* ---------- faq ---------- */
.kk-store .kk-faq { display:flex; flex-direction:column; gap:9px; }
.kk-store .kk-faq details { background:#fff; border:1px solid var(--seller-line); border-radius:var(--seller-radius); overflow:hidden; }
.kk-store .kk-faq summary { cursor:pointer; padding:14px 16px; font-size:14px; font-weight:600; color:var(--kk-ink); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.kk-store .kk-faq summary::-webkit-details-marker { display:none; }
.kk-store .kk-faq summary::after { content:"+"; color:var(--seller-ink); font-size:18px; line-height:1; flex-shrink:0; }
.kk-store .kk-faq details[open] summary::after { content:"−"; }
.kk-store .kk-faq p { margin:0; padding:0 16px 15px; font-size:13.5px; line-height:1.9; color:var(--kk-muted); white-space:pre-line; }
.kk-store .kk-seller-draft { margin:0; padding:9px 16px; text-align:center; font-size:12.5px; font-weight:600; background:#fff4e5; color:#9c3a12; border-bottom:1px solid #ffd9c9; }

/* The legacy theme turns every table into a scrolling block below 991px
   (.ekomart-root table { display:block }) to stop wide data tables pushing the page
   sideways. The opening-hours table is built to fit its column, and that rule collapsed
   its rows to content width inside a full-width border — so it opts out by name. Two
   classes beat the theme's one class plus element, so no !important is needed. */
.kk-store .kk-hours { display:table; overflow:visible; table-layout:fixed; }

/* ---------- provider card: the directory variant ----------
   The clinic's own colour arrives as --card-accent / --card-ink / --card-soft, already
   contrast-checked by the API. It is used for the logo frame, the rule under the name and
   the call to action — enough that the card feels like theirs, not so much that thirty of
   them side by side turn the directory into a paint chart. */
.kk-store .kk-provider-card { --card-accent:var(--kk-primary-700); --card-ink:var(--kk-primary-900); --card-soft:var(--kk-primary-50); }


.kk-store .kk-provider-blurb { margin:0 0 11px; font-size:12.5px; line-height:1.7; color:var(--kk-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Open-now sits on the cover because it is the one fact that decides whether someone
   reads the rest of the card today. */
/* Top-right, because the logo badge straddles the cover's bottom-left edge: anything
   sharing that bottom band reads as one cramped row even when the boxes do not strictly
   overlap. Status at the top, brand at the bottom, nothing competing. */
.kk-store .kk-provider-open { position:absolute; right:10px; top:10px; max-width:calc(100% - 20px); display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; background:#ffffffee; color:var(--kk-muted); backdrop-filter:blur(6px); box-shadow:0 2px 10px #0e355022; }
.kk-store .kk-provider-open::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.kk-store .kk-provider-open[data-open] { color:#1f8a4c; }

.kk-store .kk-provider-stats { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:11px; }
.kk-store .kk-provider-stats span { display:flex; flex-direction:column; font-size:11px; color:var(--kk-muted); line-height:1.5; }
.kk-store .kk-provider-stats b { font-size:15px; font-weight:700; color:var(--kk-ink); font-variant-numeric:tabular-nums; }
.kk-store .kk-provider-stats svg { color:#f59e0b; width:13px; height:13px; vertical-align:-1px; }

/* The directory card leads with the clinic's colour; the home rail keeps the house style. */
.kk-store .kk-directory-grid .kk-provider-brand { border-color:var(--card-soft); box-shadow:0 6px 16px #0e355018; left:18px; right:auto; }
.kk-store .kk-directory-grid .kk-provider-details h3 { min-height:0; margin-bottom:8px; }
.kk-store .kk-directory-grid .kk-provider-details h3::after { content:""; display:block; width:28px; height:3px; border-radius:2px; background:var(--card-accent); margin-top:9px; }
.kk-store .kk-directory-grid .kk-provider-cta { color:var(--card-ink); border-top-color:var(--card-soft); }
.kk-store .kk-directory-grid .kk-provider-cover { height:150px; }
.kk-store .kk-directory-grid .kk-provider-details { padding:32px 18px 16px; }

@media(max-width:550px) {
  .kk-store .kk-directory-grid .kk-provider-cover { height:112px; }
  .kk-store .kk-directory-grid .kk-provider-details { padding:28px 12px 14px; }
  .kk-store .kk-directory-grid .kk-provider-brand { width:44px; height:44px; top:-24px; left:12px; }
  .kk-store .kk-provider-blurb { -webkit-line-clamp:2; font-size:12px; }
  .kk-store .kk-provider-stats { gap:10px; }
  .kk-store .kk-provider-stats b { font-size:14px; }
}

/* ---------- featured & best sellers ---------- */
/* Both reuse the packages grid so the cards stay identical to the rest of the site —
   what changes is the framing around them, not the product card itself. */
.kk-store .kk-ss--featured { background:var(--seller-soft); }
.kk-store .kk-ss--featured .kk-ss-body { margin-bottom:18px; }

.kk-store .kk-ss-ranked { position:relative; }
/* The rank is the whole point of this section, so it reads as a number, not a badge. */
.kk-store .kk-ss-rank { position:absolute; left:-6px; top:-8px; z-index:3; min-width:26px; height:26px; padding:0 7px; display:grid; place-items:center; border-radius:999px; background:var(--seller-accent); color:var(--seller-on-accent); font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; box-shadow:0 3px 10px #0e355026; }
@media(max-width:767px) { .kk-store .kk-ss-rank { min-width:22px; height:22px; font-size:11.5px; left:-4px; top:-6px; } }

/* The legacy theme forces these icon frames back to display:block, which kills the
   centring and leaves the glyph pinned to the left edge. Same class of override as the
   hours table and the link colours — forced with the weight the theme itself uses. */
.kk-store .kk-accred-mark,
.kk-store .kk-doctor-mark,
.kk-store .kk-sh-logo--text { display:flex!important; align-items:center; justify-content:center; }

/* ---------- two-column seller page ----------
   The rail carries the short reference facts someone comparing clinics keeps glancing
   back at — hours, where you are, what you offer — while the content they came to read
   flows in the main column. Source order puts the main column first, so a phone and a
   screen reader both get the content before the rail; the sides are swapped visually with
   `order`, not by moving markup. */
.kk-store .kk-seller-cols { display:grid; grid-template-columns:1fr; }
.kk-store .kk-seller-main { min-width:0; }
.kk-store .kk-seller-rail { min-width:0; border-top:1px solid var(--kk-line); }

@media(min-width:992px) {
  /* The grid is bounded by the page container, not by the viewport.
     Unbounded it put the rail hard against the left edge of the screen while each section
     in the main column re-centred itself inside whatever was left — on a wide monitor that
     opened a corridor of empty page between the two, wider than the rail itself. */
  .kk-store .kk-seller-cols {
    width:min(1320px,calc(100% - var(--gutter,24px) * 2));
    margin-inline:auto;
    padding-block:40px 12px;
    /* One variable so both sides stay in step. The rail is the column that gives way on a
       narrow desktop: at 1000px a fixed 330px rail leaves the packages under 600px, and
       the thing the visitor came for should not be the part that gets squeezed. */
    --rail:272px;
    grid-template-columns:minmax(0,1fr) var(--rail);
    gap:28px;
    align-items:start;
  }
  .kk-store .kk-seller-cols[data-side="left"] { grid-template-columns:var(--rail) minmax(0,1fr); }
  .kk-store .kk-seller-cols[data-side="left"] .kk-seller-main { order:2; }
  .kk-store .kk-seller-cols[data-side="left"] .kk-seller-rail { order:1; }

  /* Each section is inside a column now, so it stops drawing the page gutter and stops
     centring itself — the column already decided where its edges are. */
  .kk-store .kk-seller-cols .kk-wrap { width:100%; max-width:none; margin-inline:0; }
  .kk-store .kk-seller-cols .kk-ss { padding:0; border-top:0; }

  /* Vertical rhythm moves onto the columns, so both start flush with the container's top
     padding instead of each carrying its own. */
  .kk-store .kk-seller-main { display:flex; flex-direction:column; }
  .kk-store .kk-seller-main .kk-ss + .kk-ss { margin-top:32px; padding-top:32px; border-top:1px solid var(--kk-line); }

  /* The tinted bands are a full-width device: they separate one stripe of the page from
     the next. Inside a column they would just be a coloured block the width of one
     column, which reads as a mistake rather than as a section. */
  .kk-store .kk-seller-main .kk-ss--about,
  .kk-store .kk-seller-main .kk-ss--hours,
  .kk-store .kk-seller-main .kk-ss--faq,
  .kk-store .kk-seller-main .kk-ss--featured { background:transparent; }

  /* ── the rail ───────────────────────────────────────────────────────────
     A stack of separate cards, not one bordered column. Each thing in here is
     independently true — this clinic's accreditation, its hours, where it is — and a
     single ruled column presents them as one continuous statement. Cards also survive a
     seller reordering them, which a column of hairlines does not. */
  .kk-store .kk-seller-rail {
    display:flex;
    flex-direction:column;
    gap:14px;
    border-top:0;
    /* Kept in view while the main column scrolls, with its own scroll when the seller has
       put more in here than a screen holds — the alternative is a rail that is useful for
       one screenful and then a dead margin for the rest of a long page. */
    position:sticky;
    top:16px;
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#cfdde6 transparent;
  }
  /* The rail has a max-height, and a column flex container squeezes its children to fit
     one — which silently crushed every card to a title with its contents clipped away. */
  .kk-store .kk-seller-rail > * { flex:none; }
  .kk-store .kk-seller-rail::-webkit-scrollbar { width:6px; }
  .kk-store .kk-seller-rail::-webkit-scrollbar-thumb { background:#cfdde6; border-radius:3px; }
  .kk-store .kk-seller-rail::-webkit-scrollbar-track { background:transparent; }

  .kk-store .kk-seller-rail .kk-ss {
    background:#fff;
    border:1px solid var(--seller-line);
    border-radius:16px;
    box-shadow:0 1px 2px #0e35500a,0 10px 28px #0e35500a;
    overflow:hidden;
  }
  .kk-store .kk-seller-rail .kk-wrap { padding:18px; }

  /* A card title is a label for what is in the card, not a heading competing with the
     main column's. Smaller, with a shorter accent rule under it. */
  .kk-store .kk-seller-rail .kk-ss-title { font-size:13.5px; font-weight:700; letter-spacing:-.1px; margin:0 0 14px; }
  .kk-store .kk-seller-rail .kk-ss-title::after { width:24px; height:2px; margin-top:7px; }
  .kk-store .kk-seller-rail .kk-ss-narrow { max-width:none; }
  .kk-store .kk-seller-rail .kk-ss--about,
  .kk-store .kk-seller-rail .kk-ss--faq { background:#fff; }

  /* Accreditation: divided rows rather than a box per certificate. At this width a border
     around each one is three nested frames — card, box, icon tile — for one line of text. */
  .kk-store .kk-seller-rail .kk-accred { grid-template-columns:1fr; gap:0; }
  .kk-store .kk-seller-rail .kk-accred li { padding:11px 0; border:0; border-radius:0; background:transparent; gap:11px; }
  .kk-store .kk-seller-rail .kk-accred li + li { border-top:1px solid var(--seller-line); }
  .kk-store .kk-seller-rail .kk-accred img,
  .kk-store .kk-seller-rail .kk-accred-mark { width:38px; height:38px; border-radius:10px; }
  .kk-store .kk-seller-rail .kk-accred-mark svg { width:18px; height:18px; }
  .kk-store .kk-seller-rail .kk-accred b { font-size:13px; }

  /* Facilities: the same. A pill is a shape for something you can tap; these are
     statements of fact, so they become a list, with the icon carrying the colour. */
  .kk-store .kk-seller-rail .kk-facilities { grid-template-columns:1fr; gap:0; }
  .kk-store .kk-seller-rail .kk-facilities li { padding:9px 0; border:0; border-radius:0; background:transparent; gap:11px; font-size:13px; }
  .kk-store .kk-seller-rail .kk-facilities li + li { border-top:1px solid var(--seller-line); }
  .kk-store .kk-seller-rail .kk-facilities svg { width:30px; height:30px; padding:7px; border-radius:9px; background:var(--seller-soft); }

  /* Hours brings its own card, so the rail card around it steps aside rather than framing
     a frame. */
  .kk-store .kk-seller-rail .kk-ss--hours { background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible; }
  .kk-store .kk-seller-rail .kk-ss--hours .kk-wrap { padding:0; }

  /* The timeline bar is the wrong instrument in a 290px column: it collapses to a stub
     that says less than the times printed beside it, and pushes those times onto a second
     row. Here the week is a plain two-column list, which is what someone checking "are
     they open on Saturday" actually reads. */
  .kk-store .kk-seller-rail .kk-hours-card { border-radius:14px; box-shadow:0 1px 2px #0e35500a,0 10px 28px #0e35500a; }
  .kk-store .kk-seller-rail .kk-hours-bar { display:none; }
  .kk-store .kk-seller-rail .kk-hours-week { padding:4px 0; }
  .kk-store .kk-seller-rail .kk-hours-week li { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:8px 16px; row-gap:0; }
  .kk-store .kk-seller-rail .kk-hours-time { grid-column:auto; text-align:right; font-size:12.5px; }
  .kk-store .kk-seller-rail .kk-hours-day b { font-size:13px; }
  .kk-store .kk-seller-rail .kk-hours-status { padding:14px 16px; }
  .kk-store .kk-seller-rail .kk-hours-status strong { font-size:15px; }
  .kk-store .kk-seller-rail .kk-hours-status-sub { font-size:12.5px; }
  .kk-store .kk-seller-rail .kk-hours-changes,
  .kk-store .kk-seller-rail .kk-hours-foot { padding-inline:16px; }

  /* The map reaches the card's side edges: an inset map inside a bordered card is two
     frames around one picture, and the picture loses the width it needs most. It keeps its
     place under the title rather than bleeding to the top, because a map above its own
     heading reads as belonging to the card before it. */
  .kk-store .kk-seller-rail .kk-ss--location .kk-loc-map { margin-inline:-18px; border-radius:0; border-width:1px 0; }

  /* Gallery and doctors are grids built for a full-width band. */
  .kk-store .kk-seller-rail .kk-gallery { grid-template-columns:repeat(2,1fr); gap:8px; }
  .kk-store .kk-seller-rail .kk-doctors { grid-template-columns:1fr; }
}

@media(min-width:1240px) {
  .kk-store .kk-seller-cols { --rail:330px; gap:36px; }
}

/* Gallery strip on a directory card — bottom-right, opposite the logo badge, so the
   cover's four corners carry four different things and none of them collide. */
.kk-store .kk-provider-strip { position:absolute; right:10px; bottom:10px; display:flex; align-items:center; gap:4px; }
.kk-store .kk-provider-strip img { width:34px; height:34px; border-radius:7px; object-fit:cover; border:2px solid #fff; box-shadow:0 2px 8px #0e355033; }
.kk-store .kk-provider-strip b { display:grid; place-items:center; min-width:30px; height:34px; padding:0 6px; border-radius:7px; background:#ffffffee; color:var(--kk-muted); font-size:11px; font-weight:700; border:2px solid #fff; box-shadow:0 2px 8px #0e355033; }
/* Hidden on phones. The directory is two cards across there, leaving each cover about
   160px wide — the logo badge alone takes 44 of them, so the strip landed on top of it.
   Three 34px thumbnails say very little at that size anyway, and the gallery is one tap
   away on the clinic's own page. */
@media(max-width:767px) { .kk-store .kk-provider-strip { display:none; } }

/* ---------- location with a map ----------
   OpenStreetMap's own embed: no API key, no billing account, and no third-party tracking
   script on a medical page. Side by side on a wide screen, map first on a phone — you
   orient yourself on the picture, then read the address. */
.kk-store .kk-loc { display:grid; gap:18px; grid-template-columns:1fr; }
.kk-store .kk-loc[data-has-map] { align-items:start; }
@media(min-width:840px) {
  .kk-store .kk-loc[data-has-map] { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; }
}
.kk-store .kk-loc-text { min-width:0; }
.kk-store .kk-loc-map { position:relative; border-radius:var(--seller-radius); overflow:hidden; border:1px solid var(--seller-line); background:var(--seller-soft); }
.kk-store .kk-loc-map iframe { display:block; width:100%; height:100%; min-height:260px; border:0; }
@media(min-width:840px) { .kk-store .kk-loc-map iframe { min-height:320px; } }
.kk-store .kk-loc-bigger { position:absolute; right:10px; bottom:10px; padding:5px 12px; border-radius:999px; background:#ffffffee; color:var(--seller-ink); font-size:12px; font-weight:600; text-decoration:none; box-shadow:0 2px 10px #0e355026; backdrop-filter:blur(6px); }
.kk-store a.kk-loc-bigger, .kk-store a.kk-loc-bigger:hover { color:var(--seller-ink)!important; text-decoration:none!important; }

/* In the side rail the map keeps its own column, just shorter. */
.kk-store .kk-seller-rail .kk-loc[data-has-map] { grid-template-columns:1fr; gap:14px; }
.kk-store .kk-seller-rail .kk-loc-map iframe { min-height:200px; }

/* ---------- verified ----------
   This is the one claim on the page a patient is trusting the marketplace for, and it used
   to be the third grey pill in a row of grey pills, wearing the same tick as "we have
   parking". It gets weight, a seal of its own, and a colour.

   Green rather than the clinic's brand colour, deliberately: the mark means the
   marketplace checked this provider, so it must not change with whoever is being checked.
   A seal that took each clinic's own colour would look like something the clinic awarded
   itself. One green everywhere is the same promise everywhere. */
.kk-store { --kk-verified:#15803d; --kk-verified-soft:#eaf7ef; --kk-verified-line:#bfe4cd; }
/* A tinted pill rather than a solid block of colour: the seal is the thing that should
   carry the green, and a filled chip beside two quiet grey ones shouted where it only
   needed to be noticed. The mark stays saturated, the field behind it stays light. */
.kk-store .kk-sh-chip--ok { background:var(--kk-verified-soft); color:var(--kk-verified); border-color:var(--kk-verified-line); font-weight:700; padding-inline:10px 12px; --kk-verified-tick:var(--kk-verified-soft); }
.kk-store .kk-sh-chip--ok svg { width:15px; height:15px; color:var(--kk-verified); }
/* Over a photograph the pale field would disappear into the scrim, so it firms up just
   enough to read while staying the same light-green idea. */
.kk-store .kk-sh--immersive .kk-sh-chip--ok { background:#eaf7efee; border-color:#ffffff59; color:#0f5f2e; --kk-verified-tick:#eaf7ef; }
.kk-store .kk-sh--immersive .kk-sh-chip--ok svg { color:#15803d; }

/* The seal on a directory card. Sized to the name's cap height and given a little left
   margin so it reads as a mark on the name, not as a word after it. `vertical-align`
   rather than flex, because the name has to be able to wrap around it. */
.kk-store .kk-provider-verified { width:14px; height:14px; margin-left:5px; vertical-align:-2px; color:var(--kk-verified); --kk-verified-tick:#fff; }
.kk-store .kk-directory-grid .kk-provider-verified { width:15px; height:15px; vertical-align:-2.5px; }

/* ---------- promotional banners ----------
   A section of the page, not part of the hero. The hero is the clinic's front door and
   never changes; this is what they are running this month.

   The scrolling is the browser's. A scroll-snap row gives a phone real swipe with real
   momentum and a trackpad the gesture its owner already uses, for no JavaScript at all —
   the buttons and dots only call scrollTo, so there is one mechanism and the dots cannot
   disagree with the picture. */
.kk-store .kk-ss--banner { padding-block:22px; }
.kk-store .kk-bn { position:relative; border-radius:var(--seller-radius); overflow:hidden; background:var(--seller-soft); }
.kk-store .kk-bn-track { list-style:none; margin:0; padding:0; display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.kk-store .kk-bn-track::-webkit-scrollbar { display:none; }
.kk-store .kk-bn-track:focus-visible { outline:2px solid var(--seller-accent); outline-offset:-3px; }
/* Snapping without `scroll-snap-stop:always`: one card at a time is right for a thumb, and
   it would forbid the jump a dot has to make when it is two banners away. */
.kk-store .kk-bn-slide { position:relative; flex:0 0 100%; min-width:0; scroll-snap-align:center; }
.kk-store .kk-bn-link { display:block; }
/* A fixed shape so a clinic mixing a 3:1 poster with a square photo still gets a strip
   that does not jump height as it scrolls. */
.kk-store .kk-bn-img { display:block; width:100%; aspect-ratio:1200/380; object-fit:cover; background:var(--seller-soft); }
@media(max-width:767px) { .kk-store .kk-bn-img { aspect-ratio:16/10; } }

/* The words sit in a corner over a gradient rather than across the middle: a banner is
   mostly a picture, and a scrim over all of it wastes the picture. */
.kk-store .kk-bn-copy { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:22px 24px; color:#fff; background:linear-gradient(0deg,#0b1f2ae6,#0b1f2a8c 55%,#0b1f2a00); }
.kk-store .kk-bn-copy strong { font-size:clamp(17px,2.2vw,25px); font-weight:800; letter-spacing:-.4px; line-height:1.4; text-shadow:0 2px 14px #00000059; }
.kk-store .kk-bn-copy > span { font-size:clamp(12.5px,1.3vw,14.5px); line-height:1.65; color:#ffffffe0; max-width:52ch; }
.kk-store .kk-bn-cta { display:inline-flex; align-items:center; margin-top:4px; padding:9px 18px; border-radius:999px; background:var(--seller-accent); font-size:13.5px; font-weight:700; }
.kk-store a.kk-bn-cta, .kk-store a.kk-bn-cta:hover { color:var(--seller-on-accent)!important; text-decoration:none!important; }
.kk-store .kk-bn-cta--flat { color:var(--seller-on-accent); }

.kk-store .kk-bn-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:#ffffffe0; color:#0e3550; font-size:18px; cursor:pointer; box-shadow:0 3px 14px #0b1f2a33; opacity:0; transition:opacity .16s ease, background .16s ease; }
.kk-store .kk-bn-arrow--prev { left:14px; }
.kk-store .kk-bn-arrow--next { right:14px; }
.kk-store .kk-bn:hover .kk-bn-arrow, .kk-store .kk-bn-arrow:focus-visible { opacity:1; }
.kk-store .kk-bn-arrow:hover { background:#fff; }
/* Nothing hovers on a phone, and swiping is the gesture there anyway — arrows would only
   sit on top of the picture. */
@media(max-width:767px) { .kk-store .kk-bn-arrow { display:none; } }

.kk-store .kk-bn-dots { position:absolute; z-index:3; right:14px; top:14px; display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:999px; background:#0b1f2a52; backdrop-filter:blur(8px); }
.kk-store .kk-bn-dot { position:relative; width:7px; height:7px; padding:0; border:0; border-radius:999px; background:#ffffff85; cursor:pointer; transition:width .2s ease, background .2s ease; }
.kk-store .kk-bn-dot[data-on] { width:20px; background:#fff; }
/* The tap area, larger than the mark.
   The legacy sheet gives every button a 44px minimum height below 992px — a sound rule for
   a thumb, and it turned each dot into a white bar. The dot keeps its shape and the target
   moves to a pseudo-element: 13px wide against a 16px pitch, so neighbouring dots never
   claim each other's taps. */
@media(max-width:991px) { .kk-store .kk-bn .kk-bn-dot { min-height:0; } }
.kk-store .kk-bn-dot::after { content:""; position:absolute; inset:-13px -3px; }

@media(prefers-reduced-motion:reduce) {
  .kk-store .kk-bn-track { scroll-behavior:auto; }
  .kk-store .kk-bn-dot { transition:none; }
}

/* In the side rail a banner is a narrow card, so the copy stops trying to be a poster. */
.kk-store .kk-seller-rail .kk-bn-img { aspect-ratio:16/10; }
.kk-store .kk-seller-rail .kk-bn-copy { padding:14px 16px; gap:5px; }
.kk-store .kk-seller-rail .kk-bn-copy strong { font-size:15px; }
.kk-store .kk-seller-rail .kk-bn-cta { padding:7px 14px; font-size:12.5px; }

/* ---------- referral partner (affiliate) ----------
   Lives inside the customer's account, so it borrows the account cards and adds only what
   a partner needs: a code big enough to read out, a link builder, and money in four states. */
.kk-store .kk-aff-join { text-align:center; padding:34px 26px 30px; }
.kk-store .kk-aff-join-art { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 14px; border-radius:20px; background:var(--kk-primary-50); color:var(--kk-primary-700); font-size:28px; }
.kk-store .kk-aff-join h2 { margin:0 0 8px; font-size:22px; font-weight:800; letter-spacing:-.4px; color:var(--kk-ink); }
.kk-store .kk-aff-join > p { margin:0 auto; max-width:56ch; font-size:14.5px; line-height:1.8; color:var(--kk-muted); }
.kk-store .kk-aff-terms { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:22px 0 0; padding:0; }
.kk-store .kk-aff-terms li { display:grid; gap:2px; padding:14px 10px; border:1px solid var(--kk-line); border-radius:14px; background:var(--kk-surface); }
.kk-store .kk-aff-terms b { font-size:20px; font-weight:800; color:var(--kk-primary-700); }
.kk-store .kk-aff-terms span { font-size:12.5px; color:var(--kk-muted); }
.kk-store .kk-aff-join-btn { margin-top:22px; min-width:240px; }
.kk-store .kk-aff-note { margin:14px 0 0; font-size:13px; color:#b45309; }
.kk-store .kk-aff-fine { margin:16px auto 0; max-width:62ch; font-size:12px; line-height:1.7; color:var(--kk-muted); }
.kk-store .kk-aff-error { margin:10px 0 0; font-size:13px; color:#b42318; }
.kk-store .kk-aff-saved { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:#15803d; }
.kk-store .kk-aff-suspended { align-self:flex-start; padding:4px 10px; border-radius:999px; background:#fef2f2; color:#b42318; font-size:12px; font-weight:700; }

/* The code, set like a boarding-pass number: monospaced, spaced, impossible to misread. */
.kk-store .kk-aff-code-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.kk-store .kk-aff-code { display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border:1.5px dashed var(--kk-primary-200); border-radius:14px; background:var(--kk-primary-50); color:var(--kk-primary-700); font-size:20px; }
.kk-store .kk-aff-code b { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:26px; font-weight:800; letter-spacing:.22em; color:var(--kk-ink); }

.kk-store .kk-aff-builder { display:grid; gap:8px; margin-top:20px; padding-top:18px; border-top:1px solid #edf4f8; }
.kk-store .kk-aff-builder label { font-size:13px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-aff-builder input { height:44px; padding:0 14px; border:1px solid var(--kk-line); border-radius:11px; font-size:14px; }
.kk-store .kk-aff-builder input:focus { outline:none; border-color:var(--kk-primary-700); box-shadow:0 0 0 4px var(--kk-primary-50); }
.kk-store .kk-aff-link-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.kk-store .kk-aff-link { flex:1 1 280px; min-width:0; overflow-wrap:anywhere; padding:10px 14px; border-radius:10px; background:var(--kk-surface); border:1px solid var(--kk-line); font-size:12.5px; line-height:1.6; color:var(--kk-ink); }
.kk-store .kk-aff-builder small { font-size:12px; line-height:1.6; color:var(--kk-muted); }

/* Money in four states, coloured by how sure it is. */
.kk-store .kk-aff-wallet { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.kk-store .kk-aff-wallet > div { display:grid; gap:3px; padding:14px 16px; border-radius:14px; border:1px solid var(--kk-line); background:var(--kk-surface); }
.kk-store .kk-aff-wallet small { font-size:12px; color:var(--kk-muted); }
.kk-store .kk-aff-wallet b { font-size:20px; font-weight:800; letter-spacing:-.3px; color:var(--kk-ink); }
.kk-store .kk-aff-wallet span { font-size:11.5px; color:var(--kk-muted); }
.kk-store .kk-aff-wallet > div[data-tone="ok"] { border-color:#bfe4cd; background:#f2faf5; }
.kk-store .kk-aff-wallet > div[data-tone="ok"] b { color:#15803d; }
.kk-store .kk-aff-wallet > div[data-tone="done"] b { color:var(--kk-primary-700); }
.kk-store .kk-aff-stats { margin-top:14px; }

.kk-store .kk-aff-table-wrap { overflow-x:auto; }
.kk-store .kk-aff-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.kk-store .kk-aff-table th { padding:8px 10px; text-align:left; font-size:12px; font-weight:700; letter-spacing:.3px; color:var(--kk-muted); border-bottom:1px solid var(--kk-line); }
.kk-store .kk-aff-table td { padding:11px 10px; border-bottom:1px solid #edf4f8; vertical-align:top; color:var(--kk-ink); }
.kk-store .kk-aff-table td small { display:block; font-size:11.5px; color:var(--kk-muted); }
.kk-store .kk-aff-table .is-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; }
.kk-store .kk-aff-table td[data-negative] { color:#b42318; }
.kk-store .kk-aff-table tr[data-void] td { color:var(--kk-muted); text-decoration:line-through; }
.kk-store .kk-aff-table code { font-size:12.5px; }
.kk-store .kk-aff-status { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; background:#eef2f5; color:var(--kk-muted); }
.kk-store .kk-aff-status[data-tone="wait"] { background:#fff7e6; color:#b45309; }
.kk-store .kk-aff-status[data-tone="ok"] { background:#eaf7ef; color:#15803d; }
.kk-store .kk-aff-status[data-tone="done"] { background:var(--kk-primary-50); color:var(--kk-primary-700); }
.kk-store .kk-aff-form-foot { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.kk-store .kk-acc-form-grid label { display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--kk-ink); }
.kk-store .kk-acc-form-grid label input { height:42px; padding:0 12px; border:1px solid var(--kk-line); border-radius:10px; font-size:14px; font-weight:400; }

/* Referral on the coupon field. Quiet: it is information, not a discount. */
.kk-store .kk-coupon-referral { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0 0; font-size:13px; color:var(--kk-ink); }
.kk-store .kk-coupon-referral svg { color:var(--kk-primary-700); }
.kk-store .kk-coupon-referral small { flex-basis:100%; font-size:12px; color:var(--kk-muted); }

/* Consent bar (only when the programme asks first). Bottom of the screen, above the
   phone tab bar, never covering what the visitor came to read. */
.kk-store .kk-ref-consent { position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:60; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; max-width:760px; margin:0 auto; padding:14px 18px; border:1px solid var(--kk-line); border-radius:16px; background:#fff; box-shadow:0 14px 40px #0e355026; }
.kk-store .kk-ref-consent p { flex:1 1 320px; margin:0; font-size:13.5px; line-height:1.65; color:var(--kk-ink); }
.kk-store .kk-ref-consent > div { display:flex; gap:8px; }
@media(max-width:767px) { .kk-store .kk-ref-consent { bottom:calc(84px + env(safe-area-inset-bottom)); } }

@media(max-width:767px) {
  .kk-store .kk-aff-terms { grid-template-columns:1fr; }
  .kk-store .kk-aff-wallet { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kk-store .kk-aff-code b { font-size:22px; letter-spacing:.16em; }
}

/* ---------- referral programme landing (/affiliate) ----------
   Public, read by people who are not customers yet. It borrows the page-heading rhythm
   the rest of the site uses and adds a hero with a worked example beside it — nobody feels
   5%, everybody feels ฿120. */
.kk-store .kk-affl-hero { padding:44px 0 40px; background:linear-gradient(180deg,var(--kk-primary-50),#fff); border-bottom:1px solid var(--kk-line); }
.kk-store .kk-affl-hero-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr); gap:36px; align-items:center; }
.kk-store .kk-affl-hero h1 { margin:8px 0 14px; font-size:clamp(26px,3.6vw,40px); font-weight:800; letter-spacing:-.8px; line-height:1.25; color:var(--kk-ink); }
.kk-store .kk-affl-hero p { margin:0; max-width:58ch; font-size:15.5px; line-height:1.8; color:var(--kk-muted); }
.kk-store .kk-affl-cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:24px; }
.kk-store .kk-affl-cta > span { font-size:12.5px; color:var(--kk-muted); }
.kk-store .kk-affl-cta .kk-btn-primary, .kk-store .kk-affl-close .kk-btn-primary { display:inline-flex; align-items:center; gap:8px; }
.kk-store .kk-affl-paused { margin-top:14px; font-size:13px; color:#b45309; }

.kk-store .kk-affl-example { padding:20px 22px; border:1px solid var(--kk-line); border-radius:18px; background:#fff; box-shadow:0 14px 40px #0e355014; }
.kk-store .kk-affl-example small { display:block; margin-bottom:10px; font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--kk-muted); }
.kk-store .kk-affl-example-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid #edf4f8; font-size:14px; color:var(--kk-ink); }
.kk-store .kk-affl-example-row b { font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.kk-store .kk-affl-example-row.is-earn { color:#15803d; }
.kk-store .kk-affl-example-row.is-earn b { font-size:24px; color:#15803d; }
.kk-store .kk-affl-example-row.is-muted { color:var(--kk-muted); }
.kk-store .kk-affl-example > p { margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--kk-muted); }

.kk-store .kk-affl-section { padding:44px 0; }
.kk-store .kk-affl-section.is-tint { background:var(--kk-surface); border-block:1px solid var(--kk-line); }
.kk-store .kk-affl-section h2 { font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-.5px; color:var(--kk-ink); }

.kk-store .kk-affl-steps { list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:22px 0 0; padding:0; }
.kk-store .kk-affl-steps li { counter-increment:step; position:relative; display:grid; gap:8px; padding:22px 20px 20px; border:1px solid var(--kk-line); border-radius:18px; background:#fff; }
.kk-store .kk-affl-steps li::before { content:counter(step,decimal-leading-zero); position:absolute; top:16px; right:18px; font-size:12px; font-weight:800; letter-spacing:.5px; color:var(--kk-primary-200); }
.kk-store .kk-affl-steps li > span { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:var(--kk-primary-50); color:var(--kk-primary-700); font-size:20px; }
.kk-store .kk-affl-steps b { font-size:16px; font-weight:700; color:var(--kk-ink); }
.kk-store .kk-affl-steps p { margin:0; font-size:13.5px; line-height:1.75; color:var(--kk-muted); }

.kk-store .kk-affl-terms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; }
.kk-store .kk-affl-terms > div { display:grid; gap:4px; padding:18px 20px; border:1px solid var(--kk-line); border-radius:16px; background:#fff; }
.kk-store .kk-affl-terms b { display:inline-flex; align-items:center; font-size:26px; font-weight:800; letter-spacing:-.5px; color:var(--kk-primary-700); }
.kk-store .kk-affl-terms b svg { font-size:24px; }
.kk-store .kk-affl-terms span { font-size:13px; line-height:1.6; color:var(--kk-muted); }

.kk-store .kk-affl-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.kk-store .kk-affl-card { padding:22px 24px; border:1px solid var(--kk-line); border-radius:18px; background:#fff; }
.kk-store .kk-affl-card.is-muted { background:var(--kk-surface); }
.kk-store .kk-affl-card h3 { display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:17px; font-weight:700; color:var(--kk-ink); }
.kk-store .kk-affl-card h3 svg { color:var(--kk-primary-700); }
.kk-store .kk-affl-card.is-muted h3 svg { color:var(--kk-muted); }
.kk-store .kk-affl-card ul { margin:0; padding-left:18px; display:grid; gap:8px; font-size:14px; line-height:1.7; color:var(--kk-ink); }
.kk-store .kk-affl-card.is-muted ul { color:var(--kk-muted); }

.kk-store .kk-affl-close { text-align:center; padding-bottom:64px; }
.kk-store .kk-affl-close h2 { margin:0 0 6px; }
.kk-store .kk-affl-close p { margin:0 0 18px; color:var(--kk-muted); }

/* Top-bar link beside "for healthcare partners". */
.kk-store .kk-hd-promo-links { display:inline-flex; align-items:center; gap:12px; flex-shrink:0; white-space:nowrap; }
.kk-store .kk-hd-promo-sep { opacity:.45; font-weight:400; }
@media(max-width:900px){ .kk-store .kk-hd-promo-links { display:none; } }

@media(max-width:991px) {
  .kk-store .kk-affl-hero-grid { grid-template-columns:1fr; gap:24px; }
  .kk-store .kk-affl-steps, .kk-store .kk-affl-terms { grid-template-columns:1fr; }
  .kk-store .kk-affl-two { grid-template-columns:1fr; }
  .kk-store .kk-affl-section { padding:32px 0; }
}
/* The headline's deliberate two-line break is a desktop composition. On a phone the line
   already wraps on its own, and a forced break on top of that strands a word alone. */
@media(max-width:767px) { .kk-store .kk-affl-hero h1 br { display:none; } }

/* A modal handing off to the basket drawer (compare offers → add). Mirrors kk-modal-in
   in reverse and fades the scrim with it. */
.kk-store .kk-modal-root[data-closing] { pointer-events:none; }
.kk-store .kk-modal-root[data-closing] .kk-modal { animation:kk-modal-out .2s cubic-bezier(.4,0,1,1) forwards; }
.kk-store .kk-modal-root[data-closing] .kk-modal-scrim { animation:kk-modal-fade-out .2s ease-in forwards; }
@keyframes kk-modal-out { to { opacity:0; transform:translateY(10px) scale(.98); } }
@keyframes kk-modal-fade-out { to { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .kk-store .kk-modal-root[data-closing] .kk-modal, .kk-store .kk-modal-root[data-closing] .kk-modal-scrim { animation-duration:.01s; } }

/* ---------- loading skeletons ----------
   One shimmer, everywhere. The block is the site's pale blue with a band of light passing
   through it every 1.6s — slow enough to read as "waiting", never as "broken". Sizes are
   set inline by the components so each skeleton matches the element it stands in for. */
.kk-store .kk-sk { display:block; position:relative; overflow:hidden; border-radius:8px; background:linear-gradient(90deg,#e6f1f8 0%,#f3f9fd 40%,#e6f1f8 80%); background-size:220% 100%; animation:kk-sk-shimmer 1.6s ease-in-out infinite; }
@keyframes kk-sk-shimmer { 0% { background-position:110% 0; } 100% { background-position:-110% 0; } }
@media(prefers-reduced-motion:reduce) { .kk-store .kk-sk { animation:none; background:#e9f2f8; } }

.kk-store .kk-sk-page { min-height:60vh; }
.kk-store .kk-sk-text { display:grid; gap:8px; width:100%; }
.kk-store .kk-sk-text .kk-sk { border-radius:999px; }
.kk-store .kk-sk-row { display:flex; align-items:center; gap:10px; }
.kk-store .kk-sk-row--between { justify-content:space-between; }
.kk-store .kk-sk-row--line { padding:12px 0; border-top:1px solid #edf4f8; }
.kk-store .kk-sk-row--line:first-of-type { border-top:0; }
.kk-store .kk-sk-row--stats { margin:8px 0 14px; }
.kk-store .kk-sk-stack { display:grid; gap:16px; }
.kk-store .kk-sk-rows { display:grid; gap:10px; }
.kk-store .kk-sk-section { padding-block:24px 48px; }
.kk-store .kk-sk-narrow { max-width:720px; }
.kk-store .kk-sk-center { margin-inline:auto; }
.kk-store .kk-sk-mt6 { margin-top:6px; }
.kk-store .kk-sk-mt8 { margin-top:8px; }
.kk-store .kk-sk-mt10 { margin-top:10px; }
.kk-store .kk-sk-mt12 { margin-top:12px; }
.kk-store .kk-sk-mt16 { margin-top:16px; }
.kk-store .kk-sk-mt24 { margin-top:24px; }

/* Page heading, in outline. */
.kk-store .kk-sk-heading { margin-bottom:22px; }
.kk-store .kk-sk-heading > .kk-sk:nth-child(2) { grid-area:title; margin-top:8px; }
.kk-store .kk-sk-heading-note { grid-area:note; justify-self:end; }
.kk-store .kk-sk-shead { margin-bottom:14px; }

/* Cards borrow the real card shells; these fill them. */
.kk-store .kk-sk-card { pointer-events:none; }
.kk-store .kk-sk-media { position:relative; }
.kk-store .kk-sk-fill { position:absolute; inset:0; border-radius:0; }
.kk-store .kk-sk-fav { position:absolute; right:8px; top:8px; background:#ffffff8c; animation:none; }
.kk-store .kk-sk-body { display:grid; gap:12px; padding:14px 14px 16px; }
.kk-store .kk-sk-brand { margin-top:-36px; border:3px solid #fff; }
.kk-store .kk-sk-price { display:grid; gap:6px; }
.kk-store .kk-sk-panel { padding:18px 20px; }
.kk-store .kk-sk-panel-head { display:grid; gap:8px; margin-bottom:14px; }

/* Listing: the filter rail and the product grid, at the real proportions. */
.kk-store .kk-sk-listing { display:grid; grid-template-columns:272px minmax(0,1fr); gap:28px; align-items:start; margin-top:18px; }
.kk-store .kk-sk-rail { display:grid; gap:14px; }
.kk-store .kk-sk-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.kk-store .kk-sk-listing-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }

/* Product page: gallery and sections beside the booking box. */
.kk-store .kk-sk-product { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start; margin-top:22px; }
.kk-store .kk-sk-product-image { width:100%; }
.kk-store .kk-sk-tabs { display:flex; gap:22px; padding:6px 0; border-bottom:1px solid var(--kk-line); }
.kk-store .kk-sk-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.kk-store .kk-sk-booking { position:sticky; top:16px; }

/* Cart. */
.kk-store .kk-sk-cart { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; margin-top:18px; }

/* Seller page: a pale hero band, then the two columns. */
.kk-store .kk-sk-hero { background:linear-gradient(180deg,#eaf7fe,#fff); border-bottom:1px solid var(--kk-line); }
.kk-store .kk-sk-hero-body { padding:32px 0 28px; }
.kk-store .kk-sk-cols { padding-block:40px 12px; }

/* Account nav. */
.kk-store .kk-sk-nav { display:grid; gap:6px; padding:16px; }
.kk-store .kk-sk-nav-user { padding:0 0 14px; margin-bottom:8px; border-bottom:1px solid #edf4f8; }
.kk-store .kk-sk-nav-item { padding:10px 8px; }

/* Inline section fallbacks on a seller's page. */
.kk-store .kk-sk-hours-status { padding:16px 22px; background:var(--seller-soft, #eef5f9); }
.kk-store .kk-sk-hours-row { padding:10px 22px; border-top:1px solid #edf4f8; }
.kk-store .kk-sk-reviews { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }

@media(max-width:991px) {
  .kk-store .kk-sk-listing, .kk-store .kk-sk-product, .kk-store .kk-sk-cart { grid-template-columns:1fr; }
  .kk-store .kk-sk-rail { display:none; }
  .kk-store .kk-sk-booking { position:static; }
  .kk-store .kk-sk-listing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kk-store .kk-sk-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kk-store .kk-sk-reviews { grid-template-columns:1fr; }
  .kk-store .kk-sk-hero-body .kk-sk:first-child { width:56px!important; height:56px!important; }
}

/* ── Phones: provider choice rows and package-card actions ─────────────────────────
   The provider row keeps price and button on one line, the button sized to its word.
   Package cards drop the word on the compare button — icon only, like every other card. */
@media (max-width:560px) {
  .kk-store .kk-product-offers { gap:10px; }
  .kk-store .kk-product-offer { gap:10px; padding:12px 14px 13px; border-radius:12px; }
  .kk-store .kk-product-offer h3 { font-size:14px; margin:0 0 3px; }
  .kk-store .kk-product-offer a { font-size:11.5px; }
  .kk-store .kk-product-offer small { margin-top:3px; }
  .kk-store .kk-product-offer-action { gap:12px; margin-top:8px; padding-top:10px; border-top:1px solid var(--kk-line); }
  .kk-store .kk-product-offer.is-selected .kk-product-offer-action { border-top-color:var(--kk-primary-200); }
  .kk-store .kk-product-offer-action strong { font-size:17px; letter-spacing:-.3px; line-height:1.2; }
  .kk-store .kk-pkg-compare-label { display:none; }
  .kk-store .kk-pkg-actions .kk-pkg-compare { gap:0; padding:0; }
  .kk-store .kk-pkg-body { gap:6px; padding:11px 12px 12px; }
  .kk-store .kk-pkg-meta { font-size:11px; }
  .kk-store .kk-pkg-price { padding-top:8px; }
  .kk-store .kk-pkg-price small { font-size:10px; }
  .kk-store .kk-pkg-actions { gap:6px; margin-top:8px; }
  .kk-store .kk-pkg-actions .kk-pkg-compare,.kk-store .kk-pkg-actions .kk-pkg-ghost { min-height:36px; height:36px; }
}
@layer premium {
  @media (max-width:560px) {
    /* Legacy theme and the booking box both stretch buttons on phones; this one is a chip. */
    .kk-store .kk-product-offer-action button { flex:0 0 auto!important; width:auto!important; min-width:104px; min-height:36px!important; height:36px!important; padding:0 16px!important; border-radius:9px!important; font-size:12.5px!important; font-weight:600; line-height:1!important; }
  }
}

/* ── Promotions beside a price (product page, checkout coupon) ─────────────────────
   A ticket-stub card. One line per deal — icon, what you get, the code — and the fine
   print folds out on tap. Tones: percent (blue), fixed (green), gift (violet), auto
   (amber) so the eye sorts the list before reading it. */
.kk-store .kk-deals { --deal-line:#dbe9f2; position:relative; margin-top:14px; padding:12px 14px 4px; border:1px solid var(--deal-line); border-radius:16px; background:linear-gradient(180deg,#ffffff 0%,#f5faff 100%); box-shadow:0 1px 0 #fff inset, 0 10px 28px -22px #0e355066; }
.kk-store .kk-deals-head { display:flex; align-items:center; gap:10px; margin:0 0 4px; padding-bottom:10px; border-bottom:1px dashed var(--deal-line); }
.kk-store .kk-deals-mark { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:10px; background:linear-gradient(135deg,#fff1ea,#ffd9c9); color:var(--kk-secondary-deep); box-shadow:0 1px 0 #fff inset; }
.kk-store .kk-deals-mark svg { width:17px; height:17px; }
.kk-store .kk-deals-head h3 { flex:1; min-width:0; margin:0; font-size:13.5px; line-height:1.3; font-weight:700; letter-spacing:.01em; color:var(--kk-primary-900); }
.kk-store .kk-deals-count { display:grid; place-items:center; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--kk-primary-900); color:#fff; font-size:11px; line-height:1; font-weight:700; }
.kk-store .kk-deals ul { margin:0; padding:0; list-style:none; }
.kk-store .kk-deals > ul > li + li { border-top:1px solid #e8f1f7; }
.kk-store .kk-deal > summary { display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 0; cursor:pointer; list-style:none; border-radius:10px; transition:background .15s; }
.kk-store .kk-deal > summary::-webkit-details-marker { display:none; }
.kk-store .kk-deal > summary:hover { background:#ffffffb3; }
.kk-store .kk-deal-icon { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:11px; color:#fff; box-shadow:0 1px 0 #ffffff66 inset, 0 6px 14px -8px #0e355080; }
.kk-store .kk-deal-icon svg { width:18px; height:18px; }
.kk-store .kk-deal.is-percent .kk-deal-icon { background:linear-gradient(135deg,#3b86c9,#0b5c99); }
.kk-store .kk-deal.is-fixed .kk-deal-icon { background:linear-gradient(135deg,#3fb27f,#177a52); }
.kk-store .kk-deal.is-gift .kk-deal-icon { background:linear-gradient(135deg,#9b7bea,#6a44c9); }
.kk-store .kk-deal.is-auto .kk-deal-icon { background:linear-gradient(135deg,#f6b64a,#d98a12); }
.kk-store .kk-deal-title { flex:1; min-width:0; font-size:13.5px; font-weight:600; line-height:1.45; color:var(--kk-ink); }
.kk-store .kk-deal-auto { flex-shrink:0; display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:999px; background:#fff5e3; border:1px solid #f4d9a4; color:#8a5a08; font-size:11px; font-weight:700; letter-spacing:.04em; }
/* The code, drawn as a ticket stub: dashed edge, a notch either side. */
.kk-store .kk-deal-code { position:relative; display:inline-flex; align-items:center; flex-shrink:0; min-height:0; height:32px; padding:0; border:1px dashed var(--kk-secondary); border-radius:9px; background:#fff8f4; color:var(--kk-secondary-deep); cursor:pointer; overflow:hidden; transition:background .15s, border-color .15s, transform .12s; }
.kk-store .kk-deal-code code { padding:0 10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; font-weight:700; letter-spacing:.07em; color:inherit; background:none; }
.kk-store .kk-deal-code > span { display:inline-flex; align-items:center; gap:5px; height:100%; padding:0 9px; background:var(--kk-secondary-deep); color:#fff; font-size:11px; font-weight:700; letter-spacing:.03em; }
.kk-store .kk-deal-code > span svg { width:13px; height:13px; }
.kk-store .kk-deal-code.is-done { border-style:solid; border-color:var(--kk-success); background:var(--kk-success-bg); color:var(--kk-success); }
.kk-store .kk-deal-code.is-done > span { background:var(--kk-success); }
.kk-store .kk-deal-code:hover { background:#ffeee4; border-color:var(--kk-secondary-deep); }
.kk-store .kk-deal-code:active { transform:scale(.98); }
.kk-store .kk-deal-code:focus-visible { outline:2px solid var(--kk-secondary-deep); outline-offset:2px; }
.kk-store .kk-deal-chevron { width:16px; height:16px; flex-shrink:0; color:#8aa6b7; transition:transform .18s; }
.kk-store .kk-deal[open] .kk-deal-chevron { transform:rotate(180deg); }
.kk-store .kk-deal-detail { margin:0 0 12px 46px; padding:10px 12px; border-radius:11px; background:#ffffffcc; border:1px solid #e8f1f7; }
.kk-store .kk-deal-detail p { margin:0 0 8px; font-size:12.5px; line-height:1.6; color:var(--kk-muted-deep,#4b6373); }
.kk-store .kk-deal-facts { display:grid; gap:5px; }
.kk-store .kk-deal-facts li { display:flex; align-items:center; gap:7px; font-size:11.5px; line-height:1.5; color:var(--kk-ink); }
.kk-store .kk-deal-facts svg { width:14px; height:14px; flex-shrink:0; color:var(--kk-primary-700); }
/* Narrow columns (the booking box, phones): title on its own line beside the icon,
   the code beneath it, the chevron staying up where the thumb expects it. */
.kk-store .kk-deals.is-compact .kk-deal > summary { display:grid; grid-template-columns:36px minmax(0,1fr) auto; column-gap:10px; row-gap:6px; align-items:center; padding:9px 0; }
.kk-store .kk-deals.is-compact .kk-deal-icon { grid-column:1; grid-row:1 / span 2; align-self:start; }
.kk-store .kk-deals.is-compact .kk-deal-title { grid-column:2; grid-row:1; }
.kk-store .kk-deals.is-compact .kk-deal-chevron { grid-column:3; grid-row:1; }
.kk-store .kk-deals.is-compact .kk-deal-code, .kk-store .kk-deals.is-compact .kk-deal-auto { grid-column:2 / -1; grid-row:2; justify-self:start; }
.kk-store .kk-deals.is-compact .kk-deal.is-auto > summary .kk-deal-icon { grid-row:1 / span 2; }
.kk-store .kk-coupon .kk-deals { margin-top:12px; padding:0; border:0; background:none; box-shadow:none; }
.kk-store .kk-coupon .kk-deals-head { border-bottom-color:#e3eef5; }
@media (max-width:560px) {
  .kk-store .kk-deal > summary { display:grid; grid-template-columns:36px minmax(0,1fr) auto; column-gap:10px; row-gap:6px; align-items:center; padding:9px 0; }
  .kk-store .kk-deal-icon { grid-column:1; grid-row:1 / span 2; align-self:start; }
  .kk-store .kk-deal-title { grid-column:2; grid-row:1; }
  .kk-store .kk-deal-chevron { grid-column:3; grid-row:1; }
  .kk-store .kk-deal-code, .kk-store .kk-deal-auto { grid-column:2 / -1; grid-row:2; justify-self:start; }
}
@layer premium {
  /* The checkout grid forces full-width 48px buttons; the code chip opts out. */
  .kk-store .kk-deal-code { width:auto!important; min-height:0!important; }
}

/* ── Desktop booking box: the add-to-cart button never scrolls out of the box ──────
   The box scrolls inside itself when the page is short; the button stays pinned to its
   bottom edge, the note and cart link tucked beneath it. */
@media (min-width:901px) {
  /* Just the button, floating over whatever scrolls beneath — no white strip. */
  .kk-store .kk-product-booking > .kk-add-button { position:sticky; bottom:0; z-index:2; box-shadow:0 10px 24px -12px #0e355059; }
}

/* ── Product heading: category left, "save for later" right, on one row above the title ─ */
.kk-store .kk-product-heading-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.kk-store .kk-product-heading-top .kk-directory-kicker { margin:0; }
.kk-store .kk-product-heading-top .kk-product-save { margin:0; flex-shrink:0; padding:8px 13px; border-radius:10px; font-size:12.5px; }
@media (max-width:550px) {
  .kk-store .kk-product-heading-top { margin-bottom:8px; }
  .kk-store .kk-product-heading-top .kk-product-save { padding:7px 11px; font-size:12px; }
}

/* Compact product heading: the eyebrow row, the title and the provider line sit close,
   like one label — the page's real content starts right underneath. */
.kk-store .kk-product-heading { padding-block:16px 14px; }
.kk-store .kk-product-heading h1 { font-size:clamp(22px,2.2vw,30px); line-height:1.35; margin:0 0 8px; letter-spacing:-.2px; }
.kk-store .kk-product-heading-top { margin-bottom:2px; min-height:34px; }
.kk-store .kk-product-heading-top .kk-directory-kicker { font-size:10.5px; letter-spacing:1.6px; }
.kk-store .kk-product-heading-top .kk-product-save { padding:6px 12px; font-size:12px; border-radius:9px; }
.kk-store .kk-product-heading-top .kk-product-save svg { width:15px; height:15px; }
.kk-store .kk-product-heading .kk-product-byline { font-size:13px; }
@media (max-width:900px) { .kk-store .kk-product-heading { padding-block:14px 12px; } }

/* ── Desktop booking box: the price stays at the top while the box scrolls ────────────
   Mirror of the pinned add-to-cart button: price above, button below, everything else
   scrolls between them. The hard white shadow covers the box's top padding so text
   never peeks out above the price. */
@media (min-width:901px) {
  .kk-store .kk-product-booking .kk-product-price { position:sticky; top:0; z-index:3; background:#fff; padding-bottom:10px; margin-bottom:2px; box-shadow:0 -20px 0 0 #fff, 0 10px 12px -12px #0e355033; }
}