/* ============================================================
   SKAM ARTIST 2026 — Product Detail Page
   Scoped via :has() so it only fires on commerce product pages
   ============================================================ */


/* ── Flatten intermediate wrappers into the section grid ─────── */
/* display:contents removes the box but keeps children in flow,
   letting us grid-place article children directly in .section   */

body:has(.commerce-order-item-add-to-cart-form) #block-weloveskam-mainpagecontent,
body:has(.commerce-order-item-add-to-cart-form) #block-weloveskam-mainpagecontent > .content,
body:has(.commerce-order-item-add-to-cart-form) #block-weloveskam-mainpagecontent article {
  display: contents;
}


/* ── Section: two-column grid ───────────────────────────────── */

body:has(.commerce-order-item-add-to-cart-form) section.section {
  display: grid;
  grid-template-columns: 1fr 460px;
  grid-template-rows: auto;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 5rem;
}

/* Hide artist slideshow on product pages */
body:has(.commerce-order-item-add-to-cart-form)
  #block-weloveskam-views-block-artist-slideshow-block-banner-artist {
  display: none;
}

/* Hide empty variation span elements */
body:has(.commerce-order-item-add-to-cart-form)
  span.product--variation-field--variation_list_price__4,
body:has(.commerce-order-item-add-to-cart-form)
  span.product--variation-field--variation__layout_builder__4 {
  display: none;
}


/* ── LEFT COLUMN: product images ────────────────────────────── */

body:has(.commerce-order-item-add-to-cart-form) .field--name-field-product-photos {
  grid-column: 1;
  grid-row: 1 / span 6;
  align-self: start;
}


/* ── RIGHT COLUMN: page title ───────────────────────────────── */

body:has(.commerce-order-item-add-to-cart-form) #block-weloveskam-page-title {
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  padding: 3rem 3rem 0;
  background: transparent;
}

body:has(.commerce-order-item-add-to-cart-form) #block-weloveskam-page-title h1,
body:has(.commerce-order-item-add-to-cart-form) #block-weloveskam-page-title .title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--skam-white);
  margin: 0;
  line-height: 1.25;
}


/* ── RIGHT COLUMN: price ────────────────────────────────────── */

body:has(.commerce-order-item-add-to-cart-form)
  .product--variation-field--variation_price__4 {
  grid-column: 2;
  grid-row: 2;
  padding: 1.5rem 3rem 0;
}

body:has(.commerce-order-item-add-to-cart-form)
  .product--variation-field--variation_price__4.field--type-commerce-price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #f5c042 !important;
}


/* ── RIGHT COLUMN: variations (size selector + add to cart) ─── */

body:has(.commerce-order-item-add-to-cart-form) .field--name-variations {
  grid-column: 2;
  grid-row: 3;
  padding: 1.5rem 3rem 0;
}

/* Hide "Variations" label */
body:has(.commerce-order-item-add-to-cart-form)
  .field--name-variations > .field__label {
  display: none;
}

/* Size label */
body:has(.commerce-order-item-add-to-cart-form)
  .js-form-item label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--skam-purple-light);
  margin-bottom: 0.75rem;
}

/* ── Size select dropdown ────────────────────────────────────── */
/* NOTE: For box-style size buttons like the comp, go to:
   Commerce > Config > Product variation types > Manage form display
   and change the Size attribute widget from "Select list" to "Radios".
   Then the .form-radio styles below will render as styled boxes.       */

body:has(.commerce-order-item-add-to-cart-form) select.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: transparent;
  border: 1px solid #a855f7 !important;
  border-radius: 3px;
  color: var(--skam-white);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a855f7' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

body:has(.commerce-order-item-add-to-cart-form) select.form-select:hover,
body:has(.commerce-order-item-add-to-cart-form) select.form-select:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 1px #a855f7 !important;
  outline: none;
}

body:has(.commerce-order-item-add-to-cart-form) select.form-select option {
  background-color: var(--skam-dark);
  color: var(--skam-white);
}

/* ── Radio buttons as size boxes (when widget = Radios) ─────── */

