/*
Theme Name: ROZO Kadence Child
Theme URI: https://rozolifestyle.com
Description: Lightweight Kadence child theme for ROZO fashion store.
Author: ROZO
Template: kadence
Version: 3.3.0
Text Domain: rozo-kadence-child
*/

/* =========================================================
   ROZO – WooCommerce single product page (PDP)

   RULES OF THIS FILE
   1. Product page rules are scoped to body.single-product.
      Section 13 (title banner) is scoped to the Cart, Checkout,
      My account and Shop pages only.
      Section 14 (compact title) is scoped to product category pages.
   2. Mobile-first: base styles = mobile (up to 767px).
      Tablet starts at 768px. Desktop starts at 1025px.
   3. We NEVER set width, height, transform, position or
      overflow on: .flex-viewport, .woocommerce-product-gallery__wrapper,
      .woocommerce-product-gallery__image.
      FlexSlider writes those itself. We only style the
      gallery container, the <img>, and the thumbnail list.
   4. No !important anywhere.
   ========================================================= */


/* ---------- 1. Tokens (change colours here) ---------- */
body.single-product {
  --rozo-accent: #e31e24;       /* ROZO red: Add to cart, Sale badge, active thumbnail border */
  --rozo-hover: #000000;        /* Add to cart on hover */
  --rozo-accent-soft: #fde8e9;  /* pale red behind the Save tag */
  --rozo-radius-img: 8px;       /* soft corners on gallery images */
  --rozo-ink: #111827;          /* titles, prices */
  --rozo-text: #4b5563;         /* body text */
  --rozo-muted: #6b7280;        /* old price, labels */
  --rozo-line: #e5e7eb;         /* borders */
  --rozo-radius: 4px;
  --rozo-thumb: 76px;           /* desktop thumbnail column */
  --rozo-gap: 12px;

  overflow-x: clip;             /* stops sideways page scroll without breaking layout */
}


/* ---------- 2. Page spacing ---------- */
body.single-product .content-area {
  margin-top: 16px;
  margin-bottom: 40px;
}

body.single-product div.product {
  position: relative;           /* anchor for the Sale badge */
  max-width: 100%;
}


/* ---------- 3. Main product block ---------- */
/* Mobile: normal stacking (gallery, then summary, then tabs...) */
body.single-product div.product > * {
  min-width: 0;                 /* lets grid/flex children shrink instead of overflowing */
}

/* Tablet and up: two columns. Tabs, related, upsells span full width. */
@media (min-width: 768px) {
  body.single-product div.product.type-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }

  body.single-product div.product > * {
    grid-column: 1 / -1;
  }

  body.single-product div.product > .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
  }

  body.single-product div.product > .summary {
    grid-column: 2;
    grid-row: 1;
  }
}


/* ---------- 4. Gallery container ---------- */
body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery {
  position: relative;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0 0 24px;
}

/* Images keep their natural shape. Zoom image is excluded on purpose. */
body.single-product .woocommerce-product-gallery__image img:not(.zoomImg) {
  display: block;
  width: 100%;
  height: auto;
}

/* Soft corners. Radius only: nothing here changes the slider's size or position. */
body.single-product .woocommerce-product-gallery__image img {
  border-radius: var(--rozo-radius-img);
}

/* Zoom (magnifier) button */
body.single-product .woocommerce-product-gallery__trigger {
  top: 12px;
  right: 12px;
  z-index: 6;
}

/* Sale badge: sits on the main image */
body.single-product div.product > .onsale,
body.single-product div.product > .woocommerce-product-gallery .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--rozo-radius);
  background: var(--rozo-accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}


/* ---------- 5. Thumbnails: mobile and tablet = horizontal row ---------- */
/* The selector is deliberately long: WooCommerce ships its own thumbnail
   rules (25% width, floats, margins) and a shorter selector loses to them. */
body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  inset: auto;
  transform: none;
  float: none;
  width: 100%;
  height: auto;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 64px;
  width: 64px;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  scroll-snap-align: start;
}

body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery .flex-control-thumbs li img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: 6px;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}

body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery .flex-control-thumbs li img:hover,
body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--rozo-accent);
}


