/* ==========================================================================
   Door Stud — WooCommerce single product page restyle
   Ports the look of doorstud-product-page.html onto real WooCommerce
   markup. Scoped to product pages only (enqueued conditionally in PHP).
   ========================================================================== */

:root {
  --ds-black: #0f0f0f;
  --ds-white: #ffffff;
  --ds-yellow: #F5C300;
  --ds-yellow-dark: #c49a00;
  --ds-gray-100: #f5f4f1;
  --ds-gray-200: #e8e6e0;
  --ds-gray-400: #9a9690;
  --ds-gray-600: #5a5752;
  --ds-gray-800: #2c2b28;
  --ds-font-display: 'Barlow Condensed', sans-serif;
  --ds-font-body: 'Barlow', sans-serif;
}

/* ── Scope body copy inside the product area only, so the rest of the
   Divi site (built with its own fonts) is untouched. ────────────────── */
.woocommerce div.product {
  font-family: var(--ds-font-body);
  color: var(--ds-black);
}

/* ── TRUST BAR ─────────────────────────────────────────────────────── */
.doorstud-trust-bar {
  background: var(--ds-yellow);
  padding: 0.9rem 2rem;
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 2.5rem;
}
.doorstud-trust-item {
  font-family: var(--ds-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-black);
}
@media (max-width: 600px) {
  .doorstud-trust-bar { gap: 1rem; padding: 0.75rem 1rem; }
  .doorstud-trust-item { font-size: 0.72rem; }
}

/* ── LAYOUT: image column + summary column ────────────────────────── */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}
/* Divi doesn't hand WooCommerce's gallery and summary straight to div.product —
   it wraps them in its own <div class="clearfix">. That left the grid above
   with a single child, so it never laid anything out: the gallery just floated
   and the summary text wrapped around it. `display: contents` dissolves the
   wrapper's box and promotes its children back to grid items. (The "Sale!"
   badge is inside that wrapper too, but WooCommerce positions it absolutely,
   so it takes no grid cell.) */
.woocommerce div.product > .clearfix {
  display: contents;
}

.woocommerce div.product div.images {
  grid-column: 1;
  position: sticky;
  top: 90px;
}
.woocommerce div.product div.summary {
  grid-column: 2;
  padding-top: 0.25rem;
  float: none;
  width: auto;
}
@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: 2.5rem; padding: 0 1.25rem; }
  .woocommerce div.product div.images { position: static; grid-column: 1; }
  .woocommerce div.product div.summary { grid-column: 1; }
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  background: var(--ds-gray-100);
}
.woocommerce div.product div.images img {
  object-fit: contain;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  border: 2px solid transparent;
  opacity: 1;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: var(--ds-yellow);
}

/* ── EYEBROW / VARIANT SUBTITLE ────────────────────────────────────── */
.doorstud-eyebrow {
  font-family: var(--ds-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-yellow-dark);
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.doorstud-eyebrow::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--ds-yellow);
}
.doorstud-variant-subtitle {
  font-size: 1rem;
  color: var(--ds-gray-600);
  margin: 0 0 1.5rem;
  font-weight: 400;
}

/* ── TITLE ─────────────────────────────────────────────────────────── */
.woocommerce div.product .product_title {
  font-family: var(--ds-font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.93;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}

/* ── RATING ────────────────────────────────────────────────────────── */
.woocommerce div.product .woocommerce-product-rating {
  margin: 0 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.woocommerce div.product .star-rating { color: var(--ds-yellow); }
.woocommerce div.product .woocommerce-review-link {
  font-size: 0.82rem;
  color: var(--ds-gray-400);
}

/* ── PRICE ─────────────────────────────────────────────────────────── */
.woocommerce div.product p.price {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--ds-gray-200);
  width: 100%;
  font-family: var(--ds-font-display);
}
.woocommerce div.product p.price ins {
  text-decoration: none;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ds-black);
}
.woocommerce div.product p.price del {
  font-family: var(--ds-font-body);
  font-size: 1.1rem;
  color: var(--ds-gray-400);
  opacity: 1;
}
.woocommerce div.product p.price bdi {
  font-family: inherit;
}
/* A variable product prints a price RANGE ("$159.00 – $269.00") — plain
   amounts, no <ins>/<del> for the rules above to catch, so it would otherwise
   fall through to WooCommerce's stock olive (#958e09). */
