/* EcommPaaS Porto V2 — PDP clean rewrite. Prefix: .pp- Scope: body.catalog-product-view */

/* TOKEN SYSTEM */
body.catalog-product-view {
  --pp-blue:          #0088cc;
  --pp-blue-dark:     #006699;
  --pp-text:          #222529;
  --pp-text-light:    #777;
  --pp-text-muted:    #999;
  --pp-bg:            #fff;
  --pp-bg-light:      #f4f4f4;
  --pp-border:        #e7e7e7;
  --pp-border-dark:   #222529;
  --pp-radius:        3px;
  --pp-font:          Poppins, 'Open Sans', Helvetica, Arial, sans-serif;
  --pp-max-width:     1200px;
  /* PDP layout: Porto Demo 1 settings_demo1_en.css OVERRIDES the base styles-l.min.css values.
     styles-l.min.css (base): product.media=57%, product-info-main=40%
     settings_demo1_en.css (Demo 1 override, @media min-width:768px):
       .page-layout-1column .product-info-main { width: 57.17% }
       .page-layout-1column .product.media     { width: 40.83% }
     Demo 1 shows info WIDER than gallery — info section needs room for price/ATC/description.
     R203: fix R190 which incorrectly applied the base values instead of the Demo 1 override. */
  --pp-gallery-w:     40.83%;
  --pp-info-w:        57.17%;
}

body.catalog-product-view [class^="pp-"],
body.catalog-product-view [class*=" pp-"] {
  box-sizing: border-box;
  font-family: var(--pp-font);
}

body.catalog-product-view [class^="pp-"] *,
body.catalog-product-view [class*=" pp-"] * {
  box-sizing: border-box;
}

body.catalog-product-view .page-main,
body.catalog-product-view .columns,
body.catalog-product-view .column.main {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

body.catalog-product-view .page-wrapper {
  max-width: none !important;
}

body.catalog-product-view .page-main {
  max-width: var(--pp-max-width) !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

body.catalog-product-view .page-main > .page-title-wrapper {
  display: none !important;
}

/* 1. BREADCRUMBS */
body.catalog-product-view .breadcrumbs {
  padding: 12px 0;
  margin-bottom: 0;
  background: transparent;
}

body.catalog-product-view .breadcrumbs .items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pp-text-light);
}

body.catalog-product-view .breadcrumbs .item {
  display: flex;
  align-items: center;
}

body.catalog-product-view .breadcrumbs .item:not(:last-child)::after {
  content: '\203A';
  margin-left: 4px;
  color: var(--pp-text-muted);
  font-size: 0.875rem;
}

body.catalog-product-view .breadcrumbs .item a {
  color: var(--pp-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

body.catalog-product-view .breadcrumbs .item a:hover {
  color: var(--pp-blue);
}

body.catalog-product-view .breadcrumbs .item strong {
  color: var(--pp-text);
  font-weight: 400;
}

/* 2. PRODUCT MAIN AREA — two-column flex layout */
body.catalog-product-view .product-info-main,
body.catalog-product-view .product.media {
  box-sizing: border-box;
}

body.catalog-product-view .product.media {
  float: left !important;
  width: var(--pp-gallery-w) !important;
  padding-right: 30px !important;
  position: relative;
}

body.catalog-product-view .product-info-main {
  float: right !important;
  width: var(--pp-info-w) !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
}

body.catalog-product-view .product-info-main + * {
  clear: both;
}

/* 2a. GALLERY */
body.catalog-product-view .product.media .gallery-placeholder,
body.catalog-product-view .product.media .fotorama {
  max-width: 100% !important;
}

body.catalog-product-view .fotorama__stage {
  border: 1px solid #f4f4f4;
  background: #fff;
}

body.catalog-product-view .fotorama__nav--thumbs {
  margin-top: 10px;
}

body.catalog-product-view .fotorama__nav__frame--thumb {
  border: 1px solid #e1e1e1;
  padding: 2px;
  opacity: 0.7;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

body.catalog-product-view .fotorama__nav__frame--thumb:hover,
body.catalog-product-view .fotorama__active .fotorama__nav__frame--thumb {
  opacity: 1;
  border-color: var(--pp-border-dark);
}

body.catalog-product-view .fotorama__thumb-border {
  border-color: var(--pp-border-dark) !important;
  border-width: 1px !important;
}

body.catalog-product-view .fotorama__stage .fotorama__stage__shaft {
  cursor: zoom-in;
}

/* 2b. PRODUCT INFO */

body.catalog-product-view .product-info-main .page-title-wrapper {
  margin-bottom: 8px;
}

body.catalog-product-view .product-info-main .page-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pp-text);
  margin: 0;
}

body.catalog-product-view .product-reviews-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pp-border);
}

