/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ============================================================================
 * Modal visibility fix
 * ============================================================================
 * Modals are toggled via the `hidden` class but their base class also carries
 * a display utility (e.g. `class="hidden ... flex"`); the open/close JS toggles
 * only `hidden`. Tailwind's utility source order is NOT guaranteed identical
 * across build environments - on the deployed build `.flex` was ordered after
 * `.hidden`, so `.flex` won and modals rendered VISIBLE on page load and could
 * not be closed (the "No, go back" button re-adds `hidden`, but `.flex` still
 * won). A co-class selector beats a single-class one by specificity regardless
 * of source order, so this pins `hidden` to win. Responsive patterns such as
 * `hidden md:block` are unaffected: they don't carry a plain (non-prefixed)
 * display class next to `hidden`.
 */
.hidden.flex,
.hidden.inline-flex,
.hidden.grid,
.hidden.block,
.hidden.inline-block {
  display: none;
}

/* ============================================================================
 * #101 product card style polish
 * ============================================================================
 * These rules live HERE (not in app/views/layouts/shop.html.erb's embedded
 * <style> block) because the shop layout's pre-existing Firebase web-SDK
 * config trips the credential scanner on whole-file blob commits. Higher
 * selector specificity (e.g. .product-grid .product-card__info vs
 * .product-card__info) wins the cascade without needing !important.
 */

.product-grid .product-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

@media (hover: hover) {
  .product-grid .product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  }
}

/* Press feedback: settle the card back down + dim slightly on active (kang
 * motion pass). Same .product-grid specificity as the hover rule so it wins
 * the cascade over the generic .btn-style motion in shop_design.css. */
.product-grid .product-card:active {
  transform: translateY(0);
  opacity: .92;
}

@media (prefers-reduced-motion: reduce) {
  .product-grid .product-card {
    transition: none;
  }
  .product-grid .product-card:hover,
  .product-grid .product-card:active {
    transform: none;
    opacity: 1;
  }
}

.product-card__pill-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.product-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
  flex-shrink: 0;
}

.product-card__dot--in-stock {
  background: #1a1a1a;
}

.product-card__dot--oos {
  background: #cccccc;
}

.product-card__discount-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #1a1a1a;
  color: #fff;
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 7px;
  border-radius: 0;
  z-index: 2;
}

.product-grid .product-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-grid .product-card__info > * {
  margin: 0;
}

/* ============================================================================
 * #102 PDP gallery (thumbnail strip below main image)
 * ============================================================================ */

.product-pdp__thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px auto 0;
  justify-content: center;
  max-width: 100%;
}

.product-pdp__thumb {
  width: 68px;
  height: 68px;
  padding: 0;
  border: 1px solid #e8e8e8;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  transition: border-color .15s ease;
}

.product-pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-pdp__thumb:hover {
  border-color: #999999;
}

.product-pdp__thumb--active {
  border-color: #1a1a1a;
}

.product-pdp__thumb:focus-visible {
  outline: 1px solid #1a1a1a;
  outline-offset: 2px;
}

/*
 * Rendered rich-text descriptions.
 *
 * Tailwind preflight strips bullets, heading sizes and margins from ul/ol/h1/p,
 * so formatting an admin applied in the editor would arrive on the storefront
 * as flat, unbulleted lines. These rules put back exactly what the editor can
 * produce - nothing more - so what Kang types is what a customer sees.
 */
.ktsd-rich-text > *:first-child { margin-top: 0; }
.ktsd-rich-text > *:last-child  { margin-bottom: 0; }

.ktsd-rich-text p,
.ktsd-rich-text div { margin: 0 0 0.75em; }

.ktsd-rich-text h1 { font-size: 1.35em; font-weight: 700; margin: 0 0 0.5em; }
.ktsd-rich-text h2 { font-size: 1.15em; font-weight: 700; margin: 0 0 0.5em; }

.ktsd-rich-text ul,
.ktsd-rich-text ol { margin: 0 0 0.75em; padding-left: 1.5em; }
.ktsd-rich-text ul { list-style: disc; }
.ktsd-rich-text ol { list-style: decimal; }
.ktsd-rich-text li { margin: 0.15em 0; display: list-item; }

.ktsd-rich-text strong, .ktsd-rich-text b { font-weight: 700; }
.ktsd-rich-text em, .ktsd-rich-text i     { font-style: italic; }
.ktsd-rich-text del                       { text-decoration: line-through; }

.ktsd-rich-text a { text-decoration: underline; }

.ktsd-rich-text blockquote {
  margin: 0 0 0.75em;
  padding-left: 0.9em;
  border-left: 3px solid currentColor;
  opacity: 0.85;
}

.ktsd-rich-text pre {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}