@import url('../css/rolex-fonts.css');

:root {
    --rolex-gold: #A37E2C;
    --rolex-green: #006039;
    --green: #127749;
    --ocean-green: #9BF9CE;
    --dark-green: #0B3E27;
    --light-green: #249A64;
    --brown: #452C1E;
    --black: #212121;
    --dark-grey: #767676;
    --grey: #D4D4D4;
    --beige: #F4EFEA;
    --light-beige: #F9F7F4;
    --white: #FFFFFF;
    --focus: var(--light-green);
    --container: rgb(var(--dark-grey) / 0.3);
    --error: #BE0100;

    /* --primary-font-family: "Helvetica Now Text", Helvetica, Arial, sans-serif; */
    --primary-font-family: 'Helvetica', Arial, sans-serif;
    --primary-font-weight: 300;
    /* --secondary-font-family: RolexFont-S, sans-serif; */
    --secondary-letter-spacing: 0.125em;
    --leading: normal;
    /* --quote-font-family: SangBleuKingdom, "Times New Roman", Times, serif; */
    --quote-font-family: "Times New Roman", Times, serif;
    --quote-font-weight: 300;
    --quote-font-style: normal;
    --quote-opening: "“";
    --quote-closing: "”";

    --vh100: 100dvh;
    --vw100: 100dvw;
    --1kqp9d4: 1;
    --grid-gap: 8px;
    --grid-col-num: 12;
    --grid-gap-mobile: 6px;
    --grid-col-num: 6;
    --outer-margin: 8vw;

}

:root:lang(th) {
    --primary-font-family: Thonburi, Arial, 'Helvetica', sans-serif;
    --primary-font-weight: normal;
    /* --secondary-font-family: "Sukhumvit Set",CordiaUPC,"Helvetica",sans-serif; */
    /* --quote-font-family: Silom,Tahoma,"Times New Roman",serif; */
    --quote-font-family: Tahoma,"Times New Roman",serif;
    --quote-font-weight: normal;
    --quote-font-style: normal;
}

/* FONT SIZE */
html{
    font-size: 16px;
    scroll-behavior: smooth;

    text-rendering: geometricPrecision;

    height: calc(var(--vh, 1vh) * 100);
    height: fill-available;
    height: -webkit-fill-available;
    height: 100dvh; /* Will override if supported */

    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overscroll-behavior: contain;
    scrollbar-width: thin;

    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    width: 100%;
    color: var(--black);
    background-color: var(--light-beige);
    padding-bottom: env(safe-area-inset-bottom);

    /* font-family: var(--primary-font-family); */
    font-weight: var(--primary-font-weight);
    line-height: var(--leading);

    min-height: -webkit-fill-available;
}
body:lang(en),
body:lang(ms),
body:lang(zh),
html[lang="en"] body {
    font-family: 'Helvetica', Arial, sans-serif;;
}
body:lang(th),
html[lang="th"] body,
html[lang="th"] body h1,
html[lang="th"] body h2,
html[lang="th"] body h3,
html[lang="th"] body h4,
html[lang="th"] body h5,
html[lang="th"] body h6 {
    font-family: 'Helvetica', 'Kanit-Light', Arial, sans-serif;;
}
section {
    max-width: 100%;
}
::selection {
    background: var(--green);
    color: var(--white);
    -webkit-text-fill-color: var(--white);
}

.dark-theme {
    color: rgb(var(--white));
}

.light-theme {
    color: rgb(var(--black));
}

