/* ==========================================================
   ROYAL BD - FINAL STABLE FIX (ONE SHOT)
   Single Product Width + Related Products + Buttons
   PC: 3 products, buttons single line (Add2Cart wider)
   Mobile: ALWAYS 2 products, buttons 2-column equal
========================================================== */

/* Single product page width */
body.single-product{
  --site-container-width: 1200px;
}

/* ------------------------------
   RELATED PRODUCTS: FORCE GRID
   (This avoids theme flex/float conflicts)
------------------------------ */

/* PC: 3 columns */
@media (min-width: 769px){
  body.single-product .related.products ul.products{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
}

/* Mobile + small mobile: ALWAYS 2 columns */
@media (max-width: 768px){
  body.single-product .related.products ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
}

/* Reset product item (kills width:100% / float / clear conflicts) */
body.single-product .related.products ul.products > li.product{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  box-sizing: border-box !important;
}

/* Keep card stable */
body.single-product .related.products li.product{
  display: flex !important;
  flex-direction: column !important;
}

/* ------------------------------
   BUTTON WRAPPER
   PC: single row (flex)
   Mobile: 2-column (grid)
------------------------------ */

/* Wrapper common selectors */
body.single-product .related.products li.product .rb-actions,
body.single-product .related.products li.product .product-buttons,
body.single-product .related.products li.product .rbd-btn-wrap,
body.single-product .related.products li.product .rbd-product-buttons,
body.single-product .related.products li.product .btn-group,
body.single-product .related.products li.product .woocommerce-loop-product__buttons{
  gap: 8px !important;
}

/* PC wrapper: single line */
@media (min-width: 769px){
  body.single-product .related.products li.product .rb-actions,
  body.single-product .related.products li.product .product-buttons,
  body.single-product .related.products li.product .rbd-btn-wrap,
  body.single-product .related.products li.product .rbd-product-buttons,
  body.single-product .related.products li.product .btn-group,
  body.single-product .related.products li.product .woocommerce-loop-product__buttons{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
}

/* Mobile wrapper: 2-column equal */
@media (max-width: 768px){
  body.single-product .related.products li.product .rb-actions,
  body.single-product .related.products li.product .product-buttons,
  body.single-product .related.products li.product .rbd-btn-wrap,
  body.single-product .related.products li.product .rbd-product-buttons,
  body.single-product .related.products li.product .btn-group,
  body.single-product .related.products li.product .woocommerce-loop-product__buttons{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
}

/* Force children full width */
body.single-product .related.products li.product .rb-actions > *,
body.single-product .related.products li.product .product-buttons > *,
body.single-product .related.products li.product .rbd-btn-wrap > *,
body.single-product .related.products li.product .rbd-product-buttons > *,
body.single-product .related.products li.product .btn-group > *,
body.single-product .related.products li.product .woocommerce-loop-product__buttons > *{
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  box-sizing: border-box !important;
}

/* ------------------------------
   BUTTON STYLE (SLIM + CLEAN)
------------------------------ */
body.single-product .related.products li.product a.button,
body.single-product .related.products li.product .button{
  width: 100% !important;
  min-width: 0 !important;

  height: 34px !important;
  line-height: 34px !important;
  padding: 0 10px !important;

  font-size: 12px !important;
  font-weight: 600 !important;

  border-radius: 8px !important;
  white-space: nowrap !important;

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

  box-sizing: border-box !important;
}

/* Mobile: slightly smaller buttons */
@media (max-width: 768px){
  body.single-product .related.products li.product a.button,
  body.single-product .related.products li.product .button{
    height: 32px !important;
    line-height: 32px !important;
    font-size: 11.5px !important;
    padding: 0 8px !important;
  }
}

/* ------------------------------
   PC ONLY: Add2Cart wider, OrderNow smaller
   (Mobile equal - no ratio)
------------------------------ */
@media (min-width: 769px){
  /* Add to cart bigger */
  body.single-product .related.products li.product a.add_to_cart_button,
  body.single-product .related.products li.product a.ajax_add_to_cart{
    flex: 1.25 1 0 !important;
  }

  /* Order now smaller */
  body.single-product .related.products li.product a.order-now,
  body.single-product .related.products li.product a.buy-now,
  body.single-product .related.products li.product a.rbd-buy-now,
  body.single-product .related.products li.product a.rb-buy-now,
  body.single-product .related.products li.product a[href*="checkout"]{
    flex: 0.75 1 0 !important;
  }
}

/* ------------------------------
   Shop page width keep wide
------------------------------ */
body.post-type-archive-product{
  --site-container-width: 1800px;
}



/* ==================================================
   BOXED VARIATION OPTIONS (Like your screenshot)
   Only when Variation Swatches plugin is active
================================================== */

/* Hide dropdown ONLY if swatches plugin is active */
.woo-variation-swatches .variations select{
  display: none !important;
}

/* 2-column boxed layout */
.woo-variation-swatches .variations ul.variable-items-wrapper{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* each boxed option */
.woo-variation-swatches .variations ul.variable-items-wrapper li.variable-item{
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

/* selected state */
.woo-variation-swatches .variations ul.variable-items-wrapper li.variable-item.selected,
.woo-variation-swatches .variations ul.variable-items-wrapper li.variable-item:hover{
  border-color: #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.18) !important;
}

/* small phone: still 2 columns */
@media (max-width: 420px){
  .woo-variation-swatches .variations ul.variable-items-wrapper{
    gap: 10px !important;
  }
}