/* =============================================================================
   DropDigitals — Detalle de producto (producto.html)
   Solo usa tokens var(--...) existentes. Sin colores hardcodeados.
   ============================================================================= */

/* ---- Layout principal: visual + compra ---- */
.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  margin-top: clamp(1.5rem, 2vw, 2.25rem);
}

@media (max-width: 860px) {
  /* minmax(0, …) y no "1fr" a secas: con "1fr" la columna no puede achicarse
     por debajo del ancho mínimo de su contenido y en el celular la ficha se
     salía de la pantalla (aparecía barra horizontal). */
  .pd-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pd-visual,
.pd-buy {
  min-width: 0;
}

/* ---- Columna visual ---- */
.pd-visual {
  position: sticky;
  top: calc(var(--header-h, 70px) + 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

@media (max-width: 860px) {
  .pd-visual {
    position: static;
  }
}

.pd-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(280px, 38vw, 420px);
  padding: 2rem;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--surface) 0%, var(--bg-subtle) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.pd-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 0%, transparent 75%);
  pointer-events: none;
}

.pd-stage .brand-glyph {
  position: relative;
  box-shadow: var(--shadow-md);
}

.pd-stage__pins {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  z-index: 2;
}

.pd-stage__secure {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
}

/* ---- Mini galería / sellos bajo el visual ---- */
/* minmax(0,1fr): sin él, el ancho mínimo del texto desborda las 3 columnas en móvil */
.pd-seals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (max-width: 560px) {
  .pd-seal {
    padding: 0.7rem 0.4rem;
    gap: 0.3rem;
  }

  .pd-seal span {
    font-size: 0.7rem;
  }
}

.pd-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: 0.85rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.pd-seal svg {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--brand);
}

.pd-seal span {
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--ink-muted);
  font-weight: 600;
  /* Tres sellos en fila: con la letra grande, "Instalación" no cabía en su
     tercio y asomaba fuera del recuadro. */
  overflow-wrap: break-word;
  min-width: 0;
}

/* ---- Columna de compra ---- */
.pd-buy {
  display: flex;
  flex-direction: column;
}

.pd-cat {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: 0.01em;
}

.pd-buy h1 {
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0.35rem 0 0.6rem;
}

.pd-rating {
  margin-bottom: 1rem;
}

.pd-summary {
  color: var(--ink-body);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 1.25rem;
}

.pd-price-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 0;
  border-block: 1px solid var(--border);
}

.pd-save {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.2rem;
}

.pd-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0;
}

.pd-highlights {
  margin: 0.5rem 0 1.5rem;
}

/* ---- Compra: cantidad + acciones ---- */
/* ---- Cómo lo recibes (tipo de entrega, ANTES de comprar) ---- */
.pd-fulfill {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius: var(--r-lg);
  margin-bottom: 1rem;
}

.pd-fulfill__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  color: var(--brand-strong);
}

