/** Shopify CDN: Minification failed

Line 3041:20 Unexpected "{"
Line 3041:29 Expected ":"
Line 3048:20 Unexpected "{"
Line 3048:29 Expected ":"

**/
/* =========================
   FONTS
========================= */

@font-face {
  font-family: "DMSans";
  src: url("/cdn/shop/files/DMSans-VariableFont_opsz_wght.woff2?v=1777313744") format("woff2"),
       url("/cdn/shop/files/DMSans-VariableFont_opsz_wght.woff?v=1777313744") format("woff");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PlayfairDisplay";
  src: url("/cdn/shop/files/PlayfairDisplay-Regular.woff2?v=1776871108") format("woff2"),
       url("/cdn/shop/files/PlayfairDisplay-Regular.woff?v=1776871108") format("woff");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PlayfairDisplay";
  src: url("/cdn/shop/files/PlayfairDisplay-Italic-VariableFont_wght.woff2?v=1776887934") format("woff2"),
       url("/cdn/shop/files/PlayfairDisplay-Italic-VariableFont_wght_73b46dc6-bf04-481f-87d5-1093965c51c4.woff2?v=1777315606") format("woff");
  font-style: italic;
  font-weight: 500 !important;
  font-display: swap;
}

:root {
  --gk-font-heading: "PlayfairDisplay", serif;
  --gk-font-body: "DMSans", sans-serif;
}

.gk-font-heading { font-family: var(--gk-font-heading); }
.gk-font-body    { font-family: var(--gk-font-body); }


/* =========================
   GLOBAL LAYOUT
========================= */

.section {
  max-width: 1600px;
  width: 92%;
}

.full-width--true .caption {
  max-width: 1600px;
  width: 92%;
}

.logo-position--center.menu-position--inline .nav--left {
  width: 35%;
}

.collection_title.is-disabled {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

.footer_menu .footer-menu-item--button {
  list-style: none;
  margin-top: 12px;
}

.footer_menu .footer-menu-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 14px 32px;
  border: 1px solid #ffffff;
  font-family: var(--gk-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  background: transparent;
}

.footer_menu .footer-menu-button:hover {
  background-color: #ffffff;
  color: #082648 !important;
}


@media screen and (max-width: 500px) {
  .footer_menu .footer-menu-item--button {
    width: 75%;
}

.footer_menu .footer-menu-button {
  padding: 14px 15px;
}
}





/* =========================
   NAVBAR
========================= */

.cart-container .mini_cart,
.cart-container .header-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#header a.mobile_logo img {
    max-height: 50px;
    width: 100%;
    max-width: 200px;
}

a#customer_login_link {
    display: none;
}



.cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-family: var(--gk-font-body);
}

.cart-container.active_link .mini_cart span {
    background-color: #000;
    color: #ffffff !important;
}

.top-bar a.mini_cart span {
        line-height: 1.6;
    right: 7px;
    background: #000000;
    color: #ffffff !important;
    font-family: var(--gk-font-body);
}

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

.cart-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-badge.is-hidden {
  display: none !important;
}

.main-nav__wrapper {
  background: #082648;
}

body.index .main-nav__wrapper {
  background: transparent;
}

body.index.smart-cart--enabled {
  position: relative;
}

.index .gk-navbar-container {
  position: absolute;
  width: 100%;
}

.gk-navbar-container .top-bar {
  background: transparent;
  display: none;
}

.gk-navbar-container .main-nav {
  background: transparent;
  max-width: 100%;
  width: 92%;
  margin: 0 auto;
  /* padding-top: 30px;
  padding-bottom: 20px; */
  gap: 22px;
}

.gk-navbar-container .sticky_nav .main-nav {
  background: transparent;
}

.gk-navbar-container .cart-container .mini_cart {
  background: transparent;
  padding: 0;
  margin: 0;
  justify-content: start;
}

.gk-navbar-container a.icon-bag.mini_cart.dropdown_link {
  background: transparent;
}

.gk-navbar-container .nav.nav--left.center {
  display: flex;
}

.gk-navbar-container .nav.nav--right.center {
  display: flex;
  justify-content: end;
}

.gk-navbar-container .search-form--header .search-form__input[type=text] {
  border: none;
  padding: 0 !important;
}

.gk-navbar-container .search-container {
  display: flex;
}

.gk-navbar-container a.header-icon-link {
  width: 18px;
  height: 18px;
}

.gk-navbar-container .header-icon-link svg {
  display: block;
  color: #ffffff;
}

.gk-navbar-container .header-icon-link svg:hover {
  color: #B8CEDD;
}

.index .gk-navbar-container .header-icon-link svg {
  display: block;
  color: #ffffff;
}

.index .gk-navbar-container .header-icon-link svg:hover {
  color: #B8CEDD;
}

.gk-navbar-container ul.nav-desktop__tier-1 {
  gap: 32px;
  flex-wrap: unset;
}

.gk-navbar-container a.nav-desktop__tier-1-link {
  padding: 0 !important;
}

.nav-desktop__tier-1-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.gk-navbar-container .nav-desktop__tier-1-link:hover,
.nav-desktop__tier-1-link[aria-expanded=true] {
  border-bottom: none;
}

.gk-navbar-container a.nav-desktop__tier-1-link span,
.gk-navbar-container summary.nav-desktop__tier-1-link.nav-desktop__tier-1-link--parent span {
  font-family: var(--gk-font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.12px;
  color: #ffffff;
  font-weight: 400;
}

.gk-navbar-container a.nav-desktop__tier-1-link:hover span,
.gk-navbar-container summary.nav-desktop__tier-1-link.nav-desktop__tier-1-link--parent:hover span {
  color: #B8CEDD;
}

.index .gk-navbar-container a.nav-desktop__tier-1-link span,
.index .gk-navbar-container summary.nav-desktop__tier-1-link.nav-desktop__tier-1-link--parent span {
  font-family: var(--gk-font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.12px;
  color: #ffffff;
  font-weight: 400;
}

.index .gk-navbar-container a.nav-desktop__tier-1-link:hover span,
.index .gk-navbar-container summary.nav-desktop__tier-1-link.nav-desktop__tier-1-link--parent:hover span {
  color: #B8CEDD;
}

.gk-navbar-container summary.nav-desktop__tier-1-link.nav-desktop__tier-1-link--parent {
  background: rgba(255, 255, 255, 0.39);
  padding: 4px 8px;
}

#header .top-bar a.mobile_logo {
  position: relative;
  margin: 0;
  justify-content: start;
  padding-left: 15px;
  width: 100%;
}

.icon-down-arrow svg {
  display: block;
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}

.gk-navbar-container summary.nav-desktop__tier-1-link.nav-desktop__tier-1-link--parent:hover .icon-down-arrow svg path {
  stroke: #B8CEDD;
}

details[open] .icon-down-arrow svg {
  transform: rotate(360deg);
}

span.icon-down-arrow::before {
  display: none;
}

span.right.icon-down-arrow svg path {
  stroke: currentColor;
  stroke-width: 1.5px;
}


/* =========================
   MEGA MENU
========================= */

.mega-menu {
  grid-auto-columns: unset;
}

.mega-menu.menu.dropdown_content {
  gap: 24px;
  padding: clamp(24px, 5vw, 76px);
}

.mega-menu .dropdown_column {
  padding: 0;
}

.nav-desktop__tier-2--full-width-menu {
  left: 50%;
  transform: translateX(-50%);
}

.nav-desktop__tier-2.nav-desktop__tier-2--full-width-menu {
  width: 92% !important;
  max-width: 100%;
}

/* Independent mega menu scrolling.
   Constrain the open mega menu to the space below the header and let it scroll
   on its own. `overscroll-behavior: contain` stops the scroll from chaining to
   the page once the top or bottom of the menu is reached. The JS sets
   `--mega-menu-max-height` to the exact space available below the header. */
.nav-desktop__tier-2--full-width-menu,
.sticky_nav .nav-desktop__tier-2--full-width-menu {
  max-height: var(--mega-menu-max-height, calc(100vh - var(--sticky-header-height, 120px)));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Lock the page while a mega menu is open so only the menu scrolls. */
body.mega-menu-open {
  overflow: hidden;
}

ul.dropdown_title {
  display: none;
}

.dropdown_column__menu ul:not(.dropdown_title) a {
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 22px;
  color: #000000 !important;
  font-family: var(--gk-font-body) !important;
}

.dropdown_column__menu ul:not(.dropdown_title) a:hover {
  color: #164B7A !important;
}

.dropdown_column__menu ul:not(.dropdown_title) li a {
  padding-top: 20px !important;
}

.dropdown_column__menu ul:not(.dropdown_title) li:first-child a {
  padding-top: 0 !important;
}

.dropdown_column__menu a:hover {
  color: #164B7A !important;
}

p.mega-menu__image-caption {
  text-align: start;
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  text-transform: uppercase;
  color: #000000;
  font-family: var(--gk-font-body);
  margin: 0;
}

.mega-menu__image-caption-link a {
  padding: 0;
}

/* Mega Menu — Product Card */

.gk-mm-product-card {
  display: flex;
  gap: 16px;
  padding-bottom: 17px;
}

.gk-mm-product-card a {
  padding: 0;
}

.gk-mm-product-card:hover .gk-mm-pt-pp a {
  color: #164B7A !important;
}

.gk-mm-image-wrapper {
  width: 127px;
  flex-shrink: 0;
}

.gk-mm-image-wrapper a {
  height: 100%;
}

.gk-mm-image-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

img.gk-mm-pi {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.gk-mm-pt-pp h3 {
  margin-bottom: 4px;
}

.gk-mm-pt-pp h3 a,
.gk-mm-pt-pp h3 a:hover {
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

.gk-mm-pt-pp:hover h3 a {
  color: #164B7A;
}

.gk-mm-pt-pp h3 a {
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: #0D1F35;
  font-family: var(--gk-font-heading);
}

.gk-mm-pt-pp a {
  font-size: 18px !important;
  line-height: 30px !important;
  color: #0D1F35 !important;
}

.gk-mm-pt-pp p {
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  text-transform: capitalize;
  color: #082648;
  padding: 0;
  font-family: var(--gk-font-body);
}

/* Mega Menu — Ratings */

.mega-menu p.rating__text {
  display: none;
}

.mega-menu .rating__star-wrapper {
  display: flex;
  gap: 4px;
}

.mega-menu .rating__star-wrapper svg {
  width: 14px;
  height: 14px;
}

.mega-menu p.rating__count {
  font-size: 14px;
  line-height: 14px;
  font-family: var(--gk-font-body);
  color: #0D1F35;
  font-weight: 500;
}

.mega-menu .gk-star-rating {
  margin-top: 8px;
}

.gk-mm-pt-pp .loox-rating .loox-icon {
  color: #EEBD54;
}

.gk-mm-pt-pp svg.loox-icon {
  width: 14px;
  height: 14px;
}

.gk-mm-pt-pp span.loox-rating-label {
  padding: 0;
  font-size: 14px !important;
  line-height: 14px;
  font-family: var(--gk-font-body);
  letter-spacing: 0;
  color: #0D1F35;
  text-transform: capitalize;
  font-weight: 500;
}

/* Mega Menu — Judge.me Ratings (ported from the Loox rules above) */

/* !important is needed here: `.gk-mm-pt-pp a` above sets font-size and colour
   with !important, and the badge sits inside that anchor — without it the
   stars inherit 18px near-black instead of 14px gold. */
.gk-mm-pt-pp .jdgm-prev-badge .jdgm-star {
  color: #EEBD54 !important;
  font-size: 14px !important;
  line-height: 14px !important;
}

.gk-mm-pt-pp .jdgm-prev-badge__text {
  padding: 0;
  font-size: 14px !important;
  line-height: 14px;
  font-family: var(--gk-font-body);
  letter-spacing: 0;
  color: #0D1F35;
  text-transform: capitalize;
  font-weight: 500;
}

/* Star Rating Component */

.gk-star-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 20px;
}

.gk-star-rating__stars {
  display: inline-flex;
  gap: 3px;
  line-height: 1;
}

.gk-star-rating__star {
  width: 14px;
  height: 14px;
  display: inline-flex;
}

.gk-star-rating__star svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.gk-star-rating__star--full  { color: #EEBD54; }
.gk-star-rating__star--empty { color: #e0e0e0; }

.gk-star-rating__star--half {
  position: relative;
  color: #e0e0e0;
  overflow: hidden;
}

.gk-star-rating__star--half .fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: #EEBD54;
  display: inline-flex;
}

.gk-star-rating__count {
  font-size: 14px;
  color: #0D1F35;
  line-height: 1;
  font-family: var(--gk-font-body);
  font-weight: 500;
}

/* =========================
   MOBILE MENU — DRILL-DOWN
   Behaviour lives in assets/gk-mobile-menu.js: tapping a parent replaces the
   current list with that parent's children instead of expanding an accordion
   under it. Every level is therefore styled as the same flat list of rows —
   no per-depth type scale and no indentation.
========================= */

/* Fill the space under the header so a short panel still shows the full menu
   background, and scroll a long list inside the drawer instead of the page.
   gk-mobile-menu.js measures --gk-mm-height each time the drawer opens. */
@media only screen and (max-width: 798px) {
  #header .mobile-menu-container[data-nav] {
    height: var(--gk-mm-height, auto);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* A column so the account strip can be pushed to the bottom of the drawer. */
#mobile_menu {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

/* The row: one shared box for menu links, mega menu column captions and the
   back button, so nothing shifts as you move between levels. */
#mobile_menu li a,
#mobile_menu .gk-mm-back button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  background: none;
  font-family: var(--gk-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  color: #000000;
}

#mobile_menu li a:active,
#mobile_menu .gk-mm-back button:active {
  background: rgba(8, 38, 72, 0.06);
}

/* Captions carry their column's heading, so they read as the row itself. */
#mobile_menu .mobile-mega-menu__image-caption {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

#mobile_menu .mobile-menu__disclosure {
  padding: 0 20px;
}

/* Only the drilled-into list is on screen: its siblings are pulled out, and the
   parent's own row is replaced by the back row carrying its title. */
#mobile_menu .gk-mm-item--hidden {
  display: none;
}

#mobile_menu .gk-mm-item--open > a {
  display: none;
}

#mobile_menu .sublink ul,
#mobile_menu .mobile-mega-menu {
  padding-left: 0;
}

