/** Shopify CDN: Minification failed

Line 284:64 Expected ":"

**/
/* custom styles for Kesslers */
:root { 
    --small-feature-link-font-size: 1em;
    --brand-color-red: #8a1538;
    --image-overlay-bg: rgba(0, 0, 0, 0.32);
    /* --reading-container-width: 820px; */
}

/* header */
.navigation .navigation__tier-1>.navigation__item>.navigation__link {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05rem;
}
.announcement__text {
    text-transform: uppercase;
    letter-spacing: .1rem;
}
.pageheader .logo {
    padding: 25px 0;
    text-align: center;
}
@media only screen and (max-width: 767.98px) {
    .pageheader .logo {
        padding: 15px 0;
        pointer-events: none;
    }
}
.navigation__item--with-children .navigation__link[href="#"] {
  cursor:default;
}

@media (min-width: 768px) {
    .navigation .navigation__columns .navigation__column:not(.navigation__column--promotion) .navigation__column-title {
        opacity: 1;
        font-size: .85em;
        font-weight: 500;
        color:var(--k-crimson);
    }
}

/* cart drawer */
.drawer {
    z-index: 9999999999;
}
.drawer .cart-item__title a.text-current {
    font-size: .9rem;
    font-weight: 400;
}
.kdc-cart-gift { margin-bottom: .5rem; margin-top:1rem; }
.kdc-cart-gift__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  /* color: var(--k-crimson); */
  font-size: 1rem;
  padding-left: 4px;
}
.kdc-cart-gift input[type="checkbox"] {
  accent-color: var(--k-crimson);
  width: 1.1em;
  height: 1.1em;
  margin: 0;
}
.kdc-note-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.kdc-note-toggle .icon { flex: none; }

/* swym wishlist custom styles */
.swym-storefront-layout-empty-state-cta-button {
    border-radius: 0 !important;
}
.swym-storefront-layout-grid-item-action-container {
    display: none !important;
}
.swym-storefront-layout-grid-item-price-variant {
    display: none !important;
}
swym-storefront-layout-as-drawer .swym-storefront-layout-drawer img.swym-storefront-layout-grid-item-image {
    aspect-ratio: 1;
    object-fit: contain;
}
.swym-storefront-layout-grid-item-image-container {
    background: none !important;
}
.swym-advanced-header-icon { 
    font-size: 1rem;
    line-height: 1;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

swym-storefront-layout-as-drawer .swym-storefront-layout-layout {
    border-radius: 0px !important;
}
.swym-storefront-layout-title svg {
    color: var(--k-crimson);
}
a.swym-storefront-layout-grid-item-title {
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}
.swym-storefront-layout-grid-item-option-button { position:relative !important; }
.swym-storefront-layout-grid-item {
    align-items: center;
}


.swym-ui-component .swym-share-wishlist-modal .swym-share-wishlist-control-centre.swym-share-wishlist-modal-dialog {
    border-radius: 0 !important;
}
.swym-ui-component .swym-share-wishlist-modal .swym-share-wishlist-control-centre.swym-share-wishlist-modal-dialog .swym-share-wishlist-input-container .swym-share-wishlist-email, .swym-ui-component .swym-share-wishlist-modal .swym-share-wishlist-control-centre.swym-share-wishlist-modal-dialog .swym-share-wishlist-input-container .swym-share-wishlist-name {
    font-size: 16px !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
}
.swym-ui-component .swym-share-wishlist-modal .swym-share-wishlist-control-centre.swym-share-wishlist-modal-dialog .swym-share-wishlist-email-btn {
    border-radius: 0 !important;
}
.swym-ui-component .swym-share-wishlist-modal .swym-share-wishlist-control-centre.swym-share-wishlist-modal-dialog .swym-share-wishlist-subheading {
    letter-spacing: 0 !important;
}
.swym-ui-component .swym-share-wishlist-modal .swym-share-wishlist-control-centre.swym-share-wishlist-modal-dialog .swym-share-wishlist-input-container .swym-share-wishlist-note {
    font-size: 16px !important;
    border-radius: 0 !important;
}
.swym-ui-component .swym-share-wishlist-modal .swym-share-wishlist-control-centre.swym-share-wishlist-modal-dialog .swym-share-wishlist-button {
    letter-spacing: 0 !important;
    border-radius: 0 !important;
}
.swym-ui-component .swym-share-wishlist-modal .swym-share-wishlist-control-centre.swym-share-wishlist-modal-dialog .swym-share-wishlist-button img {
    width: 24px !important;
    height: 24px !important;
}
swym-storefront-layout-as-drawer #swym-storefront-layout-container .swym-storefront-layout-share-footer-share-btn {
    font-size: 16px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important; 
}
a#swym-advanced-header-icon {
    width: 30px;
    height: 30px;
    display: flex !important;
    justify-content: center;
    font-size: 24px;
}
.swym-header-icon-count-bubble {
  border-radius: 50% !important;
  right: -4px !important;
  top: -1px !important;
  left: auto !important;
}
.logo-area__right__inner {
    min-width: 169px;
}


@media (max-width: 767px) {
    a#swym-advanced-header-icon {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 30px;
        height: 30px;
        display: flex !important;
        justify-content: center;
    }
    .swym-header-icon-count-bubble {
      border-radius: 50% !important;
      right: -3px !important;
      top: -1px !important;
      left: auto !important;
    }
}
@media (max-width: 767.98px) {
    shopify-account.header-account-link {
        padding: 0;
    }
    .logo-area__middle--logo-image {
    max-width: 120px;
    }
    .logo-area__left__inner {
    display: flex;
    position: relative;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    }
    .logo-area__right__inner {
    min-width: 118px;
  }
}
.swym-storefront-layout-drawer {
      z-index: 10000000009 !important;
}
/* podium on product pages 
@media (max-width: 1325px) {
.template-product div#podium-website-widget #podium-bubble {
    bottom: 60px !important;
}
}*/
iframe#podium-bubble, iframe#podium-prompt {
    z-index: 999999999 !important;
}


/* product block - display tooltip on hover */
.k-sku-badge {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  padding: 3px 8px; font: 500 11px/1.4 "DM Sans", sans-serif;
  letter-spacing: .04em; color: #000; background: #f3f4f6;
  border-radius: 3px; pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
}
.product-block:hover .k-sku-badge { opacity: 1; }
/* .product-block:focus-within .k-sku-badge { opacity: 1; }
 @media (hover: none) { .k-sku-badge { opacity: 1; } } */
@media (max-width: 767.98px) {
  .product-block:hover .k-sku-badge { display:none; }
}


