/** Shopify CDN: Minification failed

Line 274:0 All "@import" rules must come first
Line 314:1 Unexpected "{"

**/
/*
 * custom.css
 * Store-specific overrides for AKGC.
 * Loaded after main.css — safe to edit, will not be overwritten by theme updates.
 */

/* -- Carousel arrow buttons: white icon on red rounded box ---------------
   The slider-nav__btn--style-2 button uses --btn-ter-bg-color for its
   background and --btn-ter-text-color for its icon colour. Overriding the
   CSS custom properties at :root is the definitive fix — no specificity
   battles needed. Brand red: #d0232a
------------------------------------------------------------------------- */
:root {
  --btn-ter-bg-color:        213, 35, 42;    /* #d0232a as RGB channels */
  --btn-ter-text-color:      255, 255, 255;  /* white as RGB channels */
  --btn-ter-bg-hover-color:  176, 30, 36;    /* #b01e24 darker red on hover */
  --btn-ter-text-hover-color: 255, 255, 255;
}

/* Rounded corners on the box */
.slider-nav__btn--style-2 {
  border-radius: 8px !important;
}
.shopify_subscriptions_app_policy {
  display:none!important;
}

/* -- Sale badge: "SALE" heading + amount/percent, both in brand red ------
   Layout: stacked vertically, centered. Background inherits the
   prod_over_redu_bg theme setting (currently white). Text is always
   #D0232A regardless of the prod_over_redu_text setting.
------------------------------------------------------------------------- */

/* Stack the two inner spans and move the bg to the container */
.product-label--sale {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--product-label-overlay-reduction-bg);
  padding: 0.5em 1em;
}

/* Reset the shared .product-label > span bg/padding on both children.
   text-transform lives here so it applies to the amount regardless of
   whether the Liquid cache has refreshed to the new markup. */
.product-label--sale > span {
  display: block;
  padding: 0;
  background: transparent;
  color: #D0232A;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.3;
}

/* "SALE" title — h6-style: bold, letter-spaced, small margin below */
.product-label--sale > .product-label__sale-title {
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.2em;
  line-height: 1;
}

/* Amount/percent span — inherits uppercase from parent rule above */
.product-label--sale > .product-label__sale-amount {
  line-height: 1;
}

/* -- PDP variant swatches: square instead of circle, +10% size ----------
   icon_circle and icon_square currently render identically — both use
   --btn-inspired-border-radius, a shared variable also used by ~15 other
   buttons/UI elements tied to the global button_shape setting, so it can't
   be changed directly here. Scoped via the <variant-picker> element itself
   (not just .option-selector/.opt-label--swatch, which are also reused by
   collection filter swatches) so this only affects the PDP variant picker.
   !important is required: the base rule this overrides
   (:is(.swatch-style-icon_square, .swatch-style-icon_circle) .option-selector
   :is(.opt-label--swatch, .opt-label--image)) has 3 classes in its
   specificity; this selector has only 2 classes + a type selector, which
   LOSES the comparison regardless of the type selector — CSS specificity
   compares the class tier before the type tier, it doesn't sum them.

   These labels also carry the shared .btn class (padding, 1.5px border,
   background), which is meant to be zeroed out by the theme's own
   icon_square/icon_circle rule already — but a white gap between the
   border and the actual color fill was still showing, so padding/
   border/background are force-reset here directly rather than relying on
   that. The 1px border below is the deliberate outline every swatch keeps;
   the thicker border on the selected swatch is handled elsewhere by the
   theme (:checked + ...::after) and is left untouched. */
