/* ==========================================================================
   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; }
}

/* ── DIVI-BUILDER PRODUCT PAGES ───────────────────────────────────────
   The Door Stud product is now built in the Divi Visual Builder — its
   WooCommerce modules (images / title / price / add-to-cart …) live inside
   a full-width Divi layout and Divi's own rows/columns handle the two-column
   split. The grid rules above were written for the STANDARD WooCommerce
   template; here they hit BOTH Divi wrappers that carry the `product` class:
     • div.et_pb_post.product          (the outer post wrapper)
     • div.et_builder_inner_content.product  (the inner content box)
   Making either a `grid-template-columns: 1fr 1fr` grid drops Divi's entire
   section into one 478px track, collapsing the summary into a narrow strip.
   So reset both Divi wrappers to plain blocks and let Divi lay out. These
   two classes are Divi-only, so standard-template products (the add-on kits)
   keep the grid above and are unaffected. */
.woocommerce div.product.et_pb_post,
.woocommerce div.product.et_builder_inner_content {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  max-width: none !important;
  margin: 0 0 2rem !important;
  padding: 0 !important;
}
/* The standard-template wrapper Divi leaves behind is empty on a builder
   page; keep it from taking a box. And undo the sticky/grid placement the
   rules above pin on the gallery/summary now that they're Divi-managed. */
.et-l--post > .clearfix,
.woocommerce div.product.et_pb_post > .clearfix {
  display: none !important;
}
.et-l--post div.images,
.et-l--post div.summary {
  grid-column: auto !important;
  position: static !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
}

/* ── DARK SUMMARY COLUMN: readable (light) text ──────────────────────────
   The product summary column has a dark gradient background set in the Visual
   Builder (#111 → #444), but WooCommerce/Divi render its text near-black —
   dark on dark, unreadable. Recolour the summary text light. Scoped with
   :has(.et_pb_wc_add_to_cart) so it only touches the summary column (that
   module lives nowhere else), leaving the light description/related sections
   below untouched. */
.et_pb_column:has(.et_pb_wc_add_to_cart) .product_title,
.et_pb_column:has(.et_pb_wc_add_to_cart) .et_pb_wc_title,
.et_pb_column:has(.et_pb_wc_add_to_cart) .et_pb_wc_title * {
  color: #ffffff !important;
}
.et_pb_column:has(.et_pb_wc_add_to_cart) .et_pb_wc_description,
.et_pb_column:has(.et_pb_wc_add_to_cart) .et_pb_wc_description *,
.et_pb_column:has(.et_pb_wc_add_to_cart) .woocommerce-variation-description,
.et_pb_column:has(.et_pb_wc_add_to_cart) .woocommerce-variation-description * {
  color: rgba(255, 255, 255, 0.82) !important;
}
.et_pb_column:has(.et_pb_wc_add_to_cart) .sku_wrapper,
.et_pb_column:has(.et_pb_wc_add_to_cart) .sku_wrapper *,
.et_pb_column:has(.et_pb_wc_add_to_cart) .product_meta,
.et_pb_column:has(.et_pb_wc_add_to_cart) .product_meta *,
.et_pb_column:has(.et_pb_wc_add_to_cart) .posted_in,
.et_pb_column:has(.et_pb_wc_add_to_cart) .posted_in * {
  color: rgba(255, 255, 255, 0.6) !important;
}
/* Price: sale price bright, struck original faded. */
.et_pb_column:has(.et_pb_wc_add_to_cart) .price,
.et_pb_column:has(.et_pb_wc_add_to_cart) .price .amount,
.et_pb_column:has(.et_pb_wc_add_to_cart) .price ins,
.et_pb_column:has(.et_pb_wc_add_to_cart) .price ins .amount,
.et_pb_column:has(.et_pb_wc_add_to_cart) .price ins bdi,
.et_pb_column:has(.et_pb_wc_add_to_cart) .price bdi {
  color: #ffffff !important;
}
.et_pb_column:has(.et_pb_wc_add_to_cart) .price del,
.et_pb_column:has(.et_pb_wc_add_to_cart) .price del .amount,
.et_pb_column:has(.et_pb_wc_add_to_cart) .price del bdi {
  color: rgba(255, 255, 255, 0.45) !important;
}
/* Stock line reads as the brand yellow on the dark card. */
.et_pb_column:has(.et_pb_wc_add_to_cart) .stock.in-stock {
  color: var(--ds-yellow) !important;
}

/* ── SINGLE-PRODUCT STORE: hide the "Type" variation dropdown ─────────────
   Door Stud is sold as one option (Pro). The product is technically a variable
   product with a single, default-selected variation, so the add-to-cart button
   is already enabled on load — hiding the dropdown row leaves it fully
   purchasable. (doorstud-woocommerce.js also force-selects it as a safety net.) */
.et_pb_column:has(.et_pb_wc_add_to_cart) table.variations,
.et_pb_column:has(.et_pb_wc_add_to_cart) .reset_variations {
  display: none !important;
}
/* The variation wrap keeps a large top margin meant to sit under the dropdown;
   reclaim it now that the dropdown is gone. */
.et_pb_column:has(.et_pb_wc_add_to_cart) .woocommerce-variation.single_variation {
  margin-bottom: 0.75rem;
}

.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; }
}