/* product page custom ring size field */
/* .k-ring-size__error { margin-top: .5rem; color: #d90000; font-size: var(--smaller-text-size-2); }
.lightly-styled-select:has(.k-ring-size__select--invalid) { border-color: #d90000; }
.k-ring-size .lightly-styled-select {  height:46px; } */
.k-ring-size__input { width: 100%; max-width: 14rem; height:46px; }
.k-ring-size__input.k-ring-size__field--invalid { border-color: #d90000; }
.k-ring-size__error { margin-top: .5rem; color: #d90000; font-size: var(--smaller-text-size-2); }
/* collapse an empty custom-liquid wrapper (e.g. ring size on non-ring products) */
.product-form > .lightly-spaced-row:not(:has(*)) { display: none; }

.k-ring-size > label.label {     
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.k-ring-size a.ring-size-info {
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;
}


@media (min-width: 1092px) {
  .section-main-product .product-form .k-ring-size {
      position: absolute;
      padding-top: 5px;
      left: 150px;
      width: 340px;
  }
}

@media (min-width: 1092px) {
    .k-ring-size__error {
        margin-top: 0;
        position: absolute;
        display: block;
        background-color: #d90000;
        padding: 10px;
        top: -52px;
        width: 100%;
        color: #FFF;
    }
    .k-ring-size__error::after {
      content: "";
      position: absolute;
      rotate:180deg;
      top: 100%;
      margin-top:-1px;
      left: 20px; 
      border-width: 10px;
      border-style: solid;
      border-color: transparent transparent #d90000; transparent;
    }
}



.product-form .quantity-submit-row .quantity-submit-row__submit {
    margin-top: 25px;
}

/* policy pages */
.shopify-policy__title h1 { text-align:left; }
.shopify-policy__body h2 {
    font-size: 26px;
}
.shopify-policy__body h3 {
    font-size: 22px;
}
.shopify-policy__body .rte li {
    margin-bottom:1rem;
}
.shopify-policy__title {
    margin-bottom:2rem;
}
.shopify-policy__body .rte li:has(>ul:first-child,>ol:first-child) {
    list-style: disc outside;
}
@media only screen and (max-width: 767.98px) {
.shopify-policy__body h2 {
    font-size: 22px;
}
.shopify-policy__body h3 {
    font-size: 20px;
}
}
/* text */
.text-color-red { color: var(--brand-color-red); }

/* margin */
.mr-1 { margin-right:.5rem; }
/* buttons */
.btn { font-weight: 600; }

/* slideshow */
.text-overlay__inner {
    max-width: var(--page-container-width);
    margin-left: auto;
    margin-right: auto;
}

/* collection slider */
.template-index #content .collection-slider .product-block__title {
    color: rgb(var(--link-color));
    text-transform: uppercase;
    letter-spacing: .05rem;
    font-weight: 600;
    text-decoration: underline;
    padding-top: 10px;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
    line-height: 2;
}

/* subheading */
.subheading {
    color: rgb(var(--link-color));
}
.subheading--over {
    margin-bottom: 1.25em;
}

.subheading {
    font-size: 1em;
    font-weight: 600;
    letter-spacing: .15em;
}


/* multi-column */
.section-multi-column h3.text-column__title { 
    font-family: var(--base-font-family);
    text-transform: uppercase;
    font-size:24px;
    letter-spacing:.15rem;
}
.section-multi-column .small-feature-link {
    /* color: var(--body-text-color); */
    font-size: var(--small-feature-link-font-size);
    font-weight: 600;
    /* text-decoration-color: var(--body-text-color); */
    text-decoration-color: rgb(var(--link-color));
    text-underline-offset: 8px;
    text-decoration-thickness: 1px;
}
.section-multi-column .text-column__image.lightly-spaced-row {
    margin-bottom:2em;
}
.section-multi-column .text-column__text {
    padding:10px 0 15px 0;
}

/* testimonial */
.testimonial__text .testimonial__blockquote {
    font-style: italic;
    line-height: 1.6;
}

.testimonial__star-rating .testimonial__star { color: rgb(var(--link-color)) !important; }
.testimonial__star-rating .testimonial__star svg {
    width: 24px;
    height: 24px;
}
.testimonial__author { 
color: rgb(var(--link-color));
text-transform:uppercase;
    font-size: .9em;
    font-weight: 600;
    letter-spacing: .15em;
    margin-top:30px;
}

/* logo list */
.logo-list__logo-title {
    margin-top: 10px;
    /* color: rgb(var(--link-color)); */
    color: rgb(var(--body-text-color));
        font-size: .9em;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform:uppercase;
}

/* image with text */
.section-image-with-text .small-feature-link {
    font-size: var(--small-feature-link-font-size);
    font-weight: 600;
    text-decoration-color: rgb(var(--link-color));
    text-underline-offset: 8px;
    text-decoration-thickness: 1px;
}
.text-overlay__inner {
    padding: 35px 20px;
}
.rte .metafield-rich_text_field ul li {
    margin-bottom: 1rem;
}

.rte .metafield-rich_text_field ul {
    margin-inline-start: 1.5em;
}

/* footer */
.section-footer .social a {
    margin: 0 0 5px;
    margin-inline-end: 20px;
    opacity: .65;
}
.section-footer .social a:hover {
color:rgb(var(--footer-heading-col));
opacity: 1;
}
.section-footer__row.section-footer__row-lower { 
    max-width: var(--page-container-width);
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}
.section-footer .footer-bottom {
    background-color: rgb(var(--footer-heading-col));
}
.section-footer .footer-bottom a,
.section-footer .footer-bottom {
    color: #FFF; 
    text-transform: uppercase;
    letter-spacing:.05rem;
}
.section-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 1px;
}

/* map (locations) */
.podium-reviews {
    margin:auto;    
    max-width:518px;
}
.podium-reviews iframe {
    border-radius:8px; 
    max-width:518px;
    width:100%;
}
@media (min-width: 960px) {
.map-section--has-feature-image.map-section--map-constrained .map-section__feature {
    display: flex;
    width: 50%;
}
.map-section--has-feature-image.map-section--map-constrained .map-section__text {
    width: 25%;
}
.map-section--has-feature-image.map-section--map-constrained .map-section__map {
    width: 25%;
}
.map-section--has-feature-image.map-section--map-constrained .map-section__text {
    padding: 40px 0;
    padding-bottom:50px;
    padding-inline-end: 40px;
}
}
@media (max-width: 959px) {
    .map-section--has-feature-image.map-section--map-constrained .map-section__map {
        position: relative;
        width: 100%;
        height: 35vh;
    }
    .map-section--has-feature-image.map-section--map-constrained .map-section__map {
        height: auto;
        aspect-ratio: 5 / 3;
    }
}
@media (max-width: 767.98px) {
    .map-section--has-feature-image.map-section--map-constrained .map-section__feature, 
    .map-section--has-feature-image.map-section--map-constrained .map-section__placeholder, 
    .map-section--has-feature-image.map-section--map-constrained .map-section__map-container {
        height: auto;
        aspect-ratio: 5 / 3;
    }
}

/* page content */
.shopify-section.page-section-spacing .rte.cf hr {
    margin: 40px 0;
}
.shopify-section.page-section-spacing .rte.cf img {
padding:1em 0;
}
.shopify-section.page-section-spacing .rte ol li {
    margin-bottom: .5rem;
}
.shopify-section.page-section-spacing .rte ul li {
    margin-bottom: .5rem;
}

/* faq section */
.disclosure__content.rte li {
    margin-bottom: .5rem;
}

/* image with text section */


/* footer */
#pagefooter { border-top: 0px solid #DDD; }
#pagefooter .cross-page-promos .heading-font {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: .1rem;
    padding-top: 15px;
    line-height: 1.5;
}
#pagefooter .cross-page-promos {
  margin: 50px 0;
}
#pagefooter .icon-with-caption .theme-img {
    width: 100%;
    height: 34px;
    object-fit: contain;
}


/* product page */
.breadcrumbs-prod-nav {
    white-space: nowrap;
}
.product-form .product-title {
    margin: 0 0 .5em;
    font-size: 32px;
    line-height: 1.3;
}

.product-spec-list { margin: 0; padding: 0; }
.product-spec-list .spec-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.product-spec-list .spec-row:last-child { border-bottom: 0; }
.product-spec-list dt {
  font-weight: 600;
  flex: 0 0 40%;
  margin: 0;
}
.product-spec-list dd { margin: 0; flex: 1; }
.product-info-accordion .disclosure__title {
    text-transform: uppercase;
    color: var(--k-crimson);
    letter-spacing: .1rem;
}
.product-form .label {
    text-transform: uppercase;
    letter-spacing: .1rem;
}
span.price__current {
  color: var(--k-crimson);
}
.product-block span.price__current { font-weight:600; }
.product-price--large .price__default {
    font-size:26px;
}
.product-block .product-block__title { margin-bottom:8px; }
.section-related-products .hometitle { color: var(--k-crimson); }
.shopify-section.section-related-products { /* background-color: #f9f9f9; */ padding: 1rem 0;  }

.shopify-section.section-related-products .product-block__image .theme-img, .shopify-section.section-related-products .product-block {
    /* mix-blend-mode: multiply; */
}
.gallery-viewer__thumb-img {
    aspect-ratio: 1;
}