variant-picker .option-selector :is(.opt-label--swatch, .opt-label--image) {
  border-radius: 0 !important;
  width: calc(var(--swatch-picker-image-size) * 1.1) !important;
  height: calc(var(--swatch-picker-image-size) * 1.1) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
variant-picker .option-selector :is(.opt-label--swatch, .opt-label--image)::before {
  border-radius: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
variant-picker .option-selector :is(.opt-label--swatch, .opt-label--image)::after {
  border-radius: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* -- Make the Buttons typography size setting actually reach every button
   and variant selector -------------------------------------------------
   Two pre-existing rules in main.css override .btn's font-size at equal
   specificity, winning via source order, so --button-text-size never
   reached them:
   1. .opt-label { font-size: inherit; ... } (main.css ~line 7313) — every
      variant-picker option label (swatch or plain button) uses this,
      inheriting the ambient base size instead. Scoped to <variant-picker>
      here since .opt-label is also reused elsewhere (related-products
      "button" style, filter swatches) that shouldn't be affected.
   2. .btn--large { font-size: var(--base-text-size); ... } — used by the
      Add to Cart button (class="btn btn--large add-to-cart"), explicitly
      pinned to the base size instead of the button size.
   Note: fixing #2 changes the Add to Cart button's actual rendered size
   for the first time (previously tied to Base, now tied to Buttons) —
   this is a real visible change, unlike the original setting wiring. */
variant-picker .opt-label {
  font-size: var(--button-text-size) !important;
}
.btn--large {
  font-size: var(--button-text-size) !important;
}

/* -- Multi-column section: column heading size + weight -----------------
   .text-column__title is an <h3>, inheriting the base h3 rule
   (main.css ~line 1657: font-size: calc(4 * var(--font-scale) +
   var(--base-text-size))) and the shared heading-weight rule
   (h1,.h1,h2,h3,...,.heading-font { font-weight: var(--heading-font-weight); }).
   Both are overridden here — font-size derives from --base-text-size
   directly rather than the heading-scale formula; font-weight is set to
   600 (semi-bold) regardless of the theme's heading font's own weight.
   A single-class selector already outranks both base rules' h3
   type-selector match on specificity, so no !important is needed here. */
.text-column__title {
  font-size: calc(var(--base-text-size) * 1);
}

/* Multi-column: column body text bold */
.text-column__text {
  font-weight: 400;
}

/* -- Collection swatches: square + no white padding, matching PDP --------
   .related-swatch uses --border-radius (a scoped CSS custom property) that
   cascades to the container, ::after border overlay, ::before color fill,
   and .theme-img — zeroing it at the container level squares all of them
   in one rule, including .related-swatch--circle which sets --border-radius
   to 50% but loses to !important here.
   --swatch-inset drives the white gap between the color fill and the border
   in .related-swatch--swatch::before; zeroing it removes the gap and
   restores full-bleed color fill. The 1px border (::after) and active
   thick-line box-shadow (.related-swatch--active) are untouched. */
.related-swatch {
  --border-radius: 0 !important;
}
.related-swatch--swatch::before {
  --swatch-inset: 0 !important;
  width: var(--image-width) !important;
}

/* -- Collection/featured-collection product card swatches: square --------
   Product card swatches (collection page + featured collection section)
   use .product-block-options__item, distinct from the .related-swatch
   pattern used elsewhere. --product-block-options-swatch-border-radius is
   a scoped custom property (default 100px at :root) referenced by the item
   border-radius, the unavailable ::before overlay, and .theme-img —
   zeroing it here squares all three in one declaration.
   padding: 0 removes the white gap between the color fill and the border.
   The hover/focus/active box-shadow in main.css is a double ring:
   a white inner ring (body-bg-color) + a gray outer ring — the white gap
   between them reads as padding. Replaced with a single-ring shadow so
   the outline sits flush against the swatch edge.
   The 1px border and active box-shadow are untouched. */
.product-block-options--swatch .product-block-options__item {
  --product-block-options-swatch-border-radius: 0 !important;
  padding: 0 !important;
}
.product-block-options--swatch .product-block-options__item:hover,
.product-block-options--swatch .product-block-options__item:focus,
.product-block-options--swatch .product-block-options__item:active {
  box-shadow: 0 0 0 2px rgb(var(--body-text-color) / 0.3) !important;
}

/* -- Collection/featured-collection: 2x swatch size, 2px gap, above title ---
   The theme makes .innerer a flex column with the swatch block ordered
   first (order: -1) only at max-width: 767.98px. Extending to all
   viewports here moves swatches above the product title on desktop too.
   flex-direction: column preserves the existing block stacking — no layout
   change other than the order of the swatch row.
   The desktop swatch-method-swatches rule in main.css also applies a
   negative margin-right/-left on .product-block-options (-7px) to
   compensate for 7px item margins — reset to 0 since items now use 1px
   margins for the 2px gap. */
.product-block:not(.product-block--landscape) .product-block__detail .innerer {
  display: flex !important;
  flex-direction: column !important;
}
.product-block:not(.product-block--landscape) .product-block__detail .innerer .product-block-options--swatch {
  order: -1 !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Swatches method — mobile (22px base -> 44px) */
.swatch-method-swatches .product-block-options--swatch .product-block-options__item {
  width: 44px !important;
  height: 44px !important;
  margin: 0 1px 2px !important;
}

/* Swatches method — desktop (14px base -> 28px); reset container negative margin */
@media (min-width: 768px) {
  .swatch-method-swatches .product-block-options {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .swatch-method-swatches .product-block-options--swatch .product-block-options__item {
    width: 28px !important;
    height: 28px !important;
    margin: 0 1px 2px !important;
  }
}

/* Variant images method — all viewports (36px base -> 72px) */
.swatch-method-variant-images .product-block-options--swatch .product-block-options__item {
  width: 72px !important;
  height: 72px !important;
  margin: 0 1px 2px !important;
}
.tech-specs__title {
  font-size: calc(var(--base-text-size) * 0.85);
}
.tech-specs__title {
  margin-bottom: 0;
}

.tech-specs__entry {
  margin-bottom: 1em;
}
.disclosure__content b,
.disclosure__content strong,
.disclosure__content [style*="font-weight:700"],
.disclosure__content [style*="font-weight: 700"],
.disclosure__content [style*="font-weight:bold"],
.disclosure__content [style*="font-weight: bold"] {
  font-size: calc(var(--base-text-size) * 0.80);
}

/* -- Custom typography overrides: Open Sans body copy, Praktika Bold headings ----
   Open Sans isn't in the theme's font_picker library, so it's loaded via Google
   Fonts, scoped to <p> only. Praktika Bold's font files were already uploaded to
   Shopify Files but never had an @font-face wired up until now. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

@font-face {
  font-family: 'Praktika';
  src: url('/cdn/shop/files/praktika-bold-webfont.woff2?v=1767646033') format('woff2'),
       url('/cdn/shop/files/praktika-bold-webfont.woff?v=1767646033') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

p, li {
  font-family: 'Open Sans', sans-serif;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.heading-font,
label, summary, .navigation__link {
  font-family: 'Praktika', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.heading-font,
.label, summary {
  font-family: 'Praktika', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
h1, .h1,
 {
  font-family: 'Praktika Extended', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}
.navigation__tier-3 {
    font-family: 'Praktika', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

/* -- Active option/variant buttons: 1px thicker selected-state border ----
   Covers every place the theme draws the --input-border-color-active border:
   plain checked options, swatches (.opt-label--active), unavailable-but-checked
   options, and the disabled/no-JS availability variants. Was 1px, now 2px. */
.opt-btn:checked + .opt-label,
.opt-label--active,
.opt-label--is-unavailable.opt-label--active,
variant-picker:not(.variant-picker--pre-last-selection.variant-picker--product-available):not([data-availability=off]) .opt-btn.is-unavailable:checked + .opt-label,
variant-picker:not([data-availability=off]) .option-selector[data-index="1"] .opt-btn.is-unavailable:checked + .opt-label {
  border-width: 2px;
}
/* Half Size Insert block */
.half-size-insert__btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  justify-content: flex-start;
  text-align: start;
}

.half-size-insert__media {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  margin-inline-end: 14px;
  border-radius: calc(var(--btn-border-radius) + max(0px, var(--btn-border-radius) - 3px));
  overflow: hidden;
}

.half-size-insert__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.half-size-insert__text {
  font-size: var(--button-text-size);
}

.option-selector__btns .opt-label:not(.opt-label--swatch):not(.opt-label--image) {
  min-width: calc(33.333% - 10px);
  text-align: center;
}