.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}
.page-template-tpl-watchmaking #intro .row-wrap > .col-two,
.page-template-tpl-new-watches #intro .row-wrap > .col-two {
    text-wrap: balance;
}
#intro .row-wrap > .col-two {
    word-break: break-word;
    text-wrap: pretty;
}
#custom-map .card-desc .wrp-desc > h2 > span,
.wrp-content__detail > h2 > span,
#intro .row-wrap > .col-two span {
    white-space: nowrap
}
:is(a, button, summary, [role="button"]).focus-visible,:is(a, button, summary, [role="button"]).focus-visible .fake-link {
    outline: 2px solid rgb(var(--focus, 0 255 255) / 1)!important;
    outline-offset: 3px!important;
}
.page-template-tpl-watches #rolex-watch span,
.page-template-tpl-discover #rolex-watch span {
    font-weight: 700;
}
@media only screen and (min-width: 320px) {

    .container {
        width: calc(100vw - 14vw);
        margin: 0 auto;
    }

    h1 {
        font-size: 36px;
        font-weight: 700;
        line-height: 1.1;
        margin: 0;
        color: var(--brown);
    }
    h2 {
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        color: var(--brown);
    }
    h3 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        color: var(--brown);
    }
    h4 {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        color: var(--brown);
    }
    h5 {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        color: var(--brown);
    }

    p, a {
        font-size: 16px;
        font-weight: 300;
        line-height: 1.4;
        color: var(--black);
    }


    .h70 {
        font-size: 36px;
        font-weight: 700;
        line-height: 1.1;
    }
    .h50 {
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
    }
    .h36 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
    }
    .h30 {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
    }
    .h26 {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
    }

    .body24-b {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
    }
    .body24-l {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.2;
    }
    .body20-b {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.6;
    }
    .body20-r {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.6;
    }
    .body20-l {
        font-size: 18px;
        font-weight: 300;
        line-height: 1.6;
    }
    .single-product .body20-l,
    #product-features p {
        font-size: 16px;
    }

    .legend16-b {
        font-size: 12px;
        font-weight: 700;
        line-height: 1.1;
    }
    .legend16-l {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.1;
    }
    .legend14-b {
        font-size: 10px;
        font-weight: 700;
        line-height: 1.1;
    }

    .fixed22 {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.1;
    }
    .fixed16 {
        font-size: 16px;
        /* font-size: 1rem; */
        font-weight: 700;
        line-height: 1.1;
    }
    .fixed14 {
        font-size: 14px;
        /* font-size: 0.875rem; */
        font-weight: 700;
        line-height: 1.6;
    }
    .fixed14-l {
        font-size: 14px;
        /* font-size: 14px; */
        font-weight: 300;
        line-height: 1.6;
    }

    blockquote, 
    blockquote p,
    q,
    q p {
        font-family: var(--quote-font-family);
        font-size: 30px !important;
        line-height: 1.6;
    }
    blockquote, 
    q {
        margin: 0;
        margin-top: 30px;
    }
    blockquote p,
    q p {
        margin: 0;
    }

}
@media screen and (max-width: 991.98px){

}

@media screen and (min-width: 767px) and (max-width: 1024px) {
    .h70 {
        font-size: 2.25rem;
    }
    .h50 {
        font-size: 1.875rem;
    }
    .h36 {
        font-size: 1.5rem;
    }
    .h30 {
        font-size: 1.375rem;
    }
    .h26 {
        font-size: 1.375rem;
    }

    .body24-b {
        font-size: 1.125rem;
    }
    .body24-l {
        font-size: 1.125rem;
    }
    .body20-b {
        font-size: 1.125rem;
    }
    .body20-r {
        font-size: 1.125rem;
    }
    .body20-l {
        font-size: 1.125rem;
    }
    .single-product .body20-l,
    #product-features p {
        font-size: 1.125rem;
    }
    .legend16-b {
        font-size: 0.75rem;
    }
    .legend16-l {
        font-size: 0.75rem;
    }
    .legend14-b {
        font-size: 0.625rem;
    }

    .fixed22 {
        font-size: 22px;
    }
    .fixed16 {
        font-size: 16px;
    }
    .fixed14 {
        font-size: 14px;
    }
    .fixed14-l {
        font-size: 14px;
    }
    blockquote, 
    blockquote p,
    q,
    q p {
        font-family: var(--quote-font-family);
        font-size: 1.875rem !important;
        line-height: 1.6;
    }
}
@media screen and (min-width: 991px) and (max-width: 1399.98px){

}
@media screen and (min-width: 1400px) and (max-width: 1919.98px){

}
@media only screen and (min-width: 540px) {
    .container {
        width: calc(100vw - 16vw);
        margin: 0 auto;
    }
}

