/*
 * Kindly platform surfaces only.
 *
 * Crafto owns storefront geometry, typography, responsive behavior, and
 * animation. Adapter-declared editable-text contracts may constrain the
 * wrappers Crafto creates so tenant copy keeps its reviewed composition, and
 * certified alternate variants may own geometry inside their explicitly
 * selected section boundary. The header-shell rules below mirror Crafto's own
 * measured disable-fixed header values until main.js writes the same values
 * inline. Remaining selectors are limited to platform-owned UI.
 */

/*
 * Jost is the Crafto jewellery recipe's source typeface. Keep the reviewed
 * Latin and Latin Extended subsets inside the immutable runtime so a blocked
 * Google Fonts request cannot silently substitute a different metric profile.
 * License, upstream provenance, and byte hashes live in licenses/jost/.
 */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/jost-latin-ext-300-700.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/jost-latin-300-700.woff2") format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Crafto defers getHeaderHeight()/setTopSpaceHeight() until after load plus
 * headerTransition. Seed the source shell with the same 40px top bar and 90px
 * navigation geometry so the first section is stable before that hand-off.
 */
header[data-kindly-crafto-header-shell="jewellery-disable-fixed-v1"] >
    .header-top-bar + .navbar.disable-fixed {
    top: 40px;
}

header[data-kindly-crafto-header-shell="jewellery-disable-fixed-v1"] +
    main.top-space-margin {
    margin-top: 130px;
}

/*
 * The source eyebrow animation splits each line into word and character spans.
 * Keep each generated word wrapper indivisible: explicit <br> elements own the
 * line breaks, while the pre-init typography profile keeps each reviewed word
 * inside the source 100%-wide layer at every breakpoint.
 */
[data-kindly-text-layout="word-per-line"] .tp-linesplit {
    display: block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

[data-kindly-text-layout="word-per-line"] .tp-wordsplit {
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/*
 * Crafto's >1921px source rule forces every title to 200px. Preserve that
 * rule untouched for source-sized copy, but let a pre-init certified profile
 * own long editable copy in very-wide Studio/device frames. The variables are
 * emitted with the HTML profile; this remains deterministic and performs no
 * post-layout measurement.
 */
@media (min-width: 1921px) {
    [data-kindly-text-layout="word-per-line"][data-kindly-typography-profile]:not(
            [data-kindly-typography-profile="crafto-source-word-v1"]
        ) {
        font-size: var(--kindly-crafto-hero-wide-font-size) !important;
        line-height: var(--kindly-crafto-hero-wide-line-height) !important;
    }
}

.kindly-order-invitation-icon {
    font-size: 48px;
}

.shop-modern [data-kindly-action="toggle-wishlist"].is-selected {
    background: var(--base-color) !important;
}

.kindly-order-dialog {
    width: min(1040px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--dark-gray);
    background: #fff;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .28);
}

.kindly-order-dialog::backdrop {
    background: rgba(18, 14, 12, .66);
    backdrop-filter: blur(4px);
}

.kindly-order-dialog__panel {
    position: relative;
    padding: 52px;
}

.kindly-order-dialog__close {
    position: absolute;
    top: 14px;
    right: 20px;
    border: 0;
    background: transparent;
    font-size: 32px;
}

.kindly-order-dialog__layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 35px;
    margin-top: 30px;
}

.kindly-order-dialog__items {
    max-height: 330px;
    overflow: auto;
}

.kindly-order-dialog__summary {
    margin-top: 18px;
    padding: 16px;
    white-space: pre-wrap;
    border-radius: 4px;
    background: var(--seashell-white);
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
}

.kindly-order-dialog__form {
    display: grid;
    gap: 12px;
}

.kindly-order-dialog__form label {
    display: grid;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
}

.kindly-order-dialog__form input,
.kindly-order-dialog__form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(35, 35, 35, .2);
    border-radius: 4px;
}

