/* =====================================================
   COMFYBLOUSE — Luxury Minimal Redesign
   Zara-clean design language
   ===================================================== */

/* --- Design Tokens --- */
:root {
  --cb-bg: #FFFFFF;
  --cb-bg-secondary: #F8F7F5;
  --cb-text-primary: #1A1A1A;
  --cb-text-secondary: #3D3D3D;
  --cb-text-muted: #888888;
  --cb-border: #E8E6E3;
  --cb-accent-sale: #E63946;
  --cb-success: #2D6B4F;
  --cb-cta: #E63946;
  --cb-cta-hover: #D32836;
  --cb-cta-text: #FFFFFF;
  --cb-star: #D4A853;
  --cb-dot-inactive: #D9D9D9;
  --cb-font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --cb-font-heading: 'Cormorant Garamond', Georgia, serif;
  --cb-max-width: 1140px;
}

/* --- Global Overrides (product page only) --- */
body[data-template="product"] {
  background-color: var(--cb-bg);
  font-family: var(--cb-font-body);
  color: var(--cb-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Max Width Override --- */
body[data-template="product"] .page-width {
  max-width: var(--cb-max-width);
  padding-left: 32px;
  padding-right: 32px;
}

/* --- Typography: Product Title --- */
body[data-template="product"] .product-title,
body[data-template="product"] .product__title h1,
body[data-template="product"] .product__title {
  font-family: var(--cb-font-heading);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--cb-text-primary);
  margin-bottom: 8px;
}

/* --- Typography: Price --- */
body[data-template="product"] .price-item--sale,
body[data-template="product"] .price__sale .price-item--sale {
  font-family: var(--cb-font-body);
  font-size: 20px;
  font-weight: 600;
  color: var(--cb-text-primary);
}
body[data-template="product"] .price-item--sale.price-item--on-sale {
  color: var(--cb-accent-sale);
}
body[data-template="product"] .price-item--regular {
  font-family: var(--cb-font-body);
  font-size: 16px;
  font-weight: 400;
  text-decoration: line-through;
  color: #999999;
}

/* --- Discount badge: clean inline red text, no pill --- */
body[data-template="product"] .price-position-save {
  display: inline !important;
  margin-left: 8px;
  vertical-align: baseline;
}
body[data-template="product"] .price-item--save,
body[data-template="product"] .price-item--save-button {
  display: inline !important;
  font-family: var(--cb-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #E63946 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  vertical-align: baseline !important;
  box-shadow: none !important;
}

/* --- Typography: Labels (uppercase) --- */
body[data-template="product"] .form__label,
body[data-template="product"] .product-form__input .form__label,
body[data-template="product"] .quantity-input-label {
  font-family: var(--cb-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cb-text-muted);
  margin-bottom: 8px;
}

/* --- Typography: Body / Description --- */
body[data-template="product"] .product__info-description,
body[data-template="product"] .product__description,
body[data-template="product"] .accordion__content {
  font-family: var(--cb-font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--cb-text-secondary);
}

/* --- Typography: Button Text --- */
body[data-template="product"] .product-form__submit,
body[data-template="product"] .product-form__submit span {
  font-family: var(--cb-font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* --- Typography: Breadcrumb --- */
body[data-template="product"] .breadcrumb,
body[data-template="product"] .breadcrumb a,
body[data-template="product"] .breadcrumb span {
  font-family: var(--cb-font-body);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cb-text-muted);
  margin-bottom: 12px;
}
body[data-template="product"] .breadcrumb a:hover {
  color: var(--cb-text-primary);
  text-decoration: underline;
}

/* --- Section headings override --- */
body[data-template="product"] .section-heading,
body[data-template="product"] h2,
body[data-template="product"] h3 {
  font-family: var(--cb-font-heading);
}

/* --- All non-heading text uses Instrument Sans --- */
body[data-template="product"] .product__info-container,
body[data-template="product"] .product__info-container *:not(h1):not(h2):not(h3):not(.product-title):not(.section-heading) {
  font-family: var(--cb-font-body);
}

/* Mobile typography */
@media (max-width: 959px) {
  body[data-template="product"] .product-title,
  body[data-template="product"] .product__title h1 {
    font-size: 22px;
  }
  body[data-template="product"] .price-item--sale,
  body[data-template="product"] .price__sale .price-item--sale {
    font-size: 18px;
  }
  body[data-template="product"] .page-width {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* =====================================================
   PHASE 2: Layout & Spacing
   ===================================================== */

/* --- Column Layout: 55% / 45% --- */
@media screen and (min-width: 960px) {
  body[data-template="product"] .product .product__media-wrapper {
    max-width: 55%;
    width: 55%;
    padding-top: 0;
    padding-right: 0;
  }
  body[data-template="product"] .product .product__info-wrapper {
    max-width: 45%;
    width: 45%;
    padding-left: 36px;
    padding-top: 0;
  }
}

/* --- Sticky info column --- */
body[data-template="product"] .product__column-sticky {
  position: sticky;
  top: 20px;
  z-index: 2;
}

/* --- Section padding: compact --- */
body[data-template="product"] #MainProduct-main-product-info {
  padding-top: 24px;
  padding-bottom: 40px;
}
body[data-template="product"] .section-padding {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* --- Element spacing: tight (8-12px) --- */
body[data-template="product"] .product__info-container > * + * {
  margin-top: 8px;
  margin-bottom: 0;
}
body[data-template="product"] .product__info-container > * + .m-10 {
  margin-top: 8px;
  margin-bottom: 0;
}
body[data-template="product"] .product__info-container > * + .m-12 {
  margin-top: 8px;
  margin-bottom: 0;
}
body[data-template="product"] .product__info-container > * + .m-26 {
  margin-top: 12px;
  margin-bottom: 0;
}

/* --- Breadcrumb spacing --- */
body[data-template="product"] .breadcrumb {
  margin-bottom: 12px;
}

/* --- Price spacing --- */
body[data-template="product"] #price-main-product-info {
  margin-bottom: 4px;
}

/* --- Divider --- */
body[data-template="product"] .product__dividing-line {
  background: var(--cb-border) !important;
  height: 1px !important;
  margin: 16px 0 !important;
}

/* --- Variant picker spacing --- */
body[data-template="product"] .product-form__input {
  margin: 0 0 12px 0;
}

/* --- Quantity spacing --- */
body[data-template="product"] .product__info-item--quantity-input {
  margin-bottom: 12px;
}

/* --- Mobile layout --- */
@media (max-width: 959px) {
  body[data-template="product"] .section-padding {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  body[data-template="product"] .product .product__info-wrapper {
    margin-top: 0;
  }
}

/* =====================================================
   PHASE 3: ATC Button, Variants & Form Elements
   ===================================================== */

/* --- ATC Button: Black, 52px, full-width, sharp --- */
body[data-template="product"] .product-form__submit.button--secondary,
body[data-template="product"] .product-form__submit {
  background-color: #E63946 !important;
  color: #FFFFFF !important;
  border-color: #E63946 !important;
  min-height: 52px !important;
  border-radius: 0 !important;
  transition: background-color 0.2s ease !important;
  box-shadow: none !important;
  transform: none !important;
  margin-top: 12px;
  margin-bottom: 12px;
}
body[data-template="product"] .product-form__submit:hover {
  background-color: #D32836 !important;
  transform: none !important;
  box-shadow: none !important;
}
/* ATC added state */
body[data-template="product"] .product-form__submit.is-added {
  background-color: var(--cb-success) !important;
  border-color: var(--cb-success) !important;
}

/* --- Variant Pills: 48px h, sharp corners, 8px gap --- */
body[data-template="product"] .product-form__input input[type="radio"] + label:not(.product-form--color-swatch) {
  min-height: 48px !important;
  min-width: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  font-family: var(--cb-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid var(--cb-border) !important;
  border-radius: 0 !important;
  color: var(--cb-text-primary) !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
  cursor: pointer;
}
/* Selected state */
body[data-template="product"] .product-form__input input[type="radio"]:checked + label:not(.product-form--color-swatch) {
  background: #E63946 !important;
  color: #FFFFFF !important;
  border-color: #E63946 !important;
}
/* OOS variant */
body[data-template="product"] .product-form__input input[type="radio"][disabled] + label:not(.product-form--color-swatch) {
  opacity: 0.5 !important;
  text-decoration: line-through !important;
  cursor: not-allowed;
}
/* Variant gap */
body[data-template="product"] variant-radios .product-form__input .product-form__input--right {
  gap: 8px !important;
}

/* --- Color Swatches: 32px circles, 2px border --- */
body[data-template="product"] .product-form__input input[type="radio"] + label.product-form--color-swatch {
  --swatch-size: 32px !important;
  --swatch-border-radius: 50% !important;
  border: 2px solid var(--cb-border) !important;
  margin: 0 !important;
}
body[data-template="product"] .product-form__input input[type="radio"]:checked + label.product-form--color-swatch {
  border-color: var(--cb-cta) !important;
  outline: 2px solid var(--cb-cta) !important;
  outline-offset: 2px !important;
}

/* --- Quantity Input: 48px h, 120px w, sharp --- */
body[data-template="product"] .product__info-item--quantity-input .quantity {
  height: 48px !important;
  width: 120px !important;
  min-height: 48px !important;
  border: 1px solid var(--cb-border) !important;
  border-radius: 0 !important;
}
body[data-template="product"] .quantity__button {
  border-radius: 0 !important;
}

/* --- No rounded corners anywhere --- */
body[data-template="product"] .button,
body[data-template="product"] input,
body[data-template="product"] select,
body[data-template="product"] textarea,
body[data-template="product"] details,
body[data-template="product"] .accordion {
  border-radius: 0 !important;
}

/* --- No shadows --- */
body[data-template="product"] .product__info-container *,
body[data-template="product"] .product-form__submit:hover {
  box-shadow: none !important;
}

/* --- Links: underline on hover --- */
body[data-template="product"] a {
  color: var(--cb-text-primary);
  text-decoration: none;
}

body[data-template="product"] a:hover {
  text-decoration: underline;
}

/* Exclude footer links */
body[data-template="product"] .section-footer-padding a {
  color: inherit;
  text-decoration: none;
}

body[data-template="product"] .section-footer-padding a:hover {
  text-decoration: none;
}

/* Exclude header links */
body[data-template="product"] .header__inline-nav a {
  color: inherit;
  text-decoration: none;
}

body[data-template="product"] .header__inline-nav a:hover {
  text-decoration: none;
}

/* --- Mobile ATC --- */
@media (max-width: 959px) {
  body[data-template="product"] .product-form__submit {
    min-height: 48px !important;
    margin-left: 0;
    margin-right: 0;
  }
}

/* =====================================================
   PHASE 4: Image Gallery — Clean Styling
   Keep native slider/variant behavior intact.
   ===================================================== */

/* --- Image styling (all viewports) --- */
body[data-template="product"] .product__media-item {
  border: 1px solid var(--cb-border);
  border-radius: 0 !important;
  overflow: hidden;
  cursor: pointer;
}
body[data-template="product"] .product__media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}

/* --- Desktop: hover zoom on main image --- */
@media screen and (min-width: 960px) {
  body[data-template="product"] .product__media-item img {
    transition: transform 0.3s ease !important;
  }
  body[data-template="product"] .product__media-item:hover img {
    transform: scale(1.03);
  }

  /* Thumbnail strip: clean styling, sharp corners */
  body[data-template="product"] .thumbnail-list {
    gap: 4px !important;
  }
  body[data-template="product"] .thumbnail button,
  body[data-template="product"] .thumbnail {
    border-radius: 0 !important;
    border: 1px solid var(--cb-border) !important;
  }
  body[data-template="product"] .thumbnail-list__item.is-active .thumbnail,
  body[data-template="product"] .thumbnail button.is-active {
    border-color: var(--cb-cta) !important;
  }
}

/* --- Mobile: full-bleed carousel --- */
@media (max-width: 959px) {
  body[data-template="product"] .product__media-wrapper {
    margin-left: -12px;
    margin-right: -12px;
    width: calc(100% + 24px);
  }
  body[data-template="product"] .product__media-item {
    border: none;
  }
  body[data-template="product"] .product__media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Dot indicators */
  body[data-template="product"] .product__media-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  body[data-template="product"] .product__media-pagination .dot,
  body[data-template="product"] .product__media-pagination button {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cb-dot-inactive);
    border: none;
    padding: 0;
    transition: background 0.2s;
  }
  body[data-template="product"] .product__media-pagination .dot.active,
  body[data-template="product"] .product__media-pagination button.active,
  body[data-template="product"] .product__media-pagination .is-active {
    background: var(--cb-cta);
  }

  /* Hide thumbnail strip on mobile */
  body[data-template="product"] .thumbnail-slider {
    display: none !important;
  }
}

/* --- Lazy loading placeholder --- */
body[data-template="product"] .product__media-item .placeholder-svg {
  background: var(--cb-bg-secondary);
}

/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce) {
  body[data-template="product"] .product__media-item img {
    transition: none !important;
  }
  body[data-template="product"] .product__media-item:hover img {
    transform: none !important;
  }
}

/* =====================================================
   PHASE 5: Trust Row & Rating
   ===================================================== */

/* --- Trust Row --- */
.product-trust-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 12px;
  margin-bottom: 16px;
  padding: 0;
}
.product-trust-row__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cb-font-body);
  font-size: 12px;
  color: var(--cb-text-muted);
  white-space: nowrap;
}
.product-trust-row__item svg {
  flex-shrink: 0;
  color: var(--cb-text-muted);
}

