:root {

--font: Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;

--base-color: #FFFFFF;


--base-text-color: #333333;


--footer-color: #1C1734;


--footer-text-color: #FFFFFF;


--button-color: #5655A2;


--button-hover-color: #444389;


--button-text-color: #FFFFFF;


--header-color: #1C1734;


--header-text-color: #FFFFFF;


--clear-filters-display-text: inline-block;


--clear-filters-display-icon: inline-block;

}

	.es-clear-all-filters-button .button-text {
	display: var(--clear-filters-display-text);
	}

	.es-clear-all-filters-button .button-icon {
	display: var(--clear-filters-display-icon);
	}

:root {

--font: Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;

--base-color: #FFFFFF;


--base-text-color: #333333;


--footer-color: #1C1734;


--footer-text-color: #FFFFFF;


--button-color: #5655A2;


--button-hover-color: #444389;


--button-text-color: #FFFFFF;


--header-color: #1C1734;


--header-text-color: #FFFFFF;


--clear-filters-display-text: inline-block;


--clear-filters-display-icon: inline-block;

}

	.es-clear-all-filters-button .button-text {
	display: var(--clear-filters-display-text);
	}

	.es-clear-all-filters-button .button-icon {
	display: var(--clear-filters-display-icon);
	}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   NOSTRA — Nettailer webshop brand theme
   Target : shop.nostratechnologies.nettailer.com
   Source : nostra.ie
   --------------------------------------------------------------------------

   All custom properties below are declared with !important so this file
   works no matter where it lands in the stylesheet load order.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FONT
   --------------------------------------------------------------------------
   nostra.ie uses ITC Avant Garde Gothic, self-hosted as .woff2. Those files
   are served without CORS headers, so the shop cannot load them straight from
   nostra.ie — they have to be uploaded to Nettailer first.

   Until then this theme uses Poppins (geometric sans, closest free match) and
   Century Gothic where the visitor already has it.

   TO SWITCH TO THE REAL BRAND FONT:
     1. Download these three files from the WordPress media library:
          AvantGardeITCbyBT-Book.woff2     (400)
          AvantGardeITCbyBT-Medium.woff2   (500)
          AvantGardeITCbyBT-Demi.woff2     (700)
     2. Upload them via the Nettailer file manager.
     3. Uncomment the @font-face block below and correct the paths.
     4. In section 2, move "Avant Garde" to the front of --nostra-font.
   -------------------------------------------------------------------------- */

/*
@font-face {
  font-family: "Avant Garde";
  src: url("/files/AvantGardeITCbyBT-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde";
  src: url("/files/AvantGardeITCbyBT-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde";
  src: url("/files/AvantGardeITCbyBT-Demi.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/


/* --------------------------------------------------------------------------
   2. BRAND TOKENS
   Colours sampled directly from the rendered nostra.ie homepage.
   -------------------------------------------------------------------------- */

:root {
  /* Type — put "Avant Garde", before "Century Gothic" once the files are up */
  --nostra-font: "Century Gothic", "Poppins", system-ui, -apple-system,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;

  /* Core palette */
  --nostra-navy:        #1C1734 !important;  /* header, footer, hero */
  --nostra-navy-deep:   #14102A !important;
  --nostra-purple:      #5655A2 !important;  /* primary CTA */
  --nostra-purple-dark: #444389 !important;
  --nostra-purple-soft: #6C6BB7 !important;
  --nostra-teal:        #227299 !important;  /* links, secondary accent */
  --nostra-slate:       #6F8F9A !important;
  --nostra-ice:         #EBF7FC !important;  /* pale section background */
  --nostra-ice-alt:     #EDF4FF !important;
  --nostra-green:       #00CE7C !important;  /* in-stock / success */
  --nostra-ink:         #333333 !important;
  --nostra-muted:       #6E7191 !important;
  --nostra-line:        #E3E7F2 !important;
  --nostra-canvas:      #F7F9FC !important;

  /* Shape */
  --nostra-r-pill:  50px !important;
  --nostra-r-card:  16px !important;
  --nostra-r-input: 12px !important;

  /* Elevation */
  --nostra-shadow:    0 4px 20px rgba(28, 23, 52, .07) !important;
  --nostra-shadow-lg: 0 10px 34px rgba(28, 23, 52, .12) !important;

  /* ---- Nettailer's own theme variables, remapped to the brand ----
     --font was previously set to an invalid value, which is why every page
     was falling back to Times New Roman. This fixes it. */
  --font:               var(--nostra-font) !important;
  --base-color:         #FFFFFF !important;
  --base-text-color:    var(--nostra-ink) !important;
  --header-color:       var(--nostra-navy) !important;
  --header-text-color:  #FFFFFF !important;
  --footer-color:       var(--nostra-navy) !important;
  --footer-text-color:  #FFFFFF !important;
  --button-color:       var(--nostra-purple) !important;
  --button-hover-color: var(--nostra-purple-dark) !important;
  --button-text-color:  #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */

html,
body,
button,
input,
select,
textarea,
optgroup,
.button,
.buy-button,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nostra-font);
}

