/* NNGC Product Page key specs
   - The card (price, stock, four spec tiles, condition) shows on every screen size.
   - Phones also get the slim header, shorter gallery and sticky basket bar.
   Everything is scoped to product pages, and only loads there.
   The theme prints everything in its final place, so none of these rules
   wait for JavaScript: the first paint is the final layout. */

/* ===================== ALL SCREEN SIZES ===================== */

/* Things the card replaces (hidden, not removed, so Google still reads them) */
body.single-product .product-review-sku-categories,
body.single-product ul.product-attribute-condition,
body.single-product .product-price-buy > p.price,
body.single-product .product-price-buy > .woocommerce-product-details__short-description {
  display: none;
}

.nngc-mpdp {
  font-family: var(--fontfam-default, "Lato", Tahoma, Arial, Helvetica, sans-serif);
  color: #3a3a3a;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Trustindex row at the top of the card. Set --nngc-mpdp-reviews-h to the
   row's loaded height so the widget doesn't push the card down when it renders. */
.nngc-mpdp__reviews {
  margin: 0;
  min-height: var(--nngc-mpdp-reviews-h, 0);
}
.nngc-mpdp__reviews--phone {
  display: none;
}
.nngc-mpdp .ti-widget-container,
.nngc-mpdp .ti-header {
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
}
.nngc-mpdp__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.nngc-mpdp__price {
  font-size: 30px;
  font-weight: 600;
  color: #c11f1f;
  line-height: 1.1;
}
.nngc-mpdp__rrp {
  font-size: 14px;
  color: #6b6b6b;
  margin-left: 8px;
  font-weight: 400;
}
.nngc-mpdp__rrp s {
  color: #6b6b6b;
}
.nngc-mpdp__hand {
  font-size: 16px;
  font-weight: 700;
  color: #3a3a3a;
}
.nngc-mpdp__stock {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #3a3a3a;
}
.nngc-mpdp__stock strong {
  color: #729317;
  font-weight: 700;
}
.nngc-mpdp__stock a {
  color: #3a3a3a;
  text-decoration: underline;
}
.nngc-mpdp__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #96c11f;
  position: relative;
  top: 1px;
}
.nngc-mpdp__stock.is-out strong {
  color: #c11f1f;
}
.nngc-mpdp__stock.is-out .nngc-mpdp__dot {
  background: #c11f1f;
}
.nngc-mpdp__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}
.nngc-mpdp__tile {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 3px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nngc-mpdp__tile dd {
  margin: 0;
}
.nngc-mpdp__label {
  font-size: 13px;
  font-weight: 400;
  color: #6b6b6b;
}
.nngc-mpdp__value {
  font-size: 19px;
  font-weight: 700;
  color: #3a3a3a;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.nngc-mpdp__sub {
  font-size: 12px;
  color: #6b6b6b;
  line-height: 1.3;
}
.nngc-mpdp__cond {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 3px;
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nngc-mpdp__cond-head {
  margin: 0;
  font-size: 17px;
  text-align: center;
}
.nngc-mpdp__cond-head strong {
  font-weight: 700;
}
.nngc-mpdp__guide {
  align-self: center;
  font-size: 13px;
  color: #6b6b6b;
  text-decoration: underline;
}
.nngc-mpdp__scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.nngc-mpdp__score {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.nngc-mpdp__score-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: #6b6b6b;
}
.nngc-mpdp__score-top b {
  font-size: 15px;
  font-weight: 700;
  color: #3a3a3a;
}
.nngc-mpdp__bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #e5e5e5;
  overflow: hidden;
}
.nngc-mpdp__bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #96c11f;
}

/* Delivery date checker: printed twice, in the card for phones and after
   Add to basket for laptops; only one shows at each screen size. */
