@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'Moneta';
    src: url('..//fonts/Moneta-Regular.eot');
    src: local('Moneta'), local('Moneta-Regular'),
        url('..//fonts/Moneta-Regular.eot?#iefix') format('embedded-opentype'),
        url('..//fonts/Moneta-Regular.woff2') format('woff2'),
        url('..//fonts/Moneta-Regular.woff') format('woff'),
        url('..//fonts/Moneta-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
  --bg: #ffffff;                
  --panel: var(--grad-up);       
  --card: #fff6e9;               /* cream surfaces: header, footer, tables, cinfo */
  --line: #f0cb92;               /* soft gold borders / dividers */

  /* ---- text ---- */
  --ink: #000000;                /* headings, strong text */
  --text: #2d2d2d;               /* body copy */
  --muted: #4e4e4e;              /* secondary text */
  --faint: #818080;              /* tertiary text, placeholders, meta */

  /* ---- accent ---- */
  --accent: #8a622e;             /* focus ring, hover, links */
  --accent-soft: #f0cb92;
  --on-accent: #ffffff;

  /* ---- brand gold ---- */
  --gold: #8a622e;               /* solid gold fills (buttons, badges) */
  --gold-bright: #be9761;
  --gold-soft: #f0cb92;          /* soft gold chip background */
  --gold-ink: #8a622e;           /* gold used as TEXT / ICON colour */
  --on-gold: #ffffff;            /* text on solid gold / on gradient hover */
  --on-gold-soft: #f0cb92;       /* small labels sitting on solid gold */
  --on-grad: #000000;            /* text on the gold gradient (buttons, banners) */

  /* gradient stops (start -> middle -> end) */
  --grad-1: #8c622f;
  --grad-2: #be9761;
  --grad-3: #f0cb92;

  /* ---- dark surfaces ---- */
  --black: #1a1a1a;              /* scrollbar track, toast */
  --black-2: #4e4852;            /* compare tray */
  --on-dark: #f2f4f7;            /* text on dark surfaces */

  /* ---- fields / chips / photos ---- */
  --field-bg: #ffffff;
  --field-border: #d4d4d1;
  --chip-bg: #f6f6f6;
  --chip-border: #d4d4d1;
  --photo-bg: #f8f8f8;

  /* ---- misc ---- */
  --overlay: rgba(0, 0, 0, .6);
  --shadow: none;
  --danger: #e91215;
  --success: #3fa871;
  --star: #ffb300;
  --link: #2e7da3;
  --c-hydration: #0B4FA8;
  --c-soothing: #136B3F;
  --c-exfoliating: #A8003C;
  --c-brightening: #7A5200;
  --c-barrier: #5A2E91;
  --c-antiaging: #8A2740;
  --c-suncare: #8A4B00;
  --c-acnecare: #0F5F55;

  /* ---- shape / type ---- */
  --r-md: 14px;
  --r-pill: 999px;
  --font-display: 'Moneta', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
   
:root,
body {
  --grad:    linear-gradient(90deg, var(--grad-1) 0%, var(--grad-2) 53%, var(--grad-3) 100%);
  --grad-up: linear-gradient(0deg,  var(--grad-1) 0%, var(--grad-2) 53%, var(--grad-3) 100%);
}

/* ---------- BLUSH & INK — warmer, higher contrast ---------- */
body[data-theme="blush"] {
  --bg: #FBF1EC;
  --panel: #F6E7DF;
  --card: #FFFDFC;
  --line: #EFE0D8;
  --ink: #231A15;
  --muted: #7A6B62;
  --faint: #998376;
  --accent: #C22A5B;
  --accent-soft: #F9E3EA;
  --on-accent: #FFFFFF;
  --gold: #C9A227;
  --gold-bright: #E4C558;
  --gold-soft: #F6ECD2;
  --black: #16110D;
  --black-2: #241C15;
  --field-bg: #FFFFFF;
  --field-border: #E0CFC5;
  --chip-bg: #FFFFFF;
  --chip-border: #E5D6CC;
  --photo-bg: #FFFFFF;
  --overlay: rgba(35, 26, 21, .36);
  --shadow: 0 1px 2px rgba(120, 80, 60, .07), 0 8px 24px -12px rgba(120, 80, 60, .16);
  --text: var(--ink);
  --gold-ink: #7D5F00;
  --on-gold: var(--black);
  --on-gold-soft: var(--on-gold);
  --on-grad: var(--black);
  --grad-1: var(--gold);
  --grad-2: var(--gold-bright);
  --grad-3: var(--gold-soft);
}

/* ---------- BLACK & GOLD — dark, warm ---------- */
body[data-theme="noir"] {
  --bg: #0F0B08;
  --panel: #241C15;
  --card: #1E1712;
  --line: #3A2E1F;
  --ink: #fff;
  --muted: #B7A488;
  --faint: #8A795F;
  --accent: #E0517F;
  --accent-soft: #3A1B26;
  --on-accent: #16110D;
  --gold: #C9A227;
  --gold-bright: #E4C558;
  --gold-soft: #3A2E1F;
  --black: #16110D;
  --black-2: #241C15;
  --field-bg: #2A211A;
  --field-border: #5A4827;
  --chip-bg: #33291C;
  --chip-border: #4A3B24;
  --photo-bg: #241C15;
  --overlay: rgba(0, 0, 0, .62);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -12px rgba(0, 0, 0, .7);
  --c-hydration: #8FB6E2;
  --c-soothing: #6CC79A;
  --c-exfoliating: #EE6386;
  --c-brightening: #EDBB55;
  --c-barrier: #AF9BD8;
  --c-antiaging: #D98F98;
  --c-suncare: #F0AE54;
  --c-acnecare: #5FC0AB;
  --text: var(--ink);
  --gold-ink: #E4C558;
  --on-gold: var(--black);
  --on-gold-soft: var(--on-gold);
  --on-grad: var(--black);
  --grad-1: var(--gold);
  --grad-2: var(--gold-bright);
  --grad-3: #F3E3A6;
}

/* ---------- SLATE — neutral dark, no warm cast ---------- */
body[data-theme="slate"] {
  --bg: #101317;
  --panel: #1A1F26;
  --card: #161B21;
  --line: #2B333D;
  --ink: #E6EBF2;
  --muted: #93A1B2;
  --faint: #6B7889;
  --accent: #5EAEDB;
  --accent-soft: #152836;
  --on-accent: #0B0E12;
  --gold: #8FA0B5;
  --gold-bright: #B6C4D6;
  --gold-soft: #232B34;
  --black: #0B0E12;
  --black-2: #1A1F26;
  --field-bg: #1E242C;
  --field-border: #3A4551;
  --chip-bg: #222A33;
  --chip-border: #39434F;
  --photo-bg: #1A1F26;
  --overlay: rgba(0, 0, 0, .6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -12px rgba(0, 0, 0, .7);
  --c-hydration: #7FB6E8;
  --c-soothing: #63C79B;
  --c-exfoliating: #F0708F;
  --c-brightening: #E9BC5E;
  --c-barrier: #A996DE;
  --c-antiaging: #DB929B;
  --c-suncare: #EFAE5C;
  --c-acnecare: #59C3AE;
  /* derived */
  --text: var(--ink);
  --gold-ink: #B6C4D6;
  --on-gold: var(--black);
  --on-gold-soft: var(--on-gold);
  --on-grad: var(--black);
  --grad-1: var(--gold);
  --grad-2: var(--gold-bright);
  --grad-3: #DCE5F0;
}

/* ---------- SAGE — muted green, low stimulation ---------- */
body[data-theme="sage"] {
  --bg: #F4F6F1;
  --panel: #E6EBE0;
  --card: #FDFEFC;
  --line: #DCE3D5;
  --ink: #2B332A;
  --muted: #687265;
  --faint: #7F8D77;
  --accent: #568061;
  --accent-soft: #E2EDE4;
  --on-accent: #FFFFFF;
  --gold: #A89968;
  --gold-bright: #C7B98C;
  --gold-soft: #EFEBDD;
  --black: #2B332A;
  --black-2: #3C4639;
  --field-bg: #FFFFFF;
  --field-border: #CBD5C3;
  --chip-bg: #FFFFFF;
  --chip-border: #D3DCCB;
  --photo-bg: #FFFFFF;
  --overlay: rgba(43, 51, 42, .34);
  --shadow: 0 1px 2px rgba(60, 80, 60, .06), 0 8px 24px -12px rgba(60, 80, 60, .15);
  --text: var(--ink);
  --gold-ink: #6B5F32;
  --on-gold: var(--black);
  --on-gold-soft: var(--on-gold);
  --on-grad: var(--black);
  --grad-1: var(--gold);
  --grad-2: var(--gold-bright);
  --grad-3: var(--gold-soft);
}

/* ---------- HIGH CONTRAST — accessibility-first ---------- */
body[data-theme="contrast"] {
  --bg: #FFFFFF;
  --panel: #F2F2F2;
  --card: #FFFFFF;
  --line: #111111;
  --ink: #000000;
  --muted: #333333;
  --faint: #4A4A4A;
  --accent: #0B4FA8;
  --accent-soft: #DCE8F8;
  --on-accent: #FFFFFF;
  --gold: #5A4A00;
  --gold-bright: #7A6600;
  --gold-soft: #F0EBD8;
  --black: #000000;
  --black-2: #111111;
  --field-bg: #FFFFFF;
  --field-border: #111111;
  --chip-bg: #FFFFFF;
  --chip-border: #111111;
  --photo-bg: #FFFFFF;
  --overlay: rgba(0, 0, 0, .55);
  --shadow: 0 0 0 1px #111111;
  --c-hydration: #0B4FA8;
  --c-soothing: #136B3F;
  --c-exfoliating: #A8003C;
  --c-brightening: #7A5200;
  --c-barrier: #5A2E91;
  --c-antiaging: #8A2740;
  --c-suncare: #8A4B00;
  --c-acnecare: #0F5F55;
  --text: var(--ink);
  --gold-ink: #5A4A00;
  --on-gold: #FFFFFF;
  --on-gold-soft: #FFFFFF;
  --on-grad: #FFFFFF;
  --grad-1: #4D3F00;
  --grad-2: #6B5800;
  --grad-3: #8A7000;
}

body[data-theme="contrast"] * {
  text-shadow: none !important
}

body[data-theme="contrast"] .card,
body[data-theme="contrast"] .cbx-field,
body[data-theme="contrast"] .chip {
  border-width: 2px
}

body[data-theme="contrast"] a,
body[data-theme="contrast"] .navlink {
  text-decoration: underline
}

/* ---------- AUTO ---------- */
@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] {
    --bg: #101317;
    --panel: #1A1F26;
    --card: #161B21;
    --line: #2B333D;
    --ink: #E6EBF2;
    --muted: #93A1B2;
    --faint: #6B7889;
    --accent: #5EAEDB;
    --accent-soft: #152836;
    --on-accent: #0B0E12;
    --gold: #8FA0B5;
    --gold-bright: #B6C4D6;
    --gold-soft: #232B34;
    --black: #0B0E12;
    --black-2: #1A1F26;
    --field-bg: #1E242C;
    --field-border: #3A4551;
    --chip-bg: #222A33;
    --chip-border: #39434F;
    --photo-bg: #1A1F26;
    --overlay: rgba(0, 0, 0, .6);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -12px rgba(0, 0, 0, .7);
    --c-hydration: #7FB6E8;
    --c-soothing: #63C79B;
    --c-exfoliating: #F0708F;
    --c-brightening: #E9BC5E;
    --c-barrier: #A996DE;
    --c-antiaging: #DB929B;
    --c-suncare: #EFAE5C;
    --c-acnecare: #59C3AE;
    --text: var(--ink);
    --gold-ink: #B6C4D6;
    --on-gold: var(--black);
    --on-gold-soft: var(--on-gold);
    --on-grad: var(--black);
    --grad-1: var(--gold);
    --grad-2: var(--gold-bright);
    --grad-3: #DCE5F0;
  }
}

