/* ==========================================================================
   BASE STYLES
   ========================================================================== */
:root {
  --bottom-bar-h: 75px;
  --site-header-h: 110px;
}

body {
  font-family: "Questrial", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: 1380px;
  padding: 0px 30px;
}

/* Typography */
h1 {
  font-size: 36px;
  line-height: 46px;
}

h2 {
  font-size: 32px;
  line-height: 42px;
}

h4 {
  font-size: 24px;
  line-height: 34px;
  font-weight: 500;
}

h5 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

p {
  font-size: 18px;
  line-height: 26px;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */


@media (min-width: 992px) {

  /* Make the whole navbar fixed for desktop */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000; /* below slide-panel (5000), but above page */
    background: #fff;
  }

  /* Stop content jumping under the fixed header */
  body {
    padding-top: var(--site-header-h);
  }
}

.navbar {
  background-color: #fff;
}

  .navbar .container {
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 6px 30px;
  }

.home .navbar .container {
  border-bottom: none;
  padding: 6px 30px;
}

.navbar-brand {
  margin-right: auto;
}

  .navbar-brand img {
    width: auto;
    height: 76px;
  }

.navbar-collapse {
  flex-grow: 0;
}

/* Navigation Right Section */
.navbar-right-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Delivery Country */
.delivery-country {
  text-align: right;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 8px;
}

.flags {
  height: 25px;
  width: auto;
  margin-left: 10px;
}

  .flags.selected {
    border: 1px solid red;
    padding-left: 5px;
    padding-right: 5px;
  }

/* Navigation Links */
.nav-link {
  padding: 15px !important;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  color: #023763;
}

  .nav-link:hover {
    color: #008E9D;
  }

.nav-item:last-of-type a {
  padding-right: 0px !important;
}



/* =========================================================
   Header animation when a bottom panel is open (desktop only)
   ========================================================= */

@media (min-width: 992px) {

  /* Smooth by default */
  .navbar {
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
    transform-origin: top center;
  }

  /* When any slide panel is open */
  body.panel-open .navbar {
    transform: translateY(-6px) scaleY(0.98);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    background-color: rgba(255,255,255,0.98);
  }

    /* gently scale logo/menu too */
    body.panel-open .navbar img,
    body.panel-open .navbar .logo {
      transition: transform 180ms ease;
      transform: scale(0.98);
    }
}

/* Respect accessibility */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  body.panel-open .navbar,
  body.panel-open .navbar img,
  body.panel-open .navbar .logo {
    transition: none !important;
    transform: none !important;
  }
}




/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero-section {
  background: url("/images/hero.jpg") no-repeat center;
  background-size: cover;
  background-position: center;
  min-height: 70vh;
  display: flex;
  align-items: center;
  color: white;
  padding: 80px 0px;
}

.hero-content {
  background: rgba(255, 255, 255, 0.70);
  padding: 40px;
  color: #333;
  width: 55%;
  float: right;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn-primary-custom {
  background-color: #729b3b;
  border: none;
  border-radius: 30px;
  padding: 20px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

  .btn-primary-custom:hover {
    background-color: #10114e;
    color: #fff;
  }

.fas.fa-chevron-right {
  font-size: 18px;
  padding-left: 8px;
}


/* ==========================================================================
   CAROUSEL
   ========================================================================== */

/* Carousel Container */
.multi-carousel {
  position: relative;
  padding: 1rem 0;
}

/* Track */
.multi-carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

  .multi-carousel-track::-webkit-scrollbar {
    display: none;
  }

/* Items */
.multi-carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Controls */
.multi-carousel-control {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 0%;
  background: #ffffff;
  color: #fff;
  border: none;
  z-index: 2;
}

.has-overlay .multi-carousel-control {
  width: 35px;
  height: 35px;
}

.multi-carousel-prev {
  left: 0rem;
}

.multi-carousel-next {
  right: 0rem;
}

.fas.fa-arrow-left,
.fas.fa-arrow-right {
  color: #000;
  font-size: 26px !important;
}

.has-overlay .fas.fa-arrow-left,
.has-overlay .fas.fa-arrow-right {
  font-size: 20px !important;
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  border-radius: 0px;
  border: none !important;
}

  .card img {
    width: 100%;
    height: auto;
    display: block;
  }

.card-body {
  border: 1px solid #DDDDDD;
  text-align: center;
  padding: 20px 20px 30px 20px;
}

.with-overlay .card-body {
  padding: 10px;
}

.small {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 0px;
}

.card-body .btn-carousel, .btn-green {
  background-color: #729b3b;
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin-top: 10px;
}

  .card-body .btn-carousel:hover, .btn-green:hover {
    background-color: #10114e;
    color: #fff;
  }

.card-body .btn-carousel-add-view {
  background-color: #eff4f7;
  border: 1px solid #eff4f7;
  border-radius: 3px;
  padding: 4px 10px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin: 10px 3px 0px;
}

  .card-body .btn-carousel-add-view:hover {
    border: 1px solid #fff;
    background-color: #10114e;
    color: #fff;
  }

/* Product Cards */
.product-card {
  border: 1px solid #DDDDDD;
  border-radius: 0px;
  padding: 0px;
  text-align: center;
  transition: transform 0.3s;
  background: white;
  margin-bottom: 20px;
}

  .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0px;
    margin-bottom: 15px;
    border-bottom: 1px solid #DDDDDD;
  }

  .product-card h5 {
    font-size: 1rem;
    margin-bottom: 10px;
  }

.price {
  color: var(--primary-green);
  font-weight: bold;
  margin-bottom: 10px;
}

/* Favourite (love) heart on product cards. Hosts (.product-card / slider .card)
   are position:relative so the heart pins to the image's top-right corner.
   favourites.js fills the heart (far -> fas) and adds .active when favourited. */
.product-card,
.multi-carousel-item .card {
  position: relative;
}

.favourite-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #6c757d;
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, transform 0.15s;
}

  .favourite-btn:hover {
    color: #d6336c;
    transform: scale(1.1);
  }

  .favourite-btn.active {
    color: #d6336c;
  }

  /* Brief pop when toggled on. */
  .favourite-btn.just-added {
    animation: favourite-pop 0.35s ease;
  }

