/* ============================================================================
   DDMUI26 · PDP (plantilla de producto individual) — CSS del prototipo
   Fuente: Claude Design, proyecto "ddm" (c41525ce…), archivo pdp.css.js
   Extraído 2026-07-07. Usa los tokens del sistema (--bg/--paper/--card/--tile/
   --ink/--muted/--violet/--violet2/--gold/--goldSoft/--line/--sh/--shS), los
   mismos que ya viven en home.css/global.css. La base fusion.css.js == home.css.
   Este archivo es REFERENCIA para portar a la plantilla WooCommerce single-product.
   ========================================================================== */

/* ===== breadcrumb ===== */
.p-crumb{display:flex;align-items:center;gap:9px;padding:22px 56px 0;font-size:13px;color:var(--muted);flex-wrap:wrap;}
.p-crumb a{color:var(--muted);transition:color .15s;}
.p-crumb a:hover{color:var(--gold);}
.p-crumb .sep{opacity:.5;}
.p-crumb .cur{color:var(--ink);font-weight:700;}

/* ===== main product layout ===== */
.p-main{display:grid;grid-template-columns:1.03fr .97fr;gap:44px;padding:26px 56px 30px;align-items:start;}

/* gallery */
.p-gallery{display:grid;grid-template-columns:74px 1fr;gap:14px;position:sticky;top:88px;}
.p-thumbs{display:flex;flex-direction:column;gap:11px;}
.p-thumb{width:74px;height:74px;border-radius:13px;overflow:hidden;background:var(--tile);border:2px solid var(--line);cursor:pointer;transition:border-color .15s,transform .15s;display:grid;place-items:center;padding:6px;}
.p-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;}
.p-thumb:hover{transform:translateY(-2px);}
.p-thumb.on{border-color:var(--gold);}
.p-thumb.ph{background:
  repeating-linear-gradient(135deg,rgba(160,107,255,.10) 0 8px,transparent 8px 16px),var(--tile);
  color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-align:center;padding:8px 4px;}
.p-gmain{position:relative;background:var(--tile);border-radius:22px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;box-shadow:var(--shS);border:1px solid var(--line);}
.p-gmain img{width:82%;height:82%;object-fit:contain;mix-blend-mode:normal;transition:transform .3s;}
.p-gmain:hover img{transform:scale(1.06);}
.p-gmain-ph{width:100%;height:100%;display:grid;place-items:center;background:
  repeating-linear-gradient(135deg,rgba(160,107,255,.06) 0 14px,transparent 14px 28px),
  radial-gradient(circle at 55% 40%,rgba(160,107,255,.16),transparent 60%),var(--tile);}
