/* Fresh theme by Gravity Host. Copyright (c) 2026 GK Tools Ltd. All rights reserved. Licensed for one live shop per licence, see LICENSE.txt; sharing or reselling is not allowed. Download ID: marketplace */
/* Fresh, the Gravity Host theme for OpenCart 3: laid over the standard theme, nothing in OpenCart is edited.
   Colours and fonts are set on :root by the theme settings (see the admin page). */
body { color: var(--gk-ink); }
a { color: var(--gk-deep); }
a:hover, a:focus { color: var(--gk-deeper); }
.btn-link { color: var(--gk-deep); }
.btn-link:hover, .btn-link:focus { color: var(--gk-deeper); }

/* Top bar */
#top { background-color: var(--gk-page); border-bottom: 1px solid var(--gk-line); }
#top #form-currency .currency-select, #top .btn-link, #top-links li, #top-links a { color: var(--gk-ink-soft); text-shadow: none; }
#top .btn-link:hover, #top-links a:hover { color: var(--gk-deep); }

/* Header: search and cart the same height, flat */
header { padding-bottom: 6px; border-bottom: 1px solid var(--gk-line); margin-bottom: 20px; }
#search .input-lg { height: 42px; border-color: var(--gk-line-strong); box-shadow: none; }
#search .btn-lg { height: 42px; background: var(--gk-page); border-color: var(--gk-line-strong); color: var(--gk-ink); text-shadow: none; }
#cart > .btn { height: 42px; background: var(--gk-ink); border: 1px solid var(--gk-ink); border-radius: 6px; color: #fff; font-weight: 600; text-shadow: none; box-shadow: none; }
#cart > .btn:hover, #cart.open > .btn, #cart.open > .btn:hover { background: var(--gk-deep); border-color: var(--gk-deeper); color: #fff; }