@keyframes favourite-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Product page: anchor the favourite heart in the image corner and make it a
   little larger, so loving a pattern is as easy to find here as on the cards. */
.product-image-container {
  position: relative;
}

.favourite-btn-product {
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  font-size: 22px;
  box-shadow: 0 2px 8px rgba(16, 17, 78, 0.18);
}


/* ==========================================================================
   CAROUSEL OVERYLAY
   ========================================================================== */

/* Base card setup */
.multi-carousel-item.with-overlay .card {
  position: relative;
  overflow: hidden;
}

/* Overlay hidden by default */
.multi-carousel-item.with-overlay .card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* Show overlay on hover */
.multi-carousel-item.with-overlay .card:hover .card-overlay {
  opacity: 1;
}


/* ==========================================================================
   SECTIONS
   ========================================================================== */

/* Generic Section */
.generic-section {
  background-color: #fff;
  padding: 60px 0;
  text-align: center;
}

.product-intro-section {
  padding: 30px 0;
  text-align: center;
}

.breadcrumbs {
  text-align: center;
}

  .breadcrumbs a {
    text-decoration: none;
    color: #000;
  }

    .breadcrumbs a + a:before {
      content: " > ";
      margin: 0 4px;
      color: #999; /* optional */
      text-decoration: none;
    }

/* Breadcrumb + catalog number on a single compact row (product page header).
   The spacer and the catalog number both flex equally, so the breadcrumb stays
   centred under the title while the catalog number aligns to the right. */
.product-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.product-meta-spacer {
  flex: 1 1 0;
}

.product-meta-row .breadcrumbs {
  flex: 0 1 auto;
}

.product-catalog-no {
  flex: 1 1 0;
  text-align: right;
  color: #666;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* On narrow screens, stack and centre rather than squeeze a 3-part row. */
@media (max-width: 575.98px) {
  .product-meta-row {
    flex-direction: column;
    gap: 4px;
  }

  .product-meta-spacer {
    display: none;
  }

  .product-catalog-no {
    flex: none;
    text-align: center;
  }
}

.product-main {
  padding: 0 0 60px;
}

.product-options-section {
  padding: 30px 0;
}

.info-section {
  padding: 60px 0 40px;
}

.bg-light-blue {
  background: #eff4f7;
}

/* Feature Section */
.feature-section {
  background-color: #729b3b;
  color: #fff;
  padding: 40px 0;
}

.feature-box {
  text-align: center;
  padding: 20px 15px;
}

  .feature-box p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }

  .feature-box img {
    width: 25%;
    margin: auto;
    text-align: center;
    margin-bottom: 20px;
  }

/* Icon Bar */
.icon-bar {
  background-color: var(--dark-blue);
  color: white;
  padding: 15px 0;
}

  .icon-bar a {
    color: white;
    text-decoration: none;
    text-align: center;
    font-size: 0.9rem;
  }

  .icon-bar i {
    font-size: 1.5rem;
    margin-bottom: 5px;
  }


/* ==========================================================================
   OPTIONS SECTION
   ========================================================================== */

.option-btn {
  border: 1px solid #729b3b;
  background: #fff;
  color: #729b3b;
  padding: 2px 8px 2px 8px;
  margin: 0 5px 0 0;
  border-radius: 3px;
  transition: all 0.3s;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.with-overlay .option-btn {
  padding: 2px 6px 2px 6px;
  font-size: 14px;
  line-height: 18px;
}

.option-btn.selected,
.option-btn:hover {
  background: #729b3b;
  color: #fff;
}

.option-btn.inactive {
  background: #AAA;
  color: #fff;
  border: 1px solid #000;
}

.btn-add-basket {
  background-color: #10114e;
  color: #fff;
  padding: 2px 8px 2px 8px;
  border: 1px solid #10114e;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

  .btn-add-basket:hover {
    border: 1px solid #10114e;
    background-color: #fff;
    color: #10114e;
  }


/* ==========================================================================
   GENERAL STYLES
   ========================================================================== */

.chevron-list {
  list-style: none;
  padding-left: 0;
  margin: 0px 0px 30px 0px;
}

  .chevron-list li {
    position: relative;
    padding-left: 1.2em;
  }

    .chevron-list li::before {
      content: "›";
      position: absolute;
      left: 0;
      color: #000;
      font-weight: 500;
      font-size: 30px;
      line-height: 20px;
    }

.graph-container img {
  width: 100%;
  height: auto;
}

.comment-box {
  background-color: #F5F5F5;
  padding: 20px 20px 20px 20px;
  margin-bottom: 20px;
}

  .comment-box p {
    font-style: italic;
  }

    .comment-box p.small {
      font-style: normal;
    }

.product-image-container img {
  width: 100%;
  height: auto;
}

/* Signal the product image is clickable to zoom. */
.product-image-zoom {
  display: block;
  cursor: zoom-in;
}

.product-image-thumb-container img {
  max-width: 125px;
  height: auto;
}

.view-all {
  float: right;
  position: relative;
  top: 15px;
}

  .view-all a {
    color: #10114e;
    text-decoration: underline;
  }

    .view-all a:hover {
      color: #729b3b;
      text-decoration: underline;
    }


/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.newsletter {
  background-color: #f8f9fa;
  padding: 60px 0;
  text-align: center;
}

  .newsletter p {
    width: 50%;
    margin: auto;
  }

  .newsletter input {
    border-radius: 0px;
  }

  .newsletter button {
    background-color: #023763 !important;
    border: 1px solid #023763 !important;
    border-radius: 0px !important;
    color: #fff !important;
    font-size: 18px !important;
    padding: 9.5px 20px !important;
    font-weight: 600 !important;
  }

  .newsletter input[type="text"] {
    border: 1px solid #666;
    border-radius: 0px;
    padding: 0.5rem 1rem;
    transition: all 0.3s;
    width: 100%;
  }


/* ==========================================================================
   FORMS
   ========================================================================== */

input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 16px;
  transition: all 0.3s;
  width: 100%;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
  background-color: #000000;
  color: #ffffff;
  padding: 40px 0;
}

  footer p {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
  }

  footer a {
    color: #ffffff;
    text-decoration: none;
  }

    footer a:hover {
      color: #008E9D;
      text-decoration: none;
    }

  footer img {
    height: 80px;
    width: auto;
  }

  footer ul li {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
  }

.footer-one p {
  width: 75%;
}

.footer-two,
.footer-three,
.footer-four {
  width: 22.22% !important;
  margin-top: 90px;
}


/* ==========================================================================
   PRODUCT GRID
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0px 20px;
  margin-bottom: 40px;
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  background: white;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

  .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

.product-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-bottom: 1px solid #ddd;
}

.product-info {
  padding: 0px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.product-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0px; /* 15px original, altered for price */
  color: #333;
}

