/* NN Store: WooCommerce in the engine tokens.
   Layered on top of the default WooCommerce stylesheets, which stay on for
   their structural rules (responsive cart table, gallery, select2, ratings).
   Selectors start with "html" so they outrank WooCommerce's own
   ".woocommerce a.button" family whatever order the files load in.
   SCOPE matches both body.woocommerce (shop, product) and the
   div.woocommerce wrapper that cart, checkout and account shortcodes print. */

/* ---------- Notices, in the teal tint ---------- */

html .woocommerce-message.woocommerce-message,
html .woocommerce-info.woocommerce-info,
html .woocommerce-error.woocommerce-error,
html .woocommerce-noreviews.woocommerce-noreviews,
html p.no-comments {
  background: var(--teal-tint);
  color: var(--choc);
  border-top: 4px solid var(--teal);
  border-radius: 16px;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 24px;
  box-shadow: var(--shadow-card);
}
html .woocommerce-message.woocommerce-message::before,
html .woocommerce-info.woocommerce-info::before { color: var(--teal-deep); }
html .woocommerce-error.woocommerce-error { border-top-color: var(--pink-deep); background: #fff0f6; }
html .woocommerce-error.woocommerce-error::before { color: var(--pink-deep); }
html .woocommerce-message.woocommerce-message a:not(.button),
html .woocommerce-info.woocommerce-info a:not(.button),
html .woocommerce-error.woocommerce-error a:not(.button) { color: var(--teal-deep); font-weight: 600; }

html p.demo_store,
html .woocommerce-store-notice {
  background: var(--teal);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
}
html .woocommerce-store-notice a { color: #fff; }

/* ---------- Buttons as pills ---------- */

/* Secondary actions (update cart, apply coupon, view cart, account): the
   engine's small teal pill. */
html :is(.woocommerce, .woocommerce-page) a.button,
html :is(.woocommerce, .woocommerce-page) button.button,
html :is(.woocommerce, .woocommerce-page) input.button,
html :is(.woocommerce, .woocommerce-page) #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 133, 135, 0.32);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}
html :is(.woocommerce, .woocommerce-page) a.button:hover,
html :is(.woocommerce, .woocommerce-page) button.button:hover,
html :is(.woocommerce, .woocommerce-page) input.button:hover,
html :is(.woocommerce, .woocommerce-page) #respond input#submit:hover {
  background: var(--teal-deep);
  color: #fff;
  transform: translateY(-2px);
}

/* Primary actions (add to cart, proceed to checkout, place order): the
   engine's pink pill, chocolate text, full size. */
html :is(.woocommerce, .woocommerce-page) a.button.alt,
html :is(.woocommerce, .woocommerce-page) button.button.alt,
html :is(.woocommerce, .woocommerce-page) input.button.alt,
html :is(.woocommerce, .woocommerce-page) #respond input#submit.alt {
  font-size: 15px;
  padding: 15px 28px;
  background: var(--pink);
  color: var(--choc);
  box-shadow: 0 8px 22px rgba(255, 111, 174, 0.38);
}
html :is(.woocommerce, .woocommerce-page) a.button.alt:hover,
html :is(.woocommerce, .woocommerce-page) button.button.alt:hover,
html :is(.woocommerce, .woocommerce-page) input.button.alt:hover,
html :is(.woocommerce, .woocommerce-page) #respond input#submit.alt:hover {
  background: var(--pink-deep);
  color: var(--choc);
  box-shadow: 0 12px 28px rgba(255, 111, 174, 0.46);
}

html :is(.woocommerce, .woocommerce-page) a.button.disabled,
html :is(.woocommerce, .woocommerce-page) a.button:disabled,
html :is(.woocommerce, .woocommerce-page) button.button.disabled,
html :is(.woocommerce, .woocommerce-page) button.button:disabled,
html :is(.woocommerce, .woocommerce-page) button.button:disabled[disabled],
html :is(.woocommerce, .woocommerce-page) button.button.alt.disabled,
html :is(.woocommerce, .woocommerce-page) button.button.alt:disabled,
html :is(.woocommerce, .woocommerce-page) button.button.alt:disabled[disabled],
html :is(.woocommerce, .woocommerce-page) a.button.alt.disabled,
html :is(.woocommerce, .woocommerce-page) input.button:disabled,
html :is(.woocommerce, .woocommerce-page) input.button:disabled[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  padding: 11px 20px;
}
html :is(.woocommerce, .woocommerce-page) button.button.alt.disabled,
html :is(.woocommerce, .woocommerce-page) button.button.alt:disabled,
html :is(.woocommerce, .woocommerce-page) button.button.alt:disabled[disabled],
html :is(.woocommerce, .woocommerce-page) a.button.alt.disabled {
  padding: 15px 28px;
  background: var(--pink);
  color: var(--choc);
}