html body, input, textarea, .page-title span, .pingback a.url {
    font-family: "Poppins", sans-serif;
}
body {
    background: var(--bg);
}
body, input, textarea {
    color: var(--text);
    font-size: 12px;
    line-height: 18px;
        overflow-x: hidden;
}

.dark-primary-btn{
  background-color: var(--gold);
  color: var(--on-gold);
  border-radius: 50px 0;
  padding: 0 30px;
  font-size: 20px;
  font-weight: 500;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  border: none;
}

h1,h2,h3,h4,.font-heading{
  font-family:'Moneta',serif;
}

a{
    text-decoration:  none !important;
}

img{ max-width:100%; height:auto;}
body .padleft{ padding-left:0 }
body .padright{ padding-right:0 }
body .padtop{ padding-top:15px;}
body .padbottom{ padding-bottom:15px; }
body .nopad{ padding:0 }
section.section{ padding:50px 0; overflow:hidden;}

.box-shadow {
    -webkit-box-shadow: 200px 200px 300px 200px rgba(0,0,0,0.75);
    -moz-box-shadow: 200px 200px 300px 200px rgba(0,0,0,0.75);
    box-shadow: 8px 8px 15px 0px rgba(0, 0, 0, 0.44);
}

/* =================================
    ScrollBar Css Starts Here
================================= */
::-webkit-scrollbar {
    width: 8px;
    border-radius: 10px;
    background-color: var(--black) !important;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--gold) !important;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    width: 5px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: var(--black) !important;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

/* =================================
    ScrollBar Css Ends Here
================================= */

