/**
 * =========================================================
 * KRULUXE JEWELRY CARE PAGE
 * Premium Luxury + Fully Responsive Styling
 *
 * File:
 * /wp-content/themes/kruluxe-child/assets/css/jewelry-care.css
 *
 * Page:
 * /jewelry-care/
 * =========================================================
 */


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    --kr-jcare-black: #0b0b0b;
    --kr-jcare-charcoal: #171717;
    --kr-jcare-charcoal-2: #222222;

    --kr-jcare-white: #ffffff;

    --kr-jcare-ivory: #faf8f3;
    --kr-jcare-ivory-2: #f5f1e8;
    --kr-jcare-ivory-3: #eee7da;
    --kr-jcare-ivory-4: #e7dfd0;

    --kr-jcare-gold: #b88d3b;
    --kr-jcare-gold-light: #d6b36e;
    --kr-jcare-gold-dark: #97702a;

    --kr-jcare-gold-soft:
        rgba(184, 141, 59, 0.10);

    --kr-jcare-green: #536847;
    --kr-jcare-green-dark: #3f5138;

    --kr-jcare-text: #171717;
    --kr-jcare-muted: #676767;
    --kr-jcare-muted-2: #898989;

    --kr-jcare-border: #e4ded2;

    --kr-jcare-success: #4c7251;
    --kr-jcare-warning: #9a6f31;
    --kr-jcare-danger: #8b4b43;

    --kr-jcare-radius: 18px;
    --kr-jcare-radius-large: 28px;
    --kr-jcare-radius-xl: 36px;

    --kr-jcare-max: 1440px;

    --kr-jcare-shadow:
        0 20px 60px rgba(0, 0, 0, 0.07);

    --kr-jcare-shadow-small:
        0 10px 30px rgba(0, 0, 0, 0.055);

    --kr-jcare-transition:
        0.28s ease;
}


/* =========================================================
   02. BASE / RESET
========================================================= */

.kr-jcare-main,
.kr-jcare-main *,
.kr-jcare-main *::before,
.kr-jcare-main *::after {
    box-sizing: border-box;
}

.kr-jcare-main {
    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background:
        var(--kr-jcare-white);

    color:
        var(--kr-jcare-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}

.kr-jcare-main img {
    display: block;

    max-width: 100%;

    height: auto;
}

.kr-jcare-main a {
    color: inherit;

    text-decoration: none;
}

.kr-jcare-main h1,
.kr-jcare-main h2,
.kr-jcare-main h3,
.kr-jcare-main h4,
.kr-jcare-main p,
.kr-jcare-main ul,
.kr-jcare-main ol {
    margin-top: 0;
}

.kr-jcare-main p {
    color:
        var(--kr-jcare-muted);

    line-height: 1.78;
}

.kr-jcare-main ul,
.kr-jcare-main ol {
    padding-left: 22px;
}

.kr-jcare-main li {
    margin-bottom: 10px;

    color:
        var(--kr-jcare-muted);

    line-height: 1.7;
}

.kr-jcare-main h1,
.kr-jcare-main h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;

    letter-spacing:
        -0.025em;

    color:
        var(--kr-jcare-text);
}

.kr-jcare-main h3,
.kr-jcare-main h4 {
    color:
        var(--kr-jcare-text);
}


/* =========================================================
   03. CONTAINER
========================================================= */

.kr-jcare-container {
    width:
        min(
            calc(100% - 64px),
            var(--kr-jcare-max)
        );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   04. EYEBROW / LABEL
========================================================= */

.kr-jcare-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color:
        var(--kr-jcare-gold);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


/* =========================================================
   05. BUTTONS
========================================================= */

.kr-jcare-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 14px;

    margin-top: 32px;
}

.kr-jcare-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding:
        14px 27px;

    border:
        1px solid transparent;

    border-radius:
        2px;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.2;

    cursor: pointer;

    transition:
        color var(--kr-jcare-transition),
        background var(--kr-jcare-transition),
        border-color var(--kr-jcare-transition),
        box-shadow var(--kr-jcare-transition),
        transform var(--kr-jcare-transition);
}

.kr-jcare-btn:hover {
    transform:
        translateY(-2px);
}

.kr-jcare-btn-primary {
    color:
        var(--kr-jcare-white) !important;

    background:
        var(--kr-jcare-black);

    border-color:
        var(--kr-jcare-black);
}

