/* =========================================================
   AVERINE JEWELLERY
   COMPLETE STYLE.CSS - V15
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Vazirmatn", sans-serif;
    direction: rtl;
    background: #E1D9D1;
    color: #183D34;
    line-height: 1.8;
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font-family: inherit;
}

button {
    cursor: pointer;
}


/* =========================================================
   COLORS
========================================================= */

:root {
    --green-dark: #123F34;
    --green: #185546;
    --green-light: #286C5A;

    --gold: #C7A66A;
    --gold-light: #E4CF9E;

    --cream: #E1D9D1;

    --white: #FAF9F5;
    --card-white: #FDFCF9;

    --text: #183D34;
    --text-light: #6D7974;

    --border: rgba(24, 61, 52, 0.12);

    --shadow:
        0 15px 45px
        rgba(20, 55, 45, 0.10);

    --radius: 18px;

    --transition: 0.3s ease;
}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {
    min-height: 38px;
    padding: 0 5%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background: var(--green-dark);
    color: rgba(255, 255, 255, 0.88);

    font-size: 11px;
}

.top-bar-right,
.top-bar-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.top-bar a {
    transition: var(--transition);
}

.top-bar a:hover {
    color: var(--gold-light);
}

.top-bar i {
    margin-left: 5px;

    color: var(--gold-light);

    font-size: 10px;
}

.top-bar-center {
    color: var(--gold-light);

    font-weight: 500;
}


/* =========================================================
   MAIN HEADER
========================================================= */

.main-header {
    min-height: 90px;
    padding: 0 5%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    background: rgba(250, 249, 245, 0.97);

    border-bottom: 1px solid var(--border);

    position: relative;

    z-index: 100;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.logo-symbol {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid var(--gold);
    border-radius: 50%;

    color: var(--gold);

    font-size: 20px;
}

.logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.logo-text strong {
    color: var(--green-dark);

    font-family: Georgia, serif;
    font-size: 20px;

    letter-spacing: 2px;

    direction: ltr;
}

.logo-text small {
    margin-top: 5px;

    color: var(--gold);

    font-family: Georgia, serif;
    font-size: 7px;

    letter-spacing: 2px;

    direction: ltr;
}


/* =========================================================
   NAVIGATION
========================================================= */

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 25px;

    flex: 1;
}

.main-nav a {
    position: relative;

    color: #35574F;

    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;

    transition: var(--transition);
}

.main-nav a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--gold);

    transition: var(--transition);
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--green-dark);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}

.header-actions button {
    position: relative;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: var(--green-dark);

    transition: var(--transition);
}

.header-actions button:hover {
    color: var(--gold);

    background: rgba(18, 63, 52, 0.05);
}

.cart-button span {
    position: absolute;

    top: 0;
    right: 0;

    width: 15px;
    height: 15px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--gold);

    color: white;

    font-size: 8px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    width: 100%;

    min-height: 610px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    isolation: isolate;

    background: #102f28;
}


/* =========================================================
   HERO SLIDES
========================================================= */

.hero-slides {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    overflow: hidden;
}

.hero-auto-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    overflow: hidden;

    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    will-change: opacity;
}

.hero-auto-slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    max-width: none;
}


/* =========================================================
   HERO SLIDE BACKGROUND FALLBACK
========================================================= */

.hero-auto-slide::before {
    content: "";

    position: absolute;

    inset: -25px;

    z-index: -1;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    transform: scale(1.08);

    filter: blur(22px);

    opacity: 0;
}

.slide-one::before {
    background-image: url("headers/header1.webp");
}

.slide-two::before {
    background-image: url("headers/header2.webp");
}

.slide-three::before {
    background-image: url("headers/header3.webp");
}


/* =========================================================
   HERO ANIMATION
========================================================= */

.slide-one {
    animation-name: heroSlideOne;
}

.slide-two {
    animation-name: heroSlideTwo;
}

.slide-three {
    animation-name: heroSlideThree;
}

@keyframes heroSlideOne {

    0%,
    28% {
        opacity: 1;
    }

    35%,
    93% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes heroSlideTwo {

    0%,
    28% {
        opacity: 0;
    }

    35%,
    61% {
        opacity: 1;
    }

    68%,
    100% {
        opacity: 0;
    }
}

@keyframes heroSlideThree {

    0%,
    61% {
        opacity: 0;
    }

    68%,
    93% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(8, 32, 27, 0.12),
            rgba(8, 32, 27, 0.28)
        );
}


/* =========================================================
   HERO GLOW
========================================================= */

.hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    left: -180px;
    top: -180px;

    z-index: 2;

    border-radius: 50%;

    background: rgba(228, 207, 158, 0.10);

    filter: blur(80px);

    pointer-events: none;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    position: relative;

    z-index: 3;

    width: min(570px, 90%);

    padding: 48px 50px;

    text-align: center;

    color: white;

    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 30px;

    background: rgba(255, 255, 255, 0.045);

    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hero h1 {
    margin-bottom: 12px;

    color: white;

    font-size: clamp(36px, 4.5vw, 58px);

    line-height: 1.4;

    text-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.25);
}

.hero-english {
    margin-bottom: 8px;

    direction: ltr;

    font-family: Georgia, serif;

    font-size: 14px;

    color: rgba(255, 255, 255, 0.88);
}

.hero-description {
    max-width: 430px;

    margin: 0 auto 28px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;

    line-height: 2;
}


/* =========================================================
   HERO BUTTONS
   FIXED SAME SIZE
========================================================= */

.hero-buttons {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    flex-wrap: nowrap;
}

.hero-buttons .button {
    width: 210px;
    height: 52px;
    min-height: 52px;

    flex: 0 0 210px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    box-sizing: border-box;

    border-radius: 10px;
}

.hero-buttons .button-primary,
.hero-buttons .button-glass {
    width: 210px;
    height: 52px;
    min-height: 52px;

    flex-basis: 210px;

    padding: 0 18px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}


/* =========================================================
   HERO DOTS
========================================================= */

.hero-dots {
    position: absolute;

    z-index: 5;

    bottom: 24px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 9px;
}

.hero-dots span {
    width: 7px;
    height: 7px;

    border: 1px solid white;
    border-radius: 50%;

    background: transparent;
}


/* =========================================================
   BUTTONS
========================================================= */

.button {
    min-height: 46px;

    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 600;

    transition: var(--transition);
}

.button-primary {
    color: white;

    background: var(--green-dark);

    border: 1px solid var(--green-dark);
}

.button-primary:hover {
    background: #0C5A48;

    transform: translateY(-2px);
}

.button-glass {
    color: white;

    background: var(--green-dark);

    border: 1px solid rgba(255, 255, 255, 0.45);
}

.button-glass:hover {
    background: rgba(18, 63, 52, 0.82);
}