/* ---------------------------------------------------Tabs-------------------------------------------------------------------------*/
.tabs-menu {height: 30px; padding:0; margin:0;}
.tabs-menu li {height: 30px;line-height: 30px; display:inline-block; list-style:none; margin-right: 10px;background-color: var(--field-border);border-top: 1px solid var(--field-border);border-right: 1px solid var(--field-border);border-left: 1px solid var(--field-border);}
.tabs-menu li.current {position: relative;background-color: var(--field-bg);border-bottom: 1px solid var(--field-bg);z-index: 5;}
.tabs-menu li a {padding: 10px;text-transform: uppercase;color: #fff;text-decoration: none; }
.tabs-menu .current a {color: var(--link);}
.tab {border: 1px solid var(--field-border);background-color: var(--field-bg);float: left;margin-bottom: 20px;width: auto; margin-top:-1px;}
.tab-content {max-width: 660px;padding: 20px;display: none;}
#tab-1 {display: block;   }

/* ---------------------------------------------------Left Tabs-------------------------------------------------------------------------*/
.tabs-left {width: 120px; padding:0; margin:0; float:left;}
.tabs-left li {line-height: 30px; display:block; list-style:none; background: var(--field-border);border: 1px solid var(--field-border); margin-bottom:10px; border-right:0;}
.tabs-left li.current {position: relative;background-color: var(--field-bg);border-bottom: 1px solid var(--field-border);z-index: 5;}
.tabs-left li a {padding:0 10px;text-transform: uppercase;color: #fff;text-decoration: none; display:block; }
.tabs-left .current a {color: var(--link);}
.tab-loop {border: 1px solid var(--field-border);background-color: var(--field-bg);float: left;margin-bottom: 20px;width: auto; margin-left:-1px;}
.tabsleft-content {max-width: 660px;padding: 20px;display: none;}
#tabs1 {display: block;   }

/* tom select css */
.form-group .ts-wrapper.form-control {
    padding: 0 !important;
    border-radius: var(--r-md);
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
/* 2. Focused Input State (Matches modern layout borders) */
.form-group .ts-wrapper.form-control.focus {
    border-color: var(--accent);
}
/* 3. Text Blinker Input Control Styling */
.form-group .ts-wrapper .ts-control {
    padding: 6px 14px !important;
    min-height: 54px !important;
    display: flex;
    align-items: center;
    border-radius: 0 30px;
    background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
    border: 1px solid transparent;
}
.form-group .ts-control, .form-group .ts-wrapper.single.input-active .ts-control {
    background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
    cursor: text;
}
/* 4. Placeholder Typography Color */
.form-group .ts-wrapper .ts-control input::placeholder {
    color: var(--faint) !important;
    opacity: 1;
}
/* 5. Clear Button ("X") Absolute Positioning */
.form-group .ts-wrapper .clear-button {
    right: 10px !important; /* Moves it completely clear of the dropdown arrow */;
    background: none !important;
    opacity: 0.4;
}
/* 6. The Result Dropdown Wrapper Layer */
.form-group .ts-dropdown {
    background: linear-gradient(var(--field-bg), var(--field-bg)) padding-box, var(--grad) border-box !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 36px -10px rgba(120, 80, 95, .34) !important;
    /* max-height: min(56vh, 340px) !important; */
    overflow-y: auto;
    height: 160px;
}
.form-group .ts-dropdown-content {
    display: flex;
    align-items: baseline;
    cursor: pointer;
    flex-direction: column;
    max-height: unset;
}
.form-group .ts-dropdown-content .option {
    border-bottom: 1px solid var(--gold);
    width: 100%;
    padding: 9px 13px !important;
    background: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ink);
}
.form-group .ts-dropdown-content .option span.cbx-opt-sub {
    text-transform: uppercase;
    font-size: 8px;
    background-color: var(--gold);
    color: var(--on-gold);
    padding: 1px 5px;
    border-radius: 0 10px;
}

.form-group .ts-dropdown-content .option:hover{
    background-color: var(--card) !important;
}
/* 7. Hovering Active Rows inside the Result List */
.form-group .ts-dropdown .active {
    background-color: var(--card) !important;
    color: var(--ink) !important;
}
.form-group .ts-wrapper .clear-button {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    opacity: 0;
    cursor: pointer;
    font-size: 16px !important;
}
.form-group .ts-wrapper .clear-button:hover {
    opacity: 1;
    color: var(--danger) !important; /* Turns red on hover indicator */
}
.search-icon-field.form-group{
    position: relative;
}
/* .search-icon-field.form-group .ts-wrapper.form-control{
    border-radius: 45px;
} */
.search-icon-field.form-group .ts-wrapper .ts-control{
    padding-right: 52px !important;
}
.search-icon-field.form-group svg {
    flex: none;
    color: var(--gold-ink);
    position: absolute;
    top: 50%;
    right: 27px;
    z-index: 999;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
}
/* table css */
table.cmp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 60px 0;
    overflow: hidden;
}
.cmp-table thead th {
    background: var(--grad-up);
    padding: 20px 18px;
}
.cmp-table th, .cmp-table td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink);
}
.cmp-table tbody td, .cmp-table tbody th {
    border-right: 1px solid var(--line);
}
.cmp-table thead .pname {
    font-family: 'Moneta';
    font-size: 19px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--on-grad);
}
.cmp-table tbody th {
    font-size: 12px;
    text-transform: capitalize;
    color: var(--gold-ink);
    font-weight: 500;
    width: 150px;
    background: var(--card);
}
.cmp-table .cmp-sub {
    font-size: 14px;
    color: var(--muted);
    display: block;
    margin-top: 2px;
    font-weight: 300;
}
.cmp-table .cmp-note {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.45;
    display: block;
}
.cmp-table .cmp-caution {
    font-size: 14px;
    color: var(--danger);
    line-height: 1.3;
}
/* page head title */
.compare-head h2 {
    font-size: 60px;
    color: var(--ink);
    margin-bottom: 10px;
}
.compare-head p {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 300;
    color: var(--text);
}
.compare-head {
    margin-bottom: 40px;
}
/* tag */
.ing {
    display: inline-block;
    font-size: 12px;
    background: var(--gold-soft);
    color: var(--gold-ink);
    text-transform: uppercase;
    padding: 3px 10px;
    margin: 0 5px 6px 0;
    border-radius: 0 14px;
    border: 1px solid var(--line);
}
.ing.shared {
    background: var(--gold);
    color: var(--on-gold-soft);
     border-color: var(--gold);
}
.legend {
    margin: 14px 2px 0;
    color: var(--ink);
}

.legend span {
    font-weight: 300;
    font-size: 14px;
}
.empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.3;
}
.empty strong {
    font-size: 30px;
    color: var(--ink);
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}
.cmp-caution {
    font-size: 14px;
    color: var(--danger);
    line-height: 1.3;
}

header.header {
    background-color: var(--card);
    padding: 48px 0 120px;
}

header.header .container-fluid{
    padding: 0 100px;
}

header.header .main-bar {
    background: var(--bg);
    gap: 30px;
    align-items: center;
    border-radius: 50px;
}

header.header .main-bar .logo {
    width: 10%;
    height: 120px;
}

header.header .main-bar .logo img {
    width: 100%;
    height: 100%;
    border-radius: 50px 0px 0px 50px;
}

header.header .main-bar .search {
    position: relative;
    width: 35%;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--chip-bg), var(--chip-bg)) padding-box,
        var(--grad) border-box;
    border-bottom-left-radius: 42px;
    border-top-right-radius: 42px;
    height: 60px;
    background-color: var(--chip-bg);
}

header.header .main-bar .search .searchtoggle {
    position: absolute;
    right: 30px;
    top: 21px;
    z-index: 9;
}
.searchtoggle i {
    font-size: 20px;
    background-image: var(--grad-up);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
header.header .main-bar .search .searchpanel {
    height: 100%;
    position: relative;
}

header.header .main-bar .search .searchpanel form{height: 100%;}

header.header .main-bar .search .searchpanel form input {
    border: 0;
    height: 100%;
    border-bottom-left-radius: 42px;
    border-top-right-radius: 42px;
    width: 100%;
    padding: 0 0 0 30px;
    background-color: var(--chip-bg);
}

header.header .main-bar .search .searchpanel form input[type="submit"] {
    opacity: 0;
    width: auto;
    position: absolute;
    right: 0;
    z-index: 99;
}

header.header .main-bar .log-in{
    border: 1px solid transparent;
    background:
        linear-gradient(var(--chip-bg), var(--chip-bg)) padding-box,
        var(--grad) border-box;
    border-bottom-left-radius: 42px;
    border-top-right-radius: 42px;
    width: 10%;
    height: 60px;
    background-color: var(--chip-bg);
    order: 1;
}

header.header .main-bar .log-in:hover{
    background-image: var(--grad-up);
}

header.header .main-bar .log-in a{
    color: var(--ink);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
}
header.header .main-bar .log-in a i{
    font-size: 28px;
    background-image: var(--grad-up);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
header.header .main-bar .log-in:hover a{
    color: var(--on-gold);
}
header.header .main-bar .log-in:hover a i{
    background-image: linear-gradient(var(--on-gold), var(--on-gold));
}
header.header .main-bar .log-in:hover a img{
    filter: brightness(100)
}

header.header .main-bar .user-actions {
    display: flex;
    width: 25%;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

header.header .main-bar .user-actions .jk-icon{
    width: 65px;
    height: 65px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--chip-bg), var(--chip-bg)) padding-box,
        var(--grad) border-box;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--chip-bg);
    transition: 0.5s ease-in-out all;
    position: relative;
}