body {
  background-color: var(--nostra-canvas);
  color: var(--nostra-ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--nostra-navy);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 0;
}

h1 { font-size: 2.25rem; margin-bottom: .6em; }
h2 { font-size: 1.75rem; margin-bottom: .6em; }
h3 { font-size: 1.35rem; margin-bottom: .5em; }
h4 { font-size: 1.15rem; margin-bottom: .5em; }
h5, h6 { font-size: 1rem; margin-bottom: .5em; }

p { color: var(--nostra-ink); }

a {
  color: var(--nostra-teal);
  text-decoration: none;
  transition: color .18s ease;
}

a:hover,
a:focus {
  color: var(--nostra-purple);
  text-decoration: none;
}

::selection {
  background: var(--nostra-purple);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--nostra-purple-soft);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */

.header-wrapper {
  background-color: var(--nostra-navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.header-wrapper,
.header-wrapper a,
.header-wrapper .minibasket,
.header-wrapper .minibasket-sum,
.header-wrapper .minibasket-vat-container,
.header-wrapper .logged-in-info,
.header-wrapper .logged-in-info-text {
  color: #FFFFFF;
}

.header-wrapper a:hover {
  color: rgba(255, 255, 255, .75);
}

/* Logo — soften the white plate the uploaded image sits on */
.logo-container img,
.header-logo img {
  border-radius: 10px;
  max-height: 78px;
  width: auto;
}


/* --------------------------------------------------------------------------
   5. SEARCH BAR — pill shaped, matching the nostra.ie CTA geometry
   -------------------------------------------------------------------------- */

.product-search .product-search-input-container,
.product-search-input-container {
  border-radius: var(--nostra-r-pill);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
  border: 1px solid transparent;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.product-search-input-container:focus-within {
  border-color: var(--nostra-purple-soft);
  box-shadow: 0 0 0 3px rgba(108, 107, 183, .35);
}

input.product-search-input,
.product-search-input {
  border: 0;
  box-shadow: none;
  background: transparent;
  font-size: 1rem;
  color: var(--nostra-ink);
  padding-left: 22px;
  margin: 0;
  height: 52px;
}

.product-search-input::placeholder {
  color: #9AA0B5;
}

.product-search-button,
.product-search-action {
  color: var(--nostra-purple);
  background: transparent;
  border: 0;
  transition: color .18s ease;
}

.product-search-button:hover {
  color: var(--nostra-purple-dark);
}

.product-search-clear-button {
  color: #9AA0B5;
}

.product-search-clear-button:hover {
  color: var(--nostra-purple);
}

/* Type-ahead panel.
   The :has(> *) guard matters: these containers sit in the DOM permanently and
   are empty until they have something to show. Without the guard the border
   and shadow render as a stray hairline across the page. */
.product-search-suggestions:has(> *),
.search-suggestion-container:has(> *),
.quick-search-overlay:has(> *) {
  border-radius: var(--nostra-r-card);
  box-shadow: var(--nostra-shadow-lg);
  border: 1px solid var(--nostra-line);
  overflow: hidden;
  background: #FFFFFF;
}

.product-search-suggestion:hover {
  background: var(--nostra-ice);
}


/* --------------------------------------------------------------------------
   6. MINI BASKET / ACCOUNT ICONS
   The default white square tiles are replaced with soft translucent pills,
   the same treatment as the "View our services" button on nostra.ie.
   -------------------------------------------------------------------------- */

/* The <a> and wrapper divs stay invisible; the pill lives on the icon itself,
   so the cart and the log-in control get identical treatment. */
.minibasket .minibasket-link,
.minibasket .login-basket > div > a {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: inline-block;
}

.minibasket .minibasket-icon,
.minibasket .minibasket-icon.login-button,
.minibasket .minibasket-link .minibasket-icon,
.minibasket .product-comparison-icon {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  color: #FFFFFF;
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .18s ease, border-color .18s ease;
}

.minibasket .minibasket-icon:hover,
.minibasket .minibasket-icon.login-button:hover,
.minibasket .minibasket-link .minibasket-icon:hover,
.minibasket .product-comparison-icon:hover {
  background: var(--nostra-purple);
  border-color: var(--nostra-purple);
  color: #FFFFFF;
}

.minibasket .minibasket-icon i,
.minibasket .product-comparison-icon i {
  color: #FFFFFF;
  font-size: 1.25rem;
}

.minibasket-sum,
.minibasket-sum-value {
  font-weight: 600;
  color: #FFFFFF;
}

/* "Excl VAT" switcher — plain text, no box, no italics */
.minibasket-vat-container,
.minibasket-vat-container *,
.vat-switcher-button,
.vat-switcher-label {
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .02em;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .78);
}

.vat-switcher-button:hover,
.vat-switcher-button:hover .vat-switcher-label {
  color: #FFFFFF;
}

.minibasket-nbr-items,
.badge {
  background: var(--nostra-green);
  color: var(--nostra-navy);
  font-weight: 700;
  border-radius: 999px;
}

.minibasket .badge,
.minibasket-nbr-items {
  position: absolute;
  top: -6px;
  right: -6px;
}


/* --------------------------------------------------------------------------
   7. MENU BAR
   -------------------------------------------------------------------------- */

/* .menu-wrapper is a 1px-tall container the nav overflows out of — painting it
   produces a stray line, so only .menu-bar carries the styling. */
.menu-wrapper {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.menu-bar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--nostra-line);
  box-shadow: 0 1px 3px rgba(28, 23, 52, .04);
}

.menu-bar-item > a,
.menu-bar-item,
.menu-bar-desktop-menu > a,
.menu-bar-desktop-menu-products > a {
  color: var(--nostra-navy);
  font-weight: 500;
  letter-spacing: .01em;
}

.menu-bar-item > a:hover,
.menu-bar-desktop-menu > a:hover {
  color: var(--nostra-purple);
}

.menu-bar-item {
  position: relative;
}

/* Purple underline on hover, mirroring nostra.ie's nav treatment */
.menu-bar-item::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--nostra-purple);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.menu-bar-item:hover::after,
.menu-bar-item.active::after,
.menu-bar-item.selected::after {
  transform: scaleX(1);
}

