/* =========================================================================
 * Kim Bos Fotografie — WooCommerce single-product skin
 * Implements the "Fotoprint" product page design from the
 * Kim Bos Fotografie Design System (ui_kits/website/product.html).
 *
 * Pure CSS skin over the standard WooCommerce single-product markup, so
 * variation AJAX, add-to-cart and the Prodigi integration keep working.
 * Only loaded on is_product() pages (see functions.php).
 *
 * NOTE on specificity: WooCommerce core styles use `.woocommerce div.product …`
 * which out-ranks a plain `.single-product …` selector. So everything here is
 * scoped under `body.single-product.woocommerce` (page) or that + `div.product`
 * (inside the product), which reliably beats WooCommerce's own rules.
 * ======================================================================= */

/* ---- Design tokens ----------------------------------------------------- */
body.single-product {
  --maroon-900: #4f2526; --maroon-800: #5e2d2e; --maroon-700: #763839;
  --maroon-500: #8f4e4f; --maroon-300: #b88485; --maroon-100: #ecd8d8;
  --peach-50: #faf2e9; --peach-100: #f4e3d2; --peach-200: #eac7a7;
  --gold-600: #d9952f; --gold-500: #f0b030;
  --ink-900: #161312; --ink-700: #3a342f; --ink-500: #6b635c; --ink-300: #a59c93;
  --white: #ffffff;

  --color-bg: var(--peach-200);
  --color-surface: var(--white);
  --text-heading: var(--maroon-700);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-link: var(--maroon-700);
  --color-accent: var(--gold-500);
  --color-accent-hover: var(--gold-600);
  --color-accent-text: var(--ink-900);
  --border-subtle: rgba(118, 56, 57, 0.12);
  --border-default: rgba(22, 19, 18, 0.14);

  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;
  --fs-h1: 2.75rem; --fs-h2: 2rem; --fs-h3: 1.5rem;
  --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem;
  --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.7;
  --ls-wide: 0.04em;

  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(79, 37, 38, 0.06);
  --shadow-sm: 0 2px 8px rgba(79, 37, 38, 0.08);
  --shadow-md: 0 8px 24px rgba(79, 37, 38, 0.10);
  --content-max: 1100px;
}

/* ---- Page layout: peach bg, full width, no widget sidebar ------------- */
body.single-product { background: var(--color-bg); }
body.single-product .s1 { display: none !important; }
/* Neutralise the parent theme's two-column offset so the content area uses
   the full width and the card can centre. */
body.single-product.col-2cl .content,
body.single-product.col-2cr .content {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  float: none;
}
body.single-product.col-2cl .s1,
body.single-product.col-2cr .s1 { margin: 0; }

body.single-product.woocommerce .content,
body.single-product.woocommerce .content p,
body.single-product.woocommerce .content li,
body.single-product.woocommerce .content td,
body.single-product.woocommerce .content th,
body.single-product.woocommerce .content a,
body.single-product.woocommerce .content label,
body.single-product.woocommerce .content select,
body.single-product.woocommerce .content button,
body.single-product.woocommerce .content input {
  font-family: var(--font-sans);
}

/* ---- Breadcrumb -------------------------------------------------------- */
body.single-product.woocommerce .woocommerce-breadcrumb {
  max-width: var(--content-max);
  margin: 0 auto var(--space-5);
  padding: var(--space-7) var(--space-5) 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}
body.single-product.woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); text-decoration: none; }
body.single-product.woocommerce .woocommerce-breadcrumb a:hover { color: var(--text-heading); }

/* ---- The white product card ------------------------------------------- */
body.single-product.woocommerce div.product {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto var(--space-8);
  padding: var(--space-7);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);

  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
body.single-product.woocommerce div.product > .woocommerce-tabs,
body.single-product.woocommerce div.product > .related,
body.single-product.woocommerce div.product > .upsells,
body.single-product.woocommerce div.product > .woocommerce-product-rating,
body.single-product.woocommerce div.product > .clear {
  grid-column: 1 / -1;
}

/* Sale flash */
body.single-product.woocommerce div.product .onsale {
  position: absolute; top: var(--space-5); left: var(--space-5); margin: 0;
  background: var(--color-accent); color: var(--color-accent-text);
  border: none; border-radius: var(--radius-pill); padding: 6px 16px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  min-height: 0; min-width: 0; line-height: 1.3;
}

