/* Moft · Página de producto. Page layer on top of home.css and catalogo.css (allergen icons, sliders, flavour tags).
   Solid colours only: states swap solid fills and text. */
.pp{padding-top:calc(8.52vw + var(--moft-space-5));padding-bottom:var(--moft-space-8)}
.pp__back{display:inline-block;margin-bottom:var(--moft-space-4);font-weight:var(--moft-weight-bold)}
.pp__back::before{content:"‹\00a0"}
.pp__grid{display:grid;gap:var(--moft-space-5)}
/* Phones: a wide photo, so the flavours are on the first screen. Square from tablet up */
.pp__ph{position:relative;aspect-ratio:4/3;width:100%;padding:0;overflow:hidden;border-radius:var(--moft-radius-card)}
.pp__ph>img{width:100%;height:100%;object-fit:cover}
.pp__body{display:flex;flex-direction:column;gap:var(--moft-space-4);min-width:0}
.pp__t{margin:0;font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:clamp(34px,9vw,52px);line-height:1.05;color:var(--moft-text-on-light);text-wrap:balance;overflow-wrap:anywhere}
.pp__k{margin:0 0 var(--moft-space-2);font-family:inherit;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.03em;line-height:1.3;color:var(--moft-text-on-light)}
.pp__k span{font-weight:var(--moft-weight-medium);color:var(--moft-text-brand-on-light)}
/* Elige sabor: one chip per Fórmula; the chosen one is a solid Chocolate deep fill */
.pp__pick{padding:var(--moft-space-4);background:var(--moft-whipped-cream);border-radius:var(--moft-radius-card)}
.sabs{display:flex;flex-wrap:wrap;gap:8px}
.sab{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--moft-space-4);border:2px solid var(--moft-chocolate);border-radius:var(--moft-radius-pill);background:var(--moft-whipped-cream);font-size:15px;font-weight:var(--moft-weight-bold);letter-spacing:.03em;line-height:1.1;color:var(--moft-chocolate);text-decoration:none;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.sab:not(.is-on):hover{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}}
.sab.is-on{background:var(--moft-chocolate-deep);border-color:var(--moft-chocolate-deep);color:var(--moft-crema)}
.sab:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:2px}
.prod__id{display:flex;flex-wrap:wrap;align-items:center;gap:var(--moft-space-1) var(--moft-space-3)}
.pp__flav{font-weight:var(--moft-weight-bold);color:var(--moft-text-brand-on-light)}
.pp__desc{margin:0;font-size:17px;line-height:1.5}
.pp__block{padding-top:var(--moft-space-3);border-top:2px dotted var(--moft-chocolate-light)}
.pp__vars{padding-top:var(--moft-space-3)}
/* Formats: what it comes as */
.fmts{display:flex;flex-wrap:wrap;gap:var(--moft-space-2)}
.fmt{display:grid;gap:2px;padding:var(--moft-space-3) var(--moft-space-4);background:var(--moft-whipped-cream);border:2px solid var(--moft-chocolate);border-radius:var(--moft-radius-small);box-shadow:var(--sh-pill) var(--moft-chocolate)}
.fmt__k{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:var(--moft-weight-black);letter-spacing:.03em;color:var(--moft-chocolate)}
.fmt__k img{width:22px;height:22px;flex:none}
.fmt__v{margin:0;padding-left:30px;font-size:14px;line-height:1.35}
/* Allergens with their names: here there is room for the words */
.pp__alg{display:flex;flex-wrap:wrap;gap:var(--moft-space-2) var(--moft-space-4);margin:0 0 var(--moft-space-2);padding:0;list-style:none}
.pp__alg li{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:var(--moft-weight-medium)}
.pp__block .link{padding-block:0}
/* How to ask for it: one box per format */
.pp__how{display:grid;gap:var(--moft-space-3)}
.pp__how .pp__k{margin:0}
.how{display:grid;justify-items:start;gap:var(--moft-space-2);padding:var(--moft-space-4);border:2px solid var(--moft-chocolate);border-radius:var(--moft-radius-card)}
.how__t{margin:0;font-weight:var(--moft-weight-black)}
.how .t-small{margin:0}
.how .moft-btn{margin-top:var(--moft-space-1)}
@media (min-width:820px){
  .pp__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--moft-space-7);align-items:start}
  .pp__media{position:sticky;top:calc(8.52vw + 120px)}
  .pp__ph{aspect-ratio:1/1}
}