.p-gmain-ph span{font-family:'Mulish',monospace;font-size:13px;color:var(--muted);background:rgba(255,255,255,.6);padding:8px 14px;border-radius:9px;}
.ddm-fusion[data-theme="dark"] .p-gmain-ph span{background:rgba(0,0,0,.35);color:#cbbfe4;}
.p-flags{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:8px;z-index:2;}
.p-flag{font-family:'Baloo 2';font-weight:800;font-size:12.5px;padding:6px 12px;border-radius:9px;letter-spacing:.02em;}
.p-flag--sale{background:#e2483d;color:#fff;box-shadow:0 6px 16px rgba(226,72,61,.4);}
.p-flag--auth{background:var(--card);color:var(--gold);border:1px solid var(--line);}
.p-zoom{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:9px;z-index:2;}

/* info column */
.p-info{position:relative;}
.p-brand{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--violet);background:var(--card);border:1px solid var(--line);padding:6px 13px;border-radius:999px;}
.p-title{font-size:38px;line-height:1.08;margin:16px 0 0;letter-spacing:-.015em;}
.p-rate{display:flex;align-items:center;gap:12px;margin-top:14px;}
.p-stars{display:inline-flex;gap:2px;color:var(--gold);}
.p-rate-n{font-weight:800;color:var(--ink);font-size:15px;}
.p-rate-c{color:var(--muted);font-size:13.5px;border-left:1px solid var(--line);padding-left:12px;}
.p-rate-c a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.p-rate-c a:hover{color:var(--gold);}

.p-short{color:var(--muted);font-size:15.5px;line-height:1.6;margin-top:18px;max-width:520px;}

/* price */
.p-pricebox{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:22px;}
.p-now{font-family:'Baloo 2';font-weight:800;font-size:40px;color:var(--gold);line-height:1;}
.p-was{font-size:19px;color:var(--muted);text-decoration:line-through;}
.p-save{font-family:'Baloo 2';font-weight:800;font-size:13px;color:#fff;background:#e2483d;padding:5px 11px;border-radius:8px;}
.p-tax{font-size:12.5px;color:var(--muted);margin-top:7px;}

.p-points{display:flex;align-items:center;gap:10px;margin-top:16px;background:var(--goldSoft);border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));border-radius:12px;padding:11px 15px;font-size:13.5px;color:var(--ink);}
.p-points b{color:var(--gold);font-family:'Baloo 2';}
.p-points .ico{width:26px;height:26px;border-radius:8px;background:var(--gold);color:#241500;display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 auto;}

/* stock urgency */
.p-stock{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;font-weight:700;color:var(--ink);}
.p-stock .dot{width:9px;height:9px;border-radius:50%;background:#e2483d;box-shadow:0 0 0 4px rgba(226,72,61,.18);animation:p-pulse 1.6s ease-in-out infinite;}
@keyframes p-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.p-stock b{color:#e2483d;}
.p-stockbar{height:6px;border-radius:99px;background:var(--line);margin-top:10px;overflow:hidden;max-width:520px;}
.p-stockbar i{display:block;height:100%;width:14%;background:linear-gradient(90deg,#e2483d,#f0803d);border-radius:99px;}

/* buy row */
.p-buy{display:flex;gap:12px;margin-top:22px;align-items:stretch;}
.p-qty{display:inline-flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden;}
.p-qty button{width:44px;height:100%;background:transparent;color:var(--ink);font-size:20px;font-weight:700;display:grid;place-items:center;transition:color .15s,background .15s;}
.p-qty button:hover{color:var(--gold);background:var(--goldSoft);}
.p-qty button:disabled{opacity:.3;cursor:not-allowed;}
.p-qty span{min-width:40px;text-align:center;font-family:'Baloo 2';font-weight:800;font-size:17px;color:var(--ink);}
.p-addbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Baloo 2';font-weight:800;font-size:17px;padding:0 26px;border-radius:13px;background:var(--gold);color:#241500;box-shadow:0 10px 26px rgba(240,185,74,.32);transition:transform .15s,box-shadow .15s,background .2s;}
.p-addbtn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(240,185,74,.45);}
.p-addbtn.done{background:#37a85f;color:#fff;box-shadow:0 10px 26px rgba(55,168,95,.35);}
.p-addbtn svg{transition:transform .15s;}
.p-addbtn:hover svg{transform:translateX(3px);}
.p-buynow{width:100%;margin-top:11px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Baloo 2';font-weight:800;font-size:15.5px;padding:14px;border-radius:13px;background:transparent;color:var(--ink);border:1.5px solid var(--line);transition:all .15s;}
.p-buynow:hover{border-color:var(--violet);color:var(--violet);}

/* trust triad under CTA */
.p-triad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;}
.p-tcell{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 10px;}
.p-tcell .ti{color:var(--gold);}
.p-tcell b{font-size:12.5px;font-family:'Baloo 2';font-weight:700;color:var(--ink);}
.p-tcell small{font-size:11px;color:var(--muted);line-height:1.3;}

/* ship + help + meta */
.p-ship{display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:14px 16px;border-radius:13px;border:1px dashed color-mix(in srgb,var(--gold) 35%,var(--line));background:var(--goldSoft);}
.p-ship .si{color:var(--gold);flex:0 0 auto;margin-top:1px;}
.p-ship-t{font-size:13.5px;color:var(--ink);font-weight:700;}
.p-ship-s{font-size:12.5px;color:var(--muted);margin-top:2px;}
.p-ship-s b{color:var(--gold);}
.p-help{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:var(--muted);}
.p-help a{color:var(--gold);font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.p-help a:hover{text-decoration:underline;}
.p-metarow{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);}
.p-metarow b{color:var(--ink);font-weight:700;}
.p-metarow a{color:var(--violet);}
.p-metarow a:hover{color:var(--gold);}

/* ===== detail sections ===== */
.p-sec{padding:24px 56px;}
.p-sec--tint{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 56px;}
.p-sechead{display:flex;align-items:center;gap:13px;margin-bottom:24px;}
.p-secnum{font-family:'Baloo 2';font-weight:800;font-size:15px;color:var(--gold);opacity:.7;}
.p-sech2{font-size:27px;}

/* description grid */
.p-descgrid{display:grid;grid-template-columns:1.3fr .9fr;gap:34px;align-items:start;}
.p-descbody{color:var(--muted);font-size:15.5px;line-height:1.7;}
.p-descbody p{margin-bottom:14px;}
.p-descbody strong{color:var(--ink);}
.p-lang{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:16px;}

/* contents cards */
.p-contents{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.p-cbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden;}
.p-cbox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--violet2);}
.p-cbox--big{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;}
.p-cqty{font-family:'Baloo 2';font-weight:800;font-size:34px;color:var(--gold);line-height:1;}
.p-cbox--big .p-cqty{font-size:44px;}
.p-cname{font-family:'Baloo 2';font-weight:700;font-size:14.5px;color:var(--ink);}
.p-cdesc{font-size:12.5px;color:var(--muted);line-height:1.4;}

/* specs table */
.p-specs{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.p-specrow{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:13px 18px;font-size:13.5px;border-bottom:1px solid var(--line);}
.p-specrow:last-child{border-bottom:none;}
.p-specrow .k{color:var(--muted);font-weight:700;}
.p-specrow .v{color:var(--ink);}

/* reviews */
.p-revtop{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:center;}
.p-revscore{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 18px;}
.p-revbig{font-family:'Baloo 2';font-weight:800;font-size:56px;color:var(--gold);line-height:1;}
.p-revstars{display:inline-flex;gap:3px;color:var(--gold);margin:10px 0 6px;}
.p-revsub{font-size:12.5px;color:var(--muted);}
.p-revbars{display:flex;flex-direction:column;gap:8px;}
.p-revbar{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);}
.p-revbar .lab{width:38px;font-weight:700;color:var(--ink);}
.p-revbar .track{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden;}
.p-revbar .track i{display:block;height:100%;background:var(--gold);border-radius:99px;}
.p-revbar .num{width:34px;text-align:right;}
.p-revlist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;}
.p-rev{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;}
.p-rev-h{display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.p-rev-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:'Baloo 2';font-weight:800;color:#fff;font-size:15px;flex:0 0 auto;}
.p-rev-n{font-weight:800;font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:6px;}
.p-rev-vf{font-size:10px;font-weight:800;color:#37a85f;background:rgba(55,168,95,.14);padding:2px 6px;border-radius:5px;letter-spacing:.02em;}
.p-rev-d{font-size:11.5px;color:var(--muted);}
.p-rev-st{display:inline-flex;gap:2px;color:var(--gold);margin-bottom:8px;}
.p-rev-t{font-size:13.5px;color:var(--ink);line-height:1.55;}

/* related / cross-sell */
.p-relgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.p-bundle{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-top:4px;flex-wrap:wrap;}
.p-bundle-imgs{display:flex;align-items:center;gap:8px;}
.p-bimg{width:76px;height:76px;border-radius:12px;background:var(--tile);display:grid;place-items:center;padding:8px;overflow:hidden;}
.p-bimg img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;}
.p-bplus{font-size:22px;color:var(--muted);font-weight:300;}
.p-bundle-r{margin-left:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.p-btot{font-size:12.5px;color:var(--muted);}
.p-btot b{display:block;font-family:'Baloo 2';font-weight:800;font-size:24px;color:var(--gold);}

/* sticky buy bar */
.p-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);}
.p-sticky.show{transform:translateY(0);}
.p-sticky-in{max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:13px 56px;}
.p-sk-img{width:48px;height:48px;border-radius:11px;background:var(--tile);display:grid;place-items:center;padding:5px;flex:0 0 auto;}
.p-sk-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;}
.p-sk-t{font-family:'Baloo 2';font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.15;max-width:340px;}
.p-sk-p{margin-left:auto;display:flex;align-items:baseline;gap:9px;}
.p-sk-now{font-family:'Baloo 2';font-weight:800;font-size:22px;color:var(--gold);}
.p-sk-was{font-size:13px;color:var(--muted);text-decoration:line-through;}
.p-sk-btn{display:inline-flex;align-items:center;gap:8px;font-family:'Baloo 2';font-weight:800;font-size:15px;padding:12px 24px;border-radius:12px;background:var(--gold);color:#241500;transition:transform .15s;}
.p-sk-btn:hover{transform:translateY(-1px);}

/* ===== puente: formulario add-to-cart de WooCommerce → look del diseño ===== */
.ddm-pdp form.cart{display:flex;gap:12px;margin-top:22px;align-items:stretch;flex-wrap:wrap;}
.ddm-pdp form.cart .quantity{display:inline-flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden;}
.ddm-pdp form.cart .quantity input.qty{width:58px;text-align:center;background:transparent;border:none;color:var(--ink);font-family:'Baloo 2';font-weight:800;font-size:17px;}
.ddm-pdp form.cart .single_add_to_cart_button{flex:1;min-width:200px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Baloo 2';font-weight:800;font-size:17px;border-radius:13px;}
/* la ficha va full-width dentro del wrapper del tema */
.ddm-pdp{max-width:1440px;margin:0 auto;}
.woocommerce .ddm-pdp .p-relgrid ul.products,.ddm-pdp .p-relgrid{margin:0;}

/* ============================================================================
   PDP · fixes de integración (2026-07-07)
   ========================================================================== */
/* galería: si el producto no tiene miniaturas, una sola columna (evita que
   .p-gmain caiga en la columna de 74px y se colapse) */
.ddm-pdp .p-gallery{grid-template-columns:1fr;}
.ddm-pdp .p-gallery:has(.p-thumbs){grid-template-columns:74px 1fr;}

/* dedup: ocultar el stock/availability nativo (usamos .p-stock) */
.ddm-pdp form.cart .stock,
.ddm-pdp .ast-stock-avail,
.ddm-pdp .ast-stock-detail{display:none !important;}

/* puntos: usamos el mensaje NATIVO de YITH (.product-point-conversion, valor
   correcto) y lo vestimos como la caja del diseño */
.ddm-pdp .product-point-conversion{
  display:flex;align-items:center;gap:10px;margin:16px 0 0;
  background:var(--goldSoft);border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));
  border-radius:12px;padding:11px 15px;font-size:13.5px;color:var(--ink);line-height:1.4;
}
.ddm-pdp .product-point-conversion strong,
.ddm-pdp .product-point-conversion .product_point{color:var(--gold);font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;}
.ddm-pdp .product-point-conversion img{width:22px;height:22px;flex:0 0 auto;}

/* responsive */
@media (max-width:900px){
  .ddm-pdp .p-crumb{padding:16px 20px 0;}
  .ddm-pdp .p-main{grid-template-columns:1fr;gap:26px;padding:20px 20px 26px;}
  .ddm-pdp .p-gallery{position:static;}
  .ddm-pdp .p-title{font-size:30px;}
  .ddm-pdp .p-sec,.ddm-pdp .p-sec--tint{padding:34px 20px;}
  .ddm-pdp .p-relgrid{grid-template-columns:repeat(2,1fr);}
  .ddm-pdp .p-sticky-in{padding:12px 16px;gap:12px;}
  .ddm-pdp .p-sk-t{display:none;}
}
@media (max-width:560px){
  .ddm-pdp .p-triad{grid-template-columns:1fr;}
  .ddm-pdp .p-relgrid{grid-template-columns:repeat(2,1fr);}
  .ddm-pdp .p-now{font-size:34px;}
  .ddm-pdp .p-specrow{grid-template-columns:110px 1fr;gap:10px;}
}

/* ============================================================================
   Relacionados: usan ddmui26_card (.m-card/.m-tile) pero home.css NO carga en la
   ficha de producto → sus imágenes quedaban sin estilo (object-fit:fill, inline).
   Se replican aquí las reglas de tarjeta de home.css, con el tratamiento
   cover + scale(1.65) que recorta los márgenes blancos de la foto.
   ========================================================================== */
.ddm-pdp .p-relgrid .m-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:13px;transition:transform .18s,box-shadow .18s,border-color .18s;display:block;}
.ddm-pdp .p-relgrid .m-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--violet) 45%,var(--line));}
.ddm-pdp .p-relgrid .m-tile{background:var(--tile);border-radius:13px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;}
.ddm-pdp .p-relgrid .m-tile img{width:100%;height:100%;object-fit:cover;transform:scale(1.65);transition:transform .25s;}
.ddm-pdp .p-relgrid .m-card:hover .m-tile img{transform:scale(1.72);}
.ddm-pdp .p-relgrid .m-cmeta{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--violet);margin-top:12px;display:block;}
.ddm-pdp .p-relgrid .m-cname{font-size:14.5px;font-weight:700;margin-top:4px;min-height:38px;font-family:'Baloo 2',system-ui,sans-serif;line-height:1.18;color:var(--ink);display:block;}
.ddm-pdp .p-relgrid .m-crow{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.ddm-pdp .p-relgrid .m-add{width:38px;height:38px;border-radius:11px;background:var(--violet2);color:#fff;display:grid;place-items:center;transition:all .15s;flex:0 0 auto;}
.ddm-pdp .p-relgrid .m-add:hover{transform:scale(1.08);}