.button-outline {
    color: var(--green-dark);

    background: transparent;

    border: 1px solid rgba(18, 63, 52, 0.25);
}

.button-outline:hover {
    color: white;

    background: var(--green-dark);
}

.button-light {
    color: var(--green-dark);

    background: var(--white);

    border: 1px solid var(--white);
}

.button-light:hover {
    background: var(--gold-light);
}


/* =========================================================
   BENEFITS
========================================================= */

.benefits {
    padding: 28px 5%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    background: var(--white);

    border-bottom:
        1px solid
        var(--border);
}

.benefit-item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    padding: 10px;
}

.benefit-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #D7CEC5;

    color: var(--gold);
}

.benefit-item h3 {
    color: var(--green-dark);

    font-size: 12px;
}

.benefit-item p {
    color: var(--text-light);

    font-size: 10px;
}


/* =========================================================
   GENERAL
========================================================= */

.section {
    padding: 90px 5%;
}

.section-heading {
    margin-bottom: 45px;

    text-align: center;
}

.section-heading > span {
    color: var(--gold);

    font-size: 12px;
    font-weight: 600;
}

.section-heading h2 {
    margin: 5px 0;

    color: var(--green-dark);

    font-size:
        clamp(
            25px,
            3vw,
            35px
        );
}

.section-heading p {
    color: var(--text-light);

    font-size: 12px;
}


/* =========================================================
   CATEGORIES
========================================================= */

.categories-section {
    background: var(--cream);
}

.categories-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.category-card {
    position: relative;

    min-height: 270px;

    overflow: hidden;

    border-radius: var(--radius);

    background: var(--card-white);

    box-shadow: var(--shadow);
}

.category-image {
    position: absolute;

    inset: 0;
}

.category-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.6s
        ease;
}

.category-card:hover
.category-image img {
    transform: scale(1.06);
}

.category-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(9, 37, 31, 0.80),
            rgba(9, 37, 31, 0.04) 65%
        );
}

.category-content {
    position: absolute;

    z-index: 2;

    right: 25px;
    bottom: 22px;

    color: white;
}

.category-content h3 {
    font-size: 18px;
}

.category-content span {
    color: var(--gold-light);

    font-size: 10px;
}


/* =========================================================
   PRODUCTS
========================================================= */

.products-section {
    background: var(--white);
}

.products-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;
}

.product-card {
    overflow: hidden;

    background: var(--card-white);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    transition:
        var(--transition);
}

.product-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow);
}

.product-card-main,
.product-card-link {
    display: block;
}

.product-image {
    position: relative;

    height: 310px;

    overflow: hidden;

    background: #D9D0C7;
}

.product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.5s
        ease;
}

.product-card:hover
.product-image img {
    transform: scale(1.04);
}

.product-badge {
    position: absolute;

    top: 15px;
    right: 15px;

    padding: 4px 10px;

    border-radius: 20px;

    color: white;

    background:
        var(--green-dark);

    font-size: 9px;
}

.product-info {
    padding: 20px;
}

.product-category {
    display: block;

    color: var(--gold);

    font-size: 10px;
}

.product-info h3 {
    margin-bottom: 14px;

    color: var(--green-dark);

    font-size: 14px;
}

.product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.product-bottom strong {
    color: var(--green-dark);

    font-size: 12px;
}

.product-rating {
    color: var(--text-light);

    font-size: 10px;
}

.product-rating i {
    color: var(--gold);
}

.center-button {
    margin-top: 45px;

    text-align: center;
}


/* =========================================================
   CUSTOM DESIGN
========================================================= */

.custom-design {
    position: relative;

    min-height: 500px;

    padding: 70px 8%;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: white;

    background:
        var(--green-dark);
}

.custom-image {
    position: absolute;

    inset: 0;

    z-index: 0;
}

.custom-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.custom-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 35, 29, 0.90),
            rgba(8, 35, 29, 0.35)
        );
}

.custom-content {
    position: relative;

    z-index: 2;

    width: min(500px, 100%);
}

.custom-content > span {
    color: var(--gold-light);
}

.custom-content h2 {
    margin: 10px 0;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );
}

.custom-content p {
    margin-bottom: 25px;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size: 13px;
}


/* =========================================================
   APPOINTMENT
========================================================= */

.appointment-section {
    padding: 90px 8%;

    display: grid;

    grid-template-columns:
        1.3fr 1fr;

    gap: 50px;

    align-items: center;

    background: var(--cream);
}

.appointment-card {
    padding: 50px;

    border-radius: 24px;

    background:
        var(--card-white);

    box-shadow:
        var(--shadow);
}

.appointment-icon {
    width: 55px;
    height: 55px;

    margin-bottom: 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #D7CEC5;

    color: var(--gold);
}

.appointment-card > span {
    color: var(--gold);
}

.appointment-card h2 {
    margin: 10px 0 15px;

    color: var(--green-dark);
}

.appointment-card p {
    margin-bottom: 25px;

    color: var(--text-light);
}

.appointment-info {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

.info-item {
    padding: 20px;

    display: flex;
    align-items: center;

    gap: 18px;

    border-bottom:
        1px solid
        var(--border);
}

.info-item > i {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--white);

    color: var(--gold);
}

.info-item div {
    display: flex;
    flex-direction: column;
}

.info-item span {
    color: var(--text-light);

    font-size: 10px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    background: #0C2F27;
}

.footer-container {
    padding: 70px 6%;

    display: grid;

    grid-template-columns:
        1.5fr
        repeat(3, 1fr);

    gap: 50px;
}

.footer-brand {
    max-width: 300px;
}

.footer-logo
.logo-text strong {
    color: white;
}

.footer-brand p {
    margin: 20px 0;

    color:
        rgba(
            255,
            255,
            255,
            0.60
        );

    font-size: 11px;
}

.footer-column {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.footer-column h3 {
    color: white;

    font-size: 13px;
}

.footer-column a {
    color:
        rgba(
            255,
            255,
            255,
            0.60
        );

    font-size: 11px;

    transition:
        var(--transition);
}

.footer-column a:hover {
    color:
        var(--gold-light);
}

.footer-bottom {
    padding: 18px 6%;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        rgba(
            255,
            255,
            255,
            0.40
        );

    font-size: 9px;
}


/* =========================================================
   CATEGORY PAGE
========================================================= */

.catalog-shell {
    min-height: 75vh;

    background:
        var(--cream);
}

.catalog-page {
    padding:
        75px
        5%
        95px;
}

.catalog-title {
    margin-bottom: 45px;

    text-align: center;
}

.catalog-title span {
    color: var(--gold);

    font-size: 12px;
}

.catalog-title h1 {
    color:
        var(--green-dark);

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );
}