/* Dropdown / drilldown panels */
.menu-bar-desktop-categories-menu,
.category-group-menu,
.resource-menu-desktop,
.is-accordion-submenu,
.is-drilldown {
  border-radius: 0 0 var(--nostra-r-card) var(--nostra-r-card);
  box-shadow: var(--nostra-shadow-lg);
  border: 1px solid var(--nostra-line);
  border-top: 0;
  background: #FFFFFF;
  overflow: hidden;
}

.menu-bar-desktop-categories-menu-item a,
.category-group-menu a,
.is-accordion-submenu-item a {
  color: var(--nostra-navy);
}

.menu-bar-desktop-categories-menu-item:hover,
.category-group-menu li:hover,
.is-accordion-submenu-item:hover {
  background: var(--nostra-ice);
}

.menu-bar-mobile-menu a,
.menu-bar-mobile-menu i {
  color: var(--nostra-navy);
}


/* --------------------------------------------------------------------------
   8. PAGE SHELL
   -------------------------------------------------------------------------- */

.main-wrapper,
.content-container {
  background: var(--nostra-canvas);
}

.page-content,
.first-page-content {
  color: var(--nostra-ink);
}

/* Homepage banner / slider */
.banners,
.bxslider li img,
.bx-wrapper .bx-viewport {
  border-radius: var(--nostra-r-card);
  overflow: hidden;
  border: 0;
  box-shadow: var(--nostra-shadow);
}