header.header .main-bar .user-actions .jk-icon:hover{
    background-image: var(--grad-up);
    transition: 0.5s ease-in-out all;
}

header.header .main-bar .user-actions .jk-icon:hover a i{
    background-image: linear-gradient(var(--on-gold), var(--on-gold));
    transition: 0.5s ease-in-out all;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: 0.5s ease-in-out all;
}
header.header .main-bar .user-actions .jk-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
}
header.header .main-bar .user-actions .jk-icon a i {
    font-size: 28px;
    background-image: var(--grad-up);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: 0.5s ease-in-out all;
}
header.header .main-bar .user-actions .jk-icon a span {
    position: absolute;
    top: -2px;
    right: 4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-up);
    color: var(--on-gold);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}
header.header .main-bar .user-actions .jk-icon:hover span {
    background: var(--gold);
}
header.header .main-bar .language {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--chip-bg), var(--chip-bg)) padding-box,
        var(--grad) border-box;
    border-bottom-left-radius: 42px;
    border-top-right-radius: 42px;
    width: 10%;
    height: 60px;
    background-color: var(--chip-bg);
}

header.header .main-bar .language:hover{
    background-image: var(--grad-up);
}

header.header .main-bar .language a {
    color: var(--ink);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

header.header .main-bar .language:hover a{
    color: var(--on-gold);
}

header.header .main-bar .language a i{
    font-size: 28px;
    background-image: var(--grad-up);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

header.header .main-bar .language:hover a i{
    background-image: linear-gradient(var(--on-gold), var(--on-gold));
}

.nav-wrapper {
    text-align: center;
    padding-top: 110px;
}

.nav-wrapper h2 {
    margin-bottom: 62px;
    font-family: 'Moneta';
    font-size: 60px;
    font-weight: 500;
    line-height: 113px;
    color: var(--ink);
    text-transform: capitalize;
}

.nav-wrapper ul.nav-list {
    row-gap: 24px;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    flex-flow: wrap;
    column-gap: 11px;
}

.nav-wrapper ul.nav-list li.items {}

.nav-wrapper ul.nav-list li.items a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    padding: 0 70px;
}


/*Home Page */
 body.home-page {
  background-color: var(--card);
}
.home-page .header{
    position: absolute;
    width: 85%;
    z-index: 9;
    padding: 0;
    top: 30px;
    background: no-repeat;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.home-page .nav-wrapper {
    display: none;
}

/* ===== HERO ===== */
.hero{
  position: relative;
  padding-top: 0;
  height: 140vh;
  display: flex;
  align-items: center;
}
.hero-inner{
  position:relative;
  z-index:2;
  width: 650px;
  text-align: center;
  padding: 80px 0 0;
}
.hero h1{
  color: var(--ink);
  font-weight:600;
  font-size: 120px;
  line-height: 1;
  margin-bottom:26px;
}
.light-primary-btn{
  background: var(--grad);
  color: var(--on-grad);
  border-radius: 30px 0;
  padding: 0 40px;
  font-size: 20px;
  font-weight: 500;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}

.btn-gold-pill:hover{ color:var(--black); filter:brightness(1.05); }
.hero-product-img{
  position:absolute;
  left: 54%;
  bottom: -90px;
  width: auto;
  z-index:3;
  transform: translateX(-50%);
}
.hero-product-img img{
  width:100%;
}
 
/* ===== DISCOVER SECTION ===== */

.discover-sec .nav-wrapper {
    display: block;
}
.discover-sec{
  padding:70px 0 90px;
  text-align:center;
}
 
/* ===== OUR PRODUCTS — Masonry-style layout ===== */
.products-sec{
  padding: 80px 0;
  background: var(--bg);
}
.masonry-col{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.prod-tile{
  border-radius:4px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.prod-tile.left-tile1{
  height: 660px;
}
.prod-tile.left-tile2{
  height: 660px;
}
.prod-tile.right-tile1{
  height: 913px;
}
.prod-tile img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.our-products-banner{
  height: 320px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image: var(--grad-up);
}
.our-products-banner h2{
  color: var(--on-grad);
  font-weight: 600;
  font-size: 70px;
  margin:0;
}
 
/* ===== ALOE BHA SECTION ===== */
.aloe-sec{
  position: relative;
  color: #fff;
  padding: 80px 0 0;
}
.aloe-wrapper{
  display: flex;
  align-items: flex-start;
}
.aloe-content{
  position:relative;
  z-index:2;
  text-align: center;
  padding-top: 40px;
}
.aloe-badge{
  display:inline-block;
  color: var(--on-grad);
  border-radius: 60px 0;
  padding: 14px 44px;
  font-weight: 600;
  font-size: 90px;
  letter-spacing:1px;
  background-image: var(--grad-up);
  font-family: 'Moneta';
  line-height: 1;
}
.aloe-sec h2{
  color:#fff;
  font-weight:600;
  font-size: 146px;
  line-height: 1;
  margin: 10px 0 20px;
}
.btn-white-pill{
  background:var(--field-bg);
  color: var(--gold-ink);
  padding: 0 54px;
  font-size: 20px;
  letter-spacing:1px;
  display: flex;
  border-radius: 32px 0;
  height: 66px;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}
.btn-white-pill:hover{ 
  color:var(--black); 
  filter:brightness(.97); 
}
.aloe-img-wrap{
  margin-bottom: -121px;
}
.aloe-img-wrap img{
  width:100%;
  display:block;
}
.aloe-flot-img {
  position: absolute;
  bottom: -200px;
  right: 200px;
}
 
/* ===== KEEP IN TOUCH ===== */
.keep-touch{
  padding: 130px 0 120px;
  text-align:center;
}
.keep-touch h2{
  color: var(--ink);
  font-weight: 500;
  font-size: 60px;
  margin-bottom: 10px;
}
.keep-touch .kt-sub{
  font-size: 14px;
  color: var(--muted);
  margin-bottom:30px;
  font-weight: 300;
}
.kt-form{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  padding: 0 100px;
}
.kt-form .form-control{
  flex:1;
  min-width: 300px;
  padding:14px 18px;
  font-size: 14px;
  outline:none;
  border-radius: 0 35px;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  border: 1px solid transparent;
}
.kt-form button{
  border: navajowhite;
  border-radius: 0 25px;
  adding: 0 50px;}
 
/* ===== GET SOCIAL ===== */
.social-sec{
  padding: 0;
  background-color: var(--bg);
}
.social-sec h2{
  color: var(--ink);
  font-weight:600;
  font-size: 60px;
  margin-bottom: 10px;
  line-height: 1.1;
}
.social-sec p{
  font-size: 14px;
  color: var(--muted);
  font-weight: 300;
}
.social-img-wrap{
  position:relative;
}
.social-img-wrap img{
  width:100%;
  height: auto;
  object-fit: scale-down;
  display:block;
}
.ig-badge{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width: 185px;
  height: 185px;
  border-radius:50%;
  background:var(--field-bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:5;
  color:var(--text);
  box-shadow: 18px 31.177px 76px 0px rgba(0, 0, 0, 0.52);
}
.ig-badge i{
  font-size: 50px;
  margin-bottom:6px;
  color: #ff69b3;
}
.ig-badge span{
  font-size: 14px;
  font-weight: 300;
  color: var(--text);
}


/*Product Page */
.products-listing {
    padding: 110px 0 150px;
    background: var(--bg);
}

.products-listing .head {
    text-align: center;
    margin-bottom: 45px;
}

.products-listing .head h2 {
    margin: 0;
    font-family: 'Moneta';
    font-size: 60px;
    font-weight: 500;
    color: var(--ink);
}

.products-listing .article {
    border: 2px solid var(--card);
    border-radius: 20px;
    padding: 20px;
    position: relative;
}

.products-listing .article .initiate-bar {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0 35px;
    top: 40px;
}

.products-listing .article .initiate-bar .quality-yag {}

.products-listing .article .initiate-bar .quality-yag span {
    background-color: var(--gold);
    color: var(--on-gold-soft);
    text-transform: uppercase;
    font-weight: 300;
    font-size: 13px;
    line-height: 27px;
    border-radius: 0px 15px;
    padding: 3px 15px;
}

.products-listing .article .initiate-bar .prod-func {
    display: flex;
    align-items: center;
    gap: 5px;
}

.products-listing .article .initiate-bar .prod-func a {
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--chip-bg), var(--chip-bg)) padding-box,
        var(--grad) border-box;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--chip-bg);
    text-decoration: none;
}

.products-listing .article .initiate-bar .prod-func a i {
    background-image: var(--grad-up);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.products-listing .article a.pic {
    display: flex;
    background-color: var(--photo-bg);
    justify-content: center;
    height: 365px;
    border-radius: 20px;
    align-items: center;
}

.products-listing .article a.pic img {
}

.products-listing .article .details{
    margin-top: 30px;
    text-align: center;
}

.products-listing .article .details .brandline {
    color: var(--faint);
    font-size: 14px;
    line-height: 27px;
}

.products-listing .article .details a.title {
    text-decoration: none;
    color: var(--ink);
    text-transform: capitalize;
}

.products-listing .article .details a h4 {
    margin: 0 0 18px;
    font-family: 'Moneta';
    font-size: 27px;
    color: var(--ink);
}

.products-listing .article .details .metaline{
    font-size: 13px;
    line-height: 27px; 
    font-weight: 300;
    color: var(--muted);
}

.products-listing .article .details .metaline span {
    background-color: var(--gold-soft);
    color: var(--gold-ink);
    text-transform: uppercase;
    font-weight: 300;
    font-size: 13px;
    line-height: 27px;
    border-radius: 0px 15px;
    padding: 3px 15px;
    margin-right: 10px;
}

.products-listing .article .details .priceline{
    padding: 20px 0 30px;
}

.products-listing .article .details .priceline span.stars {
    font-size: 14px;
    color: var(--muted);
    line-height: 27px;
    font-weight: 300;
}

.products-listing .article .details p {
    color: var(--gold-ink);
    font-weight: 500;
    font-size: 17px;
    line-height: 27px;
    margin: 0;
}

.products-listing .article .details .tagrow {
    padding: 20px 0 34px;
}

.products-listing .article .details .tagrow span.tag {
    background-color: var(--gold-soft);
    color: var(--gold-ink);
    text-transform: uppercase;
    font-weight: 300;
    font-size: 13px;
    line-height: 27px;
    border-radius: 0px 15px;
    padding: 3px 15px;
}

.products-listing .article .details .tagrow span.tag.dark{
    background-color: var(--gold);
    color: var(--on-gold-soft);
    margin-right: 10px;
}

.products-listing .article .details a {
    color: var(--gold-ink);
    text-transform: uppercase;
}

footer{
    background-color: var(--card);
    padding: 93px 0 0;
}

.footer-wrapper h3{
    font-family: 'Moneta';
    font-size: 36px;
    color: var(--ink);
    text-transform: capitalize;
    margin-bottom: 38px;
}

.footer-wrapper p{
    color: var(--muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 26px;
    letter-spacing: 1px;
}

.quick ul{
    padding: 0;
    list-style: none;
    margin: 0;
}

.quick ul li{

}

.quick ul li a{
    color: var(--muted);
    font-size: 15px;
    line-height: 31px;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
}

.cont-info .reachout {
    margin-bottom: 15px;
}

.cont-info .reachout i{
    background-image: var(--grad-up);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-right: 10px;
}

.cont-info .reachout a {
    text-decoration: none;
    color: var(--faint);
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 30px;
}

.cop{
    background-image: var(--grad-up);
    margin-top: 75px !important;
    padding: 15px 0;
    text-align: center;
}

.cop p{
    color: var(--on-grad);
    margin: 0;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.6px;
}
/* compare product page */
.compare-products {
    padding: 80px 0;
    background-color: var(--bg);
}
/* product detail page */
.product-detail {
    padding: 80px 0;
}
.product-gallery{
    text-align: center;
    font-size: 18px;
    background-color: var(--photo-bg);
    align-items: center;
    display: flex;
    justify-content: center;
}
.product-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-gallery {
    height: 800px;
    width: 100%;
}
.product-gallery {
    border-radius: 0 100px;
}
.product-gallery img {
    display: block;
    width: 100%;
    height: 80%;
    object-fit: contain;
}
.detail-inner h2 {
    font-weight: 700;
    font-size: 36px;
    margin: 3px 0 14px;
    line-height: 1;
    color: var(--text);
}
.detail-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--muted);
}
.concern-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--spine, var(--accent)) 14%, var(--on-accent));
        color: color-mix(in srgb, var(--spine, var(--accent)) 65%, var(--ink));
}
.stars {
    font-size: 13.5px;
    color: var(--ink);
}
.stars::before {
    content: "★ ";
    color: var(--ink);
}
.detail-desc {
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
    margin: 12px 0 10px;
}
.brand-note {
    font-size: 16px;
    color: var(--text);
    line-height: 1.5;
    margin: 20px 0 10px;
}
.brand-note b {
    color: var(--gold-ink);
}
.detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0 22px;
}
.detail-actions button {
    border-radius: var(--r-pill);
    padding: 11px 20px;
    font-weight: 600;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s;
}
.d-cmp, .d-fav {
    background: linear-gradient(var(--field-bg), var(--field-bg)) padding-box, var(--grad) border-box;
    border: 1px solid transparent;
    color: var(--ink);
}
.detail-actions button {
    border-radius: 0 25px;
    padding: 11px 22px;
    font-weight: 500;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s;
}
.detail-section {
    margin-top: 30px;
}
.detail-section h3 {
    font-family: 'Moneta';
    font-size: 36px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 18px;
    line-height: 1.2;
}
.modal h3 {
    font-family: var(--font-display);
    font-size: 22px;
}
.buy-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 460px;
}
.buy-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
    border: 1px solid transparent;
    border-radius: 0 40px;
    padding: 16px 20px;
    background: linear-gradient(var(--field-bg), var(--field-bg)) padding-box, var(--grad) border-box;
    font-weight: 500;
    font-size: 16px;
    transition: .3s ease;
    text-align: left;
    flex-direction: column;
}
.buy-link .rl-note {transition: .3s ease;}
.detail-section p {
    font-size: 15px;
    color: var(--text);
    line-height: 1.5;
    font-weight: 300;
}
.affiliate-note {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 30px;
}
.use-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.use-cell {
    border-radius: 0 22px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}