.kr-jcare-btn-primary:hover {
    background:
        var(--kr-jcare-gold);

    border-color:
        var(--kr-jcare-gold);

    box-shadow:
        0 12px 30px
        rgba(184, 141, 59, 0.22);
}

.kr-jcare-btn-secondary {
    color:
        var(--kr-jcare-black) !important;

    background:
        transparent;

    border-color:
        #cfc7bb;
}

.kr-jcare-btn-secondary:hover {
    color:
        var(--kr-jcare-gold-dark) !important;

    border-color:
        var(--kr-jcare-gold);
}


/* =========================================================
   06. HERO
========================================================= */

.kr-jcare-hero {
    position: relative;

    padding:
        clamp(90px, 10vw, 155px)
        0
        clamp(85px, 9vw, 145px);

    background:
        radial-gradient(
            circle at 84% 20%,
            rgba(184, 141, 59, 0.11),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #faf8f3 0%,
            #ffffff 58%,
            #f4efe4 100%
        );

    border-bottom:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-hero::before {
    content: "";

    position: absolute;

    width: 470px;
    height: 470px;

    right: -170px;
    bottom: -260px;

    border-radius: 50%;

    background:
        rgba(184, 141, 59, 0.055);

    pointer-events: none;
}

.kr-jcare-hero::after {
    content: "";

    position: absolute;

    width: 1px;
    height: 110px;

    left: 7.5%;
    bottom: -55px;

    background:
        var(--kr-jcare-gold);

    opacity: 0.5;
}

.kr-jcare-hero-inner {
    position: relative;

    z-index: 2;

    max-width: 950px;
}

.kr-jcare-hero h1 {
    max-width: 900px;

    margin-bottom: 28px;

    font-size:
        clamp(
            50px,
            6vw,
            88px
        );

    line-height:
        0.98;
}

.kr-jcare-hero p {
    max-width: 730px;

    margin-bottom: 0;

    font-size:
        clamp(
            17px,
            1.55vw,
            21px
        );

    line-height:
        1.8;
}


/* =========================================================
   07. INTRODUCTION
========================================================= */

.kr-jcare-intro {
    padding:
        clamp(85px, 9vw, 140px)
        0;
}

.kr-jcare-intro-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap:
        clamp(
            50px,
            8vw,
            120px
        );

    align-items: start;
}

.kr-jcare-intro-title h2 {
    max-width: 560px;

    margin-bottom: 0;

    font-size:
        clamp(
            40px,
            4.5vw,
            68px
        );

    line-height:
        1.05;
}

.kr-jcare-intro-content p {
    max-width: 730px;

    font-size: 17px;
}

.kr-jcare-intro-content p + p {
    margin-top: 22px;
}


/* =========================================================
   08. CARE OVERVIEW / QUICK RULES
========================================================= */

.kr-jcare-overview {
    padding:
        0
        0
        clamp(85px, 9vw, 130px);
}

.kr-jcare-overview-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid var(--kr-jcare-border);

    border-bottom:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-overview-item {
    min-height: 215px;

    padding:
        38px
        30px;

    border-right:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-overview-item:last-child {
    border-right: 0;
}

.kr-jcare-overview-number {
    display: block;

    margin-bottom: 38px;

    color:
        var(--kr-jcare-gold);

    font-size: 11px;
    font-weight: 700;

    letter-spacing:
        0.14em;
}

.kr-jcare-overview-item h3 {
    margin-bottom: 12px;

    color:
        var(--kr-jcare-green);

    font-size:
        clamp(
            22px,
            1.8vw,
            29px
        );

    font-weight: 400;
}

.kr-jcare-overview-item p {
    margin-bottom: 0;

    font-size: 14px;
}


/* =========================================================
   09. SECTION HEADING
========================================================= */

.kr-jcare-section-heading {
    max-width: 840px;

    margin-bottom:
        clamp(
            48px,
            6vw,
            80px
        );
}

.kr-jcare-section-heading h2 {
    margin-bottom: 20px;

    font-size:
        clamp(
            42px,
            5vw,
            72px
        );

    line-height:
        1.02;
}

.kr-jcare-section-heading p {
    max-width: 700px;

    margin-bottom: 0;

    font-size: 17px;
}


/* =========================================================
   10. EVERYDAY CARE
========================================================= */

.kr-jcare-everyday {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        var(--kr-jcare-ivory);
}

.kr-jcare-everyday-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}

