/* What this shop adds on top of the store's Dawn stylesheets: the colours the
   checkout popup is drawn in, the home page's banner, circle and tab sections
   in the look of the main store's home page, and the small differences of a
   shop with a "Buy now" instead of a cart. Sizes follow Dawn: 1rem = 10px. */

:root {
  --gs-red: #e93838;
  --gs-red-dark: #c92a2a;
  --gs-navy: #334fb4;
  --gs-navy-dark: #22398f;
  --gs-ink: #121212;

  /* the checkout popup's palette, in the store's colours */
  --color-ink: #1a1a1a;
  --color-ink-2: #4a4a4a;
  --color-ink-3: #767676;
  --color-line: #e5e5e5;
  --color-mist: #f3f3f3;
  --color-ivory: #f7f7f7;
  --color-succ: #137a4b;
  --color-brand: #e93838;
  --color-brand-dark: #c92a2a;
  --color-brand-soft: #fdecec;
  --accent: #e93838;
  --accent-deep: #c92a2a;
}

/* ------------------------------------------------------------ checkout --- */
.co-root { font-family: var(--font-body-family); font-size: 16px; line-height: 1.45; letter-spacing: normal; color: var(--color-ink); }
.co-root[hidden] { display: none !important; }
.co-root .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--font-body-family); letter-spacing: .02em;
  padding: 16px 26px; border-radius: 10px; border: 0; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.co-root .btn:active { transform: scale(.98); }