.woocommerce div.product.product-type-variable p.price,
.woocommerce div.product.product-type-variable p.price .woocommerce-Price-amount {
  color: var(--ds-black);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.doorstud-savings-badge {
  background: var(--ds-yellow);
  color: var(--ds-black);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── KEY BENEFITS ──────────────────────────────────────────────────── */
.doorstud-key-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 0 2rem;
}
.doorstud-key-benefit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--ds-gray-800);
}
.doorstud-key-benefit-dot {
  width: 7px;
  height: 7px;
  background: var(--ds-yellow);
  border-radius: 50%;
  flex-shrink: 0;
}
.doorstud-short-description { margin: 0 0 2rem; color: var(--ds-gray-800); }

/* ── ADD TO CART FORM (qty + Add to Cart + Buy Now) ───────────────── */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.woocommerce div.product form.cart .quantity {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ds-gray-200);
  flex-shrink: 0;
  margin: 0;
}
.woocommerce div.product form.cart .quantity .qty {
  width: 54px;
  text-align: center;
  border: none;
  font-family: var(--ds-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ds-black);
  background: var(--ds-white);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1;
  background: var(--ds-yellow) !important;
  color: var(--ds-black) !important;
  font-family: var(--ds-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.1rem 1.5rem;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  min-width: 220px;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--ds-yellow-dark) !important;
  transform: translateY(-1px);
}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 600px) {
  .woocommerce div.product form.cart { flex-direction: column; }
  .woocommerce div.product form.cart .quantity,
  .woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; justify-content: center; }
}

/* ── MULTI-QUANTITY BUY BOX (Pro + Heavy, choose how many of each) ──── */
.woocommerce div.product form.cart.doorstud-multi-order {
  display: block; /* override the flex row layout used by the simple form */
  margin: 0 0 1rem;
}
.doorstud-mo-rows {
  border: 1px solid var(--ds-gray-200);
}
.doorstud-mo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
.doorstud-mo-row + .doorstud-mo-row {
  border-top: 1px solid var(--ds-gray-200);
}
.doorstud-mo-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.doorstud-mo-name {
  font-family: var(--ds-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ds-black);
  line-height: 1.1;
}
.doorstud-mo-price {
  font-family: var(--ds-font-body);
  font-size: 0.95rem;
  color: var(--ds-gray-600);
}
.doorstud-mo-price del { color: var(--ds-gray-400); opacity: 1; margin-right: 0.35rem; }
.doorstud-mo-price ins { text-decoration: none; color: var(--ds-black); font-weight: 600; }

/* Quantity stepper — mirrors the checkout stepper's look */
.doorstud-mo-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ds-gray-200);
  flex-shrink: 0;
}
.doorstud-mo-btn {
  width: 38px;
  border: none;
  background: var(--ds-white);
  color: var(--ds-black);
  font-family: var(--ds-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.doorstud-mo-btn:hover { background: var(--ds-yellow); }
.doorstud-mo-input {
  width: 52px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--ds-gray-200);
  border-right: 1px solid var(--ds-gray-200);
  font-family: var(--ds-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ds-black);
  background: var(--ds-white);
  -moz-appearance: textfield;
  appearance: textfield;
}
.doorstud-mo-input::-webkit-outer-spin-button,
.doorstud-mo-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.doorstud-mo-footer {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1rem;
}
.doorstud-mo-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1.25rem;
  border: 1px solid var(--ds-gray-200);
  flex-shrink: 0;
  min-width: 120px;
}
.doorstud-mo-total-label {
  font-family: var(--ds-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-gray-400);
}
.doorstud-mo-total-value {
  font-family: var(--ds-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ds-black);
  line-height: 1.1;
}
.doorstud-mo-submit {
  flex: 1;
  background: var(--ds-yellow);
  color: var(--ds-black);
  font-family: var(--ds-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.1rem 1.5rem;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  min-width: 200px;
}
.doorstud-mo-submit:hover:not(:disabled) { background: var(--ds-yellow-dark); transform: translateY(-1px); }
.doorstud-mo-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.doorstud-mo-hint {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: var(--ds-gray-600);
}

@media (max-width: 600px) {
  .doorstud-mo-footer { flex-direction: column; }
  .doorstud-mo-total { flex-direction: row; align-items: baseline; gap: 0.5rem; justify-content: space-between; padding: 0.75rem 1.25rem; }
  .doorstud-mo-submit { width: 100%; }
}

/* ── MICRO TRUST ROW ───────────────────────────────────────────────── */
.doorstud-micro-trust {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--ds-gray-200);
}
.doorstud-micro-trust-item {
  font-size: 0.78rem;
  color: var(--ds-gray-600);
  font-weight: 500;
}

