/* Additions on top of the original stylesheets. */
[hidden] { display: none !important; }

/* "Processing" overlay shown briefly after Complete Checkout. */
.processing {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 22px;
}

/* Keyboard focus was invisible in the original design. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #e92001;
  outline-offset: 2px;
}

/* Per-product consent checkboxes the cart renders above the "I agree" box: keep them in the text flow. */
.trm_1 input[type="checkbox"] {
  position: static;
  display: inline-block;
  vertical-align: middle;
}

/* Ticks for the custom checkboxes. The originals pointed at images (tick.png) that never existed on the server,
   so a checked box looked identical to an empty one. Drawn with an inline SVG instead. */
.chkbx:checked,
.trm input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e92001' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  border-color: #e92001;
}

.offerBox input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a5f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}


/* ==========================================================================
   Header: the original bar had no background, so page content scrolled
   visibly through the nav (and through it again once it became fixed).
   ========================================================================== */
.top-sec { position: relative; z-index: 100; }
.top-bar {
  background: #fff;
  z-index: 100;
  border-bottom: 1px solid #ececec;
  transition: box-shadow 0.25s ease;
}
.top-bar.fixed-nav {
  width: 100%;
  box-shadow: 0 2px 14px rgba(5, 34, 80, 0.1);
}
/* No dangling divider after the last nav item. */
.menu-bar li:last-child:after { display: none; }
.menu-bar li a { transition: color 0.2s ease; }

/* Larger tap target for the burger; brand colour instead of the stray green when open. */
.mob-mnu-ic button { padding: 6px; margin: -6px; }
.dl-active .bar1, .dl-active .bar3 { background: #e92001; }
.mobimenu li a.active { color: #e92001; font-weight: 600; }
body.menu-open { overflow: hidden; }

/* ==========================================================================
   Buttons. The pill used a fixed % width, so long labels ("View All Products")
   overflowed it and the arrow had no stable place. Size to content instead.
   ========================================================================== */
.commn-btn,
.s2-ul li .common__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 208px;
  max-width: 100%;
  min-height: 52px;
  padding: 14px 32px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(233, 32, 1, 0.22);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.commn-btn .btn-arw,
.s2-ul li .common__button .btn-arw {
  margin: 0;
  flex: none;
}
.commn-btn:hover,
.s2-ul li .common__button:hover {
  background: #c41a00;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(233, 32, 1, 0.3);
}
.commn-btn:active,
.s2-ul li .common__button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(233, 32, 1, 0.25);
}

/* .pulse was referenced in the markup but never defined. */
@keyframes btn-pulse {
  0%   { box-shadow: 0 6px 16px rgba(233, 32, 1, 0.22), 0 0 0 0 rgba(233, 32, 1, 0.45); }
  70%  { box-shadow: 0 6px 16px rgba(233, 32, 1, 0.22), 0 0 0 14px rgba(233, 32, 1, 0); }
  100% { box-shadow: 0 6px 16px rgba(233, 32, 1, 0.22), 0 0 0 0 rgba(233, 32, 1, 0); }
}
.commn-btn.pulse { animation: btn-pulse 2.4s ease-out infinite; }
.commn-btn.pulse:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .commn-btn.pulse { animation: none; }
  .commn-btn, .s2-ul li .common__button { transition: none; }
}

/* "View All Products" sits centred under the grid. */
.section-2 .btn-bx { display: block; max-width: none; text-align: center; margin-top: 35px; }

/* Cart / checkout buttons: same fixed-% width problem as .commn-btn, and the empty-cart
   message and its button were jammed together. */
