/**
 * Location: /assets/css/single-product-layout.css
 * Purpose: Single Product layout tuning (gap + column balance) for:
 *          - sidebar ↔ gallery gap (-10px)
 *          - gallery ↔ summary gap (-10px)
 *          - shift extra space into summary area (+40px wider summary column)
 *          - responsive stability (no unbalance on resize)
 * Related CSS:
 *  - /assets/css/sidebar.css (global layout grid + sidebar width/desktop collapse)
 *  - /assets/css/main.css (gallery styling + tabs/related styling)
 * Related JS: None
 * Linkage/Loader:
 *  - Enqueued from /inc/enqueue/frontend.php ONLY on is_product()
 * Notes:
 *  - Modular + performance-first: affects only single product page.
 *  - No hacks: no global overrides, no !important, no forced widths on all pages.
 */

/* ======================================================
   Single Product — Gap + Balance (Desktop)
====================================================== */

/* A) Sidebar ↔ Content gap: reduce by 10px only on single product */
.single-product .stm-layout{
  /* default: --stm-layout-gap: 22px (sidebar.css)
     target: 12px (22 - 10) but keep safe minimum */
  gap: clamp(12px, calc(var(--stm-layout-gap, 22px) - 10px), var(--stm-layout-gap, 22px));
}

/* B) Gallery ↔ Summary:
   - reduce gap by 10px
   - make summary column +40px wider by design (without hacks)
*/
.single-product .stm-sp__grid{
  display: grid;
  align-items: start;

  /* Summary boost (exact request) */
  --stm-sp-summary-boost: 40px;

  /* Balanced columns:
     - Gallery stays flexible
     - Summary gets a slightly stronger min/max + +40px boost
  */
  grid-template-columns:
    minmax(0, 1fr)
    minmax(calc(420px + var(--stm-sp-summary-boost)), calc(520px + var(--stm-sp-summary-boost)));

  /* Reduce gap (10px less than typical spacious layouts) */
  gap: clamp(12px, 1.2vw, 16px);
}

/* Summary inner padding: keep clean + consistent */
.single-product .stm-sp__summary .stm-sp__summary-inner{
  padding: clamp(16px, 1.6vw, 22px);
}

/* ======================================================
   Responsive behavior (stable on viewport resize)
====================================================== */

/* <=1200px: still 2 columns, but allow summary to shrink gracefully */
@media (max-width: 1200px){
  .single-product .stm-sp__grid{
    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, 1fr);
    gap: 14px;
  }
}

/* <=1024px: keep comfortable spacing + avoid cramped summary */
@media (max-width: 1024px){
  .single-product .stm-sp__grid{
    gap: 14px;
  }
}

/* <=980px: stack layout (matches your existing breakpoint direction) */
@media (max-width: 980px){
  .single-product .stm-sp__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .single-product .stm-sp__summary .stm-sp__summary-inner{
    position: relative;
    top: auto;
  }
}

/* ======================================================
   WRAP WIDTH + GUTTERS (Mobile/Tablet only)
====================================================== */

/* Base wrap */
.single-product .stm-sp__wrap{
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;

  /* ✅ Mobile gutters reduced (half-ish) */
  padding-left: 6px;
  padding-right: 6px;
}

/* ✅ Tablet gutters reduced (half) */
@media (min-width: 768px) and (max-width: 1024px){
  .single-product .stm-sp__wrap{
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ✅ Desktop keeps original gutters */
@media (min-width: 1025px){
  .single-product .stm-sp__wrap{
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* 2) Ensure upsells section uses full width */
.single-product .stm-sp-upsells{
  width: 100%;
}

/* 3) Force the products grid to behave like shop (no center/narrow) */
.single-product .stm-sp-upsells .products{
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  justify-content: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px){
  .single-product .stm-sp-upsells .products{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .single-product .stm-sp-upsells .products{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 380px){
  .single-product .stm-sp-upsells .products{
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   FORCE Single Product gutters (Mobile/Tablet only)
   (keeps Desktop untouched)
====================================================== */
@media (max-width: 1024px){
  .single-product .stm-sp__wrap{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px){
  .single-product .stm-sp__wrap{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}