#mobile_menu .gk-mm-item--open > ul.gk-mm-panel--active {
  display: block;
  animation: gk-mm-panel-in 0.22s ease-out both;
}

@keyframes gk-mm-panel-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Stays put while a long panel scrolls, so the way back is always in reach. */
#mobile_menu .gk-mm-back {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #EEF2F7;
}

#mobile_menu .gk-mm-back button {
  justify-content: flex-start;
  color: #082648;
  cursor: pointer;
}

/* Arrows: the theme's accordion chevron is swapped for a direction arrow in JS,
   which also means the rotations it applies to that chevron have to go. */
#mobile_menu li a span.icon-down-arrow.gk-mm-arrow {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  min-width: 44px;
  padding: 0 !important;
  color: #082648;
}

#mobile_menu .gk-mm-arrow svg,
#mobile_menu .gk-mm-back svg {
  display: block;
  flex: 0 0 auto;
  transform: none !important;
}

/* Account rows sit in a strip at the foot of the drawer, with anything after
   them (the language / currency switcher) carried down too. */
#mobile_menu .gk-mm-account {
  margin-top: auto;
  background: #EEF2F7;
}

#mobile_menu .gk-mm-account ~ .gk-mm-account {
  margin-top: 0;
}

#mobile_menu .gk-mm-account a {
  justify-content: flex-start;
  gap: 14px;
  font-size: 14px;
  color: #082648;
}

#mobile_menu .gk-mm-account__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 19px;
}

p.mobile-mega-menu__image-caption {
  color: #000000;
  font-family: var(--gk-font-body);
}

li.mobile-mega-menu_block.sublink a.parent-link--false,
li.mobile-mega-menu_block.sublink a {
  color: #000000 !important;
  font-family: var(--gk-font-body);
}


/* =========================
   HERO BANNER
========================= */

.gk-hero-first-banner .gk-image-banner-image {
  position: relative;
}

.gk-hero-first-banner .gk-image-banner-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(10, 8, 6, 0.225) 100%);
  pointer-events: none;
  z-index: 1;
}

.gk-hero-first-banner .gk-image-banner-head-button {
  position: absolute;
  z-index: 2;
  left: 80px;
  bottom: 120px !important;
}


/* =========================
   IMAGE GALLERY
========================= */

.gk-image-gallery h2.title.center {
  font-family: var(--gk-font-heading);
  font-size: clamp(28px, calc(28px + (48 - 28) * ((100vw - 375px) / (1600 - 375))), 48px);
  line-height: clamp(38px, calc(38px + (58 - 38) * ((100vw - 375px) / (1600 - 375))), 58px);
  font-weight: 500;
  margin: 0;
  color: #0D1F35;
  text-transform: capitalize;
}