html :is(.woocommerce, .woocommerce-page) a.added_to_cart {
  font-weight: 600;
  font-size: 14px;
  color: var(--teal-deep);
}

/* ---------- Fields ---------- */

html :is(.woocommerce, .woocommerce-page) form .form-row :is(.input-text, select, textarea),
html :is(.woocommerce, .woocommerce-page) :is(input.input-text, textarea, select),
html :is(.woocommerce, .woocommerce-page) input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="number"], [type="search"], [type="url"], [type="date"]) {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--choc);
  background: var(--cream);
  border: 2px solid var(--teal-tint);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: none;
}
html :is(.woocommerce, .woocommerce-page) form .form-row :is(.input-text, select, textarea):focus,
html :is(.woocommerce, .woocommerce-page) :is(input.input-text, textarea, select):focus,
html :is(.woocommerce, .woocommerce-page) input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="number"], [type="search"], [type="url"], [type="date"]):focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0, 133, 135, 0.14);
}
html :is(.woocommerce, .woocommerce-page) form .form-row label { font-weight: 600; font-size: 14px; line-height: 1.5; }
html :is(.woocommerce, .woocommerce-page) form .form-row .required { color: var(--pink-deep); text-decoration: none; }
html :is(.woocommerce, .woocommerce-page) form .form-row.woocommerce-invalid :is(.input-text, select) { border-color: var(--pink-deep); }

html :is(.woocommerce, .woocommerce-page) .quantity .qty {
  width: 84px;
  text-align: center;
  padding: 12px 8px;
  background: #fff;
}

html .woocommerce table.cart td.actions .coupon .input-text {
  min-width: 150px;
  border: 2px solid var(--teal-tint);
  border-radius: 999px;
  padding: 10px 16px;
  margin-right: 8px;
  background: var(--cream);
}

html body .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 50px;
  padding: 9px 6px;
  border: 2px solid var(--teal-tint);
  border-radius: 12px;
  background: var(--cream);
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--choc); line-height: 28px; }
html body .select2-container--default .select2-selection--single .select2-selection__arrow { top: 11px; right: 8px; }
html body .select2-dropdown { border: 2px solid var(--teal-tint); border-radius: 12px; overflow: hidden; }
html body .select2-container--default .select2-results__option--highlighted[aria-selected],
html body .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--teal); color: #fff; }

/* ---------- Tables (cart, order review, account orders) ---------- */

html :is(.woocommerce, .woocommerce-page) table.shop_table {
  background: var(--white);
  border: 2px solid var(--teal-tint);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin: 0 0 28px;
}
html :is(.woocommerce, .woocommerce-page) table.shop_table th {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  padding: 14px 16px;
}
html :is(.woocommerce, .woocommerce-page) table.shop_table td {
  border-top: 1px solid var(--cream-deep);
  padding: 14px 16px;
}
html :is(.woocommerce, .woocommerce-page) table.shop_table tfoot th,
html :is(.woocommerce, .woocommerce-page) table.shop_table tfoot td { border-top: 1px solid var(--cream-deep); }
html :is(.woocommerce, .woocommerce-page) table.shop_table .product-name a { color: var(--choc); font-weight: 600; text-decoration: none; }
html :is(.woocommerce, .woocommerce-page) table.shop_table .product-name a:hover { color: var(--teal-deep); }
html :is(.woocommerce, .woocommerce-page) table.shop_table .amount { font-weight: 600; }
html :is(.woocommerce, .woocommerce-page) table.shop_table .order-total .amount { font-family: var(--head); font-weight: 400; font-size: 21px; color: var(--pink-deep); }
html :is(.woocommerce, .woocommerce-page) table.cart img { width: 72px; border-radius: 12px; background: var(--teal-tint); }
html :is(.woocommerce, .woocommerce-page) a.remove {
  color: var(--pink-deep) !important;
  border: 2px solid var(--pink);
  width: 28px;
  height: 28px;
  line-height: 24px;
  font-size: 20px;
}
html :is(.woocommerce, .woocommerce-page) a.remove:hover { background: var(--pink); color: var(--choc) !important; }

/* ---------- Cart page ---------- */

