/* ================================================================
   PCSUIT — PRODUCT DETAIL PAGE REDESIGN (Light Professional)
   Part 4 of the 2026 redesign series.
   Scope: body#product only.
   Aesthetic: Clean, professional, Apple Store / BestBuy inspired.
   Fonts: Poppins (body), JetBrains Mono (technical), Saira Condensed (accent)
   ================================================================ */

/* === LOCAL DESIGN TOKENS === */
html body#product {
  --pdp-bg: #F7FAFC;
  --pdp-surface: #FFFFFF;
  --pdp-surface-alt: #F0F4F7;
  --pdp-accent: #002544;
  --pdp-accent-hover: #005CA9;
  --pdp-accent-soft: rgba(0, 37, 68, 0.06);
  --pdp-navy: #002544;
  --pdp-navy-soft: rgba(0, 37, 68, 0.06);
  --pdp-text: #1A1F2E;
  --pdp-text-muted: #5C6478;
  --pdp-text-subtle: #8E95A5;
  --pdp-border: #E2E6EC;
  --pdp-border-strong: #C8CED8;
  --pdp-shadow-sm: 0 1px 3px rgba(0, 37, 68, 0.06);
  --pdp-shadow-md: 0 4px 16px rgba(0, 37, 68, 0.08);
  --pdp-shadow-lg: 0 8px 32px rgba(0, 37, 68, 0.10);
  --pdp-radius: 10px;
  --pdp-radius-sm: 6px;
  --pdp-ease: cubic-bezier(0.25, 1, 0.5, 1);
}


/* ================================================================
   1. PAGE FOUNDATION
   ================================================================ */

html body#product {
  background: var(--pdp-bg) !important;
  overflow-x: hidden !important;
}

html body#product #wrapper {
  background: transparent !important;
  overflow-x: hidden !important;
}

html body#product #content-wrapper {
  background: transparent !important;
  padding-top: 0 !important;
  overflow: hidden !important;
}

html body#product section#main {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  overflow: visible !important;
}


/* ================================================================
   2. BREADCRUMB BANNER — compact, product-page-specific
   ================================================================ */

html body#product .dor-breadcrumb {
  background: var(--pdp-navy) !important;
  padding: 14px 0 !important;
  min-height: auto !important;
  height: auto !important;
  overflow: hidden !important;
}

html body#product .dor-breadcrumb h1,
html body#product .dor-breadcrumb #title-page-show,
html body#product .dor-breadcrumb .title-page-show {
  display: none !important;
}

html body#product .dor-breadcrumb .breadcrumb-inner,
html body#product .dor-breadcrumb nav {
  padding: 0 24px !important;
}

html body#product .dor-breadcrumb .breadcrumb-inner ol,
html body#product .dor-breadcrumb .breadcrumb-inner ul {
  margin: 0 !important;
  padding: 0 !important;
}

html body#product .dor-breadcrumb a,
html body#product .dor-breadcrumb span,
html body#product .dor-breadcrumb li {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,0.65) !important;
}

html body#product .dor-breadcrumb a:hover {
  color: #FFFFFF !important;
}

html body#product .dor-breadcrumb li:last-child,
html body#product .dor-breadcrumb li:last-child span,
html body#product .dor-breadcrumb li.active {
  color: rgba(255,255,255,0.4) !important;
}


/* ================================================================
   3. MAIN PRODUCT ROW — .headPROD
   ================================================================ */

html body#product .headPROD {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin: 28px 0 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html body#product .headPROD > .col-md-6:first-child {
  flex: 0 0 55% !important;
  max-width: 55% !important;
  padding-right: 20px !important;
}

html body#product .headPROD > .col-md-6:last-child {
  flex: 0 0 45% !important;
  max-width: 45% !important;
  padding-left: 20px !important;
}


/* ================================================================
   4. PRODUCT IMAGES — Left column
   ================================================================ */

html body#product .page-content#content {
  background: var(--pdp-surface) !important;
  border-radius: var(--pdp-radius) !important;
  box-shadow: var(--pdp-shadow-sm) !important;
  border: 1px solid var(--pdp-border) !important;
  padding: 24px !important;
  position: sticky !important;
  top: 100px !important;
  z-index: 5 !important;
}

html body#product .images-container {
  background: transparent !important;
}

html body#product .product-cover {
  border: none !important;
  background: var(--pdp-surface) !important;
  border-radius: var(--pdp-radius-sm) !important;
  overflow: hidden !important;
}

