/* --- the shared block container ---------------------------------------------
   Every block roots on .tk-block and hands getBlockContainerStyle() its seven container props
   as --block-container-* variables. An unset device inherits the next wider one purely
   through the var fallback chain, so no block ships breakpoint logic.

   A block that wants spacing of its own when none is set declares it as
   --block-default-padding-block / -inline on its root class, never as padding: a
   padding declared there comes after these rules and would override the tablet and
   mobile values at every width. */
/* The desktop side gutter is the theme's `--tk-gutter` (spacing.gutter). This
   layer must NOT redefine it at full width - doing so here, after the theme's
   :root, is what made the theme value have no effect. Phones get an independent,
   tighter gutter derived from the merchant's value via the never-overridden
   `--tk-gutter-desktop` base, so it follows the theme on desktop yet stays
   comfortable on small screens without a separate setting. */
@media (max-width: 767px) {
  :root {
    --tk-gutter: min(var(--tk-gutter-desktop), 16px);
  }
}

.tk-block,
.tk-block *,
.tk-block *::before,
.tk-block *::after {
  box-sizing: border-box;
}

/* Custom properties inherit, so without this a block nested in a slot would paint its
   parent's background, padding and corners. Resetting them here scopes each block to
   its own values: the inline style from getBlockContainerStyle() still wins. */
.tk-block {
  --block-container-padding-block: initial;
  --block-container-padding-block-tablet: initial;
  --block-container-padding-block-mobile: initial;
  --block-container-padding-inline: initial;
  --block-container-padding-inline-tablet: initial;
  --block-container-padding-inline-mobile: initial;
  --block-container-margin-block: initial;
  --block-container-margin-block-tablet: initial;
  --block-container-margin-block-mobile: initial;
  --block-container-margin-inline: initial;
  --block-container-margin-inline-tablet: initial;
  --block-container-margin-inline-mobile: initial;
  --block-container-background: initial;
  --block-container-background-image: initial;
  --block-container-background-image-mobile: initial;
  --block-container-background-fit: initial;
  --block-container-background-position: initial;
  --block-container-overlay: initial;
  --block-container-overlay-opacity: initial;
  --block-container-radius: initial;
  --block-container-shadow: initial;
  --block-default-padding-block: initial;
  --block-default-padding-inline: initial;
}

.tk-block {
  position: relative;
  min-width: 0;
  max-width: 100%;
  padding-block: var(--block-container-padding-block, var(--block-default-padding-block, 0));
  padding-inline: var(--block-container-padding-inline, var(--block-default-padding-inline, 0));
  margin-block: var(--block-container-margin-block, 0);
  margin-inline: var(--block-container-margin-inline, 0);
  background-color: var(--block-container-background, transparent);
  background-image: var(--block-container-background-image, none);
  background-size: var(--block-container-background-fit, cover);
  background-position: var(--block-container-background-position, center);
  background-repeat: no-repeat;
  border-radius: var(--block-container-radius, 0);
  box-shadow: var(--block-container-shadow, none);
  color: var(--tk-color-text);
  font-family: var(--tk-font-body, 'Noto Kufi Arabic', 'Cairo', 'Inter', sans-serif);
}

.tk-block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--block-container-overlay, transparent);
  opacity: var(--block-container-overlay-opacity, 0);
  pointer-events: none;
}

.tk-block > * {
  position: relative;
}

.tk-block input:focus,
.tk-block input:focus-visible {
  outline: none;
}

/* One keyboard focus ring for every control a block draws that sets none of its
   own. :where() keeps it as light as a single-class rule, so a block's own
   :focus-visible style - loaded after this sheet - still wins. Text fields are
   left out: each block draws their focus as a border and a soft ring. */
.tk-block :where(
  a[href],
  button,
  summary,
  select,
  [role="button"],
  [role="checkbox"],
  [role="radio"],
  [role="slider"],
  [role="switch"],
  [role="tab"],
  [tabindex]:not([tabindex="-1"]),
  input[type="checkbox"],
  input[type="radio"]
):focus-visible {
  outline: 2px solid var(--tk-color-primary);
  outline-offset: 2px;
}

