/* fonts-bold.css */
/* 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 */
/* Bold: Gabarito headings, Hanken Grotesk text (SIL Open Font License), served by the shop itself. */
@font-face{font-family:'Gabarito';font-style:normal;font-weight:400 900;font-display:swap;src:url("/catalog/view/javascript/gk_theme/fonts/gabarito-latin-ext-var.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:400 900;font-display:swap;src:url("/catalog/view/javascript/gk_theme/fonts/gabarito-latin-var.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url("/catalog/view/javascript/gk_theme/fonts/hanken-grotesk-latin-ext-var.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url("/catalog/view/javascript/gk_theme/fonts/hanken-grotesk-latin-var.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Gabarito is drawn for heavier headings, as Best Immune's shop sets them. */
:root{--gk-head-weight:700}
/* The price in the heading face too, as on Best Immune live (D1680). */
:root{--gk-price-font:var(--gk-display)}

/* icons.css */
/* 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 */
/* Built by theme/tools/build-icons.py from icons/*.svg. */
.gk-theme .fa-angle-down:before,.gk-theme .fa-angle-left:before,.gk-theme .fa-angle-right:before,.gk-theme .fa-angle-up:before,.gk-theme .fa-bars:before,.gk-theme .fa-calendar:before,.gk-theme .fa-caret-down:before,.gk-theme .fa-check:before,.gk-theme .fa-check-circle:before,.gk-theme .fa-chevron-left:before,.gk-theme .fa-chevron-right:before,.gk-theme .fa-credit-card:before,.gk-theme .fa-envelope:before,.gk-theme .fa-exchange:before,.gk-theme .fa-exclamation-circle:before,.gk-theme .fa-heart:before,.gk-theme .fa-home:before,.gk-theme .fa-info-circle:before,.gk-theme .fa-lock:before,.gk-theme .fa-map-marker:before,.gk-theme .fa-minus:before,.gk-theme .fa-pencil:before,.gk-theme .fa-phone:before,.gk-theme .fa-plus:before,.gk-theme .fa-question-circle:before,.gk-theme .fa-refresh:before,.gk-theme .fa-repeat:before,.gk-theme .fa-search:before,.gk-theme .fa-share:before,.gk-theme .fa-shopping-cart:before,.gk-theme .fa-sign-in:before,.gk-theme .fa-sign-out:before,.gk-theme .fa-star:before,.gk-theme .fa-star-o:before,.gk-theme .fa-th:before,.gk-theme .fa-th-list:before,.gk-theme .fa-times:before,.gk-theme .fa-times-circle:before,.gk-theme .fa-trash:before,.gk-theme .fa-truck:before,.gk-theme .fa-user:before{content:"";display:inline-block;width:1em;height:1em;vertical-align:-.14em;background-color:currentColor;-webkit-mask-image:var(--gk-i);mask-image:var(--gk-i);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.gk-theme .fa.fa-angle-down,.gk-theme .fa.fa-angle-left,.gk-theme .fa.fa-angle-right,.gk-theme .fa.fa-angle-up,.gk-theme .fa.fa-bars,.gk-theme .fa.fa-calendar,.gk-theme .fa.fa-caret-down,.gk-theme .fa.fa-check,.gk-theme .fa.fa-check-circle,.gk-theme .fa.fa-chevron-left,.gk-theme .fa.fa-chevron-right,.gk-theme .fa.fa-credit-card,.gk-theme .fa.fa-envelope,.gk-theme .fa.fa-exchange,.gk-theme .fa.fa-exclamation-circle,.gk-theme .fa.fa-heart,.gk-theme .fa.fa-home,.gk-theme .fa.fa-info-circle,.gk-theme .fa.fa-lock,.gk-theme .fa.fa-map-marker,.gk-theme .fa.fa-minus,.gk-theme .fa.fa-pencil,.gk-theme .fa.fa-phone,.gk-theme .fa.fa-plus,.gk-theme .fa.fa-question-circle,.gk-theme .fa.fa-refresh,.gk-theme .fa.fa-repeat,.gk-theme .fa.fa-search,.gk-theme .fa.fa-share,.gk-theme .fa.fa-shopping-cart,.gk-theme .fa.fa-sign-in,.gk-theme .fa.fa-sign-out,.gk-theme .fa.fa-star,.gk-theme .fa.fa-star-o,.gk-theme .fa.fa-th,.gk-theme .fa.fa-th-list,.gk-theme .fa.fa-times,.gk-theme .fa.fa-times-circle,.gk-theme .fa.fa-trash,.gk-theme .fa.fa-truck,.gk-theme .fa.fa-user,.gk-theme .fa.fa-stack{font-family:inherit}
.gk-theme .fa-angle-down:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.25 9.5L11.35 14.85C11.7 15.22 12.3 15.22 12.65 14.85L17.75 9.5'/%3E%3C/svg%3E")}
.gk-theme .fa-angle-left:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.25L9.15 11.35C8.78 11.7 8.78 12.3 9.15 12.65L14.5 17.75'/%3E%3C/svg%3E")}
.gk-theme .fa-angle-right:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.25L14.85 11.35C15.22 11.7 15.22 12.3 14.85 12.65L9.5 17.75'/%3E%3C/svg%3E")}
.gk-theme .fa-angle-up:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.25 14.5L11.35 9.15C11.7 8.78 12.3 8.78 12.65 9.15L17.75 14.5'/%3E%3C/svg%3E")}
.gk-theme .fa-bars:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.75h16M4 12h16M4 17.25h16'/%3E%3C/svg%3E")}
.gk-theme .fa-calendar:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.25' width='17' height='15.25' rx='2.75'/%3E%3Cline x1='8' y1='3.25' x2='8' y2='6.75'/%3E%3Cline x1='16' y1='3.25' x2='16' y2='6.75'/%3E%3Cline x1='3.5' y1='9.75' x2='20.5' y2='9.75'/%3E%3Cline x1='8.25' y1='13.75' x2='9.75' y2='13.75'/%3E%3Cline x1='14.25' y1='13.75' x2='15.75' y2='13.75'/%3E%3Cline x1='8.25' y1='16.75' x2='9.75' y2='16.75'/%3E%3Cline x1='14.25' y1='16.75' x2='15.75' y2='16.75'/%3E%3C/svg%3E")}
.gk-theme .fa-caret-down:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.25 12 15.25 18 9.25'/%3E%3C/svg%3E")}
.gk-theme .fa-check:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.75 12.75 9.5 17.5l9.75-10.5'/%3E%3C/svg%3E")}
.gk-theme .fa-check-circle:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.35 12.25L10.85 14.75L15.85 9.5'/%3E%3C/svg%3E")}
.gk-theme .fa-chevron-left:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.75 6 8.75 12l6 6'/%3E%3C/svg%3E")}
.gk-theme .fa-chevron-right:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.25 6 15.25 12l-6 6'/%3E%3C/svg%3E")}
.gk-theme .fa-credit-card:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.75' y='5' width='18.5' height='14' rx='2.75'/%3E%3Cline x1='2.75' y1='9.5' x2='21.25' y2='9.5'/%3E%3Cline x1='6.5' y1='14.5' x2='10.5' y2='14.5'/%3E%3C/svg%3E")}
.gk-theme .fa-envelope:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.25' width='18' height='13.5' rx='2.75'/%3E%3Cpath d='M3.75 6.75L10.85 12.1C11.53 12.61 12.47 12.61 13.15 12.1L20.25 6.75'/%3E%3C/svg%3E")}
.gk-theme .fa-exchange:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.25h15.5m0 0-3.5-3.5m3.5 3.5-3.5 3.5M20 15.75H4.5m0 0 3.5-3.5m-3.5 3.5 3.5 3.5'/%3E%3C/svg%3E")}
.gk-theme .fa-exclamation-circle:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='7.5' x2='12' y2='12.75'/%3E%3Cline x1='12' y1='16.25' x2='12.01' y2='16.25'/%3E%3C/svg%3E")}
.gk-theme .fa-heart:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.25s-7.25-4.35-8.9-9.15C1.95 7.75 3.7 4.25 7.25 4.25c2.05 0 3.65 1.1 4.75 2.65 1.1-1.55 2.7-2.65 4.75-2.65 3.55 0 5.3 3.5 4.15 6.85-1.65 4.8-8.9 9.15-8.9 9.15Z'/%3E%3C/svg%3E")}
.gk-theme .fa-home:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.25 10.5 12 3.5l8.75 7M5.25 9v10.25a1.25 1.25 0 0 0 1.25 1.25h11a1.25 1.25 0 0 0 1.25-1.25V9M9.75 20.5v-5.75a1 1 0 0 1 1-1h2.5a1 1 0 0 1 1 1v5.75'/%3E%3C/svg%3E")}
.gk-theme .fa-info-circle:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M11.25 11.25H12V16.25'/%3E%3Cline x1='10.75' y1='16.25' x2='13.25' y2='16.25'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E")}
.gk-theme .fa-lock:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10.5V7.75a4 4 0 1 1 8 0v2.75M6.25 10.5h11.5a1.5 1.5 0 0 1 1.5 1.5v6.75a1.5 1.5 0 0 1-1.5 1.5H6.25a1.5 1.5 0 0 1-1.5-1.5V12a1.5 1.5 0 0 1 1.5-1.5Zm5.75 3.75v2.5'/%3E%3C/svg%3E")}
.gk-theme .fa-map-marker:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5C12 20.5 18.25 15.1 18.25 9.75C18.25 6.3 15.45 3.5 12 3.5C8.55 3.5 5.75 6.3 5.75 9.75C5.75 15.1 12 20.5 12 20.5Z'/%3E%3Ccircle cx='12' cy='9.75' r='2.5'/%3E%3C/svg%3E")}
.gk-theme .fa-minus:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5.25' y1='12' x2='18.75' y2='12'/%3E%3C/svg%3E")}
.gk-theme .fa-pencil:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.85 4.35C15.63 3.57 16.9 3.57 17.68 4.35L19.65 6.32C20.43 7.1 20.43 8.37 19.65 9.15L9.25 19.55L4.25 20.25L4.95 15.25L14.85 4.35Z'/%3E%3Cline x1='13.25' y1='6.25' x2='17.75' y2='10.75'/%3E%3Cline x1='14' y1='20.25' x2='20.25' y2='20.25'/%3E%3C/svg%3E")}
.gk-theme .fa-phone:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.75 4.5h3.1a1.25 1.25 0 0 1 1.2.9l.85 3.1a1.25 1.25 0 0 1-.42 1.3l-1.83 1.47a13.5 13.5 0 0 0 5.08 5.08l1.47-1.83a1.25 1.25 0 0 1 1.3-.42l3.1.85a1.25 1.25 0 0 1 .9 1.2v3.1a1.75 1.75 0 0 1-1.9 1.74A16.5 16.5 0 0 1 3.01 6.4 1.75 1.75 0 0 1 4.75 4.5Z'/%3E%3C/svg%3E")}
.gk-theme .fa-plus:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5.25' x2='12' y2='18.75'/%3E%3Cline x1='5.25' y1='12' x2='18.75' y2='12'/%3E%3C/svg%3E")}
.gk-theme .fa-question-circle:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.65 9.35C9.95 7.95 11.2 7.25 12.45 7.5C13.7 7.75 14.5 8.9 14.2 10.1C13.92 11.2 12 11.65 12 13.15'/%3E%3Cline x1='12' y1='16.25' x2='12.01' y2='16.25'/%3E%3C/svg%3E")}
.gk-theme .fa-refresh:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.75 5.25v4.5h-4.5M4.25 18.75v-4.5h4.5M5.1 9.25a7.25 7.25 0 0 1 12.4-2.3l2.25 2.8M18.9 14.75a7.25 7.25 0 0 1-12.4 2.3l-2.25-2.8'/%3E%3C/svg%3E")}
.gk-theme .fa-repeat:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 4.25 20.25 7l-2.75 2.75M3.75 11.5V9.25A2.25 2.25 0 0 1 6 7h14.25M6.5 19.75 3.75 17 6.5 14.25M20.25 12.5v2.25A2.25 2.25 0 0 1 18 17H3.75'/%3E%3C/svg%3E")}
.gk-theme .fa-search:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.25 10.5a6.75 6.75 0 1 1-13.5 0 6.75 6.75 0 0 1 13.5 0Zm-1.85 5.15 4.85 4.85'/%3E%3C/svg%3E")}
.gk-theme .fa-share:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.25 20.25 11l-5.75 5.75M20 11H10.5a6.75 6.75 0 0 0-6.75 6.75v1'/%3E%3C/svg%3E")}
.gk-theme .fa-shopping-cart:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.75h2.35a1 1 0 0 1 .97.76l.48 1.99M6.3 6.5h13.45a1 1 0 0 1 .97 1.24l-1.55 6.2a1.75 1.75 0 0 1-1.7 1.31H8.42a1.75 1.75 0 0 1-1.7-1.33L5.3 6.5Zm2.95 12.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm9.5 0a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z'/%3E%3C/svg%3E")}
.gk-theme .fa-sign-in:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.75 4.25H17.5C18.88 4.25 20 5.37 20 6.75V17.25C20 18.63 18.88 19.75 17.5 19.75H13.75'/%3E%3Cline x1='4' y1='12' x2='14.5' y2='12'/%3E%3Cpolyline points='10.75 8.25 14.5 12 10.75 15.75'/%3E%3C/svg%3E")}
.gk-theme .fa-sign-out:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.25 4.25H6.5C5.12 4.25 4 5.37 4 6.75V17.25C4 18.63 5.12 19.75 6.5 19.75H10.25'/%3E%3Cline x1='9.5' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='16.25 8.25 20 12 16.25 15.75'/%3E%3C/svg%3E")}
.gk-theme .fa-star:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.55 5.17 5.7.83-4.12 4.02.97 5.68L12 16.52 6.9 19.2l.97-5.68-4.12-4.02 5.7-.83L12 3.5Z'/%3E%3C/svg%3E")}
.gk-theme .fa-star-o:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.75C12.45 2.75 12.82 3.05 13.02 3.48L14.88 7.45C15.04 7.79 15.36 8.02 15.73 8.08L20.1 8.68C20.92 8.79 21.25 9.8 20.64 10.37L17.44 13.38C17.17 13.63 17.05 14.01 17.12 14.38L17.92 18.7C18.07 19.51 17.21 20.14 16.49 19.74L12.55 17.58C12.21 17.39 11.79 17.39 11.45 17.58L7.51 19.74C6.79 20.14 5.93 19.51 6.08 18.7L6.88 14.38C6.95 14.01 6.83 13.63 6.56 13.38L3.36 10.37C2.75 9.8 3.08 8.79 3.9 8.68L8.27 8.08C8.64 8.02 8.96 7.79 9.12 7.45L10.98 3.48C11.18 3.05 11.55 2.75 12 2.75Z'/%3E%3C/svg%3E")}
.gk-theme .fa-th:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.25 4.25h6.25v6.25H4.25V4.25Zm9.25 0h6.25v6.25H13.5V4.25ZM4.25 13.5h6.25v6.25H4.25V13.5Zm9.25 0h6.25v6.25H13.5V13.5Z'/%3E%3C/svg%3E")}
.gk-theme .fa-th-list:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.75h1.5m3.5 0h10M4.5 12h1.5m3.5 0h10M4.5 17.25h1.5m3.5 0h10'/%3E%3C/svg%3E")}
.gk-theme .fa-times:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5'/%3E%3C/svg%3E")}
.gk-theme .fa-times-circle:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='9.25' y1='9.25' x2='14.75' y2='14.75'/%3E%3Cline x1='14.75' y1='9.25' x2='9.25' y2='14.75'/%3E%3C/svg%3E")}
.gk-theme .fa-trash:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4.25' y1='6.75' x2='19.75' y2='6.75'/%3E%3Cpath d='M9.25 6.75V5C9.25 4.17 9.92 3.5 10.75 3.5H13.25C14.08 3.5 14.75 4.17 14.75 5V6.75'/%3E%3Cpath d='M6.25 6.75L7.1 18.25C7.19 19.52 8.25 20.5 9.52 20.5H14.48C15.75 20.5 16.81 19.52 16.9 18.25L17.75 6.75'/%3E%3Cline x1='10.25' y1='10.75' x2='10.5' y2='16.5'/%3E%3Cline x1='13.75' y1='10.75' x2='13.5' y2='16.5'/%3E%3C/svg%3E")}
.gk-theme .fa-truck:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.25 16.75H3.5A1.25 1.25 0 0 1 2.25 15.5V6.5A1.25 1.25 0 0 1 3.5 5.25h9.5a1.25 1.25 0 0 1 1.25 1.25v10.25H9.25M14.25 8.75h3.4a1.25 1.25 0 0 1 1.02.53l2.58 3.65c.16.23.25.5.25.79v1.78a1.25 1.25 0 0 1-1.25 1.25h-1M15.25 16.75h-1M7.25 18.75a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM17.25 18.75a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E")}
.gk-theme .fa-user:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.75 7.5a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.5 20.25a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E")}
.gk-theme #top-links a[href*="checkout/checkout"] .fa-share:before,.gk-theme #cart a[href*="checkout/checkout"] .fa-share:before{--gk-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.75' y='5' width='18.5' height='14' rx='2.75'/%3E%3Cline x1='2.75' y1='9.5' x2='21.25' y2='9.5'/%3E%3Cline x1='6.5' y1='14.5' x2='10.5' y2='14.5'/%3E%3C/svg%3E")}

/* theme.css */
/* 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; }
/* Until it has loaded: its own box in a soft tint, never an empty gap (1.11.74). */
#tab-description img:not(.gk-in) { background-color: var(--gk-tint); }
#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 .gk-facts { order: 3; margin: 16px 15px 0; } /* Key facts: after the price, before the tabs (1.11.102) */
  #product-product #content > .row:first-of-type .tab-content { order: 4; padding: 0 15px; }
  /* 1.11.100: the price and Add to Cart come first; wish list and compare below them */
  #product-product #content > .row:first-of-type > .col-sm-4, #product-product #content > .row:first-of-type > .col-sm-6:last-child { display: flex; flex-direction: column; }
  #product-product #content > .row:first-of-type > .col-sm-4 > .btn-group, #product-product #content > .row:first-of-type > .col-sm-6:last-child > .btn-group { order: 1; align-self: flex-start; margin: 0 0 16px; }
  /* The extra photos: one row that swipes sideways, kept to itself */
  #product-product ul.thumbnails > li.gk-thumbrow { grid-column: 1 / -1; margin: 0 !important; }
  #product-product li.gk-thumbrow > ul { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; list-style: none; margin: 0; padding: 0 0 4px; }
  #product-product li.gk-thumbrow > ul::-webkit-scrollbar { display: none; }
  #product-product li.gk-thumbrow > ul > li { flex: 0 0 76px; scroll-snap-align: start; margin: 0 !important; }

  /* 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); }

/* "I have read and agree" on phones (Register, Returns, the checkout steps): OpenCart puts the
   sentence, the tick box and the button in one right-floated line, so at phone width the box
   wrapped alone under the sentence. Here the box sits before the sentence with a 44px tap area
   (a 22px box inside a transparent border), and the button gets its own full-width row. */
@media (max-width: 767px) {
  .buttons .pull-right:has(> input[name="agree"]) { float: none !important; display: block; position: relative; padding-left: 34px; text-align: left; line-height: 22px; }
  .buttons .pull-right:has(> input[name="agree"]) > input[name="agree"] {
    -webkit-appearance: none; appearance: none; position: absolute; left: -11px; top: -11px; box-sizing: border-box;
    width: 44px; height: 44px; margin: 0; padding: 0; border: 11px solid transparent; border-radius: 16px; cursor: pointer;
    background: var(--gk-field, #fff) no-repeat center / 16px 16px; background-clip: padding-box; background-origin: padding-box;
    box-shadow: inset 0 0 0 2px var(--gk-line-strong);
  }
  .buttons .pull-right:has(> input[name="agree"]) > input[name="agree"]:checked {
    background-color: var(--gk-deep); box-shadow: inset 0 0 0 2px var(--gk-deep);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .buttons .pull-right:has(> input[name="agree"]) > input[name="agree"]:focus-visible { outline: 2px solid var(--gk-deep); outline-offset: -9px; }
  .buttons .pull-right:has(> input[name="agree"]) > .btn { display: block; width: calc(100% + 34px); margin: 14px 0 0 -34px; padding: 11px 18px; }
  /* Returns also has Back on the left: it goes under the main button, full width too. */
  .buttons:has(> .pull-right > input[name="agree"]) { display: flex; flex-direction: column; }
  .buttons:has(> .pull-right > input[name="agree"]) > .pull-left { float: none !important; order: 2; margin-top: 10px; }
  .buttons:has(> .pull-right > input[name="agree"]) > .pull-left > .btn { display: block; width: 100%; padding: 11px 18px; }
}
.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); }
/* Fields the browser filled in (iPhone AutoFill, saved addresses, passwords) keep the shop's own field
   and text colours, light and dark: Safari's pale yellow under light text was unreadable (D2535). The
   inset shadow paints over the browser's colour; the long transition stops Chrome fading it back.
   :autofill gets its own copy because a browser that doesn't know it would drop the whole rule. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: var(--gk-ink) !important; caret-color: var(--gk-ink); -webkit-box-shadow: inset 0 0 0 100vmax var(--gk-field, #fff) !important; box-shadow: inset 0 0 0 100vmax var(--gk-field, #fff) !important; transition: background-color 600000s 0s, color 600000s 0s; }
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 100vmax var(--gk-field, #fff), 0 0 0 3px rgba(0, 122, 47, .16) !important; box-shadow: inset 0 0 0 100vmax var(--gk-field, #fff), 0 0 0 3px rgba(0, 122, 47, .16) !important; }
input:autofill, textarea:autofill, select:autofill { -webkit-text-fill-color: var(--gk-ink) !important; caret-color: var(--gk-ink); box-shadow: inset 0 0 0 100vmax var(--gk-field, #fff) !important; transition: background-color 600000s 0s, color 600000s 0s; }
input:autofill:focus, textarea:autofill:focus, select:autofill:focus { box-shadow: inset 0 0 0 100vmax var(--gk-field, #fff), 0 0 0 3px rgba(0, 122, 47, .16) !important; }
.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); }
/* The checkout's first step, passed for a guest (checkout.js, D2539): a plain "Have an account? Sign in"
   link above the steps instead of a whole bar; opened, it is a step like the others. */
#accordion > .panel.gk-signin:not(:has(.panel-collapse.in, .panel-collapse.collapsing)) { background: transparent; border-color: transparent; box-shadow: none; margin-bottom: 4px; }
#accordion > .panel.gk-signin:not(:has(.panel-collapse.in, .panel-collapse.collapsing)) > .panel-heading { padding: 6px 0; background: transparent; border-color: transparent; }
#accordion > .panel.gk-signin .panel-title { font-size: 15px; }
#accordion > .panel.gk-signin .panel-title > a { color: var(--gk-deep); text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-height: 44px; line-height: 44px; margin: -12px 0; }
#accordion > .panel[hidden] { display: none; }
.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; }
/* Bootstrap 3 gives the buttons' holder width 1% (a table trick); in a flex row that squeezed it to
   nothing and the buttons spilled over the next column. Buttons keep their size, the box gives way. */
#content .input-group.btn-block > .input-group-btn { flex: 0 0 auto; width: auto; }
#content .input-group.btn-block > .form-control { flex: 1 1 auto; width: auto; min-width: 48px; }
#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 tablets: prices stay on one line (1.11.38), so the internal model code column
   makes way and product names wrap, keeping quantity, price and total on screen. */
@media (min-width: 768px) and (max-width: 1199px) {
  #cart > .btn { padding-left: 10px; padding-right: 10px; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #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:nth-child(2) { white-space: normal; }
  #checkout-cart .table-responsive > .table > thead > tr > td, #checkout-cart .table-responsive > .table > tbody > tr > td { padding-left: 8px; padding-right: 8px; }
  #checkout-cart .input-group.btn-block { max-width: 190px; }
  #checkout-cart .input-group.btn-block .form-control { min-width: 56px; padding: 4px 8px; text-align: center; }
}

/* 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("/catalog/view/javascript/gk_theme/icons/shopping-cart.svg") center / contain no-repeat; mask: url("/catalog/view/javascript/gk_theme/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 pinch-zoom; }
/* Zoom (1.11.104, D3824): a magnifier over a photo that has more to show; the full-size photo over
   the viewer, under the arrows and the close button, a magnifier to go back. */
body .mfp-image-holder .mfp-figure .mfp-img { cursor: zoom-in; }
body .mfp-image-holder .mfp-figure .mfp-img.gk-flat { cursor: default; }
html.gk-zoomed body .mfp-wrap { touch-action: auto; }
.gk-zoom { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: rgb(6, 23, 28); cursor: zoom-out; -webkit-user-select: none; user-select: none; }
.gk-zoom img { display: block; max-width: none; }
html.gk-zoomed body .mfp-close { z-index: 2; }
@media (hover: none) { .gk-zoom { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; } }
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); }
/* A card picture with no size of its own keeps a square space until it loads, so the row doesn't jump. */
.product-thumb .image img:not([width]) { aspect-ratio: auto 1 / 1; }
.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; }
/* Phones: spread wider with less overlap, so the two outer bottles show more (1.11.111). */
.gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--far { left: 2%; width: 23%; bottom: 12%; transform: rotate(-6deg); }
.gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--left { left: 21%; width: 27%; bottom: 2%; transform: rotate(-2deg); }
.gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--front { left: 52%; width: 27%; bottom: 2%; transform: rotate(2deg); }
.gk-hero-art--tall.gk-hero-art--four .gk-hero-pic--right { left: 75%; right: auto; width: 23%; bottom: 12%; 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; }
  /* Longer labels (German "Sortieren nach:", "Anzeigen:") pushed the picker past the screen edge:
     the label may wrap and the picker (or its drawn button) shrinks to the room left. */
  #content .input-group-sm:has(> #input-sort) > .input-group-addon, #content .input-group-sm:has(> #input-limit) > .input-group-addon { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: left; }
  #product-category #input-sort, #product-category #input-limit, #content .input-group-sm:has(> #input-sort) > .gk-sel, #content .input-group-sm:has(> #input-limit) > .gk-sel { flex: 1 1 0; width: auto; min-width: 0; }
}
/* 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: 15px; 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; }
footer .gk-seller { max-width: 64ch; text-wrap: pretty; margin: 4px 0 0; padding: 0 !important; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .8); overflow-wrap: anywhere; }
footer .gk-seller strong { font-weight: 600; color: rgba(255, 255, 255, .9); }
footer .gk-seller a { color: rgba(255, 255, 255, .85); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
footer .gk-seller a:hover, footer .gk-seller 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); }

/* Wider screens: shop details on the left, Secure payment on the right, side by side even when
   the seller line (Card Payments' companies) is long; the details wrap instead (Best Immune). */