html body#product .product-cover img {
  border-radius: var(--pdp-radius-sm) !important;
  transition: transform 0.4s var(--pdp-ease) !important;
}

html body#product .product-cover:hover img {
  transform: scale(1.03) !important;
}

html body#product .product-cover .layer {
  background: rgba(0, 37, 68, 0.04) !important;
}

/* Thumbnails */
html body#product .js-qv-mask.mask {
  padding-right: 12px !important;
}

html body#product .thumb-container .thumb {
  border-radius: var(--pdp-radius-sm) !important;
  border: 2px solid var(--pdp-border) !important;
  transition: border-color 0.25s ease !important;
  cursor: pointer !important;
}

html body#product .thumb-container .thumb:hover,
html body#product .thumb-container .thumb.selected {
  border-color: var(--pdp-accent) !important;
}

/* Search/zoom icon on cover */
html body#product .cover-show {
  color: var(--pdp-text-subtle) !important;
  font-size: 24px !important;
}


/* ================================================================
   5. PRODUCT NAME
   ================================================================ */

html body#product .h1.product-name-detail {
  font-family: 'Poppins', sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--pdp-text) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}


/* ================================================================
   6. PRICE
   ================================================================ */

html body#product .product-prices {
  margin: 0 0 20px !important;
  padding: 0 0 20px !important;
  border-bottom: 1px solid var(--pdp-border) !important;
}

html body#product .product-prices .price-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

html body#product .product-prices .current-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}

html body#product .product-prices .current-price > span,
html body#product .product-prices .current-price span[itemprop="price"],
html body#product .product-price.h5 .current-price span {
  font-family: 'Poppins', sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  color: var(--pdp-navy) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

html body#product .product-prices .tax-shipping-delivery-label,
html body#product .product-prices .product-without-taxes {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  color: var(--pdp-text-muted) !important;
  margin: 0 !important;
}

/* Old / regular price (when discounted) */
html body#product .product-discount .regular-price {
  font-size: 18px !important;
  color: var(--pdp-text-subtle) !important;
  text-decoration: line-through !important;
}

/* Discount badge */
html body#product .product-price .discount {
  display: inline-flex !important;
  align-items: center !important;
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.02em !important;
}

/* Availability */
html body#product #product-availability {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  color: var(--pdp-accent) !important;
  margin-top: 4px !important;
}

html body#product #product-availability i {
  font-size: 14px !important;
  vertical-align: middle !important;
}


/* ================================================================
   7. PRODUCT DESCRIPTION SHORT
   ================================================================ */

html body#product [id^="product-description-short"] {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--pdp-text-muted) !important;
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--pdp-border) !important;
}


/* ================================================================
   8. ADD TO CART / CTA AREA
   ================================================================ */

html body#product .product-actions {
  margin: 0 !important;
  padding: 0 !important;
}

html body#product .product-quantity {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

/* Quantity input */
html body#product .product-quantity .qty {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--pdp-border) !important;
  border-radius: var(--pdp-radius-sm) !important;
  background: var(--pdp-surface) !important;
  overflow: hidden !important;
}

html body#product .product-quantity .qty input#quantity_wanted {
  width: 48px !important;
  text-align: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--pdp-text) !important;
  border: none !important;
  background: transparent !important;
  padding: 10px 4px !important;
  -moz-appearance: textfield !important;
}

html body#product .product-quantity .qty input::-webkit-outer-spin-button,
html body#product .product-quantity .qty input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

html body#product .product-quantity .qty .bootstrap-touchspin-down,
html body#product .product-quantity .qty .bootstrap-touchspin-up,
html body#product .product-quantity .qty .btn-touchspin {
  background: var(--pdp-surface-alt) !important;
  color: var(--pdp-text) !important;
  border: none !important;
  border-radius: 0 !important;
  width: 36px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

html body#product .product-quantity .qty .bootstrap-touchspin-down:hover,
html body#product .product-quantity .qty .bootstrap-touchspin-up:hover,
html body#product .product-quantity .qty .btn-touchspin:hover {
  background: var(--pdp-border) !important;
}

/* CTA Button */
html body#product .product-quantity .add {
  flex: 1 !important;
}

html body#product .add-to-cart,
html body#product .btn.btn-primary.add-to-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  height: 52px !important;
  background: var(--pdp-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--pdp-radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: background 0.25s ease, transform 0.25s var(--pdp-ease), box-shadow 0.25s ease !important;
  box-shadow: 0 2px 8px rgba(0, 37, 68, 0.25) !important;
}

