/**
 * Claue V2 — Product Detail Page styles
 * Gallery, product info, tabs, related products
 */

/* ── Product Gallery ── */
.cl-product-gallery {
  position: relative;
  margin-bottom: var(--cl-space-xl);
}

.cl-product-gallery__main {
  margin-bottom: var(--cl-space-md);
}

.cl-product-gallery__main img {
  width: 100%;
}

.cl-product-gallery__thumbs {
  display: flex;
  gap: var(--cl-space-sm);
}

.cl-product-gallery__thumb {
  width: 80px;
  height: 106px;
  border: 1px solid var(--cl-border-light);
  cursor: pointer;
  opacity: 0.6;
  transition: all var(--cl-transition);
  object-fit: cover;
}

.cl-product-gallery__thumb--active,
.cl-product-gallery__thumb:hover {
  opacity: 1;
  border-color: var(--cl-primary);
}

/* ── Product Info ── */
.cl-product-info {
  padding-left: var(--cl-grid-gap);
}

.cl-product-info__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--cl-heading);
  margin-bottom: var(--cl-space-sm);
}

.cl-product-info__price {
  font-size: 24px;
  font-weight: 700;
  color: var(--cl-heading);
  margin-bottom: var(--cl-space-md);
}

.cl-product-info__price--old {
  font-size: 16px;
  color: var(--cl-text-light);
  text-decoration: line-through;
  font-weight: 400;
  margin-right: var(--cl-space-sm);
}

.cl-product-info__short-description {
  font-size: 14px;
  color: var(--cl-text);
  line-height: 1.6;
  margin-bottom: var(--cl-space-lg);
}

.cl-product-info__swatches {
  display: flex;
  gap: 10px;
  margin-bottom: var(--cl-space-md);
}

.cl-product-info__swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--cl-border);
  cursor: pointer;
  transition: border-color var(--cl-transition);
}

.cl-product-info__swatch--active {
  border-color: var(--cl-primary);
}

.cl-product-info__sizes {
  display: flex;
  gap: 8px;
  margin-bottom: var(--cl-space-lg);
}

.cl-product-info__size {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cl-border);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--cl-transition);
}

.cl-product-info__size--active,
.cl-product-info__size:hover {
  border-color: var(--cl-primary);
  background: var(--cl-primary);
  color: var(--cl-bg);
}

.cl-product-info__qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--cl-space-lg);
}

.cl-product-info__qty input {
  width: 60px;
  height: 44px;
  text-align: center;
  border: 1px solid var(--cl-border);
  font-size: 14px;
}

/* ── Product Top Section: 3-column (info-left | gallery-center | buy-right) ──
   Matches the Claue reference PDP: descriptive info on the left, the media
   gallery in the centre, the purchase box (qty/ATC/extras) on the right.
   Reference proportions ≈ 260px | 1fr | 260px in a ~1140px container. */
.cl-product-top {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 30px;
  align-items: start;
  margin-bottom: var(--cl-space-xl);
}

/* LEFT column — descriptive info (title, price, stock/sku, short desc) */
.cl-pdp-left {
  text-align: left;
}

/* CENTER column — gallery fills the flexible middle track */
.cl-pdp-center .product.media,
.cl-pdp-center .fotorama,
.cl-pdp-center .fotorama__wrap {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* RIGHT column — purchase box; product.info.main fills the 260px track */
.cl-pdp-right .product-info-main,
.cl-pdp-right .product-add-form,
.cl-pdp-right .product-add-form.cl-product-form {
  float: none !important;
  width: 100% !important;
}

/* ── Product Breadcrumbs ── */
.cl-product-breadcrumbs {
  padding: var(--cl-space-md) 0;
  margin-bottom: var(--cl-space-md);
}

.cl-product-breadcrumbs .breadcrumbs {
  font-size: 12px;
  color: var(--cl-text-light);
}

.cl-product-breadcrumbs .breadcrumbs a {
  color: var(--cl-text);
  transition: color var(--cl-transition);
}

.cl-product-breadcrumbs .breadcrumbs a:hover {
  color: var(--cl-primary);
}

.cl-product-breadcrumbs .breadcrumbs .item:not(:last-child)::after {
  content: "/";
  margin: 0 6px;
  color: var(--cl-border);
}

/* ── Product Tabs ── */
.cl-product-tabs {
  margin-top: var(--cl-space-3xl);
  clear: both;
}

.cl-product-tabs__nav {
  display: flex;
  border-bottom: 2px solid var(--cl-border-light);
  margin-bottom: var(--cl-space-xl);
}

.cl-product-tabs__nav-item {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cl-text-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--cl-transition);
}