body.catalog-product-view .product-reviews-summary .rating-summary {
  display: flex;
  align-items: center;
}

body.catalog-product-view .product-reviews-summary .reviews-actions a {
  font-size: 0.8125rem;
  color: var(--pp-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

body.catalog-product-view .product-reviews-summary .reviews-actions a:hover {
  color: var(--pp-blue);
}

body.catalog-product-view .product-info-price {
  margin-bottom: 16px;
}

body.catalog-product-view .product-info-price .price-box {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* R88: Porto Demo 1 PDP regular/final and special prices use --pp-text (#222529 = rgb(34,37,41)) —
   confirmed against reference. Old/strikethrough prices intentionally stay muted (separate rule below).
   R86/R87 incorrectly used #444 for regular and --pp-blue for special-price.
   font-weight: 600 !important required: porto.css Loop 51 (.product-info-main .price-box .price,
   specificity 0,4,1) also sets font-weight:600 !important and beats this selector (0,3,1) in the
   !important layer. Both are 600 today so no visible gap, but !important defends if Loop 51 changes. */
body.catalog-product-view .product-info-price .price {
  font-size: 1.625rem;
  font-weight: 600 !important;
  color: var(--pp-text) !important;
}

/* R88: porto.css has `color:#ff5b5b!important` globally for .special-price .price.
   Override to --pp-text to match Porto Demo 1 reference (dark body-text, not red or blue). */
body.catalog-product-view .product-info-price .special-price .price {
  color: var(--pp-text) !important;
}

/* Old/strikethrough price. Specificity chain (0,5,2) beats all porto.css rules.
   R131 (2026-05-16): live getComputedStyle on m2.portotheme.com/demo1_en PDP = 14.4px.
   Do NOT change based on em math — measure the live reference directly. */
html body.catalog-product-view.pt-product-page .product-info-main .old-price .price,
html body.catalog-product-view.pt-product-page .product-info-price .old-price .price {
  font-size: 14.4px !important;
  font-weight: 600 !important;
  color: #a7a7a7 !important;
  text-decoration: line-through;
}

body.catalog-product-view .product-info-price .old-price .price-label {
  display: none;
}

body.catalog-product-view .product.attribute.overview {
  margin-bottom: 20px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--pp-text);
}

body.catalog-product-view .product.attribute.overview ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

body.catalog-product-view .product.attribute.overview ul li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 4px;
  font-size: 0.875rem;
}

body.catalog-product-view .product.attribute.overview ul li::before {
  content: '\2714';
  position: absolute;
  left: 0;
  color: var(--pp-blue);
  font-size: 0.8125rem;
}

body.catalog-product-view .product-info-stock-sku {
  margin-bottom: 16px;
  font-size: 0.8125rem;
}

body.catalog-product-view .stock {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}

body.catalog-product-view .stock.available {
  color: var(--pp-text);
}

body.catalog-product-view .stock.available::before {
  content: 'AVAILABILITY: ';
  font-weight: 400;
  color: var(--pp-text-light);
}

body.catalog-product-view .stock.unavailable {
  color: #e02b27;
}

/* Porto Demo 1 shows "IN STOCK" uppercase. Override ITER3-PDP-02 in porto.css which
 * set text-transform:none based on Demo 2. product-clean.css loads AFTER porto.css
 * (position 8 vs 5), so equal-specificity rules here win the cascade. */
html body.catalog-product-view .product-info-main .stock.available,
html body.pt-product-page .product-info-main .stock.available {
  text-transform: uppercase !important;
}
html body.catalog-product-view .product-info-stock-sku .stock.available span,
html body.pt-product-page .product-info-stock-sku .stock.available span {
  text-transform: uppercase !important;
}

body.catalog-product-view .product.attribute.sku {
  color: var(--pp-text-light);
  font-size: 0.8125rem;
}

body.catalog-product-view .product.attribute.sku .type {
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 4px;
  color: var(--pp-text-light);
}

body.catalog-product-view .product-options-wrapper {
  margin-bottom: 20px;
}

body.catalog-product-view .swatch-attribute {
  margin-bottom: 14px;
}

body.catalog-product-view .swatch-attribute-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: var(--pp-text);
}

body.catalog-product-view .swatch-attribute-label::after {
  content: ':';
}

body.catalog-product-view .swatch-option {
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.catalog-product-view .swatch-option:hover {
  border-color: var(--pp-text);
}

body.catalog-product-view .swatch-option.selected {
  border-color: var(--pp-text);
  box-shadow: 0 0 0 1px var(--pp-text);
}

body.catalog-product-view .swatch-option.text {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  padding: 0 10px;
  font-weight: 600;
}

body.catalog-product-view .box-tocart,
body.catalog-product-view .pt-addtocart {
  margin-bottom: 20px;
}

body.catalog-product-view .pt-addtocart__qty {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

body.catalog-product-view .pt-addtocart__qty-label {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pp-text);
  min-width: 30px;
}

body.catalog-product-view .pt-addtocart__qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
}

body.catalog-product-view .pt-addtocart__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--pp-bg-light);
  border: 0;
  cursor: pointer;
  color: var(--pp-text);
  transition: background-color 0.2s ease;
}