html body#product .add-to-cart:hover,
html body#product .btn.btn-primary.add-to-cart:hover {
  background: var(--pdp-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0, 92, 169, 0.35) !important;
}

html body#product .add-to-cart:active {
  transform: translateY(0) !important;
}

html body#product .add-to-cart i,
html body#product .add-to-cart .material-icons {
  font-size: 20px !important;
}


/* ================================================================
   9. TRUST SIGNALS — CSS-only via pseudo-elements
   ================================================================ */

html body#product .product-actions form#add-to-cart-or-refresh {
  position: relative !important;
}

html body#product .product-actions form#add-to-cart-or-refresh::after {
  content: none !important;
  display: none !important;
  margin-top: 16px !important;
  padding: 14px 16px !important;
  background: var(--pdp-accent-soft) !important;
  border: 1px solid rgba(0, 37, 68, 0.12) !important;
  border-radius: var(--pdp-radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--pdp-accent) !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
  line-height: 1.6 !important;
}


/* ================================================================
   10. WISHLIST, COMPARE — fix absolute positioning overlap
   ================================================================ */

html body#product .product-actions .dor-wishlist,
html body#product .product-actions .compare-product-button {
  position: static !important;
  float: none !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

html body#product .product-add-to-cart {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

html body#product .product-quantity {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body#product .product-actions .dor-wishlist a,
html body#product .product-actions .compare-product-button a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid var(--pdp-border) !important;
  background: var(--pdp-surface) !important;
  color: var(--pdp-text-muted) !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
  font-size: 0 !important;
}

html body#product .product-actions .dor-wishlist a i,
html body#product .product-actions .compare-product-button a i,
html body#product .product-actions .dor-wishlist a .material-icons,
html body#product .product-actions .compare-product-button a .material-icons {
  font-size: 18px !important;
}

html body#product .product-actions .dor-wishlist a span:not(.material-icons):not([class*="icon"]),
html body#product .product-actions .compare-product-button a span:not(.material-icons):not([class*="icon"]) {
  display: none !important;
}

html body#product .product-actions .dor-wishlist a:hover,
html body#product .product-actions .compare-product-button a:hover {
  border-color: var(--pdp-accent) !important;
  color: var(--pdp-accent) !important;
}

html body#product .button-share-social {
  display: none !important;
}

html body#product .button-share-social a.share {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 14px !important;
  opacity: 0.4 !important;
  transition: opacity 0.2s ease !important;
  background: var(--pdp-surface-alt) !important;
  color: var(--pdp-text-muted) !important;
  border-radius: 50% !important;
}

html body#product .button-share-social a.share:hover {
  opacity: 1 !important;
}


/* ================================================================
   11. REASSURANCE BLOCK
   ================================================================ */

html body#product #block-reassurance {
  margin: 32px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

html body#product #block-reassurance ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 0 !important;
  list-style: none !important;
}

html body#product #block-reassurance li {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 18px !important;
  background: var(--pdp-surface) !important;
  border: 1px solid var(--pdp-border) !important;
  border-radius: var(--pdp-radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  color: var(--pdp-text-muted) !important;
}

html body#product #block-reassurance li img,
html body#product #block-reassurance li svg {
  width: 24px !important;
  height: 24px !important;
  opacity: 0.6 !important;
}


/* ================================================================
   12. TABS SECTION — #tabInfoproduct
   ================================================================ */

html body#product #tabInfoproduct.tabs {
  padding: 32px 0 0 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  margin-top: 32px !important;
}

html body#product #tabInfoproduct .nav.nav-tabs {
  background: transparent !important;
  margin: 0 !important;
  border-bottom: 2px solid var(--pdp-border) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  gap: 0 !important;
}

html body#product #tabInfoproduct .nav-tabs .nav-item {
  margin-bottom: -2px !important;
}

html body#product #tabInfoproduct .nav-tabs .nav-link {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pdp-text-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 14px 20px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

html body#product #tabInfoproduct .nav-tabs .nav-link:hover {
  color: var(--pdp-text) !important;
}

html body#product #tabInfoproduct .nav-tabs .nav-link.active {
  color: var(--pdp-accent) !important;
  border-bottom-color: var(--pdp-accent) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

html body#product #tabInfoproduct .tab-content {
  padding: 28px 0 !important;
  background: transparent !important;
}


/* ================================================================
   13. PRODUCT DETAILS (inside tab)
   ================================================================ */