/* ---- LEFT: gallery (the div also carries the `images` class) ----------- */
body.single-product.woocommerce div.product .woocommerce-product-gallery,
body.single-product.woocommerce div.product div.images {
  width: 100%;
  float: none;
  margin: 0;
  opacity: 1;
}
body.single-product.woocommerce div.product .woocommerce-product-gallery__wrapper {
  width: 100%;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--peach-50);
}
body.single-product.woocommerce div.product .woocommerce-product-gallery__image,
body.single-product.woocommerce div.product .woocommerce-product-gallery__image > a { display: block; width: 100%; }
body.single-product.woocommerce div.product .woocommerce-product-gallery img,
body.single-product.woocommerce div.product div.images img {
  display: block; width: 100%; max-width: 100%; height: auto;
}
body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
  margin: var(--space-3) 0 0; padding: 0; display: flex; gap: var(--space-2); list-style: none;
}
body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li { width: 64px; }
body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: var(--radius-sm); }

/* ---- RIGHT: summary ---------------------------------------------------- */
body.single-product.woocommerce div.product .summary.entry-summary {
  width: 100%; float: none; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-5);
}

body.single-product.woocommerce div.product .product_title.entry-title {
  margin: 0 0 var(--space-2); padding: 0;
  font-size: var(--fs-h1); font-weight: var(--fw-light);
  line-height: var(--lh-tight); color: var(--text-heading);
}

/* Price range (top) */
body.single-product.woocommerce div.product .summary > .price,
body.single-product.woocommerce div.product .summary > .price .amount,
body.single-product.woocommerce div.product .summary > .price .woocommerce-Price-amount {
  font-size: var(--fs-h3); font-weight: var(--fw-light); color: var(--maroon-500); margin: 0;
}
body.single-product.woocommerce div.product .summary > .price del { opacity: 0.5; }
body.single-product.woocommerce div.product .summary > .price ins { text-decoration: none; }

/* Short description */
body.single-product.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-body); line-height: var(--lh-body);
}
body.single-product.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0 0 var(--space-3); }
body.single-product.woocommerce div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* ---- Variation / Prodigi form ----------------------------------------- */
body.single-product.woocommerce div.product .summary form.cart {
  margin: 0; padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-5);
}

/* Both the WooCommerce variations table AND the Prodigi sizing table get the
   same treatment so the two dropdown rows line up identically. */
body.single-product.woocommerce div.product .summary form.cart table.variations,
body.single-product.woocommerce div.product .summary form.cart table[class*="prodigi-sizing"] {
  width: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent;
}
body.single-product.woocommerce div.product .summary form.cart table.variations tbody,
body.single-product.woocommerce div.product .summary form.cart table[class*="prodigi-sizing"] tbody { display: block; }
body.single-product.woocommerce div.product .summary form.cart table.variations tr,
body.single-product.woocommerce div.product .summary form.cart table[class*="prodigi-sizing"] tr {
  display: grid; grid-template-columns: 110px 1fr; align-items: center;
  gap: var(--space-4); margin: 0 0 var(--space-4);
}
body.single-product.woocommerce div.product .summary form.cart table.variations tr:last-child,
body.single-product.woocommerce div.product .summary form.cart table[class*="prodigi-sizing"] tr:last-child { margin-bottom: 0; }
body.single-product.woocommerce div.product .summary form.cart table.variations th,
body.single-product.woocommerce div.product .summary form.cart table.variations td,
body.single-product.woocommerce div.product .summary form.cart table[class*="prodigi-sizing"] th,
body.single-product.woocommerce div.product .summary form.cart table[class*="prodigi-sizing"] td {
  display: block; padding: 0; margin: 0; border: 0; background: transparent; vertical-align: middle;
}
/* Uppercase, left-aligned, muted labels */
body.single-product.woocommerce div.product .summary form.cart table th.label,
body.single-product.woocommerce div.product .summary form.cart table th.label label {
  margin: 0; text-align: left;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted);
}

/* Value cell: select + the "Wissen" reset link sit inline on one row, so the
   cell stays select-height and the label lines up vertically (matches design).
   nowrap + a shrinkable select keeps them on one line at any width. */