.gk-image-gallery .gk-gallery-eyebrow p {
  font-family: var(--gk-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: #082648;
  margin: 0;
}

.gk-image-gallery .gk-gallery-eyebrow {
  padding-bottom: 12px;
}

.gk-image-gallery .feature-divider {
  margin-bottom: 48px;
}

.gk-image-gallery .gk-low-button {
  padding-top: 48px;
}

.gk-image-gallery .gk-low-button a {
    display: inline-block;
    padding: 15px 32px;
    background: transparent;
    color: #0D1F35;
    text-decoration: none;
    font-size: clamp(14px, 1vw, 16px);
    line-height: clamp(24px, 1.6vw, 26px);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.25s, color 0.25s, border 0.25s;
    border: 1px solid #0D1F35;
}

.gk-image-gallery .gk-low-button a:hover,
.gk-image-gallery .gk-low-button a:focus-visible {
    background: #082648;
    color: #ffffff;
    border-color: #082648;
}

.gk-image-gallery .gallery-section.gallery-masonry .four-per-row {
  margin: 0;
}


/* =========================
   INSTAFEED (app block)
========================= */

/* The app block sits in the generic `apps` section, which renders full-bleed.
   Constrain the column it lives in to the same box as `.section` (see GLOBAL
   LAYOUT above) so the feed lines up with the gallery section above it. */
.shopify-section:has(#insta-feed) .container > .one-whole.column {
  max-width: 1600px;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}

/* Below 600px the gallery goes edge-to-edge for its Splide carousel
   (see sections/gallery.liquid) — follow it so the two still line up. */
@media screen and (max-width: 600px) {
  .shopify-section:has(#insta-feed) .container > .one-whole.column {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Same vertical rhythm as the gallery. The gallery gets these from its section
   settings (padding_top/bottom_desktop|mobile in templates/index.json, printed
   by sections/gallery.liquid), which the `apps` section has no equivalent for —
   so they are hard-coded here, including the gallery's 768px breakpoint. */
.shopify-section:has(#insta-feed) {
  padding-top: 20px;
  padding-bottom: 80px;
  background: #EEF2F7;
}

@media screen and (max-width: 768px) {
  .shopify-section:has(#insta-feed) {
    padding-top: 20px;
    padding-bottom: 40px;
  }
}

/* Match the gallery's `h2.title.center`. The app prints `body #insta-feed h2`
   inline, so the `.shopify-app-block` class here is what outweighs it. */
.shopify-app-block #insta-feed h2 {
  font-family: var(--gk-font-heading);
  font-size: clamp(28px, calc(28px + (48 - 28) * ((100vw - 375px) / (1600 - 375))), 48px);
  line-height: clamp(38px, calc(38px + (58 - 38) * ((100vw - 375px) / (1600 - 375))), 58px);
  font-weight: 500;
  color: #0D1F35;
  text-transform: capitalize;
  text-align: center;
  /* Gallery spacing is h2 (margin 0) + .feature-divider (margin-bottom 48px). */
  margin: 0 0 48px;
}

/* The Instafeed app prints its own <style> inline in the body, so it wins on
   document order. These selectors add the `.shopify-app-block` ancestor to
   outweigh the app's `.instafeed-bottom-link-wrapper[data-feed-id="0"] a`
   and restyle its profile link as the outline button used by the gallery. */
.shopify-app-block .instafeed-bottom-link-wrapper[data-feed-id] {
  padding-top: 48px;
  /* Two buttons now live here (the app's Instagram link + the Facebook link
     injected by gk-instafeed.js), so lay them out as a centred row that wraps
     onto two lines when they no longer fit side by side. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.shopify-app-block .instafeed-bottom-link-wrapper[data-feed-id] a {
  display: inline-block;
  padding: 15px 32px;
  margin-top: 0;
  background: #082648;
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(14px, 1vw, 16px);
  line-height: clamp(24px, 1.6vw, 26px);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.25s, color 0.25s, border 0.25s;
}

/* Drop the app's animated underline bar — the border is the button now. */
.shopify-app-block .instafeed-bottom-link-wrapper[data-feed-id] a:after {
  display: none;
}

/* Hover taken from the image banner's button (sections/gk-image-banner.liquid):
   it fills #164B7A rather than the gallery button's #082648. Base state stays
   the gallery's outline treatment. */
.shopify-app-block .instafeed-bottom-link-wrapper[data-feed-id] a:hover,
.shopify-app-block .instafeed-bottom-link-wrapper[data-feed-id] a:focus-visible {
  background: #164B7A;
  color: #ffffff;
  border-color: #164B7A;
}


/* =========================
   FEATURED COLLECTION
========================= */

.gk-featured-collection h2.title {
  font-family: var(--gk-font-heading);
  font-size: clamp(28px, calc(28px + (48 - 28) * ((100vw - 375px) / (1600 - 375))), 48px);
  line-height: clamp(38px, calc(38px + (58 - 38) * ((100vw - 375px) / (1600 - 375))), 58px);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0;
  color: #0D1F35;
  text-transform: capitalize;
}

.gk-featured-collection .feature-divider {
  margin-bottom: 48px;
}

.gk-featured-collection .slider-gallery {
  margin: 0;
}

.gk-featured-collection .homepage-product-slider.even-num-slides {
  max-width: 1600px;
  width: 90%;
  margin: 0 auto;
}

.gk-featured-collection .relative.product_image {
  background: #ffffff;
}

/* Featured Collection — Product Card */

/* Same stacking as the collection pages: price under the title, title at the
   card's full width. */
.gk-featured-collection .product-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-bottom: 8px;
}

.gk-featured-collection .loox-rating {
    line-height: 1;
}

.gk-featured-collection .jdgm-preview-badge {
    line-height: 1;
}

.gk-featured-collection a.product-info__caption {
  margin-top: 6px !important;
}

.gk-featured-collection span.title {
  font-family: var(--gk-font-heading);
  font-size: 18px !important;
  line-height: 30px !important;
  font-weight: 500;
  margin: 0;
  text-align: start;
  color: #0D1F35;
  /* Two lines tall even for a one-line name, so prices line up across the slider. */
  min-height: 60px;
}

.gk-featured-collection .product-wrap:hover span.title {
  color: #164B7A;
}

.gk-featured-collection span.price {
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 700;
  text-align: start;
}

.gk-featured-collection .price span {
  font-family: var(--gk-font-body);
  color: #082648 !important;
  font-weight: 700;
}

.gk-featured-collection small.from {
  font-family: var(--gk-font-body);
  color: #082648 !important;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 20px;
}

.gk-featured-collection .sold_out {
  color: #082648;
  font-family: var(--gk-font-body);
  font-weight: 700;
  line-height: 30px;
  text-wrap: nowrap;
  display: none;
}

/* Featured Collection — Badges */

.gk-featured-collection .price-ui-badges.price-ui-badges--square {
  position: absolute;
  top: 12px;
  left: 12px;
}

.gk-featured-collection .price-ui-badge__sticker--sold-out {
    font-family: var(--gk-font-body);
    background-color: #082648;
    padding: 3px 7px;
    opacity: 0.8;
        line-height: 1;
}

/* Featured Collection — Ratings */

.gk-featured-collection .loox-rating .loox-icon {
  color: #EEBD54;
}

.gk-featured-collection svg.loox-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.gk-featured-collection span.loox-rating-label {
  font-size: 14px !important;
  line-height: 14px;
  color: #0D1F35;
  font-family: var(--gk-font-body);
}

/* Featured Collection — Judge.me Ratings (ported from the Loox rules above) */

.gk-featured-collection .jdgm-prev-badge .jdgm-star {
  color: #EEBD54;
  font-size: 14px;
  flex-shrink: 0;
}

.gk-featured-collection .jdgm-prev-badge__text {
  font-size: 14px !important;
  line-height: 14px;
  color: #0D1F35;
  font-family: var(--gk-font-body);
}

.gk-featured-collection .rating__star-wrapper {
  display: flex;
  gap: 4px;
}

.gk-featured-collection .rating__star-wrapper svg {
  width: 14px;
  height: 14px;
}

.gk-featured-collection .rating__count {
  margin: 0 0 0 5px;
  font-size: 14px;
  line-height: 14px;
  font-family: var(--gk-font-body);
  font-weight: 500;
}

.gk-featured-collection p.rating__count span {
  color: #0D1F35;
}

/* Featured Collection — Button */

.gk-featured-collection .gk-featured-collection-button {
  text-align: center;
  padding-top: 48px;
}

.gk-featured-collection .gk-featured-collection-button a {
    display: inline-block;
    padding: 14px 32px;
    border: 1px solid #082648;
    font-family: var(--gk-font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    background: #082648;
}

.gk-featured-collection .gk-featured-collection-button a:hover {
    background: #164B7A;
    border-color: #164B7A;
}

/* Featured Collection — Slider */

button.gk-slider-btn.gk-slider-btn--prev.is-disabled {
  position: absolute;
  z-index: 999;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

button.gk-slider-btn.gk-slider-btn--next {
  position: absolute;
  z-index: 999;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.flickity-prev-next-button.next {
  width: 36px;
  height: 36px;
}

.flickity-prev-next-button.next::before {
  content: "";
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='36' height='36' transform='matrix(-1 0 0 1 36 0)' fill='%231A1614'/%3E%3Cpath d='M22.3334 18.0013H13.3334' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.6667 22.0014C18.6667 22.0014 22.6666 19.0554 22.6666 18.0013C22.6666 16.9472 18.6666 14.0013 18.6666 14.0013' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}


/* =========================
   PRODUCT CARDS — SHARED
========================= */

.product-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.thumbnail .product-wrap {
  transition: transform 0.3s ease;
  transform: scale(1);
  will-change: transform;
}

.thumbnail:hover .product-wrap {
  transform: scale(1.02);
}

.product_image .image__container {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
}

.product_image .image-element__wrap {
  width: 100% !important;
  height: 100%;
}

.product_image .image-element__wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shared Badges */

.gk-coll-page .thumbnail .price-ui-badges {
  top: 10px;
  left: 10px;
  width: max-content;
}

.gk-coll-page .card-container {
    width: 100%;
}

.gk-coll-page .price-ui-badge__sticker--sold-out {
  font-family: var(--gk-font-body);
  background-color: #082648;
  padding: 3px 7px;
  opacity: 0.8;
  line-height: 1;
}

span.price-ui-badge__sticker-text {
  font-family: var(--gk-font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-transform: capitalize;
  color: #ffffff;
}


/* =========================
   COLLECTION PAGE
========================= */

.shopify-section--collection-template {
  background: #EEF2F7;
}

.gk-coll-page .one-half.column.medium-down--one-whole {
  width: 100%;
}

.gk-coll-page span.current_price .from {
    display: none;
}

/* Collection — Header */

.gk-coll-page .one-half.column.medium-down--one-whole h1 {
  font-size: 40px;
  line-height: 50px;
  letter-spacing: 0%;
  color: #0D1F35;
  font-family: var(--gk-font-heading);
  font-weight: 500;
  text-transform: capitalize;
  padding: 0;
  margin: 0;
}

.gk-coll-page div.breadcrumb-collection {
  margin-bottom: 36px;
}

.gk-coll-page .breadcrumb_text {
  font-size: 16px;
  line-height: 21px;
  font-family: var(--gk-font-body);
  text-align: start;
}

.gk-coll-page .breadcrumb_text a span {
  color: #0D1F35;
}

.gk-coll-page .breadcrumb_link span {
  color: #082648 !important;
}

.gk-coll-page .breadcrumb_link span:hover {
  color: #0D1F35 !important;
}

span.breadcrumb-divider {
  color: #0D1F35 !important;
}

/* Collection — Sorting Bar */

.gk-coll-page .gk-pc-sorting {
  display: flex;
  border-top: 1px solid rgba(13, 31, 53, 0.3);
  border-bottom: 1px solid rgba(13, 31, 53, 0.3);
  padding: 20px 0;
  margin-top: 36px;
  padding-left: clamp(20px, 5vw, 85px);
  padding-right: clamp(20px, 5vw, 85px);
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

.gk-coll-page .gk-cp-pc {
  width: 50%;
  display: flex;
  align-items: center;
}

.gk-coll-page .gk-cp-sorting {
  width: 50%;
  display: flex;
  justify-content: end;
  gap: 12px;
  align-items: center;
}

.gk-coll-page .gk-cp-pc p {
  font-weight: 700;
  font-size: 15.5556px;
  line-height: 27px;
  text-transform: uppercase;
  color: #0D1F35;
  margin: 0;
}

.gk-cp-pc span {
  font-weight: 500;
}

.gk-coll-page p.gk-sort-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 35px;
  color: #0D1F35;
  margin: 0;
  font-family: var(--gk-font-body);
}

.gk-cp-sorting select#sort-by {
  border: 1px solid #0D1F35;
  padding: 8px 45px 8px 12px;
  font-size: 16px;
  font-family: var(--gk-font-body);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 7.50004C15 7.50004 11.3176 12.5 10 12.5C8.68233 12.5 5 7.5 5 7.5' stroke='%23141B34' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;

  font-weight: 400;
  text-transform: capitalize;

  width: auto;
  min-width: 180px;
  max-width: 100%;
  white-space: nowrap;
}



.section_select .sort_by {
  background-color: transparent;
}

/* Collection — Product Grid */

.gk-coll-page .product-list {
  width: 100%;
  row-gap: 32px;
  column-gap: 20px;
}

/* "Products per row" fix.

   Turbo spaces grid items with 10px side margins, and its widths already
   account for them: calc(100/n% - (20px - 20/n px)) + margins == exactly 100%
   for any n. The `column-gap: 20px` above adds a second, independent gutter on
   top of that, pushing each row to 100% + 20(n-1)px so one item always wraps —
   set 3 and you get 2, set 5 and you get 4.

   This previously only zeroed the margins for `.one-fourth` via a hardcoded
   class chain, which is why 4-per-row was the one setting that worked. Zero
   them for every column width instead, so column-gap is the single source of
   spacing and the grid fits at 100% for any per-row value.

   Specificity (0,4,0) is deliberate — it has to outrank Turbo's
   `.equal-columns--outside-trim .one-third:nth-of-type(3n)` trim rules (0,3,0)
   and the `.container .column` base margin (0,2,0). */

.gk-coll-page .product-list.equal-columns--outside-trim > .column {
  margin-left: 0;
  margin-right: 0;
}

/* Price sits under the title so the title gets the card's full width — beside
   the price it only had ~170px and most product names were cut off. */
.gk-coll-page .product-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 8px;
  gap: 4px;
}

.gk-coll-page small.from {
    font-family: var(--gk-font-body);
    color: #082648 !important;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 20px;
}

.gk-coll-page span.price {
    text-align: start;
}

.gk-coll-page small.from em {
    font-style: normal;
}

.gk-coll-page a.product-info__caption {
  margin-top: 6px !important;
}

.gk-coll-page span.title {
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  text-transform: capitalize;
  color: #0D1F35;
  font-family: var(--gk-font-heading);
  text-align: start;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Three lines so long product names show in full; the two-line min-height
     keeps prices level across a row (raised to three lines at 799–1280px,
     where the cards are narrow enough for names to need it). */
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 60px;
  margin: 0;
}

.gk-coll-page span.money {
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  text-transform: capitalize;
  color: #082648 !important;
  font-family: var(--gk-font-body);
}

.gk-coll-page .sold_out {
  display: none;
}

/* Collection — Ratings */

.gk-coll-page .loox-rating {
  text-align: left;
      line-height: 1;
}

.gk-coll-page .loox-rating .loox-icon {
  color: #EEBD54;
}

.gk-coll-page svg.loox-icon {
  width: 14px;
  height: 14px;
}

.gk-coll-page span.loox-rating-label {
  font-size: 14px !important;
  line-height: 14px;
}

/* Collection — Judge.me Ratings (ported from the Loox rules above) */

.gk-coll-page .jdgm-preview-badge {
  text-align: left;
  line-height: 1;
}

.gk-coll-page .jdgm-prev-badge .jdgm-star {
  color: #EEBD54;
  font-size: 14px;
}

.gk-coll-page .jdgm-prev-badge__text {
  font-size: 14px !important;
  line-height: 14px;
}

.gk-coll-page .rating__star-wrapper {
  display: flex;
  gap: 4px;
}

.gk-coll-page .rating__star-wrapper svg {
  width: 14px;
  height: 14px;
}

.gk-coll-page p.rating__count {
  font-size: 14px;
  line-height: 14px;
  font-family: var(--gk-font-body);
  font-weight: 500;
}

.gk-coll-page p.rating__count span {
  color: #0D1F35;
}

/* Collection — Layout */

.gk-coll-page .feature-divider {
  margin-bottom: 36px;
}

.gk-coll-page div.content {
  padding: 24px 0 80px;
}

.gk-coll-page span.js-load-more.load-more {
  display: none;
}


/* =========================
   PRODUCT PAGE
========================= */

/* .gk-pg-main span.child-span-registry-button {
    color: #0D1F35;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1.4px;
}

.gk-pg-main .myregistry-add-button {
    background: transparent !important;
    color: #0D1F35 !important;
} */


.gk-pg-main .product_gallery img {
    background-color: transparent;
}



.product .nav_arrows.breadcrumb_text {
  display: none;
}

.product .section-wrapper {
  background: #EEF2F7;
}

.gk-pg-tabs-wrapper .star {
    color: #EEBD54 !important;
}

/* Product Page — Header */

.gk-pg-main h1.product_name {
  font-weight: 500;
  font-size: 40px;
  line-height: 50px;
  color: #0D1F35;
  font-family: var(--gk-font-heading);
  padding: 0;
  margin-bottom: 0;
  text-transform: capitalize;
}

.gk-pg-main .description h4 {
    font-family: var(--gk-font-body);
    text-transform: capitalize;
    padding: 0;
}

.gk-pg-main .description h4 span {
    font-family: var(--gk-font-body) !important;
    text-transform: capitalize;
}

.gk-pg-main p.warning {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    font-family: var(--gk-font-body);
    line-height: 1.3;
    margin-top: 15px;
}

.gk-pg-main .product__details--product-page .price-ui .sold_out {
    font-size: 48px;
    line-height: 58px;
    color: #082648;
    font-weight: 700;
    font-family: var(--gk-font-body);
}

.gk-pg-main .notify-form p {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: #0D1F35;
    font-family: var(--gk-font-body);
    font-weight: 400;
    padding: 4px 0;
}

.gk-pg-main .notify-form input.global-button.global-button--primary {
    background: #082648;
    border-color: #082648;
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
    font-family: var(--gk-font-body);
}

.gk-pg-main .notify-form input.global-button.global-button--primary:hover {
    background: #164B7A;
    border-color: #164B7A;
}

.gk-pg-main .price-ui-badge__sticker--sold-out {
    font-family: var(--gk-font-body);
    background-color: #082648;
    padding: 5px 10px;
    opacity: 0.8;
}

.gk-pg-main .gk-breadcrumb-text span {
  color: #0D1F35 !important;
}

.gk-pg-main .breadcrumb_link span {
  color: #082648;
}

/* Product Page — Pricing & Text */

.gk-pg-main .product-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.gk-pg-main .product-text p {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: #0D1F35;
    font-family: var(--gk-font-body);
    font-weight: 400;
    padding-bottom: 30px;
        letter-spacing: 1.4px;
}

.gk-pg-main .product-text p a {
  text-decoration-line: underline;
  color: #082648;
}

.gk-pg-main .gk-star-rating {
  margin-top: 0;
}

.gk-pg-main span.money {
  font-size: 48px;
  line-height: 58px;
  color: #082648;
  font-weight: 700;
  font-family: var(--gk-font-body);
}

.gk-pg-main .product-block--price {
  padding-top: 20px;
  padding-bottom: 20px;
}

.gk-pg-main .product_section .modal_price {
  padding: 0;
  margin: 0;
}

.gk-pg-main .payment-terms-container {
  display: none;
}

.gk-pg-main .feature-divider {
  display: none;
}

/* Product Page — Description */

.gk-pg-main .product-block--description .description .rte p {
  font-size: 16px;
  line-height: 26px;
  color: #0D1F35;
  font-family: var(--gk-font-body);
  font-weight: 300;
}

/* Product Page — Purchase Controls */

.gk-pg-main .swatch_options {
  margin-bottom: 1rem;
  display: none;
}

.gk-pg-main .purchase-details__quantity.product-quantity-box label {
  display: none;
}

.gk-pg-main .gk-quantity-add-to-cart {
  display: grid;
  grid-template-columns: 35% 65%;
  width: 100%;
}

.gk-pg-main .myregistry {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    background: transparent !important;
    color: #0D1F35 !important;
    text-align: left !important;
    padding-left: 20px !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 1.4px !important;
    margin-top: 20px !important;
}

/* #infoIcon {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%231A1614' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V12' stroke='%231A1614' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.125 8.25H12M12.25 8.25C12.25 8.11193 12.1381 8 12 8C11.8619 8 11.75 8.11193 11.75 8.25C11.75 8.38807 11.8619 8.5 12 8.5C12.1381 8.5 12.25 8.38807 12.25 8.25Z' stroke='%231A1614' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  background-position: center !important;
} */

/* .gk-pg-main .mr-itsuniversal {
    bottom: 13px !important;
    top: 13px !important;
    right: 20px !important;
} */

.gk-pg-main span.mr-watermark {
    font-size: 10px !important;
    line-height: 20px !important;
    letter-spacing: 0.3px !important;
}

.gk-pg-main .smart-payment-button--true .product-quantity-box.purchase-details__quantity {
  width: calc(100% - 20px);
  margin-right: 0;
  border: 1px solid #0D1F35;
}

.gk-pg-main .add--to--cart {
  display: none;
}

.gk-pg-main .ss-icon {
  background: transparent !important;
  border: 0;
}

.gk-pg-main input[type=number] {
  border: 0 !important;
}

.gk-pg-main .product-quantity-box.purchase-details__quantity input.quantity {
  font-size: 16px;
  line-height: 35px;
  color: #0D1F35;
  font-family: var(--gk-font-body);
  background: transparent;
}

.gk-pg-main .product-quantity-box .product-plus,
.gk-pg-main .product-quantity-box .product-minus {
  height: 48px;
}

.gk-pg-main .product-quantity-box .product-plus {
  right: 0;
  display: flex;
  align-items: center;
}

.gk-pg-main .product-quantity-box .product-minus {
  left: 15%;
  display: flex;
  align-items: center;
}

.gk-pg-main .smart-payment-button--true .purchase-details {
  padding-bottom: 0;
  padding-top: 17px;
}

.gk-pg-main .purchase-details__buttons.purchase-details__spb--true {
  margin-top: 20px;
}

/* Product Page — Buttons */

.gk-pg-main button.add_to_cart.global-button.global-button--secondary.ajax-submit {
  background: #082648;
  color: #ffffff;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 1.4px;
  font-family: var(--gk-font-body);
  font-weight: 400;
  /* Keep in step with .gk-buy-it-now in snippets/product-form.liquid — the two
     buttons sit one above the other and must read as one pair. */
  text-transform: uppercase;
}

.gk-pg-main button.add_to_cart.global-button.global-button--secondary.ajax-submit:hover {
  background: #164B7A;
  border-color: unset;
}

.gk-pg-main .purchase-details__buttons.purchase-details__spb--true .shopify-payment-button {
  margin-left: 0;
  max-width: 100%;
}

.gk-pg-main .shopify-payment-button {
  height: auto;
}

.gk-pg-main .shopify-payment-button__more-options {
  font-size: 16px;
  line-height: 20px;
  margin-top: 20px;
  letter-spacing: 1.4px;
  color: #082648;
  font-family: var(--gk-font-body);
}

/* Product Page — Ratings */

.gk-pg-main .loox-rating .loox-icon {
  color: #EEBD54 !important;
}

.gk-pg-main .loox-rating .loox-rating-content {
  gap: 4px;
}

.gk-pg-main .loox-rating-content svg {
  width: 18px !important;
  height: 18px !important;
}

span.loox-rating-label {
  font-size: 16px !important;
  line-height: 26px;
  color: #0D1F35;
  font-weight: 500;
  font-family: var(--gk-font-body);
}

/* Product Page — Judge.me Ratings (ported from the Loox rules above) */

.gk-pg-main .jdgm-prev-badge .jdgm-star {
  color: #EEBD54 !important;
  font-size: 18px !important;
}

/* Product page keeps Loox's tighter 4px star spacing. Scoped through
   .jdgm-preview-badge so it outranks the global __stars rule at the end of
   this file, which forces inline-block everywhere else. */
.gk-pg-main .jdgm-preview-badge .jdgm-prev-badge__stars {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

/* Default label size; the scoped card rules above narrow this to 14px. */
.jdgm-prev-badge__text {
  font-size: 16px !important;
  line-height: 26px;
  color: #0D1F35;
  font-weight: 500;
  font-family: var(--gk-font-body);
}

/* Product Page — Gallery */

.gk-pg-main .image-element__wrap {
  height: 100%;
}

.gk-pg-main .flickity-prev-next-button svg {
  padding: 0;
}

.gk-pg-main .flickity-prev-next-button {
    height: 36px !important;
    background: transparent;
    top: 50%;
    transform: translateY(-50%);
}

.gk-pg-main flickity-prev-next-button .flickity-button-icon {
  display: block !important;
}

.gk-pg-main .gallery-thumbnails--left .product_gallery_nav .gallery-cell {
  margin: 0 0 12px;
  opacity: 1;
}

/* .gk-pg-main .product-block.product-block--\@app {
  position: relative;
} */

/* Product Page — Policies Block */

.gk-pg-main .gk-pg-policies-block p {
  font-size: 14px !important;
  line-height: 24px;
  letter-spacing: 1.4px;
  font-weight: 400;
}

.gk-pg-main .gk-pg-policies-block p a {
  color: #082648;
  text-decoration: underline;
}


/* =========================
   HOME PAGE — FOUNDER NOTE
========================= */

.gk-hp-fn .image-with-text-container {
  margin-top: 80px !important;
  margin-bottom: 80px !important;
  padding: 32px;
  background: #ffffff;
}

.index .shopify-section--image-with-text {
  background: rgba(8, 38, 72, 0.0784314);
}


/* =========================
   OUR STORY PAGE
========================= */

.shopify-section--rich-text-and-image {
  padding-top: clamp(60px, calc(60px + (80 - 60) * ((100vw - 375px) / (1600 - 375))), 80px);
  padding-bottom: clamp(60px, calc(60px + (80 - 60) * ((100vw - 375px) / (1600 - 375))), 80px);
  background: #EEF2F7;
}

/* .page-our-story .gk-os-fn {
    padding-top: 0;
    padding-bottom: 0;
} */

.shopify-section--image-with-text {
  background: #EEF2F7;
}

.page-our-story .gk-multi-column-card {
    align-items: center;
}


.page-our-story .gk-multi-column-container {
  background: #082648;
  padding-top: 80px;
  padding-bottom: 80px;
}

.page-our-story .gk-multi-column-heading p {
  color: #ffffff;
}

.page-our-story .image-with-text-container {
  padding: 32px;
  background: #ffffff;
  margin-top: 80px !important;
  margin-bottom: 80px !important;
}

.page-our-story .featured-link--half .description {
  margin-bottom: 0;
}

/* Our Story — Rich Text */

.os-richtext h2.rich-text__heading.title {
  font-size: clamp(24px, calc(24px + (48 - 24) * ((100vw - 375px) / (1600 - 375))), 48px);
  line-height: clamp(34px, calc(34px + (58 - 34) * ((100vw - 375px) / (1600 - 375))), 58px);
  color: #0D1F35;
  font-family: var(--gk-font-heading);
  margin: 0;
  text-transform: capitalize;
  font-weight: 500;
}

.os-richtext h2.rich-text__heading.title p {
  line-height: clamp(34px, calc(34px + (58 - 34) * ((100vw - 375px) / (1600 - 375))), 58px);
}

.os-richtext .rich-text__text.featured_text {
  font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / (1600 - 375))), 20px);
  line-height: clamp(26px, calc(26px + (30 - 26) * ((100vw - 375px) / (1600 - 375))), 30px);
  font-family: var(--gk-font-body);
  font-weight: 300;
  color: #0D1F35;
  margin-top: 48px;
}

.os-richtext .feature-divider {
  display: none;
}

/* Our Story — Founder Section */

/* .gk-os-fn {
  padding-top: 60px;
  padding-bottom: 60px;
} */

.gk-os-fn .image-with-text__text-column {
  background: transparent;
}

.gk-os-fn .info.text-align--left {
  padding: 0;
  margin: 0;
}

.gk-os-fn a.collection_title {
  font-size: clamp(24px, calc(24px + (48 - 24) * ((100vw - 375px) / (1600 - 375))), 48px);
  line-height: clamp(34px, calc(34px + (58 - 34) * ((100vw - 375px) / (1600 - 375))), 58px);
  color: #0D1F35;
  font-family: var(--gk-font-heading);
  margin: 0 !important;
  text-transform: capitalize;
  font-weight: 500;
  padding: 0;
}

.gk-os-fn .is-flex {
  display: flex;
  justify-content: center;
  margin: 0 !important;
}

.gk-os-fn .description p {
  font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / (1600 - 375))), 20px);
  line-height: clamp(26px, calc(26px + (30 - 26) * ((100vw - 375px) / (1600 - 375))), 30px);
  font-family: var(--gk-font-body);
  font-weight: 300;
  color: #0D1F35;
  margin: 32px 0 0 0;
}

