/* Highrizz Produktseite — Shipping-Label-Design-Sprache. Nur auf Produktseiten geladen.
   Reine Reskin-Strategie: WooCommerce/Blocksy liefern Struktur + Funktionalitaet
   (Variationen, AJAX-Add-to-Cart, Preisberechnung), wir aendern nur die Optik. */

body.single-product{
  --hrz-ink:#161512; --hrz-board:#EDE7D8; --hrz-board-2:#E3DCC8;
  --hrz-caution:#F5B700; --hrz-flag:#992014; --hrz-stone:#A79C89; --hrz-text-muted:#524B3D;
  --hrz-line:#00000018;
}


body.single-product #main,
body.single-product .content-area{
  background:var(--hrz-board) !important;
  background-image:radial-gradient(var(--hrz-line) 1px, transparent 1px) !important;
  background-size:22px 22px !important;
}
body.single-product .product_title,
body.single-product .price,
body.single-product .summary,
body.single-product p,
body.single-product .ct-breadcrumbs{
  color:var(--hrz-ink) !important;
}

/* Breadcrumb */
body.single-product .ct-breadcrumbs{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--hrz-text-muted) !important;
}
body.single-product .ct-breadcrumbs a{ color:var(--hrz-text-muted) !important; }
body.single-product .ct-breadcrumbs a:hover{ color:var(--hrz-ink) !important; }

/* Gallery */
body.single-product .woocommerce-product-gallery{
  background:var(--hrz-board-2);
  border:1px solid var(--hrz-line);
  border-radius:20px;
  overflow:hidden;
  padding:1rem;
}
body.single-product .woocommerce-product-gallery__image img{
  border-radius:12px;
}
body.single-product .flex-control-thumbs li img,
body.single-product ol.flex-control-thumbs img{
  border-radius:8px;
  border:2px solid transparent;
}
body.single-product .flex-control-thumbs li img.flex-active,
body.single-product ol.flex-control-thumbs img.flex-active{
  border-color:var(--hrz-ink);
}

/* Title / price */
body.single-product .product_title{
  font-family:'Archivo Black',sans-serif !important;
  font-weight:400 !important;
  letter-spacing:-.01em;
}
body.single-product .price,
body.single-product .price .woocommerce-Price-amount{
  font-family:'JetBrains Mono',monospace !important;
  font-variant-numeric:tabular-nums;
}

/* Kategorien als Chips statt Fliesstext-Link-Liste */
body.single-product .posted_in{
  font-family:'JetBrains Mono',monospace;
  font-size:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1.2rem;
}
body.single-product .posted_in a{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  border:1px solid var(--hrz-line);
  background:var(--hrz-board-2);
  border-radius:999px;
  padding:.35rem .8rem;
  color:var(--hrz-ink) !important;
  text-decoration:none !important;
}
body.single-product .posted_in a:hover{ border-color:var(--hrz-ink); }
/* "Categories:" Praefix-Text ausblenden, die Chips sprechen fuer sich */
body.single-product .posted_in{ position:relative; }

/* Variations — native <select> per JS zu Pillen umgebaut (siehe JS-Datei),
   das Select bleibt technisch das Original, nur visuell versteckt sobald
   die Pillen aktiv sind, damit ohne JS weiterhin alles funktioniert. */
body.single-product table.variations{
  border:0;
  width:100%;
}
body.single-product table.variations th.label{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--hrz-text-muted);
  font-weight:400;
  padding-bottom:.6rem;
}
body.single-product table.variations td.value select{
  font-family:'JetBrains Mono',monospace;
  border:1px solid var(--hrz-line);
  border-radius:8px;
  padding:.6rem .8rem;
  background:var(--hrz-board-2);
  color:var(--hrz-ink);
}
body.single-product .hrz-size-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.4rem;
}
body.single-product .hrz-size-pill{
  appearance:none;
  cursor:pointer;
  min-width:46px;
  height:42px;
  padding:0 .7rem;
  border:1px solid var(--hrz-line);
  background:var(--hrz-board-2);
  border-radius:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:.8rem;
  color:var(--hrz-ink);
}
body.single-product .hrz-size-pill:hover{ border-color:var(--hrz-ink); }
body.single-product .hrz-size-pill.is-selected{
  background:var(--hrz-ink);
  color:var(--hrz-board);
  border-color:var(--hrz-ink);
}
body.single-product .hrz-size-pill:disabled{
  opacity:.35;
  cursor:not-allowed;
  text-decoration:line-through;
}
body.single-product .reset_variations{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  color:var(--hrz-text-muted) !important;
}

/* Quantity stepper */
/* Blocksy hat schon einen eigenen +/- Stepper (.ct-increase/.ct-decrease),
   das war mir beim ersten Durchgang nicht klar, darum kein eigener Stepper
   mehr per JS, nur der echte umgefaerbt ueber Blocksys eigene CSS-Variablen. */
