/* ============================================================================
📦 FILE: store.css
🎨 PURPOSE: Full layout for Starter Store product page
🔄 VERSION: Phase XXI+1 — Token-only + a11y & motion-safe (no hex/rgba/!important)
============================================================================ */

/* 🌐 Base Page Layout */
.page-shell {
  padding: 4px;
  background: var(--app-bg, var(--color_bg));
  color: var(--color_text);
}

/* 🔳 Widget Row Layout */
.starter-widget-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px;
  margin: 12px auto 28px;
  gap: 20px;
}
.starter-widget-row.compact {
  margin: 8px auto 20px;
  gap: 16px;
}

/* 🧩 Individual Widget Box */
.starter-widget {
  flex: 1 1 260px;
  max-width: 340px;
  background-color: var(--secondary);
  border: 2px solid var(--brand);
  border-radius: 12px;
  padding: 14px 16px 14px;
  text-align: left;
  color: var(--color_text);
  box-shadow: 1px 1px 5px color-mix(in oklab, var(--color_text) 7%, transparent);
  display: flex;
  align-items: stretch;
}
.starter-widget.compact {
  padding: 10px 14px;
}
.starter-widget-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.starter-widget .starter-text h3 {
  margin-top: 0;
}
.starter-widget .starter-text p {
  margin: 4px 0 0;
}

.starter-widget .starter-icon {
  font-size: 1.55rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: color-mix(in oklab, var(--secondary) 70%, black 10%);
  border-radius: 8px;
  color: var(--color_text);
  flex-shrink: 0;
  margin: 0;
}

.starter-widget h3 {
  font-size: 1rem;
  margin: 0 0 2px;
  color: var(--brand);
  line-height: 1.15;
}

.starter-widget p {
  font-size: 0.82rem;
  color: var(--color_text);
  line-height: 1.25;
}

/* 🛍️ Product Grid */
.store-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* 🧱 Product Box */
.product-box {
  background-color: var(--color_surface);
  border: 2px solid var(--color_border);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  color: var(--color_text);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 2px 2px 8px
    color-mix(in oklab, var(--color_text) 10%, transparent);
  /* Make card a vertical flex container so footer can pin to bottom */
  display: flex;
  flex-direction: column;
}

.product-box--clickable {
  cursor: pointer;
}

.product-box--clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Give cards enough height on wider screens so the description can anchor the footer */
@media screen and (min-width: 680px) {
  .product-box {
    min-height: 500px;
  }
}

.product-box:hover {
  transform: scale(1.02);
  border-color: var(--primary);
  box-shadow: 2px 2px 10px
    color-mix(in oklab, var(--color_text) 12%, transparent);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .product-box {
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }
  .product-box:hover {
    transform: none;
  }
}

/* 🖼️ Product Image */
.product-image {
  width: 240px;
  height: 240px; /* fixed height to prevent shorter images from collapsing layout */
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}

/* 🛒 Product Name, Description, Price */
.product-box h3 {
  margin: 8px 0 4px;
  font-size: 1.25rem;
  color: var(--color_text);
}

/* 🛒 Product Price */
.product-box .price {
  /* Use brand instead of primary because some storefront themes set primary to the same
     color as the card surface, which makes prices disappear. */
  color: var(--brand, var(--color_text));
  font-weight: bold;
  font-size: 1.1rem;
  margin: 6px 0 0;
}

/* Footer container that pins desc + price + actions to bottom */
.product-card-footer {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Compact variant when no description is present */
.product-box.product-box--compact .product-card-footer {
  gap: 0;
}
.product-box.product-box--compact h3 {
  margin-bottom: 2px;
}

.product-card-footer .desc {
  margin: 0 0 6px;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.product-card-footer .desc-note {
  margin: 0 0 8px;
  color: color-mix(in oklab, var(--color_text) 78%, white 22%);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-footer .desc--empty {
  min-height: 12px;
}

.product-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.product-card-meta--no-sku {
  padding-top: 8px;
}

.product-card-footer .product-sku {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid #4b5563;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color_text) 72%, white 28%);
}

.product-sku__text {
  min-width: 0;
}

.product-sku__value {
  word-break: break-word;
}

.sku-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color_border);
  border-radius: 999px;
  background: var(--color_surface);
  color: var(--brand, var(--color_text));
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.sku-copy-button:hover {
  background: color-mix(in oklab, var(--color_surface) 86%, var(--brand) 14%);
  border-color: var(--brand, var(--color_border));
}

.sku-copy-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sku-copy-button[data-copy-state="done"] {
  color: var(--primary);
  border-color: var(--primary);
}

/* 🧰 Primary Product Actions */
.product-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.product-actions button {
  background-color: var(--primary);
  color: var(--on_primary);
  padding: 8px 14px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  width: 100%;
  max-width: 180px;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

.product-actions button:hover {
  background-color: color-mix(in oklab, var(--primary) 90%, black 10%);
  border-color: color-mix(in oklab, var(--primary) 90%, black 10%);
}

.product-actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* 🔧 Subactions */
.product-subactions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* Normal spacing; footer is pinned via price's margin-top:auto */
  margin-top: 6px;
  width: 100%;
  max-width: 220px;
}

.product-subactions label {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color_text);
}

/* 🔧 Subactions */
.product-subactions .view-details-link {
  font-size: 0.9rem;
  color: var(--brand);
  text-decoration: none;
}

.product-subactions .view-details-link:hover {
  text-decoration: underline;
}

.product-subactions .view-details-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 🔘 Compare Button Controls */
.compare-controls {
  text-align: center;
  margin-top: 32px;
}

#compare-button {
  background-color: var(--primary);
  color: var(--on_primary);
  border: 1px solid var(--primary);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

#compare-button:hover {
  background-color: color-mix(in oklab, var(--primary) 90%, black 10%);
  border-color: color-mix(in oklab, var(--primary) 90%, black 10%);
}

#compare-button:disabled {
  background-color: var(--secondary);
  color: var(--color_text_muted);
  border-color: var(--color_border);
  cursor: not-allowed;
}

#compare-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* 🌙 Dark theme overrides for visibility */
html[data-theme="dark"] .product-box .price,
body[data-theme="dark"] .product-box .price {
  color: var(--on_surface, #ffffff);
}

html[data-theme="dark"] .product-subactions .view-details-link,
body[data-theme="dark"] .product-subactions .view-details-link {
  color: var(--on_surface, #ffffff);
}