/* Add minimal opinionated styles here */
:root {
  --gap: 1rem;
}

/* ── Product loop: image swap on hover ───────────────────────────────────── */
/* Both images sit in a Bootstrap .ratio box whose > * rule makes them
   position:absolute and 100% × 100% — they naturally stack. We crossfade
   the hover image in and the primary image out together.
   NOTE: we target article.card:hover (not .pw-product-img-wrap:hover) because
   Bootstrap's .stretched-link adds a ::after pseudo-element with z-index:1 that
   covers the entire card — hover on the <a> image wrapper never fires, but hover
   on the parent article always does. The class is only added to the <a> when a
   second image actually exists, so products without one are completely unaffected. */

article.card:hover .pw-product-img-wrap .pw-img-hover {

    border-radius: 20px;
}

.pw-related__pill:hover {
	
	background: #492774!important;
    border: 0;
    color: #fff!important;
    filter: brightness(1);
    box-shadow: 1px 2px 10px 1px #2452544d;

}

.pw-product-img-wrap .pw-img-primary,
.pw-product-img-wrap .pw-img-hover {
  transition: opacity 0.35s ease;
}
.pw-product-img-wrap .pw-img-hover {
  opacity: 0;
}
article.card:hover .pw-product-img-wrap .pw-img-hover {
  opacity: 1;
}
article.card:hover .pw-product-img-wrap .pw-img-primary {
  opacity: 0;
}
.site-main .content img { max-width: 100%; height: auto; }

a.pw-nibble-gallery__link {
    display: none;
}

/* ── wcpscwc slider: ACF featured text ───────────────────────────────────── */
.pw-slider-text {
  color: #245254;
  text-align: center;
}
.object-fit-cover { object-fit: cover; }

/* Navbar tweaks */
.navbar .dropdown-menu { --bs-dropdown-min-width: 14rem; }



/* Navbar dropdown hover tweaks */
@media (hover: hover) and (pointer: fine) {
  .navbar .dropdown-menu {
    margin-top: .5rem;
  }
}

/* Modal search input spacing */
#searchModal .modal-body input[type="search"] {
  flex: 1;
  color: #492774;
}

#searchModal .modal-body input[type="search"]::placeholder {
  color: #492774;
  opacity: 1;
}

/* MNM child item variation: label + value on one line, label capitalised */
.mnm_item dl.variation {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.3rem;
  margin: 0;
}
.mnm_item dl.variation dt { text-transform: capitalize; }
.mnm_item dl.variation dd { margin: 0; }

/* ============================================================
   MNM tabular → CSS Grid layout
   Mirrors the add-products modal card style (#pwProductResults)
   ============================================================ */

/*
 * MNM's own CSS applies display:table-row to .product items inside
 * .layout_tabular forms, which conflicts with any grid/flex layout.
 * Override it for our custom grid so items behave as normal grid cells.
 */
.mnm_form.layout_tabular .pw-mnm-grid .product {
  display: block;
}

/*
 * Flexbox on the wrapper — justify-content:center means any incomplete last row
 * (e.g. 3 of 4) centres automatically, with no count-specific hacks needed.
 *
 *  < 768px  → 2 columns
 *  768–1199 → 1 column
 * 1200–1599 → 3 columns
 *   ≥ 1600  → 4 columns
 */
.pw-mnm-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Item widths: calc subtracts the proportional share of column gaps so rows
   fill exactly 100% when full, and the last row centres naturally. */
.pw-mnm-item {
  /* < 768px → 2 per row  (gap share: 1 gap ÷ 2 items = 0.5rem each) */
  flex: 0 0 calc(50% - 0.5rem);
  max-width: calc(50% - 0.5rem);
}

