/*
 * INSTA COLORS — PREMIUM BRAND OVERRIDE
 * Visual-only layer. Existing HTML/PHP class names and functionality are unchanged.
 * Loaded last on the storefront so page-specific styles remain intact where
 * they are functional, while this layer standardises the visual system.
 */

:root{
    --premium-black:#0b0b0b;
    --premium-white:#ffffff;
    --premium-bg:#fafafa;
    --premium-soft:#f4f4f4;
    --premium-line:#dedede;
    --premium-muted:#6d6d6d;
    --premium-pink:#d92f6f;
    --premium-pink-dark:#b9235a;
    --premium-shadow:0 16px 38px rgba(0,0,0,.10);
    --premium-shadow-soft:0 10px 28px rgba(0,0,0,.07);
    --premium-font:"KMR Waldenburg Buch", sans-serif;
    --premium-heading-font:Inter, sans-serif;
}

/* One typography system — no display serif font anywhere on the storefront. */
html,
body,
button,
input,
textarea,
select,
option,
label,
a,
p,
span,
small,
strong,
b,
em,
li,
td,
th{
    font-family:var(--premium-font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.section-title,
.page-title,
.product-title,
.card-title{
    font-family:var(--premium-heading-font) !important;
}

body{
    background:var(--premium-white) !important;
    color:var(--premium-black) !important;
    line-height:1.55;
}

h1,h2,h3,h4,h5,h6{
    color:var(--premium-black) !important;
    font-weight:650 !important;
    letter-spacing:-.025em;
}

/* Flat design: remove decorative rounded geometry across storefront UI. */
.product-card,
.category-card,
.card,
.btn,
.btn-icon,
.badge,
.product-badge span,
.category-badge,
.action-btn,
input,
textarea,
select,
.form-control,
.form-select,
.search-box,
.search-input,
.navbar-search,
.modal-content,
.dropdown-menu,
.dropdown,
.toast,
.alert,
.pagination a,
.pagination span,
.quantity-control,
.quantity-btn,
.chx-choice,
.chx-alert,
.checkout-card,
.order-summary,
.cart-item,
.account-card{
    border-radius:0;
}

/* Keep the page visually flat. */
.product-card,
.category-card,
.card{
    box-shadow:none !important;
    border:1px solid var(--premium-line) !important;
    background:var(--premium-white) !important;
}

.product-card,
.category-card{
    transform:none !important;
    transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease !important;
}

/* Shared premium hover treatment for product/category imagery. */
.product-card:hover,
.category-card:hover{
    border-color:#bdbdbd !important;
    box-shadow:var(--premium-shadow-soft) !important;
    transform:translateY(-3px) !important;
}

.product-card:hover .product-image,
.category-card:hover .category-image{
    box-shadow:var(--premium-shadow) !important;
    position:relative;
    z-index:1;
}

.product-image,
.category-image{
    box-shadow:none !important;
    background:#f7f7f7 !important;
    transition:box-shadow .3s ease !important;
}

.product-image img,
.category-image img{
    transition:transform .5s ease,filter .3s ease !important;
}

.product-card:hover .product-image img,
.category-card:hover .category-image img{
    filter:brightness(.985);
}

/* Product cards: consistent image/content treatment everywhere. */
.product-content{
    background:var(--premium-white) !important;
    border-top:1px solid var(--premium-line) !important;
    padding:22px !important;
}

.product-brand{
    color:var(--premium-muted) !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
}

.product-title{
    color:var(--premium-black) !important;
    font-weight:600 !important;
    letter-spacing:-.01em;
}

.product-price,
.new-price{
    color:var(--premium-black) !important;
    font-weight:700 !important;
}

.old-price{
    color:#8a8a8a !important;
}

/* Category cards: same border, spacing, hover and image language as products. */
.category-card{
    border:1px solid var(--premium-line) !important;
    box-shadow:none !important;
}

.category-card::after{
    border-radius:0;
    border:0 !important;
}

.category-content{
    left:24px !important;
    bottom:24px !important;
}

.category-content h3{
    color:#fff !important;
    font-weight:650 !important;
    letter-spacing:-.02em;
}

.category-btn{
    border-bottom:1px solid rgba(255,255,255,.75);
    padding-bottom:3px;
}

.category-badge{
    border-radius:0;
}

/* Section system: restrained, editorial, premium. */
.section{
    background:var(--premium-white) !important;
}

.section-header{
    max-width:820px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.section-subtitle{
    color:var(--premium-pink) !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.18em !important;
}

.section-title{
    font-size:clamp(30px,4vw,48px) !important;
    font-weight:650 !important;
    letter-spacing:-.04em !important;
}

.section-description{
    color:var(--premium-muted) !important;
    max-width:680px;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Buttons: crisp, rectangular and brand-led. */
.btn{
    min-height:48px !important;
    height:48px !important;
    border-radius:0;
    letter-spacing:.015em;
    box-shadow:none !important;
    transform:none !important;
}

.btn-primary{
    background:var(--premium-black) !important;
    color:#fff !important;
}

.btn-primary:hover{
    background:var(--premium-pink) !important;
    box-shadow:none !important;
    transform:none !important;
}

.btn-secondary{
    background:var(--premium-pink) !important;
    color:#fff !important;
}

.btn-secondary:hover{
    background:var(--premium-pink-dark) !important;
    box-shadow:none !important;
}

.btn-outline{
    border:1px solid var(--premium-black) !important;
    background:#fff !important;
}

.btn-outline:hover{
    background:var(--premium-black) !important;
    color:#fff !important;
}

/* Inputs and selects. */
input,
textarea,
select,
.form-control,
.form-select{
    background:#fff !important;
    border:1px solid #d8d8d8 !important;
    box-shadow:none !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus{
    border-color:var(--premium-black) !important;
    box-shadow:none !important;
}

/* Premium navigation/header. */
.site-header,
.navbar{
    background:#fff !important;
    box-shadow:none !important;
}

.navbar{
    border-bottom:0px solid var(--premium-line) !important;
}

.navbar a,
.nav-link{
    font-weight:500 !important;
    letter-spacing:.01em;
}

.navbar a:hover,
.nav-link:hover{
    color:var(--premium-pink) !important;
}

/* Remove decorative pills from badges/utility controls while retaining clarity. */
.product-badge span,
.badge,
.category-badge{
    min-height:30px;
    padding:6px 12px !important;
    font-weight:700 !important;
}

.product-badge span{
    box-shadow:none !important;
}

/* Product action buttons become compact square controls. */
.action-btn{
    width:42px !important;
    height:42px !important;
    background:#fff !important;
    color:var(--premium-black) !important;
    border:1px solid var(--premium-line) !important;
    box-shadow:none !important;
}

.action-btn:hover{
    background:var(--premium-black) !important;
    color:#fff !important;
    box-shadow:none !important;
}

/* Tables, dividers and cards stay crisp. */
hr,
.divider{
    border-color:var(--premium-line) !important;
}

table{
    border-color:var(--premium-line) !important;
}

/* Footer: premium, quiet, flat. */
.footer{
    border-top:1px solid rgba(255,255,255,.14) !important;
}

.footer-social a{
    border-radius:0;
    box-shadow:none !important;
}

/* Do not allow the old decorative circular backgrounds to dominate. */
.categories::before,
.categories::after{
    opacity:.22 !important;
}

/* Focus remains accessible without creating a rounded UI language. */
:focus-visible{
    outline:2px solid var(--premium-pink) !important;
    outline-offset:3px !important;
}

/* Mobile: keep the same visual language and avoid oversized editorial spacing. */
@media (max-width:768px){
    .section{
        padding-top:58px !important;
        padding-bottom:58px !important;
    }

    .section-header{
        margin-bottom:34px !important;
    }

    .section-title{
        font-size:32px !important;
    }

    .product-content{
        padding:17px !important;
    }

    .category-content{
        left:18px !important;
        bottom:18px !important;
    }

    .btn{
        min-height:46px !important;
        height:46px !important;
    }
}


/* =========================================================
   PREMIUM FLAT SYSTEM — STOREFRONT / INTERNAL PAGES
   Visual-only overrides. No markup, PHP or JS changes.
   Admin styles are not included here.
   ========================================================= */

/* Every storefront surface uses crisp 90° geometry. */
body :where(
    .card,
    .account-card,
    .feature-card,
    .filter-widget,
    .payment-card,
    .checkout-card,
    .order-summary,
    .cart-item,
    .chx-card,
    .chx-section,
    .chx-choice,
    .chx-alert,
    .auth-card,
    .auth-benefit,
    .empty-products,
    .shop-banner,
    .product-card,
    .category-card,
    .modal-content,
    .dropdown-menu,
    .dropdown,
    .toast,
    .alert,
    .breadcrumb,
    .pagination,
    .quantity-control,
    .quantity-btn,
    .search-box,
    .search-input,
    .form-control,
    .form-select,
    input,
    textarea,
    select,
    .btn,
    button
){
    border-radius:0;
}

/* Catch page-specific cards and panels that do not share one component class. */
body :where(
    [class*="card"],
    [class*="panel"],
    [class*="widget"],
    [class*="modal"],
    [class*="drawer"],
    [class*="popup"],
    [class*="toast"],
    [class*="alert"],
    [class*="dropdown"],
    [class*="filter"],
    [class*="summary"]
){
    border-radius:0;
}

/* Keep the actual product/category image field pure white. */
.product-image,
.category-image,
.product-image img,
.category-image img,
.product-card .image-container,
.category-card .image-container{
    background:#fff !important;
}

/* Internal pages: understated hairlines instead of floating rounded cards. */
body :where(
    .account-card,
    .feature-card,
    .filter-widget,
    .payment-card,
    .checkout-card,
    .order-summary,
    .cart-item,
    .chx-card,
    .chx-section,
    .auth-card,
    .empty-products
){
    border:1px solid #e3e3e3 !important;
    box-shadow:none !important;
    background:#fff !important;
}

/* Premium editorial hierarchy on internal pages. */
body :where(
    .account-card-header,
    .account-card-body,
    .checkout-card,
    .order-summary,
    .payment-card,
    .chx-head,
    .chx-section
) h1,
body :where(
    .account-card-header,
    .account-card-body,
    .checkout-card,
    .order-summary,
    .payment-card,
    .chx-head,
    .chx-section
) h2,
body :where(
    .account-card-header,
    .account-card-body,
    .checkout-card,
    .order-summary,
    .payment-card,
    .chx-head,
    .chx-section
) h3{
    font-family:var(--premium-font) !important;
    color:var(--premium-black) !important;
    letter-spacing:-.035em !important;
    font-weight:650 !important;
}

/* Forms stay clean and architectural. */
body :where(
    input,
    textarea,
    select,
    .form-control,
    .form-select
){
    border-radius:0;
    background:#fff !important;
    box-shadow:none !important;
}

/* Product/category surfaces: quiet by default, shadow only on hover. */
.product-card,
.category-card{
    background:#fff !important;
    box-shadow:none !important;
}

.product-card:hover,
.category-card:hover{
    box-shadow:0 14px 32px rgba(0,0,0,.08) !important;
}

.product-image,
.category-image{
    box-shadow:none !important;
}

.product-card:hover .product-image,
.category-card:hover .category-image{
    box-shadow:0 12px 28px rgba(0,0,0,.10) !important;
}

/* Flat editorial buttons — preserve the existing brand colour system. */
body :where(.btn,.action-btn,.category-btn){
    border-radius:0;
    box-shadow:none !important;
}

/* No pill-shaped controls on storefront. */
body :where(
    .badge,
    .product-badge,
    .product-badge span,
    .category-badge,
    .tag,
    .chip,
    .status,
    .quantity-control,
    .search-box
){
    border-radius:0;
}

/* Preserve genuine circular avatars/status icons rather than treating them
   as rounded cards. */
body :where(
    .avatar,
    .profile-avatar,
    .user-avatar,
    .account-avatar,
    .notification-dot
){
    border-radius:50% !important;
}

/* More restrained shadows across internal surfaces. */
body :where(
    .modal-content,
    .dropdown-menu,
    .toast,
    .auth-card,
    .account-card,
    .checkout-card,
    .order-summary,
    .payment-card
){
    box-shadow:0 14px 36px rgba(0,0,0,.07) !important;
}

/* Crisp separators create the luxury/editorial feel without decoration. */
body :where(
    .account-card,
    .checkout-card,
    .order-summary,
    .payment-card,
    .cart-item,
    .chx-section,
    .feature-card
) hr{
    border-color:#e3e3e3 !important;
}

/* Keep the entire storefront typography disciplined and consistent. */
body,
body *{
    font-family:var(--premium-font) !important;
}

/* Tighten headings slightly for a refined luxury-commerce rhythm. */
body :where(h1,h2,h3,h4,h5,h6){
    letter-spacing:-.035em !important;
    line-height:1.08 !important;
}

@media (max-width:768px){
    body :where(
        .account-card,
        .feature-card,
        .filter-widget,
        .payment-card,
        .checkout-card,
        .order-summary,
        .cart-item,
        .chx-card,
        .chx-section,
        .auth-card,
        .empty-products
    ){
        border-radius:0;
    }

    .product-image,
    .category-image{
        background:#fff !important;
    }
}

/* FINAL STOREFRONT FLAT PASS — visual only, functionality untouched */
body :where(.account-sidebar,.account-card,.account-stat,.order-card,.address-card,.account-welcome,
.cart-items,.cart-item,.summary-card,.product-gallery,.gallery-main,.gallery-thumb,
.product-info-accordions,.product-info-accordion,.wishlist-card,.payment-card,.payment-header,
.auth-card,.auth-benefit,.reviews-card,.review-card,.category-card,.product-card,
.chx-card,.chx-summary,.chx-choice,.chx-alert,.shop-banner,.filter-widget){
    border-radius:0 !important;
}
.account-welcome h2{color:#fff !important;}
.account-welcome::after{border-radius:0 !important;}
.cart-item{border:0 !important;border-bottom:1px solid #e3e3e3 !important;}
.cart-item:last-of-type{border-bottom:0 !important;}
.product-info-accordion-toggle i{border-radius:0 !important;}
.product-info-accordion-toggle{border-radius:0 !important;}


/* Typography update: luxury editorial headings + Neue Haas Unica Pro body. */
body, body *:not(i):not(.bi):not([class*='icon']) {
    font-family:var(--premium-font) !important;
}

h1, h2, h3, h4, h5, h6,
.product-title, .page-title, .section-title, .hero-title,
.account-title, .checkout-title, .cart-title, .heading {
    font-family:var(--premium-heading-font) !important;
}


/* PRODUCT PAGE — COMPACT EDITORIAL PASS
   Visual-only: no markup, PHP or JavaScript functionality changes. */
.product-details{
    padding:58px 0 !important;
}

.product-wrapper{
    gap:48px !important;
}

.product-gallery{
    top:100px !important;
}

.product-details .gallery-main{
    background:#fff !important;
}

.product-details .gallery-main img{
    max-width:none !important;
}

.product-info .product-title{
    margin-bottom:10px !important;
}

.product-sku{
    margin-bottom:15px !important;
}

.product-rating{
    margin-bottom:17px !important;
}

.product-price{
    margin-bottom:18px !important;
    gap:12px !important;
}

.current-price,
.old-price,
.product-description,
.product-sku,
.product-sku span{
    color:#111 !important;
}

.current-price{
    font-size:19px !important;
}

.old-price{
    color:#555 !important;
}

.availability{
    margin-bottom:20px !important;
}

.product-description{
    line-height:1.65 !important;
    margin-bottom:24px !important;
}

.product-info-accordions{
    margin-bottom:24px !important;
}

.product-features{
    gap:9px !important;
    margin-bottom:24px !important;
}

.product-features li{
    font-weight:600 !important;
    line-height:1.45 !important;
    color:#111 !important;
}

.product-features i{
    font-size:16px !important;
}

.product-options{
    margin-top:24px !important;
}

.option-group{
    margin-bottom:22px !important;
}

.purchase-actions{
    margin-top:20px !important;
}

@media (max-width: 992px){
    .product-details{
        padding:45px 0 !important;
    }

    .product-wrapper{
        gap:34px !important;
    }

    .product-details .gallery-main{
        background:#fff !important;
    }

    .product-details .gallery-main img{
        max-width:none !important;
    }
}

@media (max-width: 768px){
    .product-details{
        padding:38px 0 !important;
    }

    .product-details .gallery-main{
        background:#fff !important;
    }

    .product-details .gallery-main img{
        max-width:none !important;
    }

    .product-features{
        gap:8px !important;
        margin-bottom:20px !important;
    }
}

@media (max-width: 480px){
    .product-details{
        padding:30px 0 !important;
    }

    .product-details .gallery-main{
        background:#fff !important;
    }

    .product-details .gallery-main img{
        max-width:none !important;
    }

    .current-price{
        font-size:30px !important;
    }
}


/* ==========================================================
   GLOBAL TYPOGRAPHY SYSTEM
   Visual-only typography layer. Existing classes and markup
   remain unchanged.
   ========================================================== */
html,
body,
button,
input,
textarea,
select,
option,
label,
a,
p,
span,
small,
strong,
b,
em,
li,
td,
th{
    font-family:"KMR Waldenburg Buch", sans-serif !important;
}

/* Editorial / heading type */
h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.section-title,
.page-title,
.page-heading,
.hero-title,
.product-title,
.card-title,
.section-heading,
.page-title,
.checkout-title,
.account-title,
.cart-title{
    font-family:Inter, sans-serif !important;
}

/* Increase readable UI/body text without changing component classes. */
body{
    font-size:18px;
}

p,
li,
td,
th{
    font-size:18px;
}

button,
input,
textarea,
select,
option,
label{
    font-size:16px;
}

small{
    font-size:16px;
}

/* Keep icon fonts intact; typography applies through inheritance only. */

/* ==========================================================
   GLOBAL PRODUCT CARD — SAME VISUAL SYSTEM AS FEATURED PRODUCTS
   Visual-only rules. Existing HTML/PHP/JS and behavior unchanged.
   ========================================================== */
.product-card{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    border:1px solid #e5e5e5 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    transition:border-color .25s ease !important;
}
.product-card:hover{
    transform:none !important;
    border-color:#d2d2d2 !important;
    box-shadow:none !important;
}
.product-card .product-image{
    position:relative !important;
    width:100% !important;
    aspect-ratio:1 / 1.08 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#fafafa !important;
}
.product-card .product-image > a{
    display:block !important;
    width:100% !important;
    height:100% !important;
}
.product-card .product-image img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:cover !important;
    object-position:center !important;
    transition:none !important;
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
}
.product-card:hover .product-image img{
    transform:none !important;
    filter:none !important;
}
.product-card .product-badge{
    position:absolute !important;
    top:12px !important;
    left:12px !important;
    z-index:3 !important;
    padding:7px 10px !important;
    border-radius:0 !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:400 !important;
    letter-spacing:.04em !important;
}
.product-card .product-actions{
    position:absolute !important;
    right:12px !important;
    bottom:12px !important;
    z-index:4 !important;
    display:flex !important;
    gap:7px !important;
    opacity:0;
    transform:none !important;
    transition:opacity .2s ease !important;
}
.product-card:hover .product-actions,
.product-card .product-actions:focus-within{
    opacity:1 !important;
}
.product-card .product-actions a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:38px !important;
    height:38px !important;
    padding:0 !important;
    border:1px solid #e5e5e5 !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#151515 !important;
    box-shadow:none !important;
    text-decoration:none !important;
}
.product-card .product-actions a:hover{
    background:#111 !important;
    border-color:#111 !important;
    color:#fff !important;
    transform:none !important;
}
.product-card .product-content{
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:column !important;
    align-items:center !important;
    padding:18px 18px 20px !important;
    background:#fff !important;
    text-align:center !important;
}
.product-card .product-title{
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    text-align:center !important;
    font-family:Inter,sans-serif !important;
    font-size:16px !important;
    line-height:1.25 !important;
    font-weight:400 !important;
}
.product-card .product-title a{
    color:#111 !important;
    text-decoration:none !important;
}
.product-card .product-title a:hover{
    color:#111 !important;
}
.product-card .product-rating{
    margin-top:7px !important;
    color:#f2a900 !important;
    font-size:12px !important;
    line-height:1 !important;
    text-align:center !important;
}
.product-card .product-rating span{
    color:#888 !important;
    font-size:10px !important;
}
.product-card .product-price{
    display:flex !important;
    align-items:baseline !important;
    justify-content:center !important;
    gap:8px !important;
    margin-top:8px !important;
    line-height:1.1 !important;
    text-align:center !important;
}
.product-card .new-price,
.product-card .sale-price{
    color:#111 !important;
    font-size:19px !important;
    font-weight:400 !important;
}
.product-card .old-price,
.product-card .mrp{
    color:#999 !important;
    font-size:15px !important;
    text-decoration:line-through !important;
}
.product-card .product-content .btn-block,
.product-card .product-content .add-to-cart{
    width:100% !important;
    min-height:40px !important;
    margin-top:13px !important;
    border-radius:0 !important;
    box-shadow:none !important;
    font-size:11px !important;
    font-weight:400 !important;
    letter-spacing:.04em !important;
}

@media(max-width:760px){
    .product-card .product-actions{opacity:1;transform:none !important;}
}