.product-pricefrom {
  font-style: italic;
  font-size: 12px;
  line-height: 15px;
  margin-bottom: 5px;
}

.product-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 15px;
}

.product-detail-group {
  flex: 0 0 50%;
  text-align: center;
  width: 50%;
}

.product-detail-label {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 3px;
}

.product-detail-value {
  font-size: 16px;
  color: #000;
}

.product-buttons {
  display: flex;
  margin-top: auto;
  gap: 10px;
  justify-content: center;
}

.btn-blue {
  background-color: #10114e;
  color: white;
  border: 1px solid #10114e;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}

  .btn-blue:hover {
    background-color: white;
    color: #10114e;
  }

.btn-view {
  background-color: #10114e;
  color: white;
  border: 1px solid #10114e;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}

  .btn-view:hover {
    background-color: white;
    color: #10114e;
  }


/* ==========================================================================
   MODAL WINDOW
   ========================================================================== */

.modal-link {
  display: inline-block;
  color: #000;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
  cursor: pointer;
}

  .modal-link:hover {
    color: #729b3b;
  }

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

  .modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
  }

.modal {
  background: white;
  border-radius: 16px;
  padding: 40px;
  width: 80%;
  height: 60%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease;
  position: relative;
  display: block;
}

.modal-header {
  margin-bottom: 20px;
  padding: 0px;
}

  .modal-header h2 {
    color: #333;
    font-size: 28px;
    margin-bottom: 10px;
  }

.modal-content {
  color: #000;
  line-height: 1.6;
  margin-bottom: 20px;
  border: none;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

  .close-button:hover {
    background: #f0f0f0;
    color: #333;
  }

.modal-button {
  background-color: #729b3b;
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin-top: 10px;
}

  .modal-button:hover {
    background: #2e2e5d;
    transform: translateY(-1px);
  }

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* ==========================================================================
   FIXED NAVIGATION
   ========================================================================== */

/* Fixed Bottom Bar */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #1a1a4d;
  display: flex;
  justify-content: space-around;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  /* Keep the bar clear of the iOS home indicator / notch gesture area.
     Requires viewport-fit=cover on the viewport meta tag (see _Layout). */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Paint the bar colour below the bar as well. While the mobile browser chrome
   (URL/tool bar) animates in on scroll-up, the fixed bar can momentarily sit a
   few pixels above the physical screen edge; without this the page's white
   background shows through as a strip "covering" the bottom of the menu.
   Absolutely positioned below the bar, so it never affects layout and is
   invisible whenever the bar is flush with the screen edge. */
.bottom-bar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 60px;
  background-color: inherit;
  pointer-events: none;
}

.bottom-bar-item {
  flex: 1;
  /* Allow items to shrink below their label width so the row can never
     overflow and clip the last item (the basket) on narrow screens. */
  min-width: 0;
  text-align: center;
  padding: 15px 10px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

  .bottom-bar-item:last-child {
    border-right: none;
  }

  .bottom-bar-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .bottom-bar-item i {
    font-size: 24px;
    margin-bottom: 5px;
  }

  .bottom-bar-item span {
    font-size: 14px;
    font-weight: 500;
  }

  /* Truncate only the text label - NOT the .basket-icon wrapper, whose
     absolutely-positioned count badge must be free to overflow it. */
  .bottom-bar-item > span:not(.basket-icon) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

/* Bottom-bar overflow: the bar shows every item inline and hides the "More"
   trigger until JS (fitBottomBar in scripts.js) detects the row no longer fits,
   at which point it adds .is-collapsed to fold the overflow items into the More
   sheet. Driven by actual fit, not a fixed breakpoint, so it adapts to the
   item count (Filter is only present on listing pages). */
#btnMore {
  display: none;
}

.bottom-bar.is-collapsed .bottom-bar-overflow {
  display: none;
}

.bottom-bar.is-collapsed #btnMore {
  display: flex;
}

/* Transient state applied by fitBottomBar() only while measuring: items size to
   their natural content and labels are unclipped, so an oversized row overflows
   the bar and can be detected. Removed in the same frame - never painted. */
.bottom-bar.is-measuring .bottom-bar-item {
  flex: 0 0 auto;
}