/* ── QUICK SPECS TABLE ─────────────────────────────────────────────── */
.doorstud-quick-specs {
  background: var(--ds-gray-100);
  padding: 1.25rem;
  margin: 0 0 1.75rem;
}
.doorstud-quick-specs-label {
  font-family: var(--ds-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ds-gray-400);
  margin-bottom: 1rem;
}
.doorstud-quick-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
}
.doorstud-spec-item { display: flex; flex-direction: column; gap: 0.1rem; }
.doorstud-spec-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-gray-400);
}
.doorstud-spec-value {
  font-family: var(--ds-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ds-black);
}

/* ── PRODUCT META (SKU / categories) — keep, but de-emphasize ─────── */
.woocommerce div.product .product_meta {
  font-size: 0.78rem;
  color: var(--ds-gray-400);
}
.woocommerce div.product .product_meta a { color: var(--ds-gray-600); }

/* ── TABS ──────────────────────────────────────────────────────────── */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  max-width: 1100px;
  margin: 3rem auto 0;
  padding: 0 2rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ds-gray-200);
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0 0 -2px;
  padding: 0;
  border: none;
  background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  font-family: var(--ds-font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-gray-400);
  padding: 0.75rem 1.5rem;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ds-black); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ds-black);
  border-bottom-color: var(--ds-yellow);
}
.woocommerce div.product .woocommerce-tabs .panel { padding: 0; }
.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--ds-font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* Additional information table (specs) */
.woocommerce div.product table.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  background: var(--ds-white);
}
.woocommerce div.product table.woocommerce-product-attributes tr { border-bottom: 1px solid var(--ds-gray-200); }
.woocommerce div.product table.woocommerce-product-attributes th {
  padding: 0.9rem 1.25rem;
  font-weight: 600;
  color: var(--ds-gray-600);
  width: 40%;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: left;
  background: none;
}
.woocommerce div.product table.woocommerce-product-attributes td {
  padding: 0.9rem 1.25rem;
  font-family: var(--ds-font-display);
  font-size: 1rem;
  font-weight: 700;
}
.woocommerce div.product table.woocommerce-product-attributes tr:nth-child(even) { background: var(--ds-gray-100); }

/* ── RELATED PRODUCTS ──────────────────────────────────────────────── */
.woocommerce .related.products {
  grid-column: 1 / -1;
  max-width: 1100px;
  margin: 4rem auto 0;
  padding: 3rem 2rem 0;
  border-top: 1px solid var(--ds-gray-200);
}
.woocommerce .related.products > h2 {
  font-family: var(--ds-font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

/* ── FINAL CTA SECTION ─────────────────────────────────────────────── */
.doorstud-cta-section {
  background: var(--ds-black);
  padding: 6rem 2rem;
  text-align: center;
  margin-top: 4rem;
}
.doorstud-cta-eyebrow {
  font-family: var(--ds-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-yellow);
  margin-bottom: 1rem;
}
.doorstud-cta-title {
  font-family: var(--ds-font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ds-white);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.doorstud-cta-sub { color: rgba(255,255,255,0.45); font-size: 1rem; margin-bottom: 2.5rem; }
.doorstud-cta-price-row { margin-bottom: 2rem; }
.doorstud-cta-price {
  font-family: var(--ds-font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--ds-white);
}
.doorstud-cta-price del { color: rgba(255,255,255,0.3); }
.doorstud-cta-price ins { text-decoration: none; color: var(--ds-yellow); }
.doorstud-cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.doorstud-btn-cta-primary {
  background: var(--ds-yellow);
  color: var(--ds-black);
  font-family: var(--ds-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.1rem 3rem;
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.1s;
}
.doorstud-btn-cta-primary:hover { background: var(--ds-yellow-dark); transform: translateY(-1px); color: var(--ds-black); }
.doorstud-btn-cta-ghost {
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-family: var(--ds-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.1rem 1.75rem;
  border: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s, color 0.2s;
}
.doorstud-btn-cta-ghost:hover { border-color: var(--ds-yellow); color: var(--ds-yellow); }

/* ── STICKY ADD-TO-CART BAR ────────────────────────────────────────── */
.doorstud-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(15,15,15,0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.9rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.doorstud-sticky-bar.visible { transform: translateY(0); }
.doorstud-sticky-bar-info { display: flex; align-items: baseline; gap: 1rem; }
.doorstud-sticky-bar-name {
  font-family: var(--ds-font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-white);
}
.doorstud-sticky-bar-price {
  font-family: var(--ds-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ds-yellow);
}
.doorstud-sticky-atc {
  background: var(--ds-yellow);
  color: var(--ds-black);
  font-family: var(--ds-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.doorstud-sticky-atc:hover { background: var(--ds-yellow-dark); }
@media (max-width: 900px) {
  .doorstud-sticky-bar-name { display: none; }
}