`assets/dw-pdp-restyle.css`

191 lines
/* ==========================================================================
   dw-pdp-restyle.css  (Designer Wallcoverings PDP restyle, 2026-06-22)
   Reference-design pass on the product page:
     - SIZE selector -> two pill buttons (progressive enhancement; the native
       <select.single-option-selector> stays in the DOM, visually hidden, so
       all variant / cart / cowlendar / MOQ JS keeps reading it).
     - REQUEST SAMPLE / SPEC SHEET / ADD TO CART -> three uniform rounded
       pills, laid out: [Request Sample] [Spec Sheet] on one row, Add to Cart
       below. Existing hrefs/handlers/classes untouched; restyle/relayout only.
   Scoped to .template-product so nothing leaks to other templates.
   ========================================================================== */

/* --- Token: keep pill radius/font consistent across size pills + CTAs ------ */
:root {
  --dw-pill-radius: 99px;
  --dw-pill-font: Lora, serif;
}

/* ==========================================================================
   1. SIZE PILLS
   ========================================================================== */

/* Hide the native size <select> but KEEP it operable for JS (.value/.dispatch).
   We only hide it once our pills have been built (data-dw-pilled="1"), so on a
   no-JS render the original dropdown is still usable. */
.template-product select.single-option-selector[data-dw-pilled="1"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.template-product .dw-size-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 18px;
}

.template-product .dw-size-pill {
  font-family: var(--dw-pill-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  cursor: pointer;
  padding: 14px 22px;
  min-height: 46px;
  border-radius: var(--dw-pill-radius);
  border: 1.5px solid #111;
  background: #fff;
  color: #111;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.template-product .dw-size-pill:hover {
  background: #f2f2f2;
}

.template-product .dw-size-pill.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}

.template-product .dw-size-pill.is-active:hover {
  background: #000;
}

.template-product .dw-size-pill.is-unavailable,
.template-product .dw-size-pill:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* When the size pills are present we don't need the legacy plain-text
   ".last_variant" echo of the option value cluttering the column. The
   theme JS still toggles it for the display_variant=="no" single-variant
   case; we only hide it once pills exist as a sibling. */
.template-product .dw-size-pills ~ .selector-wrapper .last_variant {
  /* leave theme behavior intact; no override needed */
}

/* ==========================================================================
   2. CTA PILL ROW  (Request Sample + Spec Sheet on a row, Add to Cart below)
   The existing buttons already share border-radius:99px + black fill from
   custom.css. Here we only normalize sizing and arrange them in the
   reference 2-up + full-width layout.
   ========================================================================== */

.template-product .product-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  max-width: 432px; /* ~ two 206px pills + gap */
}

/* Every primary CTA pill: uniform height / font / weight / radius / color */
.template-product .product-add-to-cart .dl-sample-btn,
.template-product .product-add-to-cart .dl-second-sample-btn,
.template-product .product-add-to-cart .add-to-cart,
.template-product .product-add-to-cart .shopify-payment-button__button {
  flex: 1 1 calc(50% - 6px);
  width: auto !important;          /* override fixed 206px so they share the row */
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border-radius: var(--dw-pill-radius) !important;
  font-family: var(--dw-pill-font);
  font-weight: 700;
  font-size: 12px !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-sizing: border-box;
}

/* Add to Cart spans the full width on its own row, beneath the 2-up pills. */
.template-product .product-add-to-cart .add-to-cart {
  flex: 1 1 100%;
}

/* Spec-sheet button has its own inline-block style block in its snippet; make
   sure it participates in the flex row like the other pills. */
.template-product .product-add-to-cart .spec-sheet-btn {
  display: inline-flex !important;
  vertical-align: top;
}

/* Keep the hidden/unavailable helpers behaving (they were display utilities). */
.template-product .product-add-to-cart .hidden {
  display: none !important;
}

/* Mobile: stack everything full-width but keep the pill look. */
@media screen and (max-width: 1024px) {
  .template-product .product-add-to-cart {
    max-width: none;
  }
  .template-product .product-add-to-cart .dl-sample-btn,
  .template-product .product-add-to-cart .dl-second-sample-btn,
  .template-product .product-add-to-cart .add-to-cart,
  .template-product .product-add-to-cart .shopify-payment-button__button {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: none !important;
  }
}

/* ── DW 2026-06-25: keep the printable Tear Sheet (.dw-spec-page) OUT of the
   on-screen PDP. It was rendering inline — a duplicate <h1> product title +
   the Purchasing-Agency address block. Off-screen (NOT display:none) so the
   "Download Tear Sheet"/PDF capture can still read it; restored for print. */
.dw-spec-page{position:absolute !important;left:-99999px !important;top:0 !important;width:794px !important;max-width:none !important;pointer-events:none !important;}
@media print{ .dw-spec-page{position:static !important;left:auto !important;width:auto !important;} }

/* ── v5.5.2 (2026-06-25): the black pills ARE the size control — hide the
   redundant native dropdown row robustly. Theme puts inline display:block on
   the <select>, so !important is required. Select stays in DOM (cart/variant
   JS still reads it); only visually removed. */
.template-product .product-options .select-wrapper{display:none !important;}
.template-product .product-options .last_variant{display:none !important;}
.template-product select.single-option-selector{display:none !important;}
.template-product .product-options > label.selected-text[for*="single-option"]{display:none !important;}
/* ── v5.6.0 LIGHT TIDY (2026-06-25): even vertical rhythm + equal-width,
   left-aligned action buttons in the PDP info column. No structural change. */
.template-product .dw-size-pills{margin:14px 0 16px !important;}
.template-product .product-add-to-cart{margin:0 0 10px !important;width:340px !important;max-width:100% !important;box-sizing:border-box !important;}
.template-product .block-buttonpdf{margin:0 0 18px !important;}
.template-product .block-buttonpdf .spec-sheet-btn.pdf-download-btn,
.template-product .spec-sheet-btn.pdf-download-btn{width:340px !important;max-width:100% !important;box-sizing:border-box !important;justify-content:center !important;}
.template-product .spec-sheet-controls{margin-top:14px !important;}

/* DW 2026-06-25: Download-PDF pill joins the size-pill row next to Sample; min L/R padding, aligned. */
.template-product .dw-size-pills{align-items:center;}
.template-product .dw-size-pill{padding-left:12px !important;padding-right:12px !important;}
.template-product .dw-size-pills .spec-sheet-controls{margin:0 !important;transform:none !important;}
.template-product .dw-size-pills .spec-sheet-btn.pdf-download-btn{width:auto !important;max-width:none !important;min-height:46px;padding:12px !important;border-radius:var(--dw-pill-radius) !important;background:#fff;color:#111;border:1.5px solid #111;font:700 12px/1.1 var(--dw-pill-font);letter-spacing:.02em;text-transform:uppercase;}