/* product.css
 * Page-level styling for single-iceit_product.php (CatalogElem.png).
 *
 * Builds on top of the tokens and components already defined in
 * tokens.css / components.css / pages.css — this file only adds
 * the handful of refinements specific to the product hero, pill
 * tabs, stepper, quote-band and product form.
 */

/* ---------- Product hero ---------- */

/* Badge override — design uses a solid green pill (not uppercase). */
.ice-page--product .ice-badge {
  background: var(--ice-success);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  padding: 6px 12px;
  font-size: var(--ice-fs-xs);
  border-radius: 8px;
}
.ice-page--product .ice-badge--new {
  background: #eaf0ff;
  color: var(--ice-primary);
}

/* Reset and retune the product-hero grid from tokens.css for the new design. */
.ice-page--product .ice-product {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ice-s-7);
  padding: var(--ice-s-4) 0 var(--ice-s-7);
}
@media (max-width: 992px) {
  .ice-page--product .ice-product { grid-template-columns: 1fr; gap: var(--ice-s-5); }
}

/* Gallery — tall/portrait aspect in the design. */
.ice-gallery--tall .ice-gallery__main {
  aspect-ratio: 4 / 5;
  background: var(--ice-soft);
}
@media (max-width: 992px) {
  .ice-gallery--tall .ice-gallery__main { aspect-ratio: 4 / 3; }
}
.ice-gallery__main img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Buy column — override default card look, we stack sections directly on white. */
.ice-page--product .ice-buy {
  display: flex; flex-direction: column; gap: var(--ice-s-4);
  padding-top: var(--ice-s-3);
}
.ice-page--product .ice-buy__title {
  font-size: var(--ice-fs-3xl); line-height: 1.1; margin: 0;
}
.ice-page--product .ice-buy__meta-inline {
  display: flex; flex-wrap: wrap; gap: var(--ice-s-4);
  color: var(--ice-muted); font-size: var(--ice-fs-sm); margin: 0;
}
.ice-page--product .ice-buy__meta-inline strong {
  color: var(--ice-ink-2); font-weight: 600;
}

.ice-page--product .ice-buy__price-block { display: flex; flex-direction: column; gap: 4px; }
.ice-page--product .ice-buy__price {
  font-size: 2rem; font-weight: 700; color: var(--ice-primary); line-height: 1;
}
.ice-buy__price-note { margin: 0; color: var(--ice-muted); font-size: var(--ice-fs-sm); }

/* Perks strip (truck + shield) on a shared soft-gray tile. */
.ice-product-perks {
  list-style: none; margin: var(--ice-s-2) 0 0; padding: var(--ice-s-4);
  background: var(--ice-soft); border-radius: var(--ice-r-2);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--ice-s-4);
}
.ice-product-perks__item {
  display: flex; align-items: center; gap: var(--ice-s-3); min-width: 0;
}
.ice-product-perks__title {
  margin: 0; font-weight: 700; color: var(--ice-ink); font-size: var(--ice-fs-base);
}
.ice-product-perks__sub {
  margin: 0; color: var(--ice-muted); font-size: var(--ice-fs-sm);
}
@media (max-width: 520px) {
  .ice-product-perks { grid-template-columns: 1fr; }
}

/* Qty + total row. */
.ice-buy__qty { display: flex; flex-direction: column; gap: var(--ice-s-2); }
.ice-buy__qty-label { margin: 0; font-weight: 600; color: var(--ice-ink); font-size: var(--ice-fs-sm); }
.ice-buy__qty-row {
  display: flex; align-items: center; gap: var(--ice-s-4); flex-wrap: wrap;
}
.ice-qty {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--ice-line); border-radius: var(--ice-r-2);
  background: #fff;
}
.ice-qty__btn {
  appearance: none; background: #fff; border: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ice-ink-2); cursor: pointer; transition: .15s var(--ice-ease);
}
.ice-qty__btn:hover { background: var(--ice-soft); color: var(--ice-primary); }
.ice-qty__btn svg { width: 16px; height: 16px; }
.ice-qty__input {
  width: 60px; height: 40px; border: 0; border-left: 1px solid var(--ice-line);
  border-right: 1px solid var(--ice-line); padding: 0; text-align: center;
  font: 600 var(--ice-fs-base)/1 var(--ice-font-sans); color: var(--ice-ink);
  background: #fff;
}
.ice-qty__input:focus { outline: 2px solid var(--ice-primary-50); outline-offset: -2px; }
.ice-buy__total { color: var(--ice-ink); font-size: var(--ice-fs-base); }
.ice-buy__total strong { color: var(--ice-ink); font-weight: 700; }