.tk-editable-slot,
[data-puck-dropzone] {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/*
  Restore full-width for slot wrappers whose parent is a block-level container
  (Section inner, Box, Rows). In flex/grid parents (Flex, Columns, Grid) the
  parent controls item sizing, so width:100% is set per-layout in each block's
  own stylesheet — not here in the shared base.
*/
.tk-section-inner > .tk-editable-slot,
.tk-box > .tk-editable-slot,
.tk-rows > .tk-editable-slot {
  width: 100%;
}

.tk-block :where(h1, h2, h3, h4, h5, h6) {
  color: var(--tk-color-heading);
  font-family: var(--tk-font-heading, 'Noto Kufi Arabic', 'Cairo', 'Inter', sans-serif);
}

@media (max-width: 1023px) {
  .tk-block {
    padding-block: var(--block-container-padding-block-tablet, var(--block-container-padding-block, var(--block-default-padding-block, 0)));
    padding-inline: var(--block-container-padding-inline-tablet, var(--block-container-padding-inline, var(--block-default-padding-inline, 0)));
    margin-block: var(--block-container-margin-block-tablet, var(--block-container-margin-block, 0));
    margin-inline: var(--block-container-margin-inline-tablet, var(--block-container-margin-inline, 0));
  }
}

@media (max-width: 767px) {
  .tk-block {
    padding-block: var(--block-container-padding-block-mobile, var(--block-container-padding-block-tablet, var(--block-container-padding-block, var(--block-default-padding-block, 0))));
    padding-inline: var(--block-container-padding-inline-mobile, var(--block-container-padding-inline-tablet, var(--block-container-padding-inline, var(--block-default-padding-inline, 0))));
    margin-block: var(--block-container-margin-block-mobile, var(--block-container-margin-block-tablet, var(--block-container-margin-block, 0)));
    margin-inline: var(--block-container-margin-inline-mobile, var(--block-container-margin-inline-tablet, var(--block-container-margin-inline, 0)));
    background-image: var(--block-container-background-image-mobile, var(--block-container-background-image, none));
  }
}
.tk-wrap {
  width: 100%;
  max-width: var(--tk-content-width);
  margin-inline: auto;
}

/* When any block or container with .tk-wrap is nested inside a Section, Column, Box, Flex, or Grid,
   it neutralizes default section paddings and fills its container completely. */
:where(.tk-section, .tk-column, .tk-box, .tk-flex, .tk-grid) .tk-block {
  --block-default-padding-block: 0;
  --block-default-padding-inline: 0;
}

:where(.tk-section, .tk-column, .tk-box, .tk-flex, .tk-grid) .tk-wrap {
  max-width: 100%;
}

.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--tk-button-padding-y) var(--tk-button-padding-x);
  border-style: solid;
  border-width: var(--tk-button-border-width, 0px);
  border-color: var(--tk-button-outline, transparent);
  border-start-start-radius: var(--tk-button-radius-top-start);
  border-start-end-radius: var(--tk-button-radius-top-end);
  border-end-end-radius: var(--tk-button-radius-bottom-end);
  border-end-start-radius: var(--tk-button-radius-bottom-start);
  background: var(--tk-button-bg, #111111);
  box-shadow: var(--tk-button-shadow);
  color: var(--tk-button-text, #ffffff);
  font-family: var(--tk-font-body);
  font-size: var(--tk-button-font-size);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.tk-btn:hover {
  border-color: var(--tk-button-outline-hover, var(--tk-button-outline, transparent));
  background: var(--tk-button-hover-bg, var(--tk-button-bg, #111111));
  color: var(--tk-button-hover-text, var(--tk-button-text, #ffffff));
}

/*
 * Entrance animations.
 *
 * The animation itself is declared unconditionally below, so a visitor with no
 * JavaScript gets the old behaviour: every section animates during the first
 * paint and ends up visible. When `BlockAnimationObserver` is mounted it puts
 * `tk-anim-js` on <html>, which switches on the holding rule underneath: a
 * block then waits at its pre-animation frame until the observer marks it
 * `is-in-view`. That is what stops sections below the fold from animating
 * while nobody is looking at them.
 */
.tk-anim {
  animation-delay: var(--anim-delay, 0s);
  animation-duration: var(--anim-dur, 0.6s);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.tk-anim-fade {
  animation-name: tkFade;
}

.tk-anim-up {
  animation-name: tkUp;
}

.tk-anim-zoom {
  animation-name: tkZoom;
}

/* Hold the block before it is reached. Only ever active while the observer
   runs, and only until that block is revealed - never a lasting `opacity: 0`. */
.tk-anim-js .tk-anim:not(.is-in-view) {
  animation-name: none;
  opacity: 0;
}

@keyframes tkFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tkUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tkZoom {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-anim {
    animation: none !important;
  }

  /* Nothing animates here, so nothing may be held back either - otherwise a
     block whose reveal never fires would stay invisible for these visitors. */
  .tk-anim-js .tk-anim:not(.is-in-view) {
    opacity: 1;
  }
}

/* Sticky (Box, Column - see `stickySection`): the block stays in view while
   the rest of its column scrolls past - a buy box beside a long gallery. Wide
   screens only, where the columns sit side by side. */
@media (min-width: 1024px) {
  /* !important: the editor writes position: relative inline on a block it can
     drag, which would otherwise turn the sticky top into a downward shift. */
  .tk-sticky {
    position: sticky !important;
    inset-block-start: calc(var(--tk-sticky-top, 0px) + var(--sticky-offset, 0px));
  }
}

@media (min-width: 1024px) {
  .tk-hide-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tk-hide-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .tk-hide-mobile {
    display: none !important;
  }
}

/* Loading placeholder for a data block while its host resolves its data. */
.tk-skeleton {
  padding-block: var(--tk-section-padding-y);
  padding-inline: var(--tk-gutter);
}

.tk-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(var(--sk-columns, 4), minmax(0, 1fr));
  gap: 18px;
}

.tk-skeleton-card {
  display: block;
  aspect-ratio: var(--sk-ratio, 4 / 3);
  border-radius: var(--tk-control-radius, 12px);
  background: color-mix(in srgb, var(--tk-color-primary) 8%, #f0f0f3);
  animation: tk-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes tk-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Pending state: `.tk-spin` turns any icon, `.tk-spinner` is the ring drawn
   in a button while it works. */
.tk-spin {
  animation: tk-spin 0.8s linear infinite;
}

.tk-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 999px;
  animation: tk-spin 0.7s linear infinite;
}

@keyframes tk-spin {
  to { transform: rotate(360deg); }
}

/* A shopper who asked for less motion gets none: every block's transitions and
   animations finish at once, on their end state. A looping track whose copy is
   doubled (marquee, ticker) ends where it began, so it simply stands still.
   Only the pending spinners keep turning, slowly - they are the one sign that
   something is still working. */
@media (prefers-reduced-motion: reduce) {
  .tk-block,
  .tk-block *,
  .tk-block *::before,
  .tk-block *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .tk-block .tk-spin,
  .tk-block .tk-spinner {
    animation-duration: 2s !important;
    animation-iteration-count: infinite !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-spin,
  .tk-spinner {
    animation-duration: 2s;
  }
}

@media (max-width: 1023px) {
  .tk-skeleton-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tk-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The page keeps its end clear of whatever is pinned to the bottom of a phone
   screen. The mobile bar and a sticky buy button each publish their height in
   their own stylesheet; both are 0 when the page has neither. */
@media (max-width: 767px) {
  body {
    padding-block-end: calc(
      var(--tk-mobile-bar-offset, 0px) + var(--tk-sticky-buy-offset, 0px)
    );
  }
}

/* Shared by every product-detail block, so they stay consistent and none of
   them depends on another block's stylesheet being registered. */
.tk-product-section-title {
  margin: 0 0 18px;
  color: var(--tk-color-heading);
  font-family: var(--tk-font-heading);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.25;
}

.tk-product-empty {
  margin: 0;
  border: 1px dashed var(--tk-color-border);
  border-radius: var(--tk-control-radius, 10px);
  padding: 22px;
  color: var(--tk-color-muted-foreground);
  text-align: center;
}

/* Fractional star rating, shared by every block that shows one. */
.tk-stars {
  position: relative;
  display: inline-block;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}

.tk-stars-track {
  color: color-mix(in srgb, var(--tk-color-muted-foreground) 35%, transparent);
}

.tk-stars-fill {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  color: #f59e0b;
}

/* Hidden on screen, still read by assistive technology - e.g. a dialog title. */
.tk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* --- the shared button -------------------------------------------------------
   Every block that draws a button (Button, OrderActions, TrackOrderForm, …) uses
   .tk-button with one --{appearance} and one --{size} class, reading the --bt-*
   variables getButtonColorStyleVariables() writes. */
.tk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  border-start-start-radius: var(--bt-radius-ts, var(--tk-button-radius));
  border-start-end-radius: var(--bt-radius-te, var(--tk-button-radius));
  border-end-end-radius: var(--bt-radius-be, var(--tk-button-radius));
  border-end-start-radius: var(--bt-radius-bs, var(--tk-button-radius));
}

.tk-button--full { display: flex; width: 100%; }
.tk-button:disabled,
.tk-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}
.tk-button:focus-visible {
  outline: 2px solid var(--bt-bg, var(--tk-button-bg, #111111));
  outline-offset: 2px;
}
/* The theme's button padding and font size are the medium button; small and
   large scale around it, so a theme restyles every size at once. */
.tk-button--sm {
  padding: calc(var(--tk-button-padding-y) * 0.67) calc(var(--tk-button-padding-x) * 0.7);
  font-size: calc(var(--tk-button-font-size) - 1px);
}
.tk-button--md {
  padding: var(--tk-button-padding-y) var(--tk-button-padding-x);
  font-size: var(--tk-button-font-size);
}
.tk-button--lg {
  padding: calc(var(--tk-button-padding-y) * 1.33) calc(var(--tk-button-padding-x) * 1.3);
  font-size: calc(var(--tk-button-font-size) + 2px);
}

.tk-button--solid {
  background: var(--bt-bg, var(--tk-button-bg, #111111));
  color: var(--bt-text, var(--tk-button-text, #ffffff));
  border-color: var(--bt-border, var(--bt-bg, var(--tk-button-bg, #111111)));
}
.tk-button--solid:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--bt-hbg, var(--tk-button-hover-bg, #333333));
  color: var(--bt-htext, var(--tk-button-hover-text, #ffffff));
  border-color: var(--bt-hborder, var(--bt-hbg, var(--tk-button-hover-bg, #333333)));
}

.tk-button--outline {
  background: transparent;
  color: var(--bt-text, var(--tk-button-bg, #111111));
  border-color: var(--bt-border, var(--tk-button-bg, #111111));
}
.tk-button--outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--bt-hbg, var(--tk-button-bg, #111111));
  color: var(--bt-htext, var(--tk-button-text, #ffffff));
}

.tk-button--ghost {
  background: transparent;
  color: var(--bt-text, var(--tk-color-text));
  border-color: transparent;
}
.tk-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--bt-hbg, rgb(0 0 0 / 0.06)); }

.tk-button--link {
  background: transparent;
  border-color: transparent;
  padding-inline: 0;
  color: var(--bt-text, var(--tk-color-primary));
  text-decoration: underline;
  text-underline-offset: 4px;
}


.tk-radix-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--tk-layer-overlay);
  background: color-mix(in srgb, var(--tk-color-dark) 45%, transparent);
}

.tk-radix-backdrop[data-state="open"] {
  animation: tk-radix-fade-in 0.2s ease-out;
}

.tk-radix-backdrop[data-state="closed"] {
  animation: tk-radix-fade-out 0.18s ease-in;
}

@keyframes tk-radix-fade-in {
  from { opacity: 0; }
}

@keyframes tk-radix-fade-out {
  to { opacity: 0; }
}

/* Select - the BlockSelect fallback (block-radix/radix-select.tsx). The trigger
   keeps the caller's box, so these rules only lay out what is inside it. The
   list leaves the block's subtree and reads theme tokens only. */
.tk-select-trigger {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block: 0;
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.tk-select-trigger:disabled {
  cursor: not-allowed;
}

.tk-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-select-trigger[data-placeholder] .tk-select-value {
  color: var(--tk-input-placeholder);
}

.tk-select-icon {
  display: inline-grid;
  flex: 0 0 auto;
  color: var(--tk-color-muted-foreground);
  transition: transform 0.18s ease;
}

.tk-select-trigger[data-state="open"] .tk-select-icon {
  transform: rotate(180deg);
}

.tk-select-content {
  z-index: calc(var(--tk-layer-overlay) + 1);
  box-sizing: border-box;
  min-width: var(--radix-select-trigger-width);
  max-height: min(320px, var(--radix-select-content-available-height));
  overflow: hidden;
  border: var(--tk-input-border-width) solid var(--tk-input-border);
  border-radius: var(--tk-input-radius);
  background: var(--tk-color-surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
  color: var(--tk-input-text);
  font-family: var(--tk-font-body);
  font-size: 14px;
  transform-origin: var(--radix-select-content-transform-origin);
}

.tk-select-content[data-state="open"] {
  animation: tk-select-in 0.14s ease-out;
}

@keyframes tk-select-in {
  from { opacity: 0; transform: scale(0.97); }
}

.tk-select-viewport {
  padding: 4px;
}

.tk-select-item {
  position: relative;
  display: flex;
  min-height: 38px;
  align-items: center;
  padding-block: 8px;
  padding-inline: 10px 34px;
  border-radius: var(--tk-control-radius, 6px);
  cursor: pointer;
  line-height: 1.35;
  outline: none;
  user-select: none;
}

.tk-select-item[data-highlighted] {
  background: color-mix(in srgb, var(--tk-color-primary) 10%, transparent);
  color: var(--tk-color-primary);
}

.tk-select-item[data-state="checked"] {
  font-weight: 600;
}

.tk-select-item[data-disabled] {
  cursor: default;
  opacity: 0.5;
}

.tk-select-item-indicator {
  position: absolute;
  inset-inline-end: 10px;
  display: inline-grid;
}

.tk-select-scroll {
  display: grid;
  height: 24px;
  place-items: center;
  color: var(--tk-color-muted-foreground);
  cursor: default;
}

/* Dropdown Menu (Currency / Language Switchers) */
.tk-dropdown-content {
  z-index: calc(var(--tk-layer-overlay) + 10);
  box-sizing: border-box;
  min-width: 130px;
  overflow: hidden;
  padding: 6px;
  border: var(--tk-input-border-width) solid var(--tk-color-border);
  /* A menu is a panel, not a button: it follows the field radius like the
     select's list. The button radius can be a pill (999px), which would
     round a tall menu into a circle and clip its items. */
  border-radius: var(--tk-input-radius);
  background: var(--tk-color-surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
  color: var(--tk-color-text);
  font-family: var(--tk-font-body, inherit);
  font-size: 13px;
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

.tk-dropdown-content[data-state="open"] {
  animation: tk-select-in 0.14s ease-out;
}

.tk-dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  /* Rows sit inside the panel's 6px padding: their corners follow the
     panel's, minus that inset, so the two curves stay parallel. */
  border-radius: max(4px, calc(var(--tk-input-radius) - 6px));
  cursor: pointer;
  line-height: 1.35;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  outline: none;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
  color: var(--tk-color-text);
  text-decoration: none;
  border: 0;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}

.tk-dropdown-item[data-highlighted] {
  background: color-mix(in srgb, var(--tk-color-primary) 10%, transparent);
  color: var(--tk-color-primary);
}

.tk-dropdown-item[data-selected="true"] {
  background: var(--tk-color-primary);
  color: var(--tk-button-text, #ffffff);
  font-weight: 700;
}

.tk-dropdown-item[data-selected="true"][data-highlighted] {
  background: var(--tk-color-primary);
  color: var(--tk-button-text, #ffffff);
}

/*
  A dropdown that reads as a menu of pages rather than a list of codes: entries
  are icon + label, left-aligned and sentence-cased, so the switchers above keep
  their compact uppercase look while an account menu reads naturally.
*/
.tk-dropdown-content--menu {
  min-width: 190px;
}

.tk-dropdown-heading {
  padding: 7px 10px 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
}

.tk-dropdown-item--menu {
  gap: 10px;
  justify-content: flex-start;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
}

.tk-dropdown-item--menu svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.tk-dropdown-item--danger {
  color: var(--tk-color-danger);
}

.tk-dropdown-item--danger[data-highlighted] {
  background: color-mix(in srgb, var(--tk-color-danger) 10%, transparent);
  color: var(--tk-color-danger);
}

.tk-dropdown-separator {
  height: 1px;
  margin: 5px 4px;
  background: var(--tk-color-border);
}

.tk-dropdown-item-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .tk-radix-backdrop[data-state],
  .tk-select-content[data-state] {
    animation: none;
  }

  .tk-select-icon {
    transition: none;
  }
}


.tk-price-display {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.tk-price-display--inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.tk-price-display--stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.tk-price-display--sm {
  gap: 6px;
}

.tk-price-display--md {
  gap: 8px;
}

.tk-price-display--lg {
  gap: 10px;
}

.tk-price-display--stacked.tk-price-display--sm {
  gap: 2px;
}

.tk-price-display--stacked.tk-price-display--md {
  gap: 4px;
}

.tk-price-display--stacked.tk-price-display--lg {
  gap: 6px;
}

.tk-price-display__compare {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.tk-price-display--sm .tk-price-display__compare {
  gap: 4px;
}

.tk-price-display--lg .tk-price-display__compare {
  gap: 8px;
}


.tk-price-display__final {
  color: var(--tk-pd-price-color, var(--tk-color-heading));
  font-family: var(--tk-pd-price-font, inherit);
  font-size: var(--tk-pd-price-size, 15px);
  font-weight: var(--tk-pd-price-weight, 900);
  line-height: var(--tk-pd-price-line-height, normal);
  letter-spacing: var(--tk-pd-price-letter-spacing, normal);
  text-transform: var(--tk-pd-price-transform, none);
}

.tk-price-display--sm .tk-price-display__final {
  font-size: var(--tk-pd-price-size, 13px);
}

.tk-price-display--md .tk-price-display__final {
  font-size: var(--tk-pd-price-size, 15px);
}

.tk-price-display--lg .tk-price-display__final {
  font-size: var(--tk-pd-price-size, 20px);
}

/* Responsive price size, set through a `priceTypography` value (e.g. a product
   grid narrowing its card price on tablet/mobile). Only the desktop size class
   sets the base, so each device falls back to the next wider one. */
@media (max-width: 1023px) {
  .tk-price-display__final {
    font-size: var(--tk-pd-price-size-tablet, var(--tk-pd-price-size, 15px));
  }
}

@media (max-width: 767px) {
  .tk-price-display__final {
    font-size: var(
      --tk-pd-price-size-mobile,
      var(--tk-pd-price-size-tablet, var(--tk-pd-price-size, 15px))
    );
  }
}

.tk-price-display__original {
  color: var(--tk-pd-original-color, var(--tk-color-muted-foreground));
  font-size: 0.85em;
  text-decoration: line-through;
}

.tk-price-display__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border-start-start-radius: var(--tk-pd-badge-radius-ts, var(--tk-control-radius, 4px));
  border-start-end-radius: var(--tk-pd-badge-radius-te, var(--tk-control-radius, 4px));
  border-end-end-radius: var(--tk-pd-badge-radius-be, var(--tk-control-radius, 4px));
  border-end-start-radius: var(--tk-pd-badge-radius-bs, var(--tk-control-radius, 4px));
  transition: background 0.15s ease, color 0.15s ease;
}

.tk-price-display--sm .tk-price-display__badge {
  font-size: 10px;
  padding: 2px 4px;
}

.tk-price-display--lg .tk-price-display__badge {
  font-size: 12px;
  padding: 3px 8px;
}

.tk-price-display__badge--solid {
  background: var(--tk-pd-badge-bg, #dc2626);
  color: var(--tk-pd-badge-color, #ffffff);
}

.tk-price-display__badge--outline {
  background: transparent;
  color: var(--tk-pd-badge-bg, #dc2626);
  border: 1px solid var(--tk-pd-badge-bg, #dc2626);
}

.tk-price-display__badge--subtle {
  background: color-mix(in srgb, var(--tk-pd-badge-bg, #dc2626) 14%, transparent);
  color: var(--tk-pd-badge-bg, #dc2626);
}


.tk-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tk-accordion-list-item {
  overflow: hidden;
  border-style: solid;
  border-width: 1px;
  border-color: var(--accordion-list-border, var(--accordion-list-border-default, var(--tk-color-border)));
  border-radius: var(--accordion-list-radius, 0);
  background: var(--accordion-list-bg, var(--accordion-list-bg-default, var(--tk-color-surface)));
  box-shadow: var(--accordion-list-shadow-default, none);
  transition: border-color 0.2s ease;
}

.tk-accordion-list-item[data-state="open"] {
  border-color: color-mix(in srgb, var(--accordion-list-accent, var(--tk-color-primary)) 35%, transparent);
}

/* Appearances: CSS-only looks on the same markup, each tuning the "-default" branch.
   standard = a filled card with no outline · bordered = a card with an outline ·
   elevated = a card lifted by a shadow · minimal = plain rows split by divider lines. */
.tk-accordion-list--standard .tk-accordion-list-item {
  --accordion-list-bg-default: var(--tk-color-muted);
  --accordion-list-border-default: transparent;
}

.tk-accordion-list--bordered .tk-accordion-list-item {
  --accordion-list-bg-default: var(--tk-color-surface);
  --accordion-list-border-default: var(--tk-color-border);
}

.tk-accordion-list--elevated .tk-accordion-list-item {
  --accordion-list-bg-default: var(--tk-color-surface);
  --accordion-list-border-default: transparent;
  --accordion-list-shadow-default: 0 10px 28px color-mix(in srgb, var(--tk-shadow-color) 8%, transparent);
}

/* Divider lines only: no card, so no corners, no gap between the rows and no
   side inset - the questions line up with the copy around the list. */
.tk-accordion-list--minimal {
  gap: 0;
}

.tk-accordion-list--minimal .tk-accordion-list-item {
  border-width: 0 0 1px;
  border-radius: 0;
  --accordion-list-bg-default: transparent;
  --accordion-list-border-default: var(--tk-color-border);
}

.tk-accordion-list--minimal .tk-accordion-list-question,
.tk-accordion-list--minimal .tk-accordion-list-answer {
  padding-inline: 0;
}

.tk-accordion-list--corners-sharp { --accordion-list-radius: 0; }
.tk-accordion-list--corners-soft { --accordion-list-radius: var(--tk-control-radius, 8px); }
.tk-accordion-list--corners-rounded { --accordion-list-radius: var(--tk-control-radius, 12px); }
.tk-accordion-list--corners-large { --accordion-list-radius: var(--tk-control-radius, 18px); }

.tk-accordion-list-heading {
  margin: 0;
  font: inherit;
}

.tk-accordion-list-question {
  display: flex;
  width: 100%;
  border: 0;
  background: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  color: var(--accordion-list-question-color, var(--tk-color-heading));
  cursor: pointer;
  text-align: start;
  transition: color 0.2s ease;
}

.tk-accordion-list-question {
  font-family: var(--accordion-list-question-font, inherit);
  font-size: var(--accordion-list-question-size, 15px);
  font-weight: var(--accordion-list-question-weight, 600);
  line-height: var(--accordion-list-question-line-height, 1.5);
  letter-spacing: var(--accordion-list-question-letter-spacing, normal);
  text-transform: var(--accordion-list-question-transform, none);
}

@media (max-width: 1023px) {
  .tk-accordion-list-question {
    font-size: var(--accordion-list-question-size-tablet, var(--accordion-list-question-size, 15px));
  }
}

@media (max-width: 767px) {
  .tk-accordion-list-question {
    font-size: var(--accordion-list-question-size-mobile, var(--accordion-list-question-size-tablet, var(--accordion-list-question-size, 15px)));
  }
}

.tk-accordion-list-question:hover {
  color: var(--accordion-list-accent, var(--tk-color-primary));
}

.tk-accordion-list-question:focus-visible {
  outline: 2px solid var(--accordion-list-accent, var(--tk-color-primary));
  outline-offset: -2px;
}

.tk-accordion-list-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--tk-color-muted-foreground);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.tk-accordion-list-question[data-state="open"] .tk-accordion-list-chevron {
  color: var(--accordion-list-accent, var(--tk-color-primary));
  transform: rotate(180deg);
}

/* Every answer stays in the HTML; a closed one collapses to no height and
   leaves the accessibility tree once the slide ends. The grid track animates
   0fr <-> 1fr, so open/close slide rather than jump without measuring.
   Padding lives on the inner answer, and the track's minimum is 0 rather than
   auto, so the answer's padding can't hold a closed panel open. */
.tk-accordion-list-panel {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    visibility 0s linear 0.3s;
}

.tk-accordion-list-panel[data-state="open"] {
  grid-template-rows: minmax(0, 1fr);
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    visibility 0s;
}

.tk-accordion-list-panel > .tk-accordion-list-answer {
  min-height: 0;
  overflow: hidden;
}

.tk-accordion-list-answer {
  padding: 0 20px 18px;
  color: var(--accordion-list-answer-color, var(--tk-color-muted-foreground));
}

.tk-accordion-list-answer {
  font-family: var(--accordion-list-answer-font, inherit);
  font-size: var(--accordion-list-answer-size, 14px);
  font-weight: var(--accordion-list-answer-weight, normal);
  line-height: var(--accordion-list-answer-line-height, 1.8);
  letter-spacing: var(--accordion-list-answer-letter-spacing, normal);
  text-transform: var(--accordion-list-answer-transform, none);
}

@media (max-width: 1023px) {
  .tk-accordion-list-answer {
    font-size: var(--accordion-list-answer-size-tablet, var(--accordion-list-answer-size, 14px));
  }
}

@media (max-width: 767px) {
  .tk-accordion-list-answer {
    font-size: var(--accordion-list-answer-size-mobile, var(--accordion-list-answer-size-tablet, var(--accordion-list-answer-size, 14px)));
  }
}

.tk-accordion-list-answer > * { margin: 0; }
.tk-accordion-list-answer > * + * { margin-block-start: 0.6em; }

/* A plain-text answer keeps the line breaks the merchant typed. */
.tk-accordion-list-text { white-space: pre-line; }

.tk-accordion-list-answer a {
  color: var(--accordion-list-accent, var(--tk-color-primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tk-accordion-list-answer strong { font-weight: 700; }
.tk-accordion-list-answer em { font-style: italic; }

.tk-accordion-list-answer ul,
.tk-accordion-list-answer ol {
  padding-inline-start: 1.4em;
}

.tk-accordion-list-answer ul { list-style: disc; }
.tk-accordion-list-answer ol { list-style: decimal; }
.tk-accordion-list-answer li + li { margin-block-start: 0.35em; }

.tk-accordion-list-answer blockquote {
  padding-inline-start: 0.9em;
  border-inline-start: 3px solid var(--accordion-list-accent, var(--tk-color-primary));
  font-style: italic;
}

.tk-accordion-list-answer img {
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tk-accordion-list-chevron { transition: none; }
  .tk-accordion-list-panel { transition: none; }
}


/* ── Section card ── */
.tk-checkout-section {
  width: 100%;
}

.tk-checkout-section-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--checkout-section-border, var(--checkout-section-border-default, var(--tk-color-border)));
  border-start-start-radius: var(--checkout-section-radius-ts, var(--checkout-section-radius-default, var(--tk-card-radius, 12px)));
  border-start-end-radius: var(--checkout-section-radius-te, var(--checkout-section-radius-default, var(--tk-card-radius, 12px)));
  border-end-end-radius: var(--checkout-section-radius-be, var(--checkout-section-radius-default, var(--tk-card-radius, 12px)));
  border-end-start-radius: var(--checkout-section-radius-bs, var(--checkout-section-radius-default, var(--tk-card-radius, 12px)));
  background: var(--checkout-section-bg, var(--checkout-section-bg-default, var(--tk-color-surface)));
  box-shadow: var(--checkout-section-shadow-default, none);
}

/* Appearances: CSS-only looks on the same markup, tuning the "-default" branches above. */
.tk-checkout-section-card--minimal {
  --checkout-section-bg-default: transparent;
  --checkout-section-border-default: transparent;
  --checkout-section-radius-default: 0px;
  padding: 0;
}

.tk-checkout-section-card--bordered {
  --checkout-section-bg-default: transparent;
}

.tk-checkout-section-card--elevated {
  --checkout-section-border-default: transparent;
  --checkout-section-shadow-default: var(--tk-shadow);
}

.tk-checkout-section-title {
  margin: 0;
  color: var(--checkout-section-title-color, var(--tk-color-heading));
}

.tk-checkout-section-title {
  font-family: var(--checkout-section-title-font, var(--tk-font-heading, inherit));
  font-size: var(--checkout-section-title-size, 17px);
  font-weight: var(--checkout-section-title-weight, 800);
  line-height: var(--checkout-section-title-line-height, 1.3);
  letter-spacing: var(--checkout-section-title-letter-spacing, normal);
  text-transform: var(--checkout-section-title-transform, none);
}

@media (max-width: 1023px) {
  .tk-checkout-section-title {
    font-size: var(--checkout-section-title-size-tablet, var(--checkout-section-title-size, 17px));
  }
}

@media (max-width: 767px) {
  .tk-checkout-section-title {
    font-size: var(--checkout-section-title-size-mobile, var(--checkout-section-title-size-tablet, var(--checkout-section-title-size, 17px)));
  }
}

/* ── Fields ── */
.tk-checkout-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.tk-checkout-fields--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
  .tk-checkout-fields--two {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tk-checkout-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tk-checkout-field--wide {
  grid-column: 1 / -1;
}

.tk-checkout-field-label {
  color: var(--checkout-label-color, var(--tk-color-heading));
}

.tk-checkout-field-label {
  font-family: var(--checkout-label-font, inherit);
  font-size: var(--checkout-label-size, 13px);
  font-weight: var(--checkout-label-weight, 600);
  line-height: var(--checkout-label-line-height, normal);
  letter-spacing: var(--checkout-label-letter-spacing, normal);
  text-transform: var(--checkout-label-transform, none);
}

@media (max-width: 1023px) {
  .tk-checkout-field-label {
    font-size: var(--checkout-label-size-tablet, var(--checkout-label-size, 13px));
  }
}

@media (max-width: 767px) {
  .tk-checkout-field-label {
    font-size: var(--checkout-label-size-mobile, var(--checkout-label-size-tablet, var(--checkout-label-size, 13px)));
  }
}

.tk-checkout-field-required {
  margin-inline-start: 3px;
  color: var(--checkout-required-color, var(--tk-color-danger));
}

.tk-checkout-input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--checkout-input-height, var(--tk-input-height));
  padding-inline: 12px;
  border-style: solid;
  border-width: var(--checkout-input-border-width, var(--tk-input-border-width));
  border-color: var(--checkout-input-border, var(--tk-input-border));
  border-start-start-radius: var(--checkout-input-radius-ts, var(--tk-input-radius-top-start));
  border-start-end-radius: var(--checkout-input-radius-te, var(--tk-input-radius-top-end));
  border-end-end-radius: var(--checkout-input-radius-be, var(--tk-input-radius-bottom-end));
  border-end-start-radius: var(--checkout-input-radius-bs, var(--tk-input-radius-bottom-start));
  background: var(--checkout-input-bg, var(--tk-input-bg));
  color: var(--checkout-input-text, var(--tk-input-text));
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tk-checkout-input {
  font-family: var(--checkout-input-font, inherit);
  font-size: var(--checkout-input-size, 15px);
  font-weight: var(--checkout-input-weight, inherit);
  line-height: var(--checkout-input-line-height, inherit);
  letter-spacing: var(--checkout-input-letter-spacing, normal);
  text-transform: var(--checkout-input-transform, none);
}

@media (max-width: 1023px) {
  .tk-checkout-input {
    font-size: var(--checkout-input-size-tablet, var(--checkout-input-size, 15px));
  }
}

@media (max-width: 767px) {
  .tk-checkout-input {
    font-size: var(--checkout-input-size-mobile, var(--checkout-input-size-tablet, var(--checkout-input-size, 15px)));
  }
}

textarea.tk-checkout-input {
  min-height: 96px;
  padding-block: 10px;
  resize: vertical;
}

.tk-checkout-input::placeholder {
  color: var(--checkout-input-placeholder, var(--tk-input-placeholder));
}

/* Four states, shared with the phone field: rest, focus (border + soft
   ring), error (red border), error while focused (red border + red ring) -
   so a field being fixed still shows where the cursor is. */
.tk-checkout-input:focus,
.tk-checkout-input:focus-within {
  outline: none;
  border-color: var(--checkout-input-focus, var(--tk-input-focus));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--checkout-input-focus, var(--tk-input-focus)) 20%, transparent);
}

.tk-checkout-input[aria-invalid="true"] {
  border-color: var(--checkout-error-color, var(--tk-color-danger));
}

.tk-checkout-input[aria-invalid="true"]:focus,
.tk-checkout-input[aria-invalid="true"]:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--checkout-error-color, var(--tk-color-danger)) 20%, transparent);
}

.tk-checkout-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.tk-checkout-select[data-placeholder] .tk-select-value {
  color: var(--checkout-input-placeholder, var(--tk-input-placeholder));
}

/* A host's phone or select control brings its own box; only the fallbacks (the native
   phone input, the Radix select trigger) take the field's. */
.tk-checkout-phone:not(input),
.tk-checkout-select:not(select):not(.tk-select-trigger) {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.tk-checkout-field-help {
  margin: 0;
  color: var(--checkout-help-color, var(--tk-color-muted-foreground));
  font-size: 12px;
  line-height: 1.5;
}

.tk-checkout-field-error {
  margin: 0;
  color: var(--checkout-error-color, var(--tk-color-danger));
  font-size: 13px;
}

/* ── Choice cards ── */
.tk-checkout-choice-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tk-checkout-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tk-checkout-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--checkout-choice-border, var(--tk-color-border));
  border-start-start-radius: var(--checkout-choice-radius-ts, var(--tk-card-radius, 12px));
  border-start-end-radius: var(--checkout-choice-radius-te, var(--tk-card-radius, 12px));
  border-end-end-radius: var(--checkout-choice-radius-be, var(--tk-card-radius, 12px));
  border-end-start-radius: var(--checkout-choice-radius-bs, var(--tk-card-radius, 12px));
  background: var(--checkout-choice-bg, var(--tk-color-surface));
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tk-checkout-choice:hover {
  border-color: color-mix(
    in srgb,
    var(--checkout-choice-selected-border, var(--tk-color-primary)) 40%,
    var(--checkout-choice-border, var(--tk-color-border))
  );
}

.tk-checkout-choice--selected {
  border-color: var(--checkout-choice-selected-border, var(--tk-color-primary));
  background: var(
    --checkout-choice-selected-bg,
    color-mix(
      in srgb,
      var(--checkout-choice-selected-border, var(--tk-color-primary)) 6%,
      var(--checkout-choice-bg, var(--tk-color-surface))
    )
  );
}

.tk-checkout-choice-input,
input[type="radio"].tk-checkout-choice-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 9999px !important;
  border: 1.5px solid var(--checkout-choice-border, var(--tk-color-border)) !important;
  background-color: var(--checkout-choice-bg, var(--tk-color-surface)) !important;
  background-image: none !important;
  outline: none;
  cursor: pointer;
  color: var(--checkout-choice-selected-border, var(--tk-color-primary)) !important;
  accent-color: var(--checkout-choice-selected-border, var(--tk-color-primary)) !important;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.tk-checkout-choice-input:checked,
input[type="radio"].tk-checkout-choice-input:checked {
  border-color: var(--checkout-choice-selected-border, var(--tk-color-primary)) !important;
  background-color: var(--checkout-choice-selected-border, var(--tk-color-primary)) !important;
  background-image: radial-gradient(circle, #ffffff 35%, transparent 40%) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

.tk-checkout-choice-input:focus,
.tk-checkout-choice-input:focus-visible,
input[type="radio"].tk-checkout-choice-input:focus,
input[type="radio"].tk-checkout-choice-input:focus-visible {
  outline: 2px solid var(--checkout-choice-selected-border, var(--tk-color-primary)) !important;
  outline-offset: 2px;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-width: 0px !important;
  box-shadow: none !important;
}

.tk-checkout-choice-icon {
  display: inline-flex;
  flex: none;
  color: var(--checkout-choice-icon-color, var(--tk-color-primary));
}

.tk-checkout-choice-icon img {
  width: auto;
  height: 20px;
  object-fit: contain;
}

.tk-checkout-choice-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tk-checkout-choice-title {
  color: var(--checkout-choice-title-color, var(--tk-color-heading));
}

.tk-checkout-choice-title {
  font-family: var(--checkout-choice-title-font, inherit);
  font-size: var(--checkout-choice-title-size, 14px);
  font-weight: var(--checkout-choice-title-weight, 700);
  line-height: var(--checkout-choice-title-line-height, normal);
  letter-spacing: var(--checkout-choice-title-letter-spacing, normal);
  text-transform: var(--checkout-choice-title-transform, none);
}

@media (max-width: 1023px) {
  .tk-checkout-choice-title {
    font-size: var(--checkout-choice-title-size-tablet, var(--checkout-choice-title-size, 14px));
  }
}

@media (max-width: 767px) {
  .tk-checkout-choice-title {
    font-size: var(--checkout-choice-title-size-mobile, var(--checkout-choice-title-size-tablet, var(--checkout-choice-title-size, 14px)));
  }
}

.tk-checkout-choice-description {
  color: var(--checkout-choice-description-color, var(--tk-color-muted-foreground));
  font-size: 12px;
  line-height: 1.5;
}

.tk-checkout-choice-aside {
  flex: none;
  color: var(--checkout-choice-price-color, var(--tk-color-primary));
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Messages and loading ── */
.tk-checkout-message {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--tk-card-radius, 10px);
  background: var(--checkout-message-bg, color-mix(in srgb, var(--tk-color-muted-foreground) 8%, transparent));
  color: var(--checkout-message-text, var(--tk-color-heading));
  font-size: 13px;
  line-height: 1.6;
}

.tk-checkout-message--error {
  background: color-mix(in srgb, var(--tk-color-danger) 10%, transparent);
  color: var(--tk-color-danger);
}

.tk-checkout-skeleton {
  height: 120px;
  border-radius: var(--tk-card-radius, 10px);
  background: color-mix(in srgb, var(--tk-color-muted-foreground) 10%, transparent);
  animation: tk-skeleton-pulse 1.4s ease-in-out infinite;
}

.tk-checkout-skeleton--short {
  height: 56px;
}


.tk-collection-carousel {
  position: relative;
  /* Reserved side space for the arrows. Zero by default (overlay arrows), the
     gutter variant sets it on desktop so the arrows sit beside the track. */
  padding-inline: var(--collection-carousel-arrow-gutter, 0px);
}

/* Clips only the slides off the side. Unlike hidden, clip leaves the other
   axis visible, so a card lifted on hover keeps its top edge and shadow.
   A browser without clip drops that line and keeps hidden. */
.tk-collection-carousel__viewport {
  overflow: hidden;
  overflow: clip visible;
}

.tk-collection-carousel__viewport.is-dragging {
  cursor: grabbing;
}

.tk-collection-carousel__track {
  display: flex;
  gap: var(--collection-carousel-gap, 16px);
  align-items: stretch;
}

.tk-collection-carousel__track > * {
  flex: 0 0 var(--collection-carousel-item, auto);
  min-width: 0;
}

.tk-collection-carousel__arrow {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--tk-color-primary) 24%, transparent);
  border-radius: var(--tk-round-radius, 999px);
  background: var(--tk-color-surface);
  color: var(--tk-color-primary);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.08);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  z-index: 2;
}

.tk-collection-carousel__arrow:hover:not(:disabled) {
  background: var(--tk-color-primary);
  border-color: var(--tk-color-primary);
  color: var(--tk-color-primary-foreground);
}

.tk-collection-carousel__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Overlay (default): arrows float just inside the track edge over the cards. */
.tk-collection-carousel__arrow--prev {
  inset-inline-start: var(--collection-carousel-arrow-inset, 8px);
}

.tk-collection-carousel__arrow--next {
  inset-inline-end: var(--collection-carousel-arrow-inset, 8px);
}

/* Chevrons are authored for LTR; mirror them so they point outward in RTL. */
[dir="rtl"] .tk-collection-carousel__icon {
  transform: scaleX(-1);
}

@media (min-width: 768px) {
  /* Gutter variant only: reserve room beside the track and pin the arrows to
     the edge of that reserved space so they never cover the first/last card. */
  .tk-collection-carousel--gutter {
    --collection-carousel-arrow-gutter: 52px;
    --collection-carousel-arrow-inset: 0px;
  }
}

/* Touch users drag the track, so the arrows are hidden on phones unless the
   merchant opts back in with the arrows-mobile control. */
@media (max-width: 767px) {
  .tk-collection-carousel:not(.tk-collection-carousel--arrows-mobile) .tk-collection-carousel__arrow {
    display: none;
  }
}


.tk-product-collection-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-block-end: var(--collection-header-spacing, 26px);
  text-align: var(--collection-header-align, start);
}

.tk-product-collection-header--stacked {
  flex-direction: column;
  align-items: var(--collection-header-align, center);
  text-align: var(--collection-header-align, center);
}

.tk-product-collection-header-copy {
  min-width: 0;
}

.tk-product-collection-eyebrow {
  display: block;
  margin: 0 0 var(--collection-header-gap, 8px);
  color: var(--tk-color-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tk-product-collection-title {
  margin: 0;
  color: var(--collection-header-title-color, var(--tk-color-heading));
  font-family: var(--collection-header-title-font, var(--tk-font-heading));
  /* The theme's H2, like every other section title; phones get a step smaller. */
  font-size: var(--collection-header-title-size, var(--tk-h2-size));
  font-weight: var(--collection-header-title-weight, 700);
  line-height: 1.25;
  letter-spacing: var(--collection-header-title-letter-spacing, normal);
  text-transform: var(--collection-header-title-transform, none);
}

.tk-product-collection-subtitle {
  max-width: 620px;
  margin: var(--collection-header-gap, 8px) 0 0;
  color: var(--collection-header-subtitle-color, var(--tk-color-muted-foreground));
  font-family: var(--collection-header-subtitle-font, inherit);
  font-size: var(--collection-header-subtitle-size, 15px);
  font-weight: var(--collection-header-subtitle-weight, 400);
  line-height: var(--collection-header-subtitle-line-height, 1.7);
  letter-spacing: var(--collection-header-subtitle-letter-spacing, normal);
  text-transform: var(--collection-header-subtitle-transform, none);
}

.tk-product-collection-header--stacked .tk-product-collection-subtitle {
  margin-inline: auto;
}

/* ─────────────────────────── Accent rule ─────────────────────────── */
.tk-product-collection-accent {
  display: block;
  margin-block-start: 16px;
  height: 3px;
}

.tk-product-collection-accent--line {
  width: 56px;
  border-radius: var(--tk-round-radius, 999px);
  background: var(--tk-color-primary);
}

.tk-product-collection-accent--dotted {
  width: 76px;
  height: 5px;
  color: var(--tk-color-primary);
  background-image: radial-gradient(currentColor 42%, transparent 46%);
  background-size: 13px 5px;
  background-repeat: repeat-x;
  background-position: center;
}

.tk-product-collection-header--stacked .tk-product-collection-accent {
  margin-inline: auto;
}

.tk-product-collection-view-all {
  flex-shrink: 0;
  color: var(--tk-color-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.tk-product-collection-view-all:hover {
  text-decoration: underline;
}

@media (max-width: 1023px) {
  .tk-product-collection-title {
    font-size: var(--collection-header-title-size-tablet, var(--collection-header-title-size, var(--tk-h2-size)));
  }

  .tk-product-collection-subtitle {
    font-size: var(--collection-header-subtitle-size-tablet, var(--collection-header-subtitle-size, 15px));
  }
}

@media (max-width: 767px) {
  .tk-product-collection-header:not(.tk-product-collection-header--stacked) {
    flex-direction: column;
    align-items: start;
  }

  .tk-product-collection-title {
    font-size: var(--collection-header-title-size-mobile, var(--collection-header-title-size-tablet, var(--collection-header-title-size, calc(var(--tk-h2-size) * 0.85))));
  }

  .tk-product-collection-subtitle {
    font-size: var(--collection-header-subtitle-size-mobile, var(--collection-header-subtitle-size-tablet, var(--collection-header-subtitle-size, 15px)));
  }
}


.tk-editor-note {
  position: absolute;
  z-index: 5;
  /* Fully above the block's top edge, clear of its border and contents. */
  inset-block-end: calc(100% + 4px);
  inset-inline-end: 10px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  min-height: 22px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--tk-color-primary) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tk-color-primary) 12%, var(--tk-color-surface));
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  color: var(--tk-color-primary);
  font-family: var(--tk-font-body, inherit);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}

.tk-editor-note > svg {
  flex: none;
}

.tk-editor-note-text {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: max-width 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}

/* The canvas lets the mouse through a block's contents to the wrapper the
   editor draws around it, so the wrapper's hover opens the note too. */
:hover > .tk-editor-note,
:hover > .tk-block > .tk-editor-note {
  /* Open, it may reach past a narrow block - a button - to show the whole note. */
  max-width: min(600px, 92vw);
  padding-inline: 8px 10px;
}

:hover > .tk-editor-note .tk-editor-note-text,
:hover > .tk-block > .tk-editor-note .tk-editor-note-text {
  max-width: 580px;
  margin-inline-start: 6px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tk-editor-note-text {
    transition: none;
  }
}


.tk-product-grid {
  display: grid;
  grid-template-columns: repeat(var(--product-list-columns, 4), minmax(0, 1fr));
  gap: var(--product-list-gap, 18px);
}

@media (max-width: 1023px) {
  .tk-product-grid {
    gap: var(--product-list-gap-tablet, var(--product-list-gap, 18px));
  }
}

@media (max-width: 767px) {
  .tk-product-grid {
    gap: var(--product-list-gap-mobile, var(--product-list-gap-tablet, var(--product-list-gap, 18px)));
  }
}

.tk-product-card {
  --product-card-hover-transform-default: none;
  --product-card-hover-image-scale-default: 1;
  display: flex;
  position: relative;
  min-width: 0;
  min-height: var(--product-card-min-height, 0px);
  overflow: hidden;
  flex-direction: var(--product-card-direction, column);
  text-align: var(--product-card-text-align, start);
  border: 1px solid var(--product-card-border-color, var(--product-card-border-default, var(--tk-color-border)));
  border-start-start-radius: var(--product-card-radius-ts, var(--product-card-radius-default, var(--tk-control-radius, 8px)));
  border-start-end-radius: var(--product-card-radius-te, var(--product-card-radius-default, var(--tk-control-radius, 8px)));
  border-end-end-radius: var(--product-card-radius-be, var(--product-card-radius-default, var(--tk-control-radius, 8px)));
  border-end-start-radius: var(--product-card-radius-bs, var(--product-card-radius-default, var(--tk-control-radius, 8px)));
  background: var(--product-card-bg, var(--product-card-bg-default, var(--tk-color-surface)));
  box-shadow: var(--product-card-shadow-default, 0 10px 28px rgb(23 23 28 / 0.06));
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.tk-product-card--layout-vertical {
  
  --product-card-direction: column;
  --product-card-min-height: 0px;
  --product-card-media-flex: 0 0 auto;
  --product-card-media-width: 100%;
  --product-card-media-ratio: var(--product-card-image-ratio, 1 / 1);
  --product-card-body-position: relative;
  --product-card-body-inset: auto;
  --product-card-body-z: auto;
  --product-card-body-bg: transparent;
  --product-card-body-backdrop: none;
  --product-card-body-padding: var(--product-card-body-padding-default, 14px);
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 10px;
  --product-card-price-padding: 12px;
  --product-card-add-height: 40px;
  --product-card-add-margin: 12px;
  --product-card-footer-columns: minmax(0, 1fr);
  --product-card-footer-align: stretch;
  --product-card-add-width: 100%;
  --product-card-meta-size: 10px;

}

.tk-product-card--layout-horizontal {
  
  --product-card-direction: row;
  --product-card-min-height: 168px;
  --product-card-media-flex: 0 0 42%;
  --product-card-media-width: 42%;
  --product-card-media-ratio: auto;
  --product-card-body-position: relative;
  --product-card-body-inset: auto;
  --product-card-body-z: auto;
  --product-card-body-bg: transparent;
  --product-card-body-backdrop: none;
  --product-card-body-padding: 14px;
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 8px;
  --product-card-price-padding: 10px;
  --product-card-add-height: 38px;
  --product-card-add-margin: 10px;
  --product-card-footer-columns: minmax(0, 1fr);
  --product-card-footer-align: stretch;
  --product-card-add-width: 100%;
  --product-card-meta-size: 9px;

}

.tk-product-card--layout-overlay {
  
  --product-card-direction: column;
  --product-card-min-height: 0px;
  --product-card-media-flex: 0 0 auto;
  --product-card-media-width: 100%;
  --product-card-media-ratio: var(--product-card-image-ratio, 1 / 1);
  --product-card-body-position: absolute;
  --product-card-body-inset: auto 0 0;
  --product-card-body-z: 2;
  --product-card-body-bg: color-mix(in srgb, var(--product-card-bg, var(--tk-color-surface)) 90%, transparent);
  --product-card-body-backdrop: blur(12px);
  --product-card-body-padding: 12px;
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 7px;
  --product-card-price-padding: 8px;
  --product-card-add-height: 36px;
  --product-card-add-margin: 8px;
  --product-card-footer-columns: minmax(0, 1fr);
  --product-card-footer-align: stretch;
  --product-card-add-width: 100%;
  --product-card-meta-size: 9px;

}

.tk-product-card--layout-compact {
  
  --product-card-direction: column;
  --product-card-min-height: 0px;
  --product-card-media-flex: 0 0 auto;
  --product-card-media-width: 100%;
  --product-card-media-ratio: var(--product-card-image-ratio, 1 / 1);
  --product-card-body-position: relative;
  --product-card-body-inset: auto;
  --product-card-body-z: auto;
  --product-card-body-bg: transparent;
  --product-card-body-backdrop: none;
  --product-card-body-padding: 10px;
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 6px;
  --product-card-price-padding: 8px;
  --product-card-add-height: 34px;
  --product-card-add-margin: 8px;
  --product-card-footer-columns: minmax(0, 1fr) auto;
  --product-card-footer-align: center;
  --product-card-add-width: auto;
  --product-card-meta-size: 9px;

}

@media (max-width: 1023px) {
  .tk-product-card--layout-tablet-vertical {
    
  --product-card-direction: column;
  --product-card-min-height: 0px;
  --product-card-media-flex: 0 0 auto;
  --product-card-media-width: 100%;
  --product-card-media-ratio: var(--product-card-image-ratio, 1 / 1);
  --product-card-body-position: relative;
  --product-card-body-inset: auto;
  --product-card-body-z: auto;
  --product-card-body-bg: transparent;
  --product-card-body-backdrop: none;
  --product-card-body-padding: var(--product-card-body-padding-default, 14px);
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 10px;
  --product-card-price-padding: 12px;
  --product-card-add-height: 40px;
  --product-card-add-margin: 12px;
  --product-card-footer-columns: minmax(0, 1fr);
  --product-card-footer-align: stretch;
  --product-card-add-width: 100%;
  --product-card-meta-size: 10px;

  }

  .tk-product-card--layout-tablet-horizontal {
    
  --product-card-direction: row;
  --product-card-min-height: 168px;
  --product-card-media-flex: 0 0 42%;
  --product-card-media-width: 42%;
  --product-card-media-ratio: auto;
  --product-card-body-position: relative;
  --product-card-body-inset: auto;
  --product-card-body-z: auto;
  --product-card-body-bg: transparent;
  --product-card-body-backdrop: none;
  --product-card-body-padding: 14px;
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 8px;
  --product-card-price-padding: 10px;
  --product-card-add-height: 38px;
  --product-card-add-margin: 10px;
  --product-card-footer-columns: minmax(0, 1fr);
  --product-card-footer-align: stretch;
  --product-card-add-width: 100%;
  --product-card-meta-size: 9px;

  }

  .tk-product-card--layout-tablet-overlay {
    
  --product-card-direction: column;
  --product-card-min-height: 0px;
  --product-card-media-flex: 0 0 auto;
  --product-card-media-width: 100%;
  --product-card-media-ratio: var(--product-card-image-ratio, 1 / 1);
  --product-card-body-position: absolute;
  --product-card-body-inset: auto 0 0;
  --product-card-body-z: 2;
  --product-card-body-bg: color-mix(in srgb, var(--product-card-bg, var(--tk-color-surface)) 90%, transparent);
  --product-card-body-backdrop: blur(12px);
  --product-card-body-padding: 12px;
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 7px;
  --product-card-price-padding: 8px;
  --product-card-add-height: 36px;
  --product-card-add-margin: 8px;
  --product-card-footer-columns: minmax(0, 1fr);
  --product-card-footer-align: stretch;
  --product-card-add-width: 100%;
  --product-card-meta-size: 9px;

  }

  .tk-product-card--layout-tablet-compact {
    
  --product-card-direction: column;
  --product-card-min-height: 0px;
  --product-card-media-flex: 0 0 auto;
  --product-card-media-width: 100%;
  --product-card-media-ratio: var(--product-card-image-ratio, 1 / 1);
  --product-card-body-position: relative;
  --product-card-body-inset: auto;
  --product-card-body-z: auto;
  --product-card-body-bg: transparent;
  --product-card-body-backdrop: none;
  --product-card-body-padding: 10px;
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 6px;
  --product-card-price-padding: 8px;
  --product-card-add-height: 34px;
  --product-card-add-margin: 8px;
  --product-card-footer-columns: minmax(0, 1fr) auto;
  --product-card-footer-align: center;
  --product-card-add-width: auto;
  --product-card-meta-size: 9px;

  }
}

@media (max-width: 767px) {
  .tk-product-card--layout-mobile-vertical {
    
  --product-card-direction: column;
  --product-card-min-height: 0px;
  --product-card-media-flex: 0 0 auto;
  --product-card-media-width: 100%;
  --product-card-media-ratio: var(--product-card-image-ratio, 1 / 1);
  --product-card-body-position: relative;
  --product-card-body-inset: auto;
  --product-card-body-z: auto;
  --product-card-body-bg: transparent;
  --product-card-body-backdrop: none;
  --product-card-body-padding: var(--product-card-body-padding-default, 14px);
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 10px;
  --product-card-price-padding: 12px;
  --product-card-add-height: 40px;
  --product-card-add-margin: 12px;
  --product-card-footer-columns: minmax(0, 1fr);
  --product-card-footer-align: stretch;
  --product-card-add-width: 100%;
  --product-card-meta-size: 10px;

  }

  .tk-product-card--layout-mobile-horizontal {
    
  --product-card-direction: row;
  --product-card-min-height: 168px;
  --product-card-media-flex: 0 0 42%;
  --product-card-media-width: 42%;
  --product-card-media-ratio: auto;
  --product-card-body-position: relative;
  --product-card-body-inset: auto;
  --product-card-body-z: auto;
  --product-card-body-bg: transparent;
  --product-card-body-backdrop: none;
  --product-card-body-padding: 14px;
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 8px;
  --product-card-price-padding: 10px;
  --product-card-add-height: 38px;
  --product-card-add-margin: 10px;
  --product-card-footer-columns: minmax(0, 1fr);
  --product-card-footer-align: stretch;
  --product-card-add-width: 100%;
  --product-card-meta-size: 9px;

  }

  .tk-product-card--layout-mobile-overlay {
    
  --product-card-direction: column;
  --product-card-min-height: 0px;
  --product-card-media-flex: 0 0 auto;
  --product-card-media-width: 100%;
  --product-card-media-ratio: var(--product-card-image-ratio, 1 / 1);
  --product-card-body-position: absolute;
  --product-card-body-inset: auto 0 0;
  --product-card-body-z: 2;
  --product-card-body-bg: color-mix(in srgb, var(--product-card-bg, var(--tk-color-surface)) 90%, transparent);
  --product-card-body-backdrop: blur(12px);
  --product-card-body-padding: 12px;
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 7px;
  --product-card-price-padding: 8px;
  --product-card-add-height: 36px;
  --product-card-add-margin: 8px;
  --product-card-footer-columns: minmax(0, 1fr);
  --product-card-footer-align: stretch;
  --product-card-add-width: 100%;
  --product-card-meta-size: 9px;

  }

  .tk-product-card--layout-mobile-compact {
    
  --product-card-direction: column;
  --product-card-min-height: 0px;
  --product-card-media-flex: 0 0 auto;
  --product-card-media-width: 100%;
  --product-card-media-ratio: var(--product-card-image-ratio, 1 / 1);
  --product-card-body-position: relative;
  --product-card-body-inset: auto;
  --product-card-body-z: auto;
  --product-card-body-bg: transparent;
  --product-card-body-backdrop: none;
  --product-card-body-padding: 10px;
  --product-card-name-min-height: auto;
  --product-card-rating-margin: 6px;
  --product-card-price-padding: 8px;
  --product-card-add-height: 34px;
  --product-card-add-margin: 8px;
  --product-card-footer-columns: minmax(0, 1fr) auto;
  --product-card-footer-align: center;
  --product-card-add-width: auto;
  --product-card-meta-size: 9px;

  }
}

@media (max-width: 520px) {
  .tk-product-card--layout-mobile-compact {
    --product-card-footer-columns: minmax(0, 1fr);
    --product-card-footer-align: stretch;
    --product-card-add-width: 100%;
  }
}

.tk-product-card:hover {
  transform: var(--product-card-hover-transform-default);
  box-shadow: var(--product-card-shadow-hover-default, 0 16px 34px rgb(23 23 28 / 0.1));
}

/* Appearances: CSS-only looks on the same markup, each tuning the "-default" branch of the variables above. */
.tk-product-card--minimal {
  --product-card-radius-default: 0px;
  --product-card-bg-default: transparent;
  --product-card-border-default: transparent;
  --product-card-shadow-default: none;
  --product-card-shadow-hover-default: none;
  --product-card-body-padding-default: 10px 0 0;
  --product-card-hover-transform-default: none;
  --product-card-hover-image-scale-default: 1;
}

/* Minimal has no visible card - no surface, border or side padding - so its
   corners belong to the image, the one surface it shows. Rounding the card
   itself only clipped the name and price sitting at its edge. */
.tk-product-card.tk-product-card--minimal {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.tk-product-card--minimal .tk-product-media {
  border-start-start-radius: var(--product-card-radius-ts, var(--product-card-radius-default));
  border-start-end-radius: var(--product-card-radius-te, var(--product-card-radius-default));
  border-end-end-radius: var(--product-card-radius-be, var(--product-card-radius-default));
  border-end-start-radius: var(--product-card-radius-bs, var(--product-card-radius-default));
}

.tk-product-card--bordered {
  --product-card-radius-default: var(--tk-card-radius, 8px);
  --product-card-bg-default: var(--tk-color-surface);
  --product-card-border-default: var(--tk-color-border);
  --product-card-shadow-default: none;
  --product-card-shadow-hover-default: none;
  --product-card-hover-transform-default: none;
  --product-card-hover-image-scale-default: 1;
}

.tk-product-card--elevated {
  --product-card-radius-default: var(--tk-control-radius, 16px);
  --product-card-bg-default: var(--tk-color-surface);
  --product-card-border-default: transparent;
  --product-card-shadow-default: 0 14px 32px rgb(23 23 28 / 0.1);
  --product-card-shadow-hover-default: 0 22px 44px rgb(23 23 28 / 0.16);
  --product-card-hover-transform-default: translateY(-4px);
  --product-card-hover-image-scale-default: 1.04;
}

.tk-product-card--standard {
  --product-card-hover-transform-default: translateY(-3px);
  --product-card-hover-image-scale-default: 1.04;
}

/* Explicit hover overrides win over any appearance default (same specificity, declared after). */
.tk-product-card--hover-none {
  --product-card-hover-transform-default: none;
  --product-card-hover-image-scale-default: 1;
}

.tk-product-card--hover-lift {
  --product-card-hover-transform-default: translateY(-3px);
  --product-card-hover-image-scale-default: 1;
}

.tk-product-card--hover-zoom {
  --product-card-hover-transform-default: none;
  --product-card-hover-image-scale-default: 1.04;
}

.tk-product-card--hover-lift-zoom {
  --product-card-hover-transform-default: translateY(-3px);
  --product-card-hover-image-scale-default: 1.04;
}

.tk-product-card--hover-second-image {
  --product-card-hover-transform-default: none;
  --product-card-hover-image-scale-default: 1;
}

.tk-product-card--align-center {
  --product-card-text-align: center;
}

.tk-product-card--align-end {
  --product-card-text-align: end;
}

/* The frame takes the media's place in the card (its share of a horizontal
   card, the full width otherwise); the image link fills it. */
.tk-product-media-frame {
  position: relative;
  display: flex;
  flex: var(--product-card-media-flex, 0 0 auto);
  width: var(--product-card-media-width, 100%);
  min-width: 0;
}

.tk-product-media {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: var(--product-card-media-ratio, var(--product-card-image-ratio, 1 / 1));
  background: color-mix(in srgb, var(--tk-color-primary) 8%, var(--tk-color-muted));
  color: inherit;
}

.tk-product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--product-card-image-fit, cover);
  transition:
    transform 0.28s ease,
    opacity 0.28s ease;
}

.tk-product-card:hover .tk-product-media img {
  transform: scale(var(--product-card-hover-image-scale-default));
}

.tk-product-image--primary {
  position: relative;
  z-index: 1;
}

.tk-product-image--hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.tk-product-card--has-hover-image:hover .tk-product-image--hover,
.tk-product-card--hover-second-image:hover .tk-product-image--hover {
  opacity: 1;
}

.tk-product-card--has-hover-image:hover .tk-product-image--primary.tk-product-image--has-hover,
.tk-product-card--hover-second-image:hover .tk-product-image--primary.tk-product-image--has-hover {
  opacity: 0;
}

.tk-product-media-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.34), transparent),
    color-mix(in srgb, var(--tk-color-primary) 12%, #eeeeee);
}

/*
  The save control takes the top corner the badge stack leaves free, so the two
  never cover each other whichever side the merchant puts the badges on.
  Above the stack's z-index, since it is the only thing here that is clickable.
*/
.tk-product-wishlist {
  position: absolute;
  z-index: 2;
  inset-block-start: 10px;
  inset-inline-end: 10px;
}

.tk-product-card--badge-end .tk-product-wishlist {
  inset-inline-start: 10px;
  inset-inline-end: auto;
}

.tk-product-badge-stack {
  position: absolute;
  z-index: 1;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  display: flex;
  max-width: calc(100% - 20px);
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.tk-product-badge,
.tk-product-label,
.tk-product-stock-badge {
  border-radius: var(--tk-badge-radius);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.tk-product-badge {
  background: var(--product-card-discount-color, #dc2626);
  color: #ffffff;
}

.tk-product-label {
  max-width: 100%;
  overflow: hidden;
  background: var(--tk-color-primary);
  color: var(--tk-color-primary-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-product-stock-badge {
  background: rgb(23 23 28 / 0.82);
  color: #ffffff;
}

.tk-product-card--badge-end .tk-product-badge-stack {
  inset-inline-start: auto;
  inset-inline-end: 10px;
  align-items: flex-end;
}

.tk-product-card--badge-horizontal .tk-product-badge-stack {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.tk-product-card--badge-end.tk-product-card--badge-horizontal .tk-product-badge-stack,
.tk-product-card--badge-horizontal.tk-product-card--badge-end .tk-product-badge-stack {
  justify-content: flex-end;
}

.tk-product-card-body {
  display: flex;
  position: var(--product-card-body-position, relative);
  z-index: var(--product-card-body-z, auto);
  inset: var(--product-card-body-inset, auto);
  flex: 1;
  min-width: 0;
  flex-direction: column;
  padding: var(--product-card-body-padding, var(--product-card-body-padding-default, 14px));
  background: var(--product-card-body-bg, transparent);
  backdrop-filter: var(--product-card-body-backdrop, none);
}

.tk-product-name {
  display: -webkit-box;
  overflow: hidden;
  min-height: var(--product-card-name-min-height, auto);
  width: 100%;
  text-align: var(--product-card-text-align, start);
  color: var(--product-card-name-color, var(--tk-color-heading));
  font-family: var(--product-card-name-font, var(--tk-font-heading));
  font-size: var(--product-card-name-size, 14px);
  font-weight: var(--product-card-name-weight, 800);
  line-height: var(--product-card-name-line-height, 1.45);
  letter-spacing: var(--product-card-name-letter-spacing, normal);
  text-decoration: none;
  text-transform: var(--product-card-name-transform, none);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--product-card-name-lines, 2);
  line-clamp: var(--product-card-name-lines, 2);
}

.tk-product-name:hover {
  color: var(--tk-color-primary);
}

@media (max-width: 1023px) {
  .tk-product-name {
    font-size: var(--product-card-name-size-tablet, var(--product-card-name-size, 14px));
  }
}

@media (max-width: 767px) {
  .tk-product-name {
    font-size: var(--product-card-name-size-mobile, var(--product-card-name-size-tablet, var(--product-card-name-size, 14px)));
  }
}

.tk-product-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-block-start: var(--product-card-rating-margin, 10px);
  color: #d97706;
  font-size: 12px;
  font-weight: 700;
}

.tk-product-card--align-center .tk-product-rating,
.tk-product-card--align-center .tk-product-price-row {
  justify-content: center;
}

.tk-product-card--align-end .tk-product-rating,
.tk-product-card--align-end .tk-product-price-row {
  justify-content: flex-end;
}

.tk-product-card--align-start .tk-product-rating,
.tk-product-card--align-start .tk-product-price-row {
  justify-content: flex-start;
}

.tk-product-card--align-center .tk-price-display--stacked {
  align-items: center;
}

.tk-product-card--align-end .tk-price-display--stacked {
  align-items: flex-end;
}


/*
 * The price row is the shared `BlockPriceDisplay` (`.tk-price-display`), which
 * owns the price/discount look from the `priceStyle` value each card is handed.
 * The footer keeps price and action stacked for regular cards and places them
 * side by side for the compact layout. `display: flex` on the price overrides
 * the display's own `inline-flex` so the alignment rules above still apply.
 */
.tk-product-card-footer {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: var(--product-card-footer-columns, minmax(0, 1fr));
  align-items: var(--product-card-footer-align, stretch);
  gap: var(--product-card-add-margin, 12px);
  margin-block-start: auto;
  padding-block-start: var(--product-card-price-padding, 12px);
}

.tk-product-price-row {
  display: flex;
  min-width: 0;
  width: 100%;
}

.tk-product-add {
  min-height: var(--product-card-add-height, 40px);
  font-weight: 800;
}

.tk-product-add.tk-button--full {
  width: var(--product-card-add-width, 100%);
}

.tk-product-add-icon {
  flex: 0 0 auto;
}

.tk-product-add.tk-button--link {
  min-height: auto;
}

.tk-product-meta {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-align: var(--product-card-text-align, start);
  color: var(--tk-color-primary);
  font-size: var(--product-card-meta-size, 10px);
  font-weight: var(--product-card-meta-weight, 700);
  letter-spacing: var(--product-card-meta-letter-spacing, 0.08em);
  line-height: var(--product-card-meta-line-height, 1.4);
  text-transform: uppercase;
}

.tk-product-brand,
.tk-product-category {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-product-category {
  display: inline-block;
}

.tk-product-meta-separator {
  flex: 0 0 auto;
  color: var(--tk-color-muted-foreground);
  opacity: 0.72;
}

.tk-product-card--align-center .tk-product-meta {
  justify-content: center;
}

.tk-product-card--align-end .tk-product-meta {
  justify-content: flex-end;
}

@media (max-width: 1023px) {
  .tk-product-grid {
    grid-template-columns: repeat(var(--product-list-columns-tablet, var(--product-list-columns, 3)), minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .tk-product-grid {
    grid-template-columns: repeat(var(--product-list-columns-mobile, var(--product-list-columns-tablet, var(--product-list-columns, 2))), minmax(0, 1fr));
  }
}

/* ── Add to cart over the image ──
   imageHover: a full-width button along the image's bottom edge, shown when
   the card is hovered or focused (always shown where there is no hover).
   iconCorner: a round icon button in the image's bottom corner, always shown. */
.tk-product-media-action {
  position: absolute;
  z-index: 2;
}

.tk-product-card--cart-imageHover .tk-product-media-action {
  inset-inline: 10px;
  inset-block-end: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.tk-product-card--cart-imageHover .tk-product-media-action .tk-product-add {
  width: 100%;
}

.tk-product-card--cart-imageHover:hover .tk-product-media-action,
.tk-product-card--cart-imageHover:focus-within .tk-product-media-action {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .tk-product-card--cart-imageHover .tk-product-media-action {
    opacity: 1;
    transform: none;
  }
}

.tk-product-card--cart-iconCorner .tk-product-media-action {
  inset-inline-end: 10px;
  inset-block-end: 10px;
}

.tk-product-add.tk-product-add--icon {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.16);
}

/* A phone card is about half the screen wide: a smaller button keeps the
   photo in view. */
@media (max-width: 767px) {
  .tk-product-card--cart-iconCorner .tk-product-media-action {
    inset-inline-end: 8px;
    inset-block-end: 8px;
  }

  .tk-product-card .tk-product-add.tk-product-add--icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .tk-product-card .tk-product-add--icon .tk-product-add-icon {
    width: 16px;
    height: 16px;
  }
}


.tk-section-badge {
  text-align: center;
}

.tk-section-badge span {
  display: inline-block;
  border-radius: var(--tk-round-radius, 9999px);
  background: var(--section-badge-bg, color-mix(in srgb, var(--tk-color-primary) 10%, var(--tk-color-surface)));
  color: var(--section-badge-color, var(--tk-color-primary));
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 700;
}


/*
  A round, surface-coloured control that sits over product media. Colours come
  from theme tokens so it reads in both themes; only the "saved" state takes the
  accent, which is what tells the shopper at a glance what is already saved.
*/
.tk-wishlist-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--tk-color-border);
  border-radius: var(--tk-round-radius, 9999px);
  background: var(--tk-color-surface);
  color: var(--tk-color-text);
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 2px 8px rgb(23 23 28 / 0.1);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.tk-wishlist-button--sm {
  width: 32px;
  height: 32px;
}

.tk-wishlist-button--sm svg {
  width: 16px;
  height: 16px;
}

.tk-wishlist-button--md {
  width: 40px;
  height: 40px;
}

.tk-wishlist-button--md svg {
  width: 19px;
  height: 19px;
}

.tk-wishlist-button:hover:not(:disabled) {
  border-color: var(--tk-color-primary);
  color: var(--tk-color-primary);
  transform: scale(1.06);
}

.tk-wishlist-button:focus-visible {
  outline: 2px solid var(--tk-color-primary);
  outline-offset: 2px;
}

/* Saved: filled with the accent, so the state is legible without the tooltip. */
.tk-wishlist-button--on {
  border-color: var(--tk-color-primary);
  background: var(--tk-color-primary);
  color: var(--tk-button-text, #ffffff);
}

.tk-wishlist-button--on:hover:not(:disabled) {
  color: var(--tk-button-text, #ffffff);
}

.tk-wishlist-button:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .tk-wishlist-button {
    transition: none;
  }

  .tk-wishlist-button:hover:not(:disabled) {
    transform: none;
  }
}



/* ── Page shells ── */
.tk-page {
  flex: 1 1 auto;
  padding: 48px 16px;
  background: var(--tk-color-background, #ffffff);
}
@media (min-width: 640px) {
  .tk-page { padding: 64px 16px; }
}

.tk-page-container {
  width: 100%;
  margin-inline: auto;
  max-width: 520px;
}
.tk-page-container--wide { max-width: 980px; }

.tk-page-header {
  margin-bottom: 32px;
  text-align: center;
}

.tk-page-title {
  margin: 0;
  color: var(--tk-color-heading, #17171c);
  font-family: var(--tk-font-heading, inherit);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 640px) {
  .tk-page-title { font-size: 30px; }
}

.tk-page-subtitle {
  margin: 12px auto 0;
  max-width: 640px;
  color: var(--tk-color-muted-foreground, #64646e);
  font-family: var(--tk-font-body, inherit);
  font-size: 14px;
  line-height: 1.6;
}

/* ── Panel (card surface) ── */
.tk-panel {
  background: var(--tk-color-surface, #ffffff);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  border-start-start-radius: var(--tk-card-radius, 12px);
  border-start-end-radius: var(--tk-card-radius, 12px);
  border-end-end-radius: var(--tk-card-radius, 12px);
  border-end-start-radius: var(--tk-card-radius, 12px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  color: var(--tk-color-text, var(--tk-color-dark, #17171c));
}

.tk-panel-body { padding: 24px; }
.tk-panel-header {
  padding: 24px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tk-panel-title {
  margin: 0;
  color: var(--tk-color-heading, #17171c);
  font-family: var(--tk-font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.tk-panel-title--danger {
  color: var(--tk-color-danger, #dc2626);
}
.tk-panel-desc {
  margin: 0;
  color: var(--tk-color-muted-foreground, #64646e);
  font-family: var(--tk-font-body, inherit);
  font-size: 13px;
  line-height: 1.5;
}
.tk-panel-footer {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tk-panel-body + .tk-panel-footer { padding-top: 0; }

/* ── Form + fields ── */
.tk-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tk-field-label {
  color: var(--tk-color-heading, #17171c);
  font-family: var(--tk-font-body, inherit);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.tk-field-required {
  margin-inline-start: 3px;
  color: var(--tk-color-danger, #dc2626);
}

.tk-input {
  width: 100%;
  height: var(--tk-input-height, 40px);
  padding: 0 12px;
  background: var(--tk-input-bg, #ffffff);
  color: var(--tk-input-text, var(--tk-color-text, #17171c));
  border-style: solid;
  border-width: var(--tk-input-border-width, 1px);
  border-color: var(--tk-input-border, var(--tk-color-border, #d4d4dc));
  border-start-start-radius: var(--tk-input-radius-top-start, var(--tk-input-radius, 8px));
  border-start-end-radius: var(--tk-input-radius-top-end, var(--tk-input-radius, 8px));
  border-end-end-radius: var(--tk-input-radius-bottom-end, var(--tk-input-radius, 8px));
  border-end-start-radius: var(--tk-input-radius-bottom-start, var(--tk-input-radius, 8px));
  font-family: var(--tk-font-body, inherit);
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tk-input::placeholder {
  color: var(--tk-input-placeholder, var(--tk-color-muted-foreground, #94949e));
}

.tk-input:focus,
.tk-input:focus-visible {
  border-color: var(--tk-input-focus, var(--tk-color-primary, #0d61c1));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tk-color-primary, #0d61c1) 20%, transparent);
}

.tk-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tk-input[aria-invalid="true"] {
  border-color: var(--tk-color-danger, #dc2626);
}

.tk-field-error {
  color: var(--tk-color-danger, #dc2626);
  font-family: var(--tk-font-body, inherit);
  font-size: 12px;
  line-height: 1.4;
}

/* ── Link ── */
.tk-link {
  color: var(--tk-color-primary, #0d61c1);
  text-decoration: none;
  font-family: var(--tk-font-body, inherit);
  transition: text-decoration-color 0.15s ease;
}
.tk-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.tk-link--muted { color: var(--tk-color-muted-foreground, #64646e); }
.tk-link--sm { font-size: 13px; }
.tk-link--strong { font-weight: 600; }

/* ── Cluster row for actions/inline links ── */
.tk-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tk-cluster--end { justify-content: flex-end; }
.tk-cluster--center { justify-content: center; }

/* ── Button block-level helper (uses shared .tk-btn) ── */
.tk-btn--block {
  display: flex;
  width: 100%;
}
.tk-btn:disabled,
.tk-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}
.tk-button--danger {
  background: var(--tk-color-danger, #dc2626);
  color: #ffffff;
  border-color: var(--tk-color-danger, #dc2626);
}
.tk-button--danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--tk-color-danger, #dc2626) 88%, #000000);
  border-color: color-mix(in srgb, var(--tk-color-danger, #dc2626) 88%, #000000);
  color: #ffffff;
}

/* ── Alert ── */
.tk-alert {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: var(--tk-color-surface, #ffffff);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  border-start-start-radius: var(--tk-card-radius, 12px);
  border-start-end-radius: var(--tk-card-radius, 12px);
  border-end-end-radius: var(--tk-card-radius, 12px);
  border-end-start-radius: var(--tk-card-radius, 12px);
  color: var(--tk-color-text, var(--tk-color-dark, #17171c));
}
.tk-alert-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--tk-color-primary, #0d61c1);
}
.tk-alert-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--tk-font-body, inherit);
  font-size: 14px;
  line-height: 1.5;
}
.tk-alert-title {
  color: var(--tk-color-heading, #17171c);
  font-weight: 600;
  font-size: 15px;
}
.tk-alert--danger .tk-alert-icon { color: var(--tk-color-danger, #dc2626); }
.tk-alert--success .tk-alert-icon { color: var(--tk-color-success, #16a34a); }

/* ── Stack / Row / Grid utilities ── */
.tk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tk-stack-gap, 16px);
}
.tk-stack--sm { --tk-stack-gap: 8px; }
.tk-stack--lg { --tk-stack-gap: 24px; }

.tk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tk-row--between { justify-content: space-between; }
.tk-row--nowrap { flex-wrap: nowrap; }
.tk-row--top { align-items: flex-start; }

.tk-ui-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
.tk-ui-grid--2 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .tk-ui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tk-ui-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .tk-ui-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tk-ui-grid--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Split card body: main content on the left, aside on the right; stacks on phone. */
.tk-panel-split {
  display: grid;
  gap: 20px;
}
@media (min-width: 640px) {
  .tk-panel-split { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .tk-panel-split--aside-end { align-items: end; }
}

/* ── Skeleton box (generic pulsing placeholder) ── */
.tk-skel {
  display: block;
  width: 100%;
  height: var(--tk-skel-h, 24px);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tk-color-primary, #5f59fb) 8%, #f0f0f3);
  animation: tk-skel-pulse 1.4s ease-in-out infinite;
}
.tk-skel--card { --tk-skel-h: 144px; }
.tk-skel--row { --tk-skel-h: 64px; }
.tk-skel--tile { aspect-ratio: 3 / 5; height: auto; }
@keyframes tk-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── Empty state ── */
.tk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  background: var(--tk-color-surface, #ffffff);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  border-radius: var(--tk-card-radius, 12px);
  text-align: center;
  color: var(--tk-color-text, var(--tk-color-dark, #17171c));
}
/* A full-page state (404): the illustration stands on the page itself. */
.tk-empty--plain {
  background: transparent;
  border: 0;
  padding-inline: 0;
}
.tk-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--tk-color-muted-foreground, #64646e);
}
.tk-empty-title {
  margin: 0;
  color: var(--tk-color-heading, #17171c);
  font-family: var(--tk-font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
}
.tk-empty-description {
  margin: 0;
  color: var(--tk-color-muted-foreground, #64646e);
  font-size: 14px;
  line-height: 1.5;
  max-width: 420px;
}

/* ── Badge ── */
.tk-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tk-color-primary, #0d61c1) 10%, transparent);
  color: var(--tk-color-primary, #0d61c1);
  font-family: var(--tk-font-body, inherit);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.tk-badge--muted {
  background: color-mix(in srgb, var(--tk-color-muted-foreground, #64646e) 12%, transparent);
  color: var(--tk-color-muted-foreground, #64646e);
}

/* ── Pagination ── */
.tk-ui-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
.tk-ui-pagination-status {
  color: var(--tk-color-muted-foreground, #64646e);
  font-size: 13px;
}

/* ── Meta chip (icon + label inline) ── */
.tk-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tk-color-muted-foreground, #64646e);
  font-family: var(--tk-font-body, inherit);
  font-size: 13px;
}
.tk-meta svg { width: 16px; height: 16px; }

/* ── Text color/tone/size helpers ── */
.tk-text-heading { color: var(--tk-color-heading, #17171c); }
.tk-text-danger { color: var(--tk-color-danger, #dc2626); }
.tk-text-success { color: var(--tk-color-success, #16a34a); }
.tk-text-strong { font-weight: 600; }
.tk-text-xs { font-size: 11px; line-height: 1.4; }
.tk-text-lg { font-size: 18px; line-height: 1.4; }
.tk-text-2xl { font-size: 28px; line-height: 1.2; font-weight: 700; }
.tk-text-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tk-color-muted-foreground, #64646e);
  font-family: var(--tk-font-body, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tk-text-eyebrow svg { width: 14px; height: 14px; }

/* ── Ghost link wrapper for a whole clickable card ── */
.tk-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.tk-card-link:hover { transform: translateY(-2px); }

/* ── Loyalty hero highlight (soft primary tint aside) ── */
.tk-hint {
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tk-color-primary, #0d61c1) 6%, transparent);
  color: var(--tk-color-muted-foreground, #64646e);
  font-family: var(--tk-font-body, inherit);
  font-size: 13px;
  line-height: 1.5;
  max-width: 320px;
}

/* ── Phone input (react-phone-number-input, token-styled) ── */
.tk-phone {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: var(--tk-input-height, 40px);
  background: var(--checkout-input-bg, var(--tk-input-bg, #ffffff));
  color: var(--checkout-input-text, var(--tk-input-text, var(--tk-color-text, #17171c)));
  border-style: solid;
  border-width: var(--checkout-input-border-width, var(--tk-input-border-width, 1px));
  border-color: var(--checkout-input-border, var(--tk-input-border, var(--tk-color-border, #d4d4dc)));
  border-start-start-radius: var(--checkout-input-radius-ts, var(--tk-input-radius-top-start, var(--tk-input-radius, 8px)));
  border-start-end-radius: var(--checkout-input-radius-te, var(--tk-input-radius-top-end, var(--tk-input-radius, 8px)));
  border-end-end-radius: var(--checkout-input-radius-be, var(--tk-input-radius-bottom-end, var(--tk-input-radius, 8px)));
  border-end-start-radius: var(--checkout-input-radius-bs, var(--tk-input-radius-bottom-start, var(--tk-input-radius, 8px)));
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  direction: ltr;
}

/* Same four states as the checkout fields: rest, focus (border + soft ring),
   error (red border), error while focused (red border + red ring). */
.tk-phone:focus-within {
  border-color: var(--checkout-input-focus, var(--tk-input-focus, var(--tk-color-primary, #0d61c1)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--checkout-input-focus, var(--tk-input-focus, var(--tk-color-primary, #0d61c1))) 20%, transparent);
}

.tk-phone[data-invalid="true"] {
  border-color: var(--checkout-error-color, var(--tk-color-danger, #dc2626));
}

.tk-phone[data-invalid="true"]:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--checkout-error-color, var(--tk-color-danger, #dc2626)) 20%, transparent);
}

.tk-phone-country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-inline-end: var(--tk-input-border-width, 1px) solid var(--tk-input-border, var(--tk-color-border, currentColor));
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  flex-shrink: 0;
}
/* The picker is a button; a store with one country shows it as plain text. */
button.tk-phone-country {
  cursor: pointer;
  transition: background 0.15s ease;
}
button.tk-phone-country:hover,
button.tk-phone-country[data-state="open"] {
  background: color-mix(in srgb, currentColor 6%, transparent);
}
/* The field clips its children, so the focus ring is drawn inside the trigger. */
.tk-phone-country:focus-visible {
  outline: 2px solid var(--tk-input-focus, var(--tk-color-primary, currentColor));
  outline-offset: -2px;
}
.tk-phone-country:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.tk-phone-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 12%, transparent);
  flex-shrink: 0;
}
.tk-phone-flag svg { width: 100%; height: 100%; }
.tk-phone-dial {
  direction: ltr;
  font-family: var(--tk-font-body, inherit);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.tk-phone-chevron {
  flex-shrink: 0;
  color: var(--tk-color-muted-foreground, currentColor);
  transition: transform 0.18s ease;
}
.tk-phone-country[data-state="open"] .tk-phone-chevron {
  transform: rotate(180deg);
}

/* Country list. The box, the rows and the open animation come from the blocks'
   shared dropdown rules (the select content / item classes in the builder
   base styles); only what a searchable country list adds is defined here. It
   is portalled to <body>, so it reads theme tokens only. */
div.tk-phone-popover {
  /* Above the kit dialog overlay, which can host a phone field. */
  z-index: 10000;
  display: flex;
  flex-direction: column;
  width: var(--radix-popover-trigger-width, 280px);
  min-width: min(260px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  max-height: min(340px, var(--radix-popover-content-available-height, 340px));
  border-color: var(--tk-input-border, var(--tk-color-border, currentColor));
  border-start-start-radius: var(--tk-input-radius-top-start, var(--tk-input-radius, 8px));
  border-start-end-radius: var(--tk-input-radius-top-end, var(--tk-input-radius, 8px));
  border-end-end-radius: var(--tk-input-radius-bottom-end, var(--tk-input-radius, 8px));
  border-end-start-radius: var(--tk-input-radius-bottom-start, var(--tk-input-radius, 8px));
  transform-origin: var(--radix-popover-content-transform-origin);
}
.tk-phone-search {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: var(--tk-input-border-width, 1px) solid var(--tk-input-border, var(--tk-color-border, currentColor));
  color: var(--tk-color-muted-foreground, currentColor);
}
.tk-phone-search:focus-within {
  color: var(--tk-input-focus, var(--tk-color-primary, currentColor));
}
.tk-phone-search-icon { flex-shrink: 0; }
.tk-phone-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--tk-input-height, 40px);
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--tk-input-text, var(--tk-color-text, inherit));
  font-family: var(--tk-font-body, inherit);
  font-size: 15px;
  text-align: start;
}
.tk-phone-search-input::placeholder {
  color: var(--tk-input-placeholder, var(--tk-color-muted-foreground, currentColor));
}
.tk-phone-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tk-phone-popover .tk-phone-option {
  gap: 10px;
  /* Rows follow the theme input corners (square themes stay square). */
  border-radius: min(6px, var(--tk-input-radius, 6px));
}
.tk-phone-option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-phone-option-dial {
  flex-shrink: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.tk-phone-empty {
  padding: 16px 10px;
  color: var(--tk-color-muted-foreground, currentColor);
  font-size: 13px;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .tk-phone-country,
  .tk-phone-chevron { transition: none; }
}

.tk-phone-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  background: transparent;
  border: 0;
  outline: none;
  color: inherit;
  font-family: var(--tk-font-body, inherit);
  font-size: 15px;
  line-height: 1.4;
  direction: ltr;
}
.tk-phone-input::placeholder {
  color: var(--tk-input-placeholder, var(--tk-color-muted-foreground, #94949e));
}
.tk-phone-input:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Product tile (used by wishlist grid) ── */
.tk-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--tk-color-surface, #ffffff);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  border-radius: var(--tk-card-radius, 12px);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tk-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.06);
}
.tk-tile-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: color-mix(in srgb, var(--tk-color-muted-foreground, #94949e) 8%, transparent);
  overflow: hidden;
}
.tk-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tk-tile-body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tk-tile-name {
  margin: 0;
  color: var(--tk-color-heading, #17171c);
  font-family: var(--tk-font-body, inherit);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tk-tile-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--tk-font-body, inherit);
  font-size: 14px;
}
.tk-tile-price-now {
  color: var(--tk-color-primary, #0d61c1);
  font-weight: 700;
}
.tk-tile-price-was {
  color: var(--tk-color-muted-foreground, #94949e);
  text-decoration: line-through;
  font-size: 12px;
}

/* Wishlist toggle overlay for a tile */
.tk-wishlist-btn {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--tk-color-border, #e5e5ec);
  background: color-mix(in srgb, var(--tk-color-surface, #ffffff) 92%, transparent);
  color: var(--tk-color-text, #17171c);
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  backdrop-filter: blur(6px);
  transition: color 0.15s ease, background 0.15s ease;
  z-index: 2;
}
.tk-wishlist-btn:hover { color: var(--tk-color-primary, #0d61c1); }
.tk-wishlist-btn[aria-pressed="true"] { color: var(--tk-color-primary, #0d61c1); }
.tk-wishlist-btn[aria-pressed="true"] svg { fill: currentColor; }
.tk-wishlist-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Spinner (for inline icons like a LoaderCircle) ── */
.tk-spin { animation: tk-spin 1s linear infinite; }
@keyframes tk-spin { to { transform: rotate(360deg); } }

/* ── Text helpers ── */
.tk-text-muted {
  color: var(--tk-color-muted-foreground, #64646e);
  font-family: var(--tk-font-body, inherit);
}
.tk-text-sm { font-size: 13px; line-height: 1.5; }
.tk-text-center { text-align: center; }

/* ── Tabs (segmented control) ── */
.tk-ui-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--tk-color-border, #e5e5ec) 45%, transparent);
  padding: 4px;
  border-radius: var(--tk-card-radius, 12px);
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}
.tk-tab {
  flex: 1 1 0;
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: calc(var(--tk-card-radius, 12px) - 4px);
  font-family: var(--tk-font-body, inherit);
  font-size: 14px;
  font-weight: 500;
  color: var(--tk-color-muted-foreground, #64646e);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}
.tk-tab:hover {
  color: var(--tk-color-heading, #17171c);
}
.tk-tab--active {
  background: var(--tk-color-surface, #ffffff);
  color: var(--tk-color-heading, #17171c);
  font-weight: 600;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

/* ── Dialog / Modal ── */
.tk-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}
.tk-dialog-card {
  background: var(--tk-color-surface, #ffffff);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  border-radius: var(--tk-card-radius, 12px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 10px 10px -5px rgb(0 0 0 / 0.08);
  width: 100%;
  max-width: 480px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tk-dialog-title {
  margin: 0;
  font-family: var(--tk-font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
  color: var(--tk-color-heading, #17171c);
}
.tk-dialog-desc {
  margin: 0;
  font-family: var(--tk-font-body, inherit);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tk-color-muted-foreground, #64646e);
}
.tk-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* ── Menu / Dropdown primitives ── */
.tk-menu {
  position: relative;
  display: inline-block;
}
.tk-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--tk-button-radius, 8px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--tk-color-muted-foreground, #64646e);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.tk-menu-trigger:hover {
  color: var(--tk-color-primary, #0d61c1);
  background: color-mix(in srgb, var(--tk-color-primary, #0d61c1) 8%, transparent);
}
.tk-menu-content {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 180px;
  background: var(--tk-color-surface, #ffffff);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  border-radius: var(--tk-card-radius, 12px);
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tk-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: calc(var(--tk-card-radius, 12px) - 4px);
  font-family: var(--tk-font-body, inherit);
  font-size: 14px;
  font-weight: 500;
  color: var(--tk-color-heading, #17171c);
  text-decoration: none;
  border: none;
  background: transparent;
  width: 100%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tk-menu-item:hover {
  background: color-mix(in srgb, var(--tk-color-primary, #0d61c1) 8%, transparent);
  color: var(--tk-color-primary, #0d61c1);
}
.tk-menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.tk-menu-item--danger {
  color: var(--tk-color-danger, #dc2626);
}
.tk-menu-item--danger:hover {
  background: color-mix(in srgb, var(--tk-color-danger, #dc2626) 8%, transparent);
  color: var(--tk-color-danger, #dc2626);
}
.tk-menu-divider {
  height: 1px;
  background: var(--tk-color-border, #e5e5ec);
  margin: 4px 0;
}

/* ── Currency (money display + loading placeholder) ── */
.tk-currency { font-variant-numeric: tabular-nums; }
.tk-currency--loading {
  display: inline-block;
  vertical-align: middle;
  height: 1em;
  width: 4rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tk-color-muted, #ececf4) 60%, transparent);
  animation: tk-skel-pulse 1.4s ease-in-out infinite;
}

/* ── Logo (fallback shell so a bare <Logo /> stays inline with tokens) ── */
.tk-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tk-logo-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.tk-logo-box img { height: 100%; width: auto; object-fit: contain; }
.tk-logo-name {
  font-weight: 700;
  font-size: 1.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Digital access card (download / license key delivery view) ── */
.tk-digital {
  min-height: 70vh;
  padding: 64px 16px;
}
.tk-digital-card {
  margin: 0 auto;
  max-width: 28rem;
  border-radius: 14px;
  border: 1px solid var(--tk-color-border, #e5e5ec);
  background: var(--tk-color-surface, var(--tk-color-background, #ffffff));
  padding: 24px;
  text-align: center;
}
.tk-digital-icon {
  margin: 0 auto 16px;
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tk-color-primary, currentColor) 12%, transparent);
  color: var(--tk-color-primary, currentColor);
}
.tk-digital-icon--danger {
  background: color-mix(in srgb, var(--tk-color-danger, #dc2626) 12%, transparent);
  color: var(--tk-color-danger, #dc2626);
}
.tk-digital-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.tk-digital-desc {
  font-size: 0.875rem;
  color: var(--tk-color-muted-foreground, #64646e);
  margin: 0 0 20px;
}
.tk-digital-key {
  height: 48px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--tk-color-border, #e5e5ec);
  background: var(--tk-color-muted, #f5f5f8);
  padding: 0 12px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  color: inherit;
}
.tk-digital-meta {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--tk-color-muted-foreground, #64646e);
}

/* ── Recover-cart status view ── */
.tk-status-view {
  display: flex;
  min-height: 60vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 16px;
  text-align: center;
}
.tk-status-view__icon {
  color: var(--tk-color-muted-foreground, #64646e);
}
.tk-status-view__text {
  font-size: 1rem;
  color: var(--tk-color-muted-foreground, #64646e);
  margin: 0;
}
.tk-status-view__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tk-color-primary, currentColor);
  text-decoration: none;
}
.tk-status-view__link:hover { text-decoration: underline; }

/* ── AI Agent Widget ── */
.tk-ai-window {
  position: fixed;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  height: 560px;
  max-height: calc(100vh - 32px);
  width: calc(100vw - 32px);
  max-width: 390px;
  overflow: hidden;
  border-radius: var(--tk-card-radius, 14px);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  background: var(--tk-color-background, #ffffff);
  color: var(--tk-color-text, #17171c);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  font-family: var(--tk-font-body, inherit);
}
.tk-ai-window--rtl { left: 16px; }
@media (min-width: 768px) {
  .tk-ai-window--rtl { left: 24px; }
}
.tk-ai-window--ltr { right: 16px; }
@media (min-width: 768px) {
  .tk-ai-window--ltr { right: 24px; }
}

.tk-ai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tk-color-border, #e5e5ec);
  flex-shrink: 0;
  background: var(--tk-color-background, #ffffff);
}
.tk-ai-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--tk-color-primary, #0d61c1) 12%, transparent);
  color: var(--tk-color-primary, #0d61c1);
}
.tk-ai-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tk-ai-header-info {
  flex: 1 1 0%;
  min-width: 0;
}
.tk-ai-header-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--tk-color-heading, #17171c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-ai-header-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--tk-color-muted-foreground, #64646e);
  display: flex;
  align-items: center;
  gap: 4px;
}
.tk-ai-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--tk-color-muted-foreground, #64646e);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.tk-ai-icon-btn:hover {
  background: color-mix(in srgb, var(--tk-color-muted, #ececf4) 80%, transparent);
  color: var(--tk-color-heading, #17171c);
}
.tk-ai-icon-btn svg {
  width: 16px;
  height: 16px;
}

.tk-ai-messages {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tk-ai-msg-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.tk-ai-msg-row--customer {
  justify-content: flex-end;
}
.tk-ai-msg-avatar {
  margin-top: 4px;
  display: flex;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 14px;
}
.tk-ai-msg-avatar--assistant {
  background: color-mix(in srgb, var(--tk-color-primary, #0d61c1) 12%, transparent);
  color: var(--tk-color-primary, #0d61c1);
}
.tk-ai-msg-avatar--owner {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}
.tk-ai-msg-avatar--customer {
  background: var(--tk-color-muted, #f1f1f5);
  color: var(--tk-color-muted-foreground, #64646e);
}
.tk-ai-msg-bubble {
  max-width: 82%;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.tk-ai-msg-bubble--assistant {
  border: 1px solid var(--tk-color-border, #e5e5ec);
  background: color-mix(in srgb, var(--tk-color-muted, #f5f5f8) 50%, var(--tk-color-background, #ffffff));
  color: var(--tk-color-text, #17171c);
}
.tk-ai-msg-bubble--owner {
  border: 1px solid rgba(59, 130, 246, 0.3);
  background: #eff6ff;
  color: #1e3a8a;
}
:root.dark .tk-ai-msg-bubble--owner,
[data-theme="dark"] .tk-ai-msg-bubble--owner {
  background: rgba(30, 58, 138, 0.35);
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.4);
}
.tk-ai-msg-bubble--customer {
  background: var(--tk-color-primary, #0d61c1);
  color: var(--tk-color-primary-foreground, #ffffff);
}
.tk-ai-owner-name {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  color: #1d4ed8;
}
:root.dark .tk-ai-owner-name,
[data-theme="dark"] .tk-ai-owner-name {
  color: #93c5fd;
}
.tk-ai-msg-img {
  margin-bottom: 4px;
  max-height: 240px;
  max-width: 100%;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}
.tk-ai-msg-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.tk-ai-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tk-color-muted-foreground, #64646e);
}

.tk-ai-cards-stack {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.tk-ai-card {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--tk-color-border, #e5e5ec);
  background: var(--tk-color-surface, var(--tk-color-background, #ffffff));
  color: var(--tk-color-text, #17171c);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.tk-ai-card-content {
  display: flex;
  gap: 10px;
  padding: 10px;
}
.tk-ai-card-thumb {
  display: flex;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--tk-color-muted, #f1f1f5);
  color: var(--tk-color-muted-foreground, #64646e);
}
.tk-ai-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tk-ai-card-details {
  flex: 1 1 0%;
  min-width: 0;
}
.tk-ai-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.tk-ai-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tk-color-heading, #17171c);
}
.tk-ai-card-meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--tk-color-muted-foreground, #64646e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-ai-stock-badge {
  flex-shrink: 0;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--tk-color-primary, #0d61c1) 12%, transparent);
  color: var(--tk-color-primary, #0d61c1);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
}
.tk-ai-price-wrap {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.tk-ai-price-main {
  font-size: 14px;
  font-weight: 700;
  color: var(--tk-color-heading, #17171c);
}
.tk-ai-price-old {
  font-size: 12px;
  color: var(--tk-color-muted-foreground, #64646e);
  text-decoration: line-through;
}
.tk-ai-card-desc {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--tk-color-muted-foreground, #64646e);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tk-ai-variants-list {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tk-ai-variant-chip {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
  border: 1px solid var(--tk-color-border, #e5e5ec);
  background: color-mix(in srgb, var(--tk-color-muted, #f1f1f5) 50%, transparent);
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--tk-color-muted-foreground, #64646e);
}

.tk-ai-actions-wrap {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tk-ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--tk-button-radius, 6px);
  font-family: var(--tk-font-body, inherit);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  user-select: none;
}
.tk-ai-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.tk-ai-btn svg { flex-shrink: 0; }
.tk-ai-btn--xs {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.tk-ai-btn--xs svg {
  width: 13px;
  height: 13px;
}
.tk-ai-btn--sm {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}
.tk-ai-btn--sm svg {
  width: 15px;
  height: 15px;
}
.tk-ai-btn--icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
}
.tk-ai-btn--icon svg {
  width: 18px;
  height: 18px;
}
.tk-ai-btn--primary {
  background: var(--tk-color-primary, #0d61c1);
  color: var(--tk-color-primary-foreground, #ffffff);
}
.tk-ai-btn--primary:hover:not(:disabled) {
  opacity: 0.92;
}
.tk-ai-btn--secondary {
  background: var(--tk-color-muted, #f1f1f5);
  color: var(--tk-color-heading, #17171c);
  border-color: var(--tk-color-border, #e5e5ec);
}
.tk-ai-btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--tk-color-muted, #f1f1f5) 75%, var(--tk-color-text, #17171c));
}
.tk-ai-btn--destructive {
  background: var(--tk-color-danger, #dc2626);
  color: #ffffff;
}
.tk-ai-btn--destructive:hover:not(:disabled) {
  opacity: 0.9;
}
.tk-ai-btn--ghost {
  background: transparent;
  color: var(--tk-color-muted-foreground, #64646e);
}
.tk-ai-btn--ghost:hover:not(:disabled) {
  background: var(--tk-color-muted, #f1f1f5);
  color: var(--tk-color-heading, #17171c);
}

.tk-ai-drawer {
  max-height: 48%;
  flex-shrink: 0;
  overflow-y: auto;
  border-top: 1px solid var(--tk-color-border, #e5e5ec);
  padding: 12px;
  background: var(--tk-color-background, #ffffff);
}
.tk-ai-drawer-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tk-ai-drawer-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tk-color-heading, #17171c);
}
.tk-ai-drawer-card {
  border-radius: 6px;
  border: 1px solid var(--tk-color-border, #e5e5ec);
  background: color-mix(in srgb, var(--tk-color-muted, #f1f1f5) 50%, transparent);
  padding: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.tk-ai-drawer-card p { margin: 0; }
.tk-ai-drawer-card p + p { margin-top: 4px; }
.tk-ai-drawer-items {
  margin-top: 8px;
  border-top: 1px solid var(--tk-color-border, #e5e5ec);
  padding-top: 8px;
}
.tk-ai-drawer-item-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--tk-color-muted-foreground, #64646e);
}
.tk-ai-drawer-item-total {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--tk-color-heading, #17171c);
}
.tk-ai-error-text {
  margin: 0;
  font-size: 12px;
  color: var(--tk-color-danger, #dc2626);
}
.tk-ai-drawer-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.tk-ai-drawer-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 480px) {
  .tk-ai-drawer-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.tk-ai-input-bar {
  flex-shrink: 0;
  border-top: 1px solid var(--tk-color-border, #e5e5ec);
  padding: 12px;
  background: var(--tk-color-background, #ffffff);
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.tk-ai-textarea {
  flex: 1 1 0%;
  min-height: 38px;
  max-height: 112px;
  resize: none;
  border-radius: var(--tk-input-radius, 8px);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  background: var(--tk-input-bg, #ffffff);
  color: var(--tk-input-text, var(--tk-color-text, #17171c));
  padding: 8px 12px;
  font-family: var(--tk-font-body, inherit);
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease;
}
.tk-ai-textarea:focus {
  border-color: var(--tk-color-primary, #0d61c1);
}
.tk-ai-textarea::placeholder {
  color: var(--tk-color-muted-foreground, #94949e);
}

.tk-ai-trigger {
  position: fixed;
  z-index: 50;
  bottom: max(6rem, calc(1.5rem + var(--tk-mobile-bar-offset, 0px) + var(--tk-sticky-buy-offset, 0px)));
}
@media (min-width: 768px) {
  .tk-ai-trigger {
    bottom: calc(1.5rem + var(--tk-mobile-bar-offset, 0px) + var(--tk-sticky-buy-offset, 0px));
  }
  .tk-ai-trigger--offset {
    bottom: 7rem;
  }
}
.tk-ai-trigger--rtl { left: 24px; }
.tk-ai-trigger--ltr { right: 24px; }
.tk-ai-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--tk-color-primary, #0d61c1);
  color: var(--tk-color-primary-foreground, #ffffff);
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tk-ai-trigger-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 20px -3px rgb(0 0 0 / 0.25);
}
.tk-ai-trigger-btn:active {
  transform: scale(0.95);
}
.tk-ai-trigger-icon {
  width: 24px;
  height: 24px;
}

/* ── Tk Card ── */
.tk-card {
  background: var(--tk-color-surface, #ffffff);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  border-radius: var(--tk-card-radius, 12px);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
  color: var(--tk-color-text, var(--tk-color-dark, #17171c));
  overflow: hidden;
}
.tk-card-header {
  padding: 20px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tk-card-title {
  margin: 0;
  color: var(--tk-color-heading, #17171c);
  font-family: var(--tk-font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.tk-card-desc {
  margin: 0;
  color: var(--tk-color-muted-foreground, #64646e);
  font-family: var(--tk-font-body, inherit);
  font-size: 13px;
  line-height: 1.5;
}
.tk-card-content {
  padding: 20px 24px;
}
.tk-card-footer {
  padding: 16px 24px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--tk-color-border, #f0f0f4);
}

/* ── Tk Alert ── */
.tk-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--tk-card-radius, 8px);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  background: var(--tk-color-surface, #ffffff);
  color: var(--tk-color-text, #17171c);
  font-size: 14px;
  line-height: 1.5;
}
.tk-alert-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.tk-alert-body {
  flex: 1 1 0%;
  min-width: 0;
}
.tk-alert-title {
  margin: 0 0 4px 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: inherit;
}
.tk-alert-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: inherit;
}
.tk-alert--info,
.tk-alert--default {
  border-color: var(--tk-color-border, #e5e5ec);
  background: var(--tk-color-muted, #f4f4f6);
  color: var(--tk-color-text, #17171c);
}
.tk-alert--destructive,
.tk-alert--danger {
  border-color: color-mix(in srgb, var(--tk-color-danger, #dc2626) 30%, transparent);
  background: color-mix(in srgb, var(--tk-color-danger, #dc2626) 8%, var(--tk-color-surface, #ffffff));
  color: var(--tk-color-danger, #dc2626);
}
.tk-alert--success {
  border-color: color-mix(in srgb, #16a34a 30%, transparent);
  background: color-mix(in srgb, #16a34a 8%, var(--tk-color-surface, #ffffff));
  color: #15803d;
}
.tk-alert--warning {
  border-color: color-mix(in srgb, #ca8a04 30%, transparent);
  background: color-mix(in srgb, #ca8a04 8%, var(--tk-color-surface, #ffffff));
  color: #a16207;
}

/* ── Tk Badge ── */
.tk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  transition: all 0.15s ease;
  background: var(--tk-color-primary, #0d61c1);
  color: var(--tk-color-primary-foreground, #ffffff);
}
.tk-badge--secondary,
.tk-badge--muted {
  background: var(--tk-color-muted, #f4f4f6);
  color: var(--tk-color-muted-foreground, #64646e);
}
.tk-badge--destructive {
  background: color-mix(in srgb, var(--tk-color-danger, #dc2626) 15%, transparent);
  color: var(--tk-color-danger, #dc2626);
}
.tk-badge--outline {
  background: transparent;
  border: 1px solid var(--tk-color-border, #d4d4dc);
  color: var(--tk-color-text, #17171c);
}
.tk-badge--success {
  background: color-mix(in srgb, #16a34a 15%, transparent);
  color: #16a34a;
}

/* ── Tk Fieldset & Legend & FieldGroup ── */
.tk-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.tk-field-legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--tk-color-heading, #17171c);
  margin-bottom: 8px;
  padding: 0;
}
.tk-field-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tk-field-desc {
  margin: 0;
  font-size: 12px;
  color: var(--tk-color-muted-foreground, #64646e);
  line-height: 1.4;
}
.tk-field-error {
  margin: 0;
  font-size: 12px;
  color: var(--tk-color-danger, #dc2626);
  line-height: 1.4;
}
.tk-field-sep {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--tk-color-muted-foreground, #64646e);
  font-size: 12px;
  gap: 12px;
  margin: 8px 0;
}
.tk-field-sep::before,
.tk-field-sep::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--tk-color-border, #e5e5ec);
}

/* ── Tk Label ── */
.tk-label {
  color: var(--tk-color-heading, #17171c);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Tk Radio & RadioGroup ── */
.tk-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tk-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 2px solid var(--tk-input-border, var(--tk-color-border, #d4d4dc));
  background: var(--tk-input-bg, #ffffff);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tk-radio[data-state="checked"] {
  border-color: var(--tk-color-primary, #0d61c1);
}
.tk-radio-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.tk-radio-indicator {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--tk-color-primary, #0d61c1);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.tk-radio[data-state="checked"] .tk-radio-indicator {
  transform: scale(1);
}
.tk-radio[data-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Tk Select ── */
.tk-ui-select {
  position: relative;
  width: 100%;
}
.tk-ui-select-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: var(--tk-input-height, 42px);
  padding: 0 12px;
  background: var(--tk-input-bg, #ffffff);
  border: 1px solid var(--tk-input-border, var(--tk-color-border, #d4d4dc));
  border-radius: var(--tk-input-radius, 8px);
  color: var(--tk-input-text, var(--tk-color-text, #17171c));
  font-family: var(--tk-font-body, inherit);
  font-size: 14px;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tk-ui-select-trigger:focus,
.tk-ui-select-trigger:focus-visible {
  border-color: var(--tk-color-primary, #0d61c1);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tk-color-primary, #0d61c1) 20%, transparent);
}
.tk-ui-select-trigger[data-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.tk-ui-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.tk-ui-select-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--tk-color-muted-foreground, #64646e);
  transition: transform 0.2s ease;
  margin-inline-start: 8px;
}
.tk-ui-select-trigger[data-state="open"] .tk-ui-select-icon {
  transform: rotate(180deg);
}
.tk-ui-select-content {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background: var(--tk-color-surface, #ffffff);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  border-radius: var(--tk-card-radius, 8px);
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  padding: 4px;
}
.tk-ui-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: calc(var(--tk-input-radius, 8px) - 2px);
  font-size: 13px;
  color: var(--tk-color-text, #17171c);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
}
.tk-ui-select-item:hover,
.tk-ui-select-item:focus {
  background: var(--tk-color-muted, #f4f4f6);
}
.tk-ui-select-item[data-state="checked"] {
  background: color-mix(in srgb, var(--tk-color-primary, #0d61c1) 10%, transparent);
  color: var(--tk-color-primary, #0d61c1);
  font-weight: 600;
}
.tk-ui-select-item[data-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.tk-ui-select-check {
  color: var(--tk-color-primary, #0d61c1);
}

/* ── Tk Textarea ── */
.tk-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  background: var(--tk-input-bg, #ffffff);
  color: var(--tk-input-text, var(--tk-color-text, #17171c));
  border: var(--tk-input-border-width, 1px) solid var(--tk-input-border, var(--tk-color-border, #d4d4dc));
  border-radius: var(--tk-input-radius, 8px);
  font-family: var(--tk-font-body, inherit);
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tk-textarea:focus,
.tk-textarea:focus-visible {
  border-color: var(--tk-color-primary, #0d61c1);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tk-color-primary, #0d61c1) 20%, transparent);
}
.tk-textarea::placeholder {
  color: var(--tk-input-placeholder, var(--tk-color-muted-foreground, #94949e));
}

/* ── Tk Skeleton ── */
.tk-skel {
  background: var(--tk-color-muted, #ececf0);
  border-radius: var(--tk-card-radius, 6px);
  animation: tk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.tk-skel--card {
  height: 96px;
  width: 100%;
  border-radius: var(--tk-card-radius, 12px);
}
.tk-skel--row {
  height: 20px;
  width: 100%;
}
.tk-skel--tile {
  aspect-ratio: 1 / 1;
  width: 100%;
}
@keyframes tk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Tk Separator ── */
.tk-separator {
  border: none;
  margin: 0;
  background: var(--tk-color-border, #e5e5ec);
  flex-shrink: 0;
}
.tk-separator--horizontal {
  width: 100%;
  height: 1px;
}
.tk-separator--vertical {
  width: 1px;
  height: 100%;
}

/* ── Tk Dialog Modal ── */
.tk-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
  animation: tk-fade-in 0.15s ease-out;
}
.tk-dialog-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--tk-color-surface, #ffffff);
  border: 1px solid var(--tk-color-border, #e5e5ec);
  border-radius: var(--tk-card-radius, 16px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 10px 10px -5px rgb(0 0 0 / 0.1);
  padding: 24px;
  max-height: 90vh;
  overflow-y: auto;
  color: var(--tk-color-text, #17171c);
  animation: tk-scale-up 0.15s ease-out;
}
.tk-dialog-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.tk-dialog-title {
  margin: 0;
  font-family: var(--tk-font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
  color: var(--tk-color-heading, #17171c);
}
.tk-dialog-desc {
  margin: 0;
  font-size: 13px;
  color: var(--tk-color-muted-foreground, #64646e);
  line-height: 1.5;
}
.tk-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
@keyframes tk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes tk-scale-up {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}


/*
 * Collapse a section whose blocks rendered nothing - a product's reviews, specs,
 * FAQ, bought-together or size guide with no data would otherwise leave an empty
 * padded band and a large gap. Two shapes count as empty:
 *   - the inner has no children at all (every block returned null, e.g. a
 *     BoughtTogether/ProductFaq with hideWhenEmpty and no data), and
 *   - the inner's only child is itself an empty element.
 * Storefront only: the editor keeps empty sections droppable.
 */
.tk-section:has(> .tk-section-inner:empty),
.tk-section:has(> .tk-section-inner > :only-child:empty) {
  display: none;
}