body:has(.commerce-order-item-add-to-cart-form) .js-form-type-radio {
  display: inline-block;
  margin: 0 0.4rem 0.4rem 0;
}

body:has(.commerce-order-item-add-to-cart-form) .js-form-type-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

body:has(.commerce-order-item-add-to-cart-form) .js-form-type-radio label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--skam-border);
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--skam-text-mid);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  margin-bottom: 0;
}

body:has(.commerce-order-item-add-to-cart-form)
  .js-form-type-radio input[type="radio"]:checked + label {
  border-color: var(--skam-purple);
  color: var(--skam-white);
  background: rgba(168, 85, 247, 0.12);
}

body:has(.commerce-order-item-add-to-cart-form)
  .js-form-type-radio label:hover {
  border-color: var(--skam-purple-light);
  color: var(--skam-white);
}


/* ── Add to cart button ─────────────────────────────────────── */

body:has(.commerce-order-item-add-to-cart-form) .form-actions {
  margin-top: 1.5rem;
}

body:has(.commerce-order-item-add-to-cart-form) button.button--add-to-cart,
body:has(.commerce-order-item-add-to-cart-form) button.button--add-to-cart.btn-primary {
  width: 100% !important;
  padding: 1rem 2rem !important;
  background: #a855f7 !important;
  border: 1px solid #a855f7 !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease;
}

body:has(.commerce-order-item-add-to-cart-form) button.button--add-to-cart:hover,
body:has(.commerce-order-item-add-to-cart-form) button.button--add-to-cart.btn-primary:hover {
  background: #c084fc !important;
  border-color: #c084fc !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.5) !important;
  color: #ffffff !important;
}


/* ── Right panel: sticky scroll ─────────────────────────────── */
/* Makes the product info panel stick while images scroll past  */

body:has(.commerce-order-item-add-to-cart-form) #block-weloveskam-page-title,
body:has(.commerce-order-item-add-to-cart-form)
  .product--variation-field--variation_price__4,
body:has(.commerce-order-item-add-to-cart-form) .field--name-variations {
  position: sticky;
  /* Each stacks below the previous; adjust top per row */
}

body:has(.commerce-order-item-add-to-cart-form) #block-weloveskam-page-title {
  top: 0;
}


/* ── Misc Bootstrap overrides — scoped tightly to the form ──── */

body:has(.commerce-order-item-add-to-cart-form) .field--name-variations .mb-3 {
  margin-bottom: 0 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet (< 1024px) — stack columns ──────────────────────── */
@media (max-width: 1023.98px) {
  body:has(.commerce-order-item-add-to-cart-form) section.section {
    grid-template-columns: 1fr;
    max-width: 680px;
  }

  body:has(.commerce-order-item-add-to-cart-form) .field--name-field-product-photos {
    grid-column: 1;
    grid-row: 2;
  }

  body:has(.commerce-order-item-add-to-cart-form) #block-weloveskam-page-title {
    grid-column: 1;
    grid-row: 1;
    padding: 2rem 1.5rem 0;
    position: static;
  }

  body:has(.commerce-order-item-add-to-cart-form)
    .product--variation-field--variation_price__4 {
    grid-column: 1;
    grid-row: 3;
    padding: 1.5rem 1.5rem 0;
    position: static;
  }

  body:has(.commerce-order-item-add-to-cart-form) .field--name-variations {
    grid-column: 1;
    grid-row: 4;
    padding: 1rem 1.5rem 0;
    position: static;
  }

}

/* ── Mobile (< 576px) ───────────────────────────────────────── */
@media (max-width: 575.98px) {
  body:has(.commerce-order-item-add-to-cart-form) section.section {
    padding: 0 0 3rem;
  }

  body:has(.commerce-order-item-add-to-cart-form) #block-weloveskam-page-title {
    padding: 1.5rem 1.25rem 0;
  }

  body:has(.commerce-order-item-add-to-cart-form)
    .product--variation-field--variation_price__4 {
    padding: 1rem 1.25rem 0;
  }

  body:has(.commerce-order-item-add-to-cart-form) .field--name-variations {
    padding: 1rem 1.25rem 0;
  }
}