.kindly-order-dialog__help,
.kindly-order-dialog__status {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.kindly-order-dialog__help {
    color: rgba(35, 35, 35, .68);
}

.kindly-order-dialog__status {
    min-height: 20px;
    color: var(--dark-gray);
    font-weight: 500;
}

.kindly-order-dialog[data-kindly-submit-state="succeeded"] .kindly-order-dialog__status {
    color: #246b45;
}

.kindly-order-dialog[data-kindly-submit-state="failed"] .kindly-order-dialog__status {
    color: #a33131;
}

.kindly-order-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.kindly-order-dialog__form .kindly-order-dialog__actions {
    margin-top: 8px;
}

.kindly-order-dialog__actions .btn:disabled {
    cursor: not-allowed;
    opacity: .45;
    pointer-events: none;
}

.kindly-preview #cookies-model {
    display: none !important;
}

/* A hidden certified boundary retains no geometry. Its Categories successor
   owns a small responsive breathing space instead of either a source-sized
   blank block or a zero-space join against the hero. */
[data-kindly-studio-section="benefits"][hidden] {
    display: none !important;
}

[data-kindly-section-id="home-categories"][data-kindly-section-adjacency-collapse="home-benefits-hidden"] {
    padding-top: clamp(36px, 4vw, 64px) !important;
}

/* The generated homepage category card is one semantic link. Crafto's
   pointer-hover composition remains intact, while keyboard users receive the
   same reveal and a visible focus indicator. */
.kindly-home-category-link {
    color: inherit;
    text-decoration: none;
}

.kindly-home-category-link:hover {
    color: inherit;
}

.kindly-home-category-link .kindly-home-category-cta {
    opacity: 0;
    transition: .2s;
    transform: translateY(30px);
}

.kindly-home-category-link:hover .kindly-home-category-cta,
.kindly-home-category-link:focus-visible .kindly-home-category-cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .2s;
}

.kindly-home-category-link:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--dark-gray, #232323);
    outline-offset: 4px;
}

.kindly-home-category-link:focus-visible .category-box img {
    opacity: .6;
    transform: scale(1.1);
}