@media only screen and (min-width: 992px) {

}
@media only screen and (min-width: 1024px) {
    .h70 {
        font-size: 2.875rem;
    }
    .h50 {
        font-size: 2.25rem;
    }
    .h36 {
        font-size: 1.75rem;
    }
    .h30 {
        font-size: 1.4375rem;
    }
    .h26 {
        font-size: 1.4375rem;
    }

    .body24-b {
        font-size: 1.25rem;
    }
    .body24-l {
        font-size: 1.25rem;
    }
    .body20-b {
        font-size: 1.1875rem;
    }
    .body20-r {
        font-size: 1.1875rem;
    }
    .body20-l {
        font-size: 1.1875rem;
    }
    .single-product .body20-l,
    #product-features p {
        font-size: 1.1875rem;
    }
    .legend16-b {
        font-size: 0.815rem;
    }
    .legend16-l {
        font-size: 0.815rem;
    }
    .legend14-b {
        font-size: 0.6875rem;
    }

    .fixed22 {
        font-size: 22px;
    }
    .fixed16 {
        font-size: 16px;
    }
    .fixed14 {
        font-size: 14px;
    }
    .fixed14-l {
        font-size: 14px;
    }
    blockquote, 
    blockquote p,
    q,
    q p {
        font-family: var(--quote-font-family);
        font-size: 2rem !important;
        line-height: 1.6;
    }
}
@media only screen and (min-width: 1200px) {

    .container {
        width: calc(100vw - 16vw);
        margin: 0 auto;

        /* width: var(--vw100, 100vw);
        display: grid;
        -webkit-column-gap: var(--grid-gap);
        column-gap: var(--grid-gap);
        grid-template-columns: [doc-start] calc(var(--outer-margin) - var(--grid-gap)) [main-start] repeat(var(--grid-col-num), [col] minmax(0, 1fr)) [col main-end] calc(var(--outer-margin) - var(--grid-gap)) [doc-end];
        --touch-padding: 0.5rem; */
    }

    h1 {
        font-size: clamp(4.313rem, 3.688rem + 0.781vw, 4.625rem);
        /* font-size: clamp(2.75rem, 1rem + 4.37vw, 6.25rem); */
        /* font-size: 70px; */
        font-weight: 700;
        line-height: 1.1;
        margin: 0;
        color: var(--brown);
    }
    h2 {
        font-size: clamp(1.875rem, 1.25rem + 1.5625vw, 3.125rem);
        /* font-size: 50px; */
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        color: var(--brown);
    }
    h3 {
        font-size: clamp(2.125rem, 1.817rem + 0.361vw, 2.25rem);
        /* font-size: 36px; */
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        color: var(--brown);
    }
    h4 {
        font-size: clamp(1.25rem, 0.9375rem + 0.7813vw, 1.875rem);
        /* font-size: 30px; */
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        color: var(--brown);
    }
    h5 {
        font-size: clamp(1.375rem, 1.25rem + 0.3125vw, 1.625rem);
        /* font-size: 26px; */
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        color: var(--brown);
    }

    p, a {
        font-size: clamp(0.875rem, 0.8125rem + 0.1563vw, 1rem);
        /* font-size: 16px; */
        font-weight: 300;
        line-height: 1.4;
        color: var(--black);
    }

    .h70 {
        font-size: clamp(4.313rem, 3.688rem + 0.781vw, 4.625rem);
        /* font-size: clamp(2.75rem, 1rem + 4.37vw, 6.25rem); */
        /* font-size: 70px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .h50 {
        font-size: clamp(1.875rem, 1.25rem + 1.5625vw, 3.125rem);
        /* font-size: 50px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .h36 {
        font-size: clamp(2.125rem, 1.817rem + 0.361vw, 2.25rem);
        /* font-size: 36px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .h30 {
        font-size: clamp(1.25rem, 0.9375rem + 0.7813vw, 1.875rem);
        /* font-size: 30px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .h26 {
        font-size: clamp(1.375rem, 1.25rem + 0.3125vw, 1.625rem);
        /* font-size: 26px; */
        font-weight: 700;
        line-height: 1.2;
    }

    .body24-b {
        font-size: clamp(1.313rem, 0.938rem + 0.469vw, 1.5rem);
        /* font-size: 24px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .body24-l {
        font-size: clamp(1.313rem, 0.938rem + 0.469vw, 1.5rem);
        /* font-size: 24px; */
        font-weight: 400;
        line-height: 1.2;
    }
    .body20-b {
        font-size: clamp(1.125rem, 1.0625rem + 0.1563vw, 1.25rem);
        /* font-size: 20px; */
        font-weight: 700;
        line-height: 1.6;
    }
    .body20-r {
        font-size: clamp(1.125rem, 1.0625rem + 0.1563vw, 1.25rem);
        /* font-size: 20px; */
        font-weight: 400;
        line-height: 1.6;
    }
    .body20-l {
        font-size: clamp(1.125rem, 1.0625rem + 0.1563vw, 1.25rem);
        /* font-size: 20px; */
        font-weight: 300;
        line-height: 1.6;
    }
    .single-product .body20-l,
    #product-features p {
        font-size: clamp(1.125rem, 1.0625rem + 0.1563vw, 1.25rem);
    }
    .legend16-b {
        font-size: clamp(0.875rem, 0.8125rem + 0.1563vw, 1rem);
        /* font-size: 16px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .legend16-l {
        font-size: clamp(0.875rem, 0.8125rem + 0.1563vw, 1rem);
        /* font-size: 16px; */
        font-weight: 400;
        line-height: 1.1;
    }
    .legend14-b {
        font-size: clamp(0.625rem, 0.5rem + 0.3125vw, 0.875rem);
        /* font-size: 14px; */
        font-weight: 700;
        line-height: 1.1;
    }

    .fixed22 {
        font-size: clamp(1.25rem, 1rem + 0.313vw, 1.375rem);
        /* font-size: 22px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .fixed16 {
        font-size: clamp(0.75rem, 0.625rem + 0.3125vw, 1rem);
        /* font-size: 16px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .fixed16-l {
        font-size: clamp(0.75rem, 0.625rem + 0.3125vw, 1rem);
        /* font-size: 16px; */
        font-weight: 300;
        line-height: 1.1;
    }
    .fixed14 {
        font-size: clamp(0.625rem, 0.5rem + 0.3125vw, 0.875rem);
        /* font-size: 14px; */
        font-weight: 700;
        line-height: 1.6;
    }
    .fixed14-l {
        font-size: clamp(0.625rem, 0.5rem + 0.3125vw, 0.875rem);
        /* font-size: 14px; */
        font-weight: 300;
        line-height: 1.6;
    }

    .fixed12 {
        font-size: clamp(0.5625rem, 0.4688rem + 0.2344vw, 0.75rem);
        font-weight: 400;
        line-height: 1.42;
    }


    blockquote, 
    blockquote p,
    q,
    q p {
        font-family: var(--quote-font-family);
        font-size: clamp(1.875rem, 1.25rem + 1.5625vw, 3.125rem) !important;
        /* font-size: 50px; */
        line-height: 1.6;
    }
    blockquote, 
    q {
        margin: 0;
        margin-top: 50px;
    }
    blockquote p,
    q p {
        margin: 0;
    }

}