.kr-jcare-card {
    position: relative;

    min-height: 310px;

    padding:
        38px;

    border:
        1px solid var(--kr-jcare-border);

    border-radius:
        var(--kr-jcare-radius);

    background:
        var(--kr-jcare-white);

    transition:
        transform var(--kr-jcare-transition),
        box-shadow var(--kr-jcare-transition),
        border-color var(--kr-jcare-transition);
}

.kr-jcare-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(184, 141, 59, 0.42);

    box-shadow:
        var(--kr-jcare-shadow-small);
}

.kr-jcare-card-number {
    display: block;

    margin-bottom: 54px;

    color:
        var(--kr-jcare-gold);

    font-size: 11px;
    font-weight: 700;

    letter-spacing:
        0.14em;
}

.kr-jcare-card h3 {
    margin-bottom: 14px;

    color:
        var(--kr-jcare-green);

    font-size:
        clamp(
            24px,
            2vw,
            31px
        );

    font-weight: 400;
}

.kr-jcare-card p {
    margin-bottom: 0;

    font-size: 15px;
}


/* =========================================================
   11. DO / AVOID SECTION
========================================================= */

.kr-jcare-dos-donts {
    padding:
        clamp(90px, 10vw, 150px)
        0;
}

.kr-jcare-dos-donts-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}

.kr-jcare-do-card,
.kr-jcare-dont-card {
    min-height: 520px;

    padding:
        clamp(
            36px,
            4vw,
            60px
        );

    border:
        1px solid var(--kr-jcare-border);

    border-radius:
        var(--kr-jcare-radius-large);
}

.kr-jcare-do-card {
    background:
        linear-gradient(
            145deg,
            #f8fbf7,
            #ffffff
        );
}

.kr-jcare-dont-card {
    background:
        linear-gradient(
            145deg,
            #fbf8f6,
            #ffffff
        );
}

.kr-jcare-do-card h2,
.kr-jcare-dont-card h2 {
    margin-bottom: 34px;

    font-size:
        clamp(
            36px,
            3.5vw,
            54px
        );

    line-height: 1.05;
}

.kr-jcare-check-list,
.kr-jcare-avoid-list {
    list-style: none;

    margin:
        0;

    padding:
        0;
}

.kr-jcare-check-list li,
.kr-jcare-avoid-list li {
    position: relative;

    margin:
        0;

    padding:
        20px
        0
        20px
        42px;

    border-bottom:
        1px solid var(--kr-jcare-border);

    color:
        var(--kr-jcare-muted);

    line-height:
        1.65;
}

.kr-jcare-check-list li:last-child,
.kr-jcare-avoid-list li:last-child {
    border-bottom: 0;
}

.kr-jcare-check-list li::before,
.kr-jcare-avoid-list li::before {
    position: absolute;

    left: 0;
    top: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    font-size: 12px;
    font-weight: 700;
}

.kr-jcare-check-list li::before {
    content: "✓";

    color:
        var(--kr-jcare-success);

    border:
        1px solid
        rgba(76, 114, 81, 0.35);
}

.kr-jcare-avoid-list li::before {
    content: "×";

    color:
        var(--kr-jcare-danger);

    border:
        1px solid
        rgba(139, 75, 67, 0.35);
}


/* =========================================================
   12. DIAMOND CARE
========================================================= */

.kr-jcare-diamond {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        linear-gradient(
            180deg,
            var(--kr-jcare-ivory) 0%,
            #ffffff 100%
        );
}

.kr-jcare-diamond-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(
            50px,
            8vw,
            120px
        );

    align-items: start;
}

.kr-jcare-diamond-title {
    position: sticky;

    top: 135px;
}

.kr-jcare-diamond-title h2 {
    max-width: 560px;

    margin-bottom: 22px;

    font-size:
        clamp(
            44px,
            5vw,
            72px
        );

    line-height:
        1;
}

.kr-jcare-diamond-title p {
    max-width: 540px;

    font-size: 16px;
}