/* ---------- 6. Thumbnails: desktop = vertical column on the left ---------- */
@media (min-width: 1025px) {
  body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery {
    display: grid;
    grid-template-columns: var(--rozo-thumb) minmax(0, 1fr);
    column-gap: var(--rozo-gap);
    align-items: start;
  }

  body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery > * {
    min-width: 0;
  }

  /* Before the slider starts, the wrapper is a direct child: let it use full width */
  body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    grid-column: 1 / -1;
  }

  body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery > .flex-viewport {
    grid-column: 2;
    grid-row: 1;
  }

  body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery > .flex-control-thumbs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    max-height: 640px;
    overflow-x: visible;
    overflow-y: auto;
    scroll-snap-type: none;
  }

  body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery > .flex-control-thumbs li {
    flex: none;
    width: 100%;
  }

  /* Only one image = no thumbnail column, so no empty gap */
  body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.single-product.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) > .flex-viewport {
    grid-column: 1;
  }

  /* Badge moves right so it sits on the big image, not on the thumbnails */
  body.single-product div.product > .onsale,
  body.single-product div.product > .woocommerce-product-gallery .onsale {
    left: calc(var(--rozo-thumb) + var(--rozo-gap) + 12px);
  }

  body.single-product div.product .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .onsale {
    left: 12px;
  }
}


/* ---------- 7. Product summary (title, price, text) ---------- */
body.single-product div.product .summary.entry-summary {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.single-product div.product .product_title {
  margin: 0 0 8px;
  color: var(--rozo-ink);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
}

body.single-product div.product p.price {
  margin: 0 0 16px;
  color: var(--rozo-ink);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}

body.single-product div.product p.price del {
  margin-right: 6px;
  color: var(--rozo-muted);
  font-size: 0.85em;
  font-weight: 400;
}

body.single-product div.product p.price ins,
body.single-product div.product .woocommerce-variation-price .price ins {
  background: none;
  color: var(--rozo-ink);
  text-decoration: none;
}

body.single-product div.product p.price ins .woocommerce-Price-amount,
body.single-product div.product .woocommerce-variation-price .price ins .woocommerce-Price-amount {
  color: inherit;
}

/* "Save ৳300" tag. Needs the small PHP snippet (rozo-save-tag.php) to appear. */
body.single-product div.product p.price .rozo-save {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: var(--rozo-radius);
  background: var(--rozo-accent-soft);
  color: var(--rozo-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  vertical-align: middle;
}

body.single-product div.product .woocommerce-product-details__short-description {
  margin: 0 0 20px;
  color: var(--rozo-text);
  font-size: 0.9375rem;
  line-height: 1.65;
}


/* ---------- 8. Size and Color selectors (WooCommerce variation table) ---------- */
body.single-product div.product table.variations,
body.single-product div.product table.variations tbody {
  display: block;
  width: 100%;
}

body.single-product div.product table.variations {
  margin: 0 0 20px;
  border: 0;
}

/* Each row: label on the left, dropdown on the right */
body.single-product div.product table.variations tr {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  margin-bottom: 12px;
}

body.single-product div.product table.variations tr:last-child {
  margin-bottom: 0;
}

body.single-product div.product table.variations th,
body.single-product div.product table.variations td {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

body.single-product div.product table.variations th.label {
  display: flex;
  align-items: center;
  min-height: 48px;
}

body.single-product div.product table.variations th.label,
body.single-product div.product table.variations th.label label {
  margin: 0;
  color: var(--rozo-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

body.single-product div.product table.variations select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--rozo-line);
  border-radius: var(--rozo-radius);
  font-size: 1rem;
}

body.single-product div.product table.variations td {
  position: relative;
}

/* The "Clear" link sits at the right end of the Size row, level with the buttons,
   so it no longer squeezes in between the sizes and the cart row */
body.single-product div.product .reset_variations {
  position: absolute;
  top: 50%;
  right: 0;
  margin: 0;
  transform: translateY(-50%);
  color: var(--rozo-muted);
  font-size: 0.8125rem;
  line-height: 1.2;
  text-decoration: underline;
}

body.single-product div.product .reset_variations:hover {
  color: var(--rozo-accent);
}

body.single-product div.product .woocommerce-variation-description,
body.single-product div.product .woocommerce-variation-price {
  margin-bottom: 12px;
  font-size: 0.9375rem;
}


/* ---------- 9. Quantity and Add to Cart ---------- */
body.single-product div.product form.cart:not(.variations_form),
body.single-product div.product .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 24px;
}

body.single-product div.product form.cart .quantity {
  flex: 0 0 auto;
  margin: 0 12px 0 0;
}

body.single-product div.product form.cart .quantity .qty {
  width: 64px;
  height: 48px;
  border: 1px solid var(--rozo-line);
  border-radius: var(--rozo-radius);
  text-align: center;
}

body.single-product div.product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 48px;
  margin: 0;
  border: 0;
  border-radius: var(--rozo-radius);
  background: var(--rozo-accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

body.single-product div.product form.cart .single_add_to_cart_button:hover:not(.disabled):not(:disabled) {
  background: var(--rozo-hover);
  color: #fff;
}

body.single-product div.product form.cart .single_add_to_cart_button.disabled,
body.single-product div.product form.cart .single_add_to_cart_button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}


/* ---------- 10. SKU and category ---------- */
body.single-product div.product .product_meta {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--rozo-line);
}

/* Size is set on the spans themselves, because the theme sets it there */
body.single-product div.product .product_meta > span,
body.single-product div.product .product_meta .sku_wrapper,
body.single-product div.product .product_meta .posted_in,
body.single-product div.product .product_meta .tagged_as {
  display: block;
  color: var(--rozo-muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}

body.single-product div.product .product_meta .sku {
  color: var(--rozo-ink);
  font-size: inherit;
  font-weight: 600;
}

body.single-product div.product .product_meta a {
  color: var(--rozo-ink);
  font-size: inherit;
  font-weight: 500;
  text-decoration: underline;
}


/* ---------- 11. Tabs (Description, Additional information, Reviews) ---------- */
body.single-product div.product .woocommerce-tabs {
  margin-top: 40px;
}

body.single-product div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 28px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rozo-line);
  overflow-x: auto;
  white-space: nowrap;
}

