/* Produktseite — drei Anordnungen, ein Inhalt.
   Gestaltungsmarken aus dem Design (--bg, --ink, --terra, --line, --serif,
   --pad); der Dunkelmodus kommt dadurch von selbst mit. */

/* ---------------------------------------------------------- Gerüst */

.et-p{padding-block:clamp(26px,5vh,64px)}
.et-p img{display:block;width:100%;height:auto}

.et-p__split{display:grid;gap:clamp(26px,4vw,62px);align-items:start}
@media(min-width:960px){
  .et-p--claro  .et-p__split{grid-template-columns:1.08fr .92fr}
  .et-p--taller .et-p__split{grid-template-columns:1.25fr .75fr}
}

.et-p__col{max-width:66ch;margin:0 auto}
.et-p__story{padding-block:clamp(30px,5vh,66px);background:var(--bg2)}
.et-p__strip{display:grid;gap:clamp(10px,1.5vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));padding-block:clamp(20px,3vh,40px)}

/* --------------------------------------------------------- Galerie */

.et-gal__big{background:var(--bg2);overflow:hidden;display:flex;justify-content:center}
/* Die Aufnahmen sind hochkant 1469×2200. In voller Breite wären sie tausend
   Pixel hoch und schöben Preis und Knopf aus dem ersten Bildschirm — genau
   das, was eine Produktseite nicht tun soll. Begrenzt statt beschnitten:
   das Stück bleibt ganz zu sehen. */
.et-gal__big img{max-height:min(74vh,720px);width:auto;max-width:100%}
.et-gal__thumbs{display:grid;gap:9px;margin:9px 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(74px,1fr))}
.et-gal__t{padding:0;border:1px solid transparent;background:none;cursor:pointer;
  display:block;width:100%;transition:border-color .2s ease,opacity .2s ease;opacity:.72}
.et-gal__t:hover{opacity:1}
.et-gal__t.is-on{border-color:var(--terra);opacity:1}

.et-p--taller .et-p__stack{display:grid;gap:clamp(10px,1.5vw,18px)}
.et-p--taller .et-p__stack img{max-height:88vh;width:auto;max-width:100%;margin-inline:auto}

/* ------------------------------------------------------- Kaufbox */

/* Nicht auf display:block setzen: die Marke ist im Design inline und
   wird dadurch einen Pixel höher als überall sonst. */
.et-buy h1{margin-top:12px}
.et-buy h1{font-family:var(--serif);font-weight:300;line-height:1.05;letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.6vw,2.9rem);margin:0}
.et-buy__lead{margin:16px 0 0;font-size:1rem;line-height:1.72;color:rgba(var(--ink-rgb, 28, 26, 22), .62);max-width:48ch}
.et-buy__lead p{margin:0}

.et-buy__p{margin:26px 0 0;font-family:var(--serif);font-weight:300;line-height:1;
  font-size:clamp(1.55rem,2.6vw,2.05rem);color:var(--terra)}
.et-buy__p del{opacity:.45;font-size:.66em;margin-right:.4em}

.et-buy__form{margin:22px 0 0}
.et-buy__form .price,
.et-buy__form .woocommerce-variation-price{display:none}   /* steht schon oben */

/* Varianten als Knöpfe statt Auswahlliste. */
.et-opts__hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.et-opts__t{display:block;margin:0 0 9px;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(var(--ink-rgb, 28, 26, 22), .55)}
.et-opts{display:flex;flex-wrap:wrap;gap:8px}
.et-opt{font-family:var(--sans);font-size:.9rem;padding:11px 18px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:2px;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.et-opt:hover{border-color:var(--ink)}
.et-opt.is-on{border-color:var(--terra);background:var(--terra);color:#fff}
.et-opt:disabled{opacity:.34;cursor:not-allowed}

.et-p .variations{width:100%;margin:0}
.et-p .variations tr{display:block}
.et-p .variations th.label{display:none}       /* der eigene Titel steht darüber */
.et-p .variations td{display:block;padding:0}
.et-p .reset_variations{display:inline-block;margin-top:9px;font-size:.8rem;color:rgba(var(--ink-rgb, 28, 26, 22), .55)}

/* «stretch», damit Mengenwahl und Kaufknopf exakt gleich hoch sind. Mit
   «center» stand der Knopf drei Pixel tiefer — sichtbar als schiefe Linie. */
.et-p form.cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:20px 0 0}
/* Bei variablen Produkten steckt der Kaufbereich in einer eigenen Hülle;
   ohne diese Zeile stünden Menge und Knopf untereinander. */
.et-p .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;width:100%}
.et-p .woocommerce-variation{width:100%}
.et-p form.cart .quantity{display:flex}
.et-p form.cart .quantity input{width:74px;padding:13px 10px;text-align:center;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:.95rem}