.bottom-bar.is-measuring .bottom-bar-item > span:not(.basket-icon) {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

/* More sheet: a simple vertical list of large tap targets. */
.more-menu {
  display: flex;
  flex-direction: column;
}

.more-menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 4px;
  background: none;
  border: none;
  border-bottom: 1px solid #eee;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

  .more-menu-item:last-child {
    border-bottom: none;
  }

  .more-menu-item i {
    width: 24px;
    font-size: 20px;
    text-align: center;
    color: #1a1a4d;
  }

/* Sliding Panel */
.slide-panel {
  position: fixed;
  bottom: var(--bottom-bar-h);
  left: 0;
  right: 0;
  background-color: white;
  z-index: 5000; /* Site the panel above the header for safety */
  /* Hide by sliding the panel down past its own full height plus the bottom-bar
     offset it is anchored above. Using a transform (relative to the element's
     own size) rather than bottom: -100% (relative to the viewport) avoids the
     mobile glitch where the dynamic viewport shifts as the URL bar shows/hides
     and leaves the closed panel peeking over the bottom menu until a scroll
     forces a repaint. */
  transform: translateY(calc(100% + var(--bottom-bar-h)));
  transition: transform 0.4s ease-in-out;
  height: auto;
  max-height: calc(100dvh - var(--bottom-bar-h));
  overflow-y: auto;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
  /* No safe-area padding here: the open panel sits above the bottom bar, and
     the bar (whose --bottom-bar-h is synced from its real height, safe-area
     padding included) already keeps it out of the unsafe zone. */
}

  .slide-panel.active {
    transform: translateY(0);
  }

.slide-panel-content {
  padding: 30px 30px;
  position: relative;
  /* helps position the close button cleanly */
  display: flex;
  flex-direction: column;
}

.close-panel {
  position: sticky;
  top: 12px;
  align-self: flex-end;
  z-index: 10;
  /* give it a small “chip” background so it’s always readable */
  background: rgba(255,255,255,0.92);
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  border-radius: 999px;
}

  .close-panel:hover {
    color: #729b3b;
  }

/* Desktop only */
@media (min-width: 992px) {


  /* Keep the panel between the header and the bottom bar: cap its height so the
     top (and the sticky close X) never sits under the site header. */
  .slide-panel {
    max-height: calc(100dvh - var(--bottom-bar-h) - var(--site-header-h));
  }

  .slide-panel-content {
    padding-top: 0; /* we'll let the sticky header handle spacing */
  }

    /* Sticky header = first heading inside panel content */
    .slide-panel-content > h1:first-child,
    .slide-panel-content > h2:first-child,
    .slide-panel-content > h3:first-child {
      position: sticky;
      top: 0;
      z-index: 20;
      background: white;
      padding: 18px 70px 14px 30px; /* extra right padding for the X */
      margin: 0;
      border-bottom: 1px solid #eee;
    }

  /* Put the X into the sticky zone too */
  .close-panel {
    position: sticky;
    top: 12px;
    z-index: 30;
    float: right;
    margin: 10px 18px 0 0;
    background: rgba(255,255,255,0.92);
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    border-radius: 999px;
  }
}




/* ==========================================================================
   AI ASSISTANT CHAT
   ========================================================================== */

.ai-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px 2px;
}

.ai-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.45;
}

  .ai-msg p { margin: 0 0 8px 0; }
  .ai-msg p:last-child { margin-bottom: 0; }
  .ai-msg ul { margin: 0 0 8px 18px; padding: 0; }
  .ai-msg a { color: #1a1a4d; font-weight: 600; }

.ai-msg-user {
  align-self: flex-end;
  background: #1a1a4d;
  color: white;
  border-bottom-right-radius: 4px;
}

.ai-msg-assistant {
  align-self: flex-start;
  background: #f0f2f5;
  color: #1c1e21;
  border-bottom-left-radius: 4px;
}

/* Typing indicator: three pulsing dots. */
.ai-typing {
  display: flex;
  gap: 4px;
  padding: 14px;
}

  .ai-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9aa0a6;
    animation: ai-typing-pulse 1.2s infinite ease-in-out;
  }

  .ai-typing span:nth-child(2) { animation-delay: 0.2s; }
  .ai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ai-typing-pulse {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.ai-toolbar {
  display: flex;
  gap: 8px;
}

/* History list: one button per previous conversation. */
.ai-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ai-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  transition: background-color 0.2s, border-color 0.2s;
}

  .ai-history-item:hover {
    background: #f0f4ea;
    border-color: #d7e3c6;
  }

.ai-history-snippet {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1c1e21;
}

.ai-history-date {
  flex: 0 0 auto;
  color: #6c757d;
  font-size: 0.8rem;
}

.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-chip {
  border: 1px solid #1a1a4d;
  background: white;
  color: #1a1a4d;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

  .ai-chip:hover {
    background: #1a1a4d;
    color: white;
  }

.ai-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

  .ai-input-row textarea {
    resize: none;
    overflow-y: auto;
  }

.ai-send {
  background: #1a1a4d;
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .ai-send:hover {
    background: #729b3b;
    color: white;
  }

.ai-disclaimer {
  color: #6c757d;
  font-size: 0.78rem;
  margin: 0;
}

/* Panel Content Styles */
.filter-section {
  margin-bottom: 10px;
}

  .filter-section h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #000;
  }

#basket-panel .filter-section h3 {
  font-size: 24px;
  margin-bottom: 0px;
  color: #000;
}

.filter-section h4 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #000;
}

/* Filter Buttons */
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  background-color: #fff;
  color: #000;
  border: 1px solid #ddd;
  padding: 6px 16px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 20px;
}

  .filter-btn:hover {
    background-color: #729b3b;
    border-color: #729b3b;
    color: #fff;
  }

  .filter-btn.active {
    background-color: #729b3b;
    color: #fff;
    border-color: #729b3b;
  }

/* Price Range Slider */

.price-range {
  margin: 0px 0 20px;
}

.price-inputs {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  align-items: center;
}

.price-input-group {
  flex: 1;
}

  .price-input-group label {
    display: block;
    margin-bottom: 5px;
    color: #000;
    font-size: 14px;
  }

  .price-input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }

.slider-container {
  margin: 20px 0;
}

.price-slider {
  width: 100%;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  position: relative;
}

  .price-slider input[type="range"] {
    width: 100%;
    margin: 0;
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    background: transparent;
  }

    .price-slider input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      pointer-events: all;
      width: 20px;
      height: 20px;
      background-color: #729b3b;
      border-radius: 50%;
      cursor: pointer;
    }

/* Shopping Basket */
.basket-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

  .basket-empty i {
    font-size: 64px;
    margin-bottom: 20px;
    color: #ddd;
  }

.basket-item {
  display: flex;
  gap: 20px;
  padding: 12px 0px;
  border-bottom: 1px solid #eee;
  align-items: center;
}