.catalog-products {
    width:
        min(
            1300px,
            100%
        );

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 20px;
}

.catalog-product {
    overflow: hidden;

    background:
        var(--card-white);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    transition:
        var(--transition);
}

.catalog-product:hover {
    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);
}

.catalog-product-image {
    height: 280px;

    overflow: hidden;
}

.catalog-product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.45s
        ease;
}

.catalog-product:hover
.catalog-product-image img {
    transform: scale(1.05);
}

.catalog-product-info {
    padding: 17px;
}

.catalog-product-info span {
    color: var(--gold);

    font-size: 10px;
}

.catalog-product-info h3 {
    color:
        var(--green-dark);

    font-size: 13px;
}

.catalog-product-info b {
    color:
        var(--green-dark);

    font-size: 10px;
}

.pagination {
    margin-top: 45px;

    display: flex;
    justify-content: center;

    gap: 8px;
}

.pagination a {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    background:
        var(--card-white);

    color:
        var(--green-dark);
}

.pagination a:hover,
.pagination a.active {
    color: white;

    background:
        var(--green-dark);
}


/* =========================================================
   PRODUCT PAGE
========================================================= */

.product-detail-shell {
    min-height: 80vh;

    padding:
        40px
        5%
        90px;

    background:
        var(--cream);
}

.product-breadcrumb {
    width:
        min(
            1250px,
            100%
        );

    margin:
        0 auto
        28px;

    display: flex;
    align-items: center;

    gap: 10px;

    color:
        var(--text-light);

    font-size: 10px;
}

.product-breadcrumb i {
    color: var(--gold);

    font-size: 8px;
}

.product-detail-grid {
    width:
        min(
            1250px,
            100%
        );

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(330px, 0.9fr);

    gap: 55px;

    align-items: start;
}


/* =========================================================
   PRODUCT GALLERY
========================================================= */

.professional-gallery {
    width: 100%;

    min-width: 0;
}

.product-gallery-main {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 24px;

    background: #D9D0C7;

    box-shadow:
        var(--shadow);

    cursor: zoom-in;

    touch-action: none;
}


/* =========================================================
   MAIN ZOOM IMAGE
========================================================= */

.zoom-product-image {
    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center;

    transform: scale(1);

    transform-origin:
        50% 50%;

    transition:
        transform
        0.16s
        ease-out;

    will-change:
        transform,
        transform-origin;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;

    -webkit-user-drag: none;
}

.zoom-product-image.zoom-active {
    transform:
        scale(2.4);
}

.zoom-product-image.mobile-zoom-active {
    transform:
        scale(2.5);
}


/* =========================================================
   GALLERY ACTIONS
========================================================= */

.gallery-top-actions {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 20;

    display: flex;

    gap: 8px;
}

.gallery-round-button {
    min-width: 44px;
    height: 44px;

    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    border:
        1px solid
        rgba(
            18,
            63,
            52,
            0.10
        );

    border-radius: 50px;

    color:
        var(--green-dark);

    background:
        rgba(
            250,
            249,
            245,
            0.92
        );

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        var(--transition);
}

.gallery-round-button:hover {
    color: white;

    background:
        var(--green-dark);
}

.gallery-round-button span {
    font-size: 9px;
}


/* =========================================================
   ZOOM HELP
========================================================= */