/* CTA row — two equal buttons side by side. */
.ice-buy__actions--split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--ice-s-3);
}
.ice-buy__actions--split .ice-btn { width: 100%; padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 520px) {
  .ice-buy__actions--split { grid-template-columns: 1fr; }
}

/* Green-check bullets below the CTAs. */
.ice-buy__bullets {
  list-style: none; padding: 0; margin: var(--ice-s-2) 0 0;
  display: flex; flex-direction: column; gap: var(--ice-s-2);
}
.ice-buy__bullets li {
  display: flex; align-items: center; gap: var(--ice-s-3);
  color: var(--ice-ink-2); font-size: var(--ice-fs-sm);
}
.ice-buy__bullet-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--ice-success); flex: 0 0 18px;
}
.ice-buy__bullet-ico svg { width: 16px; height: 16px; }

/* ---------- Pill tabs ---------- */

.ice-tabs--pills { margin: var(--ice-s-6) 0; }
.ice-tabs--pills .ice-tabs__nav {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; padding: 6px; border: 0; margin-bottom: var(--ice-s-5);
  background: var(--ice-soft); border-radius: var(--ice-r-2);
  max-width: 100%;
}
.ice-tabs--pills .ice-tabs__nav button {
  appearance: none; background: transparent; border: 0;
  padding: 12px 20px; font: 600 var(--ice-fs-base)/1 var(--ice-font-sans);
  color: var(--ice-muted); cursor: pointer; border-radius: var(--ice-r-1);
  transition: .15s var(--ice-ease); margin: 0;
}
.ice-tabs--pills .ice-tabs__nav button:hover { color: var(--ice-ink); }
.ice-tabs--pills .ice-tabs__nav button.is-active {
  background: #fff; color: var(--ice-ink);
  box-shadow: var(--ice-sh-1);
}
@media (max-width: 560px) {
  .ice-tabs--pills .ice-tabs__nav { grid-auto-flow: row; grid-auto-columns: none; }
}

/* Active-tab content card. */
.ice-tabs__card {
  background: #fff; border: 1px solid var(--ice-line);
  border-radius: var(--ice-r-3); padding: var(--ice-s-5);
  box-shadow: var(--ice-sh-1);
}
.ice-tabs__card h2 {
  margin: 0 0 var(--ice-s-3); font-size: var(--ice-fs-lg);
  color: var(--ice-ink); font-weight: 700;
}
.ice-tabs__card .ice-content { color: var(--ice-ink-2); line-height: 1.6; }
.ice-tabs__card .ice-content p:first-child { margin-top: 0; }
.ice-tabs__card .ice-content p:last-child { margin-bottom: 0; }
.ice-tabs__card .ice-muted { margin: 0; color: var(--ice-muted); }

/* Specs table inside the tab card. */
.ice-specs { width: 100%; border-collapse: collapse; }
.ice-specs th,
.ice-specs td {
  padding: var(--ice-s-3) var(--ice-s-2);
  border-bottom: 1px solid var(--ice-line);
  text-align: left; font-size: var(--ice-fs-sm);
  vertical-align: top;
}
.ice-specs th { color: var(--ice-muted); font-weight: 500; width: 38%; }
.ice-specs td { color: var(--ice-ink-2); font-weight: 600; }
.ice-specs tr:last-child th,
.ice-specs tr:last-child td { border-bottom: 0; }

/* ---------- Quote band (full-width soft-blue) ---------- */

.ice-quote-card {
  max-width: 760px; margin: 0 auto; background: #fff;
  border: 1px solid var(--ice-line); border-radius: var(--ice-r-3);
  padding: var(--ice-s-6); box-shadow: var(--ice-sh-1);
}
.ice-quote-card__title {
  margin: 0 0 var(--ice-s-2); font-size: var(--ice-fs-lg);
  font-weight: 700; color: var(--ice-ink);
}
.ice-quote-card__sub {
  margin: 0 0 var(--ice-s-5); color: var(--ice-muted); font-size: var(--ice-fs-sm);
  line-height: 1.55;
}