.basket-item-image img {
  width: 160px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.basket-item-details {
  flex: 1;
}

.basket-item-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

  .basket-item-name a {
    text-decoration: none;
    color: inherit;
  }

.basket-item-meta {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.basket-item-quantity {
  display: flex;
  align-items: center;
  gap: 5px;
}

.qty-btn {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

  .qty-btn:hover {
    background-color: #e0e0e0;
  }

  .qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none; /* prevents click */
  }

.qty-display {
  width: 40px;
  text-align: center;
  font-weight: 600;
}

.basket-item-price {
  font-size: 20px;
  font-weight: 700;
  color: #10114e;
  text-align: right;
}

.basket-item-remove {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 20px;
  padding: 10px;
  transition: color 0.3s;
}

  .basket-item-remove:hover {
    color: #e74c3c;
  }

.basket-summary {
  padding: 10px 20px;
  background-color: #f9f9f9;
  margin-top: 12px;
}

.basket-total, .totals {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.checkout-btn {
  width: 40%;
  padding: 10px;
  background-color: #729b3b;
  color: white;
  border: none;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.checkout-gate-title {
  text-align: center;
  font-size: 25px;
  margin-top: 10px;
}

.checkout-btn:hover {
  background-color: #5a7a2d;
}

.checkout-address-panel .address-preview-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.checkout-address-panel .address-preview-lines div {
  line-height: 1.35;
}

/* ==========================
   Checkout Address Book UI
   ========================== */

.address-book {
  margin-top: 10px;
}

/* Grid layout: as many cards per row as will fit */
.address-book-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Mobile: keep it simple */
@media (max-width: 639px) {
  .address-book-list {
    grid-template-columns: minmax(280px, 1fr);
  }
}

/* Tablet: 2-up (stops cards getting unnecessarily wide) */
@media (min-width: 640px) and (max-width: 991px) {
  .address-book-list {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}

/* Desktop: 3-up */
@media (min-width: 992px) {
  .address-book-list {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
  }
}


/* Desktop: 4-up */
@media (min-width: 1220px) {
  .address-book-list {
    grid-template-columns: repeat(4, minmax(280px, 1fr));
  }
}

/* Each address becomes a modern card */
.address-book-item {
  min-width: 0; /* Safety: prevent grid children forcing extra width */
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

  /* Hover affordance */
  .address-book-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: #d1d5db;
  }

  /* Make the label fill the card */
  .address-book-item > label {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: start;
    margin: 0;
    width: 100%;
    cursor: pointer;
  }

  /* Hide the native radio and use a modern dot */
  .address-book-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: grid;
    place-items: center;
    background: #fff;
  }

    .address-book-item input[type="radio"]::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transform: scale(0);
      transition: transform .12s ease;
      background: #10114e; /* your dark blue */
    }

    .address-book-item input[type="radio"]:checked {
      border-color: #10114e;
    }

      .address-book-item input[type="radio"]:checked::before {
        transform: scale(1);
      }

  /* Selected card styling.
   :has() is supported in modern Chrome/Edge/Safari.
   If you want a fallback, see the tiny JS snippet below. */
  .address-book-item:has(input[type="radio"]:checked) {
    border-color: rgba(16,17,78,0.45);
    box-shadow: 0 10px 25px rgba(16,17,78,0.12);
    background: linear-gradient(180deg, rgba(16,17,78,0.04), rgba(255,255,255,1));
  }

  /* Address text */
  .address-book-item strong {
    font-size: 16px;
    font-weight: 700;
  }

  .address-book-item .addr-lines {
    color: #111827;
    font-size: 14px;
    line-height: 1.35;
  }

    .address-book-item .addr-lines div {
      margin: 2px 0;
    }

  /* Actions: top-right inside the card */
  .address-book-item .addr-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
  }

    /* Small, tidy action buttons */
    .address-book-item .addr-actions .btn {
      padding: 6px 10px;
      font-size: 13px;
      border-radius: 10px;
    }

/* "Add new address" card */
.address-book-add {
  border: 2px dashed #cbd5e1;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  cursor: pointer;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 140px;
}

  .address-book-add:hover {
    border-color: #10114e;
    transform: translateY(-2px);
  }

  .address-book-add:focus {
    outline: 3px solid rgba(16, 17, 78, 0.25);
    outline-offset: 2px;
  }

.address-book-add-inner {
  padding: 10px;
}

.address-book-add-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  background: rgba(16, 17, 78, 0.08);
  color: #10114e;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.address-book-add-title {
  font-weight: 700;
  color: #10114e;
  margin-bottom: 4px;
}

.address-book-add-sub {
  font-size: 13px;
  color: #64748b;
}

/* Bottom button row */
.address-book-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.address-book-item.is-selected {
  border-color: rgba(16,17,78,0.45);
  box-shadow: 0 10px 25px rgba(16,17,78,0.12);
  background: linear-gradient(180deg, rgba(16,17,78,0.04), rgba(255,255,255,1));
}

.address-editor-wrap {
  display: none; /* shown only when editing/adding */
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  padding: 14px;
}

.checkout-address.is-editing .address-book-wrap {
  display: none; /* hide cards + buttons while editing */
}

.checkout-address.is-editing .address-editor-wrap {
  display: block;
}

.address-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f7;
  margin-bottom: 12px;
}

.address-editor-title {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}

.address-editor-subtitle {
  font-size: 13px;
  margin-top: 2px;
}

.address-editor-cancel {
  padding: 6px 10px;
  border-radius: 10px;
}

#addressForm .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px) {
  #addressForm .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Full-width rows */
#addressForm .span-2 {
  grid-column: span 2;
}

@media (max-width: 720px) {
  #addressForm .span-2 {
    grid-column: span 1;
  }
}

/* Inputs slightly nicer */
#addressForm label {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
}

#addressForm .form-control {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
}

  #addressForm .form-control:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(16,17,78,0.12);
    border-color: rgba(16,17,78,0.45);
  }

/* Action bar */
.address-editor-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
}

  .address-editor-actions .btn {
    border-radius: 12px;
    padding: 10px 14px;
  }

  .address-editor-actions small {
    margin-left: auto;
  }

/* Payment Checkout */
#basket-panel.checkout-locked .basket-item {
  opacity: .75;
}

  #basket-panel.checkout-locked .basket-item * {
    pointer-events: none;
  }

#basket-panel.checkout-locked .checkout-payment * {
  pointer-events: auto;
}

.checkout-payment-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px 16px 40px;
  box-sizing: border-box;
}

.checkout-payment {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.checkout-payment__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout-payment__summary {
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 12px;
  background: #fafafa;
}

.payment-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.payment-summary__addr {
  text-align: right;
  opacity: .9;
}

.payment-summary__total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}

.checkout-complete {
  padding: 16px;
}

.checkout-complete__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}


/* Search */
.search-box {
  position: relative;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 15px 50px 15px 20px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: border-color 0.3s;
}

  .search-input:focus {
    outline: none;
    border-color: #729b3b;
  }

.search-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #10114e;
  font-size: 20px;
}

