/* Product page tokens — scoped to main#shell so global navbar matches index */
    main#shell {
      --primary: var(--ft-primary, #d6218c);
      --primary-dark: var(--ft-primary-dark, #b01870);
      --secondary: var(--ft-text-muted, #6b7280);
      --accent: var(--ft-orange, #fc7c3a);
      --surface: #ffffff;
      --background: #f6f7fb;
      --border: var(--ft-border, #e5e7eb);
      --text-primary: var(--ft-text, #111827);
      --text-secondary: var(--ft-text-muted, #6b7280);
      --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
      --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
    }

    body {
      background: var(
        --ft-surface,
        linear-gradient(180deg, #faf7fb 0%, #f3f4f6 100%)
      );
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      color: var(--text-dark);
      line-height: 1.6;
      margin: 0;
      min-height: 100%;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
    }

    main#shell {
      display: flex;
      flex-direction: column;
      flex: 1 0 auto;
      min-height: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Main content area - Two column layout */
    .pMainContent {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    @media (min-width: 768px) {
      .pMainContent {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
        padding: 20px;
      }
    }

    /* Left column - Images */
    .pLeftColumn {
      flex: 1;
      max-width: 100%;
    }

    @media (min-width: 768px) {
      .pLeftColumn {
        position: sticky;
        top: 80px;
        max-width: 50%;
      }
    }

    /* Gallery */
    .pGallery{
      padding: 0;
      position: relative;
    }
    @media (min-width: 768px) {
      .pGallery {
        padding: 0;
      }
    }
    .pHero{
      width:100%; height:400px; border-radius:var(--radius-xl);
      background:linear-gradient(135deg, rgba(252,124,58,0.1), rgba(214,33,140,0.08)) center/cover no-repeat;
      border:2px solid var(--border);
      box-shadow: var(--shadow-md);
      transition: transform 0.3s ease;
    }
    .pHero:hover {
      transform: scale(1.01);
    }
    .pThumbs{
      display:flex; gap:12px; overflow:auto; padding:16px 20px;
      scrollbar-width: thin;
    }
    .pThumbs::-webkit-scrollbar {
      height: 4px;
    }
    .pThumbs::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 2px;
    }
    .thumb{
      width:80px; height:80px; border-radius:var(--radius-md);
      background:var(--background) center/cover no-repeat;
      border:2px solid transparent; flex:0 0 auto; cursor:pointer;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-sm);
    }
    .thumb:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .thumb.active{
      border-color:var(--primary);
      box-shadow: 0 0 0 3px rgba(214, 33, 140, 0.12);
    }

    /* Right column - Product info, variants, add to cart */
    .pRightColumn {
      flex: 1;
      max-width: 100%;
    }

    @media (min-width: 768px) {
      .pRightColumn {
        max-width: 50%;
      }
    }

    /* Cards */
    .pCard{
      margin:0 0 16px 0; padding:20px;
      background:var(--surface); border:1px solid var(--border); 
      border-radius:var(--radius-xl);
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s ease;
    }
    @media (max-width: 767px) {
      .pCard {
        margin: 16px 20px;
      }
    }
    .pCard:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    /* Product Info */
    .pSubTitle{
      font-size:14px; color:var(--text-secondary); 
      margin-bottom:8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .pTitle{
      font-size:24px; font-weight:700; margin:0 0 12px 0;
      line-height: 1.3;
    }
    .pLinks{
      display:flex; align-items:center; gap:12px; 
      font-size:14px; color:var(--text-secondary);
    }
    .pLink{
      color:var(--primary); text-decoration:none;
      font-weight: 600;
      transition: color 0.2s ease;
    }
    .pLink:hover{
      color:var(--primary-dark); text-decoration:underline;
    }
    .pDot{opacity:.5}

    /* Rating */
    .pRatingRow{
      display:flex; align-items:center; gap:8px; margin:12px 0;
      padding: 8px 12px;
      background: var(--background);
      border-radius: var(--radius-md);
      display: inline-flex;
    }
    .pStars .star{
      font-size:16px; margin-right:2px;
      color: var(--accent);
    }
    .pRatingText{
      font-size:14px; color:var(--text-secondary);
    }

    /* Price */
    .pPriceRow{
      display:flex; align-items:center; justify-content:space-between; 
      gap:16px; margin-top:20px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }
    .pPriceNow{
      font-size:28px; font-weight:900;
      color: var(--primary);
    }
    .pPriceOldWrap{
      display:flex; align-items:center; gap:8px; margin-top:4px;
    }
    .pPriceOld{
      text-decoration:line-through; color:var(--text-secondary); 
      font-size:14px;
    }
    .pDiscount{
      font-size:13px; font-weight:800;
      padding:4px 10px; border-radius:999px;
      background: #fee2e2;
      color: #dc2626;
      border: none;
    }

    /* Quantity */
    .pQty{
      display:flex; align-items:center; gap:12px;
      padding: 8px;
      background: var(--background);
      border-radius: var(--radius-md);
    }
    .pQtyBtn{
      width:40px; height:40px; border-radius:var(--radius-md);
      border:1px solid var(--border); background:var(--surface); cursor:pointer;
      font-size:20px; font-weight:300;
      transition: all 0.2s ease;
    }
    .pQtyBtn:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    .pQtyVal{
      min-width:28px; text-align:center; font-weight:700;
      font-size: 16px;
    }

    /* Bottom totals */
    .pBottomTotals{
      margin-top:20px;
      padding: 16px;
      background: var(--background);
      border-radius: var(--radius-md);
    }
    .pBottomLine{
      display:flex; justify-content:space-between; align-items:center;
      margin-bottom: 8px;
    }
    .pBottomLabel{
      color:var(--text-secondary); font-size: 14px;
    }
    .pBottomNow{
      font-weight:900; font-size: 20px;
      color: var(--primary);
    }
    .pBottomOld{
      text-align:right; text-decoration:line-through; 
      color:var(--text-secondary); font-size: 14px;
    }
    .pHint{
      margin-top:12px; font-size:13px; 
      color:var(--text-secondary);
      padding: 8px 12px;
      background: rgba(214, 33, 140, 0.06);
      border-radius: var(--radius-sm);
      border-left: 3px solid var(--primary);
    }
    
    
    /* Description - Force full width for all content */
.pDescHtml {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

/* Force all HTML content to be responsive */
.pDescHtml * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Specifically handle tables in HTML content */
.pDescHtml table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.pDescHtml img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Remove any fixed dimensions */
.pDescHtml div,
.pDescHtml section,
.pDescHtml article {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Handle iframes and videos */
.pDescHtml iframe,
.pDescHtml video {
  max-width: 100% !important;
  width: 100% !important;
}

/* Reset any inline styles that might break layout */
.pDescHtml[style*="width"],
.pDescHtml *[style*="width"] {
  width: auto !important;
  max-width: 100% !important;
}

    /* Buttons */
    .pPrimaryBtn{
      width:100%; margin-top:20px;
      border:none; border-radius:var(--radius-lg);
      padding:16px 20px;
      background: var(--ft-cta-gradient, linear-gradient(135deg, #fc7c3a, #d6218c)); color:var(--surface);
      font-weight:800; cursor:pointer;
      font-size: 16px;
      transition: all 0.2s ease;
      box-shadow: var(--ft-cta-shadow, 0 4px 16px rgba(214, 33, 140, 0.22));
    }
    .pPrimaryBtn:hover {
      filter: brightness(1.03);
      background: var(--ft-cta-gradient, linear-gradient(135deg, #fc7c3a, #d6218c));
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(214, 33, 140, 0.25);
    }
    .pOutlineBtn{
      border:2px solid var(--primary); background:transparent;
      border-radius:var(--radius-md); padding:10px 20px;
      cursor:pointer; font-weight:700;
      color: var(--primary);
      transition: all 0.2s ease;
    }
    .pOutlineBtn:hover {
      background: var(--primary);
      color: white;
    }
    .pGhostBtn{
      border:1px solid var(--border); background:var(--surface);
      border-radius:var(--radius-md); padding:10px 20px;
      cursor:pointer; font-weight:700;
      color: var(--text-primary);
      transition: all 0.2s ease;
    }
    .pGhostBtn:hover {
      background: var(--background);
      border-color: var(--primary);
    }

    /* Sections */
    .pSectionTitle{
      font-weight:800; margin-bottom:8px; font-size: 18px;
      color: var(--text-primary);
    }
    .pSectionSub{
      font-size:14px; color:var(--text-secondary); margin-bottom:12px;
    }

    /* Variants */
    .pVariants .pVarRow{
      margin-bottom:20px;
      padding: 16px;
      background: var(--background);
      border-radius: var(--radius-md);
    }
    .pVarLabel{
      font-weight:800; margin-bottom:12px; font-size: 16px;
    }

    .pColorChips{display:flex; gap:12px; flex-wrap:wrap}
    .colorDot{
      width:32px; height:32px; border-radius:999px;
      border:3px solid var(--surface); 
      box-shadow: var(--shadow-sm);
      cursor:pointer;
      transition: transform 0.2s ease;
    }
    .colorDot:hover {
      transform: scale(1.1);
    }
    .colorDot.active{
      outline:3px solid var(--primary);
      box-shadow: 0 0 0 3px rgba(214, 33, 140, 0.2);
    }
    .colorDot.disabled{
      opacity:.35; cursor:not-allowed;
      filter: grayscale(100%);
    }

    .pSizeChips{display:flex; gap:12px; flex-wrap:wrap}
    .chip{
      padding:10px 16px; border-radius:var(--radius-md);
      border:2px solid var(--border); cursor:pointer;
      font-weight:700; font-size:14px;
      transition: all 0.2s ease;
    }
    .chip:hover {
      border-color: var(--primary);
      background: rgba(214, 33, 140, 0.06);
    }
    .chip.active{
      border-color:var(--primary);
      background: var(--primary);
      color: white;
    }
    .chip.disabled{
      opacity:.35; cursor:not-allowed;
      background: var(--background);
    }

    /* Services — badge-style panel (checkout / sepet parity) */
    .pServicesList{
      display:flex; flex-direction:column; gap:10px;
      padding: 12px;
      border-radius: var(--radius-lg);
      background: linear-gradient(
        135deg,
        rgba(22, 163, 74, 0.12) 0%,
        rgba(22, 163, 74, 0.06) 55%,
        rgba(214, 33, 140, 0.05) 100%
      );
      border: 1px solid rgba(22, 163, 74, 0.22);
      box-shadow: 0 1px 3px rgba(22, 163, 74, 0.08);
    }
    .service{
      display:flex; justify-content:space-between; gap:12px;
      border:1px solid rgba(22, 163, 74, 0.14);
      border-radius:var(--radius-md);
      padding:14px 16px;
      background: rgba(255, 255, 255, 0.78);
      transition: all 0.2s ease;
    }
    .service:hover {
      border-color: var(--primary);
      box-shadow: var(--shadow-sm);
    }
    .sName{font-weight:800; font-size: 15px;}
    .sDesc{
      font-size:13px; color:var(--text-secondary); margin-top:4px;
    }
    .sR{display:flex; align-items:center; gap:12px}
    .sPrice{
      font-weight:800; font-size:14px; color:var(--primary);
    }
    .toggle{
      width:48px; height:28px; border-radius:999px;
      border:2px solid var(--border); background:#f1f5f9; 
      position:relative; cursor:pointer;
      transition: all 0.3s ease;
    }
    .toggle:before{
      content:""; position:absolute; top:2px; left:2px;
      width:20px; height:20px; border-radius:999px; 
      background:var(--surface); border:1px solid var(--border);
      transition:transform .2s ease;
    }
    .toggle.on{
      background:var(--primary); border-color:var(--primary);
    }
    .toggle.on:before{
      transform:translateX(20px); border-color:var(--primary);
    }

    /* Description and everything below */
    .pBottomSections {
      width: 100%;
    }

    @media (min-width: 768px) {
      .pBottomSections {
        padding: 0 20px;
      }
    }

/* Description wrapper */
.pDescWrap {
  position: relative;
  line-height: 1.6;
}

/* Clip container (controls collapse) */
.pDescClip {
  max-height: 180px;
  overflow: hidden;
}

/* Expanded state */
.pDescWrap.open .pDescClip {
  max-height: none;
}

    .pDescWrap.open{max-height:none}
    .pDescHtml{
      font-size:15px; line-height:1.6; color:var(--text-primary);
    }
    .pDescFade{
      position:absolute; left:0; right:0; bottom:0; height:80px;
      background:linear-gradient(transparent, var(--surface));
      pointer-events:none;
    }

    /* Shop Profile */
    .pShopProfile .pShopRow{
      display:flex; align-items:center; gap:16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }
    .pShopAvatar{
      width:56px; height:56px; border-radius:var(--radius-md);
      background:linear-gradient(135deg, rgba(252,124,58,0.2), rgba(214,33,140,0.2)) center/cover no-repeat;
      border:2px solid var(--border);
      box-shadow: var(--shadow-sm);
    }
    .pShopName{
      font-weight:900; font-size: 18px;
      color: var(--text-primary);
    }
    .pShopMeta{
      font-size:13px; color:var(--text-secondary); margin-top:4px;
    }
    .pShopMetaCard{
      margin-top:16px; border-top:1px dashed var(--border); 
      padding-top:16px;
    }
    .pShopMetaTitle{
      font-weight:900; font-size: 16px;
      margin-bottom: 4px;
    }
    .pShopMetaSub{
      font-size:13px; color:var(--text-secondary);
    }

    /* Comments & Q&A */
    .pList{display:flex; flex-direction:column; gap:12px}
    .commentCard,.qaCard{
      border:1px solid var(--border); border-radius:var(--radius-md); 
      padding:16px;
      background: var(--background);
    }
    .cTop{
      display:flex; justify-content:space-between; 
      color:var(--text-secondary); font-weight:700;
      font-size: 14px;
    }
    .cTitle{
      font-weight:900; margin-top:8px; font-size: 16px;
    }
    .cText{
      font-size:14px; color:var(--text-primary); margin-top:8px; 
      white-space:pre-wrap; line-height: 1.5;
    }
    .pRowBtns{
      display:flex; gap:12px; margin-top:16px;
    }
    .pRowBtns .pGhostBtn,.pRowBtns .pPrimaryBtn{width:50%}

    /* Horizontal scroll — satır: ‹ kartlar › */
    .pHScrollWrap {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
    }
    .pHScrollWrap .pHScroll {
      flex: 1 1 auto;
      min-width: 0;
    }
    .pHScrollNav {
      flex: 0 0 auto;
      width: 2.25rem;
      height: 2.25rem;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text-primary);
      font-size: 1.35rem;
      line-height: 1;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .pHScrollNav:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: linear-gradient(135deg, rgba(252, 124, 58, 0.06) 0%, rgba(214, 33, 140, 0.06) 100%);
    }
    @media (max-width: 380px) {
      .pHScrollNav {
        width: 2rem;
        height: 2rem;
        font-size: 1.2rem;
      }
    }

    /* Horizontal scroll items */
    .pHScroll{
      display:flex; gap:16px; overflow:auto; padding-bottom:8px;
      scrollbar-width: thin;
    }
    .pHScroll::-webkit-scrollbar {
      height: 6px;
    }
    .pHScroll::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }
    .itemCard{
      width:180px; flex:0 0 auto; cursor:pointer;
      border:1px solid var(--border); border-radius:var(--radius-lg); 
      overflow:hidden;
      background:var(--surface);
      transition: all 0.3s ease;
    }
    .itemCard:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    .itemImg{
      width:100%; height:140px; 
      background:linear-gradient(135deg, rgba(252,124,58,0.1), rgba(214,33,140,0.08)) center/cover no-repeat;
    }
    .itemBody{padding:12px}
    .itemTitle{
      font-weight:800; font-size:14px; line-height:1.3; 
      height:36px; overflow:hidden;
      margin-bottom: 8px;
    }
    .itemPrice{
      font-weight:900; color: var(--primary);
      font-size: 16px;
    }
    .itemOld{
      text-decoration:line-through; color:var(--text-secondary); 
      font-size:13px; margin-top:2px;
    }

    /* Shop List */
    .pShopList{display:flex; flex-direction:column; gap:12px}
    .shopCardIOS{
      border:1px solid var(--border); border-radius:var(--radius-lg);
      padding:16px; cursor:pointer;
      transition: all 0.2s ease;
    }
    .shopCardIOS:hover {
      border-color: var(--primary);
      box-shadow: var(--shadow-sm);
    }
    .shopTop{display:flex; gap:16px; align-items:center}
    .shopLogo{
      width:56px; height:56px; border-radius:var(--radius-md);
      background:linear-gradient(135deg, rgba(252,124,58,0.2), rgba(214,33,140,0.2)) center/cover no-repeat; 
      border:2px solid var(--border);
    }
    .shopInfo .shopName{font-weight:900; font-size: 16px;}
    .shopRating,.shopFollowers,.shopSafe{
      font-size:13px; color:var(--text-secondary); margin-top:4px;
    }
    .shopShip{
      margin-top:12px; font-size:13px; color:var(--text-secondary);
      padding: 8px 12px;
      background: var(--background);
      border-radius: var(--radius-sm);
    }

    /* Modal */
    .auth-modal{
      position:fixed; inset:0; z-index:1000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .auth-backdrop{
      position:absolute; inset:0; background:rgba(0,0,0,0.5);
      backdrop-filter: blur(4px);
    }
    .auth-box{
      position:relative; width:90%; max-width:400px;
      margin:auto; background:var(--surface); border-radius:var(--radius-xl);
      padding:32px 24px; z-index:2; border:1px solid var(--border);
      box-shadow: var(--shadow-md);
      animation: modalSlideIn 0.3s ease;
    }
    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .auth-close{
      position:absolute; top:16px; right:16px;
      font-size:24px; border:none; background:none; cursor:pointer;
      color: var(--text-secondary);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .auth-close:hover {
      background: var(--background);
      color: var(--text-primary);
    }


/* =========================
   TITLE ROW WITH ACTIONS
========================= */

.pTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pActionIcons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pIconBtn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.2s ease;
}

.pIconBtn:hover {
  background: var(--background);
  border-color: var(--primary);
  transform: translateY(-2px);
}

#favIcon {
  font-size: 20px;
  color: #dc2626;
}

.pIconSvg {
  width: 18px;
  height: 18px;
  fill: var(--text-primary);
}

/* ----- Ürün sayfası — telefon ----- */
@media (max-width: 767px) {
  .pHero {
    height: min(58vw, 360px);
    border-radius: var(--radius-lg);
  }

  .pThumbs {
    padding: 12px 10px;
    gap: 8px;
  }

  .thumb {
    width: 64px;
    height: 64px;
  }

  .pTitle {
    font-size: 1.15rem;
    line-height: 1.3;
  }

  .pCard {
    margin: 10px 12px;
    padding: 16px 14px;
  }

  .pTitleRow {
    flex-wrap: wrap;
  }

  .pShopName {
    font-size: 1rem;
  }
}

/* =========================
   Product detail redesign
========================= */

main#shell.product-page-shell {
  --primary: #b0004a;
  --primary-bright: #d81b60;
  --accent: #fc7c3a;
  --background: #fff8f7;
  --surface: #ffffff;
  --surface-muted: #f9fafb;
  --surface-soft: #fff3f4;
  --border: #e3bdc3;
  --border-soft: rgba(89, 64, 68, 0.14);
  --text-primary: #27171a;
  --text-secondary: #5a4044;
  --success: #22c55e;
  --danger: #ef4444;
  --radius-card: 12px;
  --shadow-soft: 0 18px 42px rgba(39, 23, 26, 0.08);
  --shadow-small: 0 8px 24px rgba(39, 23, 26, 0.06);
  background: var(--background);
  color: var(--text-primary);
  padding: 18px clamp(16px, 4vw, 64px) 56px;
}

.product-page-shell .pBreadcrumb,
.product-page-shell .pMainContent,
.product-page-shell .pBottomSections {
  width: min(1280px, 100%);
  margin-inline: auto;
}

.product-page-shell .pBreadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 18px;
}

.product-page-shell .pBreadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 700;
}

.product-page-shell .pBreadcrumb a:hover {
  color: var(--primary);
}

.product-page-shell .pMainContent {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  gap: 28px;
  align-items: start;
  padding: 0;
}

.product-page-shell .pLeftColumn {
  position: sticky;
  top: calc(var(--site-header-h, 88px) + 12px);
  max-width: none;
  align-self: start;
}

.product-page-shell .pRightColumn {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-page-shell .pGallery {
  display: flex;
  gap: 16px;
  align-items: stretch;
  padding: 0;
}

.product-page-shell .pThumbs {
  order: 0;
  width: 80px;
  max-height: min(680px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 0;
  flex: 0 0 80px;
}

.product-page-shell .thumb {
  width: 78px;
  height: 78px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface) center / contain no-repeat;
  box-shadow: none;
}

.product-page-shell .thumb:hover {
  transform: none;
  border-color: var(--border);
}

.product-page-shell .thumb.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(176, 0, 74, 0.12);
}

.product-page-shell .pHeroFrame {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.product-page-shell .pHero {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background-color: var(--surface);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: none;
  transition: none;
}

.product-page-shell .pHero:hover {
  transform: none;
}

.product-page-shell .pHeroBadge,
.product-page-shell .pLowStockBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.product-page-shell .pHeroBadge {
  position: absolute;
  left: 18px;
  top: 18px;
  min-height: 34px;
  padding: 0 14px;
  background: #fef2f2;
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.16);
}

.product-page-shell .pHeroFav {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(227, 189, 195, 0.72);
  box-shadow: 0 10px 24px rgba(39, 23, 26, 0.12);
}

.product-page-shell .pCard {
  margin: 0;
  padding: 22px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow-small);
  transition: none;
}

.product-page-shell .pCard:hover {
  transform: none;
  box-shadow: var(--shadow-small);
}

.product-page-shell .pTop {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-page-shell .pTitleRow {
  align-items: flex-start;
}

.product-page-shell .pSubTitle {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.product-page-shell .pTitle {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
}

.product-page-shell .pIconBtn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
}

.product-page-shell .pReviewLine {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.product-page-shell .pRatingRow {
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
}

.product-page-shell .pStars .star {
  color: #f59e0b;
}

.product-page-shell .pRatingText {
  color: var(--text-primary);
  font-weight: 800;
}

.product-page-shell .pQuestionLink {
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.product-page-shell .pLinks {
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

.product-page-shell .pLink {
  color: var(--primary);
  font-weight: 900;
}

.product-page-shell .pPricePanel {
  background: linear-gradient(180deg, var(--surface-muted), #ffffff 72%);
}

.product-page-shell .pPriceRow {
  gap: 16px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  align-items: flex-start;
}

.product-page-shell .pPriceNow {
  color: var(--primary);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 950;
  line-height: 1;
}

.product-page-shell .pPriceOldWrap {
  gap: 10px;
  margin-top: 10px;
}

.product-page-shell .pPriceOld {
  color: #9ca3af;
  font-size: 15px;
  font-weight: 700;
}

.product-page-shell .pDiscount {
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}

.product-page-shell .pLowStockBadge {
  padding: 10px 13px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.product-page-shell .pBuyRow {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
}

.product-page-shell .pQty {
  flex: 0 0 auto;
  height: 50px;
  padding: 5px;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}

.product-page-shell .pQtyBtn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: var(--surface-muted);
  color: var(--text-primary);
  font-weight: 900;
}

.product-page-shell .pQtyBtn:hover {
  background: var(--primary);
  color: #fff;
}

.product-page-shell .pQtyVal {
  min-width: 30px;
  color: var(--text-primary);
  font-weight: 900;
}

.product-page-shell .pPrimaryBtn {
  width: 100%;
  min-height: 52px;
  margin-top: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--primary-bright));
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 18px 34px rgba(216, 27, 96, 0.22);
}

.product-page-shell .pPrimaryBtn:hover {
  transform: none;
  filter: brightness(1.02);
}

.product-page-shell .pBottomTotals {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: #ffffff;
}

.product-page-shell .pBottomLabel,
.product-page-shell .pHint,
.product-page-shell .pSectionSub {
  color: var(--text-secondary);
}

.product-page-shell .pBottomNow {
  color: var(--primary);
}

.product-page-shell .pHint {
  margin-top: 10px;
  padding: 0;
  background: transparent;
  border-left: 0;
}

.product-page-shell .pCampaign {
  border-color: rgba(252, 124, 58, 0.28);
  background: #fff7ed;
}

.product-page-shell .pCampaignTitle {
  color: #9a3412;
  font-weight: 900;
}

.product-page-shell .pCampaignSub {
  color: #7c2d12;
  font-weight: 700;
}

.product-page-shell .pVariants .pVarRow {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.product-page-shell .pVariants .pVarRow + .pVarRow {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

.product-page-shell .pVarLabel {
  color: var(--text-primary);
  font-size: 15px;
}

.product-page-shell .pColorChips,
.product-page-shell .pSizeChips {
  gap: 10px;
}

.product-page-shell .colorDot {
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border-soft);
}

.product-page-shell .colorDot.active {
  outline: 2px solid var(--primary);
  box-shadow: 0 0 0 5px rgba(176, 0, 74, 0.12);
}

.product-page-shell .chip {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--text-primary);
}

.product-page-shell .chip.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.product-page-shell .pServicesList {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.product-page-shell .service {
  border-color: var(--border-soft);
  background: var(--surface-muted);
}

.product-page-shell .toggle.on {
  background: var(--success);
  border-color: var(--success);
}

.product-page-shell .pShopProfile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-page-shell .pShopProfile .pShopRow {
  padding-bottom: 0;
  border-bottom: 0;
}

.product-page-shell .pShopAvatar {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
}

.product-page-shell .pShopName {
  color: var(--text-primary);
}

.product-page-shell .pShopMetaCard {
  margin-top: 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-muted);
}

.product-page-shell .pOutlineBtn,
.product-page-shell .pGhostBtn {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  color: var(--primary);
  background: #fff;
  font-weight: 900;
}

.product-page-shell .pOutlineBtn:hover,
.product-page-shell .pGhostBtn:hover {
  background: var(--surface-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.product-page-shell .pBottomSections {
  margin-top: 32px;
  padding: 0;
}

.product-page-shell .pTabs {
  position: relative;
  top: auto;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 10px 0;
  margin-bottom: 20px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.product-page-shell .pTabs:empty {
  display: none;
}

.product-page-shell .pTabBtn {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 900;
  cursor: pointer;
}

.product-page-shell .pTabBtn.active,
.product-page-shell .pTabBtn[aria-selected="true"] {
  background: var(--primary);
  color: #fff;
}

.product-page-shell .pDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr);
  gap: 24px;
  align-items: start;
}

.product-page-shell [data-detail-target] {
  scroll-margin-top: calc(var(--site-header-h, 88px) + 20px);
}

.product-page-shell .pDetailContent,
.product-page-shell .pDetailSidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.product-page-shell .pDetailSidebar {
  position: sticky;
  top: calc(var(--site-header-h, 88px) + 16px);
  align-self: start;
}

.product-page-shell .pSectionKicker {
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.product-page-shell .pSectionTitle {
  margin-bottom: 14px;
  color: var(--text-primary);
  font-size: 21px;
  font-weight: 950;
  letter-spacing: 0;
}

.product-page-shell .pDescHtml {
  color: var(--text-secondary);
  font-size: 15px;
}

.product-page-shell .pDescFade {
  background: linear-gradient(transparent, var(--surface));
}

.product-page-shell .pOptionalContent {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-page-shell .pOptionalText {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.product-page-shell .pOptionalGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-page-shell .pOptionalItem {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

.product-page-shell .pOptionalLabel {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 950;
}

.product-page-shell .pOptionalValue {
  margin-top: 4px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
}

.product-page-shell .pOptionalNote {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.product-page-shell .commentCard,
.product-page-shell .qaCard,
.product-page-shell .shopCardIOS {
  border-color: var(--border-soft);
  background: var(--surface-muted);
}

.product-page-shell .pHScrollWrap {
  gap: 10px;
}

.product-page-shell .pHScrollNav {
  border-radius: 999px;
  border-color: var(--border-soft);
}

.product-page-shell .itemCard {
  border-radius: 10px;
  border-color: var(--border-soft);
  box-shadow: none;
}

.product-page-shell .itemImg {
  background-size: contain;
  background-color: #fff;
}

@media (max-width: 1100px) {
  main#shell.product-page-shell {
    padding-inline: 20px;
  }

  .product-page-shell .pMainContent,
  .product-page-shell .pDetailGrid {
    grid-template-columns: 1fr;
  }

  .product-page-shell .pLeftColumn,
  .product-page-shell .pDetailSidebar {
    position: static;
  }

  .product-page-shell .pGallery {
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  main#shell.product-page-shell {
    padding: 14px 12px 40px;
  }

  .product-page-shell .pBreadcrumb {
    margin-bottom: 12px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .product-page-shell .pGallery {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .product-page-shell .pThumbs {
    width: 100%;
    flex: 0 0 auto;
    max-height: none;
    flex-direction: row;
  }

  .product-page-shell .thumb {
    width: 68px;
    height: 68px;
  }

  .product-page-shell .pHeroFrame {
    border-radius: 10px;
  }

  .product-page-shell .pHeroBadge {
    left: 12px;
    top: 12px;
  }

  .product-page-shell .pHeroFav {
    right: 12px;
    top: 12px;
  }

  .product-page-shell .pCard {
    padding: 18px;
  }

  .product-page-shell .pTitle {
    font-size: 25px;
  }

  .product-page-shell .pBuyRow {
    flex-direction: column;
    align-items: stretch;
  }

  .product-page-shell .pQty {
    justify-content: space-between;
  }

  .product-page-shell [data-detail-target] {
    scroll-margin-top: calc(var(--site-header-h, 72px) + 16px);
  }

  .product-page-shell .pOptionalGrid {
    grid-template-columns: 1fr;
  }

  .product-page-shell .pRowBtns {
    flex-direction: column;
  }

  .product-page-shell .pRowBtns .pGhostBtn,
  .product-page-shell .pRowBtns .pPrimaryBtn {
    width: 100%;
  }
}

.marketplace-trust-panel,
.price-history-mini,
.seller-trust-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
}

.trust-panel-head,
.seller-trust-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.marketplace-trust-panel h3,
.price-history-mini h3,
.seller-trust-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #111827;
}

.marketplace-trust-panel p,
.price-history-mini p,
.seller-trust-card p {
  margin: 5px 0 0;
  color: #6b7280;
  font-size: 13px;
}

.trust-score,
.seller-trust-card > span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fdf2f8;
  color: #d6218c;
  font-size: 20px;
  font-weight: 900;
  flex: 0 0 auto;
}

.trust-why-btn {
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #d6218c;
  font-weight: 800;
  padding: 8px 0;
}

.trust-reasons {
  margin-top: 6px;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
}

.trust-price-alert-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.trust-price-alert-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
}

.trust-price-alert-form button {
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #d6218c;
  color: #fff;
  font-weight: 800;
}

.price-history-bars {
  height: 78px;
  display: flex;
  align-items: end;
  gap: 5px;
  margin: 12px 0 8px;
}

.price-history-bars span {
  flex: 1;
  border-radius: 5px;
  background: #ff7a00;
  opacity: 0.85;
}