/* ===== WooCommerce — Single product ===== */
.woocommerce div.product {
  display: grid;
  /* minmax(0, …): a plain 1fr track grows to fit its content, and FlexSlider sizes its slide strip from the gallery's
     width, so with several images the gallery column fed back into itself and blew up to thousands of pixels. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  position: relative;
}
@media (min-width: 1024px) {
  .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-14);
  }
  .woocommerce div.product .woocommerce-product-gallery {
    grid-column: 1;
  }
  .woocommerce div.product .summary {
    grid-column: 2;
    grid-row: 1;
  }
}
.woocommerce div.product .onsale {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  background: var(--accent-500);
  color: var(--white);
  border: var(--border-strong);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  transform: rotate(-8deg);
}
.woocommerce div.product .woocommerce-product-gallery {
  position: relative;
}
.woocommerce div.product .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--ink);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 0;
}
/* The frame goes on the visible window: FlexSlider's .flex-viewport for multi-image galleries, otherwise the
   wrapper itself (inside the viewport the wrapper is the full-width sliding strip). */
.woocommerce div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
  border: 3px solid var(--ink);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--tint-2);
}
.woocommerce div.product .woocommerce-product-gallery img {
  width: 100%;
  height: auto;
  border-radius: 0;
}
.woocommerce div.product .flex-control-thumbs {
  display: flex;
  gap: var(--space-2-5);
  margin-top: var(--space-5);
  list-style: none;
  padding: 0;
}
.woocommerce div.product .flex-control-thumbs li {
  list-style: none;
  width: 72px;
}
.woocommerce div.product .flex-control-thumbs img {
  border-radius: var(--radius-md);
  border: var(--border-w) solid var(--gray-300);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease-out);
}
.woocommerce div.product .flex-control-thumbs img.flex-active {
  border-color: var(--ink);
  transform: rotate(-3deg) scale(1.05);
}

.woocommerce div.product .product_title {
  font-size: var(--text-4xl);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-figure);
  color: var(--primary-600);
  margin-bottom: var(--space-4);
  display: block;
}
.woocommerce div.product p.price ins {
  text-decoration: none;
}
.woocommerce div.product p.price del {
  color: var(--gray-400);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  margin-right: var(--space-2);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--gray-500);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  height: 48px;
  padding: 0 var(--space-8);
  font-size: var(--text-base);
}
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.woocommerce div.product .stock {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--mint-600);
  margin-bottom: var(--space-4);
  display: block;
}
.woocommerce div.product .stock.out-of-stock {
  color: var(--danger-600);
}
.woocommerce div.product .product_meta {
  font-size: var(--text-sm);
  color: var(--gray-400);
  border-top: 1px solid var(--gray-100);
  padding-top: var(--space-4);
}
.woocommerce div.product .product_meta a {
  color: var(--gray-600);
}

.woocommerce-tabs {
  margin-top: var(--space-2); /* the product grid's row gap already separates it from the gallery */
  grid-column: 1 / -1;
}
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs li {
  list-style: none;
}
.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-ui);
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
  box-shadow: var(--shadow-pop-sm);
}
.woocommerce-tabs .panel {
  color: var(--gray-600);
  line-height: var(--lh-relaxed);
}

.related.products {
  margin-top: var(--space-4);
  grid-column: 1 / -1;
}
.related.products > h2 {
  font-size: var(--text-3xl);
  font-weight: var(--fw-display);
  color: var(--color-heading);
  margin-bottom: var(--space-6);
}

/* The tab already names the panel, so hide WooCommerce's repeated heading. */
.woocommerce-tabs .panel > h2:first-child {
  display: none;
}