.pd-fulfill__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.pd-fulfill__txt b {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.pd-fulfill__txt p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

.pd-fulfill__note {
  margin-top: 0.45rem !important;
  color: var(--ink) !important;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}

.pd-fulfill__note svg {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.15rem;
  color: var(--warn, #d97706);
}

/* ---- Garantía: una línea chica, verde si cubre y roja si no hay reposición.
       Va debajo de "cómo lo recibes" y siempre visible antes de pagar. ---- */
.pd-warranty {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: -0.35rem 0 1.1rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.pd-warranty svg {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.15rem;
}

.pd-warranty b {
  font-weight: 700;
}

.pd-warranty.is-ok {
  color: color-mix(in srgb, var(--success, #b55217) 78%, var(--muted));
}

.pd-warranty.is-ok svg,
.pd-warranty.is-ok b {
  color: var(--success, #b55217);
}

.pd-warranty.is-bad {
  color: color-mix(in srgb, var(--danger, #c0392b) 72%, var(--muted));
}

.pd-warranty.is-bad svg,
.pd-warranty.is-bad b {
  color: var(--danger, #c0392b);
}

/* La misma garantía, destacada dentro de la pestaña "Garantía y renovación". */
.pd-warranty-lead {
  margin: 0 0 0.6rem !important;
  font-size: 0.92rem;
}

.pd-warranty-lead.is-ok b {
  color: var(--success, #b55217);
}

.pd-warranty-lead.is-bad b {
  color: var(--danger, #c0392b);
}

.pd-purchase {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ---- Caja de compra con volumen (estilo "estuche" 3D) ----------------------
   La pieza que decide la venta: se levanta del resto con una plancha de apoyo
   detrás (::before), un filo de marca arriba (::after) y sombra en capas. Al
   pasar el cursor sube un poco, como una caja que se toma con la mano. */
.pd-buybox {
  position: relative;
  margin-top: 0.4rem;
  margin-bottom: 0.9rem;
  padding: 1.4rem 1.35rem 1.2rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px oklch(0.24 0.05 255 / 0.05),
    0 12px 26px oklch(0.24 0.05 255 / 0.10),
    0 30px 54px oklch(0.24 0.06 255 / 0.09);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}

/* Plancha de apoyo: el canto que asoma por debajo y le da cuerpo */
.pd-buybox::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 1.15rem;
  right: 1.15rem;
  bottom: -0.6rem;
  height: 1.4rem;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: color-mix(in oklch, var(--brand) 12%, var(--surface-2));
}

/* Filo de marca en el borde superior */
.pd-buybox::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 1.6rem;
  right: 1.6rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-strong));
}

.pd-buybox:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px oklch(0.24 0.05 255 / 0.05),
    0 18px 34px oklch(0.24 0.05 255 / 0.13),
    0 40px 70px oklch(0.24 0.06 255 / 0.11);
}

/* El "Pagar ahora" es el protagonista de la caja */
.pd-buybox .pd-actions .btn--primary {
  font-size: 1.05rem;
  padding-block: 0.95rem;
}

/* ---- Franja de medios de pago dentro de la caja ---- */
.pd-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.pd-pay__t {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.pd-pay__t svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--brand);
  flex: none;
}

.pd-pay__marks {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.pd-pay__marks .paymark {
  width: 2.55rem;
  height: 1.6rem;
}

/* ---- Detalle largo: va DEBAJO de la caja de compra ---- */
.pd-detail {
  margin-top: 0.4rem;
}

.pd-detail__t {
  margin: 1.3rem 0 0.2rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}



.pd-qty-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.pd-qty-row>label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-body);
}

/* flex: none — el selector de cantidad es un CONTROL: nunca se encoge. Si se
   encoge, sus botones +/- quedan recortados y deja de poder usarse. */
.pd-stepper {
  display: inline-flex;
  align-items: center;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.pd-stepper button {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--ink-body);
  transition: background-color var(--t), color var(--t);
}

.pd-stepper button:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
}

.pd-stepper button:disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
}

.pd-stepper button svg {
  width: 0.95rem;
  height: 0.95rem;
}

.pd-stepper input {
  width: 3rem;
  height: 2.5rem;
  border: none;
  border-inline: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.pd-stepper input::-webkit-outer-spin-button,
.pd-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pd-stepper input:focus {
  outline: none;
  box-shadow: inset var(--ring);
}

.pd-line-total {
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.pd-line-total b {
  color: var(--ink);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.pd-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* "Pagar con QR" es la SEGUNDA opción de pago, no una acción cualquiera: va
   contorneado (la tarjeta se queda con el naranja lleno, que es lo que sigue
   mandando) pero con el texto en color de marca, para que no se confunda con
   "Agregar al carrito", que está más abajo y pesa menos. */
.pd-qr-btn {
  --btn-fg: var(--brand-ink);
  --btn-bd: color-mix(in oklch, var(--brand) 38%, var(--border));
  /* ".btn" es nowrap: aquí el rótulo son DOS renglones a propósito, así que se
     libera, o con la letra grande el texto se sale del botón en un móvil. */
  white-space: normal;
  padding-block: 0.7rem;
}

.pd-qr-btn:hover {
  --btn-bd: var(--brand);
}

.pd-qr-btn>svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.pd-qr-btn__txt {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  line-height: 1.2;
  font-size: 1rem;
}

/* El nombre del medio explica el "QR" sin robarle protagonismo al verbo. */
.pd-qr-btn__txt small {
  font-size: 0.76rem;
  font-weight: 500;
  opacity: 0.72;
}

/* Cupón de bienvenida, anunciado en la caja de compra (no dentro del checkout,
   cuando el cliente ya decidió). Discreto: informa, no grita. */
.pd-gift {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-sm, 0.6rem);
  background: var(--brand-50);
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--brand-ink);
}

.pd-gift svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.13rem;
}

/* ---- Sellos de confianza compra ---- */
.pd-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

/* ---- Bloques informativos de la descripción (qué incluye / entrega / garantía) ---- */
.pd-info-blocks {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pd-info {
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.pd-info h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}

.pd-info h3 svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--brand);
  flex: none;
}

.pd-info p {
  margin-bottom: 0;
}

.pd-info .feature-list {
  gap: 0.55rem;
}

.pd-info .feature-list li {
  font-size: 0.93rem;
}

.pd-info__note {
  margin-top: 0.9rem !important;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
  font-size: 0.86rem;
  color: var(--ink-muted);
}

/* ---- Sección de pestañas ---- */
.pd-tabs-wrap {
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.pd-tab-body {
  padding-top: 1.75rem;
  max-width: 70ch;
}

.pd-tab-body p {
  color: var(--ink-body);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.pd-tab-body p:last-child {
  margin-bottom: 0;
}

.pd-tab-body h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.75rem;
}

.pd-tab-body h3:first-child {
  margin-top: 0;
}

/* table.data (styles.css) fuerza min-width:640px para las tablas anchas del
   panel. Esta es una ficha de dos columnas y sí cabe en un celular, pero hay
   que ganarle la especificidad: `.pd-spec-table` sola (0,1,0) perdía contra
   `table.data` (0,1,1) y el min-width:0 no hacía nada. Con el selector
   duplicado empata en clases y gana por orden de carga. (29-jul-2026) */
table.data.pd-spec-table {
  min-width: 0;
}

.pd-spec-table th {
  width: 38%;
}

/* En pantallas anchas las etiquetas ("Método de entrega", "Tipo de licencia")
   se leen mejor en una línea; en el celular tienen que poder partir o empujan
   la columna de valores fuera de la tarjeta. */
@media (min-width: 561px) {
  .pd-spec-table th {
    white-space: nowrap;
  }
}

.pd-spec-table th,
.pd-spec-table td {
  padding-inline: 0 1rem;
  background: transparent;
}

.pd-tab-body .data th:first-child {
  padding-left: 1rem;
}

/* ---- Pasos de activación ---- */
.pd-steps {
  display: grid;
  gap: 1rem;
  counter-reset: pdstep;
  max-width: 60ch;
}

.pd-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.pd-step__num {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 0.95rem;
  flex: none;
}

.pd-step h4 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.pd-step p {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 0;
}

/* Acceso inferior contextual: muestra la imagen del producto actual, no la
   ruleta ni un pictograma genérico. Se mantiene a la izquierda de WhatsApp. */
.product-quick-buy {
  position: fixed;
  left: clamp(.85rem, 2vw, 1.5rem);
  bottom: clamp(.85rem, 2.5vh, 1.5rem);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  max-width: min(19rem, calc(100vw - 5.5rem));
  padding: .48rem .9rem .48rem .48rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: translate var(--t) var(--ease-out), border-color var(--t), box-shadow var(--t);
}

.product-quick-buy:hover {
  translate: 0 -3px;
  border-color: var(--brand);
  box-shadow: var(--shadow-xl);
}

.product-quick-buy:focus-visible {
  outline: none;
  box-shadow: var(--ring), var(--shadow-lg);
}

.product-quick-buy__img,
.product-quick-buy__glyph {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  object-fit: contain;
  padding: .2rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.product-quick-buy__glyph {
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
}

.product-quick-buy__glyph[hidden] {
  display: none;
}

.product-quick-buy__text {
  min-width: 0;
  display: grid;
  line-height: 1.2;
}

.product-quick-buy__text b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .86rem;
}

.product-quick-buy__text small {
  margin-top: .2rem;
  color: var(--brand-ink);
  font-size: .72rem;
  font-weight: 750;
}

@media (max-width: 540px) {
  .product-quick-buy {
    width: 3.6rem;
    height: 3.6rem;
    padding: .28rem;
    justify-content: center;
  }

  .product-quick-buy__img,
  .product-quick-buy__glyph {
    width: 3rem;
    height: 3rem;
  }

  .product-quick-buy__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ---- Relacionados ---- */
.pd-related {
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 1.75rem;
}

/* ---- Celular: la ficha entra en una pantalla, sin aire de más --------------
   La mayor parte del tráfico entra desde el teléfono, así que aquí manda que
   el precio y "Pagar ahora" se vean juntos sin bajar. */
@media (max-width: 560px) {
  .pd-layout {
    gap: 1.1rem;
    margin-top: 1rem;
  }

  .pd-buy h1 {
    margin: 0.25rem 0 0.4rem;
  }

  .pd-summary {
    font-size: 0.94rem;
    line-height: 1.5;
    margin-bottom: 0.9rem;
  }

  .pd-price-row {
    padding: 0.85rem 0;
  }

  .pd-specs {
    gap: 0.4rem;
    margin: 0.85rem 0;
  }

  .pd-purchase {
    gap: 0.7rem;
  }

  .pd-buybox {
    padding: 1.05rem 0.9rem 0.95rem;
    margin-bottom: 0.8rem;
  }

  .pd-buybox::before {
    left: 0.8rem;
    right: 0.8rem;
    bottom: -0.5rem;
    height: 1.1rem;
  }

  .pd-buybox::after {
    left: 1.1rem;
    right: 1.1rem;
  }

  .pd-buybox .pd-actions .btn--primary {
    font-size: 1rem;
    padding-block: 0.85rem;
  }

  /* Cantidad y total en UNA sola línea: el paso más chico y el texto más
     corto evitan que "Total" caiga a un renglón suyo y estire la caja. */
  /* Sigue cabiendo en una línea con la letra normal (para eso los tamaños de
     abajo), pero si el visitante tiene la letra del sistema en grande la fila
     PARTE en vez de aplastar el selector de cantidad: con nowrap, el +/- se
     encogía a 37 px y los botones quedaban cortados. */
  .pd-qty-row {
    gap: 0.5rem 0.55rem;
    flex-wrap: wrap;
  }

  .pd-qty-row > label { min-width: 0; }

  .pd-qty-row>label {
    font-size: 0.85rem;
  }

  .pd-stepper button {
    width: 2.1rem;
    height: 2.2rem;
  }

  .pd-stepper input {
    width: 2.4rem;
    height: 2.2rem;
    font-size: 0.95rem;
  }

  .pd-line-total {
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .pd-pay {
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
  }

  .pd-pay__marks {
    justify-content: center;
  }

  /* Sellos de confianza: dos por línea en vez de uno debajo del otro */
  .pd-trust {
    gap: 0.45rem;
    margin-top: 0.85rem;
  }

  .pd-trust .trust-pill {
    padding: 0.42rem 0.7rem;
    font-size: 0.82rem;
    gap: 0.4rem;
  }

  .pd-trust .trust-pill svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  .pd-fulfill {
    padding: 0.85rem 0.9rem;
    gap: 0.7rem;
    margin-bottom: 0.8rem;
  }

  .pd-detail__t {
    margin-top: 1.05rem;
  }

  .pd-highlights {
    margin: 0.4rem 0 1rem;
  }
}