.gk-os-fn strong {
  color: #082648;
  font-weight: 600;
}

.gk-os-fn .featured-link--half .info {
  width: 100%;
  padding: 23px 0 23px 48px;
}

.gk-os-fn .image-with-text__image-column {
  margin: 0 !important;
}


/* =========================
   BLOG PAGE
========================= */

.blog-pagination-wrap {
  padding: 32px 0 80px !important;
  background: #EEF2F7;
}


/* =========================
   BLOG ARTICLE
========================= */

.article .section-wrapper {
  background: #ffffff;
}

.article .breadcrumb {
  display: none;
}

section.blog-article.section {
  padding-top: 80px;
}

.blog-article__main.sidebar-enabled--false {
  width: 100%;
}

.blog-article .rte.has-padding-top img {
    width: 100%;
    height: 850px;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .blog-article .rte.has-padding-top img {
        height: auto;
        object-fit: cover;
    }
}

.blog-article__main.sidebar-enabled--false.container.content {
  padding: 0;
}

.blog-article h1.align_left.article_title {
  font-family: var(--gk-font-heading);
  font-size: clamp(24px, calc(24px + (48 - 24) * ((100vw - 375px) / (1600 - 375))), 48px);
  line-height: clamp(34px, calc(34px + (58 - 34) * ((100vw - 375px) / (1600 - 375))), 58px);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0;
  color: #0D1F35;
  text-transform: math-auto;
  padding-bottom: 12px;
}