.bx-wrapper {
  border: 0;
  box-shadow: none;
  background: transparent;
}


/* --------------------------------------------------------------------------
   9. BUTTONS — pill shaped, purple, bold, exactly as on nostra.ie
   -------------------------------------------------------------------------- */

.button,
.buy-button,
.button__notify-me,
button.button,
a.button,
input[type="submit"],
input[type="button"] {
  background-color: var(--nostra-purple);
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: var(--nostra-r-pill);
  font-family: var(--nostra-font);
  font-weight: 700;
  letter-spacing: .01em;
  padding: 12px 28px;
  line-height: 1.2;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.button:hover,
.buy-button:hover,
.button__notify-me:hover,
button.button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--nostra-purple-dark);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(86, 85, 162, .32);
  transform: translateY(-1px);
}

.button:active,
.buy-button:active {
  transform: translateY(0);
  box-shadow: none;
}

.button[disabled],
.buy-button[disabled],
.button.disabled {
  background-color: #C7CAD9;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Compact buy button in list rows.
   The icon <i> carries the class .buy-button-icon, so padding must never be
   applied to it — it pushes the cart glyph out of the circle. The button gets
   a fixed square footprint instead and centres the icon with flexbox. */
.buy-button--sm {
  border-radius: var(--nostra-r-pill);
  padding: 8px 16px;
}

.prodlist-row .buy-button,
.prodlist-row__buy-wrapper .buy-button,
.product-list__item .buy-button,
.buy-form-container .buy-button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1rem;
}

.buy-button .buy-button-icon,
.buy-button > i {
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
  font-size: 1.05rem;
  line-height: 1;
  display: block;
}

/* Secondary / outline button — the "View our services" style */
.button--secondary,
.button.secondary,
.product-list-filters-reset,
.es-clear-all-filters-button,
.product-list-category-more,
.product-list-filters-show-more,
.product-list-filters-show-less {
  background: transparent;
  color: var(--nostra-purple);
  border: 1px solid var(--nostra-purple);
  border-radius: var(--nostra-r-pill);
  font-weight: 600;
  padding: 8px 20px;
  transition: background .18s ease, color .18s ease;
}

.button--secondary:hover,
.button.secondary:hover,
.product-list-filters-reset:hover,
.es-clear-all-filters-button:hover,
.product-list-category-more:hover,
.product-list-filters-show-more:hover,
.product-list-filters-show-less:hover {
  background: var(--nostra-purple);
  color: #FFFFFF;
}

.buy-quantity__input,
.buy-quantity-container input {
  border-radius: var(--nostra-r-input);
  border: 1px solid var(--nostra-line);
  text-align: center;
}


/* --------------------------------------------------------------------------
   10. FORM CONTROLS
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
  border: 1px solid var(--nostra-line);
  border-radius: var(--nostra-r-input);
  background-color: #FFFFFF;
  color: var(--nostra-ink);
  box-shadow: none;
  padding: 10px 14px;
  height: auto;
  transition: border-color .18s ease, box-shadow .18s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--nostra-purple-soft);
  box-shadow: 0 0 0 3px rgba(108, 107, 183, .18);
  outline: none;
}

.form-label,
label {
  color: var(--nostra-navy);
  font-weight: 500;
}

.form-container:has(> *),
.form-section:has(> *) {
  background: #FFFFFF;
  border: 1px solid var(--nostra-line);
  border-radius: var(--nostra-r-card);
  box-shadow: var(--nostra-shadow);
  padding: 22px;
}

.input-invalid,
.input-invalid-varning {
  border-color: #CF2E2E;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--nostra-purple);
}


/* --------------------------------------------------------------------------
   11. SIDEBAR — categories and filters as rounded cards
   -------------------------------------------------------------------------- */