@media (max-width: 767.98px) {
.shopify-section.section-related-products { padding: 1rem 0; }
}
.product-form .vendor { margin-bottom:5px; }
.product-form .vendor a {
    font-family: DM Sans, sans-serif;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .1rem;
    text-transform: uppercase;
    color: #8a1538;
    text-decoration: none;
}
.product-form .vendor a:hover {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 1px;
}
.product-form .vendor .product-info-label { display:none; }

  .k-eyebrow-product-page {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1.25rem;
  }
  .k-eyebrow__collection,  .k-eyebrow__brand {
    font-family: 'DM Sans', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: #8a1538;
    text-decoration: none;
  }
  .k-eyebrow__collection:hover { text-decoration: underline; }

  .k-eyebrow__sku {
    font-style: italic;
    font-size: .9rem;
    color: #6b6b6b;
  }
.thumbnail--media-image .theme-img {
    aspect-ratio: 1;
    object-fit: cover;
}

/* product card */
.product-block .block-inner .vendor {
    font-weight: 600;
}
.price--call-for-price .price__current {
}
/* Depends on .price--call-for-price emitted by the guard in snippets/price.liquid */
.block-inner-inner:has(.price--call-for-price) .quickbuy-toggle {
  display: none !important;
}

/* product page - special order block */
.k-avail { margin: 1.25rem 0; }

.k-avail__note {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .9rem;
  margin: 0 0 1rem;
  padding:10px;
  background-color: var(--k-gray-100);
}
.k-avail__note:last-child { margin-bottom: 0; }

.k-avail__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--k-gray-400);
}

.k-avail__note strong {
  color: #2c2c2a;
  font-weight: 500;
}

/* store location display - custom liquid on PDP */
.k-avail-location {
  margin: 1.5rem 0 1rem 0;
  padding: .75rem;
  border: 1px solid rgb(var(--body-text-color)/.15);
}
.k-avail-location__head { display: flex; align-items: center; gap: 0.25rem; margin-bottom: .5rem; }
.k-avail-location__pin { flex: 0 0 auto; width: 22px; height: 22px; color: var(--k-crimson); }
.k-avail-location__title {
  font-family: var(--heading-font-family);
  font-size: 18px;
  color: var(--k-crimson);
}
.k-avail-location__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.375rem 0.4375rem;
}
.k-avail-location__item {
  font-family: var(--font-body-family, 'DM Sans', sans-serif);
  font-size: 0.8125rem; line-height: 1.2;
  padding: 0.25rem 0.5625rem;
  border: 1px solid rgb(var(--body-text-color)/.15);
  border-radius: 999px;
  white-space: nowrap;
}
.k-avail-location__item a { color:var(--body-text-color); }
.k-avail-location__note {
  margin: 0.5rem 0 0;
  font-family: var(--font-body-family, 'DM Sans', sans-serif);
  font-size: 0.75rem; line-height: 1.4; opacity: 0.7;
  display:none;
}
.product-form div.product-info-accordion[data-dynamic-variant-content] .disclosure { border-top: none; }

/* sticky add to cart update */
@media (min-width: 1350px) {
  .section-main-product .sticky-atc--center {
      inset-inline-start:0;
      inset-inline-end: 0;
      margin: auto;
      max-width: 1000px;
      bottom: 0;
      min-height: 80px;
  }
  .section-main-product .sticky-atc {
      --sticky-atc-width: 100%;
      width: var(--sticky-atc-width);
      padding: 10px;
  }
}

@media (min-width: 768px) {
  .section-main-product .sticky-atc--center {
      inset-inline-start:0;
      inset-inline-end: 0;
      margin: auto;
      bottom: 0;
      min-height: 80px;
  }
  .section-main-product .sticky-atc {
      --sticky-atc-width: 100%;
      width: var(--sticky-atc-width);
      padding: 10px;
  }
}

.sticky-atc { z-index: 9999999999 !important; }
.section-main-product .sticky-atc__details__title {
    line-height: 1.3;
    font-family: var(--heading-font-family);
    font-style: var(--heading-font-style);
    font-weight: var(--heading-font-weight);
    letter-spacing: var(--heading-font-letter-spacing);
}
/* buttons */
.small-feature-link {
  text-underline-offset: 6px;
  font-weight: 600;
  text-decoration-color: rgb(var(--link-color));
}

/* Collection grid  */
.utility-bar__right .link-dropdown .link-dropdown__button {
    color: #8a1538;
}
.utility-bar__left .utility-bar__item {
    color: #8a1538;
}

/* editorial collection template */
.template-collection .k-eyebrow {
  font-size: 1rem; opacity: 1; font-weight: 500;
  }

.template-collection .k-fullbleed__inner {
    justify-content: flex-end;
}
.template-collection .k-fullbleed {
    min-height: clamp(400px, 32vw, 500px); 
  }

.template-collection .k-tile__heading {
    word-break: break-word;
}
.template-collection .k-interstitial--image .k-tile__btn {
    position: static;
    transform: none;
    font-size: 1rem;
    letter-spacing: .15em;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 8px;
    font-weight: 500;
    margin-top:15px;
}
.template-collection .k-tile.k-tile--image .k-tile__heading {
    margin-bottom: 15px;
    margin-top:60px;
}
.template-collection .k-interstitial--image .k-tile__sub {
    font-size: 1rem;
}
.template-collection .k-interstitial--image .k-tile__overlay {
    justify-content: flex-end;
}

/* bleed carousel */
.shopify-section.section-bleed-carousel { overflow:hidden; }

/* modals */

/* shopping cart */
#cartform .subtotal {
    margin: 0 0 30px;
    font-size: 32px;
}


/*
  ============================================================
  KESSLERS DIAMONDS — STANDALONE UTILITY CSS
  kesslers.css
  ============================================================
  A hand-crafted utility stylesheet using the "k-" prefix.
  No build step, no dependencies — just link it and go.

  Usage:
    <link rel="stylesheet" href="kesslers.css" />
    or in Shopify:
    <link rel="stylesheet" href="{{ 'kesslers.css' | asset_url }}" />

  All classes mirror Tailwind naming conventions with a "k-" prefix.
  e.g.  k-flex, k-text-center, k-bg-crimson, k-font-heading

  TABLE OF CONTENTS
  ─────────────────
  1.  CSS Custom Properties (tokens)
  2.  Base / Reset
  3.  Display & Layout
  4.  Flexbox
  5.  Grid
  6.  Positioning
  7.  Spacing — Margin
  8.  Spacing — Padding
  9.  Sizing — Width
  10. Sizing — Height
  11. Max Width / Min Width
  12. Typography — Font Family
  13. Typography — Font Size
  14. Typography — Font Weight
  15. Typography — Line Height
  16. Typography — Letter Spacing
  17. Typography — Text Align
  18. Typography — Text Transform
  19. Typography — Text Decoration
  20. Typography — Font Style
  21. Colors — Text
  22. Colors — Background
  23. Colors — Border
  24. Borders
  25. Border Radius
  26. Shadows
  27. Opacity
  28. Overflow
  29. Cursor
  30. Transitions & Transforms
  31. Responsive Breakpoints (sm: md: lg:)
  32. Hover Utilities
  33. Kesslers Component Classes
  ============================================================
*/

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand colors */
  --k-crimson:        #8a1538;
  --k-crimson-dark:   #6b1029;
  --k-gold:           #b89a5e;
  --k-gold-light:     #d4b97a;
  --k-gold-muted:     #c9ad76;
  --k-off-white:      #faf8f5;
  --k-ink:            #1a1a2e;
  --k-ink-light:      #4a4a5a;

  /* Standard grays */
  --k-gray-100: #f3f4f6;
  --k-gray-200: #e5e7eb;
  --k-gray-300: #d1d5db;
  --k-gray-400: #9ca3af;
  --k-gray-500: #6b7280;
  --k-gray-600: #4b5563;
  --k-gray-700: #374151;
  --k-gray-800: #1f2937;
  --k-gray-900: #111827;

  /* Fonts */
  --k-font-heading: "Playfair Display", serif;
  --k-font-body: "DM Sans", sans-serif;
}
h1.k-h1-as-body,
.k-h1-as-body {
  /* font-family: var(--base-font-family, var(--k-font-body));
  font-size: 1rem;
  font-weight: 400;
  font-style: normal; */
  font: inherit;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  margin: 0 0 1.5rem;
  display: block;
}
.k-inline-text {
  display: inline !important;
}