.blog-article .feature-divider {
  display: none;
}

.blog-article p.blog_meta span {
  font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / (1600 - 375))), 20px);
  line-height: clamp(26px, calc(26px + (30 - 26) * ((100vw - 375px) / (1600 - 375))), 30px);
  color: #082648;
  font-weight: 300;
  margin-bottom: 20px;
  font-family: var(--gk-font-body);
}

/* Blog Article — First Paragraph */

.blog-article .rte.article-first-paragraph p {
  font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / (1600 - 375))), 20px);
  line-height: clamp(26px, calc(26px + (30 - 26) * ((100vw - 375px) / (1600 - 375))), 30px);
  color: #0D1F35;
  font-weight: 300;
  letter-spacing: 0;
  margin-bottom: 48px;
  font-family: var(--gk-font-body);
  text-align: start !important;
}

/* Blog Article — Body Content */

.blog-article .rte.has-padding-top {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #EEF2F7;
  padding-left: 75px;
  padding-right: 75px;
  padding-top: 80px;
}

.blog-article .rte.has-padding-top p {
  font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / (1600 - 375))), 20px);
  line-height: clamp(26px, calc(26px + (30 - 26) * ((100vw - 375px) / (1600 - 375))), 30px);
  color: #0D1F35;
  font-weight: 300;
  letter-spacing: 0;
  font-family: var(--gk-font-body);
  text-align: start !important;
}

.blog-article .rte.has-padding-top p:last-of-type {
  margin: 0;
  padding-bottom: 80px;
}

.blog-article .rte.has-padding-top p strong {
  font-size: clamp(20px, calc(20px + (40 - 20) * ((100vw - 375px) / (1600 - 375))), 40px);
  line-height: clamp(30px, calc(30px + (50 - 30) * ((100vw - 375px) / (1600 - 375))), 50px);
  font-family: var(--gk-font-heading);
  font-weight: 500;
  letter-spacing: 0;
  text-align: start !important;
}

.blog-article .rte.has-padding-top p b {
  font-size: clamp(20px, calc(20px + (40 - 20) * ((100vw - 375px) / (1600 - 375))), 40px);
  line-height: clamp(30px, calc(30px + (50 - 30) * ((100vw - 375px) / (1600 - 375))), 50px);
  font-family: var(--gk-font-heading);
  font-weight: 500;
  letter-spacing: 0;
  text-align: start !important;
}

.blog-article .image-element__wrap {
  padding-bottom: 80px;
}

.blog-article .image-element__wrap img {
    height: 598px;
    width: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .blog-article .image-element__wrap img {
        height: auto;
    }
}

.blog-article a {
    color: #082648;
}



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

.footer_menu .toggle_content ul li p a {
  text-transform: uppercase;
}

footer.gk-footer-container.footer {
  background-color: #051828;
  padding-top: 80px;
  padding-bottom: 40px;
}

footer.gk-footer-container.footer .section {
  max-width: 100%;
}

.gk-footer-container img.footer-logo {
  width: 75%;
  max-width: 250px;
  margin-bottom: 10px;
  display: inline-block;
  margin: 0;
}

.gk-footer-container .footer_menu,
.gk-footer-container .footer_content.footer-text {
  width: max-content;
}

.gk-footer-container .container.footer-menu-wrap {
  padding: 0;
}

.footer-menu-wrap .column {
  float: none !important;
  display: block !important;
}

/* Footer — Description */

.gk-foter-desc {
  padding-top: 15px;
}

.gk-foter-desc p {
  font-family: var(--gk-font-body);
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: 0;
  color: #ffffff;
}

/* Footer — Newsletter */