.use-k {
    display: block;
    font-size: 9.5px;
    color: var(--muted);
    letter-spacing: .06em;
    margin-bottom: 3px;
}
.use-v {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.use-sub {
    font-weight: 400;
    font-size: 11.5px;
    color: var(--faint);
}
.ing-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 8px;
}
.ing-row {
    border-left: 3px solid var(--spine, var(--accent));
}
.ing-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}
.ing-name {
    font-family: 'Moneta';
    font-weight: 700;
    font-size: 30px;
    color: var(--text);
    padding-right: 15px;
}
.ing-fam {
    font-size: 14px;
    color: var(--faint);
    text-transform: uppercase;
    font-weight: 300;
}
.ing-inci {
    font-size: 11.5px;
    color: var(--faint);
    margin-top: 1px;
}
.ing-does {
    font-size: 15px;
    color: var(--text);
    line-height: 1.5;
    margin-top: 14px;
    font-weight: 300;
}
.ing-note {
    font-size: 15px;
    color: var(--danger);
    margin-top: 12px;
    font-weight: 300;
}
.inci-missing {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 0;
    line-height: 1.5;
}
.ing-link {
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    text-align: left;
}
.detail-brand {
    font-size: 14px;
    font-weight: 300;
    color: var(--faint);
}
.buy-link:hover {
    background: var(--grad-up);
    border-color: transparent;
    color: var(--on-gold);
}
.buy-link span {
    transition: .3s ease;
}
.ing-note.ing-link {
    color: var(--danger);
}
.ing-note.link-btn {
    text-decoration: underline !important;
}
.inci-missing .ing-link {
    display: block;
    font-weight: 300;
    font-size: 15px;
    color: var(--danger);
    text-decoration: underline !important;
    margin-top: 2px;
}
.detail-section.ing-list-wrapper h3 {
    color: var(--gold-ink);
    text-transform: uppercase;
}
.ing-fam.ing-innci {
    position: relative;
    padding-left: 2px;
}
.ing-fam.ing-innci::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 84%;
    top: 2px;
    left: -4px;
    background-color: var(--faint);
}
.detail-section.ds-best h3 {
    margin-bottom: 10px;
}
.detail-inner {
    padding-left: 20px;
}
/* pairs well sec */
.pairs-well-sec.products-listing {
    padding: 0 0 80px;
}
/* review sec  */
.review-sec{
    padding: 0 0 80px;
}
.review-sec .head {
    text-align: center;
    margin-bottom: 45px;
}
.review-sec .head h2 {
    margin: 0;
    font-family: 'Moneta';
    font-size: 60px;
    font-weight: 500;
    color: var(--ink);
}
.review-list {
    width: 80%;
    margin: 0 auto;
    position: relative;
}
.review-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 25px 30px;
    background: var(--chip-bg);
    border-radius: 0 50px;
    position: relative;
}
.review-img {
    width: 70px;
    height: 70px;
}
.review-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.review-content {
    flex: 1;
    min-width: 0;
}
.review-top {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.review-content h5 {
    margin: 0;
    font-size: 23px;
    font-weight: 400;
    color: var(--text);
}
.review-content span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--gold-ink);
}
.review-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--faint);
}
.review-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 7px;
}
.review-rating i {
    font-size: 8px;
    color: var(--star);
}
.rev-prev,
.rev-next {
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    color: var(--gold-ink);
}
.rev-prev i,
.rev-next i {
    font-size: 44px;
}
.rev-prev {
    left: -65px;
}
.rev-next {
    right: -65px;
}
.rev-prev.swiper-button-disabled, .rev-next.swiper-button-disabled {
    opacity: .5;
}
/* compare skin page */
.cinfo {
    background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box;
    background-color: var(--card);
    border: 1px solid transparent;
    border-radius: 50px 0;
    padding: 34px;
    position: relative;
    overflow: hidden;
}
.cinfo-tag {
    font-size: 32px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    font-family: 'Moneta';
}
.cinfo-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.cinfo-what {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 300;
    color: var(--text);
}
.cinfo-cols h4 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--ink);
}
.cinfo-cols ul {
    padding: 0;
    margin: 0 0 25px;
    list-style: none;
}
.cinfo-cols ul li {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
    color: var(--ink);
}
.cinfo-cols ul li::before {
    content: '';
    position: absolute;
    background-image: var(--grad-up);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    top: 6px;
    left: 0;
}
.cinfo-tip {
    margin: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--gold);
    padding: 20px;
    color: var(--on-gold);
    font-size: 14px;
    font-weight: 300;
}
.cinfo-cols {
    margin-bottom: 50px;
}
.cinfo-tip b {
    color: var(--on-gold-soft);
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 400;
}
.compare-skin {
    padding: 80px 0;
}
.compare-skin .form-group.search-icon-field {
    margin-bottom: 35px;
}
.count {
    font-size: 20px;
    font-weight: 300;
    color: var(--ink);
    margin: 40px 0;
    text-align: center;
}
.compare-skin .products-listing {
    padding: 0;
}