/* ===== Variable products: attribute dropdowns + chosen-variation details ===== */
.woocommerce div.product form.variations_form .variations {
  flex: 1 1 100%;
  margin-bottom: var(--space-1);
}
.woocommerce div.product form.variations_form .variations tr {
  display: block;
  margin-bottom: var(--space-3-5);
}
.woocommerce div.product form.variations_form .variations th.label,
.woocommerce div.product form.variations_form .variations td.value {
  display: block;
  padding: 0;
  text-align: left;
}
.woocommerce div.product form.variations_form .variations th.label {
  margin-bottom: var(--space-1-5);
}
.woocommerce div.product form.variations_form .variations th.label label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--gray-700);
}
.woocommerce div.product form.variations_form .variations select {
  width: 100%;
  max-width: 320px;
  height: 44px;
  padding: 0 var(--space-10) 0 var(--space-3-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--gray-800);
  cursor: pointer;
}
.woocommerce div.product form.variations_form .variations select:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-100);
}
/* WooCommerce toggles this link's visibility inline once an option is picked. */
.woocommerce div.product form.variations_form a.reset_variations {
  display: inline-block;
  margin-left: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--primary-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce div.product form.variations_form .single_variation_wrap {
  flex: 1 1 100%;
}
.woocommerce div.product .woocommerce-variation-description {
  font-size: var(--text-md);
  color: var(--gray-500);
  margin-bottom: var(--space-3);
}
.woocommerce div.product .woocommerce-variation-price .price {
  display: block;
  margin-bottom: var(--space-2);
}
.woocommerce div.product .woocommerce-variation-availability .stock {
  margin-bottom: var(--space-3);
}
/* Quantity + button sit on one line, like simple products. */
.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.woocommerce div.product .single_add_to_cart_button.disabled,
.woocommerce div.product .single_add_to_cart_button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Rating summary, reviews list and review form ===== */
.woocommerce div.product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.woocommerce div.product .woocommerce-product-rating .star-rating {
  font-size: var(--text-base);
  margin: 0;
}
.woocommerce div.product .woocommerce-review-link {
  color: var(--gray-500);
}
.woocommerce div.product .woocommerce-review-link:hover {
  color: var(--primary-700);
}
.woocommerce #reviews #comments ol.commentlist {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
}
.woocommerce #reviews #comments ol.commentlist li {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--gray-100);
}
.woocommerce #reviews .comment_container {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.woocommerce #reviews .comment_container img.avatar {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
}
.woocommerce #reviews .comment-text {
  flex: 1;
  min-width: 0;
}
.woocommerce #reviews .comment-text .star-rating {
  margin-bottom: var(--space-1-5);
}
.woocommerce #reviews .comment-text .meta {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-2);
}
.woocommerce #reviews .comment-text .meta strong {
  color: var(--gray-900);
}
.woocommerce #reviews .comment-text .description {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--gray-700);
  overflow-wrap: anywhere; /* a long unbroken string in a review must not blow out the layout */
}
.woocommerce #reviews .comment-text .description p {
  margin: 0;
}
.woocommerce #review_form #reply-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-heading);
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}
.woocommerce #review_form .comment-notes,
.woocommerce #review_form .comment-form-cookies-consent {
  font-size: var(--text-sm);
  color: var(--gray-500);
}
.woocommerce #review_form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.woocommerce #review_form textarea {
  width: 100%;
  min-height: 120px;
}
/* Rating picker: WooCommerce's script hides the <select> and shows these links. */
.woocommerce p.stars a {
  position: relative;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  font-size: var(--text-2xl);
  text-indent: -999em;
  text-decoration: none;
  overflow: hidden;
}
.woocommerce p.stars a::before {
  content: '\2606';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: var(--lh-normal);
  text-indent: 0;
  text-align: center;
  color: var(--cream-600);
}
.woocommerce p.stars:hover a::before {
  content: '\2605';
}
.woocommerce p.stars a:hover ~ a::before {
  content: '\2606';
}
.woocommerce p.stars.selected a.active::before {
  content: '\2605';
}
.woocommerce p.stars.selected a.active ~ a::before {
  content: '\2606';
}
.woocommerce p.stars.selected a:not(.active)::before {
  content: '\2605';
}
.woocommerce p.stars a:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}