html body#product #product-details {
  font-family: 'Poppins', sans-serif !important;
}

html body#product #product-details .product-manufacturer,
html body#product #product-details .product-reference {
  font-size: 14px !important;
  color: var(--pdp-text-muted) !important;
  margin-bottom: 12px !important;
}

html body#product #product-details .product-manufacturer .label,
html body#product #product-details .product-reference .label {
  font-weight: 600 !important;
  color: var(--pdp-text) !important;
  margin-right: 8px !important;
}

html body#product #product-details .product-manufacturer a {
  color: var(--pdp-accent) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

/* Data sheet / Features table */
html body#product .product-features {
  margin-top: 24px !important;
}

html body#product .product-features h3,
html body#product .product-features .h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--pdp-text) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--pdp-border) !important;
}

html body#product .product-features dl.data-sheet {
  margin: 0 !important;
  border: 1px solid var(--pdp-border) !important;
  border-radius: var(--pdp-radius-sm) !important;
  overflow: hidden !important;
}

html body#product .product-features dl.data-sheet dt,
html body#product .product-features dl.data-sheet dd {
  padding: 12px 18px !important;
  margin: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid var(--pdp-border) !important;
}

html body#product .product-features dl.data-sheet dt {
  font-weight: 500 !important;
  color: var(--pdp-text-muted) !important;
  background: var(--pdp-surface-alt) !important;
  width: 220px !important;
  text-transform: none !important;
}

html body#product .product-features dl.data-sheet dd {
  font-weight: 500 !important;
  color: var(--pdp-text) !important;
  background: var(--pdp-surface) !important;
}

html body#product .product-features dl.data-sheet dt:last-of-type,
html body#product .product-features dl.data-sheet dd:last-of-type {
  border-bottom: none !important;
}

/* Condition section */
html body#product #product-details .product-condition {
  margin-top: 16px !important;
}

html body#product #product-details .product-condition .label {
  font-weight: 600 !important;
}


/* ================================================================
   14. PRODUCT DESCRIPTION TAB
   ================================================================ */

html body#product #description .product-description {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--pdp-text) !important;
  max-width: 800px !important;
}

html body#product #description .product-description h2,
html body#product #description .product-description h3 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  color: var(--pdp-text) !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
}

html body#product #description .product-description ul,
html body#product #description .product-description ol {
  padding-left: 20px !important;
}

html body#product #description .product-description li {
  margin-bottom: 6px !important;
}


/* ================================================================
   15. PRODUCT FLAGS (badges: new, discount, on-sale)
   ================================================================ */

html body#product .product-flags {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

html body#product .product-flag {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}

html body#product .product-flag.discount {
  background: #FFF3E0 !important;
  color: #E65100 !important;
}

html body#product .product-flag.new {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
}

html body#product .product-flag.on-sale {
  background: #FCE4EC !important;
  color: #C62828 !important;
}


/* ================================================================
   16. PRODUCT ACCESSORIES (cross-sell)
   ================================================================ */

html body#product .product-accessories {
  margin-top: 40px !important;
  padding: 32px 0 0 0 !important;
  box-shadow: none !important;
  border-top: 1px solid var(--pdp-border) !important;
}

html body#product .product-accessories .products-section-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--pdp-text) !important;
  margin-bottom: 24px !important;
}


/* ================================================================
   17. STICKY CTA BAR — CSS
   ================================================================ */

.pcs-sticky-cta {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 998 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  border-bottom: 1px solid rgba(0, 37, 68, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 37, 68, 0.08) !important;
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;
  pointer-events: none !important;
  top: 77px !important;
}

.pcs-sticky-cta--visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.pcs-sticky-cta__inner {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 10px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.pcs-sticky-cta__name {
  flex: 1 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1A1F2E !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

.pcs-sticky-cta__price {
  font-family: 'Poppins', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #002544 !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

.pcs-sticky-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 24px !important;
  background: #002544 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.2s ease !important;
}

.pcs-sticky-cta__btn:hover {
  background: #005CA9 !important;
}


/* ================================================================
   18. RESPONSIVE — Tablet
   ================================================================ */

@media (max-width: 991px) {
  html body#product .headPROD > .col-md-6:first-child,
  html body#product .headPROD > .col-md-6:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body#product .page-content#content {
    position: relative !important;
    top: auto !important;
    margin-bottom: 24px !important;
  }

  html body#product .h1.product-name-detail {
    font-size: 20px !important;
    margin-top: 24px !important;
  }
}