/* Submit button sits over the right of the search box and holds the icon. */
.search-submit {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

  .search-submit .search-icon {
    position: static;
    transform: none;
  }

.quick-search {
  margin-bottom: 20px;
}

  .quick-search h4 {
    margin-bottom: 5px;
    color: #000;
    font-size: 18px;
  }

.quick-search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-tag {
  display: inline-block;
  padding: 6px 16px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
}

  .search-tag:hover {
    background-color: #729b3b;
    color: white;
    border-color: #729b3b;
  }

/* Shown in the suggestions area when a type-ahead lookup returns nothing. */
.search-note {
  font-size: 14px;
  color: #777;
}

.search-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 5px;
}

.search-filter-dropdown {
  position: relative;
}

  .search-filter-dropdown select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
  }

/* Account Forms */
#account-container, #basketCheckoutBody {
  display: block;
}

  #account-container[data-account-panel],
  #basketCheckoutBody[data-account-panel] {
    display: grid;
    /* Desktop default: two columns with a divider */
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
    /* keep it nicely centred on wide screens */
    max-width: 1200px;
    margin: 0 auto;
  }

    /* divider column */
    #account-container[data-account-panel] .divider,
    #basketCheckoutBody[data-account-panel] .divider {
      width: 1px;
      height: auto;
      background-color: #ddd;
    }

/* Mobile: stack */
@media (max-width: 768px) {
  #account-container[data-account-panel],
  #basketCheckoutBody[data-account-panel] {
    grid-template-columns: 1fr;
    gap: 20px;
  }

    #account-container[data-account-panel] .divider,
    #basketCheckoutBody[data-account-panel] .divider {
      width: 100%;
      height: 1px;
    }
}

.account-column {
  padding: 20px 10px;
}

  .account-column h3 {
    margin-bottom: 20px;
    color: #000;
    padding-bottom: 15px;
    border-bottom: 2px solid #729b3b;
  }


/* Email-first auth panel */
.account-auth {
  padding: 20px 10px;
}

  .account-auth h3 {
    margin-bottom: 20px;
    color: #000;
    padding-bottom: 15px;
    border-bottom: 2px solid #729b3b;
  }

  .account-auth h4 {
    margin: 0 0 12px;
    color: #000;
  }

.auth-divider {
  margin: 18px 0;
  height: 1px;
  background: #ddd;
}

.auth-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

  .auth-row .submit-btn {
    width: auto;
    flex: 1 1 auto;
  }

.account-error {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f9e1ed;
  border: 1px solid #f00808;
  color: #f00808;
  font-size: 14px;
}

.account-warning {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff7e6;
  border: 1px solid #ffd59a;
  color: #7a4b00;
  font-size: 14px;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #729b3b;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
}

  .link-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: none;
  }


  /* Tab style 1 - Simple*/
.tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  gap: 4px;
}

.tab-btn {
  flex: 1;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space:nowrap;
}

  .tab-btn:hover {
    background: #f6f7f5;
    color: #111;
  }

  .tab-btn.active {
    color: #111;
    border-bottom: 2px solid #2d6a4f; /* your brand colour */
  }

  /* Tab Style 2 - Segmented-control */
/*
.tabs {
  display: flex;
  background: #f3f4f2;
  padding: 4px;
  border-radius: 10px;
  gap: 4px;
}

.tab-btn {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #555;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space:nowrap;
}

  .tab-btn:hover {
    color: #111;
  }

  .tab-btn.active {
    background: white;
    color: #111;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transform: scale(0.98);
  }
  */

.form-hint {
  margin: 10px 0 0;
  font-size: 14px;
  color: #666;
}


.form-group {
  margin-bottom: 14px;
}

  .form-group label {
    display: block;
    margin-bottom: 4px;
    color: #000;
    font-weight: 500;
  }

  .form-group input {
    width: 100%;
    padding: 6px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }

    .form-group input:focus {
      outline: none;
      border-color: #729b3b;
    }

.js-acc-newsletter { width:auto !important; }

.submit-btn {
  width: 100%;
  padding: 15px;
  background-color: #729b3b;
  color: white;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

  .submit-btn:hover {
    background-color: #5a7a2d;
  }

.form-link {
  text-align: center;
  margin-top: 15px;
  color: #666;
  font-size: 14px;
}

  .form-link a {
    color: #729b3b;
    text-decoration: none;
  }

    .form-link a:hover {
      text-decoration: underline;
    }

.divider {
  width: 1px;
  background-color: #ddd;
}

/* Filter Actions */
.filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #eee;
}