@media (min-width: 768px) {
  .gk-foot-end { flex-wrap: nowrap; align-items: center; gap: 32px; }
  .gk-foot-legal { flex: 1 1 0; min-width: 0; }
  .gk-foot-end .gk-pay { flex: 0 0 auto; margin-left: auto; }
}

/* Phones: the copyright and shop details first, then the ways to pay, 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; 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,
/* The currency and language buttons by their forms too, as nav.css styles them (two ids beat the band rule, so their
   arrows took the light page's text colour on a dark band: Best Immune, 6 Nov 2026). */
:root[data-gk-top="band"] #top #form-currency .dropdown-toggle, :root[data-gk-top="band"] #top #form-language .dropdown-toggle, :root[data-gk-top="band"] #top #form-currency .dropdown-toggle .fa, :root[data-gk-top="band"] #top #form-language .dropdown-toggle .fa,
: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 #form-currency .open > .dropdown-toggle, :root[data-gk-top="band"] #top #form-language .open > .dropdown-toggle,
:root[data-gk-top="band"] #top #form-currency .dropdown-toggle:focus-visible, :root[data-gk-top="band"] #top #form-language .dropdown-toggle:focus-visible,
: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 #form-currency .dropdown-toggle:hover, :root[data-gk-top="band"] #top #form-language .dropdown-toggle: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; }
/* The picture fills the card up to 400px wide (1.11.91: on a one-column phone a 228px picture sat in a
   358px card with wide white sides); its shape comes from its width and height. */