/* Buttons: flat, brand colour primary, readable secondary */
.btn-primary { color: #fff; background: var(--gk-deep); border: 1px solid var(--gk-deeper); border-radius: 6px; font-weight: 600; text-shadow: none; box-shadow: none; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { color: #fff; background: var(--gk-deeper); border-color: var(--gk-deeper); }
.btn-default { color: var(--gk-ink); background: var(--gk-page); border: 1px solid var(--gk-line-strong); text-shadow: none; box-shadow: none; }
.btn-default:hover, .btn-default:focus { color: var(--gk-ink); background: var(--gk-tint); border-color: var(--gk-tint-line); }
.btn-danger { color: #fff; background: #c81e27; border: 1px solid #a3161e; text-shadow: none; }
.btn-danger:hover, .btn-danger:focus { color: #fff; background: #a3161e; }
.form-control { border-color: var(--gk-line-strong); box-shadow: none; color: var(--gk-ink); }
.form-control:focus { border-color: var(--gk-deep); box-shadow: 0 0 0 3px rgba(0, 122, 47, 0.18); }

/* Keyboard focus that can be seen */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gk-deep) !important; outline-offset: 2px !important;
}

/* Product cards: same height in a row, price on one line, readable buttons */
#content .row:has(> .product-layout) { display: flex; flex-wrap: wrap; }
#content .row:has(> .product-layout):before, #content .row:has(> .product-layout):after { display: none; }
.product-layout { display: flex; }
.product-thumb { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--gk-line); border-radius: 8px; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.product-thumb:hover { border-color: var(--gk-tint-line); box-shadow: 0 4px 12px rgba(var(--gk-ink-rgb), 0.07); }
.product-thumb .caption { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Category pages wrap caption + buttons in an extra div */
.product-thumb > div:not(.image):not(.button-group) { display: flex; flex-direction: column; flex: 1 1 auto; }
.product-thumb h4 a { color: var(--gk-ink); font-weight: 600; }
.product-thumb h4 a:hover, .product-thumb h4 a:focus { color: var(--gk-deep); }
.product-thumb .caption p:not(.price) { color: var(--gk-mute); }
.product-thumb .price { margin-top: auto; font-size: 17px; font-weight: 700; color: var(--gk-ink); }
.product-thumb .price-tax, #product-product .list-unstyled li { color: var(--gk-mute); font-weight: 400; }
/* Checkout bonus-points line: the brand colour but dark enough to read */
#collapse-checkout-option b[style*="37b74a"] { color: var(--gk-deep) !important; }
/* Button row: Add to cart fills the width, wishlist + compare are equal squares */
.product-thumb .button-group { display: flex; flex-direction: row; flex: 0 0 auto; align-items: stretch; border-top: 1px solid var(--gk-line); background: var(--gk-page); }
.product-thumb .button-group:before, .product-thumb .button-group:after { display: none; }
.product-thumb .button-group button { float: none; height: 44px; line-height: 1.2; padding: 0 8px; color: var(--gk-ink); background: var(--gk-page); font-weight: 600; }
.product-thumb .button-group button:first-child { flex: 1 1 auto; width: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-thumb .button-group button + button { flex: 0 0 44px; width: 44px; padding: 0; }
.product-thumb .button-group button:hover { color: var(--gk-on-deep); background: var(--gk-deep); }
.product-thumb .button-group button + button { border-left: 1px solid var(--gk-line); }
/* "Add to cart" words were hidden below 1200px, leaving three bare icons */
.product-thumb .button-group button span.hidden-xs { display: inline !important; }

/* Category page: drop the logo thumbnail repeated under the heading */
#product-category #content > .row:first-of-type .col-sm-2 { display: none; }
#product-category #content > .row:first-of-type .col-sm-10 { width: 100%; }
.input-group .input-group-addon { background: var(--gk-page); border-color: var(--gk-line-strong); color: var(--gk-ink); }

/* Banner and checkout panels */
.swiper-viewport { border: 1px solid var(--gk-line); border-radius: 8px; box-shadow: none; overflow: hidden; }
.panel-group .panel { border-color: var(--gk-line); border-radius: 6px; box-shadow: none; }
.panel-default > .panel-heading { background: var(--gk-page); border-color: var(--gk-line); color: var(--gk-ink); }
.panel-title { font-weight: 600; }
#tab-description img { max-width: 100%; height: auto; }
#product-product #button-cart { height: 46px; font-size: 16px; }

@media (max-width: 767px) {
  /* Product page on a phone: photos, then name/price/Add to cart, then description
     (was: about five screens of description images before the Add to cart button) */
  #product-product #content > .row:first-of-type { display: flex; flex-direction: column; }
  #product-product #content > .row:first-of-type:before, #product-product #content > .row:first-of-type:after { display: none; }
  #product-product #content > .row:first-of-type > .col-sm-8, #product-product #content > .row:first-of-type > .col-sm-6:first-child { display: contents; }
  #product-product #content > .row:first-of-type .thumbnails { order: 1; padding: 0 15px; }
  #product-product #content > .row:first-of-type > .col-sm-4, #product-product #content > .row:first-of-type > .col-sm-6:last-child { order: 2; }
  #product-product #content > .row:first-of-type .nav-tabs { order: 3; margin: 16px 15px 18px; }
  #product-product #content > .row:first-of-type .tab-content { order: 4; padding: 0 15px; }

  /* Cart table: let product names wrap and drop the internal model code column,
     so quantity, price and total fit on screen */
  #checkout-cart .table-responsive > .table > thead > tr > td, #checkout-cart .table-responsive > .table > tbody > tr > td { white-space: normal; padding: 8px 4px; vertical-align: middle; }
  #checkout-cart .table-responsive > .table > thead > tr > td:nth-child(3), #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(3) { display: none; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:first-child img { max-width: 48px; }
  #checkout-cart .input-group.btn-block { min-width: 104px; }
  #checkout-cart .input-group.btn-block .form-control { padding: 4px 6px; text-align: center; }
  #checkout-cart .buttons .pull-left, #checkout-cart .buttons .pull-right { float: none !important; display: block; margin-bottom: 10px; }
  #checkout-cart .buttons .btn { width: 100%; padding: 11px 18px; }

  /* Checkout step 1: separate the two boxes, full-width buttons */
  #collapse-checkout-option .col-sm-6:first-child { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--gk-line); }
  #collapse-checkout-option .btn-primary { width: 100%; padding: 11px 18px; }
  #common-success .buttons .pull-right { float: none !important; display: block; }
  #common-success .buttons .btn { width: 100%; padding: 11px 18px; }

  /* Footer links big enough to tap */
  footer ul.list-unstyled li a { display: inline-block; padding: 5px 0; }
}

/* Speed filter support: images the filter sized keep their shape when scaled */
img.gk-sz { height: auto; }
img.gk-big { max-width: 100%; height: auto; }
/* Footer headings are h2 now (heading order), looking exactly like the old h5 */
footer h2.gk-fh { font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: bold; color: #fff; margin: 10px 0; line-height: 1.1; }

/* Pressed, focused and selected states in the brand colour. Bootstrap 3 and the stock theme
   still painted these blue: a pressed button flashed dark blue before turning green, and every
   clicked button got the browser's blue focus ring. Same selectors as Bootstrap's, loaded later. */
html { -webkit-tap-highlight-color: rgba(0, 122, 47, 0.12); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gk-deep); }
.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus { outline: none; }
.btn-primary:focus, .btn-primary.focus { color: #fff; background: var(--gk-deeper); border-color: var(--gk-deeper); }
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus,
.btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary:hover, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary.focus {
  color: #fff; background: var(--gk-deeper); border-color: var(--gk-deeper); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus,
.btn-primary.disabled.focus, .btn-primary[disabled].focus { color: #fff; background: var(--gk-deep); border-color: var(--gk-deeper); }
.btn-primary .badge { color: var(--gk-deep); background: #fff; }
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default,
.btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus,
.btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus {
  color: var(--gk-ink); background: var(--gk-tint-deep); border-color: var(--gk-tint-line); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-info { color: var(--gk-deeper); background: var(--gk-tint); border: 1px solid var(--gk-tint-line); text-shadow: none; }
.btn-info:hover, .btn-info:focus, .btn-info.focus { color: var(--gk-deeper); background: var(--gk-tint-deep); border-color: var(--gk-tint-line); }
.btn-info:active, .btn-info.active, .btn-info:active:hover, .btn-info:active:focus, .btn-info.active:hover, .btn-info.active:focus {
  color: var(--gk-deeper); background: var(--gk-tint-line); border-color: var(--gk-tint-line);
}
.btn-link:active, .btn-link.active { color: var(--gk-deeper); }
.text-primary { color: var(--gk-deep); }
a.text-primary:hover, a.text-primary:focus { color: var(--gk-deeper); }
.bg-primary, .label-primary, .progress-bar { background-color: var(--gk-deep); }
a.bg-primary:hover, a.bg-primary:focus, .label-primary[href]:hover, .label-primary[href]:focus { background-color: var(--gk-deeper); }
/* Menus: account, currency and cart drop-downs, category menu */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus,
#top #form-currency .currency-select:hover, #top #form-language .language-select:hover {
  color: var(--gk-on-deep); background-color: var(--gk-deep); background-image: none; text-shadow: none;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { border-color: var(--gk-deep); }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: var(--gk-deep); }
/* Page numbers, account menu list, product image frames, highlighted panels */
.pagination > li > a, .pagination > li > span { color: var(--gk-deep); }
.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus { color: var(--gk-deeper); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { color: #fff; background-color: var(--gk-deep); border-color: var(--gk-deep); }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { color: var(--gk-on-deep); background-color: var(--gk-deep); border-color: var(--gk-deep); }
.list-group-item.active > .badge, .nav-pills > .active > a > .badge { color: var(--gk-deep); }
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: var(--gk-deep); }
.panel-primary { border-color: var(--gk-deep); }
.panel-primary > .panel-heading { color: #fff; background-color: var(--gk-deep); border-color: var(--gk-deep); }
/* Pressed state for our own brand/grey buttons (card button bar, header cart, search) */
.product-thumb .button-group button:active { color: #fff; background: var(--gk-deeper); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); }
#cart > .btn:active, #cart.open > .btn:active { color: #fff; background: var(--gk-deeper); border-color: var(--gk-deeper); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); }
#search .btn-lg:active { background: var(--gk-tint-deep); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }

/* Modern layer: soft cards, rounded controls, clear type. */

/* Type */
body { font-family: var(--gk-text); font-size: 16px; line-height: 1.6; color: var(--gk-ink); background: var(--gk-page); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { font-family: var(--gk-text); color: var(--gk-ink); }
/* Headings a touch tighter, as on Best Immune live (D1680). */
#content > h1, #content > h2, #content h1, #content > h3, #content > h2.gk-sec, #content > .row h1, #content > .row h2 { font-family: var(--gk-display); font-weight: var(--gk-head-weight, 700); letter-spacing: -.01em; line-height: 1.12; }
#content > h1, #content h1 { font-size: clamp(28px, 1.2rem + 1.8vw, 40px); margin: 6px 0 18px; }
#content > h2 { font-size: clamp(24px, 1.1rem + 1.2vw, 32px); }
#content > h3, #content > h2.gk-sec { font-size: clamp(24px, 1.1rem + 1.2vw, 30px); margin: 34px 0 16px; }
.btn, input, select, textarea, button { font-family: var(--gk-text); }
legend { font-family: var(--gk-display); font-weight: 600; color: var(--gk-ink); border-bottom-color: var(--gk-line); }
#content p, #content li { color: var(--gk-ink-soft); }
.text-danger { color: var(--gk-red-text); }


/* Header: white band, rounded search and cart */
header { background: #fff; padding: 18px 0 16px; margin-bottom: 26px; border-bottom: 1px solid var(--gk-line); }
#search { margin-bottom: 0; }
#search .input-lg { height: 46px; border-radius: var(--gk-r-btn) 0 0 var(--gk-r-btn); border: 1px solid var(--gk-line-strong); background: #fff; font-size: 15px; padding-left: 16px; }
#search .btn-lg { height: 46px; border-radius: 0 var(--gk-r-btn) var(--gk-r-btn) 0; border: 1px solid var(--gk-line-strong); border-left: 0; background: var(--gk-tint); color: var(--gk-deep); padding: 0 18px; }
#search .btn-lg:hover { background: var(--gk-tint-deep); color: var(--gk-deeper); }
#search .input-lg:focus { border-color: var(--gk-deep); box-shadow: 0 0 0 3px rgba(0, 122, 47, .16); position: relative; z-index: 2; }
#cart > .btn { height: 46px; border-radius: var(--gk-r-btn); background: var(--gk-deep); border: 1px solid var(--gk-deep); font-size: 15px; font-weight: 600; box-shadow: 0 1px 2px rgba(var(--gk-ink-rgb), .10); }
#cart > .btn:hover, #cart.open > .btn, #cart.open > .btn:hover { background: var(--gk-deeper); border-color: var(--gk-deeper); box-shadow: 0 4px 14px rgba(0, 98, 42, .26); }
#cart .dropdown-menu { border-radius: var(--gk-r-card); border: 1px solid var(--gk-line); box-shadow: var(--gk-shadow-hover); padding: 10px; }

/* Buttons */
.btn { border-radius: var(--gk-r-btn); font-weight: 600; transition: background-color .16s var(--gk-ease), box-shadow .16s var(--gk-ease), border-color .16s var(--gk-ease); }
.btn-primary { background: var(--gk-deep); border-color: var(--gk-deep); box-shadow: 0 1px 2px rgba(var(--gk-ink-rgb), .10); padding: 9px 20px; }
.btn-primary:hover, .btn-primary:focus { background: var(--gk-deeper); border-color: var(--gk-deeper); box-shadow: 0 4px 14px rgba(0, 98, 42, .26); }
.btn-default { background: #fff; border-color: var(--gk-line-strong); color: var(--gk-ink); }
.btn-default:hover, .btn-default:focus { background: var(--gk-tint); border-color: var(--gk-tint-line); color: var(--gk-ink); }
.btn-lg { border-radius: var(--gk-r-btn); }
.btn-xs, .btn-sm { border-radius: 8px; }

/* Forms */
.form-control { height: 44px; border-radius: var(--gk-r-btn); border-color: var(--gk-line-strong); padding: 9px 13px; font-size: 15px; color: var(--gk-ink); }
textarea.form-control { height: auto; }
select.form-control { padding-right: 30px; }
.form-control:focus { border-color: var(--gk-deep); box-shadow: 0 0 0 3px rgba(0, 122, 47, .16); }
.input-group .form-control:first-child { border-radius: var(--gk-r-btn) 0 0 var(--gk-r-btn); }
.input-group .form-control:last-child, .input-group-btn:last-child > .btn { border-radius: 0 var(--gk-r-btn) var(--gk-r-btn) 0; }
.input-group-btn:last-child > .btn:not(:last-child) { border-radius: 0; }
label.control-label, .control-label { font-weight: 600; color: var(--gk-ink); }
.required .control-label:before { color: var(--gk-red-text); }

/* Banner */
.swiper-viewport, #content > div > p > img:first-child, #common-home #content img.gk-big { border-radius: var(--gk-r-card); }
#common-home #content img.gk-big { border: 0 !important; box-shadow: var(--gk-shadow); }
.swiper-viewport { border: 0; box-shadow: var(--gk-shadow); }

/* Product cards: soft white cards, photo on white, quiet button row */
.product-thumb { background: #fff; border: 1px solid var(--gk-line); border-radius: var(--gk-r-card); box-shadow: var(--gk-shadow); margin-bottom: 26px; transition: box-shadow .16s var(--gk-ease), transform .16s var(--gk-ease), border-color .16s var(--gk-ease); }
.product-thumb:hover { border-color: var(--gk-tint-line); box-shadow: var(--gk-shadow-hover); transform: translateY(-2px); }
.product-thumb .image { padding: 18px 18px 6px; }
.product-thumb .image a:hover { opacity: 1; }
.product-thumb .caption { padding: 4px 20px 6px; min-height: 0; }
.product-thumb h4 { margin: 6px 0 8px; font-size: 16px; line-height: 1.35; }
.product-thumb h4 a { font-weight: 600; color: var(--gk-ink); }
.product-thumb .caption p:not(.price) { font-size: 14px; line-height: 1.5; color: var(--gk-mute); }
.product-thumb .rating { margin: 0 0 6px; }
.product-thumb .rating .fa-star { color: #F2A900; }
.product-thumb .rating .fa-star-o { color: var(--gk-line-strong); }
.product-thumb .price { font-size: 19px; font-weight: 700; color: var(--gk-ink); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.product-thumb .price-new { color: var(--gk-red-text); }
.product-thumb .price-old { color: var(--gk-mute); }
.product-thumb .price-tax { font-size: 13px; color: var(--gk-mute); }
.product-thumb .button-group { gap: 8px; padding: 6px 16px 16px; border-top: 0; background: transparent; }
.product-thumb .button-group button { height: 44px; border-radius: var(--gk-r-btn); text-transform: none; font-size: 15px; letter-spacing: 0; }
.product-thumb .button-group button:first-child { color: #fff; background: var(--gk-deep); border: 1px solid var(--gk-deep); }
.product-thumb .button-group button:first-child:hover, .product-thumb .button-group button:first-child:focus { color: #fff; background: var(--gk-deeper); border-color: var(--gk-deeper); box-shadow: 0 4px 14px rgba(0, 98, 42, .26); }
.product-thumb .button-group button + button { border: 1px solid var(--gk-line-strong); border-left: 1px solid var(--gk-line-strong); background: #fff; color: var(--gk-ink-soft); }
.product-thumb .button-group button + button:hover, .product-thumb .button-group button + button:focus { background: var(--gk-tint); border-color: var(--gk-tint-line); color: var(--gk-deep); }
.product-thumb .button-group button:active, .product-thumb .button-group button:first-child:active { color: #fff; background: var(--gk-deeper); border-color: var(--gk-deeper); }

/* Category and listing pages */
#content > .row > .col-sm-10 p, .category-description { color: var(--gk-ink-soft); }
#input-sort, #input-limit { height: 40px; }
#list-view, #grid-view { height: 40px; }
.pagination > li > a, .pagination > li > span { border-radius: 8px !important; margin: 0 3px; border-color: var(--gk-line); min-width: 40px; text-align: center; }
#compare-total { color: var(--gk-deep); font-weight: 600; }

/* Product page */
#product-product .thumbnails > li { margin-left: 16px; }
#product-product .thumbnail { border-radius: var(--gk-r-card); border: 1px solid var(--gk-line); background: #fff; box-shadow: var(--gk-shadow); padding: 10px; }
#product-product .image-additional .thumbnail { border-radius: var(--gk-r-btn); box-shadow: none; padding: 4px; }
#product-product a.thumbnail:hover, #product-product a.thumbnail:focus { border-color: var(--gk-brand); }
#product-product #content > .row:first-of-type h1 { font-family: var(--gk-display); font-weight: var(--gk-head-weight, 700); font-size: clamp(28px, 1.2rem + 1.2vw, 36px); line-height: 1.15; margin: 4px 0 14px; }
#product-product .list-unstyled li { color: var(--gk-mute); }
#product-product .list-unstyled h2 { font-family: var(--gk-price-font, var(--gk-text)); letter-spacing: -.01em; font-size: 32px; font-weight: 700; color: var(--gk-ink); font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
#product-product #product { background: #fff; border: 1px solid var(--gk-line); border-radius: var(--gk-r-card); box-shadow: var(--gk-shadow); padding: 18px 18px 6px; margin: 12px 0 16px; }
#product-product #product hr { display: none; }
#product-product #input-quantity { text-align: center; font-weight: 600; }
#product-product #button-cart { height: 50px; font-size: 17px; border-radius: var(--gk-r-btn); }
#product-product .btn-group > .btn { border-radius: var(--gk-r-btn) !important; margin-right: 6px; }
#product-product .rating p { color: var(--gk-mute); }
#product-product .rating .fa-star { color: #F2A900; }
.nav-tabs { border-bottom: 1px solid var(--gk-line); margin-bottom: 18px; }
.nav-tabs > li > a { border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--gk-mute); font-weight: 600; padding: 12px 16px; margin-right: 4px; }
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus { background: transparent; color: var(--gk-ink); border-bottom-color: var(--gk-tint-line); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: 0; border-bottom: 3px solid var(--gk-deep); color: var(--gk-ink); background: transparent; }
.tab-content { color: var(--gk-ink-soft); }
#tab-description img { border-radius: var(--gk-r-card); }
#review .table { background: #fff; border-radius: var(--gk-r-btn); }

/* Tables (cart, account, compare) */
.table-bordered { border: 1px solid var(--gk-line); border-radius: var(--gk-r-card); border-collapse: separate; border-spacing: 0; background: #fff; overflow: hidden; }
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th { border-color: var(--gk-line); border-width: 0 0 1px 0; }
.table-bordered > tbody > tr:last-child > td { border-bottom: 0; }
.table > thead > tr > td, .table > thead > tr > th { background: var(--gk-page); color: var(--gk-ink); font-weight: 600; }
.table .img-thumbnail { border-radius: var(--gk-r-btn); border-color: var(--gk-line); }

/* Panels: checkout steps, cart extras, account boxes */
.panel { border-radius: var(--gk-r-card); }
.panel-group .panel { border: 1px solid var(--gk-line); box-shadow: var(--gk-shadow); overflow: hidden; }
.panel-group .panel + .panel { margin-top: 12px; }
.panel-default > .panel-heading { background: #fff; color: var(--gk-ink); border-color: var(--gk-line); padding: 14px 18px; }
.panel-title { font-size: 16px; font-weight: 600; }
.panel-title > a, .panel-title .accordion-toggle { color: var(--gk-ink); }
.panel-body { padding: 18px; }
.well { background: #fff; border: 1px solid var(--gk-line); border-radius: var(--gk-r-card); box-shadow: var(--gk-shadow); padding: 22px; }
.well h2 { font-family: var(--gk-display); font-weight: 600; font-size: 24px; margin-top: 0; }
.list-group { border-radius: var(--gk-r-card); overflow: hidden; box-shadow: var(--gk-shadow); }
.list-group-item { border-color: var(--gk-line); color: var(--gk-ink-soft); }
.list-group a.list-group-item:hover { background: var(--gk-tint); color: var(--gk-ink); }

/* Notices */
.alert { border-radius: var(--gk-r-btn); border: 1px solid transparent; }
.alert-success { background: var(--gk-tint); border-color: var(--gk-tint-line); color: var(--gk-ink); }
.alert-success a { color: var(--gk-deep); font-weight: 600; }
.alert-danger { background: #FDE8EA; border-color: #F6C3C7; color: #7a0f16; }
.alert-info { background: var(--gk-line); border-color: var(--gk-line-strong); color: var(--gk-ink); }
.alert-warning { background: #FFF6DB; border-color: #F1DC9C; color: #5c4400; }

/* Breadcrumb, if a page shows one */
.breadcrumb { background: transparent; border: 0; padding: 0; margin-bottom: 14px; }
.breadcrumb > li { text-shadow: none; }
.breadcrumb > li:after { display: none; }
.breadcrumb > li + li:before { content: "/\00a0"; color: var(--gk-line-strong); padding: 0 6px; }

/* Footer: ink band */
footer { background: var(--gk-ink); border-top: 0; color: var(--gk-tint); margin-top: 56px; padding-top: 44px; }
/* Footer headings in the plain text font: a display face at this small size read as a template (D1586). */
footer h2.gk-fh, footer h5 { font-family: var(--gk-text); font-weight: 700; font-size: 19px; color: #fff; margin: 0 0 12px; }
footer a { color: var(--gk-tint-line); }
footer a:hover, footer a:focus { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
footer ul.list-unstyled li a { display: inline-block; padding: 4px 0; min-height: 24px; }
footer hr { border-bottom-color: rgba(255, 255, 255, .14); margin-top: 26px; }
footer p { color: var(--gk-tint-line); padding-bottom: 18px; }

/* Refinements */
.product-thumb .rating { min-height: 22px; }
.product-thumb .price { font-size: 20px; }
.product-thumb .price-tax { display: block; margin-top: 2px; }
.product-thumb .button-group { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; }
.product-thumb .button-group button:first-child { padding: 0 10px; white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1199px) {
  .product-thumb .button-group { grid-template-columns: minmax(0, 1fr) 40px 40px; gap: 6px; padding: 4px 12px 14px; }
  .product-thumb .button-group button { height: 42px; }
  .product-thumb .button-group button:first-child { font-size: 14px; padding: 0 6px; }
  .product-thumb .button-group button:first-child .fa { display: none; }
}
/* Search: one rounded field, no seam */
#search { display: flex; border: 1px solid var(--gk-line-strong); border-radius: var(--gk-r-btn); overflow: hidden; background: #fff; }
#search:focus-within { border-color: var(--gk-deep); box-shadow: 0 0 0 3px rgba(0, 122, 47, .16); }
#search .input-lg, #search .btn-lg { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; height: 44px; }
#search .input-group-btn { width: auto; }
/* Header cart: quieter than the page's own buttons */
#cart > .btn { background: var(--gk-tint); border: 1px solid var(--gk-tint-line); color: var(--gk-ink); box-shadow: none; }
#cart > .btn:hover, #cart.open > .btn, #cart.open > .btn:hover, #cart > .btn:focus { background: var(--gk-tint-deep); border-color: var(--gk-tint-line); color: var(--gk-ink); box-shadow: none; }
#cart > .btn .fa { color: var(--gk-deep); }
#cart > .btn:active, #cart.open > .btn:active { background: var(--gk-tint-line); color: var(--gk-ink); }
/* Home: section heading */
#common-home #content > h3, #common-home #content > h2.gk-sec { padding-bottom: 10px; border-bottom: 2px solid var(--gk-tint-deep); margin: 36px 0 22px; }
/* Product gallery: even thumbnail grid */
#product-product ul.thumbnails { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; }
#product-product ul.thumbnails > li { margin: 0 !important; float: none; }
#product-product ul.thumbnails > li:first-child { grid-column: 1 / -1; }
#product-product ul.thumbnails > li.image-additional { max-width: none; width: auto; }
#product-product ul.thumbnails > li.image-additional .thumbnail { display: block; margin: 0; }
#product-product ul.thumbnails > li.image-additional img { width: 100%; height: auto; }
#product-product .list-unstyled + .list-unstyled { background: var(--gk-tint); border-radius: var(--gk-r-btn); padding: 10px 14px; }
#product-product .list-unstyled + .list-unstyled li:empty, #product-product .list-unstyled + .list-unstyled hr { display: none; }
/* Category: sidebar list and toolbar */
#column-left .list-group, #column-right .list-group { box-shadow: var(--gk-shadow); }
#column-left .list-group-item.active, #column-left .list-group a.list-group-item.active { background: var(--gk-tint); color: var(--gk-ink); border-color: var(--gk-line); border-left: 4px solid var(--gk-brand); font-weight: 600; }
#column-left > hr, #column-left hr { display: none; }
#product-category #content > h2:first-child, #product-category #content > h1:first-child { margin-top: 0; }
#content .input-group-addon { background: transparent; border: 0; color: var(--gk-ink); font-weight: 600; padding-left: 0; }
/* Empty cart (and 404): OpenCart renders both with its "not found" template */
#error-not-found #content { max-width: 560px; margin: 32px auto 64px; float: none; background: #fff; border: 1px solid var(--gk-line); border-radius: var(--gk-r-card); box-shadow: var(--gk-shadow); padding: 32px 28px; text-align: center; }
#error-not-found #content h1 { margin-top: 0; }
#error-not-found #content .buttons .pull-right { float: none !important; display: inline-block; margin-top: 12px; }
/* Login / register boxes the same height */
#account-login #content > .row { display: flex; flex-wrap: wrap; }
#account-login #content > .row > [class*="col-"] { display: flex; }
#account-login .well { width: 100%; display: flex; flex-direction: column; }
#account-login .well > .btn, #account-login .well form > .btn { align-self: flex-start; }
#account-login .well > .btn:last-child { margin-top: auto; }
#account-login #content > .row > [class*="col-"] { width: 100%; }
@media (min-width: 768px) { #account-login #content > .row > .col-sm-6 { width: 50%; } }
/* Information pages: comfortable reading */
#information-information #content p, #information-information #content ul, #information-information #content ol { max-width: 72ch; font-size: 16.5px; line-height: 1.7; }
#information-information #content p:empty { display: none; }
#information-information #content h2, #information-information #content h3 { font-family: var(--gk-display); font-weight: 600; margin: 28px 0 10px; }

@media (max-width: 767px) {
  header { padding: 12px 0 14px; margin-bottom: 18px; }
  header .col-sm-4, header .col-sm-5, header .col-sm-3 { margin-bottom: 10px; }
  #logo { margin-bottom: 4px; }
  .product-thumb .image { padding: 14px 14px 4px; }
  .product-thumb .caption { padding: 2px 16px 4px; }
  .product-thumb .button-group { padding: 4px 12px 12px; }
  #product-product #product { padding: 14px 14px 4px; }
  footer { margin-top: 36px; padding-top: 32px; }
  footer .col-sm-3 { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-thumb, .btn { transition: none; }
  .product-thumb:hover { transform: none; }
}

@media (max-width: 767px) {
}

/* Refinements */
/* Cards: the same order everywhere, so prices line up whether or not a card has stars */
.product-thumb .caption h4 { order: 1; }
.product-thumb .caption > p:not(.price) { order: 2; }
.product-thumb .caption .rating { order: 3; margin-bottom: 6px; }
.product-thumb .caption .price { order: 4; margin-top: auto; margin-bottom: 12px; }
.product-thumb .caption .rating:empty, .product-thumb .caption .rating:not(:has(*)) { display: none; }
#product-category #input-sort, #product-category #input-limit { padding-right: 28px; min-width: 110px; }
/* An empty banner module in the category sidebar drew a hollow box */
#column-left .swiper-viewport:not(:has(.swiper-slide)) { display: none; }
/* Home banner: one frame, not a frame inside a frame */
#common-home .swiper-viewport { padding: 0; background: transparent; border: 0; box-shadow: none; }
#common-home .swiper-viewport img { display: block; width: 100%; height: auto; border-radius: var(--gk-r-card); }
/* Product: quantity and Add to Cart on one row */
#product .form-group:has(#input-quantity) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; }
#product .form-group:has(#input-quantity) > label { grid-column: 1 / -1; margin-bottom: 0; }
#product .form-group:has(#input-quantity) > br { display: none; }
#product #input-quantity { width: 88px; height: 50px; text-align: center; margin: 0; }
#product .form-group:has(#input-quantity) #button-cart { width: 100%; margin: 0; }
/* Anything else an extension adds under Add to Cart (one-tap checkout, notes) takes the whole row. */
#product .form-group:has(#input-quantity) > :not(label):not(.gk-qty):not(#button-cart):not(input):not(br) { grid-column: 1 / -1; }
#product-product #content .btn-group { margin-bottom: 12px; }
/* Gallery: four to a row, no lone thumbnail */
#product-product ul.thumbnails { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 480px) { #product-product .nav-tabs > li > a { padding: 8px 10px; font-size: 13.5px; } }
/* Information pages: centred reading column */
#information-information #content { max-width: 760px; margin-left: auto; margin-right: auto; float: none; }
#information-information #content h3 + p { margin-top: 0; }
/* Refinements */
@media (min-width: 768px) and (max-width: 991px) {
  #product .form-group:has(#input-quantity) { grid-template-columns: minmax(0, 1fr); }
  #product #input-quantity { width: 100%; }
}
#product-product ul.thumbnails { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#error-not-found #content { min-height: 0 !important; }
#common-home .swiper-viewport, #common-home .swiper-container { height: auto !important; }
#information-information #content { margin-left: auto !important; margin-right: auto !important; float: none !important; }
/* Phones: text boxes at 16px so iPhone Safari does not zoom in on tap */
@media (max-width: 1024px) {
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control { font-size: 16px !important; }
}

/* quantity box, Update and Remove are one control, so one height and one
   shape: rounded only on the outer ends. */
#content .input-group.btn-block .form-control,
#content .input-group.btn-block .input-group-btn > .btn { height: 44px; box-sizing: border-box; margin: 0; }
#content .input-group.btn-block .input-group-btn > .btn { padding: 0 14px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
#content .input-group.btn-block .input-group-btn { font-size: 0; white-space: nowrap; }
#content .input-group.btn-block .input-group-btn > .btn + .btn { margin-left: 0; }
#content .input-group.btn-block .input-group-btn > .btn:not(:last-child) { border-radius: 0; }
#content .input-group.btn-block .input-group-btn > .btn:last-child { border-radius: 0 var(--gk-r-btn) var(--gk-r-btn) 0; }

/* the cart on phones. Each line becomes a card: photo and name side by side,
   then quantity, then the price and line total with their own labels, nothing cut off. */
@media (max-width: 767px) {
  #checkout-cart .table-responsive { border: 0; overflow: visible; }
  #checkout-cart .table-responsive > .table { border: 0; }
  #checkout-cart .table-responsive > .table > thead { display: none; }
  #checkout-cart .table-responsive > .table > tbody { display: block; }
  #checkout-cart .table-responsive > .table > tbody > tr {
    display: grid; grid-template-columns: 64px 1fr 1fr; gap: 10px 14px; align-items: center;
    padding: 14px; margin-bottom: 12px; border: 1px solid var(--gk-line-strong); border-radius: var(--gk-r-card); background: #fff;
  }
  #checkout-cart .table-responsive > .table > tbody > tr > td { display: block; border: 0; padding: 0; white-space: normal; text-align: left; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 1; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(1) img { max-width: 64px; width: 64px; height: auto; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(2) { grid-column: 2 / -1; grid-row: 1; font-size: 15px; line-height: 1.4; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(3) { display: none; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; }
  /* Left-aligned under the product, never centred by the general .btn-block rule (seen on Best Immune). */
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(4) { justify-self: stretch; text-align: left; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(4) .input-group.btn-block { max-width: none !important; width: auto; display: inline-flex; justify-content: flex-start; margin: 0; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(4) .form-control { width: 64px; text-align: center; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(5),
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(6) { grid-row: 3; font-size: 16px; font-weight: 600; color: var(--gk-ink); }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(5) { grid-column: 1 / 3; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(6) { grid-column: 3; text-align: right; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(5)::before,
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(6)::before { display: block; font-size: 13px; font-weight: 400; color: var(--gk-mute); }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(5)::before { content: "Each"; }
  #checkout-cart .table-responsive > .table > tbody > tr > td:nth-child(6)::before { content: "Total"; }
}

/* one basket button, like most shops. The top bar's separate
   Shopping Cart and Checkout links go; the basket button (#cart) opens the basket with
   View Cart and Checkout inside. The pages themselves are unchanged. */
#top-links li:has(> a[href*="checkout/cart"]), #top-links li:has(> a[href*="checkout/checkout"]) { display: none; }

/* Basket: View Cart and Checkout as two equal buttons, Checkout the filled one. */
#cart .dropdown-menu li > div > p.text-right:last-child { display: flex; gap: 10px; justify-content: stretch; margin: 6px 0 0; }
#cart .dropdown-menu p.text-right:last-child > a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--gk-r-btn); font-weight: 600; text-decoration: none; border: 1.5px solid var(--gk-deep); color: var(--gk-deep); background: #fff; }
#cart .dropdown-menu p.text-right:last-child > a[href*="checkout/checkout"] { background: var(--gk-deep); color: #fff; }
#cart .dropdown-menu p.text-right:last-child > a:hover, #cart .dropdown-menu p.text-right:last-child > a:focus-visible { filter: brightness(.93); }

/* Ways to pay (footer). Marks in ink on white tiles, like the card
   rows on big shops; real brand colours are not needed to read them and stay calmer. */
.gk-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 4px 0 18px; }
.gk-pay-t { margin: 0; font-size: 14px; color: inherit; opacity: .9; }
.gk-pay-l { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gk-pay-l li { display: flex; align-items: center; justify-content: center; width: 52px; height: 34px; background: #fff; border-radius: 6px; border: 1px solid rgba(var(--gk-ink-rgb),.18); }
.gk-pay-l svg { width: 30px; height: 22px; fill: var(--gk-ink); }
.gk-pay-l .gk-pay-applepay svg, .gk-pay-l .gk-pay-googlepay svg { width: 38px; }
.gk-pay-l .gk-pay-applepay svg, .gk-pay-l .gk-pay-googlepay svg { width: 44px; height: 28px; }

/* Basket dropdown: a real mini-basket instead of the stock tables. */
#cart .dropdown-menu { background: #fff; border: 1px solid rgba(var(--gk-ink-rgb),.12); border-radius: var(--gk-r-card); box-shadow: 0 18px 40px -12px rgba(var(--gk-ink-rgb),.28); padding: 16px; min-width: 360px; max-width: 400px; }
#cart .dropdown-menu > li:first-child::before { content: var(--gk-t-basket, "Your basket"); display: block; font-family: var(--gk-display); font-size: 20px; font-weight: 700; color: var(--gk-ink); margin: 0 0 10px; }
#cart .dropdown-menu > li:only-child::before { content: none; }
#cart .dropdown-menu .table { margin: 0; background: transparent; border: 0; }
#cart .dropdown-menu .table > tbody > tr > td { border: 0; background: transparent !important; padding: 0; vertical-align: middle; }
#cart .dropdown-menu .table-striped > tbody > tr { display: grid; grid-template-columns: 56px 1fr auto 44px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(var(--gk-ink-rgb),.1); }
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(1) { grid-row: 1 / 3; align-self: start; }
/* OpenCart writes "- " and a line break before each option; the options are lines of their own already. */
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(2) { font-size: 0; align-self: start; }
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(2) br { display: none; }
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(1) img { width: 56px; height: 56px; max-width: none; object-fit: contain; padding: 4px; background: #fff; border: 1px solid rgba(var(--gk-ink-rgb),.12); border-radius: 10px; }
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(2) { grid-column: 2 / 4; grid-row: 1; text-align: left; }
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(2) a { color: var(--gk-ink); font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(2) small { display: block; color: var(--gk-mute); font-size: 12px; }
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: left; color: var(--gk-mute); font-size: 13px; }
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(4) { grid-column: 3; grid-row: 2; text-align: right; font-weight: 700; color: var(--gk-ink); font-size: 15px; }
#cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(5) { grid-column: 4; grid-row: 1 / 3; text-align: right; }
#cart .dropdown-menu .table-striped .btn-danger { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--gk-mute); border-radius: 10px; box-shadow: none; }
#cart .dropdown-menu .table-striped .btn-danger:hover, #cart .dropdown-menu .table-striped .btn-danger:focus-visible { background: #FDECEC; color: #B3261E; border-color: #F5C2C0; }
#cart .dropdown-menu .table-bordered { border: 0; border-radius: 0; margin-top: 8px; }
#cart .dropdown-menu .table-bordered > tbody > tr { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
#cart .dropdown-menu .table-bordered > tbody > tr > td { text-align: left; font-size: 14px; color: var(--gk-mute); }
#cart .dropdown-menu .table-bordered > tbody > tr > td strong { font-weight: 400; }
#cart .dropdown-menu .table-bordered > tbody > tr:last-child { border-top: 1px solid rgba(var(--gk-ink-rgb),.1); margin-top: 6px; padding-top: 10px; }
#cart .dropdown-menu .table-bordered > tbody > tr:last-child > td { font-size: 17px; font-weight: 700; color: var(--gk-ink); }
#cart .dropdown-menu .table-bordered > tbody > tr:last-child > td strong { font-weight: 700; }
#cart .dropdown-menu > li > p.text-center { margin: 8px 0; color: var(--gk-mute); }
@media (max-width: 767px) { #cart .dropdown-menu { min-width: 0; max-width: none; width: 100%; } }
#cart .dropdown-menu > li, #cart .dropdown-menu > li > div { display: block; width: 100%; padding: 0; box-sizing: border-box; }
#cart .dropdown-menu .table { display: block; width: 100%; }
#cart .dropdown-menu .table > tbody { display: block; width: 100%; }
#cart .dropdown-menu .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
#cart .dropdown-menu > li > div > p.text-right:last-child { margin-top: 12px; }

/* Optional "Powered by" line in the footer */
.gk-by { display: block; margin-top: 6px; font-size: 13px; opacity: .85; }
.gk-by a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gk-by a:hover, .gk-by a:focus-visible { opacity: 1; text-decoration-thickness: 2px; }
#cart .dropdown-menu li > div { min-width: 0 !important; }

.gk-pay { align-items: center; }
.gk-pay-t { display: flex; align-items: center; height: 34px; line-height: 1; }
/* No underline on icon links when tapped, hovered or focused. */
#top a, #top a:hover, #top a:focus, #top a:active, #top .btn-link, #top .btn-link:hover, #top .btn-link:focus,
#cart > .btn, #cart .dropdown-menu a, a:has(> .fa):hover, a:has(> .fa):focus, a:has(> .fa):active,
.btn:hover, .btn:focus, .btn:active { text-decoration: none !important; }

.gk-pay-t { white-space: nowrap; padding: 0 !important; }
@media (min-width: 992px) { .gk-pay-l { flex-wrap: nowrap; } }


/* Card titles moved from h4 to h3 (heading order); same look. */
.product-thumb h3.gk-ct { font-family: inherit; }
.product-thumb h3.gk-ct a { color: var(--gk-ink); font-weight: 600; }
.product-thumb h3.gk-ct a:hover, .product-thumb h3.gk-ct a:focus { color: var(--gk-deep); }
.product-thumb h3.gk-ct { margin: 6px 0 8px; font-size: 16px; line-height: 1.35; }
.product-thumb h3.gk-ct a { font-weight: 600; color: var(--gk-ink); }
.product-thumb .caption h3.gk-ct { order: 1; }
.product-thumb h3.gk-ct { font-weight: 700; }

/* Buy box: - qty +. */
#product .gk-qty { display: inline-flex; align-items: stretch; height: 48px; border: 1px solid var(--gk-line-strong); border-radius: var(--gk-r-btn); background: #fff; overflow: hidden; }
#product .gk-qty .form-control { width: 52px !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: center; font-size: 16px; font-weight: 600; padding: 0; color: var(--gk-ink); }
#product .gk-qty-b { width: 46px; min-width: 44px; flex: 0 0 auto; border: 0; background: transparent; color: var(--gk-ink); font-size: 22px; line-height: 1; cursor: pointer; }
#product .gk-qty-b:hover, #product .gk-qty-b:focus-visible { background: var(--gk-tint); color: var(--gk-deep); }
#product .gk-qty-b:active { background: var(--gk-tint-deep); }
/* One is the least: its - is dimmed (still there, it just does nothing). */
.gk-qty[data-gk-min] .gk-qty-b[data-d="-1"] { opacity: .35; cursor: default; }

/* Reassurance under Add to Cart. */
.gk-trust { list-style: none; margin: 16px 0 4px; padding: 0; display: grid; gap: 8px; grid-column: 1 / -1; }
.gk-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gk-ink-soft); line-height: 1.4; }
.gk-trust .fa { flex: 0 0 auto; width: 20px; height: 20px; color: var(--gk-deep); font-size: 18px; }

/* Phones: slim Add to Cart bar once the real button has scrolled away. */
.gk-stick { display: none; }
@media (max-width: 767px) {
  .gk-stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid rgba(var(--gk-ink-rgb),.12); box-shadow: 0 -8px 24px -12px rgba(var(--gk-ink-rgb),.25);
    transform: translateY(110%); transition: transform .2s ease; }
  .gk-stick.gk-on { transform: none; }
  .gk-stick-p { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--gk-ink); font-variant-numeric: tabular-nums; }
  .gk-stick-p small { font-size: 12.5px; font-weight: 500; color: var(--gk-mute); white-space: nowrap; }
  .gk-stick-p small:empty { display: none; }
  .gk-stick .btn { min-height: 48px; padding: 0 28px; font-size: 16px; font-weight: 700; flex: 0 0 auto; }
  /* Its quantity: the form's - and + in small, beside the price (D1444). */
  .gk-stick .gk-qty { display: inline-flex; align-items: stretch; flex: 0 0 auto; height: 48px; border: 1px solid var(--gk-line-strong); border-radius: var(--gk-r-btn); background: var(--gk-field, #fff); overflow: hidden; }
  .gk-stick .gk-qty .form-control { width: 28px; height: 100%; border: 0; border-radius: 0; box-shadow: none; padding: 0; text-align: center; font-size: 16px; font-weight: 600; color: var(--gk-ink); background: transparent; }
  .gk-stick .gk-qty-b { width: 40px; flex: 0 0 auto; border: 0; padding: 0; background: transparent; color: var(--gk-ink); font-size: 20px; line-height: 1; touch-action: manipulation; }
  .gk-stick .gk-qty-b:active { background: var(--gk-tint-deep); }
  .gk-stick:has(.gk-qty) { gap: 10px; padding-left: 12px; padding-right: 12px; }
  /* With its own quantity, Add to Cart takes the width the price leaves (D1459). The price keeps
     room for a two-digit total, so Add to Cart stays one size as the quantity changes. */
  .gk-stick:has(.gk-qty) .gk-stick-p { flex: 0 0 auto; min-width: 3.6em; }
  .gk-stick:has(.gk-qty) .btn { flex: 1 1 auto; padding: 0 16px; }
  /* From the start, not when the bar slides in: reaching the end never grows the page (D1646). */
  body.gk-has-stick footer { padding-bottom: calc(var(--gk-stick-room, var(--gk-stick-h, 72px)) + 8px); }
  /* Card Payments puts its Buy now buttons on their own row above the price and Add to Cart. */
  .gk-stick.gk-express-bar-has-wallets { padding-top: 8px; }
  .gk-stick.gk-express-bar-has-wallets .gk-stick-p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .gk-stick { transition: none; } }

/* Footer: the stock footer p padding (18px below) pushed the copyright box's centre under its
   text, so the payment cards beside it sat low. */
/* On phones the copyright line is last, so give it room above the screen edge. */

/* Empty mini basket: readable, with a way back to the products. */
#cart .dropdown-menu > li:only-child > p.text-center { margin: 0; padding: 22px 8px 18px !important; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--gk-ink); }
#cart .dropdown-menu > li:only-child > p.text-center::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 10px; background: var(--gk-deep); -webkit-mask: url("icons/shopping-cart.svg") center / contain no-repeat; mask: url("icons/shopping-cart.svg") center / contain no-repeat; }

/* One button size across every page and form: Back sat at 34 px next to a
   43 px Continue. Every content button is now a 44 px tap target with the same type and padding. */
#content .btn:not(.btn-lg), #content input.btn { min-height: 44px; padding: 10px 20px; font-size: 16px; line-height: 1.25; display: inline-flex; align-items: center; justify-content: center; gap: 6px; vertical-align: middle; }
#content .btn-block, #button-cart { display: flex; width: 100%; justify-content: center; align-items: center; text-align: center; }
#content .btn-group > .btn, #content .input-group-btn > .btn { min-width: 44px; padding: 10px 14px; }
#content .btn:focus-visible { outline: 3px solid var(--gk-deep); outline-offset: 2px; }

/* Quantity box keeps its full width. */
#product .gk-qty { flex: 0 0 auto; width: max-content; }
#product .gk-qty .form-control { flex: 0 0 52px; }

/* Photo viewer: modern full-screen look, swipe between photos. */
body .mfp-bg, body .mfp-bg.mfp-ready { background: rgba(6, 23, 28, .96); opacity: 1 !important; }
body .mfp-wrap { touch-action: pan-y; }
body .mfp-figure:after { box-shadow: none; background: transparent; }
body .mfp-img { padding: 48px 0 56px !important; clip-path: inset(48px 0 56px round 14px); }
body .mfp-title { display: none; }
/* "1 of 8": white on a light pill, readable over any photo (D1680). */
body .mfp-counter { top: auto; bottom: -42px; right: 50%; transform: translateX(50%); padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
/* The close button: an X drawn from two lines, so it sits exactly in the middle of its circle (the
   "x" character didn't), with a pointer, not the viewer's zoom-out cursor (D1680). */
body .mfp-image-holder .mfp-close, body .mfp-close { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: transparent; opacity: 1; font-size: 0; line-height: 0; text-align: center; cursor: pointer !important; }
body .mfp-close::before, body .mfp-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; border-radius: 1px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
body .mfp-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
body .mfp-close:active { top: 14px; }
body .mfp-close:hover, body .mfp-close:focus-visible { background: rgba(255,255,255,.26); }
/* "button.mfp-arrow": OpenCart loads the lightbox's own sheet after the theme on product pages,
   and its button.mfp-arrow rule (no background, always shown) won over a plain .mfp-arrow. */
body button.mfp-arrow { width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); opacity: 1; transform: none; }
body button.mfp-arrow-left { left: 16px; } body button.mfp-arrow-right { right: 16px; }
/* Like the close button and Best Immune's: a light circle that brightens under the pointer. */
body button.mfp-arrow:hover, body button.mfp-arrow:focus-visible { background: rgba(255, 255, 255, .26); }
/* The lightbox's sheet moves a pressed arrow up, so the release landed on the background and closed it. */
body button.mfp-arrow:active { margin-top: -26px; }
body button.mfp-arrow:before { display: none; }
body button.mfp-arrow:after { border: 0; margin: 0; top: 50%; left: 50%; width: 14px; height: 14px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: translate(-65%, -50%) rotate(45deg); }
body button.mfp-arrow-left:after { transform: translate(-35%, -50%) rotate(-135deg); }
/* The whole circle takes the tap (above the photo, no double-tap zoom wait on an iPhone). */
body button.mfp-arrow { z-index: 1047; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Phones: smaller arrows nearer the edges; swiping works too. */
@media (max-width: 767px) {
  body button.mfp-arrow, body button.mfp-arrow:active { width: 44px; height: 44px; margin-top: -22px; }
  body button.mfp-arrow-left { left: 8px; } body button.mfp-arrow-right { right: 8px; }
  body button.mfp-arrow:after { width: 12px; height: 12px; }
}
/* Animate the photo, never its box: a transform on the box re-anchors the fixed close button to
   it, so the X jumped about on every photo. */
body .mfp-wrap .mfp-img { animation: gk-mfp .22s ease-out; }
@keyframes gk-mfp { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body .mfp-wrap .mfp-img { animation: none; } }

/* Photos fill their card edge to edge, so a studio backdrop never sits as a square inside a
   white frame (and dark mode needs no white tile). The card's rounded corners clip them. */
.product-thumb .image { padding: 0 !important; margin: 0; background: none; }
.product-thumb .image a { display: block; }
.product-thumb .image img { display: block; width: 100%; height: auto; margin: 0; transition: transform .35s var(--gk-ease); }
.product-thumb:hover .image img { transform: scale(1.03); }
.product-thumb .image { overflow: hidden; }
#product-product ul.thumbnails > li:first-child .thumbnail { padding: 0; overflow: hidden; }
#product-product ul.thumbnails > li:first-child .thumbnail img { display: block; width: 100%; height: auto; }
#product-product .image-additional .thumbnail { overflow: hidden; padding: 0; }
@media (prefers-reduced-motion: reduce) { .product-thumb .image img { transition: none; } .product-thumb:hover .image img { transform: none; } }

/* Card buttons: Add to Cart takes the whole row, so it fits in every language; wish list and
   compare become round buttons on the photo's top-right corner. */
.product-thumb { position: relative; }
.product-thumb .button-group { display: flex; background: none; border-top: 0; padding: 0 14px 14px; }
.product-thumb .button-group button:first-child { flex: 1 1 100%; height: 44px; border: 1px solid var(--gk-deep) !important; border-radius: var(--gk-r-btn); background: var(--gk-deep); color: var(--gk-on-deep); white-space: normal; overflow: visible; line-height: 1.15; }
.product-thumb .button-group button:first-child:hover, .product-thumb .button-group button:first-child:focus-visible { background: var(--gk-deeper); border-color: var(--gk-deeper) !important; color: var(--gk-on-deep); }
.product-thumb .button-group button + button { position: absolute; right: 10px; top: 10px; z-index: 2; width: 40px; height: 40px; flex: none; padding: 0; border: 1px solid var(--gk-line) !important; border-radius: 50%; background: var(--gk-surface); color: var(--gk-ink-soft); box-shadow: var(--gk-shadow); }
.product-thumb .button-group button + button + button { top: 58px; }
.product-thumb .button-group button + button:hover, .product-thumb .button-group button + button:focus-visible { background: var(--gk-tint); color: var(--gk-deep); border-color: var(--gk-tint-line) !important; }
@media (max-width: 767px) { .product-thumb .button-group button + button { width: 44px; height: 44px; } .product-thumb .button-group button + button + button { top: 62px; } }

/* List view: the photo sits on the left at about the size it was made for (it was stretched
   across the whole row and went soft), the words beside it, clear of the round buttons. */
.product-list .product-thumb { flex-direction: row; align-items: stretch; }
.product-list .product-thumb .image { flex: 0 0 132px; width: 132px; float: none; align-self: flex-start; }
.product-list .product-thumb > div:not(.image) { min-width: 0; }
.product-list .product-thumb .caption { padding-right: 64px; margin-left: 0; }
.product-list .product-thumb .button-group { border-left: 0; }
@media (min-width: 768px) {
  .product-list .product-thumb .image { flex-basis: 240px; width: 240px; }
  .product-list .product-thumb .button-group { max-width: 320px; }
}

/* Home banner (hero): the shop's words in every language over a slow "fresh air" animation
   (hero.js), up to three photos fanned on the right. Light and dark from the same variables. */
.gk-hero { position: relative; overflow: hidden; margin: 0 0 32px; border: 1px solid var(--gk-tint-line); border-radius: var(--gk-r-card); background: radial-gradient(120% 90% at 85% 10%, var(--gk-tint-deep) 0%, transparent 55%), linear-gradient(160deg, var(--gk-tint) 0%, var(--gk-page) 75%); }
.gk-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35) 55%, #000 80%); mask-image: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35) 55%, #000 80%); }
.gk-hero-grid { position: relative; display: grid; gap: 4px; padding: 28px 20px 24px; align-items: center; }
.gk-hero-grid > * { min-width: 0; }
#content .gk-hero-title { font-family: var(--gk-display); font-weight: 700; font-size: clamp(34px, 1.1rem + 3.6vw, 58px); line-height: 1.03; letter-spacing: -.025em; color: var(--gk-ink); margin: 0 0 20px; text-wrap: balance; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.gk-hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gk-hero-points li { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--gk-ink); }
.gk-hero-tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gk-deep); color: var(--gk-on-deep); }
.gk-hero-tag { margin: 22px 0 0; display: grid; gap: 4px; }
.gk-hero-tag strong { font-family: var(--gk-display); font-size: clamp(20px, 1rem + .8vw, 26px); font-weight: 700; line-height: 1.15; color: var(--gk-deep); }
.gk-hero-tag span { font-size: 15px; color: var(--gk-ink-soft); max-width: 46ch; }
.gk-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gk-hero-cta .btn { min-height: 48px; padding: 12px 22px; font-size: 16px; font-weight: 700; border-radius: var(--gk-r-btn); display: inline-flex; align-items: center; }
.gk-hero-cta { align-items: center; column-gap: 22px; }
.gk-hero-more, .gk-hero-more:hover, .gk-hero-more:focus-visible { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 16px; font-weight: 700; color: var(--gk-deep); text-decoration: none; }
.gk-hero-more span { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(var(--gk-deep-rgb), .35); text-underline-offset: 5px; }
.gk-hero-more:hover span, .gk-hero-more:focus-visible span { text-decoration-color: currentColor; }
.gk-hero-art { position: relative; height: clamp(170px, 46vw, 250px); margin-top: 12px; }
.gk-hero-art::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 75%; border-radius: 50% 50% 0 0; background: radial-gradient(closest-side, rgba(var(--gk-brand-rgb), .18), transparent); }
.gk-hero-pic { position: absolute; bottom: 8%; width: 38%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; border: 3px solid var(--gk-surface); box-shadow: 0 18px 36px -12px rgba(var(--gk-ink-rgb), .35); background: var(--gk-surface); }
.gk-hero-pic--left { left: 6%; transform: rotate(-7deg); }
.gk-hero-pic--right { right: 6%; transform: rotate(6deg); }
.gk-hero-pic--front { left: 31%; width: 40%; bottom: 3%; z-index: 1; }
:root[data-theme="dark"] .gk-hero-pic { box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7); }
@media (min-width: 768px) {
  .gk-hero-grid { grid-template-columns: 11fr 10fr; padding: 36px 24px 36px 44px; }
  .gk-hero--text .gk-hero-grid { grid-template-columns: 1fr; }
  .gk-hero-art { height: 100%; min-height: 340px; margin-top: 0; }
  .gk-hero-canvas { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.35) 42%, #000 68%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.35) 42%, #000 68%); }
  .gk-hero-points li { font-size: 18px; }
}
/* Tall products (bottles, jars) stand side by side in their own shape, no photo card. */
.gk-hero-art--tall { height: clamp(220px, 62vw, 300px); }
.gk-hero-art--tall .gk-hero-pic { aspect-ratio: auto; object-fit: contain; width: auto; height: 82%; max-width: 40%; bottom: 4%; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 14px 18px rgba(var(--gk-ink-rgb), .22)); }
.gk-hero-art--tall .gk-hero-pic--left { left: 10%; height: 70%; transform: rotate(-4deg); }
.gk-hero-art--tall .gk-hero-pic--right { left: auto; right: 10%; height: 70%; transform: rotate(4deg); }
.gk-hero-art--tall .gk-hero-pic--front { left: 50%; height: 88%; bottom: 2%; transform: translateX(-50%); }
:root[data-theme="dark"] .gk-hero-art--tall .gk-hero-pic { box-shadow: none; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .55)); }
@media (min-width: 768px) {
  .gk-hero-art--tall { height: 100%; min-height: 330px; }
}
/* Four tall pictures: a fan with one further back, the same gap above and below the tallest. */
.gk-hero-pic--far { left: 2%; width: 30%; bottom: 16%; transform: rotate(-10deg); }
.gk-hero-art--tall.gk-hero-art--four .gk-hero-pic { height: auto; max-width: none; }
.gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--far { left: 5%; width: 24%; bottom: 11%; transform: rotate(-6deg); }
.gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--left { left: 21%; width: 30%; bottom: 2%; transform: rotate(-2deg); }
.gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--front { left: 49%; width: 30%; bottom: 2%; transform: rotate(2deg); }
.gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--right { left: 71%; right: auto; width: 24%; bottom: 11%; transform: rotate(6deg); }
@media (min-width: 768px) {
  .gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--far { left: 6%; width: 20%; bottom: 13%; transform: rotate(-8deg); }
  .gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--left { left: 18%; width: 24%; bottom: 5%; transform: rotate(-4deg); }
  .gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--right { left: 56%; width: 24%; bottom: 5%; transform: rotate(5deg); }
  .gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--front { left: 35.5%; width: 29.5%; bottom: 0; transform: none; }
}
/* Banner photo layout "one large photo" (Q1558): the first photo, straight, no fan. */
.gk-hero-art.gk-hero-art--single { height: auto; min-height: 0; margin-top: 18px; display: flex; align-items: center; justify-content: center; }
.gk-hero-art--single::before { display: none; }
.gk-hero-pic.gk-hero-pic--single { position: static; width: 100%; max-width: 560px; height: auto; aspect-ratio: auto; transform: none; border: 0; border-radius: var(--gk-r-card); box-shadow: 0 24px 48px -20px rgba(var(--gk-ink-rgb), .4); }
@media (min-width: 768px) {
  .gk-hero-art.gk-hero-art--single { margin-top: 0; }
}
/* Banner width "edge to edge" (Q1558): the band runs the full screen width, its words stay in
   line with the page below. */
html:has(.gk-hero--full) body { overflow-x: clip; }
.gk-hero.gk-hero--full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-width: 1px 0; border-radius: 0; }
.gk-hero--full .gk-hero-grid { padding: 32px 15px 28px; margin: 0 auto; }
@media (min-width: 768px) {
  .gk-hero--full .gk-hero-grid { width: 750px; padding: 48px 15px; }
}
@media (min-width: 992px) {
  .gk-hero--full .gk-hero-grid { width: 970px; }
}
@media (min-width: 1200px) {
  .gk-hero--full .gk-hero-grid { width: 1170px; padding: 56px 15px; }
}
/* Floating shapes behind the banner: the plain wash of the tint, nothing else in the way. */
:root[data-gk-hero="shapes"] .gk-hero { background: linear-gradient(160deg, var(--gk-tint) 0%, var(--gk-page) 70%); }
/* The photos lift on hover only when the shop turns it on (D1624). */
@media (prefers-reduced-motion: no-preference) {
  .gk-hero-pic { transition: transform .5s var(--gk-ease); }
  .gk-hero--lift:hover .gk-hero-pic--left { transform: rotate(-9deg) translateY(-4px); }
  .gk-hero--lift:hover .gk-hero-pic--right { transform: rotate(8deg) translateY(-4px); }
  .gk-hero--lift:hover .gk-hero-pic--front { transform: translateY(-6px); }
  .gk-hero--lift:hover .gk-hero-art--tall .gk-hero-pic--left { transform: rotate(-6deg) translateY(-4px); }
  .gk-hero--lift:hover .gk-hero-art--tall .gk-hero-pic--right { transform: rotate(6deg) translateY(-4px); }
  .gk-hero--lift:hover .gk-hero-art--tall .gk-hero-pic--front { transform: translateX(-50%) translateY(-6px); }
  .gk-hero--lift:hover .gk-hero-art--four .gk-hero-pic { translate: 0 -4px; }
  .gk-hero--lift:hover .gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--far { transform: rotate(-8deg); }
  .gk-hero--lift:hover .gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--left { transform: rotate(-4deg); }
  .gk-hero--lift:hover .gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--right { transform: rotate(5deg); }
  .gk-hero--lift:hover .gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--front { transform: none; }
}

/* Every form: text people type at 16 px (iPhone does not zoom in) and labels at 14 px. The
   standard theme's 12 px rules are more specific than ours, hence the #content selectors. */
#content select.form-control, #content textarea.form-control, #content input.form-control, .form-control { font-size: 16px; }
label, .control-label, label.control-label { font-size: 14px; }
.checkbox label, .radio label { font-size: 15px; }
#product .form-group .control-label { font-weight: 600; color: var(--gk-ink-soft); }
#content select.form-control, #content .input-group-sm > select.form-control { height: 44px; border-radius: var(--gk-r-btn); }

/* Breadcrumb: the standard theme pads each step by 30 px, which left a hole after the home icon */
.breadcrumb > li { padding: 0; }
.breadcrumb > li + li:before { padding: 0 8px; }

/* Category toolbar on phones: one tidy row of controls, the compare link as a normal-size link */
#content .row:has(> div > .form-group > #compare-total) { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; }
#compare-total { font-size: 15px; font-weight: 600; }
@media (max-width: 767px) {
  #content .form-group:has(> #compare-total) { margin: 0; }
  #content .input-group-sm:has(> #input-sort), #content .input-group-sm:has(> #input-limit) { display: flex; align-items: center; gap: 8px; width: 100%; }
  #content .input-group-sm > .input-group-addon { width: auto; padding: 0; background: none; border: 0; }
  #input-sort, #input-limit { flex: 1 1 auto; }
}
/* The standard theme's ".list-group a" grey border outranked ours (white lines in dark mode) */
.list-group a.list-group-item { border-color: var(--gk-line); color: var(--gk-ink-soft); }
.list-group a.list-group-item:hover, .list-group a.list-group-item:focus { color: var(--gk-ink); }
/* OpenCart's stylesheet gives hovered and active menu links a white 1px text shadow, which in dark
   mode smears light words into a blurry bold (D1680). */
.list-group a:hover, .list-group a:focus, .list-group a.active { text-shadow: none; }
@media (max-width: 767px) { #compare-total { padding-left: 0; } }

/* Footer, reworked: a deep band in the shop's colour with a soft glow of the brand colour and a
   thin bright edge, so it reads as the base of the page in both modes. Three levels of text:
   headings in full white, then words in white with a touch of the brand colour: text 90%, links 82%,
   small print 74%, as on Best Immune live (D1689; rgba white where color-mix is missing). */
footer { position: relative; background-color: var(--gk-ink); background-image: radial-gradient(60% 120% at 8% 0%, rgba(var(--gk-brand-rgb), .30), transparent 70%), radial-gradient(45% 90% at 100% 100%, rgba(var(--gk-brand-rgb), .16), transparent 70%); border-top: 0; color: rgba(255, 255, 255, .88); color: color-mix(in srgb, #fff 90%, var(--gk-brand)); padding-top: 52px; }
footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gk-brand-rgb), .9) 30%, rgba(255, 255, 255, .5) 50%, rgba(var(--gk-brand-rgb), .9) 70%, transparent); }
footer h2.gk-fh, footer h5 { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; margin: 0 0 14px; }
@media (max-width: 767px) { footer h2.gk-fh, footer h5 { font-size: 18px; } }
footer ul.list-unstyled li a { color: rgba(255, 255, 255, .8); color: color-mix(in srgb, #fff 82%, var(--gk-brand)); padding: 5px 0; transition: color .15s ease; }
footer ul.list-unstyled li a:hover, footer ul.list-unstyled li a:focus-visible { color: #fff; text-decoration: underline; text-decoration-color: rgba(var(--gk-brand-rgb), 1); text-decoration-thickness: 2px; text-underline-offset: 5px; }
footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
footer hr { border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); margin: 36px 0 0; }
footer p { color: inherit; }

/* Bottom row: copyright (strong) over one quiet line of credits; ways to pay on the right. */
.gk-foot-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 24px 0 32px; }
.gk-foot-legal { min-width: 0; }
footer .gk-copy { margin: 0; padding: 0 !important; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .9); }
footer .gk-made { margin: 4px 0 0; padding: 0 !important; font-size: 13px; color: rgba(255, 255, 255, .72); color: color-mix(in srgb, #fff 74%, var(--gk-brand)); }
footer .gk-made a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
footer .gk-made a:hover, footer .gk-made a:focus-visible { color: #fff; text-decoration-color: currentColor; }
.gk-sep { padding: 0 4px; color: rgba(255, 255, 255, .35); }
footer .gk-by { display: inline; margin: 0; font-size: inherit; opacity: 1; }
.gk-foot-end .gk-pay { margin: 0; justify-content: flex-end; }
footer .gk-pay-t { margin: 0; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .72); color: color-mix(in srgb, #fff 74%, var(--gk-brand)); opacity: 1; }
.gk-pay-l li { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }

/* Phones: ways to pay first, then the copyright and credits, all left-aligned, with room under
   the last line (more when the sticky Add to Cart bar is showing). */
@media (max-width: 767px) {
  footer { padding-top: 36px; }
  footer .col-sm-3 { margin-bottom: 18px; }
  .gk-foot-end { flex-direction: column-reverse; align-items: flex-start; gap: 20px; padding: 22px 0 36px; }
  .gk-foot-end .gk-pay { justify-content: flex-start; }
  .gk-pay-l { justify-content: flex-start; }
}

/* Dark mode: the band sits darker than the page, so it still reads as the base. */
:root[data-theme="dark"] footer { background-color: var(--gk-band); border-top: 0; }

/* Category page "Refine search" links: tall enough to tap (24 px minimum target). */
#content .col-sm-3 > ul > li > a { display: inline-block; padding: 6px 0; min-height: 32px; }

/* Phones: form text at 16px, so iPhone does not zoom in when a box is tapped */
@media (max-width: 767px) { .form-control, #search .input-lg { font-size: 16px; } }

/* A mouse click or tap leaves no outline (OpenCart's Bootstrap draws one on every focused link);
   keyboard users still get it, through :focus-visible. */
:focus:not(:focus-visible) { outline: 0 !important; }

/* Layout choices (Your shop > Corners and layout): data-gk-* on <html>, set by gk_theme.php. */
/* Top bar as a dark band in the shop's text colour; the tags stay light on it. */
:root[data-gk-top="band"] #top { background: var(--gk-band); border-bottom: 0; }
@media (min-width: 768px) { :root[data-gk-top="band"] #top { padding: 4px 0 3px; } :root[data-gk-top="band"] #top > .container { min-height: 42px; } }
/* Words in white with a touch of the brand colour (rgba white where color-mix is missing). */
:root[data-gk-top="band"] #top .btn-link, :root[data-gk-top="band"] #top .pull-left .dropdown-toggle, :root[data-gk-top="band"] #top .pull-left .dropdown-toggle span, :root[data-gk-top="band"] #top #top-links > ul > li > a,
:root[data-gk-top="band"] #top #top-links li, :root[data-gk-top="band"] #top #top-links .fa, :root[data-gk-top="band"] #top #gk-mode { color: rgba(255, 255, 255, .9) !important; color: color-mix(in srgb, #fff 90%, var(--gk-brand)) !important; }
:root[data-gk-top="band"] #top .dropdown-menu a, :root[data-gk-top="band"] #top .dropdown-menu .fa, :root[data-gk-top="band"] #top .dropdown-menu .btn-link { color: var(--gk-ink) !important; }
:root[data-gk-top="band"] #top .open > .dropdown-toggle, :root[data-gk-top="band"] #top #top-links .open > a,
:root[data-gk-top="band"] #top .dropdown-toggle:focus-visible, :root[data-gk-top="band"] #top #top-links > ul > li > a:focus-visible { background: rgba(255, 255, 255, .14) !important; border-color: transparent; color: #fff !important; }
@media (hover: hover) {
  :root[data-gk-top="band"] #top .pull-left .dropdown-toggle:hover, :root[data-gk-top="band"] #top #top-links > ul > li > a:hover, :root[data-gk-top="band"] #top #gk-mode:hover { background: rgba(255, 255, 255, .14) !important; border-color: transparent; color: #fff !important; }
}
:root[data-gk-top="band"] #top .dropdown-toggle:focus-visible, :root[data-gk-top="band"] #top #gk-mode:focus-visible { outline-color: #fff !important; }

/* Product pictures whole, with space around them, instead of filling the card (bottles, jars). */
:root[data-gk-pictures="fit"] .product-thumb .image { padding: 18px 18px 6px !important; }
:root[data-gk-pictures="fit"] .product-thumb .image img { width: auto; max-width: 100%; margin: 0 auto; }
:root[data-gk-pictures="fit"] .product-thumb:hover .image img { transform: none; }
:root[data-gk-pictures="fit"][data-theme="dark"] .product-thumb .image { margin: 10px 10px 0; padding: 10px 10px 4px !important; border-radius: calc(var(--gk-r-card) - 4px); background: #fff; }
@media (max-width: 767px) { :root[data-gk-pictures="fit"]:not([data-theme="dark"]) .product-thumb .image { padding: 14px 14px 4px !important; } }

/* A plain footer: one colour, no glow or bright edge. */
:root[data-gk-footer="plain"] footer { background-image: none; }
:root[data-gk-footer="plain"] footer::before { display: none; }
:root[data-gk-footer="plain"][data-theme="dark"] footer { background-color: var(--gk-surface); }

/* The basket button below the search box on phones, full width, and filling its column beside
   the search box on wider screens (the header grid in nav.css sizes the column; D1680). */
:root[data-gk-basket="below"] #cart, :root[data-gk-basket="below"] #cart > .btn { width: 100%; }
@media (max-width: 767px) {
  :root[data-gk-basket="below"] header .col-sm-4 { grid-column: 1 / -1; }
  :root[data-gk-basket="below"] header .col-sm-3 { grid-column: 1 / -1; grid-row: 3; }
  :root[data-gk-basket="below"] #cart > .btn { min-height: 46px; font-size: 15px; }
}

/* Wish list and compare beside Add to Cart, in one row. A card too narrow for that (two cards
   side by side on a phone) keeps them on the picture, so Add to Cart always has room. */
:root[data-gk-wish="beside"] .product-thumb { container-type: inline-size; }
@container (min-width: 230px) {
  :root[data-gk-wish="beside"] .product-thumb .button-group { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 8px; padding: 6px 16px 16px; }
  :root[data-gk-wish="beside"] .product-thumb .button-group button:first-child { padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root[data-gk-wish="beside"] .product-thumb .button-group button + button,
  :root[data-gk-wish="beside"] .product-thumb .button-group button + button + button { position: static; width: 44px; height: 44px; border: 1px solid var(--gk-line-strong) !important; border-radius: var(--gk-r-btn); background: var(--gk-surface); box-shadow: none; }
}

/* Related products under the product (gk_theme.php related(), D1444): a row to swipe on phones
   with the next card peeking in, three across from tablets up, as Best Immune's shop has it.
   Add to Cart only: the small cards leave out the wish list and compare. */
#content .gk-related { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 14px; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 4px 4px 16px; -webkit-overflow-scrolling: touch; }
#content .gk-related::before, #content .gk-related::after, #content .gk-related > .clearfix { content: none; display: none; }
#content .gk-related > [class*="col-"] { float: none; width: auto; min-width: 0; padding: 0; scroll-snap-align: start; }
#content .gk-related .product-thumb { height: 100%; margin: 0; }
#content .gk-related .button-group button + button { display: none; }
#content .gk-related .button-group { display: flex; grid-template-columns: none; }
#content .gk-related .button-group button:first-child { flex: 1 1 auto; width: 100%; }
@media (min-width: 768px) { #content .gk-related { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }

/* Small phones (iPhone SE, 320 wide), D1459: in the bar the price makes way so Add to Cart keeps
   its words on one row; on the page the quantity takes its own row above a full-width Add to Cart. */
/* Checkout, last step, on phones: the order fits the screen, so the total is in plain view without
   swiping sideways (D1510). Product and "x quantity" on the left, line total on the right, then each
   total as a label and an amount. */
@media (max-width: 767px) {
  #collapse-checkout-confirm .table-responsive { border: 0; overflow: visible; }
  #collapse-checkout-confirm .table-responsive > .table { border: 0; margin-bottom: 16px; }
  #collapse-checkout-confirm .table-responsive > .table > thead { display: none; }
  #collapse-checkout-confirm .table-responsive > .table > tbody,
  #collapse-checkout-confirm .table-responsive > .table > tfoot { display: block; }
  #collapse-checkout-confirm .table-responsive > .table > tbody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gk-line);
  }
  #collapse-checkout-confirm .table-responsive > .table > tbody > tr > td { display: block; border: 0; padding: 0; white-space: normal; text-align: left; }
  #collapse-checkout-confirm .table-responsive > .table > tbody > tr > td:nth-child(2),
  #collapse-checkout-confirm .table-responsive > .table > tbody > tr > td:nth-child(4) { display: none; }
  #collapse-checkout-confirm .table-responsive > .table > tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 1; }
  #collapse-checkout-confirm .table-responsive > .table > tbody > tr > td:nth-child(3) { grid-column: 1; grid-row: 2; font-size: 14px; }
  #collapse-checkout-confirm .table-responsive > .table > tbody > tr > td:nth-child(3)::before { content: "\00D7  "; }
  #collapse-checkout-confirm .table-responsive > .table > tbody > tr > td:nth-child(5) { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-weight: 600; }
  #collapse-checkout-confirm .table-responsive > .table > tfoot > tr { display: flex; justify-content: space-between; gap: 12px; }
  #collapse-checkout-confirm .table-responsive > .table > tfoot > tr > td { border: 0; padding: 6px 0; white-space: normal; }
  #collapse-checkout-confirm .table-responsive > .table > tfoot > tr > td:first-child { text-align: left; }
  #collapse-checkout-confirm .table-responsive > .table > tfoot > tr:last-child { border-top: 1px solid var(--gk-line); margin-top: 4px; }
  #collapse-checkout-confirm .table-responsive > .table > tfoot > tr:last-child > td { font-size: 17px; padding-top: 10px; }
}

@media (max-width: 374px) {
  .gk-stick:has(.gk-qty) { gap: 8px; }
  .gk-stick:has(.gk-qty) .gk-stick-p { display: none; }
  .gk-stick:has(.gk-qty) .btn { padding: 0 12px; font-size: 15px; }
  #product .form-group:has(#input-quantity) { grid-template-columns: minmax(0, 1fr); }
  #product .form-group:has(#input-quantity) .gk-qty { width: auto; justify-content: space-between; }
  #product .form-group:has(#input-quantity) .gk-qty .form-control { flex: 1 1 auto; }
}

/* The top price box follows the quantity, like the phone bar: the total, and the price each (D1680). */
/* The price each on the same line as the price, smaller and muted; it moves under the price when
   the two don't fit side by side (D1691). */
.gk-price-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.gk-price-each { display: block; margin: 0 0 4px; font-size: 15px; font-weight: 500; color: var(--gk-mute); white-space: nowrap; }
.gk-price-each:empty { display: none; }