.co-root .btn-primary { background: var(--gs-red); color: #fff; }
.co-root .btn-primary:hover { background: var(--gs-red-dark); }
.co-root .btn-primary[disabled] { opacity: .6; cursor: progress; }
.co-root .btn-ink { background: var(--gs-navy); color: #fff; }
.co-root .btn-ink:hover { background: var(--gs-navy-dark); }
.co-root .btn-block { display: flex; width: 100%; }
.co-root .flex-1 { flex: 1 1 0%; }
.co-root .min-w-0 { min-width: 0; }
.co-root .mt-1 { margin-top: 4px; }
.co-root .mt-3 { margin-top: 12px; }
.co-root .underline { text-decoration: underline; }
.co-root input, .co-root select, .co-root textarea { font: inherit; font-size: 16px; }
.co-root h2, .co-root h3 { font-family: var(--font-heading-family); letter-spacing: normal; }

/* -------------------------------------------------------- product page --- */
.product-form__submit.button { min-height: 5rem; font-size: 1.6rem; letter-spacing: .06rem; }
.product-form__buttons .button--secondary,
.quick-add__submit.button--secondary {
  --color-button: 233, 56, 56; --color-button-text: 255, 255, 255;
  --color-secondary-button: 233, 56, 56; --color-secondary-button-text: 255, 255, 255;
  background: var(--gs-red); color: #fff;
}
.product-form__buttons .button--secondary:hover,
.quick-add__submit.button--secondary:hover { background: var(--gs-red-dark); }
.product-form__buttons .button--secondary::after,
.quick-add__submit.button--secondary::after { box-shadow: none; }
.button.gs-disabled { opacity: .5; cursor: not-allowed; }
.gs-buy-note { margin: 1rem 0 0; color: rgba(var(--color-foreground), .7); }
.product__info-container .price--large .price-item { color: var(--gs-navy); }
.product__info-container .price--large .price__sale s.price-item { color: rgba(var(--color-foreground), .55); }
.product__info-container > * + * { margin: 1.5rem 0; }
.product-form__input--pill input[type="radio"]:checked + label { background: var(--gs-navy); border-color: var(--gs-navy); color: #fff; }
.product__media img { object-fit: contain; }
.product__accordion .rte img { max-width: 100%; height: auto; }
.thumbnail img { object-fit: cover; }

/* the card buttons: Dawn keeps quick-add hidden until hover on desktop; the
   store shows it always */
.card-wrapper .quick-add { position: static; opacity: 1; margin: 1rem 0 0; grid-row-start: 3; }
.card-wrapper .quick-add__submit { min-height: 4.4rem; padding: 0 1rem; font-size: 1.5rem; }
.card__heading { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card__heading a { display: block; overflow: hidden; text-overflow: ellipsis; }
.card-information .price { font-weight: 600; }
.card-information .price-item--sale, .card-information .price-item--regular { color: var(--gs-navy); }
.card-information .price__sale s.price-item { color: rgba(var(--color-foreground), .6); font-weight: 400; }
.card .card__inner { border-radius: .6rem; overflow: hidden; border: 1px solid rgba(var(--color-foreground), .15); }
.card .media img { object-fit: cover; }

/* ---------------------------------------------------- collection header --- */
.gs-collection-header { width: 100%; background: #fff; padding: 2.4rem 2rem 1rem; text-align: center; box-sizing: border-box; }
.gs-collection-header__inner { max-width: 120rem; margin: 0 auto; }
.gs-breadcrumb { margin: 0 0 1rem; font-size: 1.3rem; line-height: 1.4; color: #888; }
.gs-breadcrumb a { color: #888; text-decoration: none; }
.gs-breadcrumb a:hover { text-decoration: underline; }
.gs-breadcrumb span { display: inline-block; margin: 0 .4rem; }
.gs-title { margin: 0; font-family: var(--font-heading-family); font-size: 3.2rem; line-height: 1.15; font-weight: 800; color: #111; letter-spacing: .1rem; text-transform: uppercase; }
@media screen and (max-width: 749px) {
  .gs-collection-header { padding: 1.6rem 1.6rem .6rem; }
  .gs-breadcrumb { font-size: 1.2rem; margin-bottom: .8rem; }
  .gs-title { font-size: 2.4rem; letter-spacing: .06rem; }
}
.gs-collection-padding { padding-top: 2.4rem; padding-bottom: 3.6rem; }
.gs-mobile-facets { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.6rem; }
.gs-mobile-facets .select { flex: 0 1 60%; }
.gs-more { text-align: center; margin: 3.2rem 0 0; }
.gs-more__count { margin: 0 0 1rem; }
.gs-more .button { min-width: 22rem; }
.gs-empty { text-align: center; padding: 4rem 0; }
.gs-collection-guide { padding-top: 2rem; padding-bottom: 4rem; max-width: 110rem; }
.gs-collection-guide img { max-width: 100%; height: auto; }
.facets__price .field { flex: 1 1 0; }
.facets__price .field-currency { align-self: center; }

/* --------------------------------------------------------- section bits --- */
.gs-section-title { margin: 0 0 3rem; text-align: center; font-family: var(--font-heading-family); font-weight: 500; font-size: 3rem; letter-spacing: .04rem; color: var(--gs-ink); }
@media (max-width: 749px) { .gs-section-title { font-size: 2.3rem; margin-bottom: 2rem; } }
.gs-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 4.6rem; padding: 0 3rem;
  border-radius: 1rem; background: var(--gs-red); color: #fff; text-decoration: none;
  font-size: 1.6rem; letter-spacing: .06rem; transition: background-color .2s ease;
}
.gs-btn:hover { background: var(--gs-red-dark); }

/* ----------------------------------------------------- hero slideshow --- */
.gs-hero { position: relative; overflow: hidden; background: #f3f3f3; }
.gs-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.gs-hero__track::-webkit-scrollbar { display: none; }
.gs-hero__slide { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.gs-hero__slide img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 707; object-fit: cover; }
@media (max-width: 749px) { .gs-hero__slide img { aspect-ratio: 900 / 1219; } }
.gs-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 3.2rem; height: 3.2rem; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.25); background: #fff; color: #111; cursor: pointer;
}
.gs-hero__arrow svg { width: 1.8rem; height: 1.8rem; }
.gs-hero__arrow--prev { left: 1rem; }
.gs-hero__arrow--next { right: 1rem; }
.gs-hero__dots { position: absolute; left: 0; right: 0; bottom: 3.6rem; display: flex; justify-content: center; gap: .6rem; z-index: 2; }
.gs-hero__dot { width: .9rem; height: .9rem; padding: 0; border-radius: 50%; border: 1px solid #fff; background: rgba(255,255,255,.35); cursor: pointer; box-shadow: 0 0 2px rgba(0,0,0,.4); }
.gs-hero__dot[aria-current="true"] { background: #fff; }
@media (max-width: 749px) { .gs-hero__dots { bottom: 1.4rem; } }

/* ----------------------------------------------------- image with text --- */
.gs-iwt { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; align-items: center; padding-top: 1.2rem; padding-bottom: 3rem; }
.gs-iwt__media img { display: block; width: 100%; height: auto; }
.gs-iwt__text h2 { margin: 0 0 2.4rem; font-weight: 600; font-size: 2.2rem; }
.gs-iwt__text p { margin: 0 0 3.2rem; font-size: 1.6rem; line-height: 1.8; letter-spacing: .06rem; color: rgba(var(--color-foreground), .75); }
@media (max-width: 749px) { .gs-iwt { grid-template-columns: 1fr; gap: 2.4rem; } }

/* ----------------------------------------------------- collection rows --- */
.gs-circles { padding: 3rem 0 4rem; }
.gs-circles__wrap { position: relative; }
.gs-circles__track {
  display: flex; gap: 3.5rem; margin: 0; padding: 0 2rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; scroll-behavior: smooth;
}
.gs-circles__track::-webkit-scrollbar { display: none; }
.gs-circles__item { flex: 0 0 calc((100% - 4 * 3.5rem) / 5); scroll-snap-align: start; min-width: 14rem; }
.gs-circles--circle .gs-circles__item { flex-basis: calc((100% - 6 * 3.5rem) / 7); }
.gs-circles__link { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-decoration: none; color: var(--gs-ink); }
.gs-circles__media { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #f3f3f3; }
.gs-circles--circle .gs-circles__media { border-radius: 50%; }
.gs-circles__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gs-circles__link:hover img { transform: scale(1.05); }
.gs-circles__name { font-family: var(--font-heading-family); font-size: 1.8rem; font-weight: 500; letter-spacing: .06rem; text-align: center; line-height: 1.3; }
.gs-circles--square .gs-circles__name { font-size: 1.6rem; }
@media (max-width: 989px) {
  .gs-circles__item, .gs-circles--circle .gs-circles__item { flex-basis: 30%; min-width: 11rem; }
}
@media (max-width: 749px) {
  .gs-circles__track { gap: 1.6rem; padding: 0 1.6rem; }
  .gs-circles__item, .gs-circles--circle .gs-circles__item { flex-basis: 38%; }
  .gs-circles__name { font-size: 1.5rem; }
}
.gs-arrow {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 2;
  width: 4rem; height: 4rem; display: grid; place-items: center; padding: 0 0 .3rem;
  border-radius: 50%; border: 1px solid #111; background: #fff; color: #111;
  font-size: 2.8rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.gs-arrow--prev { left: .8rem; }
.gs-arrow--next { right: .8rem; }
.gs-arrow[disabled] { opacity: 0; pointer-events: none; }
@media (hover: none) { .gs-arrow { display: none; } }

/* ------------------------------------------------------- product tabs --- */
.gs-tabs { padding: 3rem 5rem 2.4rem; background: linear-gradient(180deg, #fafbff 0%, #f4f6fc 100%); }
.gs-tabs__title { margin: 0 0 2.6rem; text-align: center; font-family: var(--font-heading-family); font-weight: 700; font-size: 3.2rem; letter-spacing: -.05rem; color: #111; }
.gs-tabs__bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; width: fit-content; max-width: 100%;
  margin: 0 auto 3rem; padding: 1rem; border-radius: 1.8rem; background: #fff; box-shadow: 0 10px 30px rgba(20, 30, 80, .08);
}
.gs-tabs__tab {
  padding: 1.2rem 2rem; border: 0; border-radius: 1.2rem; cursor: pointer;
  background: var(--gs-navy); color: #fff; font: 700 1.6rem/1.2 var(--font-body-family); letter-spacing: 0;
  transition: background-color .2s ease;
}
.gs-tabs__tab:hover { background: var(--gs-navy-dark); }
.gs-tabs__tab[aria-selected="true"] { background: #fff; color: var(--gs-red); box-shadow: 0 0 0 1px #eee; text-decoration: underline; text-decoration-thickness: .2rem; text-underline-offset: .7rem; }
.gs-tabs__track {
  display: flex; gap: 2rem; margin: 0; padding: 0 0 1rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; scroll-behavior: smooth;
}
.gs-tabs__track::-webkit-scrollbar { display: none; }
.gs-tabs__item { flex: 0 0 calc((100% - 4 * 2rem) / 5); min-width: 21rem; scroll-snap-align: start; }
.gs-tabs__all a {
  display: grid; place-items: center; height: 100%; min-height: 20rem; border-radius: 1.6rem; border: 1px dashed #c8cde0;
  font-size: 1.7rem; font-weight: 600; color: var(--gs-navy); text-decoration: none; background: #fff;
}
.gs-tabs .gs-arrow { top: 45%; }
@media (max-width: 989px) { .gs-tabs { padding: 3rem 2rem 2rem; } .gs-tabs__item { flex-basis: 40%; } }
@media (max-width: 749px) {
  .gs-tabs { padding: 2.4rem 1.6rem 1.6rem; }
  .gs-tabs__title { font-size: 2.4rem; }
  .gs-tabs__bar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .gs-tabs__tab { flex: none; font-size: 1.4rem; padding: 1rem 1.4rem; }
  .gs-tabs__item { flex-basis: 62%; min-width: 0; }
}

.gs-tabcard {
  display: flex; flex-direction: column; height: 100%; padding: 1rem 1rem 1.4rem;
  background: #fff; border: 1px solid #eceef5; border-radius: 1.6rem;
  box-shadow: 0 6px 18px rgba(20, 30, 80, .05);
}
.gs-tabcard__media { position: relative; display: block; aspect-ratio: 246 / 292; overflow: hidden; border-radius: 1.2rem; background: #f3f3f3; }
.gs-tabcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gs-tabcard:hover .gs-tabcard__media img { transform: scale(1.04); }
.gs-tabcard__off {
  position: absolute; top: 1.2rem; left: 1.2rem; padding: .5rem 1rem; border-radius: 99rem;
  background: var(--gs-red); color: #fff; font: 700 1.1rem/1 var(--font-body-family); letter-spacing: .04rem;
}
.gs-tabcard__title {
  display: block; margin: 1.6rem .4rem .8rem; color: #111; text-decoration: none;
  font-size: 1.6rem; line-height: 1.35; letter-spacing: .04rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gs-tabcard__price { display: flex; align-items: baseline; gap: .8rem; margin: 0 .4rem 1.6rem; }
.gs-tabcard__now { color: var(--gs-red); font-weight: 700; font-size: 1.8rem; }
.gs-tabcard__was { color: #777; font-size: 1.6rem; }
.gs-tabcard__btn {
  display: flex; align-items: center; justify-content: center; min-height: 4.6rem; margin-top: auto;
  border-radius: .8rem; background: var(--gs-red); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.5rem;
  transition: background-color .2s ease;
}
.gs-tabcard__btn:hover { background: var(--gs-red-dark); }

/* --------------------------------------------------- why choose and FAQ --- */
.gs-why { padding-top: 4rem; padding-bottom: 2rem; }
.gs-why__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.gs-why__item { display: flex; flex-direction: column; gap: .6rem; padding: 2.4rem; text-align: center; border-radius: 1.6rem; background: #f6f7fb; }
.gs-why__item strong { font-family: var(--font-heading-family); font-size: 1.8rem; font-weight: 600; color: #111; }
.gs-why__item span { font-size: 1.4rem; color: rgba(var(--color-foreground), .7); }
@media (max-width: 749px) { .gs-why__list { grid-template-columns: 1fr 1fr; gap: 1.2rem; } .gs-why__item { padding: 1.6rem; } }
.gs-faq { max-width: 90rem; padding-top: 3rem; padding-bottom: 5rem; }
.gs-faq .gs-section-title { margin-bottom: 1rem; }
.gs-faq__sub { text-align: center; margin: 0 0 3rem; color: rgba(var(--color-foreground), .7); }
.gs-faq__item { border-bottom: 1px solid #e5e5e5; }
.gs-faq__item summary { list-style: none; cursor: pointer; padding: 1.8rem 4rem 1.8rem 0; position: relative; font-family: var(--font-heading-family); font-size: 1.7rem; font-weight: 500; color: #111; }
.gs-faq__item summary::-webkit-details-marker { display: none; }
.gs-faq__item summary::after { content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); font-size: 2.4rem; font-weight: 300; }
.gs-faq__item[open] summary::after { content: "\2212"; }
.gs-faq__item p { margin: 0 0 1.8rem; line-height: 1.7; color: rgba(var(--color-foreground), .8); }
.gs-faq__all { text-align: center; margin-top: 3rem; }

/* ------------------------------------------------- collection list page --- */
.gs-collection-index { padding-top: 2rem; padding-bottom: 5rem; }
.gs-colcard { display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: #111; }
.gs-colcard__media { display: block; aspect-ratio: 1; overflow: hidden; border-radius: .6rem; background: #f3f3f3; }
.gs-colcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gs-colcard:hover img { transform: scale(1.04); }
.gs-colcard__name { font-family: var(--font-heading-family); font-size: 1.7rem; font-weight: 500; margin-top: .8rem; }

/* ------------------------------------------------------------- search --- */
.gs-search { padding-bottom: 5rem; }
.gs-search__form { max-width: 74rem; margin: 1rem auto 2rem; }
.gs-search__status { text-align: center; margin: 0 0 2.4rem; }
.gs-search__elsewhere { text-align: center; margin-top: 3rem; }

/* ---------------------------------------------------------------- 404 --- */
.gs-404 { text-align: center; padding-top: 6rem; padding-bottom: 3rem; }
.gs-404 .h1 { margin: .4rem 0 1.6rem; }
.gs-404 p { margin: 0 0 2.4rem; }

/* the header's search suggestions are Shopify's; this shop fills them itself
   (shop.js) and keeps the panel shut until there is something to show */
.swanky-predictive-search { display: none !important; }
.swanky-predictive-search.gs-open { display: block !important; }
.gs-suggest { list-style: none; margin: 0; padding: .8rem 0; }
.gs-suggest a { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1.6rem; text-decoration: none; color: #111; font-size: 1.4rem; }
.gs-suggest a:hover, .gs-suggest a[aria-selected="true"] { background: #f3f5fb; }
.gs-suggest img { width: 4.8rem; height: 4.8rem; object-fit: cover; border-radius: .4rem; flex: none; background: #f3f3f3; }
.gs-suggest__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-suggest__p { color: var(--gs-navy); font-weight: 600; flex: none; }
.gs-suggest__all { display: block; padding: 1rem 1.6rem; border-top: 1px solid #eee; font-size: 1.4rem; color: var(--gs-navy); text-decoration: none; }

/* quantity and the buy button share a row, as the main store sets them */
.gs-buy-row { display: flex; align-items: flex-end; gap: 1rem; margin: 1.5rem 0 0; }
.gs-buy-row .product-form__quantity { margin: 0; flex: none; }
.gs-buy-row .product-form__buttons { flex: 1 1 auto; max-width: none; margin: 0; }
.gs-buy-row .product-form__submit { margin: 0; min-height: calc(4.5rem + var(--inputs-border-width) * 2); }

/* one-line card titles: let the card shrink to its column instead of
   stretching to the title's length */
.product-grid .grid__item, .card-wrapper, .card, .card > .card__content, .card__information { min-width: 0; max-width: 100%; }
.card > .card__content { grid-template-columns: minmax(0, 1fr); }

/* prices as the store shows them: the regular price when there is no sale,
   the struck-through compare-at beside the sale price when there is */
.price:not(.price--on-sale) .price__regular { display: block; }
.price--on-sale .price__sale { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.price-sale-wrap { display: inline-block; }
.price--on-sale .price__sale > span:not(.visually-hidden) s { margin: 0; }

/* a short row (the home page's groups) fills the width with five, centred */
.gs-circles--few .gs-circles__track { justify-content: safe center; }
.gs-circles--circle.gs-circles--few .gs-circles__item { flex-basis: calc((100% - 4 * 3.5rem) / 5); }
@media (max-width: 989px) { .gs-circles--circle.gs-circles--few .gs-circles__item { flex-basis: 30%; } }
@media (max-width: 749px) { .gs-circles--circle.gs-circles--few .gs-circles__item { flex-basis: 38%; } }

/* Dawn hides every empty div and does not hide [hidden] on its own; the
   popup's backdrop is an empty div, and its steps are switched with hidden */
.co-root .co-backdrop { display: block; }
.co-root [hidden] { display: none !important; }