.nngc-mpdp__dd .nngc-dd {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.nngc-mpdp__dd--phone {
  display: none;
}

/* ===================== LAPTOPS AND DESKTOPS ===================== */
@media (min-width: 768px) {
  /* Shorter title so the price and Add to basket reach the first screen */
  body.single-product .product-meta-info .product-title {
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 18px;
  }
  .nngc-mpdp__dd--desktop .nngc-dd {
    margin-top: 12px !important;
  }
}

/* Narrow laptops and tablets: tiles in two rows */
@media (min-width: 768px) and (max-width: 1100px) {
  .nngc-mpdp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===================== PHONES ===================== */
@media (max-width: 767px) {

  /* ---------- Header: shrink from ~415px to ~90px ---------- */
  body.single-product .nav-row,
  body.single-product .nav-row > nav {
    height: 58px;
  }
  body.single-product .nav-row > nav {
    justify-content: center;
  }
  body.single-product #mobile-nav-toggle {
    top: 0;
  }
  body.single-product .logo-col {
    top: 5px;
  }
  body.single-product .logo-col img.logo {
    height: 48px;
    width: auto;
    margin: 0 auto; /* keep the smaller logo centred in its box */
  }
  body.single-product .shop-cart-col {
    top: 12px;
    left: auto;
    right: 10px;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  body.single-product .shop-cart-col .currency-selector-container {
    margin: 0;
  }
  body.single-product .shop-cart-col .currency-selector-container .switch {
    transform: scale(0.85);
    transform-origin: right center;
  }
  body.single-product .shop-cart-col .account-profile-container img {
    width: 24px;
    height: 24px;
  }
  /* Logo row is shorter, so the search bar sits straight under it */
  body.single-product .header-row {
    min-height: 0;
  }
  body.single-product .header-inner-row {
    padding-top: 0;
  }


  /* Guarantee strip: one slim line instead of a 115px card */
  body.single-product .header-guarantee-ti-row {
    margin-bottom: 0;
    height: auto !important;
  }
  body.single-product .guarantee-promises-row,
  body.single-product .guarantee-promises-row .swiper-wrapper,
  body.single-product .guarantee-promises-row li {
    height: 30px !important;
    min-height: 0;
  }
  body.single-product .guarantee-promises-row .promise-card {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }
  body.single-product .guarantee-promises-row .promise-card img {
    width: 15px;
    height: 15px;
    margin: 0;
  }

  /* The header's reviews row isn't printed on product pages (it's in the card) */

  /* ---------- Gallery: shorter, no breadcrumb above it ---------- */
  body.single-product .product-breadcrumbs {
    display: none;
  }

  /* ---------- Club name above the photos ----------
     The two product columns stack on phones. Unwrapping the details column
     makes its children siblings of the gallery column, so the title can be
     ordered first with CSS; it stays in the same place in the HTML. */
  body.single-product .product-container {
    gap: 0;
  }
  body.single-product .product-container > .product-meta-info {
    display: contents;
  }
  body.single-product .product-meta-info > * {
    flex: 0 1 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body.single-product .product-meta-info > .product-title {
    order: -1;
    margin: 16px 0 14px;
  }

  /* ---------- Card sizing on phones ---------- */
  .nngc-mpdp {
    --nngc-mpdp-reviews-h: 25px; /* phone Trustindex row, measured at 24.75px */
    gap: 8px;
    margin: 12px 0 14px;
  }
  .nngc-mpdp__reviews--phone,
  .nngc-mpdp__dd--phone {
    display: block;
  }
  .nngc-mpdp__reviews--desktop,
  .nngc-mpdp__dd--desktop {
    display: none;
  }
  .nngc-mpdp__price {
    font-size: 27px;
  }
  .nngc-mpdp__rrp {
    font-size: 13px;
    margin-left: 6px;
  }
  .nngc-mpdp__hand {
    font-size: 15px;
  }
  .nngc-mpdp__stock {
    font-size: 13px;
  }
  .nngc-mpdp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .nngc-mpdp__tile {
    padding: 8px 12px;
    gap: 1px;
  }
  .nngc-mpdp__value {
    font-size: 18px;
  }
  .nngc-mpdp__label {
    font-size: 12px;
  }
  .nngc-mpdp__cond {
    padding: 10px 12px 12px;
    gap: 10px;
  }
  .nngc-mpdp__scores {
    gap: 12px;
  }

  /* ---------- Sticky add to basket bar (only styled when it has a button) ---------- */
  .add-to-cart-fixed-row.nngc-mpdp-buybar {
    height: auto;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px 12px;
    background: #ffffff;
    border-top: 1px solid #e3e3e3;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
  }
  .add-to-cart-fixed-row.nngc-mpdp-buybar form.cart {
    width: 100%;
    margin: 0;
  }
  .add-to-cart-fixed-row.nngc-mpdp-buybar .single_add_to_cart_button {
    position: static !important;
    width: 100%;
    height: 50px;
    border-radius: 3px;
    justify-content: center;
  }
  .nngc-mpdp__trust {
    display: flex;
    justify-content: center;
    gap: 14px;
    font-family: var(--fontfam-default, "Lato", Tahoma, Arial, Helvetica, sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: #3a3a3a;
  }
  .nngc-mpdp__trust span {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  body.nngc-mpdp-has-buybar {
    padding-bottom: 96px;
  }
  /* Basket bubble: in the header next to the menu (moved by the script),
     or above the sticky bar if the script couldn't move it. Invisible while
     the script is placing it, so it never visibly jumps. */
  body.nngc-mpdp-cart-pending #fkcart-floating-toggler {
    visibility: hidden !important;
  }
  body.nngc-mpdp-has-buybar #fkcart-floating-toggler {
    bottom: 112px !important;
  }
  body.single-product #fkcart-floating-toggler.nngc-mpdp-cart-in-header {
    position: absolute !important;
    top: 50% !important;
    left: 70px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) scale(0.75);
    transform-origin: left center;
    z-index: 20 !important;
  }

  /* No empty strip under the photo dots */
  body.single-product .product-slideshow-images .swiper-slide {
    margin-bottom: 28px !important;
  }
  body.single-product .product-slideshow-images .swiper-pagination {
    bottom: 2px !important;
    top: auto !important;
  }
}

/* The sticky-bar trust line is phone-only */
@media (min-width: 768px) {
  .nngc-mpdp__trust {
    display: none !important;
  }
}