:root[data-gk-pictures="fit"] .product-thumb .image img { width: 100%; max-width: 400px; 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. The two
   small buttons line up with the top of a two-line Add to Cart. */
: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; align-items: start; }
  /* A label too long for one line (In den Warenkorb, Aggiungi al carrello) takes two, never cut short. */
  :root[data-gk-wish="beside"] .product-thumb .button-group button:first-child { height: auto; min-height: 44px; padding: 4px 8px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; overflow-wrap: break-word; }
  :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; }

/* Key facts above the product tabs (1.11.102) */
.gk-theme .gk-facts{margin:0 0 20px;padding:14px 16px;border:1px solid var(--gk-tint-line);border-radius:var(--gk-r-card);background:var(--gk-tint)}
.gk-theme .gk-facts-h{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--gk-ink)}
.gk-theme .gk-facts ul{margin:0;padding:0;list-style:none}
.gk-theme .gk-facts li{padding:4px 0;color:var(--gk-ink);line-height:1.45}
.gk-theme .gk-facts .gk-facts-lasts{font-weight:600}
.gk-theme .gk-facts-name{color:var(--gk-ink-soft)}
.gk-theme .gk-facts-name:after{content:":"}

/* Category intro on phones: two lines, then Read more (1.11.102) */
@media (max-width: 767px) {
  .gk-cat-intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gk-cat-intro.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .gk-cat-intro p { margin: 0; }
  .gk-theme .gk-cat-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-weight: 600; color: var(--gk-deep); }
}

/* Short banner on phones (1.11.102, a switch, on by default): the picture first at 200px, then the
   title, the tagline and the main button, so the first products show on the first screen. The
   ticked points, the second line and the second link show from tablets up. */
@media (max-width: 767px) {
  .gk-hero--short .gk-hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 16px 18px; }
  .gk-hero--short .gk-hero-art { order: -1; height: 200px; min-height: 0; margin: 0 0 14px; }
  .gk-hero--short .gk-hero-art--tall { height: 200px; }
  /* Four bottles are sized by the picture's width, so their box grows with it: a fixed 200px cut
     the caps off on wider phones (Graham's iPhone, 1.11.111). Capped at 400px wide. */
  .gk-hero--short .gk-hero-art--tall.gk-hero-art--four { height: auto; aspect-ratio: 10 / 7; width: 100%; max-width: 400px; margin: 0 auto 14px; }
  .gk-hero--short .gk-hero-art--single { height: 200px; overflow: hidden; border-radius: var(--gk-r-card); }
  .gk-hero--short .gk-hero-pic--single { width: 100%; height: 200px; max-width: none; object-fit: cover; box-shadow: none; }
  #content .gk-hero--short .gk-hero-title { font-size: clamp(28px, 7.4vw, 34px); margin: 0 0 8px; }
  .gk-hero--short .gk-hero-points, .gk-hero--short .gk-hero-tag span, .gk-hero--short .gk-hero-more { display: none; }
  .gk-hero--short .gk-hero-tag { margin: 0; }
  .gk-hero--short .gk-hero-tag strong { font-size: 18px; }
  .gk-hero--short .gk-hero-cta { margin-top: 14px; }
  .gk-hero--short .gk-hero-cta .btn { width: 100%; justify-content: center; }
}

/* Two products in a row on phones (1.11.102, Products on phones: Two in a row, Fresh's own): a square
   picture, the name in up to three lines, the price, and Add to Cart across the card; wish list and
   compare stay round 44px buttons on the picture. List view and the swiping related row keep theirs. */
@media (max-width: 767px) {
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related):has(> .product-layout:not(.product-list)) { margin-left: -6px; margin-right: -6px; }
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) { width: 50%; float: none; padding-left: 6px; padding-right: 6px; }
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) .product-thumb { width: 100%; margin-bottom: 12px; }
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) .image { padding: 8px 8px 2px !important; margin: 0 !important; }
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) .image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
  :root[data-gk-pictures="fit"]:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) .image img { object-fit: contain; }
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) .caption { padding: 4px 10px 4px; }
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) :is(.caption h4, .caption .gk-ct) { font-size: 15px; line-height: 1.3; margin: 4px 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) .caption p:not(.price), :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) .rating { display: none; }
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) .price { font-size: 17px; margin-bottom: 4px; }
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) .button-group { display: block; padding: 0 8px 8px; }
  :root:not([data-gk-phone="one"]) #content .row:not(.gk-related) > .product-layout:not(.product-list) .button-group button:first-child { width: 100%; height: auto; min-height: 44px; padding: 6px 8px; font-size: 14px; }
}