body.single-product.woocommerce div.product .summary form.cart table td.value {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap;
}
body.single-product.woocommerce div.product .summary form.cart table td.value select {
  flex: 1 1 auto; width: auto; min-width: 0;
}

/* Selects (Formaat / Afdrukstijl) with a custom chevron */
body.single-product.woocommerce div.product .summary form.cart select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; font-family: var(--font-sans); font-size: var(--fs-body);
  color: var(--text-body); background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b635c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding: 12px 44px 12px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); line-height: 1.3; height: auto;
  cursor: pointer; outline: none; box-shadow: none;
}
body.single-product.woocommerce div.product .summary form.cart select:focus {
  border-color: var(--maroon-500); box-shadow: 0 0 0 3px var(--maroon-100);
}

/* "Wissen" reset link */
body.single-product.woocommerce div.product .summary form.cart .reset_variations {
  display: inline-block; margin: 0; white-space: nowrap;
  font-size: var(--fs-sm); color: var(--text-link); text-decoration: none;
}
body.single-product.woocommerce div.product .summary form.cart .reset_variations:hover { text-decoration: underline; }

/* Selected variation block: space the price away from the qty + cart row
   (WooCommerce nests both here with no gap of their own). */
body.single-product.woocommerce div.product .single_variation_wrap {
  display: flex; flex-direction: column; gap: var(--space-5);
}
body.single-product.woocommerce div.product .single_variation_wrap .single_variation { margin: 0; }
body.single-product.woocommerce div.product .woocommerce-variation-price,
body.single-product.woocommerce div.product .woocommerce-variation-price .price,
body.single-product.woocommerce div.product .woocommerce-variation-price .amount,
body.single-product.woocommerce div.product .woocommerce-variation-price .woocommerce-Price-amount {
  font-size: var(--fs-h2); font-weight: var(--fw-light); color: var(--text-heading);
  text-align: left; margin: 0;
}
body.single-product.woocommerce div.product .woocommerce-variation-availability { color: var(--text-muted); }
body.single-product.woocommerce div.product .woocommerce-variation-description { color: var(--text-body); line-height: var(--lh-body); }

/* ---- Quantity + add to cart ------------------------------------------- */
body.single-product.woocommerce div.product .woocommerce-variation-add-to-cart,
body.single-product.woocommerce div.product .summary form.cart:not(.variations_form) {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
body.single-product.woocommerce div.product form.cart .quantity {
  display: inline-flex; align-items: center; margin: 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  overflow: hidden; background: var(--color-surface);
}
body.single-product.woocommerce div.product form.cart .quantity input.qty {
  width: 48px; height: 44px; padding: 0; border: 0; background: transparent;
  text-align: center; font-family: var(--font-sans); font-size: var(--fs-body);
  font-weight: var(--fw-medium); color: var(--text-body); -moz-appearance: textfield;
}
body.single-product.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
body.single-product.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.single-product.woocommerce div.product form.cart .quantity .kb-qty-btn {
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  color: var(--maroon-700); font-size: 1.25rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
body.single-product.woocommerce div.product form.cart .quantity .kb-qty-btn:hover { background: var(--maroon-100); }

body.single-product.woocommerce div.product form.cart .single_add_to_cart_button,
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button.button {
  background-color: var(--color-accent); color: var(--color-accent-text);
  border: 1px solid var(--color-accent); border-radius: var(--radius-pill);
  padding: 13px 26px; font-family: var(--font-sans); font-size: var(--fs-body);
  font-weight: var(--fw-medium); letter-spacing: var(--ls-wide);
  text-transform: none; line-height: 1; cursor: pointer; text-shadow: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button:hover,
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button.button:hover {
  background-color: var(--color-accent-hover); border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-sm); color: var(--color-accent-text);
}
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button:active { transform: scale(0.97); }
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Product meta ------------------------------------------------------ */
body.single-product.woocommerce div.product .product_meta {
  margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug);
}
body.single-product.woocommerce div.product .product_meta > span { display: block; margin: 0; }
body.single-product.woocommerce div.product .product_meta a { color: var(--text-muted); text-decoration: none; }
body.single-product.woocommerce div.product .product_meta a:hover { color: var(--text-heading); }

/* ---- Tabs -------------------------------------------------------------- */
body.single-product.woocommerce div.product .woocommerce-tabs { margin-top: var(--space-8); padding: 0; }
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: var(--space-5); margin: 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--border-subtle);
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; content: none; }
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; content: none; border: 0; }
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: 0 0 var(--space-3); margin: 0 0 -1px;
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular);
  color: var(--text-muted); border-bottom: 2px solid transparent; text-decoration: none;
  text-shadow: none; transition: color 140ms ease, border-color 140ms ease;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--text-heading); }
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover {
  color: var(--text-heading); font-weight: var(--fw-medium); border-bottom-color: var(--maroon-700);
}
body.single-product.woocommerce div.product .woocommerce-tabs .panel,
body.single-product.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  margin: 0; padding-top: var(--space-5); color: var(--text-body);
  line-height: var(--lh-body); max-width: 70ch;
}
/* WooCommerce repeats the tab title as an <h2>; the design shows only body copy. */
body.single-product.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
body.single-product.woocommerce div.product .woocommerce-tabs .panel ul { padding-left: 1.2em; }
body.single-product.woocommerce div.product .woocommerce-tabs .panel li { margin-bottom: 0.35rem; }
body.single-product.woocommerce div.product .woocommerce-tabs .panel strong { color: var(--text-heading); }

