.cs-det{--cs-paper:#F7F3EB;--cs-card:#FFFDFA;--cs-tint:#FDF1E4;--cs-line:#E9DDCC;--cs-line-soft:#F2E9DC;--cs-orange:#D95E1B;--cs-orange-deep:#AF4911;--cs-sage:#3E6B57;--cs-sage-tint:#E7EFE9;--cs-clay:#A8402A;--cs-clay-tint:#FBEAE5;--cs-ink:#2A2925;--cs-muted:#5D5C57;--cs-muted-2:#8A8881;color:var(--cs-ink);font-family:inherit;font-size:16px;line-height:1.55}
/* ---------- sección ---------- */
.cs-det{
  position:relative;
  padding:58px 20px 62px;
  background:
    radial-gradient(700px 320px at 88% -8%, rgba(217,94,27,.10), transparent 70%),
    radial-gradient(560px 300px at 2% 108%, rgba(62,107,87,.07), transparent 72%),
    linear-gradient(180deg,#FBF5EC 0%,#F6EFE3 100%);
  border-top:1px solid var(--cs-line-soft);
  border-bottom:1px solid var(--cs-line-soft);
  overflow:hidden;
}
.cs-det__wrap{max-width:1000px;margin:0 auto;position:relative}
.cs-det__eyebrow{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--cs-orange)}
.cs-det__h2{margin:0 0 12px;font-size:clamp(24px,5vw,33px);line-height:1.2;letter-spacing:-.018em;font-weight:700;max-width:20em}
.cs-det__lead{margin:0 0 6px;max-width:60ch;color:var(--cs-muted);font-size:16px}
.cs-det__rubros{margin:0 0 26px;max-width:62ch;color:var(--cs-muted);font-size:14.5px}
.cs-det__rubros b{color:var(--cs-ink);font-weight:600}

/* ---------- solapas ---------- */
.cs-det__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.cs-det__tab{
  font:inherit;font-size:13.5px;font-weight:600;color:var(--cs-muted);
  background:rgba(255,255,255,.75);border:1px solid var(--cs-line);border-radius:999px;
  padding:8px 15px;cursor:pointer;
}
.cs-det__tab:hover{background:#fff;color:var(--cs-ink)}
.cs-det__tab[aria-selected="true"]{background:var(--cs-ink);border-color:var(--cs-ink);color:#FBF5EC}
.cs-det__tab:focus-visible,.cs-btn:focus-visible,.cs-link:focus-visible,.cs-rub:focus-visible{outline:2px solid var(--cs-orange);outline-offset:3px}

/* ---------- panel ---------- */
.cs-box{
  display:grid;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(233,221,204,.9);
  border-radius:20px;
  padding:22px;
}
/* Todos los paneles comparten la misma celda. El más alto define la altura
   del bloque y al cambiar de solapa no se mueve el fondo. */
.cs-pan{
  grid-area:1 / 1;
  opacity:0;
  transition:opacity .22s ease;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,330px);
  gap:26px;
  align-items:start;
  visibility:hidden;
  pointer-events:none;
}
.cs-pan.is-on{visibility:visible;pointer-events:auto;opacity:1}
.cs-pan__h3{margin:0 0 8px;font-size:19px;font-weight:650;letter-spacing:-.01em}
.cs-pan__p{margin:0;color:var(--cs-muted);font-size:15.5px;max-width:48ch}
.cs-pan__list{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:9px}
.cs-pan__list li{display:grid;grid-template-columns:17px 1fr;gap:9px;font-size:14.5px;color:var(--cs-muted)}
.cs-pan__list svg{width:16px;height:16px;margin-top:4px;color:var(--cs-sage)}
.cs-more{margin:18px 0 0;font-size:13.5px;color:var(--cs-muted)}
.cs-more a{color:var(--cs-orange-deep);text-decoration:underline;text-underline-offset:3px}
.cs-more a:hover{color:var(--cs-orange)}
@media (max-width:820px){
  .cs-pan{grid-template-columns:1fr;gap:20px}
  .cs-det{padding:44px 16px 48px}
  .cs-box{padding:16px}
}

/* ---------- maquetas ---------- */
.cs-mock{
  background:var(--cs-card);border:1px solid var(--cs-line);border-radius:16px;
  overflow:hidden;box-shadow:0 14px 30px -24px rgba(42,41,37,.5);
}
.cs-mock__bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;background:#fff;border-bottom:1px solid var(--cs-line-soft);
  font-size:12.5px;color:var(--cs-muted-2);
}
.cs-mock__bar b{color:var(--cs-ink);font-size:13.5px;font-weight:650}
.cs-cap{margin:10px 0 0;font-size:12px;color:var(--cs-muted-2)}

/* ficha de producto */
.cs-prod{display:flex;gap:12px;padding:14px}
.cs-prod__img{
  width:66px;height:66px;flex:none;border-radius:12px;display:grid;place-items:center;
  color:rgba(255,255,255,.92);background:linear-gradient(150deg,#E08A4A,#C4632A);
}
.cs-prod__img svg{width:26px;height:26px}
.cs-prod__txt{min-width:0}
.cs-prod__name{margin:0 0 6px;font-size:14.5px;font-weight:650;line-height:1.3}
.cs-price{margin:0;font-size:15.5px;font-weight:700;font-variant-numeric:tabular-nums}
.cs-price small{font-weight:600;font-size:12px;color:var(--cs-muted-2)}

/* chips */
.cs-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 7px;padding:0;list-style:none}
.cs-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid transparent;line-height:1.6}
.cs-chip--diet{background:var(--cs-sage-tint);color:var(--cs-sage);border-color:#D4E2D8}
.cs-chip--warn{background:var(--cs-clay-tint);color:var(--cs-clay);border-color:#F3D8D0}
.cs-chip--plain{background:#F3EFE8;color:var(--cs-muted);border-color:#E7E1D7}
.cs-meta{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:12px;color:var(--cs-muted)}
.cs-meta svg{width:13px;height:13px;flex:none;color:var(--cs-muted-2)}
.cs-meta--lead{color:var(--cs-orange-deep);font-weight:600}
.cs-meta--lead svg{color:var(--cs-orange)}

/* rubros */
.cs-rubs{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 14px}
.cs-rub{
  font:inherit;font-size:12px;font-weight:600;color:var(--cs-muted);background:none;
  border:1px solid var(--cs-line);border-radius:999px;padding:4px 11px;cursor:pointer;
}
.cs-rub[aria-pressed="true"]{background:var(--cs-tint);border-color:#EFC9A6;color:var(--cs-orange-deep)}

/* tramos / formas de venta */
.cs-tiers{list-style:none;margin:0;padding:0 14px 6px;border-top:1px dashed var(--cs-line)}
.cs-tiers li{display:flex;align-items:center;gap:9px;padding:9px 0;font-size:13.5px;border-bottom:1px dashed var(--cs-line-soft);flex-wrap:wrap}
.cs-tiers li:last-child{border-bottom:0}
.cs-tiers .cs-t-name{flex:1 1 auto;min-width:96px;color:var(--cs-muted)}
.cs-tiers b{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.cs-tiers .cs-unit{width:100%;font-size:11.5px;color:var(--cs-muted-2);font-variant-numeric:tabular-nums;margin-top:-4px}
.cs-off{font-size:11px;font-weight:700;color:var(--cs-sage);background:var(--cs-sage-tint);border:1px solid #D4E2D8;border-radius:999px;padding:1px 7px}
.cs-tiers li[data-active="1"] .cs-t-name,.cs-tiers li[data-active="1"] b{color:var(--cs-ink)}
.cs-foot{margin:0;padding:10px 14px;background:var(--cs-tint);border-top:1px solid #F3D9BE;font-size:12.5px;color:var(--cs-orange-deep);font-weight:600}

/* pedido */
.cs-ord__top{display:flex;align-items:center;gap:8px;padding:12px 14px;flex-wrap:wrap}
.cs-ord__id{font-weight:650;font-size:14px}
.cs-ord__meta{font-size:12px;color:var(--cs-muted-2);margin-right:auto}
.cs-ord__total{font-weight:650;font-size:14px;font-variant-numeric:tabular-nums}
.cs-state{font-size:11px;font-weight:650;padding:2px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.cs-state--pend{background:var(--cs-tint);color:var(--cs-orange-deep);border-color:#F3D9BE}
.cs-state--ok{background:var(--cs-sage-tint);color:var(--cs-sage);border-color:#D4E2D8}
.cs-items{list-style:none;margin:0;padding:0 14px}
.cs-items li{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px dashed var(--cs-line);font-size:13px}
.cs-items__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-items__qty{color:var(--cs-muted);font-variant-numeric:tabular-nums}
.cs-items__stock{font-size:11.5px;color:var(--cs-muted-2);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:78px;text-align:right}
.cs-items__stock b{color:var(--cs-sage);font-weight:700}
.cs-was{text-decoration:line-through;opacity:.55;margin-right:3px}
.cs-flash{animation:cs-flash .9s ease-out 1}
@keyframes cs-flash{0%{background:var(--cs-sage-tint)}100%{background:transparent}}
.cs-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px}
.cs-btn{font:inherit;font-size:13.5px;font-weight:650;color:#fff;background:var(--cs-orange);border:0;border-radius:999px;padding:9px 17px;cursor:pointer}
.cs-btn:hover{background:var(--cs-orange-deep)}
.cs-btn[disabled]{background:var(--cs-sage-tint);color:var(--cs-sage);cursor:default;box-shadow:inset 0 0 0 1px #D4E2D8}
.cs-link{font:inherit;font-size:12.5px;color:var(--cs-muted);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cs-done{font-size:12.5px;color:var(--cs-sage);display:none;align-items:center;gap:6px}
.cs-done.is-on{display:flex}

@media (max-width:600px){
  .cs-det__tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:12px}
  .cs-det__tab{padding:8px 7px;text-align:center;line-height:1.3}
  .cs-box{padding:14px}
  .cs-pan{display:none;gap:12px}
  .cs-pan.is-on{display:grid}
  .cs-pan__h3{margin-bottom:5px}
  .cs-pan__p{line-height:1.45}
  .cs-pan__list{margin-top:10px;gap:5px}
  .cs-pan__list li{gap:7px;line-height:1.4}
  .cs-pan__list svg{margin-top:2px}
  .cs-more{display:none}
  .cs-mock__bar{padding:8px 12px}
  .cs-prod{gap:10px;padding:10px 12px}
  .cs-prod__img{width:54px;height:54px}
  .cs-prod__name{margin-bottom:4px}
  .cs-chips{margin-bottom:4px}
  .cs-rubs{padding:0 12px 10px}
  .cs-rub{min-height:36px}
  .cs-tiers{padding:0 12px 4px}
  .cs-tiers li{padding:7px 0}
  .cs-foot{padding:7px 12px}
  .cs-ord__top{padding:9px 12px}
  .cs-items{padding:0 12px}
  .cs-items li{padding:6px 0}
  .cs-actions{padding:10px 12px}
  .cs-btn{min-height:44px}
  .cs-cap{margin-top:5px}
}

@media (prefers-reduced-motion:reduce){.cs-det *{animation:none!important;transition:none!important}}
/* Descuento por monto de compra dentro de "Precio por cantidad" */
.cs-plus{margin:16px 0 0;padding:12px 14px;border:1px solid rgba(234,101,29,.25);border-radius:12px;background:#fff4eb;color:var(--cs-muted);font-size:13.5px;line-height:1.5}
.cs-plus b{display:block;margin-bottom:3px;color:#c84c0b;font-size:12px;letter-spacing:.02em}
.cs-cart-discount{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 14px 4px;padding:9px 11px;border-radius:10px;background:#fff4eb;font-size:12.5px}
.cs-cart-discount span{color:var(--cs-muted)}
.cs-cart-discount b{color:#c84c0b;font-weight:700}

/* Footer: enlaces a las páginas de soluciones en su propia fila, debajo del pie. */
html body .footer .footer-pages{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;width:100%;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:1100px){html body .footer .footer-pages{grid-row:3}}
@media(max-width:620px){html body .footer .footer-pages{grid-row:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:10px 16px;width:min(100%,360px)}}
.cs-pan__p a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.cs-pan__p a:hover{text-decoration-color:currentColor}
/* Países donde está disponible Castock (pie de la home). */
html body .footer .footer-countries{grid-column:1/-1;grid-row:3;margin:0;width:100%;text-align:center;color:var(--muted);font-size:13px}
html body .footer .footer-countries a{color:var(--ink);font-weight:700;text-decoration:none}
html body .footer .footer-countries a:hover{text-decoration:underline}
@media(max-width:1100px){html body .footer .footer-countries{grid-row:4}}
@media(max-width:620px){html body .footer .footer-countries{grid-row:5}}