/* Mobile: stack vertically */
@media (max-width: 959px) {
  .product-trust-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* --- Rating stars: gold --- */
body[data-template="product"] .tb-rating-wrapper .tb-stars,
body[data-template="product"] .star-rating {
  color: var(--cb-star) !important;
}
body[data-template="product"] .tb-rating-wrapper {
  font-family: var(--cb-font-body);
  font-size: 14px;
  margin-bottom: 16px;
}
body[data-template="product"] .tb-rating-wrapper .tb-rating-score {
  color: var(--cb-text-primary);
  font-weight: 600;
}
body[data-template="product"] .tb-rating-wrapper .tb-rating-count {
  color: var(--cb-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
body[data-template="product"] .tb-rating-wrapper .tb-divider,
body[data-template="product"] .tb-rating-wrapper .tb-sold {
  display: none;
}

/* =====================================================
   PHASE 6: Accordions
   ===================================================== */

/* --- Accordion container --- */
body[data-template="product"] .product__details-wrapper {
  border-top: 1px solid var(--cb-border);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body[data-template="product"] .product__details-wrapper:last-of-type {
  border-bottom: 1px solid var(--cb-border);
}

/* --- Accordion summary (toggle) --- */
body[data-template="product"] .product__details-container summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
}
body[data-template="product"] .product__details-container summary::-webkit-details-marker {
  display: none;
}
body[data-template="product"] .product__details-container summary::marker {
  display: none;
  content: '';
}

/* --- Accordion title --- */
body[data-template="product"] .accordion__title {
  font-family: var(--cb-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--cb-text-primary) !important;
}

/* --- +/- icon instead of arrow --- */
body[data-template="product"] .product__details-container summary .icon-accordion {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
body[data-template="product"] .product__details-container summary .icon-accordion svg {
  display: none;
}
body[data-template="product"] .product__details-container summary .icon-accordion::before,
body[data-template="product"] .product__details-container summary .icon-accordion::after {
  content: '';
  position: absolute;
  background: var(--cb-text-primary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
body[data-template="product"] .product__details-container summary .icon-accordion::before {
  width: 12px;
  height: 1px;
}
body[data-template="product"] .product__details-container summary .icon-accordion::after {
  width: 1px;
  height: 12px;
}
/* When open, rotate + to - */
body[data-template="product"] .product__details-container[open] summary .icon-accordion::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* --- Accordion content --- */
body[data-template="product"] .accordion__content {
  padding: 0 0 12px 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--cb-text-secondary);
}

/* --- Hide icon-select (if any) --- */
body[data-template="product"] .product__details-container summary .icon-select {
  display: none;
}

/* =====================================================
   PHASE 7: Below-Product Sections
   ===================================================== */

/* --- Section dividers --- */
body[data-template="product"] #MainContent > .section-padding + .section-padding {
  border-top: 1px solid var(--cb-border);
}

/* --- Recommendation sections --- */
body[data-template="product"] .product-recommendations {
  padding: 40px 0;
}
body[data-template="product"] .product-recommendations .section-title,
body[data-template="product"] .product-recommendations h2 {
  font-family: var(--cb-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  text-align: center !important;
  color: var(--cb-text-primary) !important;
  margin-bottom: 24px;
}

/* --- Product cards in recommendations --- */
body[data-template="product"] .product-card {
  border-radius: 0 !important;
}
body[data-template="product"] .product-card .card__title,
body[data-template="product"] .card-product-title {
  font-family: var(--cb-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--cb-text-primary) !important;
}
body[data-template="product"] .product-card .card__price,
body[data-template="product"] .card-product-price {
  font-family: var(--cb-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--cb-text-primary) !important;
}
body[data-template="product"] .product-card img {
  border-radius: 0 !important;
}

/* --- Product card grid: 12px gap --- */
body[data-template="product"] .product-recommendations .grid {
  gap: 12px !important;
}

/* --- Product card image 3:4 --- */
body[data-template="product"] .product-card .card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

/* --- "On sale" badge on product cards --- */
body[data-template="product"] .product-card .badge,
body[data-template="product"] .product-card [class*="badge"] {
  background-color: #E63946 !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  font-family: var(--cb-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* --- Alternating section backgrounds --- */
body[data-template="product"] .product-recommendations:nth-of-type(odd) {
  background-color: var(--cb-bg-secondary);
}

/* --- Reviews section --- */
body[data-template="product"] .air-review,
body[data-template="product"] [data-role="comment-list"] {
  padding: 40px 0;
  background: var(--cb-bg);
}

/* --- Mobile: horizontal scroll cards --- */
@media (max-width: 959px) {
  body[data-template="product"] .product-recommendations .grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding-bottom: 8px;
  }
  body[data-template="product"] .product-recommendations .grid > * {
    flex: 0 0 45%;
    scroll-snap-align: start;
    min-width: 140px;
  }
}

/* =====================================================
   PHASE 9: Performance & Loading States
   ===================================================== */

/* --- Skeleton loading placeholder (before image loads) --- */
body[data-template="product"] .product__media-item {
  background: var(--cb-bg-secondary);
}

/* --- Smooth font loading --- */
body[data-template="product"] {
  font-display: swap;
}

@media (prefers-reduced-motion: reduce) {
  body[data-template="product"] .product__media-item img {
    transition: none !important;
  }
}