.kahvar-product-page .product-topbar {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}

.product-breadcrumb {
  font-size: 0.92rem;
  color: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-breadcrumb a { color: inherit; text-decoration: none; }
.product-breadcrumb a:hover { text-decoration: underline; }
.crumb-sep { opacity: 0.55; }

.product-section {
  padding: 26px 0 34px;
}

.product-gallery-main {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}

.product-gallery-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.product-gallery-badges {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  gap: 8px;
}

.product-gallery-thumbs {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.thumb-btn {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  flex: 0 0 auto;
  width: 74px;
  height: 56px;
  cursor: pointer;
}
.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-btn.is-active {
  border-color: rgba(70, 15, 21, 0.35);
  box-shadow: 0 0 0 3px rgba(70, 15, 21, 0.08);
}

.product-head .product-title {
  font-weight: 900;
  line-height: 1.12;
  margin: 6px 0 10px;
  font-size: clamp(1.9rem, 2vw + 1rem, 2.6rem);
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.meta-chip--sku {
  background: rgba(0,0,0,0.06);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.product-notes {
  margin-top: 6px;
  color: rgba(0,0,0,0.72);
}

.product-price-card {
  margin-top: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 14px 16px;
  background: #fff;
}

.product-description {
  margin-top: 14px;
  color: rgba(70, 15, 21, 0.88);
  line-height: 1.65;
}

.product-buy {
  margin-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 18px;
}

.buy-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: center;
}

@media (max-width: 576px) {
  .buy-row { grid-template-columns: 1fr; }
}

.qty-stepper {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 8px;
}

.qty-btn {
  border: 0;
  background: rgba(0,0,0,0.04);
  border-radius: 12px;
  height: 42px;
  cursor: pointer;
}

#qtyInput {
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 700;
  height: 42px;
  outline: none;
}

.buy-cta {
  height: 56px;
  font-weight: 700;
}

.buy-links {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-trust {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kahvar-alert {
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}
.kahvar-alert-success {
  border-color: rgba(25, 135, 84, 0.25);
  background: rgba(25, 135, 84, 0.06);
}

.product-related {
  padding: 34px 0 50px;
  background: rgba(0,0,0,0.02);
  border-top: 1px solid rgba(0,0,0,0.06);
}

.related-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.related-title {
  margin: 0;
  font-weight: 900;
}
.related-sub {
  margin: 8px 0 0;
  color: rgba(0,0,0,0.68);
}

.product-image{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Constrain product content width for large screens */
.product-frame {
  max-width: 1080px;        /* sweet spot: 1020–1120 */
  padding-left: 16px;
  padding-right: 16px;
}

/* Slightly more breathing room on very large screens */
@media (min-width: 1400px) {
  .product-frame {
    max-width: 1040px;
  }
}

/* ---------------------------------------
   Premium product layout: sticky + overlap
---------------------------------------- */

/* Give section some breathing room so overlap doesn't crash into hero */
.kahvar-product-page .shop-section{
  padding-top: 18px !important;
}

/* Only apply sticky + overlap on desktop */
@media (min-width: 992px){

  /* Sticky right column */
  .product-right-sticky{
    position: sticky;
    top: 110px;               /* match your header height */
  }

  /* Create an overlapped "floating" feel */
  .kahvar-product-page .product-media,
  .kahvar-product-page .product-right-sticky{
    transform: translateY(-18px);
  }

  /* Add a touch more depth */
  .kahvar-product-page .product-card{
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  }

  /* Optional: slightly rounder corners looks more premium */
  .kahvar-product-page .product-card{
    border-radius: 22px;
  }
}

/* Make sure it behaves normally on mobile */
@media (max-width: 991.98px){
  .product-right-sticky{
    position: static;
    top: auto;
    transform: none;
  }

  .kahvar-product-page .product-media{
    transform: none;
  }
}

/* Combined buy panel */
.buy-panel{
  padding: 18px;
}

.buy-panel-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.buy-kicker{
  font-size: 0.78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 10px;
}

.buy-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.buy-price{
  text-align: right;
  min-width: 160px;
}

.buy-price-label{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}

.buy-price-value{
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--kahvar-red);
  line-height: 1.05;
}

.buy-panel-row{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.buy-row-title{
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
  flex: 0 0 auto;
}

.buy-row-value{
  font-weight: 600;
  color: rgba(0,0,0,0.72);
  text-align: right;
}

.buy-more-pill{
  margin-left: 8px;
  padding: 5px 9px;
  font-size: 12px;
  background: rgba(58,88,80,.10);
  border-color: rgba(58,88,80,.22);
}

.buy-panel-desc{
  margin-top: 14px;
  color: rgba(70,15,21,0.90);
  line-height: 1.65;
}

.buy-panel-divider{
  margin-top: 16px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.buy-panel-form{
  margin-top: 14px;
}

.buy-actions{
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.buy-qty-label{
  display:block;
  margin-bottom: 8px;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}

.buy-add-btn,
.buy-view-btn{
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.buy-trust{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Sticky right column on desktop */
@media (min-width: 992px){
  .product-right-sticky{
    position: sticky;
    top: 110px;
  }
}

/* Mobile: stack actions */
@media (max-width: 576px){
  .buy-actions{
    grid-template-columns: 1fr;
  }

  .buy-price{
    min-width: auto;
  }

  .buy-panel-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .buy-price{
    text-align: left;
  }
}

@media (min-width: 992px){
  .kahvar-product-page .product-media,
  .kahvar-product-page .product-right-sticky{
    transform: translateY(-18px);
  }
}

.product-image-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.25)
  );
  pointer-events: none;
}

.product-rail .product-card{
  transition: transform .25s ease, box-shadow .25s ease;
}

.product-rail .product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
}

.product-rail h3{
  font-weight: 700;
}

.blend-image{
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}

.product-rail-wrap{
  overflow: hidden; /* keeps shadows clean */
}

.product-rail{
  padding: 6px 10px; /* gives breathing room */
  margin: 0 -10px;   /* keeps the rail aligned with container edges */
}
.product-rail{
  padding: 6px 18px;
  margin: 0 -18px;
}

.product-rail-wrap{
  overflow: hidden;
}

.product-rail{
  display: flex;              /* assuming it is a rail */
  gap: 16px;                  /* if not already in your CSS */
  justify-content: flex-start;/* important */
  padding: 6px 18px;
  margin: 0 -18px;
  overflow-x: auto;           /* if your rail scrolls */
  scroll-snap-type: x mandatory; /* optional */
}

.product-rail{
  padding: 6px 0;
}

.product-rail > *:first-child{
  margin-left: 18px;
}

.product-rail > *:last-child{
  margin-right: 18px;
}

/* === FIX: related products rail should start from the left === */
.product-rail{
  display: flex;              /* ensure flex */
  justify-content: flex-start !important;
}

/* Optional: keep spacing clean so first card aligns with the heading */
.product-rail-wrap{
  overflow: hidden;
}
.product-rail{
  padding: 6px 18px !important;
  margin: 0 -18px !important;
}

.product-media {
    position: relative;
}

.product-media img {
    width: 100%;
    height: auto;
    display: block;
}

.product-gallery-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Fix cropped product image */
.product-media {
  height: auto !important;
}

.product-media img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}