/* ============================================================
   2. BASE / RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

.k-antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.k-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ============================================================
   3. DISPLAY & LAYOUT
   ============================================================ */
.k-block         { display: block; }
.k-inline-block  { display: inline-block; }
.k-inline        { display: inline; }
.k-flex          { display: flex; }
.k-inline-flex   { display: inline-flex; }
.k-grid          { display: grid; }
.k-inline-grid   { display: inline-grid; }
.k-hidden        { display: none; }
.k-contents      { display: contents; }


/* ============================================================
   4. FLEXBOX
   ============================================================ */
.k-flex-row            { flex-direction: row; }
.k-flex-row-reverse    { flex-direction: row-reverse; }
.k-flex-col            { flex-direction: column; }
.k-flex-col-reverse    { flex-direction: column-reverse; }

.k-flex-wrap           { flex-wrap: wrap; }
.k-flex-nowrap         { flex-wrap: nowrap; }
.k-flex-wrap-reverse   { flex-wrap: wrap-reverse; }

.k-items-start         { align-items: flex-start; }
.k-items-center        { align-items: center; }
.k-items-end           { align-items: flex-end; }
.k-items-stretch       { align-items: stretch; }
.k-items-baseline      { align-items: baseline; }

.k-justify-start       { justify-content: flex-start; }
.k-justify-center      { justify-content: center; }
.k-justify-end         { justify-content: flex-end; }
.k-justify-between     { justify-content: space-between; }
.k-justify-around      { justify-content: space-around; }
.k-justify-evenly      { justify-content: space-evenly; }

.k-self-auto           { align-self: auto; }
.k-self-start          { align-self: flex-start; }
.k-self-center         { align-self: align-self: center; }
.k-self-end            { align-self: flex-end; }
.k-self-stretch        { align-self: stretch; }

.k-flex-1              { flex: 1 1 0%; }
.k-flex-auto           { flex: 1 1 auto; }
.k-flex-none           { flex: none; }
.k-flex-shrink-0       { flex-shrink: 0; }
.k-flex-grow           { flex-grow: 1; }
.k-flex-grow-0         { flex-grow: 0; }

/* Gap */
.k-gap-0    { gap: 0; }
.k-gap-1    { gap: 0.25rem; }
.k-gap-2    { gap: 0.5rem; }
.k-gap-3    { gap: 0.75rem; }
.k-gap-4    { gap: 1rem; }
.k-gap-5    { gap: 1.25rem; }
.k-gap-6    { gap: 1.5rem; }
.k-gap-8    { gap: 2rem; }
.k-gap-10   { gap: 2.5rem; }
.k-gap-12   { gap: 3rem; }
.k-gap-16   { gap: 4rem; }

.k-gap-x-2  { column-gap: 0.5rem; }
.k-gap-x-4  { column-gap: 1rem; }
.k-gap-x-6  { column-gap: 1.5rem; }
.k-gap-x-8  { column-gap: 2rem; }
.k-gap-x-12 { column-gap: 3rem; }
.k-gap-x-16 { column-gap: 4rem; }

.k-gap-y-2  { row-gap: 0.5rem; }
.k-gap-y-4  { row-gap: 1rem; }
.k-gap-y-6  { row-gap: 1.5rem; }
.k-gap-y-8  { row-gap: 2rem; }
.k-gap-y-12 { row-gap: 3rem; }
.k-gap-y-16 { row-gap: 4rem; }


/* ============================================================
   5. GRID
   ============================================================ */
.k-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.k-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.k-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.k-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.k-col-span-1   { grid-column: span 1 / span 1; }
.k-col-span-2   { grid-column: span 2 / span 2; }
.k-col-span-3   { grid-column: span 3 / span 3; }
.k-col-span-4   { grid-column: span 4 / span 4; }
.k-col-span-6   { grid-column: span 6 / span 6; }
.k-col-span-full{ grid-column: 1 / -1; }