.apply-filters-btn {
  flex: 1;
  padding: 10px;
  background-color: #729b3b;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

  .apply-filters-btn:hover {
    background-color: #5a7a2d;
  }

.clear-filters-btn {
  padding: 10px 30px;
  background-color: white;
  color: #666;
  border: 2px solid #ddd;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

  .clear-filters-btn:hover {
    background-color: #f0f0f0;
    border-color: #999;
  }

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

  .overlay.active {
    opacity: 1;
    visibility: visible;
  }


/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Tablet: 2 items per view */
@media (min-width: 576px) {
  .multi-carousel-item {
    flex-basis: 50%;
  }
}

/* Desktop: 4 items per view */
@media (min-width: 992px) {
  .multi-carousel-item {
    flex-basis: calc((100% - 3rem) / 4);
  }

    .multi-carousel-item.with-overlay {
      flex-basis: calc((100% - 5rem) / 6);
    }

  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
  }

  .navbar .container {
    border-bottom: 1px solid #dddddd;
  }
}

/* Mobile menu styling */
@media (max-width: 991.98px) {
  .navbar .container {
    flex-wrap: wrap;
  }

  .navbar-right-section {
    width: 100%;
    order: 3;
    align-items: flex-start;
  }

  .delivery-country {
    width: 100%;
    text-align: center;
    border-top: 1px solid #DDDDDD;
    padding: 5px 0px 0px;
    margin-bottom: 0px;
    font-size: 16px;
  }

  .navbar-collapse {
    width: 100%;
    padding: 0;
    margin-top: 5px;
    border-top: 1px solid #ddd;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .navbar-nav {
    width: 100%;
  }

  .nav-link {
    padding: 10px 20px 0px !important;
  }
}

@media only screen and (max-width: 1240px) {
  .multi-carousel-item.with-overlay {
    flex-basis: calc((100% - 3rem) / 4);
  }
}

@media only screen and (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 1100px) {
  .product-options-section .col-md-3 {
    width: 50%;
  }

  .options-box {
    padding-bottom: 20px;
  }

  .product-image-container img {
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 1080px) {
  .nav-link {
    padding: 5px 12px !important;
  }

  .navbar {
    background-color: #fff;
    padding: 0px;
  }

  .navbar-brand {
    padding: 10px 0px;
  }

  .navbar-toggler {
    border: none !important;
    padding: 4px;
    background: #10114e;
    border-radius: 0px;
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  .navbar-toggler:focus {
    box-shadow: none;
    outline: none;
  }

  .navbar-brand img {
    width: auto;
    height: 65px;
  }

  .navbar-right-section {
    padding-right: 25px;
  }
}

@media only screen and (max-width: 1070px) {
  .navbar-right-section {
    padding-right: 0px;
  }
}

@media only screen and (max-width: 1010px) {
  .navbar .container,
  .home .navbar .container {
    padding: 6px 0px;
  }

  .navbar-brand {
    padding: 10px 0px 10px 25px;
  }

  .navbar-toggler {
    margin-right: 25px;
  }

  .flags {
    height: 30px;
  }
}

@media only screen and (max-width: 960px) {
  .multi-carousel-item {
    flex-basis: 49.5% !important;
  }
}

@media only screen and (max-width: 890px) {
  .hero-content {
    padding: 20px;
    width: 100%;
  }

  .newsletter p {
    width: 80%;
  }

  .footer-one {
    width: 40% !important;
  }

  .footer-two,
  .footer-three,
  .footer-four {
    width: 20% !important;
  }
}

@media (max-width: 768px) {
  .bottom-bar-item span {
    font-size: 12px;
  }

  .bottom-bar-item i {
    font-size: 20px;
  }

  .slide-panel {
    /* Use dvh (visible area, not the larger vh) and subtract the bottom-bar
       offset the panel is anchored above, plus a small gap, so the panel never
       runs taller than the screen. This keeps the top of the panel (and the
       sticky close X) on screen and lets the body scroll inside the panel. */
    max-height: calc(100dvh - var(--bottom-bar-h) - 16px);
  }

  .slide-panel-content {
    padding: 30px 20px;
  }

  .filter-section h3 {
    font-size: 20px;
  }

  .filter-btn {
    font-size: 14px;
    padding: 8px 16px;
  }


  .divider {
    width: 100%;
    height: 1px;
  }

  .basket-item {
    flex-wrap: wrap;
    gap: 10px 20px;
  }

  .basket-item-price {
    width: 100%;
    text-align: left;
    margin-top: 0px;
  }

  .basket-item-remove {
    padding: 0px;
  }

  .price-inputs {
    flex-direction: column;
    gap: 10px;
  }

  .price-input-group {
    width: 100%;
  }

    .price-input-group input {
      width: 100%;
      box-sizing: border-box;
    }

  .filter-section {
    margin-bottom: 20px;
  }

    .filter-section h4 {
      margin-bottom: 10px;
    }

  .filter-btn,
  .search-tag {
    border-radius: 6px;
  }

  .search-filter-dropdown select {
    color: #000;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .product-image {
    height: 200px;
  }
}

/* Very narrow phones (under 400px): the labelled items don't all fit, so the
   overflow items (notably AI) fold into the "More" sheet. Experiment: drop the
   text labels and show icons only. Each item then needs only its icon width, so
   the whole row fits and fitBottomBar() leaves everything inline - including AI.
   The basket .basket-icon wrapper is kept (its count badge lives inside it); only
   the plain text labels are hidden, matching the truncation rule above. */
@media (max-width: 400px) {
  .bottom-bar-item > span:not(.basket-icon) {
    display: none;
  }

  /* No label beneath the icon, so drop the gap that separated them. */
  .bottom-bar-item i {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 760px) {
  .feature-box img {
    width: 100px;
    margin-bottom: 15px;
  }

  .feature-box {
    text-align: center;
    padding: 4px 15px;
  }

  .footer-one p {
    width: 90%;
  }

  footer img {
    height: 60px;
    width: auto;
  }

  .multi-carousel-item {
    flex-basis: 100% !important;
  }

  .footer-one {
    width: 100% !important;
  }

  .footer-two,
  .footer-three,
  .footer-four {
    width: 33.33% !important;
    margin-top: 20px;
  }

  .modal {
    padding: 20px;
    width: 90%;
    height: auto;
  }
}

@media (max-width: 660px) {
  .product-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
  }
}

@media only screen and (max-width: 576px) {
  .footer-two,
  .footer-three,
  .footer-four {
    width: 100% !important;
    margin-top: 0px;
    text-align: center;
  }

  footer ul {
    margin: 0px;
  }

  .footer-one {
    text-align: center;
  }

    .footer-one p {
      width: 100%;
      text-align: center;
    }

  .product-options-section .col-md-3 {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}



/* Shimmer engine */
.sk {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: 10px;
}

  .sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100% );
    animation: sk-shimmer 1.15s infinite;
  }

@keyframes sk-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Top thumb */
.sk-thumb {
  width: 100%;
  max-width: 220px; /* matches your thumb-ish sizing */
  aspect-ratio: 1 / 1; /* square */
  border-radius: 12px;
}

/* Lines */
.sk-line {
  height: 14px;
  border-radius: 8px;
  margin: 10px 0;
}

.sk-name {
  height: 16px;
  width: 90%;
}

.sk-name2 {
  height: 14px;
  width: 70%;
}

.sk-h3 {
  height: 18px;
  width: 85%;
  margin: 18px 0 10px;
}

.sk-title {
  height: 14px;
  width: 60%;
  margin: 12px auto 14px;
}

.sk-total {
  height: 14px;
  width: 85%;
  margin: 12px auto 14px;
}

.sk-help {
  height: 14px;
  width: 90%;
  margin: 18px auto 14px;
}

/* Button rows */
.sk-btnrow {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.sk-btnrow--wrap {
  flex-wrap: wrap;
}

.sk-chip {
  width: 56px;
  height: 34px;
  border-radius: 999px;
}

/* CTA buttons */
.sk-cta {
  width: 85%;
  height: 40px;
  border-radius: 10px;
  margin: 12px auto 6px;
}

.sk-cta--secondary {
  width: 70%;
}


.basket-icon {
  position: relative;
  display: inline-block;
}

.basket-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 50%;
  background: #dc3545; /* Bootstrap danger red */
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff; /* nice separation */
}

  .basket-badge:empty {
    display: none;
  }

@keyframes pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.basket-badge.pop {
  animation: pop 0.25s ease;
}

/* We may wish to change this to .js-currency-options or it's own .currency class */
.flags {
  cursor: pointer;
}

/* Product card image + name link through to the product, keeping the card's own
   colour and no underline - just a pointer cursor to signal it is clickable. */
.product-link,
.product-link:hover,
.product-link:focus {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.product-link img {
  cursor: pointer;
}

/* ==========================================================================
   LIBRARY PATTERNS (out-of-stock flies) + "Request this fly" panel
   ========================================================================== */

/* Separator banner between the in-stock grid and the library-patterns grid. */
.library-section {
  border-top: 2px solid #e3e9ef;
  margin-top: 12px;
}

.library-section-title {
  margin-bottom: 4px;
}

.library-section-intro {
  margin-bottom: 0;
  color: #5a6b7b;
}

/* Library note on the product page (in place of the buy options). */
.library-note {
  color: #5a6b7b;
}

/* Request panel form. Reuses .option-btn for the selectable chips. */
.fly-request-title {
  margin-bottom: 16px;
}

.fly-request-section {
  margin-bottom: 16px;
}

.fly-request-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.fly-request-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.fly-request-custom,
.fly-request-email,
.fly-request-comment {
  width: 100%;
}

.fly-request-actions {
  margin-top: 8px;
}

.fly-request-message {
  margin-top: 12px;
  font-weight: 600;
  color: #2e7d32;
}

.fly-request-message.is-error {
  color: #c0392b;
}

.fly-request-recaptcha-notice {
  margin-top: 12px;
  color: #8a97a4;
}

/* After a successful submit the form is locked (no resubmit): grey it out and
   make it non-interactive. The status message stays fully visible. */
.fly-request.is-submitted .fly-request-section {
  opacity: 0.55;
  pointer-events: none;
}

/* ============================================================
   Account panel (logged-in "My Account" area)
   ============================================================ */

.account-success {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eaf5e0;
  border: 1px solid #729b3b;
  color: #3f5a1e;
  font-size: 14px;
}

.account-home-email {
  color: #666;
  font-size: 14px;
  margin: -6px 0 18px;
}

/* Home menu */
.account-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 20px;
}

.account-nav-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  text-align: left;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

  .account-nav-item:hover {
    background: #f0f4ea;
    border-color: #d7e3c6;
  }

  .account-nav-item > i:first-child {
    grid-row: 1 / span 2;
    font-size: 18px;
    color: #729b3b;
  }

.account-nav-label {
  font-weight: 700;
  color: #10114e;
}

.account-nav-sub {
  grid-column: 2;
  font-size: 13px;
  color: #777;
}

.account-nav-chevron {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: #bbb;
}

.account-home-logout {
  margin-top: 10px;
}

/* Sub-sections */
.account-back {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 14px;
  color: #729b3b;
  cursor: pointer;
  font-size: 14px;
}

  .account-back i {
    margin-right: 4px;
  }

.account-empty {
  text-align: center;
  color: #777;
  padding: 30px 10px;
}

  .account-empty i {
    font-size: 32px;
    color: #cdd5c0;
    margin-bottom: 10px;
  }

/* Address book */
.account-address-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.account-address-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px 16px;
}

.account-address-lines {
  font-size: 14px;
  line-height: 1.5;
}

.account-address-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.account-address-editor {
  margin-top: 8px;
}

.account-address-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff7e6;
  color: #7a4b00;
  border: 1px solid #ffd59a;
  margin-bottom: 4px;
}