/* Active Ingredients Page */
.ing-result {
    margin-bottom: 40px;
}

.ing-result .verdict.ok {
    padding: 42px 70px;
    border-radius: 100px 0px;
    background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box;
    border: 1px solid transparent;
}

.ing-result .verdict.ok h3 {
    margin: 0 0 20px;
    font-size: 32px;
    color: var(--ink);
    font-family: Moneta;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ing-result .verdict.ok p {
    margin: 0;
    color: var(--text);
    font-size: 20px;
    line-height: 31px;
}

.ing-result .verdict.ok h3 span.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
}

.ing-result table.cmp-table{
    border-radius: 100px 0 100px 0px;
}

.ing-result .cmp-table thead th {
    padding: 42px 0px 42px 0px !important;
}

.ing-result .cmp-table thead th:first-child{
    padding-left: 47px !important;
    width: 32%;
}

.ing-result .cmp-table thead th .brandline.mono {
    font-size: 14px;
    font-weight: 300;
    color: var(--on-grad);
}

.ing-result .cmp-table thead th .pname {
    font-size: 22px;
    font-weight: 600;
}

.ing-result .cmp-table tbody td{
    padding: 26px 0px 40px;
    border: 0;
}

.ing-result .cmp-table tbody td:first-child{
    padding-left: 47px !important;
}

.ing-result .cmp-table tbody td span.ing{
    margin-bottom: 12px;
}

.rulebook {
    margin-top: 75px;
}

.rulebook h2.big {
    font-size: 42px;
    color: var(--ink);
    margin-bottom: 26px;
}

.rulebook .act-letter {
    color: var(--on-gold);
    font-size: 38px;
    background: var(--gold);
    width: 57px;
    height: 57px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Moneta', serif;
    margin-bottom: 60px;
}

.rulebook .act-row {
    padding: 0px 0;
    display: flex;
    align-items: center;
    flex-flow: wrap;
    justify-content: space-between;
    margin-bottom: 15px;
}

.rulebook .act-row:last-child{
    margin-bottom: 35px;
}