body.catalog-product-view .pt-addtocart__qty-btn:hover {
  background: var(--pp-border);
}

body.catalog-product-view .pt-addtocart__qty-input {
  width: 50px;
  height: 36px;
  border: 0;
  border-left: 1px solid var(--pp-border);
  border-right: 1px solid var(--pp-border);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  background: #fff;
  color: var(--pp-text);
  -moz-appearance: textfield;
}

body.catalog-product-view .pt-addtocart__qty-input::-webkit-inner-spin-button,
body.catalog-product-view .pt-addtocart__qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body.catalog-product-view .pt-addtocart__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

body.catalog-product-view .pt-addtocart__submit,
body.catalog-product-view .action.tocart {
  flex: 1;
  height: 46px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--pp-text) !important;
  color: #fff !important;
  border: 2px solid var(--pp-text) !important;
  border-radius: var(--pp-radius) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.catalog-product-view .pt-addtocart__submit:hover,
body.catalog-product-view .action.tocart:hover {
  background: var(--pp-blue) !important;
  border-color: var(--pp-blue) !important;
}

body.catalog-product-view .product-social-links,
body.catalog-product-view .product-addto-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pp-border);
}

body.catalog-product-view .product-addto-links .action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  color: var(--pp-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

body.catalog-product-view .product-addto-links .action:hover {
  color: var(--pp-blue);
}

body.catalog-product-view .product-addto-links .action::before {
  font-family: 'FontAwesome', 'Font Awesome 5 Free';
  font-weight: 400;
  font-size: 0.9375rem;
}

body.catalog-product-view .product-addto-links .action.towishlist::before {
  content: '\f004';
}

body.catalog-product-view .product-addto-links .action.tocompare::before {
  content: '\f080';
}

body.catalog-product-view .pt-social-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.8125rem;
}

body.catalog-product-view .pt-social-share__label {
  font-weight: 600;
  color: var(--pp-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.75rem;
}

body.catalog-product-view .pt-social-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pp-bg-light);
  color: var(--pp-text-light);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.catalog-product-view .pt-social-share a:hover {
  background: var(--pp-blue);
  color: #fff;
}

