:root{
      --strap-accent: <?php echo e($dtTheme['accent']); ?>;
      --strap-text: #111827;
      --strap-muted: #6b7280;
      --strap-line: rgba(17,24,39,.08);
      --strap-soft: #f8fafc;
      --strap-card: #ffffff;
      --strap-shadow: 0 18px 50px rgba(15,23,42,.08);
    }

    .strap-page{ background: linear-gradient(180deg,#f8fafc 0%,#ffffff 24%,#f8fafc 100%); }
    .strap-shell{ max-width: 1280px; }
    .strap-card{
      background: var(--strap-card);
      border: 1px solid rgba(255,255,255,.75);
      border-radius: 28px;
      box-shadow: var(--strap-shadow);
    }

    .strap-breadcrumb{
      display:flex;
      align-items:center;
      gap:.65rem;
      flex-wrap:wrap;
      color:var(--strap-muted);
      font-size:13px;
    }
    .strap-breadcrumb a:hover{ color: var(--strap-accent); }

    .strap-badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.5rem .9rem;
      border-radius:999px;
      background: rgba(255,255,255,.7);
      border:1px solid rgba(17,24,39,.08);
      color:#111827;
      font-size:13px;
      font-weight:600;
      backdrop-filter: blur(8px);
    }

    .strap-hero{
      position:relative;
      overflow:hidden; 
    }

    .strap-hero::before{
      content:"";
      position:absolute;
      width:320px;
      height:320px;
      right:-80px;
      top:-120px;
      border-radius:999px;
      background: radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0));
      pointer-events:none;
    }

    .dt-gallery{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      min-height: 620px;
    }
    .dt-decor{ position:absolute; inset:0; pointer-events:none; z-index:1; }
    .dt-gallery::before{
      content:"";
      position:absolute;
      inset:14px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.16);
      pointer-events:none;
      z-index:1;
    }
 
    .dt-default .dt-shine{
      background: radial-gradient(120% 80% at 20% 25%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 65%);
      mix-blend-mode: screen;
      opacity:.9;
    }

    .dt-hirsch{
      background: linear-gradient(135deg,#2c1f18,#5a4032,#8a6749);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -12px 28px rgba(0,0,0,.22);
    }
    .dt-hirsch .dt-wave{
      background: repeating-radial-gradient(circle at 30% 70%, rgba(255,255,255,.08) 0px, rgba(255,255,255,.08) 1px, rgba(255,255,255,0) 8px, rgba(255,255,255,0) 14px);
      opacity:.75;
    }
    .dt-hirsch .dt-shine{
      background: radial-gradient(120% 80% at 20% 25%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 65%);
      mix-blend-mode: screen;
      opacity:.9;
    }

    .dt-morellato{
      background: linear-gradient(135deg,#111827,#374151,#6b7280);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -12px 28px rgba(0,0,0,.22);
    }
    .dt-morellato .dt-ring{
      background: repeating-radial-gradient(circle at 58% 38%, rgba(255,255,255,.10) 0px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 8px, rgba(255,255,255,0) 12px);
      opacity:.85;
    }
    .dt-morellato .dt-shine{
      background: radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 58%);
      opacity:.9;
    }

    .dt-rios{
      background: linear-gradient(135deg,#0f5132,#198754,#4ade80);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -12px 28px rgba(0,0,0,.22);
    }
    .dt-rios .dt-gdiag{
      position:absolute;
      left:-35%; right:-35%;
      top:56%; height:28%;
      transform: rotate(-14deg);
      background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0));
      opacity:.55;
      z-index:2;
    }
    .dt-rios .dt-dots{
      background: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
      background-size:14px 14px;
      opacity:.28;
    }

    .strap-main-image{
     padding: 2rem;
    display: block;
    margin: auto;
    width: 50%;
    position: relative;
    z-index: 2;
    transition: transform .35s ease;
    }

    @media (max-width: 480px) {
  .strap-main-image {
    padding: 0.75rem;
    width: 85%;
  }
}


    .swiper-slide:hover .strap-main-image{ transform: scale(1.02); }

    .strap-thumbs-wrap{
      margin-top: 16px;
      padding: 14px;
      background: rgba(255,255,255,.76);
      border-radius: 22px;
      border:1px solid rgba(17,24,39,.06);
      backdrop-filter: blur(10px);
    }
    .swiper-thumbs .swiper-slide{
      width: 92px !important;
      height: 112px;
      border-radius: 18px;
      overflow:hidden;
      border:1px solid rgba(17,24,39,.08);
      background:#fff;
      opacity:.65;
      transition: all .25s ease;
    }
    .swiper-thumbs .swiper-slide-thumb-active{
      opacity:1;
      transform: translateY(-2px);
      box-shadow: 0 10px 26px rgba(15,23,42,.10);
      border-color: rgba(17,24,39,.2);
    }
    .swiper-thumbs img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .strap-summary{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 24px;
    }
    .strap-summary-item{
      background:#fff;
      border:1px solid var(--strap-line);
      border-radius:20px;
      padding:16px 18px;
    }
    .strap-summary-label{
      font-size:12px;
      color:var(--strap-muted);
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:4px;
    }
    .strap-summary-value{
      color:var(--strap-text);
      font-weight:700;
    }

    .strap-brand-chip{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.55rem .95rem;
      border-radius:999px;
      background: rgba(17,24,39,.04);
      color:var(--strap-accent);
      border:1px solid rgba(17,24,39,.06);
      font-weight:700;
      font-size:13px;
    }

    .strap-title{
      font-size: clamp(28px, 4vw, 46px);
      line-height:1.05;
      font-weight:800;
      color:#0f172a;
      letter-spacing:-.03em;
    }

    .strap-subtitle{
      font-size: 16px;
      line-height: 1.75;
      color: #475569;
      max-width: 58ch;
    }

    .strap-rating{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      color:#334155;
    }

    .strap-price-row{
      display:flex;
      align-items:flex-end;
      gap:14px;
      flex-wrap:wrap;
      margin-top: 28px;
      padding: 24px 0;
      border-top:1px solid var(--strap-line);
      border-bottom:1px solid var(--strap-line);
    }
    .strap-price{
      font-size: clamp(32px, 5vw, 48px);
      line-height:1;
      font-weight:800;
      color:#0f172a;
      letter-spacing:-.03em;
    }
    .strap-old-price{
      font-size:18px;
      color:#94a3b8;
      text-decoration:line-through;
    }
    .strap-discount{
      display:inline-flex;
      align-items:center;
      padding:.5rem .9rem;
      border-radius:999px;
      background:#dcfce7;
      color:#166534;
      font-weight:800;
      font-size:13px;
    }

    .strap-feature-list{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:14px;
      margin-top: 26px;
    }
    .strap-feature{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px 16px;
      border-radius:18px;
      background:#fff;
      border:1px solid var(--strap-line);
    }
    .strap-feature-icon{
      width:38px;
      height:38px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(17,24,39,.05);
      color:var(--strap-accent);
      flex-shrink:0;
    }
    .strap-feature-title{
      font-size:13px;
      color:var(--strap-muted);
      margin-bottom:2px;
      font-weight:600;
    }
    .strap-feature-value{
      font-size:15px;
      font-weight:700;
      color:var(--strap-text);
    }

    .strap-actions{
      margin-top: 30px;
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      align-items:stretch;
    }

    .strap-qty{
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-width: 152px;
      gap:16px;
      padding: 0 14px;
      height: 58px;
      border-radius:18px;
      border:1px solid rgba(17,24,39,.10);
      background:#fff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
    }
    .strap-qty-btn{
      width:34px;
      height:34px;
      border-radius:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      background:#f8fafc;
      transition:all .2s ease;
    }
    .strap-qty-btn:hover{ background:#eef2f7; }
    .strap-qty input{
      width:42px;
      text-align:center;
      border:none;
      background:transparent;
      font-weight:700;
      outline:none;
    }

    .strap-btn{
      height:58px;
      border-radius:18px;
      padding: 0 24px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      font-weight:700;
      transition: all .25s ease;
      cursor:pointer;
    }
    .strap-btn-primary{ 
      color:#fff;
      background-color: #263587;
      box-shadow: 0 16px 28px rgba(15,23,42,.16);
    }
    .strap-btn-primary:hover{ transform: translateY(-1px); }
    .strap-btn-secondary{
      background:#fff;
      color:#111827;
      border:1px solid rgba(17,24,39,.10);
    }
    .strap-btn-secondary:hover{ background:#f8fafc; }

    .strap-meta-card{
      margin-top:18px;
      padding:18px;
      border-radius:20px;
      background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(248,250,252,.96));
      border:1px solid rgba(17,24,39,.06);
    }
    .strap-meta-row{
      display:flex;
      justify-content:space-between;
      gap:20px;
      padding:12px 0;
      border-bottom:1px dashed rgba(17,24,39,.08);
      font-size:14px;
    }
    .strap-meta-row:last-child{ border-bottom:none; }
    .strap-meta-row span:first-child{ color:var(--strap-muted); }
    .strap-meta-row span:last-child{ color:#0f172a; font-weight:700; text-align:right; }

    .strap-tabs-card{
      margin-top: 34px;
      padding: 12px;
      background: rgba(255,255,255,.8);
      border:1px solid rgba(17,24,39,.06);
      border-radius: 28px;
      box-shadow: var(--strap-shadow);
    }
    .strap-tab-buttons{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom: 12px;
    }
    .strap-tab-btn{
      padding: 12px 18px;
      border-radius: 999px;
      border:1px solid rgba(17,24,39,.08);
      background:#fff;
      color:#334155;
      font-weight:700;
      cursor:pointer;
      transition:all .2s ease;
    }
    .strap-tab-btn.active{
      background:#111827;
      color:#fff;
      border-color:#111827;
    }
    .strap-tab-panel{
      display:none;
      padding: 24px;
      border-radius: 22px;
      background: linear-gradient(180deg,#fff,#fbfdff);
      border:1px solid rgba(17,24,39,.05);
    }
    .strap-tab-panel.active{ display:block; }

    .strap-spec-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:14px;
    }
    .strap-spec-item{
      display:flex;
      justify-content:space-between;
      gap:20px;
      padding:16px 18px;
      border-radius:18px;
      background:#fff;
      border:1px solid rgba(17,24,39,.06);
    }
    .strap-spec-item .label{ color:var(--strap-muted); font-weight:600; }
    .strap-spec-item .value{ color:#0f172a; font-weight:700; text-align:right; }

    .strap-description{
      color:#475569;
      line-height:1.9;
      font-size:16px;
    }

    @media (max-width: 991px){
      .dt-gallery{ min-height: 460px; }
      .strap-feature-list,
      .strap-summary,
      .strap-spec-grid{ grid-template-columns: 1fr; }
    }

    @media (max-width: 767px){
      .strap-hero{ border-radius:24px; }
      .strap-card{ border-radius:22px; }
      .dt-gallery{ min-height: 360px; border-radius:22px; }
      .dt-gallery::before{ inset:10px; border-radius:16px; }
      .strap-main-image{ padding: 1.25rem; }
      .strap-tab-panel{ padding:18px; } 
      .strap-btn,
      .strap-qty{ width:100%; }
      .swiper-thumbs .swiper-slide{ width:74px !important; height:92px; }
    } 


    .strap-tab-panel {
    display: none;
}

.strap-tab-panel.active {
    display: block;
}

.strap-swiper-prev,
.strap-swiper-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.strap-swiper-prev {
    left: 14px;
}

.strap-swiper-next {
    right: 14px;
}

.strap-swiper-pagination {
    position: absolute;
    bottom: 12px !important;
    left: 0;
    width: 100%;
    z-index: 5;
}

.swiper-thumbs .swiper-slide {
    cursor: pointer;
    opacity: .55;
}

.swiper-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #111827;
    border-radius: 14px;
}

@media (max-width: 768px) {
    .strap-main-image {
        width: 90%;
        padding: 1rem;
    }

    .strap-swiper-prev,
    .strap-swiper-next {
        width: 34px;
        height: 34px;
    }
}

.strap-dimension-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.strap-dimension-item {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: all 0.25s ease;
}

.strap-dimension-item:hover {
  background: #e5e7eb;
}

.strap-dimension-item.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}