/* ---------- Quote form ---------- */

.ice-form--quote { display: flex; flex-direction: column; gap: var(--ice-s-4); }
.ice-form--quote .ice-form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--ice-s-4);
}
@media (max-width: 560px) {
  .ice-form--quote .ice-form__row { grid-template-columns: 1fr; }
}
.ice-form--quote label {
  display: flex; flex-direction: column; gap: 6px;
  font: 600 var(--ice-fs-sm)/1.2 var(--ice-font-sans);
  color: var(--ice-ink);
}
.ice-form--quote .ice-req { color: #ef4444; margin-left: 4px; font-weight: 700; }
.ice-form--quote input,
.ice-form--quote textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--ice-line); border-radius: var(--ice-r-1);
  font: 400 var(--ice-fs-sm)/1.4 var(--ice-font-sans);
  color: var(--ice-ink); background: #fff; transition: border-color .15s var(--ice-ease);
}
.ice-form--quote input::placeholder,
.ice-form--quote textarea::placeholder { color: #9aa2b8; }
.ice-form--quote input:focus,
.ice-form--quote textarea:focus {
  outline: none; border-color: var(--ice-primary);
  box-shadow: 0 0 0 3px var(--ice-primary-50);
}
.ice-form--quote textarea { resize: vertical; min-height: 96px; }

.ice-form__submit { margin-top: var(--ice-s-2); padding-top: 14px; padding-bottom: 14px; }
.ice-form__note {
  margin: var(--ice-s-2) 0 0; text-align: center;
  color: var(--ice-muted); font-size: var(--ice-fs-xs);
}
.ice-form__note a { color: var(--ice-muted); text-decoration: underline; }
.ice-form__note a:hover { color: var(--ice-primary); }
.ice-form__status { margin-top: var(--ice-s-3); padding: var(--ice-s-3); border-radius: var(--ice-r-1); font-size: var(--ice-fs-sm); }
.ice-form__status[data-state="success"] { background: var(--ice-success-soft); color: var(--ice-success); }
.ice-form__status[data-state="error"] { background: #fde8e8; color: #c0392b; }

/* ---------- Request modal ---------- */

body.ice-modal-open {
  overflow: hidden;
}

.ice-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ice-modal[hidden] {
  display: none !important;
}
.ice-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 12, 26, 0.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ice-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 820px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  animation: ice-modal-in .18s ease-out;
}
.ice-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ice-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ice-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .15s var(--ice-ease);
}
.ice-modal__close:hover {
  color: var(--ice-primary);
  border-color: var(--ice-primary);
}
.ice-modal__close span {
  font-size: 24px;
  line-height: 1;
}
.ice-quote-card--modal {
  max-width: none;
  margin: 0;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
@keyframes ice-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 640px) {
  .ice-modal {
    padding: 16px;
  }
  .ice-modal__dialog {
    width: 100%;
    max-height: calc(100vh - 32px);
  }
  .ice-quote-card--modal {
    padding: var(--ice-s-5);
  }
}

/* ---------- Related products polish ---------- */

.ice-page--product + .ice-related,
.ice-page--product .ice-related { padding: var(--ice-s-7) 0 var(--ice-s-8); }
.ice-page--product .ice-related h2 {
  margin: 0 0 var(--ice-s-5); font-size: var(--ice-fs-xl); font-weight: 700; color: var(--ice-ink);
}

.ice-page--product .ice-related .ice-grid--products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .ice-page--product .ice-related .ice-grid--products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ice-page--product .ice-related .ice-grid--products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ice-page--product .ice-related .ice-grid--products {
    grid-template-columns: 1fr;
  }

  .ice-page--product .ice-related .ice-card__actions {
    grid-template-columns: 1fr;
  }
}

/* ---------- Full-bleed enablement for single-iceit_product ----------
 * The .iceit-main container has a max-width + padding to center fixed
 * content. The quote band is a full-bleed feature, so we opt this
 * template out of that constraint, the same way static pages do.
 */
.iceit-main:has(> .ice-page--product) {
  width: 100%; max-width: none; padding: 0;
}
body.single-iceit_product .iceit-main { width: 100%; max-width: none; padding: 0; }