/* Additional-information table */
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes {
  width: 100%; max-width: 480px; border: 0; border-collapse: collapse;
}
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent;
}
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
  text-align: left; width: 160px; color: var(--text-heading); font-weight: var(--fw-medium);
}
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes td { color: var(--text-body); }
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes td p { margin: 0; }

/* ---- Related / upsells ------------------------------------------------- */
body.single-product.woocommerce div.product .related.products,
body.single-product.woocommerce div.product .upsells.products {
  margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--border-subtle);
}
body.single-product.woocommerce div.product .related.products > h2,
body.single-product.woocommerce div.product .upsells.products > h2 {
  font-size: var(--fs-h3); font-weight: var(--fw-light); color: var(--text-heading);
}

/* ---- Notices ----------------------------------------------------------- */
body.single-product.woocommerce .woocommerce-message,
body.single-product.woocommerce .woocommerce-info,
body.single-product.woocommerce .woocommerce-error {
  max-width: var(--content-max); margin: 0 auto var(--space-5);
  border-radius: var(--radius-md); border-top-color: var(--maroon-700);
}
/* Success "added to cart" notice — warm card on the brand palette instead of
   the default grey WooCommerce box: cream surface, maroon accent + text, gold
   check, and a maroon pill that echoes the gold add-to-cart primary. */
body.single-product.woocommerce .woocommerce-message {
  background: var(--peach-50);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--maroon-700);
  box-shadow: var(--shadow-xs);
  color: var(--maroon-800);
  font-size: var(--fs-body); line-height: var(--lh-snug);
  padding: 16px 24px 16px 54px;
}
body.single-product.woocommerce .woocommerce-message::before { color: var(--gold-600); }
body.single-product.woocommerce .woocommerce-message a.button.wc-forward {
  background: var(--maroon-700); color: #fff;
  border: 1px solid var(--maroon-700); border-radius: var(--radius-pill);
  padding: 10px 22px; font-family: var(--font-sans);
  font-weight: var(--fw-medium); font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide); text-transform: none;
  line-height: 1; text-shadow: none; box-shadow: none;
  transition: background-color 160ms ease;
}
body.single-product.woocommerce .woocommerce-message a.button.wc-forward:hover {
  background: var(--maroon-800); border-color: var(--maroon-800); color: #fff;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  body.single-product.woocommerce div.product {
    grid-template-columns: 1fr; gap: var(--space-6);
    padding: var(--space-5); border-radius: var(--radius-lg);
  }
  body.single-product.woocommerce div.product .product_title.entry-title { font-size: var(--fs-h2); }
  body.single-product.woocommerce .woocommerce-breadcrumb { padding: var(--space-6) var(--space-4) 0; }
  body.single-product.woocommerce div.product .summary form.cart table.variations tr,
  body.single-product.woocommerce div.product .summary form.cart table[class*="prodigi-sizing"] tr {
    grid-template-columns: 1fr; gap: var(--space-2);
  }
  body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
    gap: var(--space-4); overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a { white-space: nowrap; }
}