/* ================================================================
   19. RESPONSIVE — Mobile
   ================================================================ */

@media (max-width: 767px) {
  html body#product section#main {
    padding: 0 12px !important;
  }

  html body#product .headPROD {
    margin-top: 8px !important;
  }

  /* Compact breadcrumb on mobile */
  html body#product .dor-breadcrumb {
    padding: 6px 0 !important;
  }

  html body#product .page-content#content {
    padding: 8px !important;
    border-radius: var(--pdp-radius-sm) !important;
  }

  /* Hide accent line on mobile to save space */
  html body#product .headPROD > .col-md-6:last-child::before {
    display: none !important;
  }

  /* Tighter product name */
  html body#product .h1.product-name-detail {
    font-size: 17px !important;
    margin-top: 8px !important;
    margin-bottom: 2px !important;
    line-height: 1.25 !important;
  }

  /* Compact price */
  html body#product .product-prices {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
  }

  html body#product .product-prices .current-price > span,
  html body#product .product-prices .current-price span[itemprop="price"],
  html body#product .product-price.h5 .current-price span {
    font-size: 24px !important;
  }

  /* Remove empty gaps in product-info */
  html body#product .product-information > div:empty,
  html body#product [id^="product-description-short"] {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    min-height: 0 !important;
  }

  html body#product .product-add-to-cart {
    padding-top: 0 !important;
  }

  /* Quantity + CTA: full width, stacked */
  html body#product .product-quantity {
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body#product .product-quantity .qty {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
  }

  html body#product .product-quantity .qty input#quantity_wanted {
    flex: 1 !important;
  }

  html body#product .product-quantity .add {
    width: 100% !important;
    max-width: none !important;
  }

  html body#product .add-to-cart,
  html body#product .btn.btn-primary.add-to-cart {
    height: 48px !important;
    font-size: 14px !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Make product-actions form full width */
  html body#product .product-actions,
  html body#product .product-actions form#add-to-cart-or-refresh {
    width: 100% !important;
    max-width: none !important;
  }

  /* Trust signals compact on mobile */
  html body#product .product-actions form#add-to-cart-or-refresh::after {
    font-size: 10px !important;
    padding: 8px 10px !important;
    margin-top: 10px !important;
    line-height: 1.5 !important;
  }

  /* Hide social sharing on mobile to save space */
  html body#product .button-share-social {
    display: none !important;
  }

  /* Compact tabs */
  html body#product #tabInfoproduct.tabs {
    padding-top: 20px !important;
    margin-top: 16px !important;
  }

  html body#product #tabInfoproduct .nav-tabs .nav-link {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }

  html body#product .product-features dl.data-sheet dt {
    width: 120px !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  html body#product .product-features dl.data-sheet dd {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  /* Mobile sticky CTA — bottom bar */
  .pcs-sticky-cta {
    top: auto !important;
    bottom: 0 !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(0, 37, 68, 0.08) !important;
    transform: translateY(100%) !important;
    box-shadow: 0 -2px 12px rgba(0, 37, 68, 0.08) !important;
  }

  .pcs-sticky-cta--visible {
    transform: translateY(0) !important;
  }

  .pcs-sticky-cta__inner {
    padding: 10px 16px !important;
    gap: 12px !important;
  }

  .pcs-sticky-cta__name {
    display: none !important;
  }

  .pcs-sticky-cta__price {
    font-size: 18px !important;
  }

  .pcs-sticky-cta__btn {
    flex: 1 !important;
    height: 42px !important;
  }

  /* Padding for sticky bar */
  html body#product #footer {
    padding-bottom: 64px !important;
  }
}


/* ================================================================
   20. MISC CLEANUP
   ================================================================ */

/* Remove excessive spacing */
html body#product .product-information {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide broken/empty elements gracefully */
html body#product .product-more-opt.nascondi {
  display: none !important;
}

html body#product .product-variants.nascondi {
  display: none !important;
}

/* Product page modal - clean up */
html body#product #product-modal .modal-content {
  border-radius: var(--pdp-radius) !important;
  border: none !important;
  box-shadow: var(--pdp-shadow-lg) !important;
}

/* Fix double H1 SEO issue — hide breadcrumb H1 visually but keep for a11y */
html body#product .dor-breadcrumb h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Brand reference line above product name */
html body#product .headPROD > .col-md-6:last-child::before {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 3px !important;
  background: var(--pdp-accent) !important;
  border-radius: 2px !important;
  margin-bottom: 16px !important;
  margin-top: 8px !important;
}