body.single-product form.cart .quantity{
  position:relative;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--hrz-line);
  border-radius:28px;
  background:var(--hrz-board-2);
  height:56px;
  --quantity-height:56px;
  --quantity-initial-color:transparent;
  --quantity-arrows-initial-color:var(--hrz-ink);
  --quantity-hover-color:var(--hrz-board);
  --quantity-arrows-hover-color:var(--hrz-flag);
}
body.single-product form.cart .quantity .qty{
  border:0;
  background:none;
  height:100%;
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
  color:var(--hrz-ink) !important;
}
body.single-product form.cart .quantity .qty::-webkit-inner-spin-button,
body.single-product form.cart .quantity .qty::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Add to cart button */
body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button.button.alt{
  appearance:none !important;
  border:0 !important;
  cursor:pointer;
  background:var(--hrz-ink) !important;
  color:var(--hrz-board) !important;
  height:56px !important;
  padding:0 2rem !important;
  border-radius:28px !important;
  font-family:'JetBrains Mono',monospace !important;
  font-weight:600 !important;
  font-size:.85rem !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:transform .15s ease, background .15s ease;
}
body.single-product .single_add_to_cart_button:hover{
  transform:translateY(-1px);
  background:var(--hrz-ink) !important;
}
body.single-product .single_add_to_cart_button.hrz-added{
  background:var(--hrz-flag) !important;
}
body.single-product .ct-cart-added-notification,
body.single-product .woocommerce-message{
  font-family:'JetBrains Mono',monospace !important;
  border-radius:12px !important;
  border-left:0 !important;
  background:var(--hrz-board-2) !important;
  color:var(--hrz-ink) !important;
}
/* "View basket"-Link nach dem Hinzufuegen, war noch Blocksys Blau */
body.single-product .added_to_cart{
  background-color:var(--hrz-board-2) !important;
  color:var(--hrz-ink) !important;
  border-radius:28px !important;
  font-family:'JetBrains Mono',monospace !important;
  font-weight:600 !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-decoration:none !important;
}
body.single-product .added_to_cart:hover{
  background-color:var(--hrz-board) !important;
  color:var(--hrz-flag) !important;
}

/* Flug-Animation: Paket "springt" vom Add-to-Basket-Button zum Warenkorb-Icon */
.hrz-fly-box{
  position:fixed;
  width:22px;
  height:22px;
  z-index:99999;
  pointer-events:none;
  color:var(--hrz-ink);
}
.hrz-fly-box svg{ width:100%; height:100%; display:block; }
.ct-header-cart.hrz-cart-bump{
  animation:hrzCartBump .4s ease;
}
@keyframes hrzCartBump{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.25); }
  100%{ transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .ct-header-cart.hrz-cart-bump{ animation:none !important; }
}

/* Tabs (Description / Additional info / Reviews) */
body.single-product ul.tabs.wc-tabs{
  border-bottom:1px solid var(--hrz-line);
  gap:1.5rem;
}
body.single-product ul.tabs.wc-tabs li a{
  font-family:'JetBrains Mono',monospace;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--hrz-text-muted) !important;
}
body.single-product ul.tabs.wc-tabs li.active a,
body.single-product ul.tabs.wc-tabs li a:hover{
  color:var(--hrz-ink) !important;
}
/* Aktiver Tab-Indikator ist ein ::before mit eigenem background, kein border —
   gleiche Masche wie der Menue-Unterstrich vorhin. */
body.single-product ul.tabs.wc-tabs li.active:before{
  background-color:var(--hrz-flag) !important;
}

/* Beschreibung: echte Listen und Zwischenueberschriften statt Fliesstext */
body.single-product .woocommerce-Tabs-panel--description ul{
  list-style:none;
  margin:1.2rem 0;
  padding:0;
  display:grid;
  gap:.5rem;
}
body.single-product .woocommerce-Tabs-panel--description ul li{
  padding-left:1.3rem;
  position:relative;
}
body.single-product .woocommerce-Tabs-panel--description ul li:before{
  content:"·";
  position:absolute;
  left:.2rem;
  color:var(--hrz-flag);
  font-weight:700;
}
body.single-product .woocommerce-Tabs-panel--description h3{
  font-family:'Archivo Black',sans-serif !important;
  font-weight:400 !important;
  font-size:1.05rem;
  margin:1.8rem 0 .5rem;
}
body.single-product .woocommerce-Tabs-panel h2{
  font-family:'Archivo Black',sans-serif !important;
  font-weight:400 !important;
}
body.single-product .woocommerce-Tabs-panel,
body.single-product .woocommerce-Tabs-panel p{
  color:var(--hrz-ink) !important;
}

/* Size-Guide-Link von Printful, dezent statt hartcodiertem Blau im Inline-Style */
body.single-product a[onclick*="Printful_Product_Size_Guide"]{
  color:var(--hrz-flag) !important;
  font-family:'JetBrains Mono',monospace;
  font-size:.76rem;
  text-decoration:underline;
}

@media (prefers-reduced-motion:reduce){
  body.single-product *{ transition:none !important; }
}