@media only screen and (min-width: 1366px) {

}

@media only screen and (min-width: 1440px) {
    /* 1rem = 16px */
    .h70 {
        font-size: 3.5rem;
        /* font-size: clamp(2.75rem, 1rem + 4.37vw, 6.25rem); */
        /* font-size: 56px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .h50 {
        font-size: 2.625rem;
        /* font-size: 42px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .h36 {
        font-size: 2rem;
        /* font-size: 32px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .h30 {
        font-size: 1.625rem;
        /* font-size: 26px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .h26 {
        font-size: 1.5625rem;
        /* font-size: 25px; */
        font-weight: 700;
        line-height: 1.2;
    }

    .body24-b {
        font-size: 1.375rem;
        /* font-size: 22px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .body24-l {
        font-size: 1.375rem;
        /* font-size: 22px; */
        font-weight: 400;
        line-height: 1.2;
    }
    .body20-b {
        font-size: 1.1875rem;
        /* font-size: 19px; */
        font-weight: 700;
        line-height: 1.6;
    }
    .body20-r {
        font-size: 1.1875rem;
        /* font-size: 19px; */
        font-weight: 400;
        line-height: 1.6;
    }
    .body20-l {
        font-size: 1.1875rem;
        /* font-size: 19px; */
        font-weight: 300;
        line-height: 1.6;
    }
    .single-product .body20-l,
    #product-features p {
        font-size: 1.1875rem;
    }
    .legend16-b {
        font-size: 0.9375rem;
        /* font-size: 15px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .legend16-l {
        font-size: 0.9375rem;
        /* font-size: 15px; */
        font-weight: 400;
        line-height: 1.1;
    }
    .legend14-b {
        font-size: 0.8125rem;
        /* font-size: 13px; */
        font-weight: 700;
        line-height: 1.1;
    }

    .fixed22 {
        font-size: 22px;
        /* font-size: 22px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .fixed16 {
        font-size: 16px;
        /* font-size: 16px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .fixed16-l {
        font-size: 16px;
        /* font-size: 16px; */
        font-weight: 300;
        line-height: 1.1;
    }
    .fixed14 {
        font-size: 14px;
        /* font-size: 14px; */
        font-weight: 700;
        line-height: 1.6;
    }
    .fixed14-l {
        font-size: 14px;
        /* font-size: 14px; */
        font-weight: 300;
        line-height: 1.6;
    }

    .fixed12 {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.42;
    }
    blockquote, 
    blockquote p,
    q,
    q p {
        font-family: var(--quote-font-family);
        font-size: 2.5rem !important;
        /* font-size: 50px; */
        line-height: 1.6;
    }
    blockquote, 
    q {
        margin: 0;
        margin-top: 50px;
    }
    blockquote p,
    q p {
        margin: 0;
    }
}