/* ================================================================
   21. TAB CONTENT POLISH — Cards, accent bars, refined typography
   ================================================================ */

html body#product #tabInfoproduct .tab-content {
  background: var(--pdp-surface) !important;
  border-radius: 0 0 var(--pdp-radius) var(--pdp-radius) !important;
  border: 1px solid var(--pdp-border) !important;
  border-top: none !important;
  box-shadow: var(--pdp-shadow-sm) !important;
  padding: 32px 36px !important;
  margin-top: 0 !important;
}

html body#product #tabInfoproduct .nav.nav-tabs {
  background: var(--pdp-surface) !important;
  margin: 0 !important;
  border-radius: var(--pdp-radius) var(--pdp-radius) 0 0 !important;
  border: 1px solid var(--pdp-border) !important;
  border-bottom: 2px solid var(--pdp-border) !important;
  padding: 0 12px !important;
}

/* Active tab: navy bottom border */
html body#product #tabInfoproduct .nav-tabs .nav-link.active {
  color: var(--pdp-navy) !important;
  border-bottom: 2px solid var(--pdp-navy) !important;
  font-weight: 700 !important;
}

html body#product #tabInfoproduct .nav-tabs .nav-link:hover {
  color: var(--pdp-navy) !important;
  background: var(--pdp-accent-soft) !important;
  border-radius: 6px 6px 0 0 !important;
}

/* Description h3: left accent bar */
html body#product #description .product-description h3 {
  position: relative !important;
  padding-left: 16px !important;
  margin-top: 32px !important;
  margin-bottom: 10px !important;
  font-size: 18px !important;
}

html body#product #description .product-description h3::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 3px !important;
  height: calc(100% - 4px) !important;
  background: var(--pdp-navy) !important;
  border-radius: 2px !important;
}

html body#product #description .product-description h3:first-child {
  margin-top: 0 !important;
}

/* Description paragraphs */
html body#product #description .product-description p {
  color: var(--pdp-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-bottom: 8px !important;
}

/* Bullet list: custom navy dots */
html body#product #description .product-description ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 12px 0 !important;
}

html body#product #description .product-description ul li {
  position: relative !important;
  padding-left: 20px !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pdp-text) !important;
  line-height: 1.5 !important;
}

html body#product #description .product-description ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--pdp-navy) !important;
  border-radius: 50% !important;
}

/* Brand/Reference in details tab — card style */
html body#product #product-details .product-manufacturer,
html body#product #product-details .product-reference {
  display: inline-block !important;
  padding: 8px 16px !important;
  background: var(--pdp-accent-soft) !important;
  border-radius: var(--pdp-radius-sm) !important;
  margin-bottom: 12px !important;
  margin-right: 10px !important;
}

/* Condition label as a badge */
html body#product #product-details .product-condition span:last-child {
  display: inline-block !important;
  padding: 4px 12px !important;
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* Hide orphaned search widget rendered directly under body */
html body#product > #search_widget,
html body#product > .jolisearch-widget {
  display: none !important;
}


/* 22. PRODUCT ACCESSORIES */
html body#product .product-accessories {
  margin-top: 40px !important;
  padding: 36px !important;
  background: var(--pdp-surface) !important;
  border: 1px solid var(--pdp-border) !important;
  border-radius: var(--pdp-radius) !important;
  box-shadow: var(--pdp-shadow-sm) !important;
}
html body#product .product-accessories h3,
html body#product .product-accessories .h5 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--pdp-navy) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 24px !important;
  padding-left: 16px !important;
  position: relative !important;
}
html body#product .product-accessories h3::before,
html body#product .product-accessories .h5::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  width: 3px !important;
  height: calc(100% - 6px) !important;
  background: var(--pdp-navy) !important;
  border-radius: 2px !important;
}
html body#product .product-accessories .products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body#product .product-accessories .product-miniature {
  border: 1px solid var(--pdp-border) !important;
  float: none !important;
  width: 100% !important;
  border-radius: var(--pdp-radius-sm) !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  background: var(--pdp-surface) !important;
}
html body#product .product-accessories .product-miniature:hover {
  box-shadow: var(--pdp-shadow-md) !important;
}
html body#product .product-accessories .product-miniature .product-title-item,
html body#product .product-accessories .product-miniature h5 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pdp-text) !important;
  line-height: 1.35 !important;
}
html body#product .product-accessories .product-miniature .price {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: var(--pdp-navy) !important;
}
@media (max-width: 991px) {
  html body#product .product-accessories .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 575px) {
  html body#product .product-accessories {
    padding: 20px !important;
  }
  html body#product .product-accessories .products {
    grid-template-columns: 1fr !important;
  }
  html body#product .product-accessories h3,
  html body#product .product-accessories .h5 {
    font-size: 17px !important;
  }
}