/* 3. PRODUCT TABS */

body.catalog-product-view .product.info.detailed {
  clear: both !important;
  width: 100% !important;
  margin-top: 40px;
  padding-top: 0;
  border-top: none;
}

body.catalog-product-view .product.data.items {
  display: block !important;
  list-style: none;
  margin: 0 0 0;
  padding: 0;
  border-bottom: none !important; /* R50/R68: porto.css adds border-bottom to this container; reference has none — !important needed to win cascade */
  overflow: visible;
}

body.catalog-product-view .product.data.items > .item.title {
  display: inline-block;
  float: none;
  margin: 0 4px -1px 0;
  vertical-align: bottom;
  position: relative;
  z-index: 1;
}

body.catalog-product-view .product.data.items > .item.title > .switch {
  display: inline-block;
  /* porto.css (line 13485) overrides padding to 0 !important and color to #818692 !important.
     These declarations are kept for specificity context; effective values come from porto.css. */
  padding: 12px 20px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pp-text-light);
  text-decoration: none;
  border: none; /* R50: reference uses underline-model tabs (2px border-bottom on .item.title.active via porto.css), not box-model; remove stale box border */
  background: transparent;
  transition: color 0.2s ease;
  cursor: pointer;
}

body.catalog-product-view .product.data.items > .item.title > .switch:hover {
  color: var(--pp-text);
}

body.catalog-product-view .product.data.items > .item.title.active > .switch {
  color: var(--pp-text); /* further overridden to #222529 !important by porto.css line 13495 */
  background: transparent; /* R50: active tab is underline-style, not box-style — no white bg box needed */
}

body.catalog-product-view .product.data.items > .item.content {
  display: none;
  width: 100% !important;
  float: none !important;
  clear: both;
  padding: 30px 0 15px; /* R68: match reference (30px top / 15px bottom); was 25px 0 */
  border: 0 !important; /* reset all borders — then add top separator */
  border-top: 1px solid #e7e7e7 !important; /* Porto reference: 1px separator between tab nav and content */
  background: #fff;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--pp-text);
}

body.catalog-product-view .product.data.items > .item.title.active + .item.content {
  display: block;
}

body.catalog-product-view .product.data.items .description-content p,
body.catalog-product-view .product.data.items .value p {
  margin-bottom: 16px;
  line-height: 1.75;
}

body.catalog-product-view .product.data.items .value ul,
body.catalog-product-view .product.data.items .description-content ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

body.catalog-product-view .product.data.items .value ul li,
body.catalog-product-view .product.data.items .description-content ul li {
  margin-bottom: 6px;
  padding-left: 6px;
}

body.catalog-product-view .product.data.items .additional-attributes {
  width: auto;
}

body.catalog-product-view .product.data.items .additional-attributes tbody tr {
  border-bottom: 1px solid var(--pp-border);
}

body.catalog-product-view .product.data.items .additional-attributes .col.label {
  font-weight: 600;
  padding: 10px 20px 10px 0;
  width: 180px;
  color: var(--pp-text);
}

body.catalog-product-view .product.data.items .additional-attributes .col.data {
  padding: 10px 0;
  color: var(--pp-text-light);
}

body.catalog-product-view .product.data.items #reviews {
  padding: 25px 0;
}

/* 4. RELATED PRODUCTS */
body.catalog-product-view .block.related {
  clear: both;
  width: 100%;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--pp-border);
}

body.catalog-product-view .block.related .block-title,
body.catalog-product-view .pp-related__title {
  margin-bottom: 20px;
}

body.catalog-product-view .block.related .block-title strong {
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--pp-text);
}

body.catalog-product-view .block.related .products-related .product-items {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.catalog-product-view .block.related .products-related .product-item {
  flex: 0 0 calc(25% - 15px);
  min-width: 0;
}

body.catalog-product-view .block.related .products-related .product-item-info {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pp-border);
  transition: box-shadow 0.2s ease;
}

body.catalog-product-view .block.related .products-related .product-item-info:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