@media only screen and (min-width: 1600px) {

}
@media screen and (min-width: 1920px) {

    html {
        font-size: 18px;
    }
    .h70 {
        font-size: 3.89rem;
        /* font-size: clamp(2.75rem, 1rem + 4.37vw, 6.25rem); */
        /* font-size: 70px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .h50 {
        font-size: 2.778rem;
        /* font-size: 50px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .h36 {
        font-size: 2rem;
        /* font-size: 36px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .h30 {
        font-size: 1.667rem;
        /* font-size: 30px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .h26 {
        font-size: 1.445rem;
        /* font-size: 26px; */
        font-weight: 700;
        line-height: 1.2;
    }

    .body24-b {
        font-size: 1.335rem;
        /* font-size: 24px; */
        font-weight: 700;
        line-height: 1.2;
    }
    .body24-l {
        font-size: 1.335rem;
        /* font-size: 24px; */
        font-weight: 400;
        line-height: 1.2;
    }
    .body20-b {
        font-size: 1.115rem;
        /* font-size: 20px; */
        font-weight: 700;
        line-height: 1.6;
    }
    .body20-r {
        font-size: 1.115rem;
        /* font-size: 20px; */
        font-weight: 400;
        line-height: 1.6;
    }
    .body20-l {
        font-size: 1.115rem;
        /* font-size: 20px; */
        font-weight: 300;
        line-height: 1.6;
    }
    .single-product .body20-l,
    #product-features p {
        font-size: 1.115rem;
    }
    .legend16-b {
        font-size: 0.89rem;
        /* font-size: 16px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .legend16-l {
        font-size: 0.89rem;
        /* font-size: 16px; */
        font-weight: 400;
        line-height: 1.1;
    }
    .legend14-b {
        font-size: 0.778rem;
        /* font-size: 14px; */
        font-weight: 700;
        line-height: 1.1;
    }

    .fixed22 {
        font-size: 22px;
        /* font-size: 22px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .fixed16 {
        font-size: 16px;
        /* font-size: 16px; */
        font-weight: 700;
        line-height: 1.1;
    }
    .fixed16-l {
        font-size: 16px;
        /* font-size: 16px; */
        font-weight: 300;
        line-height: 1.1;
    }
    .fixed14 {
        font-size: 14px;
        /* font-size: 14px; */
        font-weight: 700;
        line-height: 1.6;
    }
    .fixed14-l {
        font-size: 14px;
        /* font-size: 14px; */
        font-weight: 300;
        line-height: 1.6;
    }

    .fixed12 {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.42;
    }


    blockquote, 
    blockquote p,
    q,
    q p {
        font-family: var(--quote-font-family);
        font-size: 2.78rem !important;
        /* font-size: 50px; */
        line-height: 1.6;
    }
    blockquote, 
    q {
        margin: 0;
        margin-top: 50px;
    }
    blockquote p,
    q p {
        margin: 0;
    }
}