.product-list-categories,
.product-list-filters,
.es-filters-wrapper {
  background: #FFFFFF;
  border: 1px solid var(--nostra-line);
  border-radius: var(--nostra-r-card);
  box-shadow: var(--nostra-shadow);
  padding: 6px 14px 12px;
}

/* Individual filter groups are plain blocks inside that card — giving each one
   its own card produces nested boxes and hairlines where a group is empty. */
.es-filter {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

.es-filter:has(.es-filter-header) {
  padding: 6px 0;
}

.es-filter + .es-filter:has(.es-filter-header) {
  border-top: 1px solid var(--nostra-line);
  margin-top: 6px;
}

.es-filter-header,
.es-options-header,
.product-list-categories h2,
.product-list-filters h2,
.es-root-category {
  color: var(--nostra-navy);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.es-options-label,
.es-options-option,
.es-category-label,
.product-list-category {
  color: var(--nostra-ink);
  border-radius: 8px;
  transition: background .16s ease, color .16s ease;
}

.es-options-option:hover,
.es-category-label:hover,
.product-list-category:hover {
  background: var(--nostra-ice);
  color: var(--nostra-purple);
}

.es-options-option-selected,
.es-category-label--selected {
  background: var(--nostra-ice-alt);
  color: var(--nostra-purple);
  font-weight: 600;
}

.es-options-value,
.es-options-badge {
  color: var(--nostra-muted);
}

/* Range filter min/max boxes (Screen Size, Weight, Storage Capacity).
   The theme's generic input padding (10px 14px) left only ~20px of content
   width in a 52px box, clipping values like "10.5". */
.es-range-input-container {
  width: auto;
  flex: 0 0 auto;
}

.es-range-input-container input,
input.slider-min,
input.slider-max {
  width: 70px;
  min-width: 70px;
  padding: 8px 6px;
  font-size: .8rem;
  text-align: center;
}

.es-slider .noUi-connect,
.noUi-connect {
  background: var(--nostra-purple);
}

.noUi-handle {
  border-radius: 50%;
  border: 2px solid var(--nostra-purple);
  box-shadow: 0 2px 6px rgba(28, 23, 52, .2);
}


/* --------------------------------------------------------------------------
   12. PRODUCT LISTS
   -------------------------------------------------------------------------- */

.es-controls,
.es-sort,
.es-layout {
  color: var(--nostra-navy);
}

.product-list__item,
.prodlist-row,
.es-product-list > li,
.product-list__items > li {
  background: #FFFFFF;
  border: 1px solid var(--nostra-line);
  border-radius: var(--nostra-r-card);
  box-shadow: var(--nostra-shadow);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.product-list__item:hover,
.prodlist-row:hover,
.es-product-list > li:hover {
  box-shadow: var(--nostra-shadow-lg);
  border-color: rgba(86, 85, 162, .35);
  transform: translateY(-2px);
}

.product-list__title,
.product-list__title-link,
.prodlist-row__prodinfo a {
  color: var(--nostra-navy);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.product-list__title-link:hover,
.prodlist-row__prodinfo a:hover {
  color: var(--nostra-purple);
}

.prodlist__manufacturer {
  color: var(--nostra-slate);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  font-weight: 600;
}

.product-list__partnumber,
.product-list__oempartnumbers,
.product-list__condition,
.product-list__description {
  color: var(--nostra-muted);
}

.prodlist-row__price,
.prodlist-row__prices,
.price,
.product__price {
  color: var(--nostra-navy);
  font-weight: 700;
}

/* The pill sits on an inline <span>, so horizontal padding is what keeps the
   999px radius clear of the first and last letters. box-decoration-break makes
   a title that wraps onto a second line keep its padding on both fragments. */
.prodlist__label {
  background: var(--nostra-purple);
  color: #FFFFFF;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Stock indicators */
.product__stock {
  font-weight: 600;
}

.product__stock--info {
  color: var(--nostra-green);
}

.product__stock--warehouse,
.product__stock--supplier {
  color: var(--nostra-slate);
}

.product-list__items-icon,
.product-comparison-icon,
.product__compare,
.product__bookmark {
  color: var(--nostra-slate);
  transition: color .16s ease;
}

.product-list__items-icon:hover,
.product-list__items-icon.selected,
.product__compare:hover,
.product__bookmark:hover {
  color: var(--nostra-purple);
}

.prodlist-row__img-wrapper,
.prodlist-row__img {
  border-radius: 10px;
  background: #FFFFFF;
}


/* --------------------------------------------------------------------------
   13. PAGINATION
   -------------------------------------------------------------------------- */

.pagination a,
.pagination span,
.es-paginator a,
.es-paginator span {
  border-radius: 999px;
  color: var(--nostra-navy);
  border: 1px solid var(--nostra-line);
  background: #FFFFFF;
  min-width: 38px;
  text-align: center;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.pagination a:hover,
.es-paginator a:hover {
  background: var(--nostra-ice);
  border-color: var(--nostra-purple-soft);
  color: var(--nostra-purple);
}

.pagination .active a,
.pagination .current,
.es-paginator .selected,
.es-paginator .active {
  background: var(--nostra-purple);
  border-color: var(--nostra-purple);
  color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   14. TABLES (basket, order history, comparison)
   -------------------------------------------------------------------------- */

table {
  border-radius: var(--nostra-r-card);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: #FFFFFF;
  box-shadow: var(--nostra-shadow);
}

table thead th,
table th {
  background: var(--nostra-navy);
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: .01em;
  border: 0;
}

table td {
  border-bottom: 1px solid var(--nostra-line);
  color: var(--nostra-ink);
}

table tbody tr:hover td {
  background: var(--nostra-ice);
}

table tbody tr:last-child td {
  border-bottom: 0;
}


/* --------------------------------------------------------------------------
   15. MODALS, MESSAGES, TOOLTIPS
   -------------------------------------------------------------------------- */

.modal-header,
.basket-takeover-modal-header {
  background: var(--nostra-navy);
  color: #FFFFFF;
  border-radius: var(--nostra-r-card) var(--nostra-r-card) 0 0;
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.basket-takeover-modal-header h1,
.basket-takeover-modal-header h2 {
  color: #FFFFFF;
  margin: 0;
}

.basket-takeover-modal,
.basket-takeover-modal-content,
.basket-overlay,
.display-configurations-modal {
  border-radius: var(--nostra-r-card);
  box-shadow: var(--nostra-shadow-lg);
  overflow: hidden;
}

.message-container:has(> *) {
  border-radius: var(--nostra-r-card);
  border: 1px solid var(--nostra-line);
  background: var(--nostra-ice);
  color: var(--nostra-navy);
}

.campaign-info,
.cookie-info,
.cookie-wrapper {
  background: var(--nostra-navy);
  color: #FFFFFF;
  border-radius: var(--nostra-r-card);
}

.cookie-wrapper a,
.campaign-info a {
  color: #FFFFFF;
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   16. LOGIN
   -------------------------------------------------------------------------- */

.login-container:has(> *),
.new-customer:has(> *),
.administrator-info-box-container:has(> *) {
  background: #FFFFFF;
  border: 1px solid var(--nostra-line);
  border-radius: var(--nostra-r-card);
  box-shadow: var(--nostra-shadow);
  padding: 22px;
}

.logged-in-info,
.logged-in-info-text {
  color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */

.footer-wrapper,
.content-footer-wrapper {
  background-color: var(--nostra-navy);
  color: #FFFFFF;
}

.footer-wrapper h1,
.footer-wrapper h2,
.footer-wrapper h3,
.footer-wrapper h4,
.footer-wrapper h5,
.footer-wrapper strong,
.footer-wrapper b {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  margin-bottom: .9em;
}

.footer-wrapper,
.footer-wrapper p,
.footer-wrapper li,
.footer-wrapper .footer-text {
  color: rgba(255, 255, 255, .82);
  line-height: 1.8;
}

.footer-wrapper a,
.footer .link {
  color: rgba(255, 255, 255, .82);
  transition: color .16s ease;
}

.footer-wrapper a:hover,
.footer .link:hover {
  color: #FFFFFF;
}

.footer-icon,
.footer-fa {
  color: #FFFFFF;
  opacity: .85;
  transition: opacity .16s ease, transform .16s ease;
}

.footer-wrapper a:hover .footer-icon,
.footer-wrapper a:hover .footer-fa {
  opacity: 1;
  transform: translateY(-1px);
}

/* Currency switcher — pill row, centred like nostra.ie's footer meta line */
.footer-switches {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 18px;
  margin-top: 22px;
}

.currency-switch-item,
.currency-switch-list a {
  color: rgba(255, 255, 255, .7);
  font-weight: 500;
}

.currency-switch-item.selected,
.currency-switch-item.active,
.currency-switch-list a:hover {
  color: #FFFFFF;
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   18. SPINNER
   -------------------------------------------------------------------------- */

.spinner,
.content-spinner,
.product-spinner-container .spinner,
.es-result-spinner-container .spinner {
  border-top-color: var(--nostra-purple);
  color: var(--nostra-purple);
}


/* --------------------------------------------------------------------------
   19. RESPONSIVE TRIM
   -------------------------------------------------------------------------- */

@media screen and (max-width: 640px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }

  .button,
  .buy-button,
  input[type="submit"] {
    padding: 11px 22px;
  }

  .logo-container img,
  .header-logo img {
    max-height: 58px;
  }

  .product-list__item,
  .prodlist-row {
    border-radius: 12px;
  }
}

.prodlist-row .buy-form-container .buy-button {
    height: 50%;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="url"], input[type="date"], select, textarea {
    margin: 4px;
}

/* =========================================================================
   Product list fixes — added 2026-09-07
   Scoped to .prodlist-row / .prodlist-row.large-grid so the compact and
   medium list views and all other page types are unaffected.
   ========================================================================= */

/* 1. Sticky header keeps the navy background.
      main.scss sets .header-wrapper.fixed { background: #fff } above 640px,
      which hid the white logo and white header text on scroll. */
.header-wrapper.fixed {
  background-color: var(--nostra-navy);
}

/* 2. Buy button: border-radius 50% only works while the button is square.
      Grid view forces width:100%, so it rendered as an ellipse.
      The pill token gives the same circle on a square button. */
.prodlist-row .buy-button {
  border-radius: var(--nostra-r-pill);
}

/* 3. Grid view only — button height, quantity alignment, card height.
      a) the earlier height:50% is a percentage of an auto-height flex
         container, so the button collapsed to ~18px
      b) the fieldset is display:flex with align-items:normal and the
         quantity input carries a stray 4px margin
      c) .large-grid is a hard 350px with overflow:hidden but the content
         needs up to ~262px in a 190px content area, so the buy row was
         already hanging out of the bottom of the card */
@media screen and (min-width: 640px) {

  .prodlist-row.large-grid {
    --content-row-height: 270px;
    --large-row-height: 430px;
  }

  .prodlist-row.large-grid .prodlist-row__buy-wrapper.buy-form-container {
    align-items: center;
    gap: 8px;
  }

  .prodlist-row.large-grid .buy-quantity-container {
    margin: 0;
  }

  .prodlist-row.large-grid .buy-quantity__input {
    height: 48px;
    margin: 0;
    padding: 0 8px;
    text-align: center;
  }

  .prodlist-row.large-grid .buy-form-container .buy-button {
    height: 48px;
    min-height: 48px;
    max-height: none;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
}