/*
 * 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;
}