/* Phase 6, Step 1 only: product gallery. Buy box, tabs, reviews and
   related products are not built yet -- see the Phase 6 plan -- so this
   file only covers .ecl-single-product layout scaffolding and the
   gallery component itself. One markup structure serves every product
   type and both breakpoints; only CSS changes at 900px, matching the
   pattern used throughout the rest of this theme. */

.ecl-single-product { padding-top: 28px; padding-bottom: 56px; }
.ecl-single-product__layout {
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
.ecl-single-product__title {
  font-family: var(--ecl-font-primary); font-size: var(--ecl-h1-size); font-weight: 800;
  letter-spacing: var(--ecl-heading-letter-spacing); margin: 0 0 10px;
}
.ecl-single-product__wip {
  font-size: var(--ecl-small-size); color: var(--ecl-meta-gray); font-style: italic;
}

.ecl-gallery__placeholder { background: var(--ecl-surface); border-radius: 14px; overflow: hidden; }
.ecl-gallery__placeholder img { display: block; width: 100%; height: auto; }

.ecl-gallery__main { position: relative; border-radius: 14px; overflow: hidden; background: var(--ecl-surface); }
.ecl-gallery__slide { display: none; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; }
.ecl-gallery__slide.is-active { display: block; }
.ecl-gallery__img { display: block; width: 100%; height: auto; }

.ecl-gallery__thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.ecl-gallery__thumb {
  flex: none; width: 76px; height: 76px; padding: 0; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--ecl-hairline); background: var(--ecl-white); cursor: pointer;
}
.ecl-gallery__thumb.is-active { border-color: var(--ecl-navy); }
.ecl-gallery__thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ecl-gallery__lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(10, 16, 30, 0.92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ecl-gallery__lb-close, .ecl-gallery__lb-nav {
  position: absolute; border: 0; background: rgba(255,255,255,0.12); color: var(--ecl-white);
  width: 44px; height: 44px; border-radius: 999px; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ecl-gallery__lb-close:hover, .ecl-gallery__lb-nav:hover { background: rgba(255,255,255,0.24); }
.ecl-gallery__lb-close { top: 20px; right: 20px; }
.ecl-gallery__lb-nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.ecl-gallery__lb-nav--next { right: 20px; top: 50%; transform: translateY(-50%); }

.ecl-gallery__lb-stage { max-width: 90vw; max-height: 82vh; overflow: hidden; cursor: zoom-in; }
.ecl-gallery__lb-stage.is-zoomed { cursor: zoom-out; }
.ecl-gallery__lb-slide { display: flex; align-items: center; justify-content: center; }
.ecl-gallery__lb-img {
  display: block; max-width: 90vw; max-height: 82vh; width: auto; height: auto;
  object-fit: contain; transition: transform 260ms ease;
}
.ecl-gallery__lb-stage.is-zoomed .ecl-gallery__lb-img { transform: scale(1.9); }

.ecl-gallery__lb-count {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: var(--ecl-white); font-family: var(--ecl-font-primary); font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.12); padding: 5px 14px; border-radius: 999px;
}

@media (min-width: 901px) {
  .ecl-single-product__layout { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

@media (max-width: 900px) {
  .ecl-gallery__thumbs { display: none; }
  .ecl-gallery__main { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 0; }
  .ecl-gallery__slide { display: block !important; flex: 0 0 100%; scroll-snap-align: center; cursor: default; }
  .ecl-gallery__lb-nav { width: 38px; height: 38px; font-size: 16px; }
}


/* Phase 6, Step 2: buy box. Reuses .ecl-card__cta / .ecl-card__wish
   tokens from cards.css for visual consistency with the product card CTA,
   per the brief. Native WooCommerce form markup (simple + variable) is
   restyled via descendant selectors only -- no WooCommerce class names
   are renamed or removed, so native JS (add-to-cart, add-to-cart-variation)
   keeps working unmodified. */

.ecl-buybox { display: flex; flex-direction: column; gap: 16px; }

.ecl-buybox__badge {
  align-self: flex-start; color: #fff; font-family: var(--ecl-font-primary);
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 5px;
}

.ecl-buybox__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ecl-buybox__price-now { font-family: var(--ecl-font-primary); font-size: 30px; font-weight: 800; color: var(--ecl-navy); }
.ecl-buybox__price-now .woocommerce-Price-amount { font-family: var(--ecl-font-primary); font-size: 30px; font-weight: 800; color: var(--ecl-navy); }
.ecl-buybox__price-was { font-size: 16px; color: var(--ecl-meta-gray); text-decoration: line-through; }

.ecl-buybox__wish {
  position: static; width: auto; height: 44px; padding: 0 16px; gap: 8px;
  border: 1px solid var(--ecl-hairline); border-radius: 999px; background: #fff; box-shadow: none;
}
.ecl-buybox__wish-label { font-family: var(--ecl-font-primary); font-size: 13.5px; font-weight: 700; color: var(--ecl-ink); }
.ecl-buybox__wish.is-active { border-color: var(--ecl-sale-red); }

/* Native WooCommerce simple/variable add-to-cart forms, restyled. */
.ecl-buybox__stepper form.cart,
.ecl-buybox__variations form.variations_form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.ecl-buybox__variations table.variations { width: 100%; border: 0; margin: 0 0 4px; }
.ecl-buybox__variations table.variations tr { display: block; margin-bottom: 10px; }
.ecl-buybox__variations table.variations label { display: block; font-family: var(--ecl-font-primary); font-size: 12.5px; font-weight: 700; color: var(--ecl-ink); margin-bottom: 6px; }
.ecl-buybox__variations table.variations select {
  height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--ecl-border-gray);
  font-family: var(--ecl-font-secondary); font-size: 13.5px; background: #fff; min-width: 180px;
}
.ecl-buybox__variations .woocommerce-variation-price { font-family: var(--ecl-font-primary); font-weight: 800; color: var(--ecl-navy); margin-bottom: 10px; }

.ecl-buybox__stepper .quantity,
.ecl-buybox__variations .quantity {
  display: flex; align-items: center; border: 1px solid var(--ecl-border-gray); border-radius: 999px; overflow: hidden; height: 44px;
}
.ecl-buybox__step-btn {
  width: 40px; height: 44px; border: 0; background: var(--ecl-surface); color: var(--ecl-navy);
  font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ecl-buybox__stepper input.qty,
.ecl-buybox__variations input.qty {
  width: 46px; height: 44px; border: 0; text-align: center; font-family: var(--ecl-font-primary);
  font-size: 14px; font-weight: 700; -moz-appearance: textfield;
}
.ecl-buybox__stepper input.qty::-webkit-inner-spin-button,
.ecl-buybox__stepper input.qty::-webkit-outer-spin-button,
.ecl-buybox__variations input.qty::-webkit-inner-spin-button,
.ecl-buybox__variations input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}

.ecl-buybox__stepper button.single_add_to_cart_button,
.ecl-buybox__variations button.single_add_to_cart_button {
  flex: 1; min-width: 160px; height: 44px; border: none; border-radius: 999px; background: var(--ecl-navy);
  color: #fff; font-family: var(--ecl-font-primary); font-size: 14px; font-weight: 700; cursor: pointer;
}
.ecl-buybox__stepper button.single_add_to_cart_button:disabled,
.ecl-buybox__variations button.single_add_to_cart_button:disabled {
  background: var(--ecl-hairline); color: var(--ecl-meta-gray); cursor: default;
}

.ecl-buybox__variations .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ecl-buybox__variations .reset_variations { font-size: 12.5px; color: var(--ecl-meta-gray); margin-left: 4px; }


/* Phase 6, Step 3: reviews summary (view count + real rating breakdown).
   Standalone component for this step; final placement inside a Reviews
   tab is Step 4. */

.ecl-reviews-summary { display: flex; flex-direction: column; gap: 14px; }

.ecl-reviews-summary__views { font-size: var(--ecl-small-size); color: var(--ecl-meta-gray); margin: 0; }

.ecl-reviews-summary__header { display: flex; align-items: baseline; gap: 14px; }
.ecl-reviews-summary__average { font-family: var(--ecl-font-primary); font-size: 30px; font-weight: 800; color: var(--ecl-ink); }
.ecl-reviews-summary__header-meta { display: flex; flex-direction: column; gap: 2px; }
.ecl-reviews-summary__stars { color: var(--ecl-accent-lime); font-size: 15px; letter-spacing: 1px; }
.ecl-reviews-summary__count { font-size: var(--ecl-small-size); color: var(--ecl-body-gray); }

.ecl-reviews-summary__bars { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.ecl-reviews-summary__bar-row { display: grid; grid-template-columns: 28px 1fr 40px 44px; align-items: center; gap: 8px; }
.ecl-reviews-summary__bar-label { font-family: var(--ecl-font-primary); font-size: 12.5px; font-weight: 700; color: var(--ecl-ink); }
.ecl-reviews-summary__bar-track { height: 8px; border-radius: 999px; background: var(--ecl-hairline); overflow: hidden; }
.ecl-reviews-summary__bar-fill { height: 100%; background: var(--ecl-accent-lime); border-radius: 999px; }
.ecl-reviews-summary__bar-pct { font-size: 12px; color: var(--ecl-body-gray); text-align: right; }
.ecl-reviews-summary__bar-count { font-size: 12px; color: var(--ecl-meta-gray); }

.ecl-reviews-summary__empty { font-size: var(--ecl-body-size); color: var(--ecl-meta-gray); margin: 0; }

@media (max-width: 900px) {
  .ecl-reviews-summary__bars { max-width: none; }
  .ecl-reviews-summary__bar-row { grid-template-columns: 24px 1fr 36px 40px; }
}


/* Phase 6, Step 4: product tabs. Restyles WooCommerce native tabs markup
   (woocommerce_output_product_data_tabs()) via descendant selectors only
   -- no WC class names are renamed, so its own tab-switching script
   keeps working unmodified on a real page load. */

.ecl-product-tabs { padding-top: 48px; }
.ecl-product-tabs .wc-tabs {
  display: flex; gap: 6px; list-style: none; margin: 0 0 24px; padding: 4px;
  background: var(--ecl-tint-navy); border-radius: 999px; max-width: max-content;
}
.ecl-product-tabs .wc-tabs li { margin: 0; }
.ecl-product-tabs .wc-tabs li a {
  display: block; height: 36px; line-height: 36px; padding: 0 18px; border-radius: 999px;
  font-family: var(--ecl-font-primary); font-size: 13px; font-weight: 700; color: var(--ecl-body-gray);
}
.ecl-product-tabs .wc-tabs li.active a { background: var(--ecl-navy); color: #fff; }
.ecl-product-tabs .wc-tabs li.active a:hover { color: #fff; }
.ecl-product-tabs .woocommerce-Tabs-panel {
  font-size: var(--ecl-body-size); line-height: var(--ecl-body-line-height); color: #3A3A44; max-width: 760px;
}

.ecl-tab-empty { color: var(--ecl-meta-gray); font-style: italic; margin: 0; }
.ecl-tab-overview__short p:first-child, .ecl-tab-overview__long p:first-child { margin-top: 0; }
.ecl-tab-overview__long { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ecl-hairline); }

.ecl-tab-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ecl-tab-features li {
  padding-left: 24px; position: relative; font-size: 14px; color: var(--ecl-ink);
}
.ecl-tab-features li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--ecl-accent-lime); }

.ecl-tab-faqs details { border-bottom: 1px solid var(--ecl-hairline); }
.ecl-tab-faqs summary { cursor: pointer; padding: 14px 0; font-family: var(--ecl-font-primary); font-weight: 700; color: var(--ecl-ink); }
.ecl-tab-faqs p { margin: 0 0 14px; color: var(--ecl-body-gray); }

/* Reviews tab: our breakdown sits above the native comment list/form,
   which keeps its own default WooCommerce markup and classes untouched. */
.woocommerce-Tabs-panel--reviews .ecl-reviews-summary { margin-bottom: 32px; }

@media (max-width: 900px) {
  .ecl-product-tabs .wc-tabs { max-width: none; overflow-x: auto; }
}


/* Real, separate Buy Now button alongside the native Add to Cart form --
   see template-parts/product/buy-box.php and assets/js/cart-drawer.js.
   The wrapper itself becomes the flex container so the native form and
   this button sit together and wrap cleanly on narrow screens. */
.ecl-buybox__stepper, .ecl-buybox__variations {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.ecl-buybox__buy-now {
  flex: 1; min-width: 160px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ecl-navy); border-radius: 999px; background: transparent;
  color: var(--ecl-navy); font-family: var(--ecl-font-primary); font-size: 14px; font-weight: 700; cursor: pointer;
}
.ecl-buybox__buy-now:hover { background: var(--ecl-tint-navy); }

/* Explicit margin as a defensive backup to the flex gap above -- this
   button should always sit with real spacing above/below the native
   form regardless of exact flex-wrap timing. */
.ecl-buybox__buy-now { margin-top: 4px; }

.ecl-buybox__payment-note {
  flex-basis: 100%; margin: 6px 0 0; font-size: 12px; color: var(--ecl-meta-gray); text-align: center;
}


/* Real, separate Buy Now button alongside the native Add to Cart form --
   see template-parts/product/buy-box.php and assets/js/cart-drawer.js.
   The wrapper itself becomes the flex container so the native form and
   this button sit together and wrap cleanly on narrow screens. */
.ecl-buybox__stepper, .ecl-buybox__variations {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.ecl-buybox__buy-now {
  flex: 1; min-width: 160px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ecl-navy); border-radius: 999px; background: transparent;
  color: var(--ecl-navy); font-family: var(--ecl-font-primary); font-size: 14px; font-weight: 700; cursor: pointer;
}
.ecl-buybox__buy-now:hover { background: var(--ecl-tint-navy); }

/* Explicit margin as a defensive backup to the flex gap above -- this
   button should always sit with real spacing above/below the native
   form regardless of exact flex-wrap timing. */
.ecl-buybox__buy-now { margin-top: 4px; }

.ecl-buybox__payment-note {
  flex-basis: 100%; margin: 6px 0 0; font-size: 12px; color: var(--ecl-meta-gray); text-align: center;
}


/* Key Features checklist (template-parts/product/key-features.php).
   Sits directly above the quantity / Add to Cart area as part of the
   purchase panel: compact tinted card, navy check chips with the lime
   accent, one line per feature on desktop where the text allows. */
.ecl-keyfeat {
  padding: 14px 16px 15px; border: 1px solid var(--ecl-hairline); border-radius: 12px; background: var(--ecl-surface);
}
.ecl-keyfeat__title {
  margin: 0 0 10px; font-family: var(--ecl-font-primary); font-size: var(--ecl-eyebrow-size); font-weight: 700;
  letter-spacing: var(--ecl-eyebrow-letter-spacing); text-transform: uppercase; color: var(--ecl-body-gray);
}
.ecl-keyfeat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ecl-keyfeat__item {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start;
  font-family: var(--ecl-font-secondary); font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--ecl-ink);
}
.ecl-keyfeat__icon {
  width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ecl-navy); color: var(--ecl-accent-lime);
}