.gk-footer-container .newsletter_section h6 {
  font-family: var(--gk-font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  text-transform: capitalize;
  padding: 0;
  margin: 0;
}

.gk-footer-container .newsletter_section h6 p {
  font-family: var(--gk-font-heading);
  font-size: 24px !important;
  line-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.gk-footer-container .newsletter_section p {
  font-family: var(--gk-font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  padding: 20px 0;
  margin: 0;
}

.gk-footer-container .newsletter {
  position: relative;
}

.gk-footer-container .contact_email {
  font-family: var(--gk-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.3);
  background: transparent;
  border: 1px solid #ffffff;
}

.gk-footer-container .contact_email::placeholder {
  font-family: var(--gk-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.3);
}

.gk-footer-container .contact_email:focus,
.gk-footer-container .contact_email:active {
  color: rgba(255, 255, 255, 0.3);
  outline: none;
  border: 1px solid #ffffff;
}

.gk-footer-container input.global-button.global-button--primary.newsletter-form__sign-up {
  position: absolute;
  right: 0;
  background: transparent;
  color: #ffffff;
  border: none;
  font-family: var(--gk-font-body);
  font-size: 14px;
  line-height: 1;
  text-align: end;
  padding: 16px 0;
  margin-right: 16px;
  letter-spacing: 0;
}

/* Footer — Menu Links */

.gk-footer-container .footer_menu h6,
.gk-footer-container .footer_content.footer-text h6 {
  font-family: var(--gk-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 0;
}

.gk-footer-container .toggle_content ul li a,
.gk-footer-container .footer_content.footer-text .toggle_content p {
  font-family: var(--gk-font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
}

.gk-footer-container .toggle_content ul li a:hover, .gk-footer-container .footer_content.footer-text .toggle_content p:hover {
    color: #B8CEDD;
}

.gk-footer-container .toggle_content ul {
  padding-top: 20px;
}

.gk-footer-container .toggle_content ul li p {
  margin-bottom: 14px;
}

.gk-footer-container .footer-text .toggle_content {
  padding-top: 20px;
}

.gk-footer-container .footer_content .toggle_content a {
  transition: color 0.3s ease;
}

.gk-footer-container .footer_content .toggle_content a:hover {
  color: #B8CEDD;
}

/* Footer — Social Icons */

.gk-footer-container ul.social_icons {
  display: flex;
  gap: 24px;
  padding: 0;
  margin: 0;
}

footer .social_icons a,
footer .social_icons a:visited {
  margin-bottom: 0 !important;
}

.gk-footer-container .icon-youtube,
.gk-footer-container .icon-instagram,
.gk-footer-container .icon-facebook {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-block;
}

.gk-footer-container .icon-youtube:before,
.gk-footer-container .icon-instagram:before,
.gk-footer-container .icon-facebook:before {
  content: "";
  position: absolute;
  inset: 0;
  /* The theme's icon-font rule sets width: 1em on every icon :before, which
     would cap the artwork at the font size instead of filling the link. */
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
}

.gk-footer-container .icon-youtube:before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.08334 14.1667C1.50119 11.4194 1.50119 8.58061 2.08334 5.83333C2.15983 5.55434 2.30762 5.30006 2.51218 5.09551C2.71674 4.89095 2.97101 4.74316 3.25001 4.66667C7.71955 3.92622 12.2805 3.92622 16.75 4.66667C17.029 4.74316 17.2833 4.89095 17.4878 5.09551C17.6924 5.30006 17.8402 5.55434 17.9167 5.83333C18.4988 8.58061 18.4988 11.4194 17.9167 14.1667C17.8402 14.4457 17.6924 14.6999 17.4878 14.9045C17.2833 15.1091 17.029 15.2568 16.75 15.3333C12.2805 16.0739 7.71953 16.0739 3.25001 15.3333C2.97101 15.2568 2.71674 15.1091 2.51218 14.9045C2.30762 14.6999 2.15983 14.4457 2.08334 14.1667Z' stroke='white' stroke-width='1.125' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.33333 12.5L12.5 10L8.33333 7.5V12.5Z' stroke='white' stroke-width='1.125' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.gk-footer-container .icon-instagram:before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1667 1.6665H5.83333C3.53214 1.6665 1.66666 3.53198 1.66666 5.83317V14.1665C1.66666 16.4677 3.53214 18.3332 5.83333 18.3332H14.1667C16.4679 18.3332 18.3333 16.4677 18.3333 14.1665V5.83317C18.3333 3.53198 16.4679 1.6665 14.1667 1.6665Z' stroke='white' stroke-width='1.125' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.3333 9.47476C13.4362 10.1683 13.3177 10.8766 12.9948 11.4989C12.6719 12.1213 12.161 12.6259 11.5347 12.9412C10.9084 13.2564 10.1987 13.3661 9.50649 13.2547C8.81427 13.1433 8.1748 12.8165 7.67903 12.3207C7.18327 11.825 6.85645 11.1855 6.74506 10.4933C6.63367 9.80106 6.74339 9.09134 7.05861 8.46507C7.37383 7.83881 7.87849 7.32788 8.50082 7.00496C9.12316 6.68205 9.83146 6.56359 10.525 6.66643C11.2324 6.77133 11.8874 7.10098 12.3931 7.60669C12.8988 8.11239 13.2284 8.76733 13.3333 9.47476Z' stroke='white' stroke-width='1.125' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.5833 5.4165H14.5908' stroke='white' stroke-width='1.125' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.gk-footer-container .icon-facebook:before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 1.6665H12.5C11.3949 1.6665 10.3351 2.10549 9.55372 2.88689C8.77232 3.66829 8.33334 4.7281 8.33334 5.83317V8.33317H5.83334V11.6665H8.33334V18.3332H11.6667V11.6665H14.1667L15 8.33317H11.6667V5.83317C11.6667 5.61216 11.7545 5.4002 11.9107 5.24391C12.067 5.08763 12.279 4.99984 12.5 4.99984H15V1.6665Z' stroke='white' stroke-width='1.125' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Footer — Credits & Policies */

.gk-footer-container .one-whole.column.footer_credits {
  margin: 0;
  width: 100%;
}

.gk-footer-container .footer-social-icons.text-align--left {
    padding-top: 10px;
}

.gk-footer-container p.credits {
  font-family: var(--gk-font-body);
  font-size: 14px;
  line-height: 24px;
  padding: 0 !important;
  margin: 0;
  color: #B8CEDD;
}

.gk-footer-container p.credits a {
color: #B8CEDD;
}

.gk-footer-policies {
  display: flex;
  gap: 12px;
  font-family: var(--gk-font-body);
}

.gk-privacy-policy a {
  font-family: var(--gk-font-body);
  font-size: 14px;
  line-height: 24px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
      color: #B8CEDD !important;
}

.gk-privacy-policy a:hover {
  color: #ffffff !important;
}

/* Footer — Logo Image */

.gk-footer-logo-image {
  padding-top: 70px;
  padding-bottom: 32px;
  width: 100%;
}

.gk-footer-logo-image img {
  width: 70%;
  height: auto;
}

.gk-footer-logo-image a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-button-large {
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
}

.contact__form-success-svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.contact__form-success-svg svg {
    width: 20px;
    height: 20px;
}

.contact__form-success {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact__form-success p {
    margin: 0;
}




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

/* --- min-width: 1440px --- */

@media screen and (min-width: 1440px) {
  .gk-footer-logo-div.one-fifth.column.medium-down--one-whole {
    width: 330px;
  }
  .gk-empty-div.one-fifth.column.medium-down--one-whole {
    width: 155px;
  }
}

@media screen and (min-width: 1024px) {
    .gk-pg-main .gallery-wrap .product_gallery .gallery-cell .image__container img.product-gallery__image {
    object-fit: cover;
}
}


@media screen and (min-width: 799px) {
  .gk-pg-main .product__images {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: 50%;
  }
  .gk-pg-main .product__details {
    position: sticky;
    top: 0;
    align-self: flex-start;
  }
  .gk-pg-main .product__details.has-vts-buttons {
    margin-top: 15px;
  }
  .gk-pg-main .product-container,
  .gk-pg-main .gk-pg-main,
  .gk-pg-main .container,
  .gk-pg-main .section {
    overflow: visible !important;
  }

  .gk-pg-main .container{
    gap: 20px;
}

}


@media (min-width: 799px) and (max-width: 1024px) {
  .equal-columns--outside-trim .one-fourth {
    width: calc(33% - 15px);
  }
  .gk-pg-main h1.product_name {
    font-size: 28px;
    line-height: 38px;
}
.gk-pg-main span.money {
    font-size: 32px;
    line-height: 42px;
}
.gk-pg-main .product__details--product-page .price-ui .sold_out {
     font-size: 32px;
    line-height: 42px;
}
.gk-pg-main .product-block--price {
    padding-top: 15px;
    padding-bottom: 15px;
}

}

/* --- max-width: 1280px --- */

@media screen and (max-width: 1280px) {
  .gk-pg-main .gk-quantity-add-to-cart {
    grid-template-columns: 100%;
    gap: 16px;
  }
  .gk-pg-main .smart-payment-button--true .product-quantity-box.purchase-details__quantity {
    width: 100%;
  }
  .gk-os-fn .container.image-with-text-container {
    flex-direction: column;
  }
  .gk-os-fn gk-hp-fn .medium-down--sixteen,
  .gk-os-fn gk-hp-fn .medium-down--one-whole {
    width: 100%;
  }
  .gk-os-fn .featured-link--half .info {
    width: 100%;
    padding: 23px 0 0px 0px;
  }
  .gk-os-fn .image-with-text__image-column {
    margin: 0 !important;
    width: 100%;
  }
  .gk-os-fn .is-flex {
    display: flex;
    justify-content: center;
    margin: 0 !important;
    width: 100%;
  }
}


@media screen and (max-width: 989px) {
  .gk-featured-collection .price-ui-badge__sticker--sold-out {
    padding: 3px 5px;
}
span.price-ui-badge__sticker-text {
    font-size: 12px;
}
.gk-coll-page .price-ui-badge__sticker--sold-out {
    padding: 3px 5px;
}
}

/* --- min-width: 799px --- */

@media screen and (min-width: 799px) {
  .gk-pg-main .gallery-thumbnails--left .product_gallery_nav {
    width: 22.5%;
    margin-right: 2.5%;
  }

  .gallery-thumbnails--left .multi-image {
    width: 75%;
  }

  .gallery-thumbnails--left .multi-image.has-vts-buttons {
    margin-top: 40px;
  }

  .gallery-thumbnails--left .product_gallery_nav .gallery-cell {
    /* Responsive + definite, UNIFORM height: a square that scales with the
       column width, so the main image can equal exactly 4 thumbnails. */
    position: relative;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
  }
  /* Fill the square box regardless of each image's own aspect ratio.
     Absolute positioning takes the image out of flow so it can't stretch
     the cell (which is what broke uniform sizing before). */
  .gallery-thumbnails--left .product_gallery_nav .gallery-cell .image-element__wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none !important;
  }
  .gallery-thumbnails--left .product_gallery_nav .gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Flickity writes an inline pixel height (e.g. 476px) on its viewport based
     on the tallest image. Force the viewport + slider to fill .product_gallery
     instead, so the main image follows the JS-set 4-thumbnail height and stays
     responsive. !important overrides Flickity's inline style.

     Scoped to .multi-image deliberately — do not widen this back to
     .product_gallery. The 100% resolves against the inline pixel height that
     syncMainGalleryHeight() writes onto .product_gallery, and that only ever
     runs from the thumbnail-strip init, which single-image products never
     render (no .product_gallery_nav). Unscoped, height:100% resolved against
     an auto-height parent — i.e. 0 — collapsing the viewport and leaving the
     image area blank on every one-image product. */
  .gallery-thumbnails--left .multi-image .flickity-viewport,
  .gallery-thumbnails--left .multi-image .flickity-slider {
    height: 100% !important;
  }

  /* ── Single-image products ────────────────────────────────────────────
     Do NOT set a height on .flickity-viewport / .flickity-slider here.
     Flickity writes an inline pixel height on the viewport (e.g. 677px) and
     absolutely-positions the cell inside it, so that inline height is the only
     thing giving the gallery a box. Any height:auto or height:100% override
     collapses the viewport to zero and blanks the image — which is exactly
     what the old `.gallery-thumbnails--left .product_gallery .flickity-viewport
     { height: 100% !important }` rule did (it resolved against .product_gallery,
     whose height is `var(--thumb-area-height, auto)` and is never set for
     single-image products). Scoping that rule to .multi-image is the fix; leave
     single-image galleries entirely to Flickity.

     The remaining single-image problem is layout, not height: the theme only
     floats and sizes `.multi-image`, and .product_gallery_nav still renders as
     an empty 22.5% floated column that steals horizontal space. */

  .gallery-thumbnails--left .single-image {
    width: 100%;
    float: none;
  }

  /* No thumbnails are generated for a one-image product, so the nav renders
     empty. :empty won't match it (it contains whitespace), hence the sibling
     selector. */
  .product_gallery.single-image + .product_gallery_nav {
    display: none;
  }

  /* Break the measurement cycle.

     product-images.liquid sets .gallery-cell / .image__container / img to
     height:100%, which chains up to .flickity-viewport — while Flickity sizes
     that same viewport FROM the cell's measured height. Cell depends on
     viewport, viewport depends on cell. Whichever is measured first wins, so
     the gallery renders on one load and collapses on the next (image cached vs
     not, or a section re-render in the theme editor).

     Multi-image products escape it because syncMainGalleryHeight() writes a
     real pixel height onto .product_gallery. Single-image products have no
     thumbnail strip, so that never runs and the cycle stays live.

     Giving the cell intrinsic height breaks it: Flickity then measures a real
     image height and sets the viewport from it. Note this deliberately does
     NOT touch .flickity-viewport or .flickity-slider — overriding the
     viewport's inline height is what blanks the gallery outright. */

  .gallery-wrap .single-image .gallery-cell,
  .gallery-wrap .single-image .gallery-cell .image__container {
    height: auto !important;
  }

  .gallery-wrap .single-image .gallery-cell .image__container img.product-gallery__image {
    height: auto !important;
    max-height: none !important;
    width: 100%;
  }

  .gk-footer-container .one-fifth.column.medium-down--one-whole {
    display: grid !important;
    justify-content: end;
  }
}

/* --- min-width: 799px and max-width: 1280px --- */

@media screen and (min-width: 799px) and (max-width: 1280px) {
  .gk-footer-container input.global-button.global-button--primary.newsletter-form__sign-up {
    position: absolute;
    right: auto;
    width: max-content !important;
    border: 1px solid #ffffff;
    min-height: 44px;
    max-height: 44px;
    padding: 0 20px !important;
  }
  .gk-mm-product-card {
    flex-direction: column;
  }
  .gk-coll-page span.title {
    min-height: 90px;
  }
}

/* --- max-width: 1090px --- */

@media screen and (max-width: 1090px) {
  .gk-navbar-container ul.nav-desktop__tier-1 {
    gap: 10px;
  }
}

/* --- max-width: 976px --- */

@media screen and (max-width: 976px) {
  .logo-position--center.menu-position--inline .nav--left {
    width: 10%;
  }
}

/* --- max-width: 798px --- */

@media screen and (max-width: 798px) {

  /* .gallery-wrap.product-height-set .product_gallery img {
    object-fit: cover;
} */

#header .top-bar {
    background: #082648 !important;
}

    .product_gallery img {
    background-color: transparent;
}

  /* Navbar */
  #header,
  #header .top-bar {
    margin: 0;
    padding: 0;
    background: transparent;
    transition: background 0.3s ease;
  }
  #header .top-bar {
    background: #000000;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  /* Float the header over the hero on the homepage. Two exceptions:
     - "Fixed ('sticky') header" on — this would otherwise beat the theme's
       `#header.mobile_nav-fixed--true { position: fixed }`.
     - "Solid header (no overlay)" on — that layout is defined by NOT
       overlaying the first section. */
  body.index #header:not(.mobile_nav-fixed--true):not(.header-layout--solid) {
    position: absolute;
    width: 100%;
  }
  body.index #header.mobile_nav-fixed--true {
    width: 100%;
  }
  body.index #header:not(.header-layout--solid) .top-bar {
    background: transparent !important;
  }
  /* …but once a sticky mobile header has scrolled past the hero, give it
     the same solid bar the desktop sticky header gets. Without this the
     header stays transparent over the page content all the way down.
     `header--scrolled` is toggled by the script in sections/header.liquid;
     `#header`'s existing `transition: background` fades it in.

     Paint `.top-bar` only, never `#header` itself: the menu drawer lives
     inside #header and `body.is-active #header { bottom: 0 }` stretches it to
     the full viewport, so a background there floods the screen behind the
     open drawer. */
  body.index #header.mobile_nav-fixed--true.header--scrolled .top-bar {
    background: #082648 !important;
  }
  /* The theme pushes all page content down by 40px whenever the mobile
     header is fixed (`.mobile_nav-fixed--true .section-wrapper`), so the
     content clears the fixed bar. The homepage doesn't want that — its
     header floats transparently over a full-bleed hero, so the 40px just
     opens a strip of page background above the hero. Reclaim it; the hero
     runs under the header exactly as it does with the setting off. */
  body.index.mobile_nav-fixed--true .section-wrapper,
  body.index.mobile_nav-fixed--true.promo-banner--show .section-wrapper {
    margin-top: 0;
  }
  .icon-search::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 12.75L15.75 15.75' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.25 8.25C14.25 4.93629 11.5637 2.25 8.25 2.25C4.93629 2.25 2.25 4.93629 2.25 8.25C2.25 11.5637 4.93629 14.25 8.25 14.25C11.5637 14.25 14.25 11.5637 14.25 8.25Z' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  a.header-icon-link {
    z-index: 9;
  }
  a.header-icon-link svg {
    color: #ffffff;
  }
  a.mini_cart.dropdown_link {
    padding: 0;
    margin: 0;
    background: transparent;
  }
  a.mini_cart.dropdown_link svg {
    color: #ffffff;
  }
  .cart-container.active_link .mini_cart,
  .cart-container.active_link .mini_cart span {
    background-color: transparent;
    color: #333 !important;
  }
  .cart-container.active_link .cart_content {
    display: block;
    overflow-y: auto;
    max-height: calc(90vh - 100px);
    margin-top: 10px;
  }
  details {
    z-index: 999;
    width: 32px;
    height: 32px;
  }
  span.mobile-menu-title {
    display: none;
  }
  .top-bar .top-bar--right {
    display: flex;
    align-items: center;
    margin-left: auto;
    height: 36px;
    padding-right: 5px;
  }

  /* Hero Banner */
  #shopify-section-{{ section.id }} .gk-hero-first-banner .gk-image-banner-head-button {
    bottom: 48px !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    gap: 20px !important;
  }
  #shopify-section-{{ section.id }} .gk-hero-first-banner .gk-image-banner-button a {
    padding: 12px 20px !important;
  }

  /* Image Gallery */
  .gk-image-gallery .feature-divider {
    margin-bottom: 20px;
  }
  .gk-image-gallery .gk-low-button {
    padding-top: 20px;
  }

  /* Instafeed */
  .shopify-app-block #insta-feed h2 {
    margin-bottom: 20px;
  }
  .shopify-app-block .instafeed-bottom-link-wrapper[data-feed-id] {
    padding-top: 20px;
    gap: 12px;
  }
  .shopify-app-block .instafeed-bottom-link-wrapper[data-feed-id] a {
    padding: 12px 24px;
    font-size: 14px;
  }

  /* Featured Collection */
  .gk-featured-collection .feature-divider {
    margin-bottom: 48px;
  }
  .gk-featured-collection .gk-featured-collection-button {
    padding-top: 20px;
  }
  .gk-featured-collection .gk-featured-collection-button a {
    font-size: 14px;
  }

  /* Collection Page */
  .gk-coll-page .breadcrumb_text {
    font-size: 12px;
    line-height: 100%;
  }
  .gk-coll-page div.breadcrumb-collection {
    margin-bottom: 20px;
  }
  .gk-coll-page .one-half.column.medium-down--one-whole h1 {
    font-size: 24px;
    line-height: 34px;
  }
  .gk-coll-page .gk-pc-sorting {
    margin-top: 31px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: none;
  }
  .gk-coll-page .gk-cp-pc p {
    font-size: 14px;
  }
  .gk-coll-page p.gk-sort-label {
    font-size: 14px;
    width: 50%;
  }
  .gk-cp-sorting select#sort-by {
    font-size: 14px;
    line-height: 24px;
  }
  .gk-coll-page .gk-cp-sorting {
    gap: 4px;
  }
  .gk-coll-page .feature-divider {
    margin-bottom: 32px;
  }
  .gk-coll-page span.title {
    -webkit-line-clamp: 3;
    min-height: auto;
  }
  .gk-coll-page .product-list {
    row-gap: 20px;
  }
  .gk-coll-page div.content {
    padding: 14px 0 60px;
  }

  /* Product Page */
  .gk-pg-main .product-text {
    padding-bottom: 60px;
  }
  .gk-pg-main .image-element__wrap {
    width: 100%;
    height: 100px;
  }
  .gk-pg-main .product_gallery_nav .gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .gk-pg-main .product_gallery_nav .gallery-cell {
    width: 25%;
  }
  .product_gallery_nav .product-gallery__thumbnail {
    margin-right: 10px !important;
  }
  .gk-pg-main .flickity-prev-next-button {
    display: none;
  }
  .gk-pg-main.section {
    width: 100%;
  }
  .gk-pg-main .product_gallery {
    margin-bottom: 20px;
  }
  .gk-pg-main .product_gallery_nav {
    margin-bottom: 0;
  }
  .gk-pg-main h1.product_name {
    font-size: 20px;
    line-height: 30px;
  }
  .gk-pg-main .product-block.product-block--\@app {
    padding-top: 12px;
  }
  .gk-pg-main .product-text p {
    font-size: 16px;
  }
  .gk-pg-main span.money {
    font-size: 24px;
    line-height: 34px;
  }
  .gk-pg-main .product__details--product-page .price-ui .sold_out {
    font-size: 24px;
    line-height: 34px;
}
  .gk-pg-main .product-block--price {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .gk-pg-main .product-block--description .description .rte p {
    font-size: 14px;
    line-height: 24px;
  }
  .gk-pg-main .smart-payment-button--true .purchase-details {
    padding-top: 9px;
  }
  .gk-pg-main .gk-quantity-add-to-cart {
    grid-template-columns: calc(45% - 10px) calc(55% - 10px);
    gap: 20px;
  }
  .gk-pg-main .product-quantity-box .product-plus {
    right: -10px;
  }
  .gk-pg-main .product-quantity-box .product-minus {
    left: 10%;
  }
  .gk-pg-main .purchase-details__buttons.purchase-details__spb--true {
    margin-top: 16px;
  }
  .gk-pg-main .purchase-details__buttons.purchase-details__spb--true .shopify-payment-button {
    margin: 0;
  }

  /* Our Story */
  .os-richtext .rich-text__text.featured_text {
    margin-top: 20px;
  }

  .gk-os-fn {
  padding-top: 60px;
  padding-bottom: 60px;
}

  /* Blog Article */
  section.blog-article.section {
    padding-top: 40px;
  }
  .blog-article p.blog_meta span {
    margin-bottom: 0;
  }
  .blog-article .rte.article-first-paragraph p {
    margin-bottom: 20px;
  }
  .blog-article .image-element__wrap {
    padding-bottom: 60px;
  }
  .blog-article .rte.has-padding-top {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 60px;
  }
  .blog-article .rte.has-padding-top p:last-of-type {
    padding-bottom: 60px;
  }

  /* Footer */
  footer.gk-footer-container.footer {
    padding-top: 60px;
    padding-bottom: 30px;
  }
  .gk-footer-container .footer-credits__top,
  .footer-credits__bottom {
    flex-direction: column;
    gap: 16px;
  }
  .gk-footer-logo-image {
    padding-top: 20px;
    padding-bottom: 32px;
  }
  .gk-footer-container .toggle_content {
    display: block !important;
    padding: 0;
  }
  .gk-footer-container .one-fifth.column.medium-down--one-whole {
    margin: 0;
  }
  .gk-footer-container span.right.icon-down-arrow {
    display: none !important;
  }
  .gk-footer-container .footer_content.footer-text {
    padding-top: 20px;
  }
  .footer-menu-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0 75px;
  }
  .footer-menu-wrap .one-fifth.column:has(.footer_menu) {
    width: calc(50% - 37.5px);
    padding-top: 11px;
  }

  /* Our Story */
  .gk-os-fn .container.image-with-text-container {
    margin: 0 !important;
    padding: 16px;
  }
  .gk-os-fn .image-with-text__text-column {
    padding-top: 20px;
  }
}