.kindly-home-category-link:focus-visible .category-hover-content {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.kindly-home-category-link:focus-visible .category-hover-content .title {
    opacity: 1;
    transform: scale(1);
}

/* Touchscreens must not need a synthetic hover tap before their intended
   action. Keep desktop hover untouched, make homepage product actions present
   from the start, and remove purely decorative hover overlays on linked
   category/gallery images. */
@media (hover: none), (pointer: coarse) {
    main[data-kindly-page="home"] .kindly-home-category-link {
        touch-action: manipulation;
    }

    main[data-kindly-page="home"]
        .kindly-home-category-link
        .category-hover-content {
        display: none !important;
    }

    main[data-kindly-page="home"]
        .kindly-home-category-link
        .category-box:hover
        img {
        opacity: 1;
        transform: none;
    }

    main[data-kindly-page="home"]
        .shop-modern
        .grid-item
        .shop-box:hover
        .shop-image
        img {
        transform: none;
    }

    main[data-kindly-page="home"]
        .shop-modern
        .grid-item
        .shop-box
        .shop-image
        .shop-buttons-wrap
        .btn {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    main[data-kindly-page="home"]
        .shop-modern
        .grid-item
        .shop-box
        .shop-image
        .shop-hover {
        top: 20px;
        opacity: 1;
    }

    main[data-kindly-page="home"]
        .shop-modern
        .grid-item
        .shop-box
        .shop-image
        .shop-hover
        ul
        li {
        transform: none;
    }

    main[data-kindly-page="home"] .instafeed-grid .insta-icon {
        display: none !important;
    }
}

@media (max-width: 991px) {
    header[data-kindly-crafto-header-shell="jewellery-disable-fixed-v1"] >
        .header-top-bar + .navbar.disable-fixed {
        top: 41px;
    }

    header[data-kindly-crafto-header-shell="jewellery-disable-fixed-v1"] +
        main.top-space-margin {
        margin-top: 131px;
    }

    .kindly-order-dialog__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    header[data-kindly-crafto-header-shell="jewellery-disable-fixed-v1"] >
        .header-top-bar + .navbar.disable-fixed {
        top: 0;
    }

    header[data-kindly-crafto-header-shell="jewellery-disable-fixed-v1"] +
        main.top-space-margin {
        margin-top: 90px;
    }
}

/* Certified phone presentations for the Crafto benefits boundary. The
   original variant continues to use Crafto's source one-column layout. */
@media (max-width: 767.98px) {
    [data-kindly-studio-section="benefits"][data-kindly-section-variant="compact-icon-tabs"],
    [data-kindly-studio-section="benefits"][data-kindly-section-variant="compact-grid"] {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .kindly-benefits-tabs,
    .kindly-benefits-grid,
    .kindly-benefits-tabs *,
    .kindly-benefits-grid * {
        min-width: 0;
    }

    .kindly-benefits-tabs__list {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        margin: 0 0 10px;
        overflow: visible;
    }

    [data-kindly-studio-generated-benefits="tabs"]
        .kindly-benefits-tabs__list {
        row-gap: 10px;
        margin-bottom: 0;
    }

    [data-kindly-studio-generated-benefits="tabs"]
        .kindly-benefits-tabs__choice {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        opacity: 0;
    }

    .kindly-benefits-tabs__tab.nav-link {
        display: flex;
        min-height: 66px;
        margin: 0;
        padding: 8px 2px 7px;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        overflow: hidden;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--dark-gray, #232323);
        font-family: var(--alt-font, sans-serif);
        font-size: clamp(9.5px, 2.8vw, 12px);
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        text-transform: none;
        touch-action: manipulation;
    }

    .kindly-benefits-tabs__tab.nav-link i {
        flex: 0 0 auto;
        font-size: 25px;
        line-height: 1;
    }

    .kindly-benefits-tabs__tab.nav-link span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kindly-benefits-tabs__tab.nav-link:hover,
    .kindly-benefits-tabs__tab.nav-link.active,
    [data-kindly-studio-generated-benefits="tabs"]
        .kindly-benefits-tabs__choice:checked + .kindly-benefits-tabs__tab {
        border-color: rgba(35, 35, 35, .14);
        background: var(--base-color, #f8dccf);
        color: var(--dark-gray, #232323);
    }

    .kindly-benefits-tabs__tab.nav-link:focus-visible,
    .kindly-benefits-tabs__panel:focus-visible,
    [data-kindly-studio-generated-benefits="tabs"]
        .kindly-benefits-tabs__choice:focus-visible + .kindly-benefits-tabs__tab {
        position: relative;
        z-index: 1;
        outline: 3px solid var(--dark-gray, #232323);
        outline-offset: 2px;
    }

    .kindly-benefits-tabs__content {
        width: 100%;
        overflow: visible;
    }

    .kindly-benefits-tabs__panel {
        min-height: 108px;
        padding: 16px 18px;
        overflow-wrap: anywhere;
        border-radius: 8px;
        background: var(--seashell-white, #f7f2ef);
    }

    .kindly-benefits-tabs__panel:not(.active) {
        display: none;
    }

    [data-kindly-studio-generated-benefits="tabs"]
        .kindly-benefits-tabs__choice:checked +
        .kindly-benefits-tabs__tab +
        .kindly-benefits-tabs__panel {
        display: block;
    }

    .kindly-benefits-tabs__heading {
        display: block;
        margin-bottom: 3px;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.25;
    }

    .kindly-benefits-tabs__panel p {
        margin: 0;
        font-size: 14px;
        line-height: 1.45;
    }

    .kindly-benefits-grid {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .kindly-benefits-grid__item {
        display: grid;
        padding: 12px 10px;
        grid-template-columns: 28px minmax(0, 1fr);
        align-items: start;
        gap: 8px;
        overflow-wrap: anywhere;
        border-radius: 8px;
        background: var(--seashell-white, #f7f2ef);
    }

    .kindly-benefits-grid__item > i {
        margin-top: 1px;
        color: var(--dark-gray, #232323);
        font-size: 25px;
        line-height: 1;
    }

    .kindly-benefits-grid__heading {
        display: block;
        margin-bottom: 2px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
    }

    .kindly-benefits-grid__item p {
        margin: 0;
        font-size: 12px;
        line-height: 1.35;
    }
}

@media (max-width: 575px) {
    .kindly-order-dialog__panel {
        padding: 34px 20px 24px;
    }

    .kindly-order-dialog__actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kindly-benefits-tabs__tab,
    .kindly-benefits-tabs__panel {
        transition: none !important;
    }
}