/* Spacing audit: the title inherited the body line-height (1.7), which
   spread a 3-4 line product name over ~230px; the buy box stack gap is
   tightened slightly so the panel reads as one unit. */
.ecl-single-product__title { line-height: 1.2; margin-bottom: 14px; }
.ecl-buybox { gap: 14px; }

/* Layout columns may not grow past their track. Without this the grid's
   1fr column (min-width: auto) expanded to the gallery's slide strip on
   mobile, widening the whole page to ~3100px. */
.ecl-single-product__layout > * { min-width: 0; }

/* Purchase hierarchy: Add to Cart is the primary CTA -- it fills the row
   beside the quantity stepper in brand navy (WooCommerce's default purple
   .button.alt was overriding the theme colour). Buy Now stays the full-
   width outlined secondary below. Presentation only; the native form,
   its submit button and the Buy Now handler are untouched. */
.ecl-buybox__stepper form.cart { flex: 1 1 300px; min-width: 0; }
.ecl-buybox .ecl-buybox__stepper form.cart button.single_add_to_cart_button.button.alt,
.ecl-buybox .ecl-buybox__variations button.single_add_to_cart_button.button.alt {
  flex: 1 1 auto; background: var(--ecl-navy); color: #fff;
}
.ecl-buybox .ecl-buybox__stepper form.cart button.single_add_to_cart_button.button.alt:hover,
.ecl-buybox .ecl-buybox__variations button.single_add_to_cart_button.button.alt:hover { background: var(--ecl-navy-deep); color: #fff; }
.ecl-buybox #wc-stripe-express-checkout-element { flex: 1 1 100%; }
.ecl-buybox__buy-now { flex: 1 1 100%; }
@media (max-width: 1240px) { .ecl-single-product__title { font-size: var(--ecl-h1-size-sm); } }
@media (max-width: 900px) {
  .ecl-single-product__title { font-size: var(--ecl-h1-size-sm); }
  .ecl-keyfeat { padding: 12px 14px 13px; }
  .ecl-keyfeat__item { font-size: 13.5px; }
}
/* PayPal Payments product button (rendered by the plugin after the native
   add-to-cart form). Layout only: its own full-width row between the Stripe
   express buttons and Buy Now. The button's look is PayPal's own. */
.ecl-buybox .ppc-button-wrapper { flex: 1 1 100%; min-width: 0; margin: 2px 0 0; }

/* Express payments as a 2x2 block:
     row 1: Apple Pay | Google Pay   (Stripe)
     row 2: Link      | PayPal       (Stripe | PayPal Payments)
   Stripe mounts each method in its own child container
   (#wc-stripe-express-checkout-element-{method}); display:contents on the
   Stripe wrapper lets those children join the buy-box flex row directly,
   without moving Stripe's iframes. Stripe's own show()/hide() (inline
   display) still controls visibility.
   Stripe's CSS gives each of its buttons min-width: 260px; that is kept
   (and matched for PayPal), so the block is 2x2 wherever two fit side by
   side (desktop 560px column, tablet 736px) and one per line in narrower
   columns, always in the order Apple Pay, Google Pay, Link, PayPal.
   Zero-height ::before / ::after items force the line breaks (before the
   block, and before Link). Vertical rhythm uses margins instead of row-gap
   so those break rows add no extra space; a lone button in a row grows
   to full width (e.g. no Apple Pay on the device). */
.ecl-buybox__stepper > #wc-stripe-express-checkout-element,
.ecl-buybox__variations > #wc-stripe-express-checkout-element { display: contents; }
.ecl-buybox__stepper, .ecl-buybox__variations { row-gap: 0; }
.ecl-buybox__stepper::before, .ecl-buybox__stepper::after,
.ecl-buybox__variations::before, .ecl-buybox__variations::after { content: ""; flex: 0 0 100%; height: 0; }
.ecl-buybox__stepper::before, .ecl-buybox__variations::before { order: 1; }
.ecl-buybox #wc-stripe-express-checkout-element-applePay,
.ecl-buybox #wc-stripe-express-checkout-element-googlePay,
.ecl-buybox #wc-stripe-express-checkout-element-amazonPay,
.ecl-buybox #wc-stripe-express-checkout-element-link,
.ecl-buybox .ecl-buybox__stepper > .ppc-button-wrapper,
.ecl-buybox .ecl-buybox__variations > .ppc-button-wrapper { flex: 1 1 calc(50% - 6px); min-width: 260px; margin: 12px 0 0; }
.ecl-buybox #wc-stripe-express-checkout-element-applePay { order: 2; }
.ecl-buybox #wc-stripe-express-checkout-element-googlePay,
.ecl-buybox #wc-stripe-express-checkout-element-amazonPay { order: 3; }
.ecl-buybox__stepper::after, .ecl-buybox__variations::after { order: 4; }
.ecl-buybox #wc-stripe-express-checkout-element-link { order: 5; }
.ecl-buybox .ecl-buybox__stepper > .ppc-button-wrapper,
.ecl-buybox .ecl-buybox__variations > .ppc-button-wrapper { order: 6; }
.ecl-buybox .ppcp-messages { order: 7; flex: 1 1 100%; margin-top: 12px; }
.ecl-buybox .ecl-buybox__buy-now { order: 8; margin-top: 16px; }
.ecl-buybox .ecl-buybox__payment-note { order: 9; flex: 1 1 100%; margin-top: 14px; }
.ecl-buybox .ppc-button-wrapper:empty, .ecl-buybox #ppc-button-ppcp-gateway-v6:empty { display: none; }
/* PayPal's Pay Later message slot is output empty when messages are off;
   as an empty flex item it added a row gap above the PayPal button. Hidden
   only while empty, so enabling messages later shows them normally. */
.ecl-buybox .ppcp-messages:empty { display: none; }
/* Stripe's empty order-attribution element is also a zero-height flex item
   adding a gap; display:contents removes only its box, the element and
   its hidden inputs stay in the DOM for Stripe. */
.ecl-buybox__stepper > wc-order-attribution-inputs, .ecl-buybox__variations > wc-order-attribution-inputs { display: contents; }

/* Artikeldetails + Versandinfo (Wandtattoowelt) */
.ecl-pdetails { margin-top: 22px; border-top: 1px solid var(--ecl-hairline); padding-top: 18px; font-size: var(--ecl-small-size); }
.ecl-pdetails__ship { list-style: none; margin: 0 0 16px; padding: 14px 16px; background: var(--ecl-tint-navy); border-radius: 10px; display: grid; gap: 6px; color: var(--ecl-ink); }
.ecl-pdetails__ship span { color: var(--ecl-navy); font-weight: 700; margin-right: 6px; }
.ecl-pdetails__list { margin: 0; display: grid; gap: 6px; }
.ecl-pdetails__list > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.ecl-pdetails__list dt { color: var(--ecl-meta-gray); }
.ecl-pdetails__list dd { margin: 0; color: var(--ecl-ink); word-break: break-word; }
.ecl-pdetails__list dd a { color: var(--ecl-navy); }
.ecl-pdetails__link { display: inline-block; margin-top: 12px; color: var(--ecl-navy); font-weight: 600; text-decoration: underline; }
@media (max-width: 900px) { .ecl-pdetails__list > div { grid-template-columns: 110px 1fr; } }