@media screen and (max-width: 516px) {
  .gk-coll-page .gk-cp-pc {
    width: max-content;
}
.gk-coll-page .gk-cp-sorting {
    width: 70%;
}
.gk-coll-page p.gk-sort-label {
    text-align: end;
}
.gk-coll-page .gk-pc-sorting {
    padding-right: 0;
}
}

/* --- max-width: 600px --- */

@media screen and (max-width: 600px) {
  /* Featured Collection Slider */
  .gk-featured-collection .products-slider {
    overflow: hidden;
  }
  .gk-featured-collection .products-slider .flickity-viewport {
    overflow: hidden !important;
  }
  .gk-featured-collection .products-slider .flickity-viewport::before {
    content: "";
    display: block;
    width: 0;
  }
  .gk-featured-collection .products-slider .gallery-cell,
  .gk-featured-collection .products-slider .gallery-cell.visible-4 {
    width: 85% !important;
    margin-right: 20px !important;
  }

  /* Image Gallery */
  .gk-image-gallery .gallery-section.gallery-masonry .four-per-row {
    column-count: 1;
  }
}

/* --- max-width: 370px --- */

@media screen and (max-width: 370px) {
  .gk-coll-page .gk-cp-pc p {
    font-size: 12px;
  }
  .gk-coll-page p.gk-sort-label {
    font-size: 12px;
  }
  .gk-cp-sorting select#sort-by {
    font-size: 12px;
    line-height: 1;
    min-height: 30px;
    height: 30px;
  }
  .gk-pagination {
    gap: 10px !important;
  }
  .gk-page-btn {
    min-width: 30px !important;
  }
}


