`assets/dw-product.css`

413 lines
/* DW Product Page — Larger fonts, clean layout */

.product-details-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.product-details {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Vendor — LARGE, prominent brand name */
/* Must use high-specificity selector to override custom.css [class*="vendor"] 11px !important */
.shopify-product-form a.product-vendor,
.product-details a.product-vendor,
a.product-vendor[href*="vendors"] {
  font-size: 56px !important;
  font-weight: 700 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  display: block !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
}

/* Title — product name below large vendor */
.shopify-product-form .product-title,
.product-title,
.product-title a,
h1.product-title {
  font-size: 22px !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0.2px !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #444 !important;
}

/* SKU — inline: "SKU: GRS-32003" on one line */
.product-sku-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  display: inline !important;
  margin: 0 !important;
}

.product-sku-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #333 !important;
  display: inline !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
}

/* Price — tight, single line */
.product__price {
  margin: 2px 0 !important;
  padding: 2px 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}

.product-price {
  margin: 0 !important;
}

.product-price::before {
  content: "PRICE: " !important;
  display: inline !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.product-price .product-price-minimum,
.product-price .money {
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #111 !important;
  display: inline !important;
}

.product-price .product-price-discount {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #059669 !important;
  display: inline-block !important;
  margin-left: 4px !important;
}

.product-price .product-price-minimum.original {
  text-decoration: line-through !important;
  color: #999 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ============================================================
   UNIFIED FIELD LAYOUT — All info fields same size, inline labels
   Parent .product-options is display:grid so children are grid items.
   Use 2-column grid: [label] [value] side by side per row.
   ============================================================ */

/* Override grid to 2-column layout: label | value */
.shopify-product-form .product-options {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 0px 8px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Labels — left column */
.shopify-product-form .product-options label,
.shopify-product-form .product-options label.product-option-column-1,
.shopify-product-form .product-options label.product-option-row-1,
.product-options label {
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* Label strong tag — match parent style */
.shopify-product-form .product-options label strong {
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* Values — right column */
.shopify-product-form .product-options .last_variant,
.shopify-product-form .product-options .select-wrapper,
.shopify-product-form .product-options .mm_quantity,
.shopify-product-form .product-options .selector-wrapper,
.product-options .selector-wrapper,
.product-options .variant-option-value,
.product-options .swatch__value {
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #333 !important;
}

/* Hidden inputs don't take grid space */
.shopify-product-form .product-options input[type="hidden"] {
  display: none !important;
}

/* Type display */
.product-form__type-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.product-form__type-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #333 !important;
}

/* Quantity selector */
.mm_quantity .input-text.qty,
.mm_quantity .qty,
.product-quantity-box input,
.quantity-selector input {
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  width: 48px !important;
  text-align: center !important;
}

/* Reduce padding on flex-pdp blocks */
.flex-pdp__block {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Tighter product info section */
.product-info__wrapper,
.product-details__inner {
  padding: 4px 16px !important;
  gap: 0 !important;
}

/* ============================================================
   COMPACT FIELD SPACING — SKU, Price, Size, Qty all tight
   Zero vertical gaps between info rows
   ============================================================ */

/* Kill all margins/padding between the info fields */
.shopify-product-form .product-sku,
.shopify-product-form .product__price,
.shopify-product-form .product-options,
.shopify-product-form .product-form--atc,
.shopify-product-form .flex-pdp__block,
.product-sku,
.product__price {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Line height on all info fields — single line, tight */
.product-sku-label,
.product-sku-value,
.product-price,
.product-price .money,
.product-price::before,
.product-options label,
.product-options label strong,
.product-form__type-label,
.product-form__type-value {
  line-height: 1.6 !important;
}

/* Remove any separator borders between fields */
.product-sku + .product__price,
.product__price + .product-options {
  border-top: none !important;
}

/* ============================================================
   FONT UNIFICATION — Body description, specs, tags
   Match the same sans-serif as title/vendor/price panel
   ============================================================ */

/* Body HTML description area (Pattern Description, bullet list) */
.product-description.rte,
.product-description.rte p,
.product-description.rte li,
.product-description.rte h2,
.product-description.rte h3,
.product-description.rte h4,
.product-description.rte span,
.product-description.rte strong,
.product-description.rte em,
.product-description.rte a,
.product-content__desktop,
.product-content__desktop p,
.product-content__desktop li,
.product-content__desktop h2,
.product-content__desktop h3,
.product-content__desktop h4,
.product-content__desktop span,
.product-content__desktop strong,
.product-content__desktop a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Upper specs table (inside body_html) */
.product-specs,
.product-specs table,
.product-specs td,
.product-specs th,
.product-specs strong,
.specs-table,
.specs-table td,
.specs-table th,
.specs-table strong,
table.specs-table td,
table.specs-table th {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Lower Specifications section */
.shopify-pc__banner__body,
.shopify-pc__banner__body h2,
.shopify-pc__banner__body h4,
.shopify-pc__banner__body p,
.shopify-pc__banner__body li,
.shopify-pc__banner__body table,
.shopify-pc__banner__body td,
.shopify-pc__banner__body strong {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Keywords / Tags section */
.keywords-desktop,
.keywords-desktop h3,
.keywords-desktop h4,
.keywords-desktop a,
.keywords-desktop span {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Mobile description */
.product-content__mobile,
.product-content__mobile p,
.product-content__mobile li,
.product-content__mobile h2,
.product-content__mobile h3,
.product-content__mobile h4,
.product-content__mobile a,
.product-content__mobile span,
.product-content__mobile strong {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Send us a message form on product page */
.product-contact-form h3,
.product-contact-form label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
/* Breadcrumb font — match product page system font */
.breadcrumbs,.breadcrumbs a,.breadcrumbs span,.breadcrumbs .divider{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important;font-size:13px!important;font-weight:400!important;color:#888!important;letter-spacing:.02em!important;text-decoration:none!important}.breadcrumbs a:hover{color:#444!important}

/* ============================================================
   SPECIFICATIONS — Collapsed by default, tighter padding
   ============================================================ */

/* Specs section — collapsed by default */
.product-specs table,
.product-specs tbody,
.specs-table tbody {
  max-height: 120px !important;
  overflow: hidden !important;
  display: block !important;
  transition: max-height 0.3s ease !important;
}

.product-specs.expanded table,
.product-specs.expanded tbody,
.specs-table.expanded tbody {
  max-height: 2000px !important;
}

/* Specs table — tighter padding */
.product-specs td,
.product-specs th,
.specs-table td,
.specs-table th,
table.specs-table td {
  padding: 3px 8px !important;
  font-size: 13px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1.4 !important;
}

.product-specs td:first-child,
.specs-table td:first-child {
  font-weight: 600 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  padding-right: 12px !important;
}

.product-specs td:last-child,
.specs-table td:last-child {
  font-weight: 500 !important;
  color: #333 !important;
}

/* Specifications heading */
.product-specs h3,
.product-specs-title,
[class*="spec"] h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #888 !important;
  cursor: pointer !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ============================================================
   COLOR DOTS SPACE — Shrink image to make room for dots on left
   ============================================================ */
.product-images,
.product-gallery {
  padding-left: 55px !important;
  position: relative !important;
  overflow: visible !important;
}

.product-gallery--viewport,
.product-gallery--viewport--figure {
  overflow: visible !important;
}