.rulebook .act-row .aname {
    flex: 0 0 20%;
    font-size: 22px;
    color: var(--ink);
    line-height: 25px;
    font-family: 'Moneta', serif;
    border-right: 1px solid var(--field-border);
    padding: 16px 10px 16px 0;
}

.rulebook .act-row .aname span.mono {
    width: 100%;
    font-family: 'Poppins';
    font-size: 12px;
    line-height: 25px;
    display: block;
    text-transform: uppercase;
}

.rulebook .act-row .aname span.act-def {
    font-family: 'Poppins';
    font-size: 12px;
    line-height: 18px;
    display: block;
    margin-top: 15px;
}

.rulebook .act-row .aname span.act-inci{
    font-size: 10px;
    text-transform: lowercase;
    font-family: 'Moneta', serif;
}

.rulebook .act-row .act-prods {
    flex: 0 0 78%;
}

.rulebook .act-row .act-prods .act-chip {
    display: inline-block;
    font-size: 12px;
    background: var(--gold-soft);
    color: var(--gold-ink);
    padding: 3px 10px;
    border-radius: 0 14px;
    text-transform: uppercase;
    margin-bottom: 12px;
    border: 0;
}

/* CART */
/* drawer css */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(500px, 92vw);
    background: var(--field-bg);
    border-left: transparent;
    box-shadow: -18px 0 50px -12px rgba(60, 30, 20, .25);
    z-index: 70;
    padding: 22px;
    overflow: auto;
    animation: slidein .2s ease;
}
@keyframes slidein {
  from {
    transform: translateX(30px);
    opacity: 0
  }

  to {
    transform: none;
    opacity: 1
  }
}
.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Moneta';
    font-size: 24px;
    margin-bottom: 26px;
    letter-spacing: 1px;
}
.pop-link {
    font-weight: 600;
    font-size: 12px;
    background: var(--gold-soft);
    color: var(--gold-ink);
    text-transform: uppercase;
    padding: 3px 10px;
    margin: 0 5px 6px 0;
    border-radius: 0 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.buy-item {
    padding: 20px 15px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 0 40px;
    background: linear-gradient(var(--chip-bg), var(--chip-bg)) padding-box, var(--grad) border-box;
}
.buy-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--spine, var(--accent));
}
.buy-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 11px;
    padding-left: 6px;
}
.buy-head .br {
     font-size: 11px;
    text-transform: uppercase;
    color: var(--faint);
    letter-spacing: normal;
    line-height: 1;
}
.buy-head .nm {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    font-family: 'Moneta';
    color: var(--ink);
}
.buy-ref {
    font-size: 11px;
    color: var(--faint);
    margin-top: 10px;
}
.buy-x {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: var(--on-gold);
    font-size: 17px;
    line-height: 1;
    flex: none;
}
.buy-x:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.buy-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-left: 6px;
    width: 100%;
}
.buy-link {
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    gap: 0;
    padding: 15px 20px;
    font-weight: 600;
    font-size: 13px;
    transition: all .15s;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 40px 0;
    background: linear-gradient(var(--chip-bg), var(--chip-bg)) padding-box, var(--grad) border-box;
}
.buy-link:hover {
    border-color: var(--line);
    color: var(--on-gold);
}
 .buy-link .rl-note {
    font-size: 10px;
    font-weight: 400;
    color: var(--faint);
}
.buy-link:hover .rl-note {
    color: var(--accent);
}
.buy-link span {
    transition: .3s ease;
    color: var(--gold-ink);
}
.buy-link:hover span {
    color: var(--on-gold);
}
.drawer-foot .affiliate-note {
    margin-top: 0;
}
.drawer-foot {
    border-top: none;
    margin-top: 30px;
    font-size: 14px;
    color: var(--faint);
}
/* drawer css end */
/* fav drwaer css*/
.cart-item {
    display: grid;
    grid-template-columns: 6px 1fr auto;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    align-items: center;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
    border-radius: 0 40px;
    background: linear-gradient(var(--chip-bg), var(--chip-bg)) padding-box, var(--grad) border-box;
}

.cart-item .nm {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    font-family: 'Moneta';
    color: var(--ink);
}

.cart-item .br {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--faint);
    letter-spacing: normal;
}
.fav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.cart-item .qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px
}

.cart-item .qty button {
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px
}

.cart-item .qty button:hover {
    border-color: var(--accent);
    color: var(--accent)
}
/* END CART */

/* Routine */
.age-options {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.age-option {
    margin: 0 8px 0 0;
    cursor: pointer;
}
.age-option input {
    display: none;
}
.age-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 64px;
    border: 1px solid transparent;
    border-radius: 0 40px;
    padding: 10px 24px;
    font-size: 16px;
    color: var(--gold-ink);
    transition: all .15s;
    background: linear-gradient(var(--chip-bg), var(--chip-bg)) padding-box, var(--grad) border-box;
}
.age-option input:checked + span {
    background-image: var(--grad-up);
    color: var(--on-grad);
    border-color: var(--line);
}
.age-option:hover span {
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}
.time-option-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}
.time-options {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 0 40px;
    padding: 12px;
    background: linear-gradient(var(--chip-bg), var(--chip-bg)) padding-box, var(--grad) border-box;
}
.time-option {
    margin: 0;
    cursor: pointer;
}
.time-option input {
    display: none;
}
.time-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    color: var(--gold-ink);
    white-space: nowrap;
    transition: all 0.2s ease;
    border-radius: var(--r-pill);
    padding: 9px 20px;
    font-weight: 300;
    font-size: 15px;
    line-height: 1;
    gap: 4px;
}
.time-option input:checked + span {
    background-color: var(--gold);
    border-radius: 0 24px;
    color: var(--on-gold-soft);
}
.shop-routine {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--gold);
    color: var(--on-dark);
    border: 1px solid rgba(199, 205, 216, .55);
    border-radius: 35px 0;
    padding: 11px 40px;
    font-weight: 300;
    font-size: 20px;
    box-shadow: 0 6px 18px -6px rgba(78, 72, 82, .5);
    transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.shop-routine:hover {
    background: linear-gradient(140deg, var(--gold-bright), var(--gold));
    color: var(--on-grad);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -6px rgba(152, 160, 174, .55);
}
.rintro {
    margin: 50px 0;
    padding: 42px 70px;
    border-radius: 100px 0px;
    background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box;
    border: 1px solid transparent;
}
.rintro h3 {
    font-family: 'Moneta';
    font-size: 32px;
    margin-bottom: 6px;
    color: var(--ink);
}
.rintro p {
    font-size: 14px;
    color: var(--muted);
    max-width: 100%;
}
.rstep {
    margin-bottom: 44px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px;
    background: none;
    border: navajowhite;
    border-radius: unset;
    padding: 0;
}
.rstep .num {
    font-size: 22px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.3;
}
.rstep h4 {
    font-size: 24px;
    margin-bottom: 3px;
    display: inline;
    color: var(--ink);
    font-family: 'Poppins';
}
.rstep p {
    font-size: 17px;
    color: var(--muted);
    margin: 10px 0 8px;
    font-weight: 300;
}
.rstep .picks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.derm-disclaimer {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--faint);
    font-style: italic;
}

/* End Routine */

/* tray */
.tray {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%) translateY(120%);
    background: var(--black-2);
    border: 1px solid rgba(199, 205, 216, .6);
    color: var(--on-dark);
    border-radius: var(--r-pill);
    padding: 10px 12px 10px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 14px 40px -8px rgba(30, 15, 10, .45);
    transition: transform .25s;
    z-index: 40;
    max-width: 92vw;
    border-radius:10px;
}

