/* ============
   COLOR SCHEME
=============== */

:root {
    /* Used as body background and overlays */
    --purchase-s-body-bg: #000000;
    /* Used as a background color for header, footer, and mobile navigation */
    --purchase-s-nav: #07090DCC;
    /* Used as a background color for block containers, sub-menus, and form inputs */
    --purchase-s-container-bg: #12161b;
    /* The same as the previous one but with transparency for frosted glass blocks */
    --purchase-s-container-frosted: #12161bEE;
    /* Used as a color for headings, page titles, button labels, and other bright text accents */
    --purchase-s-heading: #F5F7FA;
    /* It is the same as the previous one but with transparency. Used for labels, meta, and some hover effects */
    --purchase-s-heading-fade: #F5F7FAC0;
    /* Used as a color for general content */
    --purchase-s-text: #C5C7CE;
    /* A background color for accents, like buttons, highlighted blocks, etc. */
    --purchase-s-accent: #6C2DC7;
    /* A hovered button background color */
    --purchase-button-hover-bg: #6C2DC7D0;
    /* Used as a color for text accents */
    --purchase-s-text-accent: #6C2DC7;
    /* Used as a text color for accented blocks */
    --purchase-s-accented-text: var(--purchase-s-heading);
    /* Used as a primary border-color */
    --purchase-s-border: #6c2dc75e;
    /* Used as a border color for accented blocks */
    --purchase-s-border-accent: #6C2DC780;
    /* A default semi-transparent border color for blocks with a shining effect */
    --purchase-s-border-mute: #F5F7FA0D;
    /* A semi-transparent border shining effect color */
    --purchase-s-border-highlight: #F5F7FA40;
    /* Used as a color for a backlight effect */
    --purchase-s-backlight: #6c2dc73d;
    /* Used as a color for block shadow */
    --purchase-s-box-shadow: #07090D10;
    /* The cursor-followed backlight color. It uses the primary backlight color */
    --purchase-s-cursor-light: var(--purchase-s-backlight);
    /* A horizontal side-fade gradient border color */
    --purchase-c-border-gradient: linear-gradient(to left, transparent, var(--purchase-s-border), transparent);
    /* Main menu text color */
    --purchase-c-menu: var(--purchase-s-text);
    /* Main menu hovered item text color */
    --purchase-c-menu-hover: var(--purchase-s-heading);
    /* Main menu current item text color */
    --purchase-c-menu-active: var(--purchase-s-heading);
}


/* ==========
   TYPOGRAPHY
============= */

