/* ============================================================================
   House of BKN — single product
   Loaded only on /product/…
   ========================================================================= */

.bkn-pdp-page {
  --bkn-pdp-max: 1400px;
  --bkn-pdp-pad: clamp(20px, 3vw, 40px);
}

.bkn-pdp-page #primary,
.bkn-pdp-page #main.site-main {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
.bkn-pdp-page div.product,
.bkn-pdp-page .related.products,
.bkn-pdp-page .up-sells {
  max-width: var(--bkn-pdp-max);
  margin-inline: auto;
  padding-inline: var(--bkn-pdp-pad);
  width: 100%;
}

/* ------------------------------------------------------------- breadcrumb */

.bkn-pdp-page .woocommerce-breadcrumb {
  max-width: none;
  margin: 0;
  padding-block: 14px;
  padding-inline: max(
    var(--bkn-pdp-pad),
    calc((100% - var(--bkn-pdp-max)) / 2 + var(--bkn-pdp-pad))
  );
  background: #F3EFE7;
  border-bottom: 1px solid var(--bkn-line, #E9E2D6);
  font-size: 12.5px;
  color: var(--bkn-muted, #8A8175);
}
.bkn-pdp-page .woocommerce-breadcrumb a {
  color: var(--bkn-muted, #8A8175);
  text-decoration: none;
}
.bkn-pdp-page .woocommerce-breadcrumb a:hover { color: var(--bkn-green, #2A4635); }

/* ------------------------------------------------------------ back to shop */

.bkn-pdp-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 26px 0 0;
  border: 1px solid #DCD3C6;
  border-radius: 999px;
  padding: 11px 20px;
  font: 700 12px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bkn-body2, #4A443C);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.bkn-pdp-back:hover { border-color: var(--bkn-green, #2A4635); color: var(--bkn-green, #2A4635); }

/* --------------------------------------------------------- gallery + summary */

.bkn-pdp-page div.product {
  display: grid;
  /*
   * Two explicit columns. auto-fit resolved to three tracks at this width and
   * left the third empty, which pushed the gallery and summary into the left
   * two thirds of the page. The gallery is capped rather than taking half of
   * 1320px, where a 3:4 tile would stand 851px tall next to a ~600px summary.
   */
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  padding-top: 0;
  padding-bottom: 0;
}
/* the back link spans the grid, above both columns */
.bkn-pdp-page .bkn-pdp-back { grid-column: 1 / -1; justify-self: start; }
.bkn-pdp-page div.product > .woocommerce-product-gallery { margin: 26px 0 0; width: auto !important; float: none !important; }
.bkn-pdp-page div.product > .summary { margin: 26px 0 0; width: auto !important; float: none !important; }

/*
 * Stack once the summary column would drop below about 340px, where the title
 * and the buy row start to break badly. The gallery is then capped and centred:
 * left at full width it would stand over 1200px tall on a 900px screen.
 *
 * Placed after the two rules above, whose margin shorthand would otherwise
 * cancel the auto centring.
 */
@media (max-width: 1000px) {
  .bkn-pdp-page div.product { grid-template-columns: minmax(0, 1fr); }
  .bkn-pdp-page div.product > .woocommerce-product-gallery {
    /*
     * An auto inline margin stops a grid item stretching, so it falls back to
     * its content width -- which here is just the thumb strip, 174px. The width
     * has to be stated, and !important to clear the base rule's width: auto.
     */
    width: 100% !important;
    max-width: 460px;
    margin: 26px auto 0;
  }
}
.bkn-pdp-page div.product > .woocommerce-tabs,
.bkn-pdp-page div.product > .bkn-pdp-lower,
.bkn-pdp-page div.product > .related,
.bkn-pdp-page div.product > .up-sells { grid-column: 1 / -1; }
/*
 * .related and .up-sells are containers in their own right further up this
 * file, but WooCommerce prints them inside div.product, which already carries
 * the container padding. Re-applying it indented the "You may also like"
 * heading and its cards 40px past everything else on the page.
 */
.bkn-pdp-page div.product > .related,
.bkn-pdp-page div.product > .up-sells {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/*
 * Gallery. With the slider removed WooCommerce prints every image stacked in
 * the wrapper; the wrapper is the white card showing whichever is active, and
 * the thumb strip below is built alongside it.
 */
.bkn-pdp-page .woocommerce-product-gallery { position: relative; }
/*
 * Dressed like the quick-view tile: a soft ground, rounded corners, and the
 * photograph filling it. No border and no padding, so nothing frames the image.
 */
.bkn-pdp-page .woocommerce-product-gallery__wrapper {
  margin: 0;
  border-radius: 20px;
  background: #F1ECE3;
  border: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*
 * WooCommerce's own gallery CSS is more specific than anything reasonable here,
 * so which slide is visible is asserted rather than negotiated.
 */
/*
 * woocommerce.css lays out gallery images 2+ as 25%-wide inline thumbs
 * (.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)),
 * which is right for its stacked layout and wrong for this one-at-a-time card:
 * it collapsed every slide after the first to a quarter width. That selector is
 * more specific than anything sane here, so the width is asserted.
 */
.bkn-pdp-page .woocommerce-product-gallery__image { display: none !important; width: 100% !important; }
/* with no JavaScript the first image is the one shown */
.bkn-pdp-page .woocommerce-product-gallery__image:first-child { display: block !important; }
/* once the thumb strip is built, the active image alone is shown */
.bkn-pdp-page .bkn-gallery-ready .woocommerce-product-gallery__image { display: none !important; }
.bkn-pdp-page .bkn-gallery-ready .woocommerce-product-gallery__image.is-active { display: block !important; }

/*
 * The square slot. A percentage height cannot resolve against a box whose own
 * height comes from aspect-ratio — that is circular, and the browser falls back
 * to the photograph's natural height, which is what kept stretching the card.
 * Pinning the link and the image to the slot's edges sidesteps it entirely.
 */
.bkn-pdp-page .woocommerce-product-gallery__image {
  position: relative;
  /* the product photographs are 3:4; the quick-view tile uses the same, so the
     image fills the tile with nothing cropped and no bands top and bottom */
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.bkn-pdp-page .woocommerce-product-gallery__image > a {
  position: absolute;
  inset: 0;
  display: block;
}
.bkn-pdp-page .woocommerce-product-gallery__image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.bkn-pdp-page .woocommerce-product-gallery__trigger { display: none; }

.bkn-pdp-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.bkn-pdp-thumb {
  width: 82px;
  height: 110px;                 /* 3:4, matching the tile above it */
  flex: 0 0 auto;
  border-radius: 12px;
  background: #F1ECE3;
  border: 1.5px solid transparent;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s ease;
}
.bkn-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bkn-pdp-thumb:hover,
.bkn-pdp-thumb:focus,
.bkn-pdp-thumb.is-active {
  background: #F1ECE3;
  border-color: var(--bkn-green, #2A4635);
}

/* ------------------------------------------------------------- the summary */

.bkn-pdp-page .summary { display: flex; flex-direction: column; }

.bkn-pdp-brand {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bkn-muted, #8A8175);
}
.bkn-pdp-page .summary .product_title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  color: var(--bkn-ink, #221F1B);
  margin: 10px 0 0;
  text-wrap: pretty;
}
.bkn-pdp-page .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--bkn-muted, #8A8175);
}
.bkn-pdp-page .woocommerce-product-rating .star-rating { color: #B4863F; margin: 0; }
.bkn-pdp-page .woocommerce-review-link { color: var(--bkn-muted, #8A8175); text-decoration: none; }

.bkn-pdp-page .summary p.price,
.bkn-pdp-page .summary span.price {
  font-size: 28px;
  font-weight: 700;
  color: var(--bkn-ink, #221F1B);
  margin: 18px 0 0;
}
.bkn-pdp-page .summary p.price del { font-size: 16px; color: #A79E90; font-weight: 400; }
.bkn-pdp-page .summary p.price ins { text-decoration: none; }

.bkn-pdp-stock { font-size: 13.5px; color: #3F6B52; margin: 9px 0 0; }
.bkn-pdp-stock.is-out { color: var(--bkn-terra, #B4553F); }

.bkn-pdp-page .woocommerce-product-details__short-description {
  font-size: 16px;
  line-height: 1.75;
  color: var(--bkn-body2, #4A443C);
  margin: 22px 0 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.bkn-pdp-page .woocommerce-product-details__short-description p { margin: 0; }

.bkn-pdp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 0; }
.bkn-pdp-tag {
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid #E1D8C9;
  border-radius: 999px;
  padding: 9px 15px;
  color: #6C665C;
}

/* ------------------------------------------------------ quantity + actions */

.bkn-pdp-page form.cart {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.bkn-pdp-page form.cart .quantity {
  display: flex;
  align-items: center;
  border: 1px solid #DCD3C6;
  border-radius: 999px;
  overflow: hidden;
  margin: 0;
  float: none;
}
.bkn-pdp-page form.cart .quantity input.qty {
  width: 74px;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 6px;
  color: var(--bkn-ink, #221F1B);
  -moz-appearance: textfield;
}
.bkn-pdp-page form.cart .quantity input.qty::-webkit-outer-spin-button,
.bkn-pdp-page form.cart .quantity input.qty::-webkit-inner-spin-button {
  opacity: 1;
  height: 34px;
}
.bkn-pdp-linetotal {
  font-size: 13.5px;
  color: var(--bkn-muted, #8A8175);
}
.bkn-pdp-linetotal strong { color: var(--bkn-ink, #221F1B); font-weight: 700; }

/* the buy row wraps to its own line under the quantity, as in the design */
.bkn-pdp-page form.cart button.single_add_to_cart_button,
.bkn-pdp-page form.cart .bkn-pdp-save { order: 3; }
.bkn-pdp-page form.cart button.single_add_to_cart_button {
  flex: 0 0 auto;
  background: var(--bkn-green, #2A4635) !important;
  border: 1px solid var(--bkn-green, #2A4635) !important;
  color: var(--bkn-light, #F6F1E7) !important;
  border-radius: 999px !important;
  padding: 16px 34px !important;
  font: 700 12px/1 "Nunito Sans", system-ui, sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background-color .2s ease;
}
.bkn-pdp-page form.cart button.single_add_to_cart_button:hover { background: #22392B !important; }
.bkn-pdp-save {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid #DCD3C6;
  color: var(--bkn-body2, #4A443C);
  border-radius: 999px;
  padding: 16px 30px;
  font: 700 12px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.bkn-pdp-save:hover,
.bkn-pdp-save:focus,
.bkn-pdp-save.is-saved {
  /* background stated explicitly: the theme reset would otherwise paint it magenta */
  background: transparent;
  border-color: var(--bkn-terra, #B4553F);
  color: var(--bkn-terra, #B4553F);
}

/* force the two buttons onto the line below the quantity */
.bkn-pdp-page form.cart::after { content: ""; flex-basis: 100%; height: 0; order: 2; }

/* ---------------------------------------------------------------- facts */

.bkn-pdp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 32px 0 0;
  border-top: 1px solid var(--bkn-line, #E9E2D6);
  padding-top: 26px;
}
.bkn-pdp-fact-k {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bkn-muted, #8A8175);
}
.bkn-pdp-fact-v {
  display: block;
  font-size: 14.5px;
  color: #3D382F;
  margin-top: 6px;
  line-height: 1.5;
}

/* ------------------------------------------------------- tabs and reviews */

.bkn-pdp-lower {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px;
  align-items: start;
  padding: 54px 0 0;
}
/*
 * The wrapper opens at priority 9 and closes at 12, so WooCommerce's own tab
 * block (10) and the review column (11) are both inside it and simply become
 * the two grid columns. The review system keeps working untouched.
 */
.bkn-pdp-page .bkn-pdp-lower .woocommerce-tabs {
  grid-column: 1;
  margin: 0;
  padding: 0;
}
.bkn-pdp-page .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bkn-line, #E9E2D6);
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.bkn-pdp-page .woocommerce-tabs ul.tabs::before,
.bkn-pdp-page .woocommerce-tabs ul.tabs::after { content: none !important; }
.bkn-pdp-page .woocommerce-tabs ul.tabs li,
.bkn-pdp-page .woocommerce-tabs ul.tabs li.active {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0;
}
.bkn-pdp-page .woocommerce-tabs ul.tabs li::before,
.bkn-pdp-page .woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; }
.bkn-pdp-page .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0 0 12px;
  border-bottom: 2px solid transparent;
  font: 700 13px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bkn-muted, #8A8175);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.bkn-pdp-page .woocommerce-tabs ul.tabs li.active a,
.bkn-pdp-page .woocommerce-tabs ul.tabs li a:hover {
  color: var(--bkn-ink, #221F1B);
  border-bottom-color: var(--bkn-ink, #221F1B);
}
.bkn-pdp-page .woocommerce-tabs .panel {
  margin: 0;
  padding: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--bkn-body2, #4A443C);
  max-width: 62ch;
  text-wrap: pretty;
}
.bkn-pdp-page .woocommerce-tabs .panel > h2 { display: none; }
.bkn-pdp-page .woocommerce-tabs .panel p { margin: 0 0 12px; }
.bkn-pdp-sourcing { color: var(--bkn-body2, #4A443C); }

.bkn-pdp-reviews { grid-column: 2; }
@media (max-width: 800px) { .bkn-pdp-reviews { grid-column: 1; } }
.bkn-pdp-reviews-title {
  font: 400 11px/1.4 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bkn-muted, #8A8175);
  margin: 0 0 16px;
}
.bkn-pdp-review {
  border-top: 1px solid #EFE9DF;
  padding: 16px 0;
}
.bkn-pdp-review-head { display: flex; align-items: baseline; gap: 10px; }
.bkn-pdp-review-stars { color: #B4863F; font-size: 12.5px; letter-spacing: .04em; }
.bkn-pdp-review-name { font-size: 13.5px; font-weight: 700; color: var(--bkn-ink, #221F1B); }
.bkn-pdp-review-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--bkn-body, #5C564D);
  margin: 7px 0 0;
  text-wrap: pretty;
}
.bkn-pdp-noreviews { font-size: 14px; color: var(--bkn-muted, #8A8175); }

/* --------------------------------------------------------------- related */

.bkn-pdp-page .related.products {
  padding-top: 60px;
  padding-bottom: 90px;
  clear: both;
}
.bkn-pdp-page .related.products > h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--bkn-ink, #221F1B);
  margin: 0 0 22px;
}
.bkn-pdp-page .related ul.products {
  display: grid !important;
  /* four cards, four tracks: auto-fill was making five and leaving one empty */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  align-items: start;
}
@media (max-width: 1000px) {
  .bkn-pdp-page .related ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .bkn-pdp-page .related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bkn-pdp-page .related ul.products::before,
.bkn-pdp-page .related ul.products::after { content: none !important; }
/* the quick-view tile has no card around it: just image, name, price */
.bkn-pdp-page .related ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.bkn-pdp-page .related ul.products li.product:hover {
  box-shadow: none;
  transform: none;
}
/*
 * Related cards are suggestions, not a second shop: brand, name and price only.
 * Pared back here rather than by unhooking the loop, which the shop grid shares.
 */
.bkn-pdp-page .related .star-rating,
.bkn-pdp-page .related .bkn-rating,
.bkn-pdp-page .related .bkn-stars,
.bkn-pdp-page .related .bkn-rating-label,
.bkn-pdp-page .related .bkn-badge,   /* the class is bkn-badge; bkn-card-badge never existed */
.bkn-pdp-page .related span.onsale,
.bkn-pdp-page .related .bkn-wish,
.bkn-pdp-page .related .bkn-quickview,
.bkn-pdp-page .related .bkn-card-blurb,
.bkn-pdp-page .related .bkn-card-stock,
.bkn-pdp-page .related .bkn-card-view,
.bkn-pdp-page .related .button { display: none !important; }

/* the quick-view tile: a 3:4 well on the soft ground, image filling it */
.bkn-pdp-page .related .bkn-card-media {
  display: block;
  border-radius: 11px;
  background: #F1ECE3;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: 0;
  width: 100%;
}
.bkn-pdp-page .related .bkn-card-media img,
.bkn-pdp-page .related .woocommerce-LoopProduct-link > img,
.bkn-pdp-page .related li.product img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  padding: 0;
  border-radius: 0;
  background: transparent;
  display: block;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.bkn-pdp-page .related li.product:hover .bkn-card-media img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .bkn-pdp-page .related .bkn-card-media img { transition: none; }
  .bkn-pdp-page .related li.product:hover .bkn-card-media img { transform: none; }
}
.bkn-pdp-page .related .bkn-card-brand {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bkn-muted, #8A8175);
  margin-top: 14px;
}
.bkn-pdp-page .related li.product .woocommerce-loop-product__title,
.bkn-pdp-page .related ul.products li.product h2.woocommerce-loop-product__title {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--bkn-ink, #221F1B);
  margin: 5px 0 0;
  padding: 0;
}
.bkn-pdp-page .related .price {
  font-size: 15px;
  font-weight: 700;
  color: var(--bkn-ink, #221F1B);
  margin: 8px 0 0;
  display: block;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 800px) {
  .bkn-pdp-page div.product { gap: 28px; }
  .bkn-pdp-page .woocommerce-tabs { padding-top: 40px; }
  .bkn-pdp-lower { padding-top: 40px; gap: 28px; }
  .bkn-pdp-page .related.products { padding-top: 44px; padding-bottom: 64px; }
}
@media (max-width: 560px) {
  .bkn-pdp-page .woocommerce-product-gallery__wrapper { padding: 16px; }
  .bkn-pdp-page .flex-control-thumbs img { width: 64px; height: 64px; }
  .bkn-pdp-page form.cart button.single_add_to_cart_button,
  .bkn-pdp-save { flex: 1 1 100%; text-align: center; }
}