.tray.show {
    transform: translateX(-50%) translateY(0);
}

.toast {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    background: var(--black);
    border: 1px solid rgba(199, 205, 216, .55);
    color: var(--on-dark);
    border-radius: var(--r-pill);
    padding: 11px 22px;
    font-size: 13.5px;
    font-weight: 600;
    transition: transform .25s;
    z-index: 50;
}
/* End tray */
.compare-active {
    padding: 80px 0;
    background: var(--bg);
}
.vs {
    color: var(--gold-ink);
    font-size: 15px;
    font-style: italic;
}
.compare-concern {
    padding: 80px 0;
    background: var(--bg);
}
.desired-effect-sec{
    padding-bottom: 90px;
}
.desired-effect .search-icon-field{
    max-width: 520px;
    margin-bottom: 22px;
}
.desired-effect-sec {
    padding: 80px 0;
    background: var(--bg);
}
.desired-effect-sec .products-listing {
    padding: 30px 0 0;
}
.desired-effect-sec .toolbar .count {
    margin: 70px 0 0;
    font-weight: 600;
    font-size: 30px;
    color: var(--gold-ink);
    font-family: 'Moneta';
}
.ingre-inter-sec {
    padding: 80px 0;
    background-color: var(--bg);
}
.count {
    font-size: 20px;
    color: var(--gold-ink);
    margin: 40px 0;
    text-align: center;
    font-family: 'Moneta';
}
.ingredient-interaction .ing-result {
    margin-top: 10px;
}
.rules-wrapper .big {
    font-size: 42px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.rule .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
}

.rule {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 12px;
    padding: 14px 0;
    align-items: start;
};

.rule b{
    font-size: 22px;
}
.rule p{
    font-size: 15px;
    color: var(--muted);
    margin: 0;
}
.skin-routine-sec {
    padding: 80px 0;
    background: var(--bg);
}
.skin-routine-tab .nav.nav-pills {
    display: inline-flex;
    gap: 2px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 3px;
    margin-bottom: 14px;
    align-items: center;
}

.skin-routine-tab .nav-link {
    padding: 10px 22px;
    border: none;
    background: none;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1.1;
}

.skin-routine-tab .nav-pills .nav-link.active, .skin-routine-tab .nav-pills .show>.nav-link {
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow);
}
.build-body-head {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 35px;
}
.act-chip {
    font-size: 15px;
    padding: 10px 24px;
    transition: all .15s;
    border: 1px solid transparent;
    border-radius: 0 28px;
    background: linear-gradient(var(--field-bg), var(--field-bg)) padding-box, var(--grad) border-box;
    font-weight: 300;
    color: var(--gold-ink);
}
.derm-disclaimer {
    margin-top: 10px;
    font-size: 17px;
    color: var(--gold-ink);
    font-weight: 300;
}
.act-chip {
    font-size: 15px;
    padding: 10px 24px;
    transition: all .15s;
    border: 1px solid transparent;
    border-radius: 0 28px;
    background: linear-gradient(var(--field-bg), var(--field-bg)) padding-box, var(--grad) border-box;
    font-weight: 300;
    color: var(--gold-ink);
}

/*review page*/

.review-sec {
    padding: 50px 100px 50px;
}
.review-form {
    background: var(--chip-bg);
    padding: 50px 35px 80px;
    border-radius: 0 100px 0;
}
.review-form h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
}
.review-field {
    margin-bottom: 30px;
}
.review-field label, .review-form .form-group label {
    display: block;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.4px;
    color: var(--faint);
    margin-bottom: 4px;
}
.review-form .review-field .form-control {
    padding: 6px 14px !important;
    min-height: 54px !important;
    display: flex;
    align-items: center;
    border-radius: 0 30px;
    background: linear-gradient(var(--field-bg), var(--field-bg)) padding-box, var(--grad) border-box;
    border: 1px solid transparent;
}
.review-form .form-control::placeholder {
    color: var(--faint);
    opacity: 1;
}

.review-form .form-control:focus,
.review-form .form-select:focus {
    border-color: var(--gold-bright);
    box-shadow: none;
}
.rating-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}
.rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}
.review-field.rating-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}
.review-field.rating-field label {
    margin: 0;
}
.rating-stars input {
    display: none;
}
.rating-stars label {
    cursor: pointer;
    font-size: 14px;
    color: var(--field-border);
    transition: 0.2s ease;
}
.rating-stars input:checked + label {
    color: var(--star);
}
.rating-stars label.hovered {
    color: var(--star);
}
.rating-number {
    font-size: 14px;
    color: var(--muted);
    margin-left: 2px;
}
.review-form textarea.form-control {
    height: 190px !important;
    resize: none;
    padding: 9px 10px;
    border-radius: 0 0 12px 12px;
    line-height: 1.4;
}
.review-note {
    font-size: 14px;
    line-height: 1.3;
    color: var(--gold-ink);
    margin: 15px 0 0;
}
.review-form button.dark-primary-btn {
    border: none;
    width: 100%;
    height: 66px;
    border-radius: 0 40px;
}
.review-sec .review-list {
    width: 100%;
    max-height: 782px;
    overflow-y: auto;
    padding-right: 12px;
}
.review-sec .review-item {
    margin-bottom: 30px;
}
.compare-concern .products-listing {
    padding: 0;
}
/*popover css*/
.pop {
    max-height: min(480px, 70vh);
    overflow: auto;
    position: fixed;
    top: 148px;
    right: max(24px, calc((100vw - 1180px)/2 + -100px));
    width: 330px;
    background: linear-gradient(var(--field-bg), var(--field-bg)) padding-box, var(--grad) border-box;
    border: 1px solid var(--line);
    border-radius: 0 25px;
    box-shadow: 0 18px 50px -12px rgba(60, 30, 20, .3);
    z-index: 60;
    padding: 10px;
    animation: popin .16s ease;
}
@keyframes popin {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
.pop-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
    font-size: 18px;
    font-family: 'Moneta';
    padding-top: 0;
    color: var(--ink);
}
.pop-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
}
.pop-link:hover {
    text-decoration: underline;
}
.notif {
    padding: 10px 12px;
    border-radius: var(--r-md);
    font-size: 13px;
}
.notif p {
    color: var(--muted);
    margin: 2px 0 4px;
}
.notif .when {
    font-size: 10.5px;
    color: var(--faint);
}
.notif.unread {
    background: var(--accent-soft);
}
.notif.unread b::after {
    content: " •";
    color: var(--accent);
}
.langopt {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    border: none;
    align-items: center;
    margin-bottom: 4px;
    background: transparent;
    color: var(--ink);
}
.langopt:hover {
    background: var(--card);
}
.langopt .mono {
    font-size: 11px;
}
.langopt.on {
    background: var(--card);
    color: var(--ink);
}
.langopt .ing {
    margin: 0;
    padding: 2px 8px;
    font-size: 11px;
}
.skiptranslate iframe{
    position:  absolute !important;
    height: 0 !important;
    width: 0 !important;
}

html.translated-ltr {
    margin-top: -40px;
}
.themeopt {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    border: navajowhite;
    margin-bottom: 5px;
}

.themeopt:hover {
  background: var(--accent-soft)
}

.themeopt.on {
  background: var(--accent-soft);
  color: var(--accent)
}

.themeopt .swatch {
  width: 34px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .1);
  flex: none
}