.zoom-help {
    position: absolute;

    z-index: 15;

    bottom: 16px;
    right: 50%;

    transform:
        translateX(50%);

    padding: 7px 12px;

    border-radius: 30px;

    color:
        var(--green-dark);

    background:
        rgba(
            250,
            249,
            245,
            0.90
        );

    font-size: 9px;

    pointer-events: none;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.product-gallery-thumbnails {
    width: 100%;

    margin-top: 13px;

    display: flex;

    gap: 10px;

    overflow-x: auto;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
        touch;
}

.product-gallery-thumbnails::-webkit-scrollbar {
    display: none;
}

.product-thumbnail {
    width: 82px;
    height: 82px;

    flex:
        0 0 82px;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    background:
        var(--card-white);
}

.product-thumbnail.active {
    border:
        2px solid
        var(--gold);
}

.product-thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   GALLERY CAPABILITIES
========================================================= */

.gallery-capabilities {
    margin-top: 14px;

    display: flex;

    gap: 8px;

    flex-wrap: wrap;
}

.gallery-capabilities span {
    padding:
        7px 10px;

    border:
        1px solid
        var(--border);

    border-radius: 30px;

    background:
        rgba(
            250,
            249,
            245,
            0.5
        );

    color:
        var(--text-light);

    font-size: 9px;
}

.gallery-capabilities i {
    color:
        var(--gold);
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-detail-info {
    position: sticky;

    top: 20px;

    padding: 36px;

    border:
        1px solid
        var(--border);

    border-radius: 24px;

    background:
        var(--card-white);

    box-shadow:
        var(--shadow);
}

.product-detail-category {
    color:
        var(--gold);

    font-size: 11px;
}

.product-detail-info h1 {
    margin: 7px 0;

    color:
        var(--green-dark);

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );
}

.product-detail-rating {
    display: flex;
    align-items: center;

    gap: 5px;

    color:
        var(--text-light);
}

.product-detail-rating i {
    color:
        var(--gold);
}

.product-detail-description {
    margin-top: 18px;

    color:
        var(--text-light);

    font-size: 12px;

    line-height: 2;
}

.product-detail-divider {
    height: 1px;

    margin: 24px 0;

    background:
        var(--border);
}

.product-detail-price {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.product-detail-price strong {
    color:
        var(--green-dark);
}


/* =========================================================
   QUANTITY
========================================================= */

.product-quantity-section {
    margin-bottom: 18px;
}

.quantity-label {
    display: block;

    margin-bottom: 10px;

    color:
        var(--green-dark);
}

.quantity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.quantity-control {
    display: flex;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 10px;
}

.quantity-control button {
    width: 42px;
    height: 42px;

    border: 0;

    background:
        var(--white);

    color:
        var(--green-dark);

    font-size: 17px;
}

.quantity-control button:hover {
    color: white;

    background:
        var(--green-dark);
}

.quantity-control input {
    width: 52px;

    border: 0;

    outline: 0;

    text-align: center;

    background:
        var(--white);

    color:
        var(--green-dark);
}

.quantity-limit {
    color:
        var(--text-light);

    font-size: 9px;
}

.product-add-cart {
    width: 100%;

    border: 0;
}

.product-add-cart.added {
    background:
        var(--green-light);
}


/* =========================================================
   STOCK
========================================================= */

.product-stock-message {
    margin-top: 13px;

    padding: 12px;

    border:
        1px solid
        rgba(
            199,
            166,
            106,
            0.35
        );

    border-radius: 10px;

    background:
        rgba(
            199,
            166,
            106,
            0.12
        );

    color:
        var(--green-dark);

    font-size: 10px;
}

.product-stock-message:not([hidden]) {
    display: flex;
    align-items: center;

    gap: 7px;
}


/* =========================================================
   PRODUCT BENEFITS
========================================================= */

.product-detail-benefits {
    margin-top: 25px;

    padding-top: 22px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    border-top:
        1px solid
        var(--border);
}

.product-detail-benefits div {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    color:
        var(--text-light);

    font-size: 9px;
}

.product-detail-benefits i {
    color:
        var(--gold);

    font-size: 16px;
}


/* =========================================================
   FULLSCREEN GALLERY
========================================================= */

.fullscreen-product-gallery {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.fullscreen-product-gallery.active {
    display: flex;
}

.fullscreen-gallery-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            4,
            18,
            15,
            0.96
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}

.fullscreen-gallery-content {
    position: relative;

    z-index: 2;

    width:
        min(
            1200px,
            96vw
        );

    height:
        min(
            900px,
            92vh
        );

    overflow: hidden;

    border-radius: 20px;

    background: #D9D0C7;
}

.fullscreen-gallery-content > img,
.fullscreen-image {
    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center;
}

.fullscreen-gallery-close {
    position: absolute;

    z-index: 30;

    top: 15px;
    left: 15px;

    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 50%;

    color: white;

    background:
        rgba(
            0,
            0,
            0,
            0.55
        );
}


/* =========================================================
   360 VIEW
========================================================= */

.product-360-view {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(
            4,
            18,
            15,
            0.96
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}

.product-360-view.active {
    display: flex;
}

.product-360-container {
    position: relative;

    width:
        min(
            900px,
            96vw
        );

    overflow: hidden;

    border-radius: 24px;

    background: #D9D0C7;
}

.product-360-close {
    position: absolute;

    z-index: 30;

    top: 15px;
    left: 15px;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 50%;

    color: white;

    background:
        var(--green-dark);
}

.product-360-stage {
    width: 100%;
    height: 70vh;

    max-height: 720px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    cursor: grab;

    touch-action: none;

    background: #D9D0C7;
}

.product-360-stage:active {
    cursor: grabbing;
}

.product-360-stage img {
    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center;

    user-select: none;

    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    transition:
        transform
        0.05s
        linear;
}

.product-360-hint {
    padding: 13px;

    text-align: center;

    color:
        var(--text-light);

    background:
        var(--card-white);

    font-size: 10px;
}


/* =========================================================
   RESPONSIVE 1200
========================================================= */

@media (max-width: 1200px) {

    .catalog-products {
        grid-template-columns:
            repeat(4, 1fr);
    }

}


/* =========================================================
   RESPONSIVE 1000
========================================================= */

@media (max-width: 1000px) {

    .main-nav {
        display: none;
    }

    .benefits {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .categories-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .products-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .catalog-products {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .product-detail-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .product-detail-info {
        position: static;
    }

    .footer-container {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .top-bar {
        min-height: 34px;

        justify-content: center;
    }

    .top-bar-right,
    .top-bar-left {
        display: none;
    }

    .main-header {
        min-height: 74px;

        padding: 0 4%;
    }

    .header-actions {
        gap: 2px;
    }

    .header-actions button {
        width: 34px;
        height: 34px;
    }

    .hero {
        min-height: 600px;
    }

    .hero-content {
        width:
            min(
                520px,
                92%
            );

        padding:
            38px
            25px;

        border-radius:
            24px;
    }

    .appointment-section {
        grid-template-columns:
            1fr;

        padding:
            60px 5%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {


    .main-header {
        min-height: 68px;

        padding:
            0 14px;
    }


    .logo-symbol {
        width: 36px;
        height: 36px;
    }


    .logo-text strong {
        font-size: 16px;
    }


    .logo-text small {
        font-size: 6px;
    }


    .header-actions button:nth-child(2) {
        display: none;
    }


    .hero {
        width: 100%;

        min-height: 590px;

        padding: 0;

        background:
            #102f28;
    }


    .hero-slides,
    .hero-auto-slide {
        width: 100%;
        height: 100%;
    }


    .hero-auto-slide::before {
        opacity: 1;
    }


    .hero-auto-slide img {
        position: relative;

        z-index: 1;

        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;

        max-width: none;
    }


    .hero-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(
                    8,
                    32,
                    27,
                    0.08
                ),
                rgba(
                    8,
                    32,
                    27,
                    0.27
                )
            );
    }


    .hero-content {
        width:
            calc(
                100% - 30px
            );

        max-width:
            430px;

        padding:
            28px
            18px;

        border-radius:
            20px;

        background:
            rgba(
                18,
                63,
                52,
                0.20
            );
    }


    .hero h1 {
        font-size:
            clamp(
                28px,
                8vw,
                34px
            );

        line-height:
            1.5;
    }


    .hero-english {
        font-size:
            11px;
    }


    .hero-description {
        font-size:
            10px;

        line-height:
            2;
    }


    /* =====================================================
       MOBILE HERO BUTTONS - SAME SIZE
    ===================================================== */

    .hero-buttons {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;
        justify-content: center;

        gap: 10px;
    }


    .hero-buttons .button,
    .hero-buttons .button-primary,
    .hero-buttons .button-glass {
        width: 100%;

        height: 52px;
        min-height: 52px;

        flex:
            0 0 52px;

        padding:
            0 18px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 12px;
        font-weight: 600;
        line-height: 1;

        white-space: nowrap;

        box-sizing: border-box;

        border-radius: 10px;
    }


    .section {
        padding:
            65px 5%;
    }


    .benefits {
        grid-template-columns:
            1fr;

        gap: 5px;
    }


    .benefit-item {
        justify-content:
            flex-start;

        padding:
            8px 5%;
    }


    .categories-grid {
        grid-template-columns:
            1fr;
    }


    .category-card {
        min-height:
            250px;
    }


    .products-grid {
        grid-template-columns:
            1fr;
    }


    .product-image {
        height:
            330px;
    }


    .footer-container {
        grid-template-columns:
            1fr;

        padding:
            55px 7%;
    }


    .catalog-page {
        padding:
            55px
            12px
            70px;
    }


    .catalog-products {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }


    .catalog-product-image {
        height:
            210px;
    }


    .catalog-product-info {
        padding:
            12px;
    }


    .product-detail-shell {
        padding:
            20px
            12px
            60px;
    }


    .product-detail-grid {
        gap:
            20px;
    }


    .product-gallery-main {
        width: 100%;

        aspect-ratio:
            1 / 1.05;

        min-height: 0;

        border-radius:
            16px;

        background:
            #D9D0C7;

        touch-action:
            none;
    }


    .zoom-product-image {
        width: 100%;
        height: 100%;

        max-width: none;

        object-fit:
            cover;

        object-position:
            center;

        transform:
            scale(1);

        touch-action:
            none;
    }


    .zoom-product-image.mobile-zoom-active {
        transform:
            scale(2.5);
    }


    .gallery-top-actions {
        top: 10px;
        left: 10px;

        gap: 6px;
    }


    .gallery-round-button {
        min-width: 40px;
        height: 40px;

        padding:
            0 10px;
    }


    .zoom-help {
        display: none;
    }


    .product-thumbnail {
        width: 65px;
        height: 65px;

        flex:
            0 0 65px;
    }


    .product-detail-info {
        width: 100%;

        padding:
            23px
            17px;

        border-radius:
            18px;
    }


    .quantity-row {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .fullscreen-product-gallery {
        padding: 0;
    }


    .fullscreen-gallery-content {
        width:
            100vw;

        height:
            100dvh;

        max-width: none;

        border-radius:
            0;

        background:
            #D9D0C7;
    }


    .fullscreen-gallery-content > img,
    .fullscreen-image {
        width: 100%;
        height: 100%;

        max-width: none;

        object-fit:
            cover;

        object-position:
            center;
    }


    .fullscreen-gallery-close {
        top:
            max(
                12px,
                env(
                    safe-area-inset-top
                )
            );

        left:
            12px;
    }


    .product-360-view {
        padding:
            0;
    }


    .product-360-container {
        width:
            100vw;

        height:
            100dvh;

        max-width:
            none;

        display:
            flex;

        flex-direction:
            column;

        border-radius:
            0;

        background:
            #D9D0C7;
    }


    .product-360-stage {
        width:
            100%;

        height:
            auto;

        max-height:
            none;

        flex:
            1;

        min-height:
            0;

        background:
            #D9D0C7;

        touch-action:
            none;
    }


    .product-360-stage img {
        width: 100%;
        height: 100%;

        max-width: none;

        object-fit:
            cover;

        object-position:
            center;

        touch-action:
            none;
    }


    .product-360-close {
        top:
            max(
                12px,
                env(
                    safe-area-inset-top
                )
            );

        left:
            12px;
    }


    .product-360-hint {
        flex:
            0 0 auto;

        padding:
            12px 10px;

        font-size:
            9px;
    }


    .footer-bottom {
        text-align:
            center;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .hero {
        min-height:
            540px;
    }

    .hero-content {
        width:
            calc(
                100% - 20px
            );

        padding:
            24px 15px;
    }

    .hero h1 {
        font-size:
            27px;
    }

    .catalog-product-image {
        height:
            185px;
    }

    .product-gallery-main {
        aspect-ratio:
            1 / 1.08;
    }

    .gallery-round-button {
        min-width:
            38px;

        height:
            38px;

        padding:
            0 8px;
    }

    .product-image {
        height:
            300px;
    }

}


/* =========================================================
   DESKTOP ZOOM ONLY
========================================================= */

@media
(hover: hover)
and
(pointer: fine) {

    .product-gallery-main:hover
    .zoom-product-image.zoom-active {

        transform:
            scale(2.4);

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    .hero-auto-slide {
        animation:
            none;
    }

    .slide-one {
        opacity:
            1;
    }

    .slide-two,
    .slide-three {
        opacity:
            0;
    }

}


/* =========================================================
   V15 FINAL OVERRIDES

   Desktop:
   header1.webp
   header2.webp
   header3.webp

   Mobile:
   picphone1.webp
   picphone2.webp
   picphone3.webp

   Liquid Glass:
   ONLY slide 1

   No blurred hero

   Mobile Hero:
   600px - 700px

   Product Flash Fix

   Hero Buttons:
   SAME WIDTH + SAME HEIGHT
========================================================= */


/* =========================================================
   REMOVE OLD HERO BLUR
========================================================= */

.hero-auto-slide::before {
    content:
        none !important;

    display:
        none !important;

    opacity:
        0 !important;

    filter:
        none !important;
}


/* =========================================================
   HERO PICTURE
========================================================= */

.hero-auto-slide picture {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;
}

.hero-auto-slide picture img {
    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;

    filter:
        none !important;

    transform:
        none !important;
}


/* =========================================================
   MILD GRADIENT
========================================================= */

.hero-slide-gradient {
    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:

        linear-gradient(
            to right,

            rgba(
                5,
                24,
                20,
                0.22
            )
            0%,

            rgba(
                5,
                24,
                20,
                0.07
            )
            20%,

            rgba(
                5,
                24,
                20,
                0
            )
            42%,

            rgba(
                5,
                24,
                20,
                0
            )
            58%,

            rgba(
                5,
                24,
                20,
                0.07
            )
            80%,

            rgba(
                5,
                24,
                20,
                0.22
            )
            100%
        ),

        linear-gradient(
            to top,

            rgba(
                5,
                24,
                20,
                0.20
            )
            0%,

            rgba(
                5,
                24,
                20,
                0.04
            )
            26%,

            rgba(
                5,
                24,
                20,
                0
            )
            55%
        );
}


/* =========================================================
   LIQUID GLASS
   ONLY FIRST SLIDE
========================================================= */

.slide-one
.hero-content {
    position:
        absolute;

    z-index:
        5;

    top:
        50%;

    left:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width:
        min(
            570px,
            88%
        );

    height:
        auto;

    min-height:
        0;

    margin:
        0;

    padding:
        34px
        38px;

    overflow:
        hidden;

    text-align:
        center;

    color:
        #fff;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.30
        );

    border-radius:
        28px;

    background:

        linear-gradient(
            135deg,

            rgba(
                255,
                255,
                255,
                0.17
            ),

            rgba(
                255,
                255,
                255,
                0.055
            )
        );

    backdrop-filter:
        blur(9px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(9px)
        saturate(125%);

    box-shadow:

        0
        20px
        55px
        rgba(
            0,
            0,
            0,
            0.12
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.40
        ),

        inset
        0
        -1px
        0
        rgba(
            255,
            255,
            255,
            0.08
        );
}


/* =========================================================
   GLASS HIGHLIGHT
========================================================= */

.slide-one
.hero-content::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    border-radius:
        inherit;

    background:

        radial-gradient(
            circle at 18% 8%,

            rgba(
                255,
                255,
                255,
                0.24
            ),

            transparent
            34%
        ),

        linear-gradient(
            115deg,

            rgba(
                255,
                255,
                255,
                0.10
            ),

            transparent
            35%,

            rgba(
                255,
                255,
                255,
                0.035
            )
            70%,

            transparent
        );
}


/* =========================================================
   GLASS EDGE
========================================================= */

.slide-one
.hero-content::after {
    content:
        "";

    position:
        absolute;

    inset:
        1px;

    z-index:
        0;

    pointer-events:
        none;

    border-radius:
        27px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );
}

.slide-one
.hero-content > * {
    position:
        relative;

    z-index:
        1;
}


/* =========================================================
   FINAL HERO BUTTON EQUALITY
========================================================= */

.slide-one
.hero-buttons {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    flex-wrap:
        nowrap;
}

.slide-one
.hero-buttons
.button,
.slide-one
.hero-buttons
.button-primary,
.slide-one
.hero-buttons
.button-glass {
    width:
        210px;

    min-width:
        210px;

    max-width:
        210px;

    height:
        52px;

    min-height:
        52px;

    max-height:
        52px;

    flex:
        0 0 210px;

    padding:
        0 18px;

    margin:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1;

    white-space:
        nowrap;

    box-sizing:
        border-box;

    border-radius:
        10px;
}


/* =========================================================
   PRODUCT IMAGE FLASH FIX
========================================================= */

.product-media-loading {
    opacity:
        0 !important;
}

.product-media-ready {
    opacity:
        1 !important;
}

.zoom-product-image,
.fullscreen-image,
.product-360-stage img {
    transition:

        opacity
        0.15s
        ease,

        transform
        0.15s
        ease-out;
}


/* =========================================================
   MOBILE FINAL OVERRIDE
========================================================= */

@media (max-width: 600px) {


    /* =====================================================
       HERO SIZE
    ===================================================== */

    .hero {
        width:
            100%;

        height:
            clamp(
                600px,
                86svh,
                700px
            )
            !important;

        min-height:
            600px
            !important;

        max-height:
            700px
            !important;

        padding:
            0;

        background:
            #102f28;
    }


    .hero-slides,
    .hero-auto-slide,
    .hero-auto-slide picture,
    .hero-auto-slide picture img {
        width:
            100%;

        height:
            100%;
    }


    /* =====================================================
       MOBILE IMAGE
       NO BLUR
    ===================================================== */

    .hero-auto-slide img,
    .hero-auto-slide picture img {
        position:
            relative;

        z-index:
            1;

        width:
            100%;

        height:
            100%;

        max-width:
            none;

        object-fit:
            cover
            !important;

        object-position:
            center center;

        filter:
            none
            !important;

        transform:
            none
            !important;
    }


    /* =====================================================
       MOBILE GRADIENT
    ===================================================== */

    .hero-slide-gradient {
        background:

            linear-gradient(
                to right,

                rgba(
                    5,
                    24,
                    20,
                    0.22
                )
                0%,

                rgba(
                    5,
                    24,
                    20,
                    0.05
                )
                18%,

                rgba(
                    5,
                    24,
                    20,
                    0
                )
                42%,

                rgba(
                    5,
                    24,
                    20,
                    0
                )
                58%,

                rgba(
                    5,
                    24,
                    20,
                    0.05
                )
                82%,

                rgba(
                    5,
                    24,
                    20,
                    0.22
                )
                100%
            ),

            linear-gradient(
                to top,

                rgba(
                    5,
                    24,
                    20,
                    0.20
                )
                0%,

                rgba(
                    5,
                    24,
                    20,
                    0.04
                )
                25%,

                rgba(
                    5,
                    24,
                    20,
                    0
                )
                55%
            );
    }


    /* =====================================================
       MOBILE LIQUID GLASS
    ===================================================== */

    .slide-one
    .hero-content {
        top:
            50%;

        left:
            50%;

        width:
            88%;

        max-width:
            480px;

        height:
            auto;

        min-height:
            0;

        margin:
            0;

        padding:
            25px
            19px;

        transform:
            translate(
                -50%,
                -50%
            );

        border-radius:
            22px;

        background:

            linear-gradient(
                135deg,

                rgba(
                    255,
                    255,
                    255,
                    0.155
                ),

                rgba(
                    255,
                    255,
                    255,
                    0.045
                )
            );

        backdrop-filter:
            blur(7px)
            saturate(120%);

        -webkit-backdrop-filter:
            blur(7px)
            saturate(120%);
    }


    .slide-one
    .hero-content::after {
        border-radius:
            21px;
    }


    /* =====================================================
       MOBILE TITLE
    ===================================================== */

    .hero h1 {
        margin-bottom:
            8px;

        font-size:
            38px
            !important;

        line-height:
            1.4
            !important;

        font-weight:
            700;
    }


    .hero-english {
        margin-bottom:
            5px;

        font-size:
            10.5px;
    }


    .hero-description {
        margin-bottom:
            17px;

        font-size:
            10px;

        line-height:
            1.8;
    }


    /* =====================================================
       MOBILE BUTTONS
       EXACT SAME SIZE
    ===================================================== */

    .slide-one
    .hero-buttons {
        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        justify-content:
            center;

        gap:
            10px;
    }


    .slide-one
    .hero-buttons
    .button,
    .slide-one
    .hero-buttons
    .button-primary,
    .slide-one
    .hero-buttons
    .button-glass {
        width:
            100%;

        min-width:
            100%;

        max-width:
            100%;

        height:
            52px;

        min-height:
            52px;

        max-height:
            52px;

        flex:
            0 0 52px;

        padding:
            0 18px;

        margin:
            0;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        font-size:
            12px;

        font-weight:
            600;

        line-height:
            1;

        white-space:
            nowrap;

        box-sizing:
            border-box;

        border-radius:
            10px;
    }

}

/* =========================================================
   ADVANCED PROFESSIONAL SEARCH SYSTEM
   ADD ONLY - DO NOT MODIFY EXISTING CSS
========================================================= */


.advanced-search-wrapper {
    position: relative;
}


/* SEARCH ICON */

.advanced-search-trigger {

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: var(--green-dark);

    display: grid;
    place-items: center;

    transition: var(--transition);

}


.advanced-search-trigger:hover {

    color: var(--gold);

    background:
        rgba(
            18,
            63,
            52,
            .05
        );

}



/* PANEL */

.advanced-search-panel {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background:
        rgba(
            18,
            63,
            52,
            .35
        );

    backdrop-filter: blur(8px);


    display: none;

    align-items: flex-start;

    justify-content: center;


    padding-top: 100px;


    opacity: 0;

    transition:
        opacity .3s ease;

}



.advanced-search-panel.active {

    display: flex;

    opacity: 1;

}



/* SEARCH CARD */


.advanced-search-box {


    width:

        min(
            680px,
            92vw
        );


    background:

        var(--card-white);


    border-radius:

        24px;


    box-shadow:

        0 25px 70px

        rgba(
            20,
            55,
            45,
            .18
        );


    overflow: hidden;


    animation:

        searchOpen .35s ease;


}



@keyframes searchOpen {


    from {

        transform:
            translateY(-20px);

        opacity:
            0;

    }


    to {

        transform:
            translateY(0);

        opacity:
            1;

    }

}



/* INPUT */


.advanced-search-input-wrapper {


    display:

        flex;


    align-items:

        center;


    gap:

        14px;


    padding:

        18px 22px;


    border-bottom:

        1px solid

        var(--border);


}



.advanced-search-input-wrapper > i {


    color:

        var(--gold);


    font-size:

        18px;

}



.advanced-search-input-wrapper input {


    flex:

        1;


    border:

        0;


    outline:

        none;


    background:

        transparent;


    color:

        var(--text);


    font-family:

        inherit;


    font-size:

        15px;


}



.advanced-search-input-wrapper input::placeholder {


    color:

        var(--text-light);

}




/* CLOSE BUTTON */


.advanced-search-input-wrapper button {


    width:

        32px;


    height:

        32px;


    border:

        0;


    border-radius:

        50%;


    background:

        transparent;


    color:

        var(--text-light);


    transition:

        var(--transition);


}



.advanced-search-input-wrapper button:hover {


    color:

        var(--green-dark);


    background:

        rgba(
            18,
            63,
            52,
            .06
        );


}



/* RESULTS */


.advanced-search-results {


    max-height:

        430px;


    overflow-y:

        auto;


}



/* RESULT ITEM */


.search-result-item {


    display:

        flex;


    align-items:

        center;


    gap:

        16px;


    padding:

        14px 20px;


    cursor:

        pointer;


    transition:

        var(--transition);


}



.search-result-item:hover {


    background:

        rgba(
            199,
            166,
            106,
            .08
        );


}



.search-result-image {


    width:

        62px;


    height:

        62px;


    border-radius:

        14px;


    object-fit:

        cover;


    background:

        var(--cream);

}




.search-result-info {


    display:

        flex;


    flex-direction:

        column;


    gap:

        4px;


}



.search-result-title {


    color:

        var(--green-dark);


    font-size:

        13px;


    font-weight:

        600;

}



.search-result-category {


    color:

        var(--text-light);


    font-size:

        11px;

}



.search-result-price {


    color:

        var(--gold);


    font-size:

        12px;


}




/* EMPTY STATE */


.search-empty-state {


    min-height:

        180px;


    display:

        flex;


    flex-direction:

        column;


    justify-content:

        center;


    align-items:

        center;


    gap:

        12px;


    color:

        var(--text-light);


    font-size:

        13px;

}



.search-empty-state i {


    color:

        var(--gold);


    font-size:

        35px;

}




/* MOBILE */


@media(max-width:768px){


    .advanced-search-panel {


        padding-top:

            70px;

    }



    .advanced-search-box {


        width:

            94vw;


        border-radius:

            20px;

    }



    .search-result-item {


        padding:

            12px 15px;

    }



    .search-result-image {


        width:

            52px;


        height:

            52px;

    }


}

/* SEARCH ICON ANIMATION */

.advanced-search-trigger i {

    transition: 
        transform .35s ease,
        color .35s ease;

}


.advanced-search-trigger:hover i {

    transform:
        rotate(-15deg)
        scale(1.15);

    color:
        var(--gold);

}


.advanced-search-trigger:active i {

    transform:
        scale(.85);

}

/* SEARCH CLOSE ANIMATION */

#advancedSearchClose i {

    transition:
        transform .35s ease,
        color .35s ease;

}



#advancedSearchClose:hover i {

    transform:
        rotate(90deg)
        scale(1.2);

    color:
        var(--gold);

}



#advancedSearchClose:active i {

    transform:
        rotate(180deg)
        scale(.8);

}

@media(max-width:768px){

    .advanced-search-panel{

        padding-top:40px;

        align-items:flex-start;

    }


    .advanced-search-box{

        max-height:85vh;

    }


    .advanced-search-results{

        overflow-y:auto;

        max-height:60vh;

    }

}

/* =====================================================
   ACCOUNT LOGIN PAGE
===================================================== */


.account-login-page{


min-height:100vh;

display:flex;

align-items:center;

justify-content:center;


padding:40px 20px;


background:

var(--cream);


}





.account-login-card{


width:min(
430px,
100%
);


background:

var(--card-white);



border-radius:

30px;



padding:

40px 32px;



box-shadow:

0 25px 70px

rgba(
20,
55,
45,
.12
);



animation:

loginCardShow .7s ease;



}




@keyframes loginCardShow{


from{

opacity:0;

transform:
translateY(30px)
scale(.95);

}


to{

opacity:1;

transform:
translateY(0)
scale(1);

}


}





.account-login-logo{


text-align:center;

margin-bottom:25px;


}



.login-gem-animation{


width:70px;

height:70px;


margin:auto;


display:grid;

place-items:center;


border-radius:50%;


border:

1px solid var(--gold);



color:

var(--gold);



font-size:28px;



animation:

gemFloat 3s infinite ease-in-out;



}




@keyframes gemFloat{


0%,100%{

transform:
translateY(0);

}



50%{

transform:
translateY(-10px);

}


}





.account-login-logo h1{


margin-top:15px;


font-family:Georgia,serif;


letter-spacing:3px;


color:

var(--green-dark);


}




.account-login-logo span{


font-size:9px;


letter-spacing:3px;


color:

var(--gold);


}







.account-login-card h2{


text-align:center;


color:

var(--green-dark);



font-size:22px;


}



.login-subtitle{


text-align:center;


color:

var(--text-light);


font-size:12px;


margin-bottom:25px;


}





.login-input-group{


height:52px;


display:flex;


align-items:center;


gap:12px;



border:

1px solid var(--border);



border-radius:16px;



padding:

0 16px;



margin-bottom:15px;



background:

var(--white);



transition:

.3s ease;


}



.login-input-group:focus-within{


border-color:

var(--gold);



transform:

translateY(-2px);


}



.login-input-group i{


color:

var(--gold);


}





.login-input-group input{


flex:1;


border:0;

outline:0;


background:transparent;


font-family:inherit;


}





.login-input-group button{


border:0;

background:none;


color:

var(--green-dark);


}





.login-options{


display:flex;


justify-content:space-between;


font-size:11px;


margin-bottom:20px;


}





.login-options a{


color:

var(--gold);


}





.login-submit{


width:100%;


height:55px;


border:0;


border-radius:18px;


background:

var(--green-dark);



color:white;


display:flex;


align-items:center;


justify-content:center;


gap:10px;


font-family:inherit;


transition:.3s;


}





.login-submit:hover{


transform:

translateY(-3px);


box-shadow:

0 15px 30px

rgba(
18,
63,
52,
.2
);


}




.login-submit.loading i{


animation:

spin .8s infinite linear;


}



@keyframes spin{


to{

transform:
rotate(360deg);

}


}




.login-divider{


text-align:center;


margin:25px 0;


color:

var(--text-light);


}



.register-link{


display:flex;


height:50px;


align-items:center;


justify-content:center;


border:

1px solid var(--gold);


border-radius:16px;


color:

var(--green-dark);


}





@media(max-width:600px){


.account-login-card{


padding:

32px 22px;


border-radius:

24px;


}


}

/* =====================================================
 ACCOUNT DASHBOARD
===================================================== */


.account-dashboard{


min-height:100vh;


background:

var(--cream);


padding:

50px 5%;


}





.account-dashboard-header{


display:flex;


justify-content:space-between;


align-items:center;


margin-bottom:35px;


animation:

fadeAccount .6s ease;


}



.account-dashboard-header span{


color:

var(--gold);


font-size:13px;


}



.account-dashboard-header h1{


color:

var(--green-dark);


font-size:28px;


}





.account-avatar{


width:70px;


height:70px;


border-radius:50%;


display:grid;


place-items:center;


background:

var(--green-dark);


color:white;


font-size:25px;


animation:

avatarFloat 3s infinite;


}




@keyframes avatarFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-8px);

}


}






.account-grid{


display:grid;


grid-template-columns:

repeat(
3,
1fr
);


gap:22px;


}





.account-card{


background:

var(--card-white);


border-radius:

25px;


padding:

30px;


box-shadow:

0 15px 45px rgba(
20,
55,
45,
.08
);



animation:

cardShow .6s ease;


transition:.3s;


}



.account-card:hover{


transform:

translateY(-8px);


}




.account-card-icon{


width:55px;


height:55px;


display:grid;


place-items:center;


border-radius:50%;


background:

rgba(
199,
166,
106,
.15
);


color:

var(--gold);


font-size:22px;


margin-bottom:20px;


}



.account-card h3{


color:

var(--green-dark);


font-size:17px;


}



.account-card p{


color:

var(--text-light);


font-size:12px;


margin:10px 0 20px;


}



.account-card a,
.logout-card button{


color:

var(--gold);


background:none;


border:0;


font-family:inherit;


}





.order-summary{


margin-top:35px;


background:

var(--card-white);


border-radius:25px;


padding:30px;


}



.order-summary h2{


color:

var(--green-dark);


}



.summary-items{


display:grid;


grid-template-columns:

repeat(
3,
1fr
);


gap:15px;


margin-top:20px;


}



.summary-items div{


text-align:center;


padding:20px;


background:

var(--white);


border-radius:18px;


}



.summary-items strong{


display:block;


font-size:30px;


color:

var(--gold);


}





.summary-items span{


font-size:12px;


color:

var(--text-light);


}




@keyframes cardShow{


from{

opacity:0;

transform:
translateY(30px);

}


to{

opacity:1;

transform:
translateY(0);

}


}





@media(max-width:900px){


.account-grid{


grid-template-columns:

repeat(
2,
1fr
);


}


}





@media(max-width:600px){


.account-dashboard{


padding:

30px 18px;


}



.account-grid{


grid-template-columns:

1fr;


}



.account-dashboard-header h1{


font-size:22px;


}



.summary-items{


grid-template-columns:

1fr;


}



}

/* =====================================================
 SECURITY PAGE
===================================================== */


.security-page{


min-height:100vh;


background:

var(--cream);


padding:

50px 5%;


}





.security-header{


display:flex;


justify-content:space-between;


align-items:center;


margin-bottom:35px;


}



.security-header span{


color:

var(--gold);


font-size:12px;


}



.security-header h1{


color:

var(--green-dark);


font-size:28px;


}





.security-shield{


width:75px;


height:75px;


border-radius:50%;


background:

var(--green-dark);


color:white;


display:grid;


place-items:center;


font-size:30px;


animation:

shieldPulse 3s infinite;


}




@keyframes shieldPulse{


0%,100%{

transform:
scale(1);

box-shadow:
0 0 0 0 rgba(199,166,106,.3);

}


50%{

transform:
scale(1.08);

box-shadow:
0 0 0 15px rgba(199,166,106,0);

}


}





.security-status-card{


display:flex;


align-items:center;


gap:20px;


background:

var(--card-white);


padding:

25px;


border-radius:

25px;


box-shadow:

var(--shadow);


margin-bottom:25px;


}



.security-status-icon{


width:55px;


height:55px;


border-radius:50%;


background:

rgba(24,85,70,.1);


display:grid;


place-items:center;


color:

var(--green);


font-size:25px;


}




.security-actions{


display:grid;


grid-template-columns:

repeat(
2,
1fr
);


gap:20px;


}




.security-action-card{


background:

var(--card-white);


border-radius:

25px;


padding:

25px;


display:flex;


align-items:center;


gap:18px;


transition:.3s;


}



.security-action-card:hover{


transform:
translateY(-5px);


}



.security-action-card i{


font-size:25px;


color:

var(--gold);


}




.security-action-card button{


margin-right:auto;


border:0;


background:

var(--green-dark);


color:white;


padding:

10px 20px;


border-radius:

20px;


font-family:inherit;


}




.login-history,
.active-session{


background:

var(--card-white);


padding:

30px;


border-radius:

25px;


margin-top:25px;


}




.login-history h2,
.active-session h2{


color:

var(--green-dark);


font-size:18px;


}




.login-log{


display:flex;


align-items:center;


gap:15px;


padding:

18px 0;


border-bottom:

1px solid var(--border);


}



.log-icon{


width:42px;


height:42px;


border-radius:50%;


background:

rgba(199,166,106,.15);


display:grid;


place-items:center;


color:

var(--gold);


}



.log-icon.success{


background:

rgba(24,85,70,.15);


color:

var(--green);


}



.log-info{


display:flex;


flex-direction:column;


}



.log-info strong{


color:

var(--green-dark);


}



.log-info span,
.log-info small{


color:

var(--text-light);


font-size:12px;


}





.session-card{


display:flex;


align-items:center;


gap:20px;


padding:20px 0;


}



.session-card i{


font-size:25px;


color:

var(--gold);


}



.session-card span{


margin-right:auto;


background:

var(--green);


color:white;


padding:

5px 15px;


border-radius:20px;


font-size:11px;


}




.logout-all{


width:100%;


height:50px;


border:0;


border-radius:18px;


background:

#8B3A3A;


color:white;


font-family:inherit;


}





@media(max-width:700px){


.security-actions{


grid-template-columns:

1fr;


}



.security-header h1{


font-size:22px;


}


.security-page{


padding:

30px 18px;


}



}

.user-account-link{


width:38px;

height:38px;


border-radius:50%;


display:grid;


place-items:center;


color:

var(--green-dark);


transition:.3s;


}



.user-account-link:hover{


color:

var(--gold);


background:

rgba(
18,
63,
52,
.05
);


transform:

translateY(-3px);


}