@media (max-width: 575px) {
  
  /* Up to 576 → 2 per row */
  .pw-mnm-item {
    flex: 0 0 100%;
    max-width: 45%;
  }

  .pw-mnm-grid{
    gap: 1rem;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  
  /* 768–1199 → 3 per row */
  .pw-mnm-item {
    flex: 0 0 100%;
    max-width: 31%;
  }

  .pw-mnm-grid{
    gap: 0.75rem;
  }
}
@media (min-width: 768px) {
  /* 1200–1599 → 3 per row  (2 gaps ÷ 3 items ≈ 0.667rem each) */
  .pw-mnm-item {
    flex: 0 0 calc(33.333% - 0.667rem);
    max-width: calc(33.333% - 0.667rem);
  }
}
@media (min-width: 1600px) {
  /* ≥ 1600 → 4 per row  (3 gaps ÷ 4 items = 0.75rem each) */
  .pw-mnm-item {
    flex: 0 0 calc(25% - 0.75rem);
    max-width: calc(25% - 0.75rem);
  }
}

@media (min-width: 992px) and (max-width: 1099px){

  .pw-mnm-item {
    flex: 0 0 100%;
    max-width: 45%;
  }

}

/* Square image container — white background, square contain */
.pw-mnm-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.pw-mnm-image[data-bs-toggle] {
  cursor: pointer;
}
.pw-mnm-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Card: white background, subtle hover effect */
.pw-mnm-card {
  background-color: #fff;
  cursor: default;
  transition: box-shadow 0.15s, border-color 0.15s;
  border-radius: 15px !important;
}
.pw-mnm-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  border-color: #6c757d !important;
}

/* Title: slightly larger than price, brand colour */
.pw-mnm-card .mnm_child_product_title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: #245254;
}
.pw-mnm-card .mnm_child_product_title a {
  color: inherit;
  text-decoration: none;
}

/* Price: slightly smaller than title, brand colour */
.pw-mnm-card .price {
  font-size: 0.825rem;
  color: #245254;
  margin: 0;
}

/* Variation attributes (e.g. "Size: Handy"): brand colour */
.pw-mnm-card .variation,
.pw-mnm-card .variation dt,
.pw-mnm-card .variation dd {
  font-size: 0.8rem;
  color: #245254;
  margin: 0;
}
.pw-mnm-card .variation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
}
/* WooCommerce already appends ":" to the <dt> text, so no ::after needed */
.pw-mnm-card .variation dt::after { content: ''; }

/* Push quantity to the bottom */
.pw-mnm-card .quantity,
.pw-mnm-card .mnm-checkbox-qty {
  margin-top: auto;
}

/* Compact quantity input — don't stretch full card width */
.pw-mnm-card .quantity {
  display: flex;
  justify-content: center;
}
.pw-mnm-card .quantity input[type=number] {
  width: 26px;
  font-size: 0.85rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: center;
}

.single-product div.product form.cart .mnm_child_products .quantity{
  text-align: center;
}

.mnm_item a{
  font-size: 1rem;
  color: #245254;
  text-decoration: none;
  font-weight: bold;
}

.mnm_item h4{
  margin: 0;
}

.mnm_item .quantity{
  margin-top:0.5em!important;
}

.mnm_child_products{
  margin-top: 3em!important;
  margin-bottom: 3em!important;
}

div.product .mnm_item p.price{
  color: #245254!important;
}

.mnm_item dl.variation{
  xdisplay: none;
}

.mnm_message.woocommerce-message.woocommerce-error{
  display: none!important;
}

.mnm_wrap.mnm_button_wrap .mnm_price{
  color: #ffffff!important;
}

/* Stock / availability notice */
.pw-mnm-card .stock {
  font-size: 0.75rem;
}

body.has-mnm-product form.mnm_form .quantity{
  display: none;
}

body.has-mnm-product button[name="add-to-cart"]{
  margin-left: 0!important;
}

/* ============================================================
   MNM bundle display in cart / checkout / order tables
   ============================================================ */

/* Child rows: indent slightly and use a muted font to show they
   are part of the bundle above, not standalone line items.      */