.cl-product-tabs__nav-item--active {
  color: var(--cl-primary);
  border-bottom-color: var(--cl-primary);
}

.cl-product-tabs__content {
  min-height: 200px;
}

/* ── Related & Upsell Products ── */
.cl-product-related,
.cl-product-upsell {
  margin-top: var(--cl-space-3xl);
}

.cl-product-related .block-title,
.cl-product-upsell .block-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--cl-heading);
  margin-bottom: var(--cl-space-xl);
  text-align: center;
}

/* ── Product Social Share ── */
.cl-product-social {
  margin-top: var(--cl-space-lg);
  padding-top: var(--cl-space-lg);
  border-top: 1px solid var(--cl-border-light);
}

.cl-product-social__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-text-dark);
  margin-bottom: var(--cl-space-sm);
}

.cl-product-social__list {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
}

.cl-product-social__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--cl-border);
  border-radius: 50%;
  color: var(--cl-text);
  font-size: 14px;
  transition: all var(--cl-transition);
}

.cl-product-social__list a:hover {
  background: var(--cl-primary);
  color: var(--cl-bg);
  border-color: var(--cl-primary);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  /* slightly narrower side columns on mid screens */
  .cl-product-top {
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    gap: 20px;
  }
}

@media (max-width: 992px) {
  /* stack: gallery first, then info, then buy box */
  .cl-product-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cl-pdp-center { order: 1; }
  .cl-pdp-left   { order: 2; }
  .cl-pdp-right  { order: 3; }
}