/* Basket below the search box: while it is empty, phones show it as a 44px icon beside the logo
   (1.11.102); its words stay for screen readers. */
@media (max-width: 767px) {
  :root[data-gk-basket="below"][data-gk-cart-empty] header .col-sm-4 { grid-column: 1; }
  :root[data-gk-basket="below"][data-gk-cart-empty] header .col-sm-3 { grid-column: 2; grid-row: 1; }
  :root[data-gk-basket="below"][data-gk-cart-empty] #cart, :root[data-gk-basket="below"][data-gk-cart-empty] #cart > .btn { width: 44px; min-width: 44px; }
  :root[data-gk-basket="below"][data-gk-cart-empty] #cart > .btn { min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  :root[data-gk-basket="below"][data-gk-cart-empty] #cart-total { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* nav.css */
/* 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: top bar, header and category menu. Light utility strip, white header row, a light
   menu bar with drop-down panels; on phones every control is at least 44 px. Only colour
   variables, so every colour scheme and dark mode follow. */

/* ==========================================================================
   1. TOP BAR (#top): Light, airy utility strip with WCAG AA contrast
   ========================================================================== */
#top {
  background: var(--gk-page);
  border-bottom: 1px solid var(--gk-line);
  padding: 4px 0;
  margin: 0;
  font-family: var(--gk-text);
  font-size: 13.5px;
  color: var(--gk-ink-soft);
}
#top > .container {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}
#top > .container::before,
#top > .container::after { display: none; }
#top .pull-left,
#top .pull-right { float: none !important; }
#top form { margin: 0; }
#top .btn-group { display: inline-flex; position: relative; }

/* Unified trigger buttons: Currency, Language (OpenCart's, Fresh's or the shop's own), Phone,
   Account, Wish List: one size and weight for all of them. */
#top .pull-left .dropdown-toggle,
#top #form-currency .dropdown-toggle,
#top #form-language .dropdown-toggle,
#top #top-links > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--gk-ink-soft) !important;
  font-family: var(--gk-text);
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none !important;
  text-shadow: none;
  box-shadow: none;
  transition: background-color 0.15s var(--gk-ease), color 0.15s var(--gk-ease), border-color 0.15s var(--gk-ease);
}
#top .pull-left .dropdown-toggle span,
#top #top-links > ul > li > a > span { font-size: 14px !important; font-weight: 500 !important; }
/* The currency sign and language code: the same small tag on both. */
#top .pull-left .dropdown-toggle strong,
#top #form-currency .dropdown-toggle strong,
#top #form-language .dropdown-toggle strong {
  display: inline-block;
  min-width: 24px;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--gk-tint-deep);
  color: var(--gk-ink);
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}
#top .pull-left .dropdown-toggle:focus-visible,
#top #form-currency .dropdown-toggle:focus-visible,
#top #form-language .dropdown-toggle:focus-visible,
#top #top-links > ul > li > a:focus-visible,
#top .open > .dropdown-toggle,
#top #top-links .open > a {
  background: var(--gk-tint) !important;
  border-color: var(--gk-tint-line);
  color: var(--gk-deep) !important;
  box-shadow: none;
}
/* Hover colours only where there is a real pointer: on an iPhone a hover style turns the first
   tap into a hover, so the menus needed two taps. */
@media (hover: hover) {
  #top .pull-left .dropdown-toggle:hover,
  #top #form-currency .dropdown-toggle:hover,
  #top #form-language .dropdown-toggle:hover,
  #top #top-links > ul > li > a:hover {
    background: var(--gk-tint) !important;
    border-color: var(--gk-tint-line);
    color: var(--gk-deep) !important;
    box-shadow: none;
  }
}

/* Right-side utility links (#top-links) */
#top-links {
  margin-left: auto;
  padding: 0;
}
#top-links > ul.list-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#top-links > ul.list-inline > li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  position: relative;
}
/* Phone item: align bare span beside contact icon link */
#top-links > ul.list-inline > li:first-child {
  gap: 2px;
  color: var(--gk-ink-soft);
  font-size: 13.5px;
  font-weight: 500;
}
#top-links > ul.list-inline > li:first-child > span {
  padding-right: 8px;
  color: var(--gk-ink-soft);
}
/* Hide duplicate Cart & Checkout links in #top (handled by #cart button) */
#top-links li:has(> a[href*="checkout/cart"]),
#top-links li:has(> a[href*="checkout/checkout"]) { display: none; }

/* Language & Currency Flag Replacement (our own 20x15 SVG flags) */
.gk-flags #form-language img {
  width: 20px;
  height: 15px;
  box-sizing: border-box;
  padding-left: 20px;
  border-radius: 2.5px;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 20px;
  background-position: center;
  background-size: 20px 15px;
  background-repeat: no-repeat;
}
.gk-flags #form-language img[src*="en-gb"] { background-image: url("/catalog/view/javascript/gk_theme/flags/gb.svg"); }
.gk-flags #form-language img[src*="de-de"] { background-image: url("/catalog/view/javascript/gk_theme/flags/de.svg"); }
.gk-flags #form-language img[src*="es-es"] { background-image: url("/catalog/view/javascript/gk_theme/flags/es.svg"); }
.gk-flags #form-language img[src*="fr-fr"] { background-image: url("/catalog/view/javascript/gk_theme/flags/fr.svg"); }
.gk-flags #form-language img[src*="it-it"] { background-image: url("/catalog/view/javascript/gk_theme/flags/it.svg"); }
.gk-flags #form-language img[src*="nl-nl"] { background-image: url("/catalog/view/javascript/gk_theme/flags/nl.svg"); }
.gk-flags #form-language img[src*="pl-pl"] { background-image: url("/catalog/view/javascript/gk_theme/flags/pl.svg"); }
.gk-flags #form-language img[src*="pt-br"] { background-image: url("/catalog/view/javascript/gk_theme/flags/br.svg"); }

/* Currency dropdown items with matching 20x15 flags */
.gk-flags #top #form-currency .currency-select::before {
  content: "";
  width: 20px;
  height: 15px;
  flex: 0 0 20px;
  border-radius: 2.5px;
  background-position: center;
  background-size: 20px 15px;
  background-repeat: no-repeat;
}
.gk-flags #top #form-currency .currency-select[name="EUR"]::before { background-image: url("/catalog/view/javascript/gk_theme/flags/eu.svg"); }
.gk-flags #top #form-currency .currency-select[name="PLN"]::before { background-image: url("/catalog/view/javascript/gk_theme/flags/pl.svg"); }
.gk-flags #top #form-currency .currency-select[name="GBP"]::before { background-image: url("/catalog/view/javascript/gk_theme/flags/gb.svg"); }
.gk-flags #top #form-currency .currency-select[name="USD"]::before { background-image: url("/catalog/view/javascript/gk_theme/flags/us.svg"); }

/* Top bar dropdown menus (Currency, Language, My Account) */
#top .dropdown-menu {
  top: calc(100% + 4px);
  min-width: 196px;
  padding: 6px;
  margin: 0;
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-r-card);
  box-shadow: var(--gk-shadow-hover);
}
#top .dropdown-menu li + li { margin-top: 2px; }
#top #form-currency .currency-select,
#top #form-language .language-select,
#top #top-links .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gk-ink) !important;
  font-family: var(--gk-text);
  font-size: 14px !important;
  font-weight: 500;
  text-align: left;
  text-decoration: none !important;
  transition: background-color 0.14s var(--gk-ease), color 0.14s var(--gk-ease);
}
#top #form-currency .currency-select:hover,
#top #form-currency .currency-select:focus-visible,
#top #form-language .language-select:hover,
#top #form-language .language-select:focus-visible,
#top #top-links .dropdown-menu a:hover,
#top #top-links .dropdown-menu a:focus-visible {
  background: var(--gk-tint) !important;
  color: var(--gk-deep) !important;
}

/* ==========================================================================
   2. HEADER ROW (header): Balanced Logo, Search & Basket
   ========================================================================== */
header {
  background: var(--gk-surface);
  padding: 18px 0 14px;
  margin-bottom: 20px;
  border-bottom: 0;
}
/* OpenCart's own thirds, as on Best Immune live: logo, search in the middle, then the basket, with
   the same gap between search and basket as the columns have (D1680). */
header > .container > .row {
  display: grid;
  grid-template-columns: 4fr 5fr 3fr;
  align-items: center;
  gap: 30px;
  margin: 0;
}
header > .container > .row::before,
header > .container > .row::after { display: none; }
header .col-sm-4,
header .col-sm-5,
header .col-sm-3 {
  float: none;
  padding: 0;
  margin: 0;
}
header .col-sm-4,
header .col-sm-5,
header .col-sm-3 { width: auto; min-width: 0; }
header .col-sm-3 #cart,
header .col-sm-3 #cart > .btn { width: 100%; }

/* Logo: crisp at 40px header height */
#logo { margin: 0; }
#logo a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
#logo img {
  max-height: 36px;
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
}

/* Search bar: unified pill with palette-aware focus ring */
#search {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  background: var(--gk-field);
  border: 1px solid var(--gk-line-strong);
  border-radius: var(--gk-r-btn);
  overflow: hidden;
  transition: border-color 0.16s var(--gk-ease), box-shadow 0.16s var(--gk-ease), background-color 0.16s var(--gk-ease);
}
#search:focus-within {
  background: var(--gk-surface);
  border-color: var(--gk-deep);
  box-shadow: 0 0 0 3px var(--gk-tint-deep);
}
#search .input-lg {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 16px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  color: var(--gk-ink);
  font-family: var(--gk-text);
  font-size: 15px;
  box-shadow: none !important;
}
#search .input-lg::placeholder { color: var(--gk-mute); opacity: 1; }
#search .input-group-btn {
  width: auto;
  display: flex;
}
#search .btn-lg {
  width: 48px;
  height: 44px;
  padding: 0;
  border: 0 !important;
  border-left: 1px solid var(--gk-line) !important;
  border-radius: 0 !important;
  background: var(--gk-tint);
  color: var(--gk-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background-color 0.15s var(--gk-ease), color 0.15s var(--gk-ease);
}
#search .btn-lg:hover,
#search .btn-lg:focus-visible {
  background: var(--gk-tint-deep);
  color: var(--gk-deeper);
}
#search .btn-lg:active { background: var(--gk-tint-line); }