tr.mnm_table_item td,
.woocommerce-checkout-review-order-table tr.mnm_table_item td {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  font-size: 0.875rem;
  color: #6c757d;
}
tr.mnm_table_item td.product-name {
  padding-left: 2rem !important;
}

/* Sidecart: indent child item names */
.sidecart-item.mnm-child .fw-semibold {
  font-weight: 400;
  color: #6c757d;
  font-size: 0.875rem;
}

/* WooCommerce Blocks cart & checkout order summary: MNM bundle price display.
 * Container row (pw-mnm-container) shows the full bundle total.
 * Child rows (pw-mnm-child) show item name/qty but no individual price.
 * Classes are injected by registerCheckoutFilters cartItemClass in checkout.js. */

/* Cart block: hide the subtotal cell content on child rows.
   Use visibility:hidden rather than display:none so the <td> stays in the
   table layout — display:none removes the cell and causes the image column
   to expand and fill the freed space. */

/*
tr.pw-mnm-child .wc-block-cart-item__total {
  visibility: hidden !important;
}
*/

/* Checkout order summary sidebar: hide the price on child rows */
.wc-block-components-order-summary-item.pw-mnm-child
  .wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item.pw-mnm-child
  .wc-block-components-order-summary-item__total-price {
  display: none !important;
}

/* Hide the redundant £0.00 per-unit display under the container name —
   the bundle total is already shown on the right side. */
.wc-block-components-order-summary-item.pw-mnm-container
  .wc-block-components-order-summary-item__individual-prices {
  display: none !important;
}

/* Hide the duplicate order summary that WC Blocks slot-fills into the checkout
   actions block (above Place Order) on mobile. The sidebar version is sufficient. */
.checkout-order-summary-block-fill-wrapper {
  display: none !important;
}

/*
Cart fixed for MnM sub-items
*/

table.wc-block-cart-items .wc-block-cart-items__row.is-mnm-child td.wc-block-cart-item__image img{
  left: unset!important;
  position: unset!important;
}

table.wc-block-cart-items .wc-block-cart-items__row.is-mnm-child .wc-block-cart-item__wrap .wc-block-components-quantity-selector{
  display: none!important;
}

table.wc-block-cart-items .wc-block-cart-items__row.is-mnm-child .wc-block-cart-item__wrap{
  padding-left: 0!important;

}

table.wc-block-cart-items .wc-block-cart-items__row.is-mnm-container .wc-block-cart-item__edit a{
  font-size: .75em;
  color: var(--bs-body-color);
}

.wc-block-components-product-details__name{
  text-transform: capitalize;
}

body:not(.woocommerce-checkout) .wc-block-components-product-metadata .wc-block-components-product-metadata__description>p{
  font-size: 0.8em!important;
}

.wc-block-components-product-name{
  margin-bottom: 5px!important;
}

/*
Checkout : Additional
*/

#pw-free-delivery-portal {
  margin-bottom: 0.75rem;
}

/* ── Sidecart spend nudge ─────────────────────────────────────────────── */
.pw-spend-nudge {
  background-color: #ffffff;
  font-size: 1em;
  line-height: 1.4;
}

.pw-spend-nudge__heading {
  font-family: 'Caveat', cursive;
  font-size: 2em;
  margin-bottom: 0.25rem;
  color: #000000;
}

.pw-spend-nudge__body {
  color: #000000;
}

/* ── Minimum order notice (sidecart + Blocks cart) ───────────────────── */
.pw-min-order-notice {
    font-size: 0.8rem;
    color: #4D6B6B;
    margin: 1em 0;
    line-height: 1.4;
    padding: 1em !important;
    background: #ffffff;
    border-radius: 15px;
}

#sidecartMinOrderNotice.pw-min-order-notice{
  padding: 0;
  margin: 0;
}

/* ── Coupon exclusion notice (cart & checkout) ────────────────────────── */
.pw-coupon-exclusion-notice {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0.5rem 0 0;
  line-height: 1.4;
}