body.catalog-product-view .block.related .products-related .product-item-photo {
  display: block;
  overflow: hidden;
}

body.catalog-product-view .block.related .products-related .product-item-photo img {
  width: 100%;
  height: auto;
  display: block;
}

body.catalog-product-view .block.related .products-related .product-item-details {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

body.catalog-product-view .block.related .products-related .product-item-name {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 8px;
}

body.catalog-product-view .block.related .products-related .product-item-name a {
  color: var(--pp-text);
  text-decoration: none;
}

body.catalog-product-view .block.related .products-related .product-item-name a:hover { color: var(--pp-blue); }
body.catalog-product-view .block.related .products-related .price-box { margin-bottom: 10px; }

/* R88: Align related-products final/special price with main price fix.
   Scoped to final price (not .old-price) — old-price override below keeps strikethrough muted. */
body.catalog-product-view .block.related .products-related .price-final_price .price,
body.catalog-product-view .block.related .products-related .special-price .price {
  font-size: 1rem;
  font-weight: 600 !important;
  color: var(--pp-text) !important;
}

/* R88 (Copilot fix): explicit old-price guard — .price override above is broad enough to match
   .old-price .price in sale items. Re-apply muted styling so strikethrough price stays grey. */
body.catalog-product-view .block.related .products-related .old-price .price {
  font-weight: 400 !important;
  color: var(--pp-text-light) !important;
  text-decoration: line-through;
}

/* R153: Porto Demo 1 reference — related products ATC button is blue solid.
   The related carousel template (related-carousel.phtml) renders the button with
   class "pt-btn pt-btn--sm pt-product-card__cart-btn" inside ".pt-related-section".
   Target that class, not ".action.tocart" which is not present in the carousel template. */
body.catalog-product-view .pt-related-section .pt-product-card__cart-btn {
  background: var(--pp-blue) !important;
  color: #fff !important;
  border: none !important;
  transition: background-color 0.2s ease;
}

body.catalog-product-view .pt-related-section .pt-product-card__cart-btn:hover {
  background: var(--pp-blue-dark) !important;
  color: #fff !important;
}

/* porto.css `html body span:not([class]) { color: #777 !important }` overrides inherited white
   on the unclassed <span> inside the button. Explicit !important override required. */
body.catalog-product-view .pt-related-section .pt-product-card__cart-btn span {
  color: #fff !important;
}

/* 5. UPSELL — hidden (Porto Demo 1 PDP has none) */
body.catalog-product-view .block.upsell {
  display: none !important;
}

/* 6. DUPLICATE HEADER GUARD */
body.catalog-product-view .pt-header ~ .pt-header,
body.catalog-product-view .pt-header + .pt-header {
  display: none !important;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  /* Demo 1 ref: gallery=40.83%, info=57.17% at all non-mobile viewports (no tablet override).
     R203: updated to match Demo 1 settings_demo1_en.css — reduce padding-right only at tablet. */
  body.catalog-product-view .product.media {
    padding-right: 20px !important;
  }
}

@media (max-width: 767px) {
  body.catalog-product-view .product.media,
  body.catalog-product-view .product-info-main {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body.catalog-product-view .product.media {
    margin-bottom: 24px;
  }

  body.catalog-product-view .block.related .products-related .product-item {
    flex: 0 0 calc(50% - 10px);
  }

  body.catalog-product-view .product.data.items > .item.title > .switch {
    padding: 10px 14px;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  body.catalog-product-view .block.related .products-related .product-item {
    flex: 0 0 100%;
  }

  body.catalog-product-view .page-main {
    padding: 0 12px !important;
  }
}

/* BREADCRUMB — suppress duplicate ::before separator (same fix as category-clean.css) */
body.catalog-product-view .breadcrumbs .items > li + li::before {
  content: none !important;
}

/* R189: Porto Demo 1 PDP shows 3 tabs — Details | Reviews | Custom Tab (sizing guide table).
   R153 incorrectly suppressed Custom Tab; removed to restore 3-tab parity with reference. */