/* Fix accessory card image height */
html body#product .product-accessories .product-miniature .left-block,
html body#product .product-accessories .product-miniature .product-thumbnail {
  max-height: 180px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--pdp-surface-alt) !important;
}
html body#product .product-accessories .product-miniature .left-block img,
html body#product .product-accessories .product-miniature .product-thumbnail img {
  max-height: 160px !important;
  width: auto !important;
  object-fit: contain !important;
}
html body#product .product-accessories .product-miniature .right-block {
  padding: 14px !important;
}
html body#product .product-accessories .product-miniature .product-more-options {
  padding: 8px 14px 14px !important;
}

/* Neutralize Dorado transition:all cascade inside accessories */
html body#product .product-accessories .product-miniature * {
  transition: none !important;
}
html body#product .product-accessories .product-miniature .cart-button,
html body#product .product-accessories .product-miniature .product-name,
html body#product .product-accessories .product-miniature .product-thumbnail img {
  transition: color 0.2s ease, background 0.2s ease, transform 0.3s ease !important;
}

/* Fix add-to-cart button position in accessories cards */
html body#product .product-accessories .dor-addcart-button {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Fix option-quick-add: remove shadow + hover bg/shadow */
html body#product .product-accessories .option-quick-add {
  box-shadow: none !important;
  background: transparent !important;
}
html body#product .product-accessories .product-more-options > div:hover,
html body#product .product-accessories .product-more-options a:not(.cart-button):not(.btn-configure):hover,
html body#product .product-accessories .option-quick-add:hover,
html body#product .product-accessories .option-quick-add > div:hover,
html body#product .product-accessories .option-quick-add a:hover {
  box-shadow: none !important;
  background: transparent !important;
}


/* ================================================================
   30. CATEGORY LISTING PAGE — body#category
   Same Light Professional tokens as PDP.
   ================================================================ */

html body#category {
  --pdp-bg: #F7FAFC;
  --pdp-surface: #FFFFFF;
  --pdp-surface-alt: #F0F4F7;
  --pdp-accent: #002544;
  --pdp-accent-hover: #005CA9;
  --pdp-navy: #002544;
  --pdp-text: #1A1F2E;
  --pdp-text-muted: #5C6478;
  --pdp-border: #E2E6EC;
  --pdp-shadow-sm: 0 1px 3px rgba(0, 37, 68, 0.06);
  --pdp-shadow-md: 0 4px 16px rgba(0, 37, 68, 0.08);
  --pdp-radius: 10px;
  --pdp-radius-sm: 6px;
  background: var(--pdp-bg) !important;
}

html body#category #wrapper {
  background: transparent !important;
}

/* 31. Breadcrumb — compact */
html body#category .dor-breadcrumb {
  background: var(--pdp-navy) !important;
  padding: 14px 0 !important;
  min-height: auto !important;
  height: auto !important;
  overflow: hidden !important;
}
html body#category .dor-breadcrumb h1 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin: 4px 0 0 !important;
}
html body#category .dor-breadcrumb a,
html body#category .dor-breadcrumb span,
html body#category .dor-breadcrumb li {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* 32. Sidebar */
html body#category #left-column {
  padding-right: 24px !important;
}

html body#category #left-column > div,
html body#category #left-column > section {
  background: var(--pdp-surface) !important;
  border: 1px solid var(--pdp-border) !important;
  border-radius: var(--pdp-radius-sm) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--pdp-shadow-sm) !important;
}

html body#category #left-column .block-title,
html body#category #left-column .af-subtitle,
html body#category #left-column h4,
html body#category #left-column .title_block {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pdp-navy) !important;
  text-transform: none !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--pdp-border) !important;
}

html body#category #left-column label,
html body#category #left-column .af-name {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  color: var(--pdp-text-muted) !important;
}

/* Hide duplicate sidebar product tabs */
html body#category #dor-tabsidebar-product-category ~ #dor-tabsidebar-product-category {
  display: none !important;
}

/* 33. Sort bar */
html body#category .products-selection {
  background: var(--pdp-surface) !important;
  border: 1px solid var(--pdp-border) !important;
  border-radius: var(--pdp-radius-sm) !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--pdp-shadow-sm) !important;
}