/* ── Category list widget ─────────────────────────────────────────────── */
/* ── PW Category List widget: mega menu column fixes ─────────────────────
   Max Mega Menu's walker wraps every widget item in its own <li>.
   When our widget immediately opens with a <li class="mega-menu-item-has-children">,
   the HTML5 parser implicitly closes the walker's <li>, leaving an empty <li>
   sibling before our heading. That empty <li> has line-height and creates the
   visible gap above the category heading. Display:none removes it entirely. */
#mega-menu-wrap-primary .mega-menu-column > ul.mega-sub-menu > li:empty {
  display: none !important;
}

/* show-more is a <span role="button"> so mega menu never intercepts the click */
.pw-cat-list__show-more {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
  line-height: inherit;
  display: inline;
  user-select: none;
  padding-left: 30px;
}

.pw-cat-list__show-more:hover {
  opacity: 0.7;
}

/*
Sidecart and cart Fixes
*/

.sidecart-qty-input{
  border-radius: 0!important;
}

h2.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title{
  text-transform: capitalize;!important;
}

form#wc-block-components-totals-coupon__form button{
    border-radius: 20px;
    background: #4d6b6b;
    text-decoration: none;
    color: #fff;
    border: none;
}

.wc-block-components-product-badge{
    border-radius: 20px !important;
    background: #4d6b6b;
    color: #fff;
    border: none !important;
    padding: .75em 1em !important;
    font-size: .75em !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
}

/* ── Minimum order: JS adds pw-min-order-blocked to <body> when below min ──
   Cart: hide express-payment strip and proceed-to-checkout button.
   Checkout: visually disable the place-order button.                         */
body.pw-min-order-blocked .wc-block-cart__payment-options,
body.pw-min-order-blocked .wc-block-cart__submit-container,
body.pw-min-order-blocked .wp-block-woocommerce-cart-express-payment-block,
body.pw-min-order-blocked .wp-block-woocommerce-cart-proceed-to-checkout-block,
body.pw-min-order-blocked .wc-block-cart__submit.wp-block-woocommerce-proceed-to-checkout-block {
  display: none !important;
}

body.pw-min-order-blocked .wc-block-components-checkout-place-order-button {
  pointer-events: none !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* ── Subscribe & Save section (above WC cart block) ──────────────────── */
.pw-subscribe-save {
  padding: 1.75rem 0;
}

.pw-ss-heading {
  font-size: 1.1em;
  font-weight: 700;
  margin-bottom: 0;
  color: #4D6B6B;
}

.pw-ss-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pw-ss-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.95rem;
  margin: 0;
  user-select: none;
}

.pw-ss-option input[type="radio"] {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #245254;
}

/* Loading state: dim while AJAX is in-flight */
.pw-subscribe-save.pw-ss-loading {
  opacity: 0.5;
  pointer-events: none;
}

.pw-ss-disclaimer {
  margin: 1.5rem 0 0;
  padding: 0.65rem 0.85rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4a5c5c;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(77,107,107,0.2);
  border-radius: 6px;
}

h2.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title{
  text-align: left!important;
}

/*
MnM sub items width fix
*/
table.wc-block-cart-items .wc-block-cart-items__row.is-mnm-child td.wc-block-cart-item__image img{
  width: 85px!important;
}

@media(max-width: 911px){
  table.wc-block-cart-items .wc-block-cart-items__row.is-mnm-child td.wc-block-cart-item__image img{
      width: 65px!important;
  }
}

/* ── MNM product guide section ───────────────────────────────────────────── */

body.single-product .product-type-mix-and-match,
body.single-product .product-includes-whats-inside{
  background-color: #ffffff;
    background-image: url('../img/background-repeat-grey.png');
    background-repeat: repeat;
    background-size: 70%;
}

.pw-mnm-guide {
    position: relative;
    padding-top: 160px!important;
    padding-bottom: 160px!important;
    margin-top: -145px;
}

.pw-mnm-guide-btn{
  margin-top: 10px;
}

/*
Hide on mobile
*/