body.single-product div.product .woocommerce-tabs ul.tabs::before,
body.single-product div.product .woocommerce-tabs ul.tabs::after,
body.single-product div.product .woocommerce-tabs ul.tabs li::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

body.single-product div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

body.single-product div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  margin-bottom: -1px;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
  color: var(--rozo-muted);
  font-weight: 600;
}

body.single-product div.product .woocommerce-tabs ul.tabs li.active a {
  border-bottom-color: var(--rozo-ink);
  color: var(--rozo-ink);
}

body.single-product div.product .woocommerce-Tabs-panel {
  overflow-wrap: anywhere;
}

body.single-product div.product .woocommerce-Tabs-panel > h2:first-child {
  margin-top: 0;
  font-size: 1.5rem;
}

body.single-product div.product .woocommerce-Tabs-panel table.shop_attributes {
  width: 100%;
}


/* ---------- 12. Related and upsell products ---------- */
body.single-product div.product .related.products,
body.single-product div.product .upsells.products {
  margin-top: 48px;
}

body.single-product div.product .related.products > h2,
body.single-product div.product .upsells.products > h2 {
  margin: 0 0 20px;
  font-size: 1.5rem;
}

body.single-product div.product .related.products ul.products,
body.single-product div.product .upsells.products ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.single-product div.product .related.products ul.products li.product,
body.single-product div.product .upsells.products ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
}

body.single-product div.product ul.products li.product img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  body.single-product div.product .related.products ul.products,
  body.single-product div.product .upsells.products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  body.single-product div.product .related.products ul.products,
  body.single-product div.product .upsells.products ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ---------- 13. Cart, Checkout, My account, Shop: no big title banner ---------- */
/* Kadence puts a grey banner with the page title ("Cart") above these pages.
   This hides the whole banner. The Shop rules use the general .entry-hero
   class because the Shop banner may carry a different second class name.
   To hide it on other pages, add their body class here. */
body.woocommerce-cart .entry-hero.page-hero-section,
body.woocommerce-checkout .entry-hero.page-hero-section,
body.woocommerce-account .entry-hero.page-hero-section,
body.woocommerce-shop .entry-hero,
body.post-type-archive-product .entry-hero {
  display: none;
}

/* Keeps a small gap under the header now that the banner is gone */
body.woocommerce-cart .content-area,
body.woocommerce-checkout .content-area,
body.woocommerce-account .content-area,
body.woocommerce-shop .content-area,
body.post-type-archive-product .content-area {
  margin-top: 24px;
}


/* ---------- 14. Product category pages: keep the title, make it slim ---------- */
/* Replaces the tall grey banner with a plain centred heading and a thin line.
   Written for Kadence's usual banner markup (.entry-hero); not yet checked
   against the live page. To change the size, edit the 16px and font-size below. */
body.tax-product_cat .entry-hero,
body.tax-product_cat .entry-hero-container-inner,
body.tax-product_cat .entry-hero .hero-section-overlay {
  background: transparent;
}

body.tax-product_cat .entry-hero {
  border-bottom: 1px solid var(--rozo-line, #e5e7eb);
}

body.tax-product_cat .entry-hero .entry-header {
  min-height: 0;
  padding-top: 16px;
  padding-bottom: 16px;
}

body.tax-product_cat .entry-hero .entry-title,
body.tax-product_cat .entry-hero .page-title {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

body.tax-product_cat .content-area {
  margin-top: 24px;
}