/* Header Basket (#cart) */
#cart { position: relative; width: auto; margin-bottom: 0; }
#cart > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--gk-r-btn);
  background: var(--gk-tint);
  border: 1px solid var(--gk-tint-line);
  color: var(--gk-ink);
  font-family: var(--gk-text);
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
  box-shadow: none;
  transition: background-color 0.16s var(--gk-ease), border-color 0.16s var(--gk-ease), color 0.16s var(--gk-ease);
}
#cart > .btn .fa-shopping-cart {
  width: 19px;
  height: 19px;
  color: var(--gk-deep);
}
#cart > .btn:hover,
#cart > .btn:focus-visible,
#cart.open > .btn, #cart.open > .btn:hover {
  background: var(--gk-tint-deep);
  border-color: var(--gk-brand);
  color: var(--gk-ink);
  box-shadow: none;
}
#cart > .btn:active {
  background: var(--gk-tint-line);
  color: var(--gk-ink);
}
#cart .dropdown-menu {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 340px;
  max-width: 400px;
  padding: 16px;
  margin: 0;
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-r-card);
  box-shadow: var(--gk-shadow-hover);
}
#cart .dropdown-menu > li:only-child::before { content: none; }
#cart .dropdown-menu > li:only-child > p.text-center {
  margin: 0;
  padding: 20px 8px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gk-ink-soft);
}
#cart .dropdown-menu > li:only-child > p.text-center::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  background-color: var(--gk-deep);
  -webkit-mask: url("/catalog/view/javascript/gk_theme/icons/shopping-cart.svg") center / contain no-repeat;
  mask: url("/catalog/view/javascript/gk_theme/icons/shopping-cart.svg") center / contain no-repeat;
}

/* ==========================================================================
   3. CATEGORY MENU BAR (#menu): Light, airy desktop bar & phone drawer
   ========================================================================== */
#menu {
  background: var(--gk-surface) !important;
  background-image: none !important;
  border: 1px solid var(--gk-line) !important;
  border-radius: var(--gk-r-btn);
  box-shadow: var(--gk-shadow);
  min-height: 48px;
  margin-bottom: 24px;
  font-family: var(--gk-text);
}
#menu .navbar-collapse {
  padding: 4px 6px;
  border: 0;
  box-shadow: none;
}
#menu .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu .navbar-nav > li {
  float: none;
  position: relative;
  list-style: none;
}
#menu .navbar-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 14px !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--gk-ink) !important;
  font-family: var(--gk-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s var(--gk-ease), color 0.15s var(--gk-ease);
}
/* Automatic chevron on categories with sub-menus */
#menu .navbar-nav > li.dropdown > a::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  opacity: 0.65;
  transition: transform 0.16s var(--gk-ease), opacity 0.16s var(--gk-ease);
  -webkit-mask: url("/catalog/view/javascript/gk_theme/icons/caret-down.svg") center / contain no-repeat;
  mask: url("/catalog/view/javascript/gk_theme/icons/caret-down.svg") center / contain no-repeat;
}
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a:focus-visible,
#menu .navbar-nav > li.open > a,
#menu .navbar-nav > li.dropdown:hover > a {
  background: var(--gk-tint) !important;
  color: var(--gk-deep) !important;
}
#menu .navbar-nav > li.open > a::after,
#menu .navbar-nav > li.dropdown:hover > a::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* Desktop Category Dropdown Panels */
#menu .dropdown-menu {
  top: calc(100% + 4px);
  left: 0;
  min-width: 224px;
  padding: 8px !important;
  margin: 0;
  background: var(--gk-surface) !important;
  border: 1px solid var(--gk-line) !important;
  border-radius: var(--gk-r-card) !important;
  box-shadow: var(--gk-shadow-hover) !important;
}
@media (min-width: 768px) {
  /* Smooth hover/focus-within reveal alongside Bootstrap click toggle */
  #menu .navbar-nav > li.dropdown:hover > .dropdown-menu,
  #menu .navbar-nav > li.dropdown:focus-within > .dropdown-menu,
  #menu .navbar-nav > li.dropdown.open > .dropdown-menu {
    display: block;
  }
  /* Invisible hover bridge so cursor doesn't lose hover crossing the 4px gap */
  #menu .navbar-nav > li.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
  }
}
#menu .dropdown-inner {
  display: flex;
  gap: 8px;
}
#menu .dropdown-inner ul.list-unstyled {
  display: block !important;
  min-width: 196px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu .dropdown-inner ul.list-unstyled + ul.list-unstyled {
  border-left: 1px solid var(--gk-line);
  padding-left: 8px;
}
#menu .dropdown-inner li + li { margin-top: 2px; }
#menu .dropdown-inner a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-width: 0 !important;
  min-height: 38px;
  padding: 8px 12px !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--gk-ink-soft) !important;
  font-family: var(--gk-text);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none !important;
  transition: background-color 0.14s var(--gk-ease), color 0.14s var(--gk-ease);
}
#menu .dropdown-inner a:hover,
#menu .dropdown-inner a:focus-visible {
  background: var(--gk-tint) !important;
  color: var(--gk-deep) !important;
}

/* "Show All <Category>" footer inside dropdown */
#menu .see-all {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  margin-top: 6px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-top: 1px solid var(--gk-line) !important;
  border-radius: 0 0 8px 8px !important;
  background: transparent !important;
  color: var(--gk-deep) !important;
  font-family: var(--gk-text);
  font-size: 13.5px !important;
  font-weight: 600;
  text-decoration: none !important;
}
#menu .see-all::after {
  content: "\2192";
  font-size: 15px;
  line-height: 1;
  transition: transform 0.15s var(--gk-ease);
}
#menu .see-all:hover,
#menu .see-all:focus-visible {
  background: var(--gk-tint) !important;
  color: var(--gk-deeper) !important;
  border-radius: 8px !important;
}
#menu .see-all:hover::after { transform: translateX(3px); }

/* ==========================================================================
   4. MOBILE-FIRST (<768px): 44px Touch Targets & Compact 2-Row Header
   ========================================================================== */
@media (max-width: 767px) {
  /* Top bar: every control is a >=44x44px hit target */
  #top { padding: 2px 0; }
  #top > .container {
    min-height: 44px;
    gap: 2px;
  }
  #top .pull-left .dropdown-toggle,
  #top #form-currency .dropdown-toggle,
  #top #form-language .dropdown-toggle,
  #top #top-links > ul > li > a {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    justify-content: center;
  }
  #top #form-currency .currency-select,
  #top #form-language .language-select,
  #top #top-links .dropdown-menu a {
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Header: Compact 2-row grid (Row 1: Logo + Basket, Row 2: Full-width Search) */
  header { padding: 12px 0 10px; margin-bottom: 14px; border-bottom: 1px solid var(--gk-line); }
  header > .container > .row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    align-items: center;
  }
  header .col-sm-4 { grid-column: 1; grid-row: 1; }
  header .col-sm-3 { grid-column: 2; grid-row: 1; }
  header .col-sm-5 { grid-column: 1 / -1; grid-row: 2; max-width: none; width: 100%; }
  /* The logo fills its 44px row as on Best Immune live, so a square-ish logo isn't lost (D1459 compare). */
  #logo img { max-height: 40px; }
  header .col-sm-4 { min-width: 0; }
  #cart > .btn {
    min-height: 44px;
    padding: 0 13px;
    font-size: 13.5px;
  }
  /* Opens below the basket button (D1444), a little wider than the search box below it, so its corners never show. */
  #cart .dropdown-menu {
    position: absolute;
    left: auto;
    right: -4px;
    top: calc(100% + 6px);
    min-width: 0;
    max-width: none;
    width: calc(100vw - 22px);
    z-index: 1050;
  }

  /* Mobile Category Menu Bar */
  #menu {
    margin-bottom: 16px;
    border-color: var(--gk-line-strong) !important;
  }
  #menu .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 3px 6px 3px 16px;
    margin: 0 !important;
    float: none;
  }
  #menu .navbar-header::before,
  #menu .navbar-header::after { display: none; }
  #menu #category {
    float: none;
    padding: 0;
    margin: 0;
    font-family: var(--gk-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--gk-ink);
    line-height: 1.2;
    text-shadow: none;
  }
  #menu .btn-navbar {
    float: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--gk-tint) !important;
    border: 1px solid var(--gk-tint-line) !important;
    color: var(--gk-deep) !important;
    box-shadow: none !important;
  }
  #menu .btn-navbar:hover,
  #menu .btn-navbar:focus-visible,
  #menu .btn-navbar:active,
  #menu .btn-navbar[aria-expanded="true"] {
    background: var(--gk-deep) !important;
    border-color: var(--gk-deep) !important;
    color: var(--gk-surface) !important;
  }

  /* Mobile Collapsible Category Drawer */
  #menu .navbar-collapse {
    padding: 8px;
    margin: 0 !important;
    border-top: 1px solid var(--gk-line);
    background: var(--gk-surface);
  }
  #menu .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  #menu .navbar-nav > li > a {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px !important;
    justify-content: space-between;
    font-size: 15.5px;
  }
  #menu .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    margin: 2px 0 6px;
    padding: 6px !important;
    background: var(--gk-page) !important;
    border: 1px solid var(--gk-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  #menu .dropdown-inner {
    flex-direction: column;
    gap: 0;
  }
  #menu .dropdown-inner ul.list-unstyled { min-width: 0; }
  #menu .dropdown-inner ul.list-unstyled + ul.list-unstyled {
    border-left: 0;
    padding-left: 0;
  }
  #menu .dropdown-inner a,
  #menu .see-all {
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: 14.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #top *, header *, #menu * { transition: none !important; }
}

/* The basket drop-down's close (x), top right, a 44 px target. */
#cart .dropdown-menu > li:first-child::before { padding-right: 44px; }
#cart .dropdown-menu > li:first-child { position: static; }
#cart .gk-cart-x { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gk-ink-soft); font-size: 28px; line-height: 1; cursor: pointer; touch-action: manipulation; }
#cart .gk-cart-x:hover, #cart .gk-cart-x:focus-visible { background: var(--gk-tint); color: var(--gk-ink); }
#cart .gk-cart-x:focus-visible { outline: 2px solid var(--gk-deep); outline-offset: 1px; }

/* The language and currency in use (D2849): plain text with a tick, nothing to press. */
#top #form-currency [aria-current="true"],
#top #form-language [aria-current="true"],
#top #form-currency [aria-current="true"]:hover,
#top #form-language [aria-current="true"]:hover {
  background: transparent !important;
  color: var(--gk-ink) !important;
  font-weight: 700;
  cursor: default;
}
#top .gk-current-tick {
  width: 7px;
  height: 12px;
  margin: -3px 2px 0 auto;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

/* The account menu's arrow: the same thin chevron as Currency and Language, in the button's own
   colour (OpenCart draws a filled triangle there). */
.gk-theme #top #top-links .dropdown-toggle .caret {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  border: 0;
  vertical-align: -0.14em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.25 12 15.25 18 9.25'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.25 12 15.25 18 9.25'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Narrow phones (1.11.112, Best Immune, D2527): currency, language and four icons needed 378px at
   360 wide, so the page scrolled sideways in Safari. Tighter padding and gaps keep every control
   44px or more; under 350px the small arrows go too. */