@media screen and (max-width: 360px) {
  .footer-menu-wrap .one-fifth.column:has(.footer_menu) {
    width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Sticky header (desktop)

   Headhesive clones `.main-nav__wrapper` and inserts the copy as the
   FIRST CHILD OF <body>, so the clone sits OUTSIDE `.gk-navbar-container`
   and every `.gk-navbar-container …` rule above stops matching it — the
   nav links lose their white colour, the SHOP pill loses its background,
   the bar loses its width/gap, and `body.index .main-nav__wrapper
   { background: transparent }` makes it see-through on the homepage.

   The script at the bottom of sections/header.liquid re-adds the
   `gk-navbar-container` class to the clone, so all of that styling
   applies again. The only rule that must NOT carry over is the absolute
   positioning below — the clone has to stay fixed.
   ────────────────────────────────────────────────────────────────── */

.gk-navbar-container.sticky_nav,
body.index .gk-navbar-container.sticky_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #082648;
}

/* Mobile has its own fixed header (#header), so the desktop sticky bar must
   never show below 798px — otherwise both render at once and overlap.

   The theme tries this with `@media (max-width: 798px) { .sticky_nav--stick
   { display: none } }`, but that's a single class (0,1,0) against
   `.sticky_nav[data-animation-state=open] { display: block }` (0,2,0), and a
   media query adds no specificity — so the theme's own rule loses and the bar
   shows anyway. The desktop header itself is hidden by `.header
   { display: none }`, which doesn't help here either: Headhesive moved the
   clone out to body, so it's no longer inside `.header`. */
@media screen and (max-width: 798px) {
  .main-nav__wrapper.sticky_nav {
    display: none !important;
  }
}


/* ──────────────────────────────────────────────────────────────────
   Solid header layout  —  header.liquid → "Solid header (no overlay)"

   By default the homepage header is lifted out of the flow
   (`.index .gk-navbar-container { position: absolute }`) with a
   transparent bar, so the hero shows through behind it. This layout
   undoes both: the header takes up its own space above the first
   section and carries the same navy bar the sticky header uses.

   header.liquid forces `header_is_fixed` to false whenever this is on,
   so `.header-fixed--true` is never emitted, Headhesive never
   initialises, and the header simply scrolls away with the page.
   ────────────────────────────────────────────────────────────────── */

/* Desktop — beat `.index .gk-navbar-container { position: absolute }` */
.gk-navbar-container.header-layout--solid,
.index .gk-navbar-container.header-layout--solid {
  position: relative;
  width: 100%;
}

/* …and `body.index .main-nav__wrapper { background: transparent }` */
.header-layout--solid .main-nav__wrapper,
body.index .header-layout--solid .main-nav__wrapper {
  background: #082648;
}

/* Mobile — the separate #header element. `!important` because the base
   mobile rule above is `#header .top-bar { background: #082648 !important }`.

   Only `.top-bar` gets the colour. #header itself must stay transparent:
   the menu drawer sits inside it and `body.is-active #header { bottom: 0 }`
   stretches #header to the full viewport while the drawer is open, so a
   background here paints the whole screen below the drawer panel. */
@media screen and (max-width: 798px) {
  body.index #header.header-layout--solid .top-bar {
    background: #082648 !important;
  }
}



/* ──────────────────────────────────────────────────────────────────
   Breadcrumbs — current page

   The last crumb is the page you are already on, so it renders as a
   <span> instead of an <a>. It keeps the `breadcrumb_link` class so it
   inherits the existing crumb colour, which means the link hover states
   would still fire on plain text — cancel them here.
   ────────────────────────────────────────────────────────────────── */

.breadcrumb_text .breadcrumb_current {
  cursor: default;
}

.breadcrumb_text .breadcrumb_current span:hover {
  color: #164B7A !important;
}

/* ──────────────────────────────────────────────────────────────────
   Judge.me — global star icon font fix

   Judge.me draws its stars as glyphs from a webfont ('JudgemeStar'),
   not as SVGs the way Loox did. This theme sets a global
   `body { font-family: "Medesto", sans-serif }` (Theme settings →
   custom CSS), which cascades down onto Judge.me's .jdgm-star spans
   and replaces the star glyphs with blank characters — the review
   count text still renders, so the badge looks like a bare "6 Reviews".

   Forcing the icon font back on is Judge.me's own documented fix and
   is required for stars to appear anywhere on the site.
   ────────────────────────────────────────────────────────────────── */

.jdgm-star {
  font-family: 'JudgemeStar' !important;
}

/* ──────────────────────────────────────────────────────────────────
   Judge.me — keep the stars and the review count on one line

   Judge.me stacks .jdgm-prev-badge__text under the stars by default.
   Loox rendered both inline, so match that everywhere: one inline-flex
   row, 8px between the stars and the count, no wrapping.

   inline-flex (not flex) keeps the badge inline so the existing
   text-align rules on the card wrappers still position it.
   ────────────────────────────────────────────────────────────────── */

/* Judge.me's app-embed CSS ships `.jdgm-prev-badge{display:block !important}`
   and loads AFTER custom.css. A plain `.jdgm-prev-badge` rule here ties it on
   specificity and loses on source order, so every selector below is scoped
   through .jdgm-preview-badge to outrank it. Do not flatten these. */

.jdgm-preview-badge .jdgm-prev-badge {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px;
}

/* inline-block, not flex — the star glyphs inside are inline spans that rely
   on the whitespace between them for spacing. A flex container would collapse
   that and bunch the stars together. */
.jdgm-preview-badge .jdgm-prev-badge__stars {
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  padding: 0;
}

.jdgm-preview-badge .jdgm-prev-badge__text {
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Judge.me hides the badge on products with no reviews via
   `.jdgm-prev-badge[data-average-rating='0.00']{display:none !important}`.
   That rule ties the display rule above on specificity, so restate it here at
   a higher weight — otherwise zero-review products would show an empty badge. */
.jdgm-preview-badge .jdgm-prev-badge[data-average-rating='0.00'] {
  display: none !important;
}


/* =========================
   SHOPIFY POLICY PAGES
   (/policies/shipping-policy, /policies/refund-policy, etc.)

   `.shopify-policy__container` is emitted only on Shopify's built-in policy
   routes, so everything below is scoped through it and cannot leak into any
   other template. Shopify's own policy-*.css ships from its CDN and only sets
   max-width + centering, so plain class selectors here are enough to win.
========================= */

.shopify-policy__container {
  padding-top: clamp(40px, calc(40px + (80 - 40) * ((100vw - 375px) / (1600 - 375))), 80px);
  padding-bottom: clamp(40px, calc(40px + (80 - 40) * ((100vw - 375px) / (1600 - 375))), 80px);
}

.shopify-policy__container .shopify-policy__title h1 {
  font-size: clamp(24px, calc(24px + (48 - 24) * ((100vw - 375px) / (1600 - 375))), 48px);
  line-height: clamp(34px, calc(34px + (58 - 34) * ((100vw - 375px) / (1600 - 375))), 58px);
  color: #0D1F35;
  font-family: var(--gk-font-heading);
  margin: 0;
  text-transform: capitalize;
  font-weight: 500;
  text-align: center;
}

/* The title/body clamps both carry `margin: 0`, so without this the heading
   butts straight into the first line of copy. 30px/20px mirrors the gap the
   .gk-om-heading-description flex column uses for the same type pairing. */
.shopify-policy__container .shopify-policy__title {
  margin-bottom: 30px;
}

@media screen and (max-width: 798px) {
  .shopify-policy__container .shopify-policy__title {
    margin-bottom: 20px;
  }
}

/* The shipping policy's body is a bare <span> inside .rte with no <p> wrapper,
   while the refund policy uses <p>. Style the .rte itself so both inherit, and
   restate on the block children that would otherwise reset it. */
.shopify-policy__container .shopify-policy__body .rte,
.shopify-policy__container .shopify-policy__body .rte p,
.shopify-policy__container .shopify-policy__body .rte span,
.shopify-policy__container .shopify-policy__body .rte li {
  font-size: clamp(20px, calc(20px + (24 - 20) * ((100vw - 375px) / (1600 - 375))), 24px);
  line-height: clamp(30px, calc(30px + (34 - 30) * ((100vw - 375px) / (1600 - 375))), 34px);
  font-weight: 300;
  color: #0D1F35;
  font-family: var(--gk-font-body);
  text-align: center;
}

.shopify-policy__container .shopify-policy__body .rte p {
  margin: 0;
}

.shopify-policy__container .shopify-policy__body .rte p + p {
  margin-top: 20px;
}

/* Links inside the copy keep the body typography — only the colour differs. */
.shopify-policy__container .shopify-policy__body .rte a {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-family: inherit;
}


/* =========================
   ANNOUNCEMENT BAR
========================= */

/* Turbo's promo banner (header.liquid → "Promo text"), restyled to the GK type
   and spacing. Its colours come from the theme settings (promo_bg_color /
   promo_text_color), which set the bar on every page with a solid navy header;
   the homepage's see-through header gets its own darker bar further down.

   The theme starts the bar at height 0 and only opens it once sections.js adds
   `body.promo-banner--show`, which it skips for 30 days after a visitor clicks
   the close button. The close button is hidden below, so a visitor who
   dismissed the bar earlier (here or on the old theme, same cookie) would have
   no way to get it back — the bar is shown unconditionally instead. That also
   stops it popping in after the page has loaded. */
.promo-banner,
.promo-banner--show .promo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 40px;
  padding: 10px 0;
  line-height: 20px;
  overflow: visible;
}

.promo-banner .promo-banner__content {
  max-height: none;
  padding: 0 24px;
  text-align: center;
}

.promo-banner .promo-banner__content,
.promo-banner .promo-banner__content p {
  font-family: var(--gk-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promo-banner .promo-banner__content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* With a Link set (header.liquid → "Announcement bar → Link") the content is
   an <a>; its ::after stretches over the whole bar (`.promo-banner` is
   position: relative in the theme CSS), so a click anywhere on it goes
   through. The underline only appears on hover/focus, as the click cue. */
.promo-banner .promo-banner__link {
  /* The desktop header CSS makes this `position: relative`, which would shrink
     the ::after below to the text box. Static lets it reach `.promo-banner`. */
  position: static;
  text-decoration: none;
  cursor: pointer;
}

.promo-banner .promo-banner__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.promo-banner .promo-banner__link:hover,
.promo-banner .promo-banner__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.promo-banner .promo-banner__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Arrow after the text (the slider buttons' arrow, in the text colour). It
   nudges right on hover — anywhere on the bar, since the ::after is the link. */
.promo-banner .promo-banner__arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: -3px;
  transition: transform 0.2s ease;
}

.promo-banner .promo-banner__link:hover .promo-banner__arrow,
.promo-banner .promo-banner__link:focus-visible .promo-banner__arrow {
  transform: translateX(4px);
}

.promo-banner .promo-banner__close {
  display: none;
}

/* Everywhere but the homepage the bar shares the header's navy, so a hairline
   keeps the two apart. */
body:not(.index) .promo-banner {
  border-bottom: 1px solid rgba(184, 206, 221, 0.3);
}

/* Homepage: the header floats see-through over the hero, so the bar sits on
   the photo rather than on the navy header — the footer's darkest navy reads
   best there. `.header-layout--solid` ("Solid header (no overlay)") gives the
   homepage the same navy header as every other page, so it keeps the setting
   colours. */
body.index .gk-navbar-container:not(.header-layout--solid) .promo-banner,
body.index #header:not(.header-layout--solid) .promo-banner {
  background-color: #051828;
  color: #ffffff;
}

body.index .gk-navbar-container:not(.header-layout--solid) .promo-banner a,
body.index #header:not(.header-layout--solid) .promo-banner a {
  color: #ffffff;
}

@media screen and (max-width: 798px) {
  .promo-banner,
  .promo-banner--show .promo-banner {
    min-height: 36px;
    padding: 8px 0;
  }

  .promo-banner .promo-banner__content {
    padding: 0 16px;
  }

  .promo-banner .promo-banner__content,
  .promo-banner .promo-banner__content p {
    font-size: 12px;
    line-height: 16px;
  }

  .promo-banner .promo-banner__arrow {
    width: 14px;
    height: 14px;
    margin-left: 6px;
  }
}