/* Khuttwa – Unbox card, Brand cover, Brand switcher. All values come from section settings as CSS variables. */
.kbr { --kbr-dark: var(--kx-dark, #111); --kbr-light: var(--kx-cream, #F3EDE3); --kbr-card: var(--kx-paper, #fff); --kbr-accent: var(--kx-accent, #C9423B); --kbr-radius: 30px; --kbr-fit: contain; --kbr-img: var(--kx-tile, #F5F3EE); display: block; }
.kbr-rail { display: flex; gap: var(--kbr-gap, 10px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kbr-rail::-webkit-scrollbar { display: none; }
.kbr-rail > * { flex: none; scroll-snap-align: start; }
.kbr-va { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; background: var(--kbr-btn-bg, var(--kbr-dark)); color: var(--kbr-btn-text, #fff); font-weight: 700; font-size: 1.35rem; border-radius: 99px; padding: 5px 5px 5px 18px; text-decoration: none; }
.kbr-va i { width: 36px; height: 36px; border-radius: 50%; background: var(--kbr-btn-circle, var(--kbr-light)); color: var(--kbr-btn-arrow, var(--kbr-dark)); display: grid; place-items: center; font-style: normal; transition: transform .3s ease; }
.kbr-va:hover i { transform: translate(2px, -2px); }
.kbr-head { margin-bottom: 14px; }
.kbr-head h2 { margin: 0; font-size: var(--kbr-h, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }

/* mini card */
.kmc { position: relative; width: var(--kbr-card-w, 150px); background: var(--kbr-card); color: var(--kbr-card-text, var(--kx-dark-ink, #111)); border-radius: calc(var(--kbr-radius) - 8px); padding: 8px 8px 10px; }
.kmc__heart { position: absolute; z-index: 3; top: 14px; inset-inline-end: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--kx-paper, #fff); color: var(--kx-dark-ink, #111); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 14px -8px rgba(0,0,0,.45); transition: transform .2s ease, background .2s ease, color .2s ease; }
.kmc__heart:active { transform: scale(.88); }
.kmc__heart.active { background: var(--kbr-accent, var(--kx-accent, #C9423B)); color: #fff; }
.kmc__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kmc__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--kbr-img); border-radius: calc(var(--kbr-radius) - 12px); }
.kmc__img img, .kmc__img svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--kbr-fit); }
.kmc__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 2px 5px; font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: inherit; text-decoration: none; min-height: 2.6em; }
.kmc__f { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px; }
.kmc__p { font-size: 1.3rem; font-weight: 800; color: var(--kbr-price, inherit); }
.kmc__p s { display: block; font-size: 1.05rem; font-weight: 500; opacity: .5; }
.kbr .kd-form, .kbr .kd-form form { display: contents; }
.kbr .kd-cart.kmc-cart, .kbr .kd-cart.kub-cart { position: relative; z-index: 3; flex: none; width: 36px; height: 36px; min-width: 0; padding: 0; border: 0; border-radius: 50%; background: var(--kbr-dark); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .2s ease; }
.kbr .kd-cart.kmc-cart:active, .kbr .kd-cart.kub-cart:active { transform: scale(.9); }
.kbr .kd-cart.kmc-cart > *, .kbr .kd-cart.kub-cart > * { grid-area: 1 / 1; }
.kbr .kd-cart.kmc-cart span, .kbr .kd-cart.kub-cart span { display: none; }
.kbr .kd-cart .icon-load { opacity: 0; } .kbr .kd-cart.loading .icon-load { opacity: 1; } .kbr .kd-cart.loading .hidden-on-load { opacity: 0; }
.kbr .kd-cart .kd-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- Unbox card ---------- */
.kub__box { position: relative; overflow: hidden; background: var(--kub-bg, var(--kx-dark, #111)); color: var(--kub-text, #fff); border-radius: var(--kbr-radius); padding: 16px; }
.kub__big { position: absolute; top: 44px; inset-inline-start: -6px; font-size: var(--kub-big, 118px); font-weight: 900; letter-spacing: -.07em; line-height: .8; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--kub-text, #fff) 16%, transparent); pointer-events: none; }
.kub__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.kub__stamp { background: var(--kbr-accent); color: var(--kub-stamp-text, #fff); font-size: 1.05rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; border-radius: 99px; }
.kub__num { font-size: 1.2rem; font-weight: 700; opacity: .6; } .kub__num b { font-size: 1.8rem; }
.kub__stage { display: grid; position: relative; z-index: 1; }
.kub__item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .45s; }
.kub__item.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease .15s, visibility 0s; }
.kub__img { position: relative; display: block; height: var(--kub-img-h, 240px); margin: 6px 0 10px; transform: translateX(40px) rotate(8deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.kub__item.is-on .kub__img { transform: none; transition-delay: .15s; }
.kub__img img, .kub__img svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--kbr-fit); border-radius: calc(var(--kbr-radius) - 12px); }
.kub__img.has-bg { background: var(--kbr-img); border-radius: calc(var(--kbr-radius) - 12px); overflow: hidden; }
.kub__t { display: block; font-size: var(--kub-title, 17px); font-weight: 700; line-height: 1.25; color: inherit; text-decoration: none; }
.kub__ago { font-size: 1.1rem; opacity: .6; margin: 4px 0 12px; min-height: 1.4em; }
.kub__f { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kub__p { font-size: 1.6rem; font-weight: 800; color: var(--kub-price, var(--kx-cream-ink, #F3EDE3)); }
.kub__p s { margin-inline-start: 6px; font-size: 1.15rem; font-weight: 500; opacity: .5; }
.kbr .kub__box .kd-cart.kub-cart { width: 42px; height: 42px; background: var(--kbr-light); color: var(--kbr-dark); }
.kub__dock { display: flex; gap: 6px; background: var(--kub-dock, var(--kx-cream, #F3EDE3)); border-radius: 22px; padding: 6px; margin-top: 8px; }
.kub__dock button { position: relative; flex: 1; max-width: 76px; aspect-ratio: 1; border-radius: 16px; background: var(--kbr-card); border: 2px solid transparent; padding: 0; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .25s ease, border-color .25s ease; }
.kub__dock button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.kub__dock button.is-on { opacity: 1; border-color: var(--kbr-dark); }
@media (min-width: 750px) {
  .kub { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: center; }
  .kub .kbr-head { grid-column: 1 / -1; margin-bottom: 0; }
  .kub__img { height: calc(var(--kub-img-h, 240px) * 1.5); }
  .kub__side { display: flex; flex-direction: column; justify-content: center; }
  .kub__dock { flex-wrap: wrap; }
}

/* ---------- Brand cover ---------- */
.kbc2__cover { position: relative; overflow: hidden; background: var(--kbc2-bg, var(--kx-dark, #111)); color: var(--kbc2-text, #fff); border-radius: var(--kbr-radius); padding: 18px 16px calc(var(--kbc2-overlap, 78px) + 18px); }
.kbc2__cover.has-img::before { content: ""; position: absolute; inset: 0; background: var(--kbc2-img) center / cover no-repeat; opacity: var(--kbc2-img-o, .35); }
.kbc2__cover > * { position: relative; }
.kbc2__wm { position: absolute !important; inset-inline-end: -14px; bottom: calc(var(--kbc2-overlap, 78px) - 18px); font-size: var(--kbc2-wm, 92px); font-weight: 900; letter-spacing: -.06em; line-height: .8; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--kbc2-text, #fff) 18%, transparent); transform: rotate(-8deg); pointer-events: none; }
.kbc2__lg { width: var(--kbc2-lg, 56px); height: var(--kbc2-lg, 56px); border-radius: 32%; background: var(--kbr-light); color: var(--kbr-dark); display: grid; place-items: center; overflow: hidden; margin-bottom: 14px; font-weight: 900; font-size: 1.3rem; letter-spacing: -.03em; }
.kbc2__lg img { width: 100%; height: 100%; object-fit: contain; padding: 14%; display: block; }
.kbc2__lg--cover { background: var(--kx-paper, #fff); }
.kbc2__lg--cover img { object-fit: cover; padding: 0; }
.kbc2__k { display: block; font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .6; }
.kbc2__h { margin: 6px 0 8px; font-size: var(--kbr-h, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; color: inherit; }
.kbc2__d { font-size: 1.3rem; line-height: 1.45; opacity: .78; max-width: 34ch; } .kbc2__d p { margin: 0; color: inherit; }
.kbc2__stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.kbc2__stats span { background: color-mix(in srgb, var(--kbc2-text, var(--kx-paper, #fff)) 14%, transparent); border-radius: 99px; padding: 7px 12px; font-size: 1.1rem; font-weight: 700; }
.kbc2 .kbr-rail { position: relative; z-index: 2; margin-top: calc(-1 * var(--kbc2-overlap, 78px)); padding-inline: 16px; scroll-padding-inline: 16px; }
.kbc2 .kmc { box-shadow: 0 14px 28px -18px rgba(0,0,0,.5); }
@media (min-width: 750px) { .kbc2__cover { padding: 34px 34px calc(var(--kbc2-overlap, 78px) + 34px); } .kbc2 .kbr-rail { padding-inline: 34px; scroll-padding-inline: 34px; } .kbc2__wm { font-size: calc(var(--kbc2-wm, 92px) * 2); } }

/* ---------- Brand switcher ---------- */
.kbs2__logos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; padding-top: 4px; }
.kbs2__logos::-webkit-scrollbar { display: none; }
.kbs2__logos button { position: relative; flex: none; width: var(--kbs2-tile, 66px); height: var(--kbs2-tile, 66px); border-radius: 22px; border: 0; padding: 0; overflow: hidden; background: var(--kbr-card); color: color-mix(in srgb, var(--kbr-dark) 55%, transparent); font: inherit; font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease; }
.kbs2__logos button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18%; transition: filter .25s ease; }
.kbs2__logos button.is-on { background: var(--kbr-dark); color: #fff; transform: translateY(-3px); }
.kbs2__logos button.is-on img.kbs2-inv { filter: brightness(0) invert(1); }
.kbs2__panel { display: none; border-radius: var(--kbr-radius); padding: 16px 14px; background: var(--kbs2-bg, var(--kx-dark, #111)); color: var(--kbs2-text, #fff); }
.kbs2__panel.is-on { display: block; animation: kbs2In .4s both; }
@keyframes kbs2In { from { opacity: 0; transform: translateY(10px); } }
.kbs2__t { margin: 0; font-size: var(--kbs2-title, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: inherit; }
.kbs2__d { font-size: 1.2rem; opacity: .78; margin: 6px 0 12px; } .kbs2__d p { margin: 0; color: inherit; }
.kbs2__panel .kbr-rail { margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; }
.kbs2__panel .kbr-va { background: color-mix(in srgb, var(--kbs2-text, var(--kx-paper, #fff)) 16%, transparent); color: var(--kbs2-text, #fff); }
@media (prefers-reduced-motion: reduce) { .kbr *, .kbr *::before { animation: none !important; transition: none !important; } }