/* =====================================================
   ROOT
===================================================== */
.lpc-wrapper {
  width: 100%;
  font-family: inherit;
}

/* =====================================================
   LAYOUT
===================================================== */
.lpc-container {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 40px;
  align-items: start;
}

@media (max-width: 991px) {
  .lpc-container {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   IMAGE CONTAINER (STABLE & RESPONSIVE)
===================================================== */
.lpc-image-area {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;       /* 🔥 square container */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f7f7f7;       /* optional soft background */
  border-radius: 14px;
}

/* =====================================================
   IMAGE ITSELF (NO CROP, NO STRETCH)
===================================================== */
.lpc-main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* 🔥 magic line */
  display: block;
}


/* =====================================================
   RIGHT HEADING
===================================================== */
.lpc-right-heading {
  margin-bottom: 22px;
}

/* =====================================================
   ATTRIBUTE WRAPPER
===================================================== */
.lpc-attributes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 26px;
}

@media (max-width: 767px) {
  .lpc-attributes {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   ATTRIBUTE CARD
===================================================== */
.lpc-group {
  background: #fff;
  padding: 14px;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

.lpc-heading {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* =====================================================
   OPTIONS GRID (ALL VERTICAL – COLOR STYLE)
===================================================== */
.lpc-options-grid {
  display: grid;
  grid-template-columns: 1fr; /* 🔥 ALL OPTIONS STACKED */
  gap: 6px;
}

/* =====================================================
   RADIO OPTION
===================================================== */
.lpc-radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--lpc-option-bg, #fff);
  color: var(--lpc-option-text, inherit);
}

.lpc-radio-option input {
  display: none;
}

.lpc-radio {
  width: 16px;
  height: 16px;
  border: 2px solid #aaa;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.lpc-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

/* ACTIVE STATE */
.lpc-radio-option.active {
  background: var(--lpc-option-active-bg, #f3f8ff);
}

.lpc-radio-option.active .lpc-radio {
  border-color: var(--lpc-option-active-color, #0a7cff);
}

.lpc-radio-option.active .lpc-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--lpc-option-active-color, #0a7cff);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* =====================================================
   META INFO
===================================================== */
.lpc-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 26px;
}

@media (max-width: 767px) {
  .lpc-meta-grid {
    grid-template-columns: 1fr;
  }
}

.lpc-meta-grid > div {
  background: #fff;
  padding: 14px 16px;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

.lpc-meta-grid strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.6;
  margin-bottom: 4px;
}

.lpc-meta-grid span {
  font-size: 15px;
  font-weight: 600;
}



/* =====================================================
   ADD TO CART BUTTON
===================================================== */
.lpc-add-to-cart {
  padding: 14px 30px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: var(--lpc-btn-bg, #000);
  color: var(--lpc-btn-text, #fff);
  transition: all 0.2s ease;
}

.lpc-add-to-cart:hover {
  background: var(--lpc-btn-bg-hover, #222);
}

.lpc-add-to-cart:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* ===============================
   PRICE BAR – FINAL POLISH
=============================== */
.lpc-price-bar {
  display: grid;
  grid-template-columns: 40% 60%;
  width: 100%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  overflow: hidden;
  min-height: 44px;
  margin-bottom: 10px;
  
}

/* LEFT : PRICE LABEL */
.lpc-price-label {
  background: #e0dbdb;
  color: #d62828;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 20px;
  border-right: 1px solid #adadad; /* 🔥 visual separation */
}

/* RIGHT : PRICE VALUE */
.lpc-price-value {
  background: #ffffff;
  color: #0a8f6a;
  font-size: 22px;
  font-weight: 800;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 20px;
}
.lpc-price-label,
.lpc-price-value {
  height: 100%;          /* 🔥 stretch full height */
}
.lpc-price-bar {
  align-items: stretch; /* 🔥 default grid behavior */
}

/* =====================================================
   DESCRIPTION BOX (SHORT DESCRIPTION)
   -- ADDED ONLY
===================================================== */
.lpc-desc-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  margin-top: 8px;
  
}

.lpc-desc-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #222;
}


/* =====================================================
   COLOR RADIO – TEXT + COLORED CIRCLE
   -- ADDED ONLY
===================================================== */
.lpc-group[data-attr="color"] .lpc-radio {
  border-color: #bbb;
}

/* BLUE */
.lpc-group[data-attr="color"] input[value="Blue"] + .lpc-radio {
  border-color: #1e73ff;
}
.lpc-group[data-attr="color"] input[value="Blue"]:checked + .lpc-radio::after {
  background: #1e73ff;
}

/* GREEN */
.lpc-group[data-attr="color"] input[value="Green"] + .lpc-radio {
  border-color: #2ecc71;
}
.lpc-group[data-attr="color"] input[value="Green"]:checked + .lpc-radio::after {
  background: #2ecc71;
}

/* TAN */
.lpc-group[data-attr="color"] input[value="Tan"] + .lpc-radio {
  border-color: #d2b48c;
}
.lpc-group[data-attr="color"] input[value="Tan"]:checked + .lpc-radio::after {
  background: #d2b48c;
}