html body#category .products-selection label,
html body#category .products-selection .sort-by-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  color: var(--pdp-text-muted) !important;
}

html body#category .products-selection select {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  border: 1px solid var(--pdp-border) !important;
  border-radius: var(--pdp-radius-sm) !important;
  padding: 6px 10px !important;
}

/* 34. Product grid */
html body#category .products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

html body#category .product-miniature {
  float: none !important;
  width: 100% !important;
  border: 1px solid var(--pdp-border) !important;
  border-radius: var(--pdp-radius-sm) !important;
  background: var(--pdp-surface) !important;
  overflow: hidden !important;
  box-shadow: var(--pdp-shadow-sm) !important;
  transition: box-shadow 0.25s ease !important;
}

html body#category .product-miniature:hover {
  box-shadow: var(--pdp-shadow-md) !important;
}

html body#category .product-miniature * {
  transition: none !important;
}
html body#category .product-miniature .product-name,
html body#category .product-miniature .cart-button,
html body#category .product-miniature .product-thumbnail img {
  transition: color 0.2s ease, background 0.2s ease, transform 0.3s ease !important;
}

html body#category .product-miniature .product-title-item,
html body#category .product-miniature h5 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pdp-text) !important;
  line-height: 1.35 !important;
}

html body#category .product-miniature .price {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: var(--pdp-navy) !important;
}

html body#category .product-miniature .dor-addcart-button {
  position: static !important;
  bottom: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html body#category .product-miniature .option-quick-add {
  box-shadow: none !important;
  background: transparent !important;
}
html body#category .product-miniature .product-more-options > div:hover,
html body#category .product-miniature .option-quick-add:hover,
html body#category .product-miniature .option-quick-add a:hover {
  box-shadow: none !important;
  background: transparent !important;
}

html body#category .product-miniature .left-block {
  max-height: 200px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--pdp-surface-alt) !important;
}
html body#category .product-miniature .left-block img {
  max-height: 180px !important;
  object-fit: contain !important;
}

/* 35. Pagination */
html body#category .pagination {
  font-family: 'Poppins', sans-serif !important;
}
html body#category .pagination a {
  border-radius: var(--pdp-radius-sm) !important;
  border: 1px solid var(--pdp-border) !important;
  color: var(--pdp-text-muted) !important;
  font-size: 13px !important;
}
html body#category .pagination .current a,
html body#category .pagination a.current {
  background: var(--pdp-navy) !important;
  color: #fff !important;
  border-color: var(--pdp-navy) !important;
}

/* 36. Responsive */
@media (max-width: 991px) {
  html body#category .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  html body#category #left-column {
    padding-right: 0 !important;
  }
}
@media (max-width: 575px) {
  html body#category .products {
    grid-template-columns: 1fr !important;
  }
  html body#category .dor-breadcrumb h1 {
    font-size: 18px !important;
  }
}

/* Fix: clearfix ::before/::after hijacks first grid cell */
html body#category .products::before,
html body#category .products::after {
  display: none !important;
  content: none !important;
}
/* Fix: negative margin on products grid */
html body#category .products {
  margin: 0 !important;
}
/* Hide sidebar carousel "Tutti i Prodotti" */
html body#category #dor-tabsidebar-product-category {
  display: none !important;
}

/* Fix: product listing image margin */
html body#category #products img,
html body#category .products img {
  margin-right: 0 !important;
}

/* Hide AmazZing Filter compact toggle on desktop */
html body#category .compact-toggle {
  display: none !important;
}
@media (max-width: 767px) {
  html body#category .compact-toggle {
    display: inline-flex !important;
  }
}

/* Trust signals with Material Icons */
html body#product .pcs-trust-signals {
  display: flex !important;
  gap: 12px !important;
  margin-top: 20px !important;
  padding: 0 !important;
}
html body#product .pcs-trust-item {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  background: var(--pdp-surface-alt) !important;
  border: 1px solid var(--pdp-border) !important;
  border-radius: var(--pdp-radius-sm) !important;
}
html body#product .pcs-trust-item i.material-icons {
  font-size: 20px !important;
  color: var(--pdp-navy) !important;
  flex-shrink: 0 !important;
}
html body#product .pcs-trust-item span {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--pdp-text-muted) !important;
  line-height: 1.3 !important;
}
@media (max-width: 767px) {
  html body#product .pcs-trust-signals {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }
}