@media(max-width: 575px){
  .product-type-mix-and-match .pw-mnm-guide{
    display: none;
  }
}

.pw-mnm-guide::before{
  content: '';
  position: absolute;
  inset: 0;
  top: -100px;
  background: rgba(255, 255, 255, 0.65);
  z-index: 1;
}

.pw-mnm-guide::after{
  content: '';
  position: absolute;
  bottom: 0;
  inset: 0;
  background-image: url('../img/grass-background-white-1.svg');
  background-repeat: no-repeat;
  background-position: bottom;
  filter: invert(10%);
  background-size: 100% auto;
  z-index: 1;
}



.pw-mnm-guide div{
  z-index: 2;
  position: relative;
}

.pw-mnm-guide__heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #284241;
  margin-bottom: 0.5rem;
}

.pw-mnm-guide__subheading {
  font-size: 0.95rem;
  color: #5a6e6e;
  margin: 0 auto;
}

/* Cards */
.pw-mnm-card {
  background: #fff;
  border: 1px solid rgba(77,107,107,0.12);
  border-radius: 14px;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 2px 14px rgba(40,66,65,0.07);
  transition: box-shadow 0.2s ease;
  cursor: pointer;
}

section.pw-mnm-guide .pw-mnm-card{
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.pw-mnm-card:hover {
  box-shadow: 0 6px 24px rgba(40,66,65,0.12);
}

.pw-mnm-card__img img {
  max-height: 320px;
  width: auto;
  object-fit: contain;
}

.pw-mnm-card__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0.75rem;
  font-family: lato;
}

.pw-mnm-card__desc {
  font-size: 0.9rem;
  color: #556060;
  line-height: 1.6;
}