/* Menge in Stufen — erst wenn product.js die Knöpfe gesetzt hat.
   Ohne Skript bleibt oben das gewöhnliche Zahlenfeld stehen, mit den Pfeilen
   des Browsers; sie sind hässlich, aber sie funktionieren. */
.et-p form.cart .quantity.is-step{align-items:stretch;border:1px solid var(--line);background:var(--bg)}
.et-p form.cart .quantity.is-step input{width:44px;padding:13px 0;border:0;background:none}
.et-p form.cart .quantity.is-step input::-webkit-outer-spin-button,
.et-p form.cart .quantity.is-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.et-p form.cart .quantity.is-step input[type=number]{-moz-appearance:textfield;appearance:textfield}
.et-p .qstep{width:38px;border:0;background:none;color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:1.05rem;line-height:1;padding:0;
  transition:color .2s ease,background .2s ease}
.et-p .qstep:hover:not(:disabled){color:var(--terra);background:rgba(0,0,0,.035)}
.et-p .qstep:disabled{opacity:.28;cursor:default}
html.dark .et-p .qstep:hover:not(:disabled){background:rgba(255,255,255,.06)}
.et-p .single_add_to_cart_button{font-family:var(--sans);font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;padding:15px 34px;border:1px solid var(--terra);background:var(--terra);
  color:#fff;cursor:pointer;transition:background .25s ease,border-color .25s ease}
.et-p .single_add_to_cart_button:hover{background:var(--terra-deep,#9A4A2A);border-color:var(--terra-deep,#9A4A2A)}
.et-p .single_add_to_cart_button:disabled{opacity:.4;cursor:not-allowed}

/* Wie es zum Gast kommt — direkt unter dem Knopf. */
.et-buy__ship{margin:16px 0 0;font-size:.85rem;line-height:1.6;color:rgba(var(--ink-rgb, 28, 26, 22), .62)}

/* Masse, Material, Artikelnummer. */
.et-facts{display:grid;grid-template-columns:auto 1fr;gap:7px 22px;margin:26px 0 0;
  padding-top:18px;border-top:1px solid var(--line);font-size:.85rem}
.et-facts dt{color:rgba(var(--ink-rgb, 28, 26, 22), .55);letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;align-self:center}
.et-facts dd{margin:0}

/* ------------------------------------------------------ Fliesstext */

.et-p .et-single__text{font-size:.98rem;line-height:1.85;max-width:66ch}
.et-p .et-single__text p{margin:0 0 1.15em}
.et-p--taller .et-single__text{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}

/* --------------------------------------------- 2 · Taller: bleibt stehen */

@media(min-width:960px){
  .et-p--taller .et-p__side--stick{position:sticky;top:104px;max-height:calc(100vh - 128px);
    overflow-y:auto;overscroll-behavior:contain}
}

/* ------------------------------------------------- 3 · Mesa: geteilt */

.et-p--mesa{padding-top:0}
.et-p--mesa .et-p__half{display:grid}
.et-p--mesa .et-p__half-img{background:var(--bg2)}
.et-p--mesa .et-p__half-img img{height:100%;object-fit:cover}
.et-p--mesa .et-p__half-txt{display:flex;align-items:center;padding:clamp(34px,6vw,84px) var(--pad)}
@media(min-width:960px){
  .et-p--mesa .et-p__half{grid-template-columns:1fr 1fr;min-height:min(88vh,860px)}
  .et-p--mesa .et-p__half-txt{padding-right:clamp(40px,5vw,96px)}
}
@media(max-width:959.98px){.et-p--mesa .et-p__half-img{height:58vh}}