.k-grid-rows-1  { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.k-grid-rows-2  { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.k-grid-rows-3  { grid-template-rows: repeat(3, minmax(0, 1fr)); }


/* ============================================================
   6. POSITIONING
   ============================================================ */
.k-static   { position: static; }
.k-relative { position: relative; }
.k-absolute { position: absolute; }
.k-fixed    { position: fixed; }
.k-sticky   { position: sticky; }

.k-inset-0      { inset: 0; }
.k-inset-x-0    { left: 0; right: 0; }
.k-inset-y-0    { top: 0; bottom: 0; }
.k-top-0        { top: 0; }
.k-right-0      { right: 0; }
.k-bottom-0     { bottom: 0; }
.k-left-0       { left: 0; }
.k-top-4        { top: 1rem; }
.k-right-4      { right: 1rem; }
.k-bottom-4     { bottom: 1rem; }
.k-left-4       { left: 1rem; }

.k-z-0    { z-index: 0; }
.k-z-10   { z-index: 10; }
.k-z-20   { z-index: 20; }
.k-z-30   { z-index: 30; }
.k-z-40   { z-index: 40; }
.k-z-50   { z-index: 50; }


/* ============================================================
   7. SPACING — MARGIN
   ============================================================ */
.k-m-0    { margin: 0 !important; }
.k-m-1    { margin: 0.25rem; }
.k-m-2    { margin: 0.5rem; }
.k-m-3    { margin: 0.75rem; }
.k-m-4    { margin: 1rem; }
.k-m-6    { margin: 1.5rem; }
.k-m-8    { margin: 2rem; }
.k-m-auto { margin: auto; }

.k-mx-0    { margin-left: 0; margin-right: 0; }
.k-mx-1    { margin-left: 0.25rem; margin-right: 0.25rem; }
.k-mx-2    { margin-left: 0.5rem; margin-right: 0.5rem; }
.k-mx-4    { margin-left: 1rem; margin-right: 1rem; }
.k-mx-6    { margin-left: 1.5rem; margin-right: 1.5rem; }
.k-mx-8    { margin-left: 2rem; margin-right: 2rem; }
.k-mx-auto { margin-left: auto; margin-right: auto; }

.k-my-0    { margin-top: 0; margin-bottom: 0; }
.k-my-1    { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.k-my-2    { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.k-my-3    { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.k-my-4    { margin-top: 1rem; margin-bottom: 1rem; }
.k-my-6    { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.k-my-8    { margin-top: 2rem; margin-bottom: 2rem; }
.k-my-10   { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.k-my-12   { margin-top: 3rem; margin-bottom: 3rem; }
.k-my-16   { margin-top: 4rem; margin-bottom: 4rem; }

.k-mt-0    { margin-top: 0; }
.k-mt-1    { margin-top: 0.25rem; }
.k-mt-2    { margin-top: 0.5rem; }
.k-mt-3    { margin-top: 0.75rem; }
.k-mt-4    { margin-top: 1rem; }
.k-mt-6    { margin-top: 1.5rem; }
.k-mt-8    { margin-top: 2rem; }
.k-mt-10   { margin-top: 2.5rem; }
.k-mt-12   { margin-top: 3rem; }
.k-mt-16   { margin-top: 4rem; }
.k-mt-20   { margin-top: 5rem; }
.k-mt-auto { margin-top: auto; }

.k-mr-0    { margin-right: 0; }
.k-mr-1    { margin-right: 0.25rem; }
.k-mr-2    { margin-right: 0.5rem; }
.k-mr-4    { margin-right: 1rem; }
.k-mr-6    { margin-right: 1.5rem; }
.k-mr-8    { margin-right: 2rem; }
.k-mr-auto { margin-right: auto; }

.k-mb-0    { margin-bottom: 0; }
.k-mb-1    { margin-bottom: 0.25rem; }
.k-mb-2    { margin-bottom: 0.5rem; }
.k-mb-3    { margin-bottom: 0.75rem; }
.k-mb-4    { margin-bottom: 1rem; }
.k-mb-6    { margin-bottom: 1.5rem; }
.k-mb-8    { margin-bottom: 2rem; }
.k-mb-10   { margin-bottom: 2.5rem; }
.k-mb-12   { margin-bottom: 3rem; }
.k-mb-16   { margin-bottom: 4rem; }
.k-mb-auto { margin-bottom: auto; }

.k-ml-0    { margin-left: 0; }
.k-ml-1    { margin-left: 0.25rem; }
.k-ml-2    { margin-left: 0.5rem; }
.k-ml-4    { margin-left: 1rem; }
.k-ml-6    { margin-left: 1.5rem; }
.k-ml-8    { margin-left: 2rem; }
.k-ml-auto { margin-left: auto; }

/* Space between children */
.k-space-y-2  > * + * { margin-top: 0.5rem; }
.k-space-y-3  > * + * { margin-top: 0.75rem; }
.k-space-y-4  > * + * { margin-top: 1rem; }
.k-space-y-6  > * + * { margin-top: 1.5rem; }
.k-space-y-8  > * + * { margin-top: 2rem; }
.k-space-y-10 > * + * { margin-top: 2.5rem; }
.k-space-y-12 > * + * { margin-top: 3rem; }
.k-space-y-16 > * + * { margin-top: 4rem; }

.k-space-x-2  > * + * { margin-left: 0.5rem; }
.k-space-x-4  > * + * { margin-left: 1rem; }
.k-space-x-6  > * + * { margin-left: 1.5rem; }
.k-space-x-8  > * + * { margin-left: 2rem; }


/* ============================================================
   8. SPACING — PADDING
   ============================================================ */
.k-p-0    { padding: 0 !important; }
.k-p-1    { padding: 0.25rem; }
.k-p-2    { padding: 0.5rem; }
.k-p-3    { padding: 0.75rem; }
.k-p-4    { padding: 1rem; }
.k-p-5    { padding: 1.25rem; }
.k-p-6    { padding: 1.5rem; }
.k-p-8    { padding: 2rem; }
.k-p-10   { padding: 2.5rem; }
.k-p-12   { padding: 3rem; }
.k-p-16   { padding: 4rem; }

.k-px-0    { padding-left: 0; padding-right: 0; }
.k-px-1    { padding-left: 0.25rem; padding-right: 0.25rem; }
.k-px-2    { padding-left: 0.5rem; padding-right: 0.5rem; }
.k-px-3    { padding-left: 0.75rem; padding-right: 0.75rem; }
.k-px-4    { padding-left: 1rem; padding-right: 1rem; }
.k-px-5    { padding-left: 1.25rem; padding-right: 1.25rem; }
.k-px-6    { padding-left: 1.5rem; padding-right: 1.5rem; }
.k-px-8    { padding-left: 2rem; padding-right: 2rem; }
.k-px-10   { padding-left: 2.5rem; padding-right: 2.5rem; }
.k-px-12   { padding-left: 3rem; padding-right: 3rem; }
.k-px-16   { padding-left: 4rem; padding-right: 4rem; }

.k-py-0    { padding-top: 0; padding-bottom: 0; }
.k-py-1    { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.k-py-2    { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.k-py-3    { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.k-py-4    { padding-top: 1rem; padding-bottom: 1rem; }
.k-py-5    { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.k-py-6    { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.k-py-8    { padding-top: 2rem; padding-bottom: 2rem; }
.k-py-10   { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.k-py-12   { padding-top: 3rem; padding-bottom: 3rem; }
.k-py-16   { padding-top: 4rem; padding-bottom: 4rem; }
.k-py-20   { padding-top: 5rem; padding-bottom: 5rem; }
.k-py-24   { padding-top: 6rem; padding-bottom: 6rem; }

.k-pt-0    { padding-top: 0; }
.k-pt-2    { padding-top: 0.5rem; }
.k-pt-4    { padding-top: 1rem; }
.k-pt-6    { padding-top: 1.5rem; }
.k-pt-8    { padding-top: 2rem; }
.k-pt-10   { padding-top: 2.5rem; }
.k-pt-12   { padding-top: 3rem; }
.k-pt-16   { padding-top: 4rem; }

.k-pr-0    { padding-right: 0; }
.k-pr-2    { padding-right: 0.5rem; }
.k-pr-4    { padding-right: 1rem; }
.k-pr-6    { padding-right: 1.5rem; }
.k-pr-8    { padding-right: 2rem; }

.k-pb-0    { padding-bottom: 0; }
.k-pb-2    { padding-bottom: 0.5rem; }
.k-pb-4    { padding-bottom: 1rem; }
.k-pb-6    { padding-bottom: 1.5rem; }
.k-pb-8    { padding-bottom: 2rem; }
.k-pb-10   { padding-bottom: 2.5rem; }
.k-pb-12   { padding-bottom: 3rem; }
.k-pb-16   { padding-bottom: 4rem; }

.k-pl-0    { padding-left: 0; }
.k-pl-2    { padding-left: 0.5rem; }
.k-pl-4    { padding-left: 1rem; }
.k-pl-6    { padding-left: 1.5rem; }
.k-pl-8    { padding-left: 2rem; }


/* ============================================================
   9. SIZING — WIDTH
   ============================================================ */
.k-w-auto  { width: auto; }
.k-w-full  { width: 100%; }
.k-w-screen{ width: 100vw; }
.k-w-px    { width: 1px; }
.k-w-0     { width: 0; }
.k-w-1     { width: 0.25rem; }
.k-w-2     { width: 0.5rem; }
.k-w-3     { width: 0.75rem; }
.k-w-4     { width: 1rem; }
.k-w-5     { width: 1.25rem; }
.k-w-6     { width: 1.5rem; }
.k-w-8     { width: 2rem; }
.k-w-10    { width: 2.5rem; }
.k-w-12    { width: 3rem; }
.k-w-16    { width: 4rem; }
.k-w-20    { width: 5rem; }
.k-w-24    { width: 6rem; }
.k-w-32    { width: 8rem; }
.k-w-40    { width: 10rem; }
.k-w-48    { width: 12rem; }
.k-w-56    { width: 14rem; }
.k-w-64    { width: 16rem; }
.k-w-1\/2  { width: 50%; }
.k-w-1\/3  { width: 33.333333%; }
.k-w-2\/3  { width: 66.666667%; }
.k-w-1\/4  { width: 25%; }
.k-w-3\/4  { width: 75%; }


/* ============================================================
   10. SIZING — HEIGHT
   ============================================================ */
.k-h-auto   { height: auto; }
.k-h-full   { height: 100%; }
.k-h-screen { height: 100vh; }
.k-h-px     { height: 1px; }
.k-h-0      { height: 0; }
.k-h-1      { height: 0.25rem; }
.k-h-2      { height: 0.5rem; }
.k-h-3      { height: 0.75rem; }
.k-h-4      { height: 1rem; }
.k-h-5      { height: 1.25rem; }
.k-h-6      { height: 1.5rem; }
.k-h-8      { height: 2rem; }
.k-h-10     { height: 2.5rem; }
.k-h-12     { height: 3rem; }
.k-h-16     { height: 4rem; }
.k-h-20     { height: 5rem; }
.k-h-24     { height: 6rem; }
.k-h-32     { height: 8rem; }
.k-h-40     { height: 10rem; }
.k-h-48     { height: 12rem; }
.k-h-64     { height: 16rem; }


/* ============================================================
   11. MAX WIDTH / MIN WIDTH
   ============================================================ */
.k-max-w-none    { max-width: none; }
.k-max-w-xs      { max-width: 20rem; }
.k-max-w-sm      { max-width: 24rem; }
.k-max-w-md      { max-width: 28rem; }
.k-max-w-lg      { max-width: 32rem; }
.k-max-w-xl      { max-width: 36rem; }
.k-max-w-2xl     { max-width: 42rem; }
.k-max-w-3xl     { max-width: 48rem; }
.k-max-w-4xl     { max-width: 56rem; }
.k-max-w-5xl     { max-width: 64rem; }
.k-max-w-6xl     { max-width: 72rem; }
.k-max-w-7xl     { max-width: 80rem; }
.k-max-w-full    { max-width: 100%; }
/* Brand-specific */
.k-max-w-narrow  { max-width: 40rem; }
.k-max-w-content { max-width: 860px; }
.k-max-w-wide    { max-width: 1100px; }

.k-min-w-0       { min-width: 0; }
.k-min-w-full    { min-width: 100%; }
.k-min-h-screen  { min-height: 100vh; }


/* ============================================================
   12. TYPOGRAPHY — FONT FAMILY
   ============================================================ */
.k-font-heading { font-family: var(--k-font-heading); }
.k-font-body    { font-family: var(--k-font-body); }
.k-font-serif   { font-family: Georgia, "Times New Roman", serif; }
.k-font-sans    { font-family: system-ui, sans-serif; }
.k-font-mono    { font-family: "Courier New", monospace; }


/* ============================================================
   13. TYPOGRAPHY — FONT SIZE
   ============================================================ */
.k-text-xs    { font-size: 0.75rem;  line-height: 1rem; }
.k-text-sm    { font-size: 0.875rem; line-height: 1.25rem; }
.k-text-base  { font-size: 1rem;     line-height: 1.5rem; }
.k-text-lg    { font-size: 1.125rem; line-height: 1.75rem; }
.k-text-xl    { font-size: 1.25rem;  line-height: 1.75rem; }
.k-text-2xl   { font-size: 1.5rem;   line-height: 2rem; }
.k-text-3xl   { font-size: 1.875rem; line-height: 2.25rem; }
.k-text-4xl   { font-size: 2.25rem;  line-height: 2.5rem; }
.k-text-5xl   { font-size: 3rem;     line-height: 1; }
.k-text-6xl   { font-size: 3.75rem;  line-height: 1; }
.k-text-7xl   { font-size: 4.5rem;   line-height: 1; }


/* ============================================================
   14. TYPOGRAPHY — FONT WEIGHT
   ============================================================ */
.k-font-thin       { font-weight: 100; }
.k-font-extralight { font-weight: 200; }
.k-font-light      { font-weight: 300; }
.k-font-normal     { font-weight: 400; }
.k-font-medium     { font-weight: 500; }
.k-font-semibold   { font-weight: 600; }
.k-font-bold       { font-weight: 700; }
.k-font-extrabold  { font-weight: 800; }
.k-font-black      { font-weight: 900; }


/* ============================================================
   15. TYPOGRAPHY — LINE HEIGHT
   ============================================================ */
.k-leading-none     { line-height: 1; }
.k-leading-tight    { line-height: 1.25; }
.k-leading-snug     { line-height: 1.375; }
.k-leading-normal   { line-height: 1.5; }
.k-leading-relaxed  { line-height: 1.625; }
.k-leading-loose    { line-height: 2; }


/* ============================================================
   16. TYPOGRAPHY — LETTER SPACING
   ============================================================ */
.k-tracking-tighter { letter-spacing: -0.05em; }
.k-tracking-tight   { letter-spacing: -0.025em; }
.k-tracking-normal  { letter-spacing: 0; }
.k-tracking-wide    { letter-spacing: 0.025em; }
.k-tracking-wider   { letter-spacing: 0.05em; }
.k-tracking-widest  { letter-spacing: 0.1em; }
.k-tracking-widest2 { letter-spacing: 0.2em; }


/* ============================================================
   17. TYPOGRAPHY — TEXT ALIGN
   ============================================================ */
.k-text-left    { text-align: left; }
.k-text-center  { text-align: center; }
.k-text-right   { text-align: right; }
.k-text-justify { text-align: justify; }


/* ============================================================
   18. TYPOGRAPHY — TEXT TRANSFORM
   ============================================================ */
.k-uppercase    { text-transform: uppercase; }
.k-lowercase    { text-transform: lowercase; }
.k-capitalize   { text-transform: capitalize; }
.k-normal-case  { text-transform: none; }


/* ============================================================
   19. TYPOGRAPHY — TEXT DECORATION
   ============================================================ */
.k-underline     { text-decoration: underline; }
.k-line-through  { text-decoration: line-through; }
.k-no-underline  { text-decoration: none; }


/* ============================================================
   20. TYPOGRAPHY — FONT STYLE
   ============================================================ */
.k-italic       { font-style: italic; }
.k-not-italic   { font-style: normal; }


/* ============================================================
   21. COLORS — TEXT
   ============================================================ */
/* Brand */
.k-text-crimson      { color: var(--k-crimson); }
.k-text-crimson-dark { color: var(--k-crimson-dark); }
.k-text-gold         { color: var(--k-gold); }
.k-text-gold-light   { color: var(--k-gold-light); }
.k-text-ink          { color: var(--k-ink); }
.k-text-ink-light    { color: var(--k-ink-light); }
.k-text-off-white    { color: var(--k-off-white); }
/* Standard */
.k-text-white        { color: #ffffff; }
.k-text-black        { color: #000000; }
.k-text-gray-400     { color: var(--k-gray-400); }
.k-text-gray-500     { color: var(--k-gray-500); }
.k-text-gray-600     { color: var(--k-gray-600); }
.k-text-gray-700     { color: var(--k-gray-700); }
.k-text-gray-800     { color: var(--k-gray-800); }
.k-text-gray-900     { color: var(--k-gray-900); }


/* ============================================================
   22. COLORS — BACKGROUND
   ============================================================ */
/* Brand */
.k-bg-crimson      { background-color: var(--k-crimson); }
.k-bg-crimson-dark { background-color: var(--k-crimson-dark); }
.k-bg-gold         { background-color: var(--k-gold); }
.k-bg-gold-light   { background-color: var(--k-gold-light); }
.k-bg-off-white    { background-color: var(--k-off-white); }
.k-bg-ink          { background-color: var(--k-ink); }
/* Standard */
.k-bg-white        { background-color: #ffffff; }
.k-bg-black        { background-color: #000000; }
.k-bg-transparent  { background-color: transparent; }
.k-bg-gray-100     { background-color: var(--k-gray-100); }
.k-bg-gray-200     { background-color: var(--k-gray-200); }
.k-bg-gray-800     { background-color: var(--k-gray-800); }
.k-bg-gray-900     { background-color: var(--k-gray-900); }


/* ============================================================
   23. COLORS — BORDER
   ============================================================ */
.k-border-crimson      { border-color: var(--k-crimson); }
.k-border-gold         { border-color: var(--k-gold); }
.k-border-gold-light   { border-color: var(--k-gold-light); }
.k-border-ink          { border-color: var(--k-ink); }
.k-border-white        { border-color: #ffffff; }
.k-border-gray-200     { border-color: var(--k-gray-200); }
.k-border-gray-300     { border-color: var(--k-gray-300); }
.k-border-transparent  { border-color: transparent; }


/* ============================================================
   24. BORDERS
   ============================================================ */
.k-border        { border-width: 1px; border-style: solid; }
.k-border-0      { border-width: 0; }
.k-border-2      { border-width: 2px; border-style: solid; }
.k-border-4      { border-width: 4px; border-style: solid; }

.k-border-t      { border-top-width: 1px; border-top-style: solid; }
.k-border-t-0    { border-top-width: 0; }
.k-border-t-2    { border-top-width: 2px; border-top-style: solid; }
.k-border-t-4    { border-top-width: 4px; border-top-style: solid; }

.k-border-r      { border-right-width: 1px; border-right-style: solid; }
.k-border-r-0    { border-right-width: 0; }
.k-border-r-2    { border-right-width: 2px; border-right-style: solid; }

.k-border-b      { border-bottom-width: 1px; border-bottom-style: solid; }
.k-border-b-0    { border-bottom-width: 0; }
.k-border-b-2    { border-bottom-width: 2px; border-bottom-style: solid; }
.k-border-b-4    { border-bottom-width: 4px; border-bottom-style: solid; }

.k-border-l      { border-left-width: 1px; border-left-style: solid; }
.k-border-l-0    { border-left-width: 0; }
.k-border-l-2    { border-left-width: 2px; border-left-style: solid; }
.k-border-l-4    { border-left-width: 4px; border-left-style: solid; }


/* ============================================================
   25. BORDER RADIUS
   ============================================================ */
.k-rounded-none  { border-radius: 0; }
.k-rounded-sm    { border-radius: 0.125rem; }
.k-rounded       { border-radius: 0.25rem; }
.k-rounded-md    { border-radius: 0.375rem; }
.k-rounded-lg    { border-radius: 0.5rem; }
.k-rounded-xl    { border-radius: 0.75rem; }
.k-rounded-2xl   { border-radius: 1rem; }
.k-rounded-full  { border-radius: 9999px; }


/* ============================================================
   26. SHADOWS
   ============================================================ */
.k-shadow-none { box-shadow: none; }
.k-shadow-sm   { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.k-shadow      { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.k-shadow-md   { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.k-shadow-lg   { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.k-shadow-xl   { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }


/* ============================================================
   27. OPACITY
   ============================================================ */
.k-opacity-0    { opacity: 0; }
.k-opacity-10   { opacity: 0.1; }
.k-opacity-20   { opacity: 0.2; }
.k-opacity-25   { opacity: 0.25; }
.k-opacity-50   { opacity: 0.5; }
.k-opacity-75   { opacity: 0.75; }
.k-opacity-90   { opacity: 0.9; }
.k-opacity-100  { opacity: 1; }


/* ============================================================
   28. OVERFLOW
   ============================================================ */
.k-overflow-auto    { overflow: auto; }
.k-overflow-hidden  { overflow: hidden; }
.k-overflow-visible { overflow: visible; }
.k-overflow-scroll  { overflow: scroll; }
.k-overflow-x-auto  { overflow-x: auto; }
.k-overflow-y-auto  { overflow-y: auto; }
.k-overflow-x-hidden{ overflow-x: hidden; }


/* ============================================================
   29. CURSOR
   ============================================================ */
.k-cursor-auto     { cursor: auto; }
.k-cursor-default  { cursor: default; }
.k-cursor-pointer  { cursor: pointer; }
.k-cursor-wait     { cursor: wait; }
.k-cursor-not-allowed { cursor: not-allowed; }


/* ============================================================
   30. TRANSITIONS & TRANSFORMS
   ============================================================ */
.k-transition         { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.k-transition-colors  { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.k-transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.k-transition-transform{ transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }

.k-duration-75   { transition-duration: 75ms; }
.k-duration-100  { transition-duration: 100ms; }
.k-duration-150  { transition-duration: 150ms; }
.k-duration-200  { transition-duration: 200ms; }
.k-duration-300  { transition-duration: 300ms; }
.k-duration-500  { transition-duration: 500ms; }

.k-ease-linear   { transition-timing-function: linear; }
.k-ease-in       { transition-timing-function: cubic-bezier(0.4,0,1,1); }
.k-ease-out      { transition-timing-function: cubic-bezier(0,0,0.2,1); }
.k-ease-in-out   { transition-timing-function: cubic-bezier(0.4,0,0.2,1); }

.k-scale-95      { transform: scale(0.95); }
.k-scale-100     { transform: scale(1); }
.k-scale-105     { transform: scale(1.05); }
.k-scale-110     { transform: scale(1.1); }

.k-translate-x-0    { transform: translateX(0); }
.k-translate-y-0    { transform: translateY(0); }
.k-translate-y-1    { transform: translateY(0.25rem); }
.k-translate-y-2    { transform: translateY(0.5rem); }
.k-translate-y-4    { transform: translateY(1rem); }
.k-translate-y-full { transform: translateY(100%); }
.k-translate-x-full { transform: translateX(100%); }

/* Object fit */
.k-object-contain { object-fit: contain; }
.k-object-cover   { object-fit: cover; }
.k-object-fill    { object-fit: fill; }

/* Aspect ratio */
.k-aspect-square  { aspect-ratio: 1 / 1; }
.k-aspect-video   { aspect-ratio: 16 / 9; }


/* ============================================================
   31. RESPONSIVE BREAKPOINTS
   sm: 640px  |  md: 768px  |  lg: 1024px  |  xl: 1280px
   ============================================================ */
@media (min-width: 640px) {
  .sm\:k-hidden          { display: none; }
  .sm\:k-block           { display: block; }
  .sm\:k-flex            { display: flex; }
  .sm\:k-grid            { display: grid; }
  .sm\:k-inline-block    { display: inline-block; }

  .sm\:k-flex-row        { flex-direction: row; }
  .sm\:k-flex-col        { flex-direction: column; }

  .sm\:k-grid-cols-1     { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:k-grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:k-grid-cols-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .sm\:k-text-left       { text-align: left; }
  .sm\:k-text-center     { text-align: center; }

  .sm\:k-text-sm         { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:k-text-base       { font-size: 1rem;     line-height: 1.5rem; }
  .sm\:k-text-lg         { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:k-text-xl         { font-size: 1.25rem;  line-height: 1.75rem; }
  .sm\:k-text-2xl        { font-size: 1.5rem;   line-height: 2rem; }
  .sm\:k-text-3xl        { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:k-text-4xl        { font-size: 2.25rem;  line-height: 2.5rem; }
  .sm\:k-text-5xl        { font-size: 3rem;     line-height: 1; }

  .sm\:k-py-8            { padding-top: 2rem;   padding-bottom: 2rem; }
  .sm\:k-py-12           { padding-top: 3rem;   padding-bottom: 3rem; }
  .sm\:k-py-16           { padding-top: 4rem;   padding-bottom: 4rem; }
  .sm\:k-py-20           { padding-top: 5rem;   padding-bottom: 5rem; }
  .sm\:k-px-8            { padding-left: 2rem;  padding-right: 2rem; }
  .sm\:k-px-12           { padding-left: 3rem;  padding-right: 3rem; }

  .sm\:k-mt-0            { margin-top: 0; }
  .sm\:k-mb-0            { margin-bottom: 0; }

  .sm\:k-w-auto          { width: auto; }
  .sm\:k-w-full          { width: 100%; }
  .sm\:k-w-1\/2          { width: 50%; }

  .sm\:k-max-w-content   { max-width: 860px; }
  .sm\:k-max-w-wide      { max-width: 1100px; }

  .sm\:k-items-center    { align-items: center; }
  .sm\:k-justify-between { justify-content: space-between; }
  .sm\:k-gap-8           { gap: 2rem; }
  .sm\:k-gap-12          { gap: 3rem; }
}

@media (min-width: 768px) {
  .md\:k-hidden          { display: none; }
  .md\:k-block           { display: block; }
  .md\:k-flex            { display: flex; }
  .md\:k-grid            { display: grid; }
  .md\:k-inline-block    { display: inline-block; }

  .md\:k-flex-row        { flex-direction: row; }
  .md\:k-flex-col        { flex-direction: column; }

  .md\:k-grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:k-grid-cols-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:k-grid-cols-4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .md\:k-text-left       { text-align: left; }
  .md\:k-text-center     { text-align: center; }

  .md\:k-text-lg         { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:k-text-xl         { font-size: 1.25rem;  line-height: 1.75rem; }
  .md\:k-text-2xl        { font-size: 1.5rem;   line-height: 2rem; }
  .md\:k-text-3xl        { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:k-text-4xl        { font-size: 2.25rem;  line-height: 2.5rem; }
  .md\:k-text-5xl        { font-size: 3rem;     line-height: 1; }

  .md\:k-py-12           { padding-top: 3rem;   padding-bottom: 3rem; }
  .md\:k-py-16           { padding-top: 4rem;   padding-bottom: 4rem; }
  .md\:k-py-20           { padding-top: 5rem;   padding-bottom: 5rem; }
  .md\:k-px-12           { padding-left: 3rem;  padding-right: 3rem; }
  .md\:k-px-16           { padding-left: 4rem;  padding-right: 4rem; }

  .md\:k-items-center    { align-items: center; }
  .md\:k-justify-between { justify-content: space-between; }
  .md\:k-gap-8           { gap: 2rem; }
  .md\:k-gap-12          { gap: 3rem; }
  .md\:k-gap-16          { gap: 4rem; }

  .md\:k-w-1\/2          { width: 50%; }
  .md\:k-w-1\/3          { width: 33.333333%; }
  .md\:k-w-2\/3          { width: 66.666667%; }
}

@media (min-width: 1024px) {
  .lg\:k-hidden          { display: none; }
  .lg\:k-block           { display: block; }
  .lg\:k-flex            { display: flex; }
  .lg\:k-grid            { display: grid; }

  .lg\:k-flex-row        { flex-direction: row; }

  .lg\:k-grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:k-grid-cols-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:k-grid-cols-4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .lg\:k-text-5xl        { font-size: 3rem;    line-height: 1; }
  .lg\:k-text-6xl        { font-size: 3.75rem; line-height: 1; }

  .lg\:k-py-20           { padding-top: 5rem;  padding-bottom: 5rem; }
  .lg\:k-py-24           { padding-top: 6rem;  padding-bottom: 6rem; }
  .lg\:k-px-16           { padding-left: 4rem; padding-right: 4rem; }

  .lg\:k-gap-12          { gap: 3rem; }
  .lg\:k-gap-16          { gap: 4rem; }

  .lg\:k-w-1\/2          { width: 50%; }
  .lg\:k-w-1\/3          { width: 33.333333%; }
}


/* ============================================================
   32. HOVER UTILITIES
   ============================================================ */
.hover\:k-bg-crimson:hover      { background-color: var(--k-crimson); }
.hover\:k-bg-crimson-dark:hover { background-color: var(--k-crimson-dark); }
.hover\:k-bg-gold:hover         { background-color: var(--k-gold); }
.hover\:k-bg-gold-light:hover   { background-color: var(--k-gold-light); }
.hover\:k-bg-white:hover        { background-color: #ffffff; }
.hover\:k-bg-gray-100:hover     { background-color: var(--k-gray-100); }

.hover\:k-text-crimson:hover    { color: var(--k-crimson); }
.hover\:k-text-gold:hover       { color: var(--k-gold); }
.hover\:k-text-white:hover      { color: #ffffff; }
.hover\:k-text-ink:hover        { color: var(--k-ink); }

.hover\:k-border-crimson:hover  { border-color: var(--k-crimson); }
.hover\:k-border-gold:hover     { border-color: var(--k-gold); }

.hover\:k-shadow-md:hover       { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.hover\:k-shadow-lg:hover       { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

.hover\:k-opacity-80:hover      { opacity: 0.8; }
.hover\:k-opacity-100:hover     { opacity: 1; }

.hover\:k-scale-105:hover       { transform: scale(1.05); }
.hover\:k-underline:hover       { text-decoration: underline; }
.hover\:k-no-underline:hover    { text-decoration: none; }


/* ============================================================
   33. KESSLERS COMPONENT CLASSES
   ============================================================ */

/*
  .k-eyebrow — Small gold uppercase label above a heading
  Usage: <p class="k-eyebrow">Why Kesslers</p>
*/
.template-page .k-eyebrow {
  display: block;
  font-family: var(--k-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--k-gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}

/*
  .k-rule — Centered decorative gold rule
  Usage: <span class="k-rule"></span>
*/
.k-rule {
  display: block;
  width: 4rem;
  height: 1px;
  background-color: var(--k-gold);
  margin: 1.5rem auto;
}

/*
  .k-rule-left — Left-aligned gold rule
  Usage: <span class="k-rule-left"></span>
*/
.k-rule-left {
  display: block;
  width: 4rem;
  height: 1px;
  background-color: var(--k-gold);
  margin: 1rem 0;
}

/*
  .k-btn-primary — Solid crimson CTA button
  Usage: <a href="#" class="k-btn-primary">Shop Now</a>
*/
.k-btn-primary {
  display: inline-block;
  font-family: var(--k-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background-color: var(--k-crimson);
  padding: 0.75rem 2rem;
  border: 2px solid var(--k-crimson);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.k-btn-primary:hover {
  background-color: var(--k-crimson-dark);
  border-color: var(--k-crimson-dark);
  color: #ffffff;
}

/*
  .k-btn-outline — Gold outlined secondary button
  Usage: <a href="#" class="k-btn-outline">Learn More</a>
*/
.k-btn-outline {
  display: inline-block;
  font-family: var(--k-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-gold);
  background-color: transparent;
  padding: 0.75rem 2rem;
  border: 2px solid var(--k-gold);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.k-btn-outline:hover {
  background-color: var(--k-gold);
  color: #ffffff;
}

/*
  .k-btn-ghost — Minimal underline text link button
  Usage: <a href="#" class="k-btn-ghost">View Details</a>
*/
.k-btn-ghost {
  display: inline-block;
  font-family: var(--k-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-crimson);
  border-bottom: 1px solid rgba(138, 21, 56, 0.4);
  text-decoration: none;
  transition: border-color 0.2s ease;
  cursor: pointer;
}
.k-btn-ghost:hover {
  border-color: var(--k-crimson);
}

/*
  .k-section — Standard section padding
*/
.k-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/*
  .k-section-narrow — Narrower section padding
*/
.k-section-narrow {
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/*
  .k-container — Standard centered content wrapper (860px)
*/
.k-container {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/*
  .k-container-wide — Wider content wrapper (1100px)
*/
.k-container-wide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/*
  .k-page-title — Main H1 heading style
*/
.k-page-title {
  font-family: var(--k-font-heading);
  font-size: 2.25rem;
  line-height: 1.25;
  color: var(--k-ink);
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .k-page-title { font-size: 3rem; }
}

/*
  .k-section-title — H2 section heading style
*/
.k-section-title {
  font-family: var(--k-font-heading);
  font-size: 1.875rem;
  line-height: 1.375;
  color: var(--k-ink);
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .k-section-title { font-size: 2.25rem; }
}

/*
  .k-section-title-crimson — Section heading in crimson italic
*/
.k-section-title-crimson {
  font-family: var(--k-font-heading);
  font-size: 1.875rem;
  line-height: 1.375;
  color: var(--k-crimson);
  font-style: italic;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .k-section-title-crimson { font-size: 2.25rem; }
}

/*
  .k-body-lead — Large intro paragraph
*/
.k-body-lead {
  font-family: var(--k-font-body);
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--k-ink-light);
  line-height: 1.625;
}

/*
  .k-body-text — Standard body paragraph
*/
.k-body-text {
  font-family: var(--k-font-body);
  font-size: 1rem;
  color: var(--k-gray-700);
  line-height: 1.625;
}

/*
  .k-label — Small metadata tag
*/
.k-label {
  font-family: var(--k-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--k-gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/*
  .k-card — Clean white card
*/
.k-card {
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
  padding: 2rem;
}

/*
  .k-card-bordered — Card with gold left border
*/
.k-card-bordered {
  background-color: #ffffff;
  border-left: 4px solid var(--k-gold);
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06);
}

/*
  .k-divider — Gold-tinted horizontal rule
*/
.k-divider {
  border: 0;
  border-top: 1px solid rgba(184, 154, 94, 0.3);
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/*
  .k-hero-banner — Full-width crimson header band
*/
.k-hero-banner {
  background-color: var(--k-crimson);
  color: #ffffff;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center;
}

/*
  .k-highlight — Inline crimson bold for stats / key phrases
  Usage: raised <strong class="k-highlight">$250,000</strong> last year
*/
.k-highlight {
  color: var(--k-crimson);
  font-weight: 600;
}

/******************************************************************************
Custom classes for landing pages built with the tailwind css
*******************************************************************/
/* Charity card: stacked on mobile, two-column on sm+ */
.charity-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(184, 154, 94, 0.2);
}
.charity-card:last-child {
    border-bottom: none;
}
.charity-card-text {
    text-align: center;
}
@media (min-width: 640px) {
    .charity-card {
    grid-template-columns: 221px 1fr;
    }
    .charity-card-text {
    text-align: left;
    }
}
/* testimonial card */
.k-testimonial-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.k-testimonial-card img {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .k-testimonial-card {
    grid-template-columns: 220px 1fr;
    }
    .k-testimonial-card img {
    margin: 0;
    }
}