.pw-mnm-card__btn {
  display: block;
  background: #284241;
  color: #fff;
  font-size:1rem;
  font-weight: 400;
  border-radius: 20px;
  padding: 6px 35px;
  border: 2px solid #284241;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pw-mnm-card__btn:hover,
.pw-mnm-card__btn:focus {
  background: #4D6B6B;
  border-color: #4D6B6B;
  color: #fff;
}

/* Modal */
.pw-mnm-modal .modal-content {
  border: none;
  border-radius: 14px;
  overflow: hidden;
}

.pw-mnm-modal__header {
  background: #284241;
  color: #fff;
  padding: 1.1rem 1.5rem;
  border-bottom: none;
}

.pw-mnm-modal__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.pw-mnm-modal__close {
  filter: invert(1) brightness(2);
}

.pw-mnm-modal__body {
  padding: 1.75rem;
}

.pw-mnm-modal__footer {
  border-top: 1px solid rgba(77,107,107,0.15);
  padding: 0.9rem 1.5rem;
  justify-content: center;
}

.pw-mnm-modal__close-btn {
  background: transparent;
  color: #284241;
  border: 2px solid #284241;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 2.5rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.pw-mnm-modal__close-btn:hover,
.pw-mnm-modal__close-btn:focus {
  background: #284241;
  color: #fff;
}

.pw-mnm-modal__desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #3d5252;
}

.pw-mnm-modal__desc p:last-child {
  margin-bottom: 0;
}

/* Carousel */
.pw-mnm-carousel {
  background: #f7f9f8;
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 2rem; /* space for indicators */
}

.pw-mnm-carousel__inner {
  min-height: 280px;
  display: flex;
  align-items: center;
}
.pw-mnm-carousel__img {
    max-height: 360px;
    max-width: 360px!important;
    margin: 1.25rem;
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.pw-mnm-carousel .carousel-control-prev,
.pw-mnm-carousel .carousel-control-next {
  width: 2.5rem;
  background: rgba(40,66,65,0.45);
  border-radius: 50%;
  height: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  margin: 0 0.4rem;
}

.pw-mnm-carousel .carousel-indicators [data-bs-slide-to] {
  background-color: #4D6B6B;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  opacity: 0.4;
}

.pw-mnm-carousel .carousel-indicators .active {
  opacity: 1;
}

/* ── Related products Flickity slider ───────────────────────────────────── */
.pw-related {
  /*padding: 3rem 0;*/
}

.pw-related__heading {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 900;
  color: #245255;
  margin-bottom: 2rem;
}

/* Arrow + slider sit side-by-side */
.pw-related__wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 1400px;
  margin: 0 auto;
}

.pw-related__slider {
  flex: 1;
  min-width: 0; /* prevent flex overflow */
}

/* Custom arrow buttons */
.pw-related__arrow {
  flex-shrink: 0;
  width: 85px;
  height: 77px;
  background-image: url('../img/arrow-bg.png');
  background-size: cover;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.15s ease;
  color: #fff;
  font-size: 1.8rem;
  transform: scale(0.75);
}

.pw-related__arrow:hover {
  opacity: 0.8;
  transform: scale(0.9);
}

.pw-related__arrow:disabled,
.pw-nibble-gallery__arrow:disabled {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

figcaption.pw-nibble-gallery__caption {
    display: none;
}

/* Flickity cells — responsive widths give 1/2/3 per viewport */
.pw-related__cell {
  width: 100%;           /* xs: 1-up */
  padding: 0 0.75rem;
  box-sizing: border-box;
  text-align: center;
  display: block;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 768px) {
  .pw-related__cell {
    width: 50%;          /* md: 2-up */
  }
}

@media (min-width: 992px) {
  .pw-related__cell {
    width: 33.333%;      /* lg: 3-up */
  }
}

@media (min-width: 1200px) {
  .fb-product-slider .pw-related__cell {
    width: 25%;          /* xl: 4-up (product slider block only) */
  }
}

/* Product image */
.pw-related__img {
  margin-bottom: 1rem;
}

.pw-related__img img {
  max-height: 280px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Coloured pill label */
.pw-related__pill {
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 6px 35px;
  margin-bottom: 0.75rem;
}

/* Short description */
.pw-related__desc {
  font-size: 0.875rem;
  color: #556060;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 260px;
}

/* ── Nibble Gallery Flickity slider ─────────────────────────────────────── */
.pw-nibble-gallery {
  background: url('/wp-content/uploads/2026/01/nibble-gallery.png') center / cover no-repeat;
  padding: 5rem 0 6rem;
  margin-top: 2rem;
  position: relative;
}

/* Concave arch at top: white rectangle whose rounded bottom edge creates the curve.
   The white matches the page background and sits above the teal, making the teal
   appear to start lower in the centre than at the edges. */
.pw-nibble-gallery::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  height: 70px;
  background: #fff;
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  z-index: 1;
}

/* Same treatment at the bottom. */
.pw-nibble-gallery::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -1px;
  right: -1px;
  height: 70px;
  background: #fff;
  border-radius: 50% 50% 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Container must sit above the pseudo-element arches. */
.pw-nibble-gallery > .container {
  position: relative;
  z-index: 2;
}

.pw-nibble-gallery__heading {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.25rem;
}

.pw-nibble-gallery h3{
  color: #ffffff;
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
}

.pw-nibble-gallery p{
  text-align: center;
  color: #ffffff;
}

/* white-uline sits between heading and slider — override single-product height so it shows properly */
.pw-nibble-gallery .white-uline {
  height: 40px;
  margin-bottom: 1.5rem;
}

/* Arrow + slider row */
.pw-nibble-gallery__wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.pw-nibble-gallery__slider {
  flex: 1;
  min-width: 0;
}

/* Arrow buttons — match related products style */
.pw-nibble-gallery__arrow {
  flex-shrink: 0;
  width: 85px;
  height: 77px;
  background-image: url('../img/arrow-bg.png');
  background-size: cover;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  transform: scale(0.75);
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.pw-nibble-gallery__arrow:hover {
  opacity: 0.8;
  transform: scale(0.9);
}

/* Flickity cells — same responsive widths as related products (1/2/3-up) */
.pw-nibble-gallery__cell {
  width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .pw-nibble-gallery__cell { width: 33.333%; } /* md: 3-up */
}

@media (min-width: 992px) {
  .pw-nibble-gallery__cell { width: 25%; }     /* lg: 4-up */
}

@media (min-width: 1200px) {
  .pw-nibble-gallery__cell { width: 20%; }     /* xl: 5-up */
}

/* Shape mask — mirrors the old .tw-nibble-gallery__shape */
.pw-nibble-gallery__shape {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
/* Default hover */
.pw-nibble-gallery__cell:hover .pw-nibble-gallery__image {
    transform: scale(1.08);
}

/* Rotate the mask */
.pw-nibble-gallery__cell:nth-child(2) .pw-nibble-gallery__shape {
    transform: rotate(180deg);
}

.pw-nibble-gallery__cell:nth-child(3) .pw-nibble-gallery__shape {
    transform: rotate(90deg);
}

.pw-nibble-gallery__cell:nth-child(4) .pw-nibble-gallery__shape {
    transform: rotate(270deg);
}

/* Counter-rotate the images */
.pw-nibble-gallery__cell:nth-child(2) .pw-nibble-gallery__image {
    transform: rotate(180deg);
}

.pw-nibble-gallery__cell:nth-child(3) .pw-nibble-gallery__image {
    transform: rotate(-90deg);
}

.pw-nibble-gallery__cell:nth-child(4) .pw-nibble-gallery__image {
    transform: rotate(-270deg);
}

/* Hover states - preserve rotation and add scale */
.pw-nibble-gallery__cell:nth-child(2):hover .pw-nibble-gallery__image {
    transform: rotate(180deg) scale(1.08);
}

.pw-nibble-gallery__cell:nth-child(3):hover .pw-nibble-gallery__image {
    transform: rotate(-90deg) scale(1.08);
}

.pw-nibble-gallery__cell:nth-child(4):hover .pw-nibble-gallery__image {
    transform: rotate(-270deg) scale(1.08);
}

.pw-nibble-gallery__image,
.pw-nibble-gallery__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.4s ease;
}

.pw-nibble-gallery__image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pw-nibble-gallery__video {
  object-fit: cover;
}

.pw-nibble-gallery__cell:hover .pw-nibble-gallery__image,
.pw-nibble-gallery__cell:hover .pw-nibble-gallery__video {
  transform: scale(1.08);
}

.pw-nibble-gallery__link {
  display: inline-block;
  margin-top: 0.5rem;
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  font-style: normal;
}

.pw-nibble-gallery__link:hover {
  text-decoration: underline;
  color: #fff;
}

.pw-nibble-gallery__caption {
  color: rgba(255,255,255,0.8);
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 0.25rem;
}

/* ── NickX gallery thumbnail strip ─────────────────────────────────────── */
.pw-nickx-wrap {
  display: flex;
  align-items: center;
}

.pw-nickx-wrap #nickx-gallery {
  flex: 1;
  min-width: 0;
}

/* Smaller arrows for the compact thumb strip */
.pw-nickx-wrap .pw-related__arrow {
  position: relative;
  transform: scale(0.7);
  font-size: 1.8rem;
  color: #245255;
  background-image: url(../img/arrow-bg-white.svg);
  background-size: cover;
  background-position: center;
  background-color: transparent;
  border-radius: 0;
}

.pw-nickx-wrap .pw-related__arrow:hover {
  transform: scale(0.8);
}


.nswiper-slide{
  cursor: pointer;
}

/*
.pw-related__arrow {
  flex-shrink: 0;
  width: 85px;
  height: 77px;
  background-image: url('../img/arrow-bg.png');
  background-size: cover;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.15s ease;
  color: #fff;
  font-size: 1.8rem;
  transform: scale(0.75);
}

.pw-related__arrow:hover {
  opacity: 0.8;
  transform: scale(0.9);
}
*/

div:where(.swal2-icon).swal2-question{
  border-color: #284241!important;
  color: #284241!important;
}