html .nn-store-page .cart-collaterals .cart_totals,
html .nn-store-page .cart-collaterals .cross-sells { margin-top: 12px; }
html .nn-store-page .cart_totals h2,
html .nn-store-page .cross-sells h2,
html .nn-store-page #order_review_heading,
html .nn-store-page .woocommerce-billing-fields h3,
html .nn-store-page .woocommerce-shipping-fields h3,
html .nn-store-page .woocommerce-additional-fields h3,
html .nn-store-page .woocommerce-column__title,
html .nn-store-page .woocommerce-order-details__title {
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
}
html :is(.woocommerce, .woocommerce-page) .cart_totals .wc-proceed-to-checkout a.checkout-button { width: 100%; font-size: 15px; padding: 15px 28px; }

/* ---------- Checkout ---------- */

html :is(.woocommerce, .woocommerce-page) #payment {
  background: var(--teal-tint-soft);
  border: 2px solid var(--teal-tint);
  border-radius: var(--radius);
}
html :is(.woocommerce, .woocommerce-page) #payment ul.payment_methods { border-bottom: 1px solid var(--teal-tint); }
html :is(.woocommerce, .woocommerce-page) #payment div.payment_box {
  background: var(--white);
  color: var(--choc);
  border-radius: 12px;
}
html :is(.woocommerce, .woocommerce-page) #payment div.payment_box::before { border-bottom-color: var(--white); }
html :is(.woocommerce, .woocommerce-page) #payment #place_order { width: 100%; float: none; }
html :is(.woocommerce, .woocommerce-page) .woocommerce-form-coupon-toggle .woocommerce-info,
html :is(.woocommerce, .woocommerce-page) .woocommerce-form-login-toggle .woocommerce-info { box-shadow: none; }
html :is(.woocommerce, .woocommerce-page) form.checkout_coupon,
html :is(.woocommerce, .woocommerce-page) form.login,
html :is(.woocommerce, .woocommerce-page) form.register,
html :is(.woocommerce, .woocommerce-page) form.lost_reset_password {
  background: var(--white);
  border: 2px solid var(--teal-tint);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-card);
}

/* ---------- My account ---------- */

html .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 8px;
}
html .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--teal-tint-soft);
  border: 2px solid var(--teal-tint);
  color: var(--choc);
  font-weight: 600;
  text-decoration: none;
}
html .woocommerce-MyAccount-navigation li a:hover { border-color: var(--teal); color: var(--teal-deep); }
html .woocommerce-MyAccount-navigation li.is-active a { background: var(--teal); border-color: var(--teal); color: #fff; }
html .woocommerce-MyAccount-content {
  background: var(--white);
  border: 2px solid var(--teal-tint);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-card);
}
html .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
@media (max-width: 768px) {
  html :is(.woocommerce, .woocommerce-page) .woocommerce-MyAccount-navigation,
  html :is(.woocommerce, .woocommerce-page) .woocommerce-MyAccount-content { float: none; width: 100%; }
}

/* ---------- Shop archive ---------- */

.nn-shop__intro:empty { display: none; }
.nn-shop__intro p:last-child { margin-bottom: 0; }
.nn-shop--archive .flavor-grid { margin-bottom: 0; }

html .woocommerce nav.woocommerce-pagination { margin-top: clamp(28px, 4vw, 44px); }
html .woocommerce nav.woocommerce-pagination ul { border: 0; display: inline-flex; flex-wrap: wrap; gap: 8px; }
html .woocommerce nav.woocommerce-pagination ul li { border: 0; }
html .woocommerce nav.woocommerce-pagination ul li a,
html .woocommerce nav.woocommerce-pagination ul li span {
  min-width: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--teal-tint);
  color: var(--teal-deep);
  font-weight: 700;
  line-height: 1.2;
}
html .woocommerce nav.woocommerce-pagination ul li a:hover,
html .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ---------- Single product ---------- */

.nn-shop--single { padding-top: clamp(36px, 5vw, 64px); }

.nn-product__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 860px) { .nn-product__grid { grid-template-columns: 1fr; } }

/* Undo WooCommerce's 48% floats: the grid places the two columns. */
html .woocommerce div.product.nn-product div.images,
html .woocommerce div.product.nn-product div.summary {
  float: none;
  width: 100%;
  margin: 0;
}
.nn-product__media { position: relative; min-width: 0; }
.nn-product__summary { min-width: 0; }