.continue-shpbtn, .proceed-chkbtn, .continue-brwbtn, #browse {
  display: inline-block;
  width: auto;
  min-width: 220px;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.continue-shpbtn:hover, .proceed-chkbtn:hover, .continue-brwbtn:hover, #browse:hover {
  background: #c41a00;
  transform: translateY(-2px);
}
.nt-slt { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.nt-slt .continue-brwbtn { margin: 0; }

/* ==========================================================================
   Product tiles: equal-height cards, image box of fixed height so names and
   prices line up, and the button anchored to the bottom of each card.
   ========================================================================== */
.s2-ul,
.shop-section-5 .s2-ul {
  gap: 24px;
  align-items: stretch;
  justify-content: center;
}
.s2-ul li,
.shop-section-5 .s2-ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  float: none;
  width: calc((100% - 48px) / 3);
  max-width: none;
  margin: 0;
  padding: 18px 16px 22px;
  border-radius: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s2-ul li:hover { transform: translateY(-3px); box-shadow: 0 8px 22px 2px rgba(0, 0, 0, 0.13); }
.s2-ul li .s2-tile {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: inherit;
}
.s2-ul li .s2-prd-1 {
  width: 100%;
  max-width: 200px;
  height: 200px;
  margin: 0 0 12px;
  object-fit: contain;
}
.s2-ul li .s2-p1 { min-height: 0; margin-bottom: 8px; text-align: center; }
.s2-ul li .s2-p3 { text-align: center; }
.s2-ul li .s2-p2 { margin: 6px 0 0; text-align: center; }
.s2-ul li .common__button { margin-top: 18px; }

/* ==========================================================================
   "Benefits" cards: the fixed section height and fixed icon offset made the
   description overlap the icon whenever the title fit on one line.
   ========================================================================== */
.sec3 { height: auto; padding: 30px 0 40px; }
.s3uls { gap: 16px; align-items: stretch; justify-content: center; }
.s3uls li {
  float: none;
  width: calc((100% - 48px) / 4);
  padding: 24px;
}
.s3uls li span {
  display: flex;
  align-items: center;
  min-height: 51px;
  margin: 0 0 14px;
  padding: 0 0 0 74px;
}
.s3-li-img { top: 24px; }

/* The "Blue Light Blocking Glasses" ribbon label is white-on-white (its ribbon
   background never existed) and, absolutely positioned, widened the page at tablet sizes. */
.s2-aft-txt { display: none; }

/* ==========================================================================
   Responsive fixes
   ========================================================================== */
@media only screen and (max-width: 1025px) {
  .s3uls li { width: calc((100% - 16px) / 2); }

  .s2-left .commn-hdg { margin-bottom: 20px; }

  /* Hero product was pushed 60px past the container and clipped. */
  .bnr-prod { right: 0; max-width: 290px; }
  .bnr-left { width: 58%; }

  /* Footer contact columns reserved 60px for an icon that is no longer there, pushing the e-mail off-screen. */
  .s7-ul li { padding-left: 0; }
  .s7-ul li .bnr-p1 { overflow-wrap: anywhere; }

  /* Footer links were two floats that could not fit side by side. */
  footer .f-p2 { float: none; width: 100%; padding: 3px 0; text-align: center; }
}

@media only screen and (max-width: 767px) {
  .btn-bx { text-align: center; }
  .commn-btn { min-width: 220px; font-size: 18px; line-height: 22px; padding: 14px 28px; }

  .s2-ul, .shop-section-5 .s2-ul { gap: 12px; }
  .s2-ul li, .shop-section-5 .s2-ul li {
    width: calc((100% - 12px) / 2);
    padding: 12px 10px 16px;
  }
  .s2-ul li .s2-prd-1 { height: 130px; }
  .s2-ul li .s2-p1 { font-size: 16px; line-height: 22px; padding: 4px; }
  .s2-ul li .s2-p3 { font-size: 15px; line-height: 20px; }
  .s2-ul li .s2-p2 { font-size: 22px; line-height: 28px; }
  .s2-ul li .common__button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 18px;
  }

  .s3uls { gap: 12px; }
  .s3uls li { width: 100%; }

  .bnr-prod { display: none; }
  .bnr-left { width: 100%; }
}

@media only screen and (max-width: 359px) {
  .s2-ul li, .shop-section-5 .s2-ul li { width: 100%; }
  .commn-btn { min-width: 0; width: 100%; }
}