@font-face {
    font-family: 'ABCGintoNormal';
    src: url('/cdn/font/ABCGintoNormalVariable-Trial-BF651b7b78b41dd.woff') format('woff'), url('/cdn/font/ABCGintoNormalVariable-Trial-BF651b7b7af3067.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Purchase.now';
    src: url('/cdn/font/61fbd90e92d8c32323ae9762_font.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Purchase.now';
    src: url('/cdn/font/61fbd969abcc037233e8c0ba_font.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Purchase.now';
    src: url('/cdn/font/61fbd991c35517b982fe64b4_font.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'kom';
    src: url('/cdn/font/kom.woff2?v2') format("woff2");
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: 'kom2';
    src: url('/cdn/font/komM.woff2?v2') format("woff2");
    font-display: swap;
    font-weight: 600;
}

@font-face {
    font-family: 'Proxima';
    src: url('/cdn/font/ProximaRegular.woff2?v2') format("woff2");
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: 'Proxima';
    src: url('/cdn/font/ProximaMedium.woff2?v2') format("woff2");
    font-display: swap;
    font-weight: 600;
}

:root {
    /* === FONT GROUPS === */
    /* Headings Font Family */
    --purchase-t-heading-ff: 'Purchase.now', sans-serif;
    /* Headings Font Weight */
    --purchase-t-heading-fw: 600;
    --purchase-t-heading2-fw: 600;
    /* Content Font Family */
    --purchase-t-content-ff: 'Proxima', sans-serif;
    /* Content Font Weight */
    --purchase-t-content-fw: 500;
    --purchase-t-content2-ff: 'Proxima', sans-serif;
    /* Content Font Weight */
    --purchase-t-content2-fw: 600;
    /* Content Font Letter Spacing */
    --purchase-t-content-ls: -0.01em;
    /* === MAIN MENU === */
    /* Main Menu Font Family */
    --purchase-t-menu-ff: var(--purchase-t-heading-ff);
    /* Main Menu Font Weight */
    --purchase-t-menu-fw: var(--purchase-t-heading-fw);
    /* Main Menu Font Size */
    --purchase-t-menu-fs: 14px;
    /* Main Menu Line Height */
    --purchase-t-menu-lh: 1.4em;
    /* Sub-Menu Font Family */
    --purchase-t-submenu-ff: var(--purchase-t-content-ff);
    /* Main Menu Font Weight */
    --purchase-t-submenu-fw: var(--purchase-t-content-fw);
    /* Main Menu Font Size */
    --purchase-t-submenu-fs: 13px;
    /* Main Menu Line Heiight */
    --purchase-t-submenu-lh: var(--purchase-t-menu-lh);
    /* === FOOTER === */
    /* Footer Font Size */
    --purchase-t-footer-fs: 14px;
    /* Footer Text Line Height */
    --purchase-t-footer-lh: 1.4em;
    /* Social Icons Size */
    --purchase-socials-size: 24px;
    /* === HEADINGS === */
    /* H1 Heading font size */
    --purchase-t-h1-fs: 80px;
    /* H1 Heading letter spacing */
    --purchase-t-h1-ls: -0.05em;
    /* H1 Line Height */
    --purchase-t-h1-lh: 1.1em;
    /* H1 Margin */
    --purchase-t-h1-margin: -0.175em 0 0.338em -0.063em;
    /* H2 Heading font size */
    --purchase-t-h2-fs: 56px;
    /* H2 Heading letter spacing */
    --purchase-t-h2-ls: -0.05em;
    /* H2 Line Height */
    --purchase-t-h2-lh: 1.2em;
    /* H2 Margin */
    --purchase-t-h2-margin: -0.232em 0 0.482em -0.06em;
    /* H3 Heading font size */
    --purchase-t-h3-fs: 40px;
    /* H3 Heading letter spacing */
    --purchase-t-h3-ls: -0.05em;
    /* H3 Line Height */
    --purchase-t-h3-lh: 1.2em;
    /* H3 Margin */
    --purchase-t-h3-margin: -0.215em 0 0.65em -0.05em;
    /* H4 Heading font size */
    --purchase-t-h4-fs: 28px;
    /* H4 Heading letter spacing */
    --purchase-t-h4-ls: -0.05em;
    /* H4 Line Height */
    --purchase-t-h4-lh: 1.2em;
    /* H4 Margin */
    --purchase-t-h4-margin: -0.22em 0 0.813em -0.05em;
    /* H5 Heading font size */
    --purchase-t-h5-fs: 26px;
    --purchase-t-price-fs: 20px;
    /* H5 Heading letter spacing */
    --purchase-t-h5-ls: -0.02em;
    /* H5 Line Height */
    --purchase-t-h5-lh: 1.2em;
    /* H5 Margin */
    --purchase-t-h5-margin: -0.19em 0 1em -0.06em;
    /* H6 Heading font size */
    --purchase-t-h6-fs: 18px;
    /* H6 Heading letter spacing */
    --purchase-t-h6-ls: -0.02em;
    /* H6 Line Height */
    --purchase-t-h6-lh: 1.2em;
    /* H6 Margin */
    --purchase-t-h6-margin: -0.2em 0 1.2em -0.038em;
    /* === CONTENT === */
    /* Content Large text Font Size */
    --purchase-t-large-fs: 18px;
    /* Content text Font Size */
    --purchase-t-content-fs: 13px;
    /* Content text Line Height */
    --purchase-t-content-lh: 1.4em;
    /* Meta Font Size */
    --purchase-t-meta-fs: 12px;
    /* Meta Letter Spacing */
    --purchase-t-meta-ls: 0.12em;
    /* Meta Font Weight */
    --purchase-t-meta-fw: 600;
    /* === FORMS AND FIELDS === */
    /* Button Font Size */
    --purchase-t-button-fs: 13px;
    /* Input Font Size */
    --purchase-t-input-fs: 14px;
    /* Input Line Height */
    --purchase-t-input-lh: 1.4em;
}


/* =======================
   DIMENSIONS AND SPACINGS
========================== */

:root {
    /* Header vertical spacing */
    --purchase-header-spacing: 16px;
    /* Main Menu items spacing */
    --purchase-menu-gap: 32px;
    /* Sub-menu container width */
    --purchase-sub-menu-width: 200px;
    /* Social Items list items spacing */
    --purchase-socials-gap: 24px;
    /* Section Spacing (Applies at the top and the bottom of each section) */
    --purchase-section-gap: 120px;
    /* Extra Large border radius */
    --purchase-xl-br: 48px;
    /* Large border radius */
    --purchase-large-br: 32px;
    /* Default border radius */
    --purchase-default-br: 24px;
    /* Small border radius */
    --purchase-small-br: 20px;
    /* Extra small border radius */
    --purchase-xs-br: 12px;
    /* Button padding */
    --purchase-button-spacing: 12px 16px;
    /* Button border radius */
    --purchase-button-br: var(--purchase-xs-br);
    /* Input field padding */
    --purchase-input-spacing: 16px 16px 16px 16px;
    /* Input field border radius */
    --purchase-input-br: var(--purchase-xs-br);
    /* Input field bottom margin */
    --purchase-input-gap: 24px;
    /* Shadow Themes Grid: Container */
    --stg-container-width: 1200px;
    /* Shadow Themes Grid: Default Gap */
    --stg-gap: 32px;
    --stg-d-gap: 32px;
    /* Shadow Themes Grid: Extra Small Gap */
    --stg-xs-gap: 8px;
    /* Shadow Themes Grid: Small Gap */
    --stg-small-gap: 16px;
    /* Shadow Themes Grid: Large Gap */
    --stg-large-gap: 64px;
    /* Shadow Themes Grid: Extra Large Gap */
    --stg-xl-gap: 128px;
}


/* =================
   RESPONSIVE VALUES
==================== */


/* === Tablet: Landscape === */

@media only screen and (max-width: 1279px) {
     :root {
        --stg-container-width: 976px;
        --purchase-t-h1-fs: 64px;
        --purchase-t-h2-fs: 45px;
        --purchase-t-h3-fs: 32px;
        --purchase-t-h4-fs: 24px;
        --purchase-t-h5-fs: 22px;
        --purchase-t-price-fs: 16px;
        --purchase-t-h6-fs: 18px;
        --purchase-t-large-fs: 18px;
        --purchase-t-content-fs: 14px;
        --purchase-t-footer-fs: 14px;
        --purchase-t-meta-fs: 9px;
        --purchase-t-button-fs: 13px;
        --purchase-t-input-fs: 14px;
        --purchase-header-spacing: 12px;
        --purchase-menu-gap: 24px;
        --purchase-socials-gap: 16px;
        --purchase-section-gap: 96px;
        --purchase-xl-br: 36px;
        --purchase-large-br: 24px;
        --purchase-default-br: 18px;
        --purchase-small-br: 15px;
        --purchase-xs-br: 12px;
        --stg-gap: 24px;
        --stg-d-gap: 24px;
        --stg-xs-gap: 6px;
        --stg-small-gap: 12px;
        --stg-large-gap: 48px;
        --stg-xl-gap: 96px;
        --purchase-section-gap: 96px;
    }
}


/* === Mobile Menu === */

@media only screen and (max-width: 960px) {
     :root {
        /* Main Menu Font Family */
        --purchase-t-menu-ff: var(--purchase-t-heading-ff);
        /* Main Menu Font Weight */
        --purchase-t-menu-fw: var(--purchase-t-heading-fw);
        /* Main Menu Font Size */
        --purchase-t-menu-fs: 32px;
        /* Main Menu Line Heiight */
        --purchase-t-menu-lh: 1.2em;
        /* Sub-Menu Font Family */
        --purchase-t-submenu-ff: var(--purchase-t-content-ff);
        /* Main Menu Font Weight */
        --purchase-t-submenu-fw: var(--purchase-t-content-fw);
        /* Main Menu Font Size */
        --purchase-t-submenu-fs: 16px;
        /* Main Menu Line Heiight */
        --purchase-t-submenu-lh: 1.4em;
    }
}


/* === Tablet: Portrait === */

@media only screen and (max-width: 960px) {
     :root {
        --purchase-t-h1-fs: 55px;
        --stg-container-width: 590px;
        --purchase-header-spacing: 12px;
    }
}


/* === Mobile Phones === */

@media only screen and (max-width: 739px) {
     :root {
        --stg-container-width: calc( 100svw - 2 * var( --stg-gap));
        --purchase-t-h1-fs: 48px;
        --purchase-t-h2-fs: 32px;
        --purchase-t-h3-fs: 28px;
        --purchase-t-h4-fs: 22px;
        --purchase-t-h5-fs: 20px;
        --purchase-t-price-fs: 14px;
        --purchase-t-h6-fs: 18px;
        --purchase-t-large-fs: 17px;
        --purchase-xl-br: 32px;
        --purchase-large-br: 24px;
        --purchase-default-br: 16px;
        --purchase-small-br: 15px;
        --purchase-xs-br: 12px;
        --stg-gap: 20px;
        --stg-d-gap: 20px;
        --stg-xs-gap: 6px;
        --stg-small-gap: 12px;
        --stg-large-gap: 40px;
        --stg-xl-gap: 80px;
        --purchase-section-gap: 80px;
        --purchase-socials-gap: 8px;
    }
}


/* ==========
   SVG IMAGES
   ========== */

 :root {
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='m5.501 12-5.5-5.289L2.02 4.78l3.482 3.3 8.481-8.083 2.019 1.959Z'/%3E%3C/svg%3E");
    --icon-arrow-explore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 14.586 12.586 2H1V0h15v15h-2V3.415L1.414 16Z'/%3E%3C/svg%3E");
    --icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m2 12 12.643 12L17 21.763 6.713 12 17 2.237 14.643 0Z'/%3E%3C/svg%3E");
    --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M22 12 9.357 24 7 21.763 17.287 12 7 2.237 9.357 0Z'/%3E%3C/svg%3E");
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 30 13 19.042 15.05 17 24 25.915 32.95 17 35 19.042Z'/%3E%3C/svg%3E");
    --icon-menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M31 24 20.042 35 18 32.95 26.915 24 18 15.05 20.042 13Z'/%3E%3C/svg%3E");
    --icon-arrow-explore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 14.586 12.586 2H1V0h15v15h-2V3.415L1.414 16Z'/%3E%3C/svg%3E");
    --icon-star-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M6 0 3.989 3.989 0 4.489l2.739 3.1L1.983 12 6 10.017 10.017 12l-.756-4.411L12 4.489l-3.991-.5Zm0 1.487 1.565 3.13 3.1.391-2.109 2.375.574 3.443L6 9.261l-3.13 1.565.574-3.443L1.33 5.009l3.1-.391Z'/%3E%3C/svg%3E");
    --icon-star-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='m6 0 2.009 3.989 3.991.5-2.739 3.1.757 4.409L6 10.017 1.983 12l.756-4.411L0 4.489l3.989-.5Z'/%3E%3C/svg%3E");
    --icon-arrow-submit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M-.001 17.21h27.4l-13.1 13.083 1.7 1.708 16-16-16-16-1.707 1.707 13.1 13.083H-.001Z'/%3E%3C/svg%3E");
    --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M11.092-.001v20.548L1.28 10.719l-1.281 1.28 12 12 12-12-1.28-1.28-9.812 9.828V-.001Z'/%3E%3C/svg%3E");
    --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24.001 11.092H3.453l9.828-9.812-1.28-1.281-12 12 12 12 1.28-1.28-9.828-9.812h20.548Z'/%3E%3C/svg%3E");
    --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 11.092h20.548L10.72 1.28 12 0l12 12-12 12-1.28-1.28 9.828-9.812H0Z'/%3E%3C/svg%3E");
    --icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='m17.076 19.436-7.077-7.077-7.077 7.077a1.668 1.668 0 0 1-2.359 0 1.668 1.668 0 0 1 0-2.359L7.639 10 .562 2.923a1.67 1.67 0 0 1 0-2.36 1.67 1.67 0 0 1 2.36 0L9.999 7.64 17.076.563a1.669 1.669 0 0 1 2.359 0 1.669 1.669 0 0 1 0 2.36L12.358 10l7.077 7.077a1.668 1.668 0 0 1 0 2.359 1.661 1.661 0 0 1-1.179.489 1.664 1.664 0 0 1-1.18-.489Z'/%3E%3C/svg%3E");
    --icon-social-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M45.8 10h7.361L37.083 28.638 56 54H41.188l-11.6-15.382L16.313 54H8.948l17.2-19.936L8 10h15.188l10.488 14.06Zm-2.58 39.532h4.08l-26.326-35.3h-4.379Z'/%3E%3C/svg%3E");
}