@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght=0,300;0,400;0,500;0,600;1,400&family=Playfair+Display:ital,wght=0,600;0,700;1,400&family=Cairo:wght=300;400;600;700&display=swap');

:root {
    --main-bg: #FCFAF6;
    --main-text: #1E1715;
    --accent-color: #8C6D53;
    --accent-light: #F3ECE6;
    --white: #ffffff;

    --font-heading: 'Playfair Display', 'Cairo', serif;
    --font-body: 'Montserrat', 'Cairo', sans-serif;
}

html,
body,
main {
      overflow-x: hidden !important;
    width: 100% !important;
    background-color: var(--main-bg) !important;
    background: var(--main-bg) !important;
    min-height: 100vh !important;
    color: var(--main-text) !important;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

.bg-white,
div.bg-white,
.bg-white.sticky,
.bg-white.w-full,
.bg-white.z-30,
.bg-white.md\:border-b,
[class*="bg-white"],
[class*="bg-[#fff]"],
[class*="bg-[#ffffff]"] {
    background-color: var(--main-bg) !important;
    background: var(--main-bg) !important;
    border-color: var(--accent-light) !important;
}

div.bg-white.sticky {
    border-bottom: 1px solid var(--accent-light) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

header,
header nav,
nav {
    background-color: var(--main-bg) !important;
    background: var(--main-bg) !important;
}

header *,
nav * {
    color: var(--main-text) !important;
}

nav a {
    color: var(--main-text) !important;
    font-family: var(--font-body);
    font-weight: 500;
    text-decoration: none !important;
    letter-spacing: 0.06em;
    transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

nav button {
    color: var(--main-text) !important;
    background: transparent !important;
    border: none !important;
    transition: transform 0.3s ease;
}

nav a:hover,
nav button:hover {
    color: var(--accent-color) !important;
}

button svg,
button svg *,
nav a svg,
nav a svg *,
.ms-auto.flex svg,
.ms-auto.flex svg * {
    stroke-width: 1.5px !important;
    transition: stroke 0.3s ease, transform 0.3s ease;
}

nav a:hover svg,
button:hover svg,
.ms-auto.flex a:hover svg {
    transform: scale(1.08);
    stroke: var(--main-text) !important;
}

div.absolute.bottom-2.right-2.flex-col button:first-of-type svg,
div.absolute.bottom-2.right-2.flex-col button:first-of-type svg path {
    stroke: var(--main-text) !important;
    fill: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-heading,
.text-heading span {
    font-family: var(--font-heading) !important;
    color: var(--main-text) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

a,
[class*="text-[#010101]"] {
    color: var(--main-text) !important;
}

.text-gray-600,
ul,
.page_content,
.mt-3.md\:mt-5 span,
[class*="text-[#61758A]"] {
    color: var(--main-text) !important;
    opacity: 0.85;
}

del {
    color: #b0a8a4 !important;
}

button.bg-gray-50.text-\[\#09090B\],
.btn-primary,
[class*="bg-skin-primary"] {
    background-color: #F5F3F1 !important;
    color: black !important;
    border-radius: 0px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

button.bg-gray-50.text-\[\#09090B\]:hover,
.btn-primary:hover {
    background-color: var(--accent-color) !important;
    color: var(--white) !important;
}

.absolute.flex.items-center.justify-center.rounded-full,
[class*="bg-red-"],
ul li span {
    background-color: var(--accent-color) !important;
    border: 1.5px solid var(--main-bg) !important;
}

.absolute.flex.items-center.justify-center.rounded-full span,
ul li span * {
    color: var(--white) !important;
    font-weight: 600 !important;
    font-size: 10px !important;
}

.custom-footer {
    background-color: var(--accent-light) !important;
    text-align: center;
    padding: 30px 16px;
    font-size: 13px;
    color: var(--main-text) !important;
    border-top: 1px solid var(--accent-light) !important;
    letter-spacing: 0.05em;
}

.custom-footer * {
    color: var(--main-text) !important;
}

.custom-footer span:hover {
    color: var(--accent-color) !important;
}

footer {
    border-top: 1px solid var(--accent-light) !important;
    background-color: var(--accent-light) !important;
}

footer div.border-t.bg-skin-primary.py-8 {
    display: none !important;
}

.checkout_bg_left {
    background-color: var(--main-bg) !important;
}

form input,
form select,
form textarea {
    color: var(--main-text) !important;
    background-color: transparent !important;
    border: 1px solid #D6CBBF !important;
    border-radius: 0px !important;
    padding: 12px !important;
    transition: border-color 0.3s ease;
}

form input:focus,
form select:focus,
form textarea:focus {
    border-color: var(--accent-color) !important;
    outline: none !important;
}

.contact-info-heading {
    background-color: var(--accent-color) !important;
    color: var(--white) !important;
}

.contact-info-heading button {
    background-color: var(--main-text) !important;
    color: var(--white) !important;
}

.fixed.bottom-0.left-0.right-0.z-50 {
    background-color: rgba(252, 250, 246, 0.95) !important;
    border-top: 1px solid var(--accent-light) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

p[data-cart="item-price"],
dd {
    color: var(--main-text) !important;
}

dd span {
    background-color: var(--accent-color) !important;
    color: var(--white) !important;
}

iframe {
    background-color: var(--main-bg) !important;
}

.ms-auto.flex.items-center.flex-1.justify-end {
    order: 3 !important;
    flex: 1 1 0% !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-direction: row !important;
}

footer{
    background-color: #f5f2f0 !important;
    background-color: #fcfcfc !important;
}

.content_container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    background-color: #ffffff;
}

@media (max-width: 640px) {
    .content_container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

.home_section_container{
    background-color: #ffffff;
}


.default_header_logo a > div {
    height: 5.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.default_header_logo a > div img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
}

@media (min-width: 768px) {
    .default_header_logo a > div {
        height: 4.75rem !important;
    }
}