.kr-jcare-diamond-list {
    border-top:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-diamond-item {
    display: grid;

    grid-template-columns:
        64px
        minmax(0, 1fr);

    gap: 20px;

    padding:
        34px
        0;

    border-bottom:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-diamond-item > span {
    padding-top: 5px;

    color:
        var(--kr-jcare-gold);

    font-size: 11px;
    font-weight: 700;

    letter-spacing:
        0.12em;
}

.kr-jcare-diamond-item h3 {
    margin-bottom: 10px;

    color:
        var(--kr-jcare-green);

    font-size:
        clamp(
            22px,
            2vw,
            29px
        );

    font-weight: 400;
}

.kr-jcare-diamond-item p {
    margin-bottom: 0;
}


/* =========================================================
   13. METAL CARE
========================================================= */

.kr-jcare-metals {
    padding:
        clamp(90px, 9vw, 145px)
        0;
}

.kr-jcare-metals-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}

.kr-jcare-metal-card {
    min-height: 330px;

    padding:
        38px;

    border:
        1px solid var(--kr-jcare-border);

    border-radius:
        var(--kr-jcare-radius);

    background:
        var(--kr-jcare-white);

    transition:
        transform var(--kr-jcare-transition),
        box-shadow var(--kr-jcare-transition),
        border-color var(--kr-jcare-transition);
}

.kr-jcare-metal-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(184, 141, 59, 0.45);

    box-shadow:
        var(--kr-jcare-shadow-small);
}

.kr-jcare-metal-card h3 {
    margin-bottom: 16px;

    color:
        var(--kr-jcare-green);

    font-size:
        clamp(
            25px,
            2vw,
            32px
        );

    font-weight: 400;
}

.kr-jcare-metal-card p {
    margin-bottom: 18px;
}

.kr-jcare-metal-card ul {
    margin-bottom: 0;
}


/* =========================================================
   14. STORAGE
========================================================= */

.kr-jcare-storage {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        var(--kr-jcare-charcoal);

    color:
        var(--kr-jcare-white);
}

.kr-jcare-storage .kr-jcare-eyebrow {
    color:
        var(--kr-jcare-gold-light);
}

.kr-jcare-storage h2 {
    color:
        var(--kr-jcare-white);
}

.kr-jcare-storage-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(
            50px,
            8vw,
            120px
        );

    align-items: center;
}

.kr-jcare-storage-copy h2 {
    max-width: 580px;

    margin-bottom: 26px;

    font-size:
        clamp(
            45px,
            5vw,
            74px
        );

    line-height: 1;
}

.kr-jcare-storage-copy p {
    max-width: 590px;

    color:
        rgba(255, 255, 255, 0.67);

    font-size: 17px;
}

.kr-jcare-storage-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-left:
        1px solid
        rgba(255, 255, 255, 0.14);
}

.kr-jcare-storage-item {
    min-height: 190px;

    padding:
        30px;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.14);
}

.kr-jcare-storage-item strong {
    display: block;

    margin-bottom: 10px;

    color:
        var(--kr-jcare-white);

    font-size: 18px;
}

.kr-jcare-storage-item span {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   15. CLEANING GUIDE
========================================================= */

.kr-jcare-cleaning {
    padding:
        clamp(90px, 10vw, 150px)
        0;
}

.kr-jcare-cleaning-steps {
    border-top:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-cleaning-step {
    display: grid;

    grid-template-columns:
        90px
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    gap:
        30px;

    align-items: start;

    padding:
        34px
        0;

    border-bottom:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-cleaning-step > span {
    padding-top: 4px;

    color:
        var(--kr-jcare-gold);

    font-size: 11px;
    font-weight: 700;

    letter-spacing:
        0.12em;
}

.kr-jcare-cleaning-step h3 {
    margin-bottom: 0;

    color:
        var(--kr-jcare-green);

    font-size:
        clamp(
            22px,
            2vw,
            30px
        );

    font-weight: 400;
}

.kr-jcare-cleaning-step p {
    margin-bottom: 0;
}


/* =========================================================
   16. PROFESSIONAL CARE / SERVICE
========================================================= */

.kr-jcare-professional {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        linear-gradient(
            135deg,
            var(--kr-jcare-ivory-2),
            #ffffff
        );
}

.kr-jcare-professional-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 50px;

    align-items: center;
}

.kr-jcare-professional h2 {
    max-width: 780px;

    margin-bottom: 18px;

    font-size:
        clamp(
            42px,
            4.8vw,
            70px
        );

    line-height: 1.02;
}

.kr-jcare-professional p {
    max-width: 650px;

    margin-bottom: 0;

    font-size: 16px;
}

.kr-jcare-professional .kr-jcare-actions {
    margin-top: 0;

    justify-content: flex-end;
}


/* =========================================================
   17. CARE FAQ / ACCORDION
========================================================= */

.kr-jcare-faq {
    padding:
        clamp(90px, 9vw, 145px)
        0;
}

.kr-jcare-faq-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.72fr)
        minmax(0, 1.28fr);

    gap:
        clamp(
            50px,
            8vw,
            110px
        );
}

