/* Kitchnner — styles for dynamically-rendered (JavaScript-generated) content.
   styles.css is a purged Tailwind build: it only contains classes that were
   used in the ORIGINAL static HTML. Anything new added later via JS (cart
   items, product cards, review lists, etc.) needs its styling defined here
   instead — a Tailwind-looking class name in JS-generated markup with no
   matching rule here silently does nothing. */

/* Sizing */
.kc-w-20 { width: 80px; }
.kc-h-20 { height: 80px; }
.kc-w-24 { width: 96px; }
.kc-w-6  { width: 24px; }
.kc-h-8  { height: 32px; }
.kc-w-8  { width: 32px; }
.kc-min-w-0 { min-width: 0; }
.kc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Borders */
.kc-border-subtle { border: 1px solid rgba(11, 10, 9, 0.08); }

/* Hover effects (compiled Tailwind hover:/group-hover: variants aren't
   available for JS-generated classes, so these are hand-written instead) */
.kc-hover-primary:hover { color: #bb0011; }
.kc-card-hover:hover .kc-img-zoom { transform: scale(1.1); }
.kc-card-hover:hover .kc-underline { transform: scaleX(1); }
.kc-card-hover:hover .kc-title-hover { color: #bb0011; }
.kc-card-hover:hover .kc-tracking-hover { letter-spacing: 0.15em; }
.kc-card-hover-border:hover { border-color: #bb0011; }

/* Badges */
.kc-badge-oos {
  position: absolute; background: #334155; color: #fff;
  padding: 2px 10px; font-size: 9px; letter-spacing: 0.1em;
  border-radius: 999px; text-transform: uppercase; font-weight: 700;
}

/* Arbitrary small text sizes */
.kc-text-9  { font-size: 9px; }
.kc-text-10 { font-size: 10px; }
.kc-text-14 { font-size: 14px; }
.kc-text-16 { font-size: 16px; }

/* Aspect ratios */
.kc-aspect-4-5 { aspect-ratio: 4 / 5; }

/* Misc */
.kc-underline-bar { height: 2px; }
.kc-py-05 { padding-top: 2px; padding-bottom: 2px; }
.kc-col-span-3 { grid-column: span 3 / span 3; }

/* Buy Now button */
.kc-buy-now-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px 0; margin-top: 8px;
  background: #0b1c30; color: #fff; border: none; border-radius: 4px;
  font-family: Montserrat, Arial, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: opacity 0.15s;
}
.kc-buy-now-btn:hover { opacity: 0.88; }

/* Payment method selector on cart page */
.kc-payment-option {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1.5px solid #ddd; border-radius: 6px; cursor: pointer; margin-bottom: 10px; transition: border-color 0.15s;
}
.kc-payment-option:hover { border-color: #bb0011; }
.kc-payment-option.selected { border-color: #bb0011; background: rgba(187, 0, 17, 0.04); }

/* Product card layout — keeps titles/taglines at a fixed height and pins
   Buy Now to the same vertical position across every card in a row,
   regardless of how long each product's name/tagline happens to be. */
.kc-card-fill { display: flex; flex-direction: column; height: 100%; }
.kc-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.kc-card-bottom { margin-top: auto; }
.kc-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Buy Now modal — display is driven entirely from here, not inline styles,
   so toggling the .hidden class actually works. */
#buy-now-modal:not(.hidden) { display: flex; align-items: center; justify-content: center; }