@media (max-width: 400px) {
  #top > .container { gap: 0; }
  #top .pull-left .dropdown-toggle,
  #top #form-currency .dropdown-toggle,
  #top #form-language .dropdown-toggle,
  #top #top-links > ul > li > a { padding: 0 6px; gap: 3px; }
  #top-links > ul.list-inline { gap: 0; }
}
@media (max-width: 350px) {
  #top .dropdown-toggle .fa-caret-down,
  #top #top-links .caret { display: none; }
}

/* dark.css */
/* 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: dark mode. The page sets data-theme="dark" on <html> (the switch in the top bar, or the
   shop's default; "auto" follows the device). The dark colours of each scheme are CSS variables
   written by the theme, so these rules hold only what changes besides the variables.
   :where() keeps each rule at the specificity of the light rule it replaces. */

/* Logo: the shop's light version on the dark page, when it has one */
#logo img[data-gk-logo="dark"], :root[data-theme="dark"] #logo img[data-gk-logo="light"] { display: none; }
:root[data-theme="dark"] #logo img[data-gk-logo="dark"] { display: block; }

/* The switch: the moon shows in light mode, the sun in dark mode */
#top #gk-mode { display: inline-grid; place-items: center; width: 36px; height: 30px; margin: -6px 0 -6px 2px; padding: 0; vertical-align: middle; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
#top #gk-mode:focus-visible { outline: 2px solid var(--gk-deep) !important; outline-offset: 1px !important; }
#gk-mode svg { width: 18px; height: 18px; display: block; pointer-events: none; }
#gk-mode .gk-sun, :root[data-theme="dark"] #gk-mode .gk-moon { display: none; }
:root[data-theme="dark"] #gk-mode .gk-sun { display: block; }
/* Hover only with a real pointer: on a phone the tapped switch kept its highlight (D1459). */
@media (hover: hover) {
  #top #gk-mode:hover { background: rgba(var(--gk-ink-rgb), .08); }
  :root[data-theme="dark"] #top #gk-mode:hover { background: rgba(255, 255, 255, .1); }
}
@media (max-width: 767px) { #top #gk-mode { width: 44px; height: 44px; margin: -12px 0; } }

/* Page, text, links */
:where(:root[data-theme="dark"]) body { color: var(--gk-ink); background: var(--gk-page); }
:where(:root[data-theme="dark"]) a, :where(:root[data-theme="dark"]) .btn-link, :where(:root[data-theme="dark"]) .text-primary { color: var(--gk-deep); }
:where(:root[data-theme="dark"]) a:hover, :where(:root[data-theme="dark"]) a:focus, :where(:root[data-theme="dark"]) .btn-link:hover, :where(:root[data-theme="dark"]) .btn-link:focus, :where(:root[data-theme="dark"]) .btn-link:active { color: var(--gk-deeper); }
:where(:root[data-theme="dark"]) hr { border-top-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .text-muted, :where(:root[data-theme="dark"]) .help-block, :where(:root[data-theme="dark"]) small { color: var(--gk-mute); }
:where(:root[data-theme="dark"]) .text-success { color: var(--gk-deep); }
:where(:root[data-theme="dark"]) .text-warning { color: #FFD166; }
:where(:root[data-theme="dark"]) .text-info { color: #8ECDF0; }
:where(:root[data-theme="dark"]) #collapse-checkout-option b[style*="37b74a"] { color: var(--gk-deep) !important; }

/* Focus: the light ring is too dark on the dark page */
:where(:root[data-theme="dark"]) button:focus-visible, :where(:root[data-theme="dark"]) .btn:focus-visible, :where(:root[data-theme="dark"]) input:focus-visible, :where(:root[data-theme="dark"]) select:focus-visible, :where(:root[data-theme="dark"]) textarea:focus-visible { outline-color: var(--gk-deep) !important; }
:where(:root[data-theme="dark"]) input[type="checkbox"]:focus-visible { outline-color: rgba(var(--gk-brand-rgb), .55); }

/* Top bar and header */
:where(:root[data-theme="dark"]) #top { background: var(--gk-band); border-bottom: 1px solid var(--gk-line); }
:where(:root[data-theme="dark"]) header { background: var(--gk-surface); border-bottom-color: var(--gk-line); }
:where(:root[data-theme="dark"]) #search { background: var(--gk-field); border-color: var(--gk-field-line); }
:where(:root[data-theme="dark"]) #search .input-lg { background: var(--gk-field); color: var(--gk-ink); }
:where(:root[data-theme="dark"]) #search .btn-lg { background: var(--gk-tint); color: var(--gk-deep); }
:where(:root[data-theme="dark"]) #search .btn-lg:hover, :where(:root[data-theme="dark"]) #search .btn-lg:active { background: var(--gk-tint-deep); color: var(--gk-deeper); }
:where(:root[data-theme="dark"]) #cart > .btn:hover, :where(:root[data-theme="dark"]) #cart.open > .btn, :where(:root[data-theme="dark"]) #cart.open > .btn:hover, :where(:root[data-theme="dark"]) #cart > .btn:focus { border-color: var(--gk-tint-line); }
:where(:root[data-theme="dark"]) #cart > .btn:active, :where(:root[data-theme="dark"]) #cart.open > .btn:active { background: var(--gk-tint-deep); color: var(--gk-ink); }

/* Menus (currency, language, account, basket) */
:where(:root[data-theme="dark"]) .dropdown-menu { background: var(--gk-raised); border-color: var(--gk-line-strong); box-shadow: var(--gk-shadow-hover); }
:where(:root[data-theme="dark"]) .dropdown-menu > li > a, :where(:root[data-theme="dark"]) .dropdown-menu .btn-link { color: var(--gk-ink); }
:where(:root[data-theme="dark"]) .dropdown-menu .divider { background-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .dropdown-menu li > a:hover, :where(:root[data-theme="dark"]) .dropdown-menu li > a:focus, :where(:root[data-theme="dark"]) .dropdown-menu > .active > a, :where(:root[data-theme="dark"]) .dropdown-menu > .active > a:hover, :where(:root[data-theme="dark"]) .dropdown-menu > .active > a:focus,
:where(:root[data-theme="dark"]) #top #form-currency .currency-select:hover, :where(:root[data-theme="dark"]) #top #form-language .language-select:hover,
:where(:root[data-theme="dark"]) #top #form-currency .dropdown-menu .currency-select:hover, :where(:root[data-theme="dark"]) #top #form-currency .dropdown-menu .currency-select:focus,
:where(:root[data-theme="dark"]) #top #top-links .dropdown-menu a:hover, :where(:root[data-theme="dark"]) #top #top-links .dropdown-menu a:focus,
:where(:root[data-theme="dark"]) #top #gk-lang .dropdown-menu a:hover, :where(:root[data-theme="dark"]) #top #gk-lang .dropdown-menu a:focus { color: var(--gk-ink); background: var(--gk-tint-deep); }
:where(:root[data-theme="dark"]) #cart .dropdown-menu { background: var(--gk-raised); border-color: var(--gk-line-strong); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); }
:where(:root[data-theme="dark"]) #cart .dropdown-menu .table-striped > tbody > tr { border-bottom-color: var(--gk-line); }
:where(:root[data-theme="dark"]) #cart .dropdown-menu .table-bordered > tbody > tr:last-child { border-top-color: var(--gk-line); }
:where(:root[data-theme="dark"]) #cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(1) img { border-color: transparent; }
:where(:root[data-theme="dark"]) #cart .dropdown-menu .table-striped .btn-danger:hover, :where(:root[data-theme="dark"]) #cart .dropdown-menu .table-striped .btn-danger:focus-visible { background: #3A1418; color: #FF9DA2; border-color: #6B2A30; }
:where(:root[data-theme="dark"]) #cart .dropdown-menu p.text-right:last-child > a { background: transparent; }
:where(:root[data-theme="dark"]) #cart .dropdown-menu p.text-right:last-child > a[href*="checkout/checkout"] { background: var(--gk-deep); color: var(--gk-on-deep); }
:where(:root[data-theme="dark"]) #cart .dropdown-menu p.text-right:last-child > a:hover, :where(:root[data-theme="dark"]) #cart .dropdown-menu p.text-right:last-child > a:focus-visible { filter: brightness(1.1); }

/* Buttons: a light fill with dark words */
:where(:root[data-theme="dark"]) .btn-primary, :where(:root[data-theme="dark"]) .btn-primary.disabled, :where(:root[data-theme="dark"]) .btn-primary[disabled] { color: var(--gk-on-deep); background: var(--gk-deep); border-color: var(--gk-deep); box-shadow: none; }
:where(:root[data-theme="dark"]) .btn-primary:hover, :where(:root[data-theme="dark"]) .btn-primary:focus, :where(:root[data-theme="dark"]) .btn-primary.focus { color: var(--gk-on-deep); background: var(--gk-deeper); border-color: var(--gk-deeper); box-shadow: 0 4px 14px rgba(var(--gk-brand-rgb), .22); }
:where(:root[data-theme="dark"]) .btn-primary:active, :where(:root[data-theme="dark"]) .btn-primary.active, :where(:root[data-theme="dark"]) .open > .dropdown-toggle.btn-primary, :where(:root[data-theme="dark"]) .btn-primary:active:hover, :where(:root[data-theme="dark"]) .btn-primary:active:focus, :where(:root[data-theme="dark"]) .btn-primary.active:hover, :where(:root[data-theme="dark"]) .btn-primary.active:focus { color: var(--gk-on-deep); background: var(--gk-press); border-color: var(--gk-press); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }
:where(:root[data-theme="dark"]) .btn-primary .badge { color: var(--gk-deep); background: var(--gk-on-deep); }
:where(:root[data-theme="dark"]) .btn-default { color: var(--gk-ink); background: var(--gk-raised); border-color: var(--gk-field-line); }
:where(:root[data-theme="dark"]) .btn-default:hover, :where(:root[data-theme="dark"]) .btn-default:focus { color: var(--gk-ink); background: var(--gk-tint-deep); border-color: var(--gk-deep); }
:where(:root[data-theme="dark"]) .btn-default:active, :where(:root[data-theme="dark"]) .btn-default.active, :where(:root[data-theme="dark"]) .open > .dropdown-toggle.btn-default, :where(:root[data-theme="dark"]) .btn-default:active:hover, :where(:root[data-theme="dark"]) .btn-default:active:focus { color: var(--gk-ink); background: var(--gk-tint); border-color: var(--gk-deep); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }
:where(:root[data-theme="dark"]) .btn-info { color: var(--gk-deeper); background: var(--gk-tint); border-color: var(--gk-tint-line); }
:where(:root[data-theme="dark"]) .btn-info:hover, :where(:root[data-theme="dark"]) .btn-info:focus, :where(:root[data-theme="dark"]) .btn-info:active, :where(:root[data-theme="dark"]) .btn-info.active { color: var(--gk-ink); background: var(--gk-tint-deep); border-color: var(--gk-deep); }
:where(:root[data-theme="dark"]) .btn-danger { color: #fff; background: #B3202A; border-color: #D9434C; }
:where(:root[data-theme="dark"]) .btn-danger:hover, :where(:root[data-theme="dark"]) .btn-danger:focus { color: #fff; background: #941A22; }
:where(:root[data-theme="dark"]) .btn-warning { color: #2A1E00; background: #FFC24D; border-color: #FFC24D; }
:where(:root[data-theme="dark"]) .bg-primary, :where(:root[data-theme="dark"]) .label-primary, :where(:root[data-theme="dark"]) .progress-bar { background-color: var(--gk-deep); color: var(--gk-on-deep); }
:where(:root[data-theme="dark"]) .nav-pills > li.active > a, :where(:root[data-theme="dark"]) .nav-pills > li.active > a:hover, :where(:root[data-theme="dark"]) .nav-pills > li.active > a:focus { color: var(--gk-on-deep); background-color: var(--gk-deep); }
:where(:root[data-theme="dark"]) .nav > li > a:hover, :where(:root[data-theme="dark"]) .nav > li > a:focus { background-color: var(--gk-tint); }

/* Forms */
:where(:root[data-theme="dark"]) .form-control, :where(:root[data-theme="dark"]) input[type="text"], :where(:root[data-theme="dark"]) input[type="email"], :where(:root[data-theme="dark"]) input[type="tel"], :where(:root[data-theme="dark"]) input[type="password"], :where(:root[data-theme="dark"]) input[type="number"], :where(:root[data-theme="dark"]) input[type="search"], :where(:root[data-theme="dark"]) input[type="date"], :where(:root[data-theme="dark"]) select, :where(:root[data-theme="dark"]) textarea { color: var(--gk-ink); background-color: var(--gk-field); border-color: var(--gk-field-line); }
:where(:root[data-theme="dark"]) .form-control::placeholder, :where(:root[data-theme="dark"]) input::placeholder, :where(:root[data-theme="dark"]) textarea::placeholder { color: var(--gk-mute); opacity: 1; }
:where(:root[data-theme="dark"]) .form-control:focus { border-color: var(--gk-deep); box-shadow: 0 0 0 3px rgba(var(--gk-brand-rgb), .25); }
:where(:root[data-theme="dark"]) .form-control[disabled], :where(:root[data-theme="dark"]) .form-control[readonly], :where(:root[data-theme="dark"]) fieldset[disabled] .form-control { background-color: var(--gk-raised); color: var(--gk-ink-soft); }
/* Autofilled fields: theme.css's rule reads --gk-field and --gk-ink, set here for dark; only the focus ring changes. */
:root[data-theme="dark"] input:-webkit-autofill:focus, :root[data-theme="dark"] textarea:-webkit-autofill:focus, :root[data-theme="dark"] select:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 100vmax var(--gk-field), 0 0 0 3px rgba(var(--gk-brand-rgb), .25) !important; box-shadow: inset 0 0 0 100vmax var(--gk-field), 0 0 0 3px rgba(var(--gk-brand-rgb), .25) !important; }
:root[data-theme="dark"] input:autofill:focus, :root[data-theme="dark"] textarea:autofill:focus, :root[data-theme="dark"] select:autofill:focus { box-shadow: inset 0 0 0 100vmax var(--gk-field), 0 0 0 3px rgba(var(--gk-brand-rgb), .25) !important; }
:where(:root[data-theme="dark"]) .input-group-addon { color: var(--gk-ink); background: var(--gk-raised); border-color: var(--gk-field-line); }
:where(:root[data-theme="dark"]) #content .input-group-addon { background: transparent; }
:where(:root[data-theme="dark"]) .has-error .form-control { border-color: var(--gk-red); }
:where(:root[data-theme="dark"]) .has-error .help-block, :where(:root[data-theme="dark"]) .has-error .control-label, :where(:root[data-theme="dark"]) .text-danger { color: var(--gk-red-text); }
:where(:root[data-theme="dark"]) input[type="checkbox"] { background-color: var(--gk-field); border-color: var(--gk-mute); }
:where(:root[data-theme="dark"]) input[type="checkbox"]:checked { background-color: var(--gk-deep); border-color: var(--gk-deep); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-7' fill='none' stroke='%23041E11' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:where(:root[data-theme="dark"]) input[type="radio"] { accent-color: var(--gk-deep); }
@media (max-width: 767px) {
  :root[data-theme="dark"] .buttons .pull-right:has(> input[name="agree"]) > input[name="agree"] { box-shadow: inset 0 0 0 2px var(--gk-mute); }
  :root[data-theme="dark"] .buttons .pull-right:has(> input[name="agree"]) > input[name="agree"]:checked { box-shadow: inset 0 0 0 2px var(--gk-deep); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-7' fill='none' stroke='%23071226' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
:where(:root[data-theme="dark"]) legend { border-bottom-color: var(--gk-line); }

/* Product cards: dark card */
:where(:root[data-theme="dark"]) .product-thumb { background: var(--gk-surface); border-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .product-thumb:hover { border-color: var(--gk-tint-line); }
:where(:root[data-theme="dark"]) .product-thumb h4 a, :where(:root[data-theme="dark"]) .product-thumb h3.gk-ct a { color: var(--gk-ink); }
:where(:root[data-theme="dark"]) .product-thumb h4 a:hover, :where(:root[data-theme="dark"]) .product-thumb h4 a:focus, :where(:root[data-theme="dark"]) .product-thumb h3.gk-ct a:hover, :where(:root[data-theme="dark"]) .product-thumb h3.gk-ct a:focus { color: var(--gk-deep); }
:where(:root[data-theme="dark"]) .product-thumb .rating .fa-star-o { color: #5A6478; }
:where(:root[data-theme="dark"]) .product-thumb .button-group button:first-child { color: var(--gk-on-deep); background: var(--gk-deep); border-color: var(--gk-deep); }
:where(:root[data-theme="dark"]) .product-thumb .button-group button:first-child:hover, :where(:root[data-theme="dark"]) .product-thumb .button-group button:first-child:focus { color: var(--gk-on-deep); background: var(--gk-deeper); border-color: var(--gk-deeper); box-shadow: 0 4px 14px rgba(var(--gk-brand-rgb), .22); }
:where(:root[data-theme="dark"]) .product-thumb .button-group button + button { background: var(--gk-raised); border-color: var(--gk-field-line); color: var(--gk-ink-soft); }
:where(:root[data-theme="dark"]) .product-thumb .button-group button + button:hover, :where(:root[data-theme="dark"]) .product-thumb .button-group button + button:focus { background: var(--gk-tint-deep); border-color: var(--gk-deep); color: var(--gk-deep); }
:where(:root[data-theme="dark"]) .product-thumb .button-group button:active, :where(:root[data-theme="dark"]) .product-thumb .button-group button:first-child:active { color: var(--gk-on-deep); background: var(--gk-press); border-color: var(--gk-press); }

/* Product page: the buy box goes dark */
:where(:root[data-theme="dark"]) #product-product .thumbnail, :where(:root[data-theme="dark"]) .thumbnail, :where(:root[data-theme="dark"]) .img-thumbnail { background: var(--gk-surface); border-color: var(--gk-line); }
:where(:root[data-theme="dark"]) #product-product #product { background: var(--gk-surface); border-color: var(--gk-line); }
:where(:root[data-theme="dark"]) #product .gk-qty { background: var(--gk-field); border-color: var(--gk-field-line); }
:where(:root[data-theme="dark"]) #product .gk-qty-b:hover, :where(:root[data-theme="dark"]) #product .gk-qty-b:focus-visible { background: var(--gk-tint-deep); color: var(--gk-deep); }
:where(:root[data-theme="dark"]) #product .gk-qty-b:active { background: var(--gk-tint); }
:where(:root[data-theme="dark"]) #product #input-quantity { background: transparent; }
:where(:root[data-theme="dark"]) .gk-stick { background: var(--gk-surface); border-top-color: var(--gk-line); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .6); }
:where(:root[data-theme="dark"]) :is(.rating .fa-stack > i.fa-star-o, #review .fa-stack > i.fa-star-o) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath d='M8.5 1.2l2.1 4.4 4.8.6-3.5 3.3.9 4.8-4.3-2.3-4.3 2.3.9-4.8L1.6 6.2l4.8-.6z' fill='%235A6478'/%3E%3C/svg%3E"); }
:where(:root[data-theme="dark"]) :is(.rating .fa-stack > i.fa-star, #review .fa-stack > i.fa-star) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath d='M8.5 1.2l2.1 4.4 4.8.6-3.5 3.3.9 4.8-4.3-2.3-4.3 2.3.9-4.8L1.6 6.2l4.8-.6z' fill='%23FFB627'/%3E%3C/svg%3E"); }
:where(:root[data-theme="dark"]) .product-thumb .rating .fa-star, :where(:root[data-theme="dark"]) #product-product .rating .fa-star { color: #FFB627; }
:where(:root[data-theme="dark"]) #review .table { background: var(--gk-surface); }
:where(:root[data-theme="dark"]) .nav-tabs > li.active > a, :where(:root[data-theme="dark"]) .nav-tabs > li.active > a:hover, :where(:root[data-theme="dark"]) .nav-tabs > li.active > a:focus { background: transparent; }

/* Tables, panels, wells, lists */
:where(:root[data-theme="dark"]) #checkout-cart .table-responsive > .table > tbody > tr { background: var(--gk-surface); border-color: var(--gk-line-strong); }
:where(:root[data-theme="dark"]) .table-bordered, :where(:root[data-theme="dark"]) .table { background: var(--gk-surface); color: var(--gk-ink-soft); }
:where(:root[data-theme="dark"]) .table-bordered, :where(:root[data-theme="dark"]) .table-bordered > thead > tr > td, :where(:root[data-theme="dark"]) .table-bordered > tbody > tr > td, :where(:root[data-theme="dark"]) .table-bordered > thead > tr > th, :where(:root[data-theme="dark"]) .table-bordered > tbody > tr > th, :where(:root[data-theme="dark"]) .table-bordered > tfoot > tr > td, :where(:root[data-theme="dark"]) .table > thead > tr > td, :where(:root[data-theme="dark"]) .table > tbody > tr > td, :where(:root[data-theme="dark"]) .table > tfoot > tr > td, :where(:root[data-theme="dark"]) .table > thead > tr > th, :where(:root[data-theme="dark"]) .table > tbody > tr > th { border-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); }
:where(:root[data-theme="dark"]) .table-hover > tbody > tr:hover { background-color: var(--gk-tint); }
:where(:root[data-theme="dark"]) #cart .dropdown-menu .table, :where(:root[data-theme="dark"]) #cart .dropdown-menu .table-bordered { background: transparent; }
:where(:root[data-theme="dark"]) .panel, :where(:root[data-theme="dark"]) .panel-body { background: var(--gk-surface); color: var(--gk-ink-soft); }
:where(:root[data-theme="dark"]) .panel-group .panel, :where(:root[data-theme="dark"]) .panel-default { border-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .panel-default > .panel-heading { background: var(--gk-surface); color: var(--gk-ink); border-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .panel-primary > .panel-heading { color: var(--gk-on-deep); background: var(--gk-deep); }
:where(:root[data-theme="dark"]) .well { background: var(--gk-surface); border-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .list-group-item { background: var(--gk-surface); border-color: var(--gk-line); color: var(--gk-ink-soft); }
:where(:root[data-theme="dark"]) a.list-group-item, :where(:root[data-theme="dark"]) button.list-group-item { color: var(--gk-ink-soft); }
:where(:root[data-theme="dark"]) .list-group a.list-group-item:hover, :where(:root[data-theme="dark"]) .list-group a.list-group-item:focus { background: var(--gk-tint); color: var(--gk-ink); }
:where(:root[data-theme="dark"]) .list-group-item.active, :where(:root[data-theme="dark"]) .list-group-item.active:hover, :where(:root[data-theme="dark"]) .list-group-item.active:focus { color: var(--gk-on-deep); background-color: var(--gk-deep); border-color: var(--gk-deep); }
/* The open category stands out clearly from the panel: a brand-tinted fill, white text */
:where(:root[data-theme="dark"]) #column-left .list-group-item.active, :where(:root[data-theme="dark"]) #column-left .list-group a.list-group-item.active { background: rgba(var(--gk-brand-rgb), .16); color: #fff; border-color: var(--gk-line); border-left-color: var(--gk-brand); }
:where(:root[data-theme="dark"]) .pagination > li > a, :where(:root[data-theme="dark"]) .pagination > li > span { background: var(--gk-surface); border-color: var(--gk-line-strong); color: var(--gk-deep); }
:where(:root[data-theme="dark"]) .pagination > li > a:hover, :where(:root[data-theme="dark"]) .pagination > li > a:focus, :where(:root[data-theme="dark"]) .pagination > li > span:hover { background: var(--gk-tint); color: var(--gk-deeper); }
:where(:root[data-theme="dark"]) .pagination > .active > a, :where(:root[data-theme="dark"]) .pagination > .active > a:hover, :where(:root[data-theme="dark"]) .pagination > .active > a:focus, :where(:root[data-theme="dark"]) .pagination > .active > span, :where(:root[data-theme="dark"]) .pagination > .active > span:hover { color: var(--gk-on-deep); background-color: var(--gk-deep); border-color: var(--gk-deep); }
:where(:root[data-theme="dark"]) .pagination > .disabled > a, :where(:root[data-theme="dark"]) .pagination > .disabled > span { background: var(--gk-surface); color: var(--gk-mute); border-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .breadcrumb > li + li:before { color: var(--gk-mute); }
:where(:root[data-theme="dark"]) #error-not-found #content { background: var(--gk-surface); border-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .modal-content { background: var(--gk-surface); border-color: var(--gk-line-strong); color: var(--gk-ink-soft); }
:where(:root[data-theme="dark"]) .modal-header, :where(:root[data-theme="dark"]) .modal-footer { border-color: var(--gk-line); }
:where(:root[data-theme="dark"]) .modal-backdrop.in { opacity: .7; }
:where(:root[data-theme="dark"]) .close { color: var(--gk-ink); text-shadow: none; opacity: .75; }
:where(:root[data-theme="dark"]) .close:hover, :where(:root[data-theme="dark"]) .close:focus { color: var(--gk-ink); opacity: 1; }
:where(:root[data-theme="dark"]) .popover { background: var(--gk-raised); border-color: var(--gk-line-strong); color: var(--gk-ink); }
:where(:root[data-theme="dark"]) .label-default { background: var(--gk-line-strong); color: var(--gk-ink); }

/* Notices */
:where(:root[data-theme="dark"]) .alert .close:hover, :where(:root[data-theme="dark"]) .alert .close:focus-visible { background: rgba(255, 255, 255, .1); }
:where(:root[data-theme="dark"]) .alert-success { background: var(--gk-tint); border-color: var(--gk-tint-line); color: var(--gk-ink); }
:where(:root[data-theme="dark"]) .alert-danger { background: #3A1418; border-color: #6B2A30; color: #FFC9CC; }
:where(:root[data-theme="dark"]) .alert-danger a { color: #FFE1E3; }
:where(:root[data-theme="dark"]) .alert-info { background: var(--gk-raised); border-color: var(--gk-line-strong); color: var(--gk-ink); }
:where(:root[data-theme="dark"]) .alert-warning { background: #33290B; border-color: #6B5413; color: #FFE08A; }
:where(:root[data-theme="dark"]) .alert-warning a { color: #FFF0C2; }

/* Footer */
:where(:root[data-theme="dark"]) footer { border-top: 0; }
:where(:root[data-theme="dark"]) .gk-pay-l svg { fill: #1F2328; }
:where(:root[data-theme="dark"]) footer hr { border-top-color: transparent; }

/* Our own cards and panels */
:where(:root[data-theme="dark"]) .gk-tile { background: var(--gk-surface); border-color: var(--gk-line-strong); }
:where(:root[data-theme="dark"]) .gk-tile:hover { background: var(--gk-raised); }
:where(:root[data-theme="dark"]) .mfp-bg { background: rgba(0, 0, 0, .94); }

/* Flags keep their rounded edge on dark and highlighted rows (a blue stripe on a blue row
   otherwise loses its corners) */
:where(:root[data-theme="dark"]) #form-language img, :where(:root[data-theme="dark"]) #top #form-currency .currency-select::before { box-shadow: 0 0 0 1px rgba(255, 255, 255, .38); }

/* select.css */
/* 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: drop-down lists (select.js). The closed box on every device, and the open list in the
   look of the top-bar menus. Only colour variables, so every colour scheme and dark mode follow. */

/* The closed box: the browser's own select (phones, and before select.js runs) and the button.
   Borders and colours at low weight, so the theme's form and error styles still win. */
:where(select:not([multiple]):not([size]):not(#gk-look *, .gk-no-enhance *)), .gk-sel {
  border: 1px solid var(--gk-field-line, #CBD3E1);
  border-radius: var(--gk-r-btn, 10px);
  background-color: var(--gk-field, #fff);
  color: var(--gk-ink, #0B1F4D);
}
select:not([multiple]):not([size]):where(:not(#gk-look *, .gk-no-enhance *)),
.gk-sel {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5B7D' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.25 12 15.25 18 9.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  cursor: pointer;
  transition: border-color .14s var(--gk-ease, ease), box-shadow .14s var(--gk-ease, ease);
}
:root[data-theme="dark"] select:not([multiple]):not([size]):where(:not(#gk-look *, .gk-no-enhance *)),
:root[data-theme="dark"] .gk-sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3CEE2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.25 12 15.25 18 9.25'/%3E%3C/svg%3E");
}
:where(select:not([multiple]):not([size]):not(#gk-look *, .gk-no-enhance *)):hover, :where(.gk-sel):hover { border-color: var(--gk-tint-line, #C3D3FA); }
select:not([multiple]):not([size]):where(:not(#gk-look *, .gk-no-enhance *)):focus,
.gk-sel:focus,
.gk-sel[aria-expanded="true"] {
  border-color: var(--gk-deep, #1D4ED8);
  box-shadow: 0 0 0 3px rgba(var(--gk-brand-rgb, 37, 99, 235), .22);
  outline: 0;
}
select:not([multiple]):not([size]):where(:not(#gk-look *, .gk-no-enhance *)):disabled,
.gk-sel:disabled { cursor: not-allowed; border-color: var(--gk-line, #E2E7F0); background-color: var(--gk-page, #F5F7FB); color: var(--gk-mute, #4A5B7D); }

/* The button that stands in for the select on desktops */
.gk-sel, .input-group > .gk-sel { height: 44px; padding: 9px 40px 9px 13px; font: inherit; font-size: 16px; line-height: 24px; text-align: left; }
.gk-sel { display: inline-block; min-width: 8em; max-width: 100%; }
.gk-sel.form-control { display: block; width: 100%; }
.input-group .gk-sel.form-control { display: table-cell; }
.gk-sel-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The real select, out of sight but still in the form */
select.gk-sel-src {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

/* The open list: the top-bar menu panel */
.gk-sel-list {
  position: fixed;
  z-index: 1070;
  box-sizing: border-box;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--gk-surface, #fff);
  border: 1px solid var(--gk-line, #E2E7F0);
  border-radius: var(--gk-r-card, 14px);
  box-shadow: var(--gk-shadow-hover, 0 12px 32px rgba(11, 31, 77, .11));
  font-family: var(--gk-text, inherit);
  outline: 0;
  animation: gk-sel-in .14s var(--gk-ease, ease) both;
}
.gk-sel-list[hidden] { display: none; }
:root[data-theme="dark"] .gk-sel-list { background: var(--gk-raised, #16243D); border-color: var(--gk-line-strong, #2A3B5A); }
@keyframes gk-sel-in { from { opacity: 0; transform: translateY(-4px); } }
.gk-sel-list--up { animation-name: gk-sel-up; }
@keyframes gk-sel-up { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .gk-sel-list { animation: none; }
  select, .gk-sel { transition: none; }
}
.gk-sel-list [role="option"] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--gk-ink, #0B1F4D);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .14s var(--gk-ease, ease), color .14s var(--gk-ease, ease);
}
.gk-sel-list [role="option"] + [role="option"], .gk-sel-list [role="group"] + * { margin-top: 2px; }
.gk-sel-list [aria-selected="true"] { color: var(--gk-deep, #1D4ED8); font-weight: 600; }
.gk-sel-list [aria-selected="true"]::after {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: url("/catalog/view/javascript/gk_theme/icons/check.svg") center / contain no-repeat;
  mask: url("/catalog/view/javascript/gk_theme/icons/check.svg") center / contain no-repeat;
}
.gk-sel-list .is-active { background: var(--gk-tint, #EEF3FF); color: var(--gk-deep, #1D4ED8); }
:root[data-theme="dark"] .gk-sel-list .is-active { background: var(--gk-tint-deep, #18305A); color: var(--gk-ink, #EAF0FA); }
:root[data-theme="dark"] .gk-sel-list .is-active[aria-selected="true"] { color: var(--gk-deeper, #9CC3FF); }
.gk-sel-list [aria-disabled="true"] { color: var(--gk-mute, #4A5B7D); font-weight: 400; cursor: not-allowed; }
.gk-sel-list [aria-disabled="true"].is-active { background: transparent; }
.gk-sel-list-head { padding: 10px 12px 4px; color: var(--gk-mute, #4A5B7D); font-size: 13px; font-weight: 600; }
.gk-sel-list [role="group"] [role="option"] { padding-left: 20px; }