.kr-jcare-faq-title h2 {
    max-width: 510px;

    margin-bottom: 20px;

    font-size:
        clamp(
            42px,
            4.7vw,
            68px
        );

    line-height: 1.02;
}

.kr-jcare-faq-title p {
    max-width: 500px;
}

.kr-jcare-faq-list {
    border-top:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-faq-item {
    border-bottom:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-faq-question {
    position: relative;

    width: 100%;

    padding:
        25px
        55px
        25px
        0;

    border: 0;

    background:
        transparent;

    color:
        var(--kr-jcare-text);

    text-align:
        left;

    font-size:
        18px;
    font-weight:
        600;

    cursor:
        pointer;
}

.kr-jcare-faq-question::after {
    content: "+";

    position: absolute;

    right: 4px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--kr-jcare-gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        28px;

    font-weight:
        400;

    transition:
        transform var(--kr-jcare-transition);
}

.kr-jcare-faq-item.is-open
.kr-jcare-faq-question::after {
    transform:
        translateY(-50%)
        rotate(45deg);
}

.kr-jcare-faq-answer {
    display: none;

    padding:
        0
        45px
        26px
        0;
}

.kr-jcare-faq-item.is-open
.kr-jcare-faq-answer {
    display: block;
}

.kr-jcare-faq-answer p {
    margin-bottom: 0;

    max-width: 700px;
}


/* =========================================================
   18. SUPPORT / CONTACT
========================================================= */

.kr-jcare-support {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        var(--kr-jcare-ivory);
}

.kr-jcare-support-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    gap:
        clamp(
            40px,
            7vw,
            90px
        );

    align-items: center;
}

.kr-jcare-support-copy h2 {
    max-width: 680px;

    margin-bottom: 20px;

    font-size:
        clamp(
            42px,
            4.8vw,
            70px
        );

    line-height:
        1.02;
}

.kr-jcare-support-copy p {
    max-width: 620px;

    margin-bottom: 0;
}

.kr-jcare-support-card {
    padding:
        clamp(
            35px,
            4vw,
            55px
        );

    border-radius:
        var(--kr-jcare-radius-large);

    background:
        var(--kr-jcare-charcoal);

    box-shadow:
        var(--kr-jcare-shadow);
}

.kr-jcare-support-card h3 {
    margin-bottom: 14px;

    color:
        var(--kr-jcare-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            28px,
            2.7vw,
            40px
        );

    font-weight: 400;
}

.kr-jcare-support-card p {
    color:
        rgba(255, 255, 255, 0.64);
}

.kr-jcare-support-card
.kr-jcare-actions {
    display: grid;

    grid-template-columns:
        1fr;

    margin-top: 28px;
}

.kr-jcare-support-card
.kr-jcare-btn-primary {
    background:
        var(--kr-jcare-gold);

    border-color:
        var(--kr-jcare-gold);
}

.kr-jcare-support-card
.kr-jcare-btn-primary:hover {
    background:
        var(--kr-jcare-gold-light);

    border-color:
        var(--kr-jcare-gold-light);
}

.kr-jcare-support-card
.kr-jcare-btn-secondary {
    color:
        var(--kr-jcare-white) !important;

    border-color:
        rgba(255, 255, 255, 0.34);
}

.kr-jcare-support-card
.kr-jcare-btn-secondary:hover {
    color:
        var(--kr-jcare-gold-light) !important;

    border-color:
        var(--kr-jcare-gold-light);
}


/* =========================================================
   19. TRUST STRIP
========================================================= */

.kr-jcare-trust {
    background:
        var(--kr-jcare-white);
}

.kr-jcare-trust-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.kr-jcare-trust-grid > div {
    min-height: 160px;

    padding:
        38px
        28px;

    border-right:
        1px solid var(--kr-jcare-border);

    border-bottom:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-trust-grid > div:last-child {
    border-right: 0;
}

.kr-jcare-trust-grid strong {
    display: block;

    margin-bottom: 9px;

    color:
        var(--kr-jcare-text);

    font-size: 16px;
}

.kr-jcare-trust-grid span {
    display: block;

    color:
        var(--kr-jcare-muted);

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   20. FINAL SECTION
========================================================= */

.kr-jcare-final {
    padding:
        clamp(85px, 9vw, 135px)
        0;

    background:
        linear-gradient(
            135deg,
            var(--kr-jcare-ivory-2),
            #ffffff
        );
}

.kr-jcare-final-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(
            40px,
            7vw,
            90px
        );

    align-items: center;
}

.kr-jcare-final h2 {
    max-width: 650px;

    margin-bottom: 0;

    font-size:
        clamp(
            42px,
            4.6vw,
            68px
        );

    line-height: 1.02;
}

.kr-jcare-final-links {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid var(--kr-jcare-border);

    border-left:
        1px solid var(--kr-jcare-border);
}

.kr-jcare-final-links a {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 100px;

    padding:
        26px;

    border-right:
        1px solid var(--kr-jcare-border);

    border-bottom:
        1px solid var(--kr-jcare-border);

    font-size:
        16px;

    transition:
        color var(--kr-jcare-transition),
        background var(--kr-jcare-transition);
}

.kr-jcare-final-links a:hover {
    color:
        var(--kr-jcare-gold-dark);

    background:
        var(--kr-jcare-white);
}

.kr-jcare-final-links span {
    color:
        var(--kr-jcare-gold);

    font-size: 20px;
}


/* =========================================================
   21. GENERIC SECTIONS SAFETY
========================================================= */

.kr-jcare-section {
    padding:
        clamp(85px, 9vw, 140px)
        0;
}

.kr-jcare-section-alt {
    background:
        var(--kr-jcare-ivory);
}

.kr-jcare-panel {
    padding:
        clamp(
            30px,
            4vw,
            50px
        );

    border:
        1px solid var(--kr-jcare-border);

    border-radius:
        var(--kr-jcare-radius);

    background:
        var(--kr-jcare-white);
}


/* =========================================================
   22. TABLE SAFETY
========================================================= */

.kr-jcare-main table {
    width: 100%;

    border-collapse:
        collapse;

    margin:
        28px
        0;

    background:
        var(--kr-jcare-white);
}

.kr-jcare-main th,
.kr-jcare-main td {
    padding:
        16px
        18px;

    border:
        1px solid var(--kr-jcare-border);

    text-align:
        left;

    vertical-align:
        top;
}

.kr-jcare-main th {
    background:
        var(--kr-jcare-ivory-2);

    color:
        var(--kr-jcare-text);

    font-weight: 600;
}

.kr-jcare-main td {
    color:
        var(--kr-jcare-muted);
}


/* =========================================================
   23. WORDPRESS / ASTRA SAFETY
========================================================= */

body.page-jewelry-care
.site-content,
body.page-jewelry-care
.ast-container,
body.page-jewelry-care
.site-main,
body.page-jewelry-care
.entry-content {
    max-width: none;
}

body.page-jewelry-care
.site-content {
    padding: 0;
}

body.page-jewelry-care
.ast-container {
    width: 100%;

    max-width: none;

    padding-left: 0;
    padding-right: 0;
}

body.page-jewelry-care
.entry-content {
    margin: 0;

    padding: 0;
}

body.page-jewelry-care
.entry-header {
    display: none;
}

body.page-jewelry-care
.ast-article-single {
    margin: 0;

    padding: 0;

    border: 0;

    background:
        transparent;
}

.kr-jcare-main
.entry-content,
.kr-jcare-main
.wp-block-group,
.kr-jcare-main
.elementor,
.kr-jcare-main
.site-main {
    max-width: none;
}


/* =========================================================
   24. SCROLL REVEAL SUPPORT
========================================================= */

.kr-jcare-reveal {
    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}

.kr-jcare-reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   25. ACCESSIBILITY
========================================================= */

.kr-jcare-main a:focus-visible,
.kr-jcare-main button:focus-visible {
    outline:
        2px solid var(--kr-jcare-gold);

    outline-offset:
        4px;
}

.kr-jcare-main ::selection {
    color:
        var(--kr-jcare-white);

    background:
        var(--kr-jcare-gold);
}


/* =========================================================
   26. LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .kr-jcare-container {
        width:
            min(
                calc(100% - 120px),
                var(--kr-jcare-max)
            );
    }

}


/* =========================================================
   27. LAPTOP / TABLET LANDSCAPE
========================================================= */

@media (max-width: 1180px) {

    .kr-jcare-intro-inner,
    .kr-jcare-diamond-layout,
    .kr-jcare-storage-layout,
    .kr-jcare-faq-layout {
        grid-template-columns:
            1fr;
    }

    .kr-jcare-diamond-title {
        position:
            static;
    }

    .kr-jcare-overview-grid,
    .kr-jcare-trust-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .kr-jcare-overview-item:nth-child(2) {
        border-right:
            0;
    }

    .kr-jcare-overview-item:nth-child(-n + 2) {
        border-bottom:
            1px solid
            var(--kr-jcare-border);
    }

    .kr-jcare-trust-grid > div:nth-child(2) {
        border-right:
            0;
    }

    .kr-jcare-everyday-grid,
    .kr-jcare-metals-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   28. TABLET
========================================================= */

@media (max-width: 900px) {

    .kr-jcare-container {
        width:
            calc(100% - 40px);
    }

    .kr-jcare-dos-donts-grid,
    .kr-jcare-support-inner,
    .kr-jcare-professional-inner,
    .kr-jcare-final-inner {
        grid-template-columns:
            1fr;
    }

    .kr-jcare-professional
    .kr-jcare-actions {
        justify-content:
            flex-start;
    }

    .kr-jcare-cleaning-step {
        grid-template-columns:
            55px
            minmax(0, 1fr);

        gap:
            20px;
    }

    .kr-jcare-cleaning-step p {
        grid-column:
            2;
    }

}


/* =========================================================
   29. MOBILE
========================================================= */

@media (max-width: 767px) {

    .kr-jcare-container {
        width:
            calc(100% - 32px);
    }

    .kr-jcare-hero {
        padding:
            76px
            0
            82px;
    }

    .kr-jcare-hero::after {
        display:
            none;
    }

    .kr-jcare-hero h1 {
        font-size:
            clamp(
                46px,
                13vw,
                64px
            );

        line-height:
            0.98;
    }

    .kr-jcare-hero p {
        font-size:
            17px;
    }

    .kr-jcare-actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        width:
            100%;

        gap:
            12px;
    }

    .kr-jcare-btn {
        width:
            100%;

        min-height:
            56px;
    }

    .kr-jcare-intro,
    .kr-jcare-everyday,
    .kr-jcare-dos-donts,
    .kr-jcare-diamond,
    .kr-jcare-metals,
    .kr-jcare-storage,
    .kr-jcare-cleaning,
    .kr-jcare-professional,
    .kr-jcare-faq,
    .kr-jcare-support,
    .kr-jcare-final,
    .kr-jcare-section {
        padding-top:
            74px;

        padding-bottom:
            74px;
    }

    .kr-jcare-intro-title h2,
    .kr-jcare-section-heading h2,
    .kr-jcare-diamond-title h2,
    .kr-jcare-storage-copy h2,
    .kr-jcare-professional h2,
    .kr-jcare-faq-title h2,
    .kr-jcare-support-copy h2,
    .kr-jcare-final h2 {
        font-size:
            clamp(
                40px,
                11vw,
                56px
            );
    }

    .kr-jcare-overview {
        padding-bottom:
            74px;
    }

    .kr-jcare-overview-grid,
    .kr-jcare-trust-grid {
        grid-template-columns:
            1fr;
    }

    .kr-jcare-overview-item,
    .kr-jcare-overview-item:nth-child(2) {
        min-height:
            0;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--kr-jcare-border);
    }

    .kr-jcare-overview-item:last-child {
        border-bottom:
            0;
    }

    .kr-jcare-overview-item {
        padding:
            30px
            8px;
    }

    .kr-jcare-everyday-grid,
    .kr-jcare-metals-grid {
        grid-template-columns:
            1fr;
    }

    .kr-jcare-card,
    .kr-jcare-metal-card {
        min-height:
            0;

        padding:
            30px
            24px;
    }

    .kr-jcare-card-number {
        margin-bottom:
            40px;
    }

    .kr-jcare-do-card,
    .kr-jcare-dont-card {
        min-height:
            0;

        padding:
            32px
            25px;

        border-radius:
            20px;
    }

    .kr-jcare-diamond-layout,
    .kr-jcare-storage-layout,
    .kr-jcare-faq-layout {
        gap:
            44px;
    }

    .kr-jcare-diamond-item {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap:
            12px;

        padding:
            28px
            0;
    }

    .kr-jcare-storage-grid {
        grid-template-columns:
            1fr;
    }

    .kr-jcare-storage-item {
        min-height:
            0;
    }

    .kr-jcare-cleaning-step {
        grid-template-columns:
            36px
            minmax(0, 1fr);

        gap:
            12px;

        padding:
            28px
            0;
    }

    .kr-jcare-professional
    .kr-jcare-actions {
        margin-top:
            10px;
    }

    .kr-jcare-support-card {
        padding:
            30px
            24px;
    }

    .kr-jcare-trust-grid > div,
    .kr-jcare-trust-grid > div:nth-child(2) {
        min-height:
            0;

        border-right:
            0;
    }

    .kr-jcare-final-links {
        grid-template-columns:
            1fr;
    }

    .kr-jcare-final-links a {
        min-height:
            82px;
    }

    .kr-jcare-main table {
        display:
            block;

        width:
            100%;

        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }

}


/* =========================================================
   30. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .kr-jcare-container {
        width:
            calc(100% - 28px);
    }

    .kr-jcare-eyebrow {
        font-size:
            10px;

        letter-spacing:
            0.15em;
    }

    .kr-jcare-hero {
        padding:
            64px
            0
            70px;
    }

    .kr-jcare-hero h1 {
        font-size:
            46px;
    }

    .kr-jcare-intro,
    .kr-jcare-everyday,
    .kr-jcare-dos-donts,
    .kr-jcare-diamond,
    .kr-jcare-metals,
    .kr-jcare-storage,
    .kr-jcare-cleaning,
    .kr-jcare-professional,
    .kr-jcare-faq,
    .kr-jcare-support,
    .kr-jcare-final,
    .kr-jcare-section {
        padding-top:
            64px;

        padding-bottom:
            64px;
    }

    .kr-jcare-card,
    .kr-jcare-metal-card,
    .kr-jcare-panel {
        border-radius:
            15px;
    }

    .kr-jcare-do-card,
    .kr-jcare-dont-card,
    .kr-jcare-support-card {
        border-radius:
            18px;
    }

    .kr-jcare-faq-question {
        padding-right:
            45px;

        font-size:
            16px;
    }

    .kr-jcare-cleaning-step h3 {
        font-size:
            21px;
    }

}


/* =========================================================
   31. TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .kr-jcare-btn:hover,
    .kr-jcare-card:hover,
    .kr-jcare-metal-card:hover {
        transform:
            none;
    }

}


/* =========================================================
   32. PRINT
========================================================= */

@media print {

    .kr-jcare-main {
        background:
            #ffffff !important;

        color:
            #000000 !important;
    }

    .kr-jcare-actions,
    .kr-jcare-support,
    .kr-jcare-final-links {
        display:
            none !important;
    }

    .kr-jcare-storage {
        background:
            #ffffff !important;

        color:
            #000000 !important;
    }

    .kr-jcare-storage h2,
    .kr-jcare-storage p,
    .kr-jcare-storage-item strong,
    .kr-jcare-storage-item span {
        color:
            #000000 !important;
    }

    .kr-jcare-card,
    .kr-jcare-metal-card,
    .kr-jcare-do-card,
    .kr-jcare-dont-card {
        box-shadow:
            none !important;
    }

}


/* =========================================================
   33. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kr-jcare-main *,
    .kr-jcare-main *::before,
    .kr-jcare-main *::after {
        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;
    }

    .kr-jcare-reveal {
        opacity:
            1 !important;

        transform:
            none !important;
    }

}


/* =========================================================
   END OF KRULUXE JEWELRY-CARE.CSS
========================================================= */