html .woocommerce div.product.nn-product .woocommerce-product-gallery {
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%),
    var(--teal-tint);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 36px);
  box-shadow: var(--shadow-card);
}
html .woocommerce div.product.nn-product div.images img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: min(70vh, 620px);
  margin-inline: auto;
  object-fit: contain;
  border-radius: 16px;
}
html .woocommerce div.product.nn-product div.images .flex-control-thumbs { margin-top: 14px; }
html .woocommerce div.product.nn-product div.images .flex-control-thumbs li { padding: 4px; }
html .woocommerce div.product.nn-product div.images .flex-control-thumbs li img { border-radius: 10px; max-height: none; }
html .woocommerce div.product.nn-product .woocommerce-product-gallery__trigger {
  top: 14px;
  right: 14px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}

html .woocommerce div.product.nn-product span.onsale,
html .woocommerce span.onsale {
  top: 14px;
  left: 14px;
  right: auto;
  margin: 0;
  min-width: 0;
  min-height: 0;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--pink);
  color: var(--choc);
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(255, 111, 174, 0.4);
  z-index: 3;
}

html .woocommerce div.product.nn-product .product_title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--choc);
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
.nn-product__tagline { font-size: clamp(17px, 2vw, 20px); color: var(--choc-soft); }
.nn-product__tagline p { margin: 0 0 18px; }

html .woocommerce div.product.nn-product p.price,
html .woocommerce div.product.nn-product span.price {
  font-family: var(--head);
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.1;
  color: var(--pink-deep);
  margin: 0 0 24px;
}
html .woocommerce div.product.nn-product p.price del { font-size: 0.6em; color: var(--choc-soft); opacity: 0.7; }
html .woocommerce div.product.nn-product p.price ins { text-decoration: none; }

html .woocommerce div.product.nn-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
}
html .woocommerce div.product.nn-product form.cart::before,
html .woocommerce div.product.nn-product form.cart::after { display: none; }
html .woocommerce div.product.nn-product form.cart div.quantity { float: none; margin: 0; }
html .woocommerce div.product.nn-product form.cart .button { float: none; }
html .woocommerce div.product.nn-product form.cart .variations { margin-bottom: 8px; width: 100%; }
html .woocommerce div.product.nn-product .stock { color: var(--teal-deep); font-weight: 600; }
html .woocommerce div.product.nn-product .stock.out-of-stock { color: var(--pink-deep); }

.nn-product__description {
  margin-top: clamp(40px, 6vw, 72px);
  max-width: 860px;
  background: var(--white);
  border: 2px solid var(--teal-tint);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(26px, 4vw, 42px);
}
.nn-product__description h2 { font-size: clamp(24px, 3vw, 32px); }
.nn-product__copy { color: var(--choc-soft); font-size: clamp(16px, 1.8vw, 18px); }
.nn-product__copy > :last-child { margin-bottom: 0; }

.nn-related,
html .woocommerce div.product .up-sells { margin-top: var(--section-y); }
html .woocommerce div.product .up-sells > h2 { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }

/* ---------- Cart and checkout blocks (new WooCommerce installs) ---------- */

html body .wc-block-components-button:not(.is-link) {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 0;
  background: var(--pink);
  color: var(--choc);
  box-shadow: 0 8px 22px rgba(255, 111, 174, 0.38);
}
html body .wc-block-components-button:not(.is-link):hover { background: var(--pink-deep); color: var(--choc); }
html body :is(.wc-block-components-form, .wc-block-checkout, .wc-block-cart) .wc-block-components-text-input input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="number"], [type="url"]),
html body :is(.wc-block-components-form, .wc-block-checkout, .wc-block-cart) .wc-blocks-components-select .wc-blocks-components-select__select,
html body :is(.wc-block-components-form, .wc-block-checkout, .wc-block-cart) .wc-block-components-textarea {
  border: 2px solid var(--teal-tint);
  border-radius: 12px;
  background: var(--cream);
  color: var(--choc);
}
html body :is(.wc-block-components-form, .wc-block-checkout, .wc-block-cart) .wc-block-components-text-input input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0, 133, 135, 0.14); }
html body .wc-block-components-notice-banner { border-radius: 16px; background: var(--teal-tint); border-color: var(--teal); color: var(--choc); }
html body .wc-block-components-notice-banner.is-error { background: #fff0f6; border-color: var(--pink-deep); }
html body .wc-block-components-title,
html body .wc-block-components-checkout-step__title { font-family: var(--head); font-weight: 400; }
html body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--head); color: var(--pink-deep); }