/* Extracted from produs.php - DO NOT MODIFY STRUCTURE WITHOUT TESTING */

    .twMobileBackBar{display:none}
    @media (max-width: 768px){
      .twMobileBackBar{
        display:flex;
        gap:10px;
        align-items:center;
        position: sticky;
        top: 64px;
        z-index: 40;
        background: rgba(44, 46, 50, 0.92);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 10px 12px;
        margin: 10px 0 12px;
        backdrop-filter: blur(10px);
      }
      .twMobileBackBar__btn{
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: rgba(255,255,255,0.06);
        color: var(--text-0);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .twMobileBackBar__btn--link{
        border-color: rgba(191,159,105,.55);
        color: var(--gold-0);
        background: rgba(191,159,105,.08);
      }
    }

    .productShell{
      max-width: 1120px;
      margin: 0 auto;
      padding: 10px 0 28px;
    }
    .breadcrumb{
      opacity: .82;
      font-size: 12px;
      letter-spacing: .2px;
      margin: 6px 0 10px;
    }
    .breadcrumb a{
      color: var(--text-1);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color .2s ease, border-color .2s ease;
    }
    .breadcrumb a:hover{ color: var(--gold-0); border-color: rgba(191,159,105,.55); }
    .product-detail{
      border: 1px solid rgba(255,255,255,0.06);
      background: linear-gradient(180deg, rgba(20,22,26,.92), rgba(16,18,22,.92));
      border-radius: 18px;
      box-shadow: 0 24px 60px rgba(0,0,0,.50);
      overflow: hidden;
    }
    .product-detail__header{
      padding: 18px 18px 6px;
    }
    .product-detail__header h1{
      margin: 6px 0 6px;
      letter-spacing: .2px;
      line-height: 1.12;
    }
    .product-detail__meta{
      margin: 0;
      color: var(--text-1);
      font-size: 13px;
      letter-spacing: .2px;
    }
    .productHero{
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 18px;
      padding: 14px 18px 18px;
      align-items: start;
    }
    .productHero > *{ min-width: 0; }
    .product-detail__media{
      border-radius: 16px;
      background: radial-gradient(120% 90% at 20% 10%, rgba(191,159,105,.10), transparent 55%),
                  linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,0.08);
      overflow: hidden;
      min-height: 360px;
      display: grid;
      place-items: center;
      position: relative;
    }
    .product-detail__media img{
      width: 100%;
      height: 100%;
      max-height: 520px;
      object-fit: contain;
      display: block;
      padding: 14px;
      background: rgba(0,0,0,0.18);
      transition: transform .25s ease;
    }
    @media (hover:hover){
      .product-detail__media:hover img{ transform: scale(1.015); }
    }
    .product-detail__body{
      padding: 0;
    }
    .productIntro{
      color: var(--text-0);
      font-size: 15px;
      line-height: 1.75;
      margin: 12px 0 0;
      max-width: 62ch; /* ~600px readability */
      font-weight: 800;
      letter-spacing: .12px;
      padding: 12px 14px;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(191,159,105,.10), rgba(255,255,255,.02));
      border: 1px solid rgba(191,159,105,.18);
    }
    .productSep{
      height: 1px;
      width: 100%;
      max-width: 64ch;
      margin: 16px 0 6px;
      background: linear-gradient(90deg, rgba(191,159,105,.35), rgba(255,255,255,0.08), rgba(255,255,255,0));
      border-radius: 999px;
    }
    .productDetailText{
      color: var(--text-1);
      font-size: 14px;
      line-height: 1.85;
      margin: 14px 0 0;
      max-width: 64ch;
      word-break: break-word;
    }
    .specGrid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 14px;
    }
    .specItem{
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      border-radius: 14px;
      padding: 10px 12px;
      transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
    }
    @media (hover:hover){
      .specItem:hover{
        border-color: rgba(191,159,105,.35);
        box-shadow: 0 0 0 2px rgba(191,159,105,.10) inset, 0 14px 34px rgba(0,0,0,.35);
        transform: translateY(-1px);
      }
    }
    .specLabel{
      font-size: 11px;
      letter-spacing: .35px;
      color: rgba(184, 188, 194, .9);
      text-transform: uppercase;
      margin: 0 0 4px;
      font-weight: 700;
    }
    .specValue{
      margin: 0;
      font-size: 14px;
      color: var(--text-0);
      font-weight: 700;
      line-height: 1.25;
      word-break: break-word;
    }
    .ctaGroup{
      margin-top: 18px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "primary primary"
        "call wa";
      gap: 10px;
      align-items: stretch;
      max-width: 64ch;
    }
    .ctaGroup .btn{
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 14px;
      border-radius: 14px;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
    }
    .ctaGroup .btn.btn-primary{
      grid-area: primary;
      font-size: 14px;
      letter-spacing: .15px;
    }
    .ctaGroup .btn[href^="tel:"]{ grid-area: call; }
    .ctaGroup .btn[href^="https://wa.me"]{ grid-area: wa; }
    /* Colored secondary CTAs (call + WhatsApp) with subtle glow */
    .ctaGroup .btnCall{
      background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(56,189,248,.10));
      border: 1px solid rgba(56,189,248,.45);
      color: rgba(226, 243, 255, .96) !important;
      box-shadow: 0 0 0 2px rgba(56,189,248,.08) inset;
    }
    .ctaGroup .btnWA{
      background: linear-gradient(180deg, rgba(37,211,102,.22), rgba(37,211,102,.10));
      border: 1px solid rgba(37,211,102,.48);
      color: #25D366 !important;
      box-shadow: 0 0 0 2px rgba(37,211,102,.08) inset;
    }
    @media (hover:hover){
      .ctaGroup .btnCall:hover{
        transform: translateY(-1px);
        box-shadow: 0 0 0 2px rgba(56,189,248,.12) inset, 0 0 22px rgba(56,189,248,.28), 0 18px 44px rgba(0,0,0,.38);
        border-color: rgba(56,189,248,.62);
      }
      .ctaGroup .btnWA:hover{
        transform: translateY(-1px);
        box-shadow: 0 0 0 2px rgba(37,211,102,.12) inset, 0 0 22px rgba(37,211,102,.26), 0 18px 44px rgba(0,0,0,.38);
        border-color: rgba(37,211,102,.66);
      }
    }
    @media (max-width: 520px){
      .ctaGroup{
        /* Keep 2-up secondary CTAs on most phones */
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "primary primary"
          "call wa";
      }
      .ctaGroup .btn{ width: 100%; }
      .ctaGroup .btn.btn-primary{ justify-content: center; }
    }
    .backInline{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      color: rgba(191,159,105,.92);
      text-decoration: none;
      font-weight: 700;
      font-size: 13px;
      opacity: .92;
      max-width: 64ch;
    }
    .backInline:hover{ text-decoration: underline; opacity: 1; }
    @media (max-width: 900px){
      .productHero{ grid-template-columns: 1fr; }
      .product-detail__media{ min-height: 260px; }
      .product-detail__header{ padding-bottom: 2px; }
    }
    @media (max-width: 480px){
      .productShell{ padding: 6px 0 20px; }
      .breadcrumb{ margin: 6px 0 8px; }
      .productHero{ padding: 12px 12px 16px; gap: 16px; }
      .product-detail__header{ padding: 14px 12px 4px; }
      .product-detail__media{ min-height: 230px; }
      .product-detail__media img{ padding: 12px; }
      /* Specs: 1 column, more breathing room */
      .specGrid{ grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
      .specItem{ padding: 12px 14px; }
      .productIntro, .productDetailText{ max-width: none; }
      /* Spacing rhythm between blocks */
      .productIntro{ margin-top: 14px; }
      .productSep{ margin: 18px 0 8px; }
      .productDetailText{ margin-top: 12px; }
      .ctaGroup{ margin-top: 18px; gap: 12px; }
      .ctaGroup .btn{ min-height: 52px; font-size: 15px; }
      .backInline{ max-width: none; }
    }

    /* Very small phones: stack secondary CTAs */
    @media (max-width: 360px){
      .ctaGroup{
        grid-template-columns: 1fr;
        grid-template-areas:
          "primary"
          "call"
          "wa";
      }
    }

    /* Similar products: reuse catalog card style, compact */
    .productSimilar{ margin-top: 24px; }
    .productSimilar .similarGrid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    @media (max-width: 900px){
      .productSimilar .similarGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 520px){
      /* Mobile: keep it as a compact grid, not a long list */
      .productSimilar .similarGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .productSimilar .prodMedia{ height: 150px !important; }
    }
    @media (max-width: 360px){
      .productSimilar .similarGrid{ grid-template-columns: 1fr; }
    }
    .productSimilar .prodMedia{ height: 190px; }
    .productSimilar .prodBody{ padding: 14px 14px 12px; gap: 10px; }
    .productSimilar .prodTitle{ font-size: 15px; }
    .productSimilar .prodMeta{ font-size: 11px; opacity: .9; }