@media (max-width: 768px) {
  .cl-product-gallery__thumbs {
    justify-content: center;
  }

  .cl-product-tabs__nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cl-product-tabs__nav-item {
    white-space: nowrap;
    padding: 10px 16px;
  }
}
.cl-product-gallery__thumb{width:80px;height:106px;border:1px solid var(--cl-border-light);cursor:pointer;opacity:.6;transition:all .3s;object-fit:cover}
.cl-product-gallery__thumb:hover,.cl-product-gallery__thumb--active{opacity:1;border-color:var(--cl-primary)}
.cl-product-info__title{font-size:24px;font-weight:600;color:var(--cl-heading);margin-bottom:8px}
.cl-product-info__price{font-size:24px;font-weight:700;color:var(--cl-heading);margin-bottom:16px}
.cl-product-info__swatch{width:32px;height:32px;border-radius:50%;border:2px solid var(--cl-border);cursor:pointer}
.cl-product-info__size{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--cl-border);font-size:13px;font-weight:500;cursor:pointer}
.cl-product-info__size:hover{border-color:var(--cl-primary);background:var(--cl-primary);color:#fff}
.cl-product-tabs__nav{display:flex;border-bottom:2px solid var(--cl-border-light);margin-bottom:32px}
.cl-product-tabs__nav-item{padding:12px 24px;font-size:14px;font-weight:600;color:var(--cl-text-light);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px}
.cl-product-tabs__nav-item--active{color:var(--cl-primary);border-bottom-color:var(--cl-primary)}
.cl-product-info__qty input{width:60px;height:44px;text-align:center;border:1px solid var(--cl-border);font-size:14px}
.cl-product-info__swatch--active{border-color:var(--cl-primary)}
.cl-product-card__swatches{display:flex;gap:6px;margin-bottom:8px}
.cl-product-card__swatch{width:16px;height:16px;border-radius:50%;border:2px solid var(--cl-border);cursor:pointer}
.cl-product-card__swatch:hover{border-color:var(--cl-primary)}
.cl-size-guide{width:100%;border-collapse:collapse;margin:20px 0}
.cl-size-guide th{background:var(--cl-bg-light);font-weight:600;padding:10px;border:1px solid var(--cl-border)}
.cl-size-guide td{padding:10px;border:1px solid var(--cl-border);font-size:13px;text-align:center}
.cl-related-products{margin-top:64px}

/* ── Fotorama gallery Claue wrapper ──────────────────────────────────────── */
/* The .cl-product-gallery div wraps the core fotorama placeholder output.
   Claue-specific sizing and positioning is applied here; fotorama's own
   classes (.fotorama, .fotorama__wrap, .fotorama__nav) are not overridden
   structurally — only colours and minor spacing to match the reference. */
.cl-product-gallery {
  width: 100%;
}

/* Fotorama nav strip: thumbnail row below the main image */
.cl-page-product .fotorama__nav--thumbs {
  padding-top: 12px;
}

.cl-page-product .fotorama__thumb {
  border: 1px solid var(--cl-border-light, #e8e8e8);
  opacity: 0.65;
  transition: opacity 0.2s, border-color 0.2s;
}

.cl-page-product .fotorama__thumb:hover,
.cl-page-product .fotorama__thumb-border {
  opacity: 1;
  border-color: var(--cl-primary, #222) !important;
}

/* ── Tabs wrapper ─────────────────────────────────────────────────────────── */
.cl-product-tabs-wrapper {
  margin-top: 48px;
  clear: both;
}

/* ── Tabs nav + panel overrides ───────────────────────────────────────────── */
.cl-product-tabs .cl-product-tabs__nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  border-bottom: 2px solid var(--cl-border-light, #e8e8e8);
  gap: 0;
}

.cl-product-tabs .cl-product-tabs__nav-item {
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cl-text-light, #999);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
  list-style: none;
  user-select: none;
}

.cl-product-tabs .cl-product-tabs__nav-item:hover {
  color: var(--cl-heading, #222);
}

.cl-product-tabs .cl-product-tabs__nav-item--active {
  color: var(--cl-heading, #222);
  border-bottom-color: var(--cl-heading, #222);
}

.cl-product-tabs .cl-product-tabs__content {
  min-height: 120px;
}

.cl-product-tabs .cl-product-tabs__panel {
  display: block;
  padding: 0;
  animation: clTabFadeIn 0.2s ease;
}

.cl-product-tabs .cl-product-tabs__panel[hidden] {
  display: none;
}

@keyframes clTabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Description tab content */
.cl-product-tabs .product.attribute.description .value,
.cl-product-tabs .product.attribute.overview .value {
  font-size: 14px;
  line-height: 1.8;
  color: var(--cl-text, #444);
}

/* Attributes table (More Information tab) */
.cl-product-tabs .additional-attributes {
  width: 100%;
  max-width: 600px;
  border-collapse: collapse;
}

.cl-product-tabs .additional-attributes th,
.cl-product-tabs .additional-attributes td {
  padding: 10px 14px;
  border: 1px solid var(--cl-border-light, #e8e8e8);
  font-size: 13px;
  text-align: left;
}

.cl-product-tabs .additional-attributes th {
  background: var(--cl-bg-light, #f8f8f8);
  font-weight: 600;
  color: var(--cl-heading, #222);
  width: 40%;
}

/* ── Trust Row ────────────────────────────────────────────────────────────── */
.cl-trust-row {
  margin-top: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--cl-border-light, #e8e8e8);
  border-bottom: 1px solid var(--cl-border-light, #e8e8e8);
}

.cl-trust-row__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.cl-trust-row__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cl-trust-row__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cl-bg-light, #f8f8f8);
  border-radius: 50%;
  color: var(--cl-heading, #222);
}

.cl-trust-row__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cl-trust-row__heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-heading, #222);
  display: block;
}

.cl-trust-row__sub {
  font-size: 12px;
  color: var(--cl-text-light, #999);
  line-height: 1.5;
}

@media (max-width: 992px) {
  .cl-trust-row__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .cl-trust-row__inner {
    grid-template-columns: 1fr;
  }
}

/* ── Sticky Add-to-Cart Bar ───────────────────────────────────────────────── */
.cl-sticky-atc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid var(--cl-border-light, #e8e8e8);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-110%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.cl-sticky-atc--visible {
  transform: translateY(0);
  pointer-events: auto;
}

.cl-sticky-atc__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.cl-sticky-atc__product {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.cl-sticky-atc__thumb {
  width: 50px;
  height: 66px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--cl-border-light, #e8e8e8);
}

.cl-sticky-atc__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-heading, #222);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.cl-sticky-atc__name:hover {
  color: var(--cl-primary, #e07b60);
}

.cl-sticky-atc__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--cl-heading, #222);
  flex-shrink: 0;
}

.cl-sticky-atc__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.cl-sticky-atc__qty-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--cl-border, #ddd);
  height: 40px;
}

.cl-sticky-atc__qty-btn {
  width: 32px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cl-text, #444);
  padding: 0;
  transition: background 0.2s;
}

.cl-sticky-atc__qty-btn:hover {
  background: var(--cl-bg-light, #f8f8f8);
}

.cl-sticky-atc__qty-input {
  width: 44px;
  height: 40px;
  border: none;
  border-left: 1px solid var(--cl-border, #ddd);
  border-right: 1px solid var(--cl-border, #ddd);
  text-align: center;
  font-size: 13px;
  -moz-appearance: textfield;
  padding: 0;
}

.cl-sticky-atc__qty-input::-webkit-inner-spin-button,
.cl-sticky-atc__qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.cl-sticky-atc__add-btn {
  height: 40px;
  padding: 0 28px;
  background: var(--cl-cta, #cf9683) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 40px !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: normal;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.cl-sticky-atc__add-btn:hover {
  background: var(--cl-cta-dark, #bd7e63) !important;
}

@media (max-width: 768px) {
  .cl-sticky-atc__price,
  .cl-sticky-atc__qty-wrap {
    display: none;
  }

  .cl-sticky-atc__product {
    flex: 1;
  }
}

/* ── Add-to-Cart button: coral pill (Claue reference #cf9683) ─────────────── */
/* !important overrides the global black-square .action.primary rule in
   buttons-clean.css (which is itself !important); the PDP Add-to-Cart is the
   coral-pill exception in the Claue reference. */
.cl-page-product .action.tocart.primary,
.cl-page-product #product-addtocart-button {
  background-color: var(--cl-cta, #cf9683) !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: normal;
  padding: 0 34px;
  height: 40px;
  line-height: 40px;
  border-radius: 40px !important;
  box-shadow: none !important;
  transition: background 0.2s;
}

.cl-page-product .action.tocart.primary:hover,
.cl-page-product #product-addtocart-button:hover {
  background-color: var(--cl-cta-dark, #bd7e63) !important;
}

/* ── Price: match Claue reference (22px, normal weight, grey) ─────────────── */
.cl-page-product .product-info-main .price-box .price {
  font-size: 22px;
  font-weight: 400;
  color: var(--cl-text, #696969);
}

/* ── Qty input: match reference (wider box, dark border) ──────────────────── */
.cl-page-product .box-tocart .field.qty .control input.qty,
.cl-page-product .product-info-main input.qty {
  width: 72px;
  height: 40px;
  border-color: var(--cl-heading, #222);
  text-align: center;
}

/* ── Form (product info column) ──────────────────────────────────────────── */
.cl-product-form__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--cl-heading, #222);
  margin: 0 0 12px;
  line-height: 1.3;
}

.cl-product-form__price {
  margin-bottom: 16px;
}

.cl-product-form__short-desc {
  font-size: 14px;
  color: var(--cl-text, #444);
  line-height: 1.8;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cl-border-light, #e8e8e8);
}

.cl-product-form__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--cl-text-light, #999);
  margin-bottom: 16px;
}

.cl-product-form__sku {
  font-size: 12px;
  color: var(--cl-text-light, #999);
}

.cl-product-form__sku span {
  color: var(--cl-text, #444);
}

/* ── Size Guide + Delivery links ─────────────────────────────────────────── */
.cl-product-form__guide-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 12px;
}

.cl-product-form__guide-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--cl-text-light, #999);
  text-decoration: none;
  transition: color 0.2s;
  font-size: 12px;
}

.cl-product-form__guide-link:hover {
  color: var(--cl-primary, #e07b60);
}

.cl-product-form__guide-sep {
  color: var(--cl-border, #ddd);
}

.cl-product-form__addtocart {
  margin-bottom: 16px;
}

.cl-product-form__extra-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

/* ── Social share: Claue coloured circles ────────────────────────────────── */
.cl-product-social {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cl-border-light, #e8e8e8);
  display: flex;
  align-items: center;
  gap: 12px;
}

.cl-product-social__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--cl-text-light, #999);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.cl-product-social__list {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cl-product-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}

.cl-product-social__link:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.cl-product-social__link--facebook  { background: #3b5998; }
.cl-product-social__link--twitter   { background: #000; }
.cl-product-social__link--pinterest { background: #bd081c; }
.cl-product-social__link--email     { background: var(--cl-text-light, #999); }

/* ── Custom tab (care / material) ─────────────────────────────────────────── */
.cl-product-custom-tab__lead { margin: 0 0 16px; color: var(--cl-text, #696969); }
.cl-product-custom-tab__list { margin: 0; padding: 0; list-style: none; }
.cl-product-custom-tab__list li {
  position: relative; padding-left: 18px; margin-bottom: 8px;
  color: var(--cl-text, #696969); font-size: 14px; line-height: 1.6;
}
.cl-product-custom-tab__list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cl-cta, #cf9683);
}

/* ── PDP top columns: fill the 50/50 grid cells ──────────────────────────────
   Magento/Luma base styles float .product.media left and .product-info-main
   right WITHOUT an explicit width, so as floated blocks they collapse to their
   content width (≈345px image, ≈220px info) and sit at opposite edges of their
   605px grid cells, leaving a large dead gap and squeezing the coral ATC pill
   so "Add to Cart" wraps. Neutralise the float and fill the cell so the layout
   matches the reference's balanced 50/50. */
.cl-page-product .cl-product-gallery-wrapper .product.media,
.cl-page-product .cl-product-gallery-wrapper .fotorama,
.cl-page-product .cl-product-gallery-wrapper .fotorama__wrap {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
.cl-page-product .cl-product-info-wrapper .product-info-main {
  float: none !important;
  width: 100% !important;
}