/* Order history list */
.account-order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-order-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

/* Favourites list in the account panel. */
.account-favourites-hint {
  color: #6c757d;
  font-size: 0.9rem;
}

.account-favourite-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-favourite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px 14px;
}

.account-favourite-thumb img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.account-favourite-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.account-favourite-name {
  font-weight: 600;
  color: #10114e;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-favourite-price {
  color: #6c757d;
  font-size: 0.85rem;
}

.account-favourite-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The heart inside a favourites row flows inline rather than pinning to a corner. */
.favourite-btn.favourite-btn-inline {
  position: static;
  background: transparent;
}

  .account-order-row:hover {
    background: #f0f4ea;
    border-color: #d7e3c6;
  }

.account-order-main {
  flex: 1;
}

.account-order-no {
  font-weight: 700;
  color: #10114e;
}

.account-order-meta {
  font-size: 13px;
  color: #777;
}

.account-order-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.account-order-total {
  font-weight: 700;
  color: #10114e;
}

.account-order-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eee;
  color: #555;
}

  .account-order-status--dispatched {
    background: #eaf5e0;
    color: #3f5a1e;
  }

  .account-order-status--part {
    background: #fff7e6;
    color: #7a4b00;
  }

  .account-order-status--pending {
    background: #eef0f6;
    color: #3a3f63;
  }

/* Order detail */
.account-order-delivery {
  margin: 12px 0 18px;
  padding: 14px 16px;
  background: #f9f9f9;
  border-radius: 10px;
}

.account-order-dispatch,
.account-order-tracking {
  font-size: 14px;
  margin: 8px 0 0;
}

.account-order-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}

.account-order-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}

.account-order-item-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.account-order-item-details {
  flex: 1;
}

.account-order-item-name a {
  color: #10114e;
  text-decoration: none;
  font-weight: 600;
}

  .account-order-item-name a:hover {
    text-decoration: underline;
  }

.account-order-item-meta {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
}

.account-order-item-price {
  font-weight: 700;
  color: #10114e;
  flex-shrink: 0;
}

.account-order-totals {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 12px 16px;
}

.account-order-total-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
}

  .account-order-total-row--grand {
    border-top: 1px solid #ddd;
    margin-top: 6px;
    padding-top: 10px;
    font-weight: 700;
    font-size: 16px;
    color: #10114e;
  }