:root {
    --navy:#061b3d;
    --green:#28a745;
    --text:#0b1d35;
    --muted:#627085;
    --mint:#eaf8ee;
    --shadow:0 22px 55px rgba(7,
    30,
    64,
    .12)
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Inter, Arial, sans-serif;
    color:var(--text);
    background:#fff
}

.container {
    width:min(1180px, 92%);
    margin:auto
}



.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255, 255, 255, .96);
    backdrop-filter:blur(16px);
    box-shadow:0 6px 24px rgba(11,
    29,
    53,
    .06)
}

.nav-wrap {
    height:82px;
    display:flex;
    align-items:center;
    gap:28px
}

.brand img {
    height:64px;
    width:auto;
    display:block
}

.main-nav {
    display:flex;
    align-items:center;
    gap:32px;
    margin-left:auto
}

.main-nav a,
.footer a {
    color:inherit;
    text-decoration:none;
    font-size:14px;
    font-weight:800
}

.main-nav a:hover {
    color:var(--green)
}

.mobile-login {
    display:none
}

.nav-dropdown {
    position:relative
}

.nav-dropdown>a span {
    font-size:16px;
    margin-left:5px
}

.dropdown-menu {
    position:absolute;
    top:34px;
    left:-22px;
    width:255px;
    background:#fff;
    border:1px solid #e5edf6;
    border-radius:16px;
    box-shadow:0 24px 55px rgba(6, 27, 61, .15);
    padding:12px;
    display:grid;
    gap:4px;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:.28s ease
}

.nav-dropdown:hover .dropdown-menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}

.dropdown-menu a {
    padding:12px 14px;
    border-radius:11px;
    font-size:13px
}

.dropdown-menu a:hover {
    background:#eefbea;
    color:var(--green)
}

.nav-actions {
    display:flex;
    align-items:center;
    gap:14px
}

.phone {
    color:var(--green);
    font-weight:900;
    text-decoration:none;
    font-size:14px
}

.login-btn {
    background:var(--navy);
    color:#fff;
    text-decoration:none;
    padding:14px 20px;
    border-radius:9px;
    font-weight:900;
    font-size:14px
}

.menu-toggle {
    display:none
}

.hero-slider {
    position:relative;
    min-height:530px;
    overflow:hidden;
    background:#eef7ff
}

.slide {
    position:absolute;
    inset:0;
    opacity:0;
    transform:translateX(30px);
    transition:opacity .8s ease,
    transform .8s ease
}

.slide.active {
    opacity:1;
    transform:translateX(0);
    z-index:2
}

.visual-slide {
    background:#eef7ff;
    display:grid;
    place-items:center
}

.visual-slide img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block
}

.offer-slide {
    position: relative;
    overflow: hidden;
}

.offer-slide::before {
    content: "";
    position: absolute;
    inset: 0;
  background: url('../img/bg.png') top center / cover no-repeat;
    
}

.offer-slide > * {
    position: relative;
    z-index: 1;
}

.hero-grid {
    display:grid;
    grid-template-columns:1fr 1.15fr;
    align-items:center;
    gap:30px;
    min-height:530px
}

.eyebrow {
    display:inline-block;
    background:#ecf9e8;
    color:#238b35;
    border:1px solid #bee8bd;
    border-radius:8px;
    padding:8px 12px;
    text-transform:uppercase;
    font-size:12px;
    font-weight:900
}

.hero-copy h1 {
    font-size:55px;
    line-height:1.05;
    margin:20px 0 15px;
    letter-spacing:-1px
}

.hero-copy h1 em {
    color:var(--green);
    font-style:normal
}

.hero-copy p {
    font-size:17px;
    line-height:1.7;
    color:#26364c;
    max-width:560px
}

.btn {
    display:inline-block;
    text-decoration:none;
    border-radius:10px;
    padding:15px 22px;
    font-weight:900;
    margin:10px 10px 10px 0;
    transition:.3s
}

.primary {
    background:var(--navy);
    color:#fff
}

.secondary,
.outline {
    background:#fff;
    color:var(--navy);
    border:1px solid #c9d4e3
}

.primary:hover,
.green-btn {
    background:var(--green);
    transform:translateY(-3px)
}

.trust-row {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:16px
}

.trust-row span {
    background:#fff;
    border:1px solid #e0e8f2;
    padding:12px 14px;
    border-radius:14px;
    font-weight:800;
    font-size:13px;
    box-shadow:0 10px 24px rgba(6,
    27,
    61,
    .08)
}

.hero-products {
    height:450px;
    position:relative
}

.hero-products img {
    position:absolute;
    object-fit:contain;
    filter:drop-shadow(0 26px 20px rgba(6, 27, 61, .20));
    animation:float 4s ease-in-out infinite
}

.hero-products .p1 {
    height:355px;
    left:0;
    bottom:35px
}

.hero-products .p2 {
    height:345px;
    left:22%;
    bottom:25px;
    animation-delay:.4s
}

.hero-products .p3 {
    height:395px;
    left:42%;
    bottom:25px;
    z-index:2;
    animation-delay:.8s
}

.hero-products .p4 {
    height:355px;
    right:0;
    bottom:35px;
    animation-delay:1.2s
}

@keyframes float {
    50% {
        transform:translateY(-14px)
    }

}

.slider-dots {
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    display:flex;
    gap:9px;
    z-index:4
}

.slider-dots button {
    width:10px;
    height:10px;
    border:0;
    border-radius:50%;
    background:#b8c7da;
    cursor:pointer
}

.slider-dots .active {
    background:var(--navy);
    width:28px;
    border-radius:20px
}

.section {
    padding:70px 0
}

.section-title {
    text-align:center;
    margin-bottom:34px
}

.section-title h2,
.industries h2 {
    font-size:34px;
    margin:0 0 10px;
    color:var(--navy)
}

.section-title p {
    color:var(--muted);
    margin:0
}

.category-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px
}

.category-card {
    position:relative;
    min-height:190px;
    border-radius:16px;
    overflow:hidden;
    padding:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 12px 30px rgba(9, 31, 66, .08);
    opacity:0;
    transform:translateY(25px);
    transition:opacity .7s ease,
    transform .7s ease,
    box-shadow .35s ease,
    background .35s ease
}

.category-card.show {
    opacity:1;
    transform:translateY(0)
}

.category-card:hover {
    transform:translateY(-9px) scale(1.015);
    box-shadow:var(--shadow)
}

.category-card:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(40, 167, 69, .12), rgba(6, 27, 61, .04));
    opacity:0;
    transition:.35s
}

.category-card:hover:before {
    opacity:1
}

.cat-copy {
    position:relative;
    z-index:2
}

.category-card h3 {
    font-size:18px;
    text-transform:uppercase;
    margin:16px 0 8px
}

.category-card p {
    font-size:14px;
    color:#314054;
    line-height:1.5;
    max-width:210px
}

.category-card a {
    font-weight:900;
    font-size:13px;
	text-decoration:none;
	color:#000
	
}
.category-card a:hover{color:#197abf}
.line-icon {
    width:42px;
    height:42px;
    border:2px solid currentColor;
    border-radius:12px;
    display:grid;
    place-items:center;
    font-size:25px;
    line-height:1
}

.category-card img {
    height:150px;
    max-width:160px;
    object-fit:contain;
    transition:.35s;
    position:relative;
    z-index:2
}

.category-card:hover img {
    transform:scale(1.12) rotate(2deg)
}

.green {
    background:linear-gradient(135deg,
    #eefdec,
    #fff)
}

.purple {
    background:linear-gradient(135deg,
    #f0edff,
    #fff)
}

.yellow {
    background:linear-gradient(135deg,
    #fff8dc,
    #fff)
}

.pink {
    background:linear-gradient(135deg,
    #fff0f8,
    #fff)
}

.blue {
    background:linear-gradient(135deg,
    #eaf7ff,
    #fff)
}

.cyan {
    background:linear-gradient(135deg,
    #e9ffff,
    #fff)
}

.orange {
    background:linear-gradient(135deg,
    #fff3e6,
    #fff)
}

.sky {
    background:linear-gradient(135deg,
    #edf7ff,
    #fff)
}

.mint {
    background:linear-gradient(135deg,
    #eefdec,
    #fff)
}

.industries {
    background:var(--navy);
    color:#fff;
    padding:38px 0;
    margin:20px auto;
    border-radius:18px;
    width:min(1180px, 92%);
    text-align:center
}

.industries h2 {
    color:#fff
}

.industry-grid {
    display:grid;
    grid-template-columns:repeat(8, 2fr);
    gap:8px
}

.industry-card {
    padding:22px 10px;
    border-radius:14px;
    border:1px solid rgba(255, 255, 255, .12);
    font-size:32px;
    transition:.3s;
    cursor:pointer
}

.industry-card span {
    display:block;
    font-size:13px;
    font-weight:800;
    margin-top:12px
}

.industry-card:hover {
    background:#fff;
    color:var(--navy);
    transform:translateY(-8px);
    box-shadow:0 18px 30px rgba(0,
    0,
    0,
    .18)
}

.why-grid {
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:24px;
    text-align:center
}

.why-grid i {
    display:grid;
    place-items:center;
    width:70px;
    height:70px;
    background:var(--mint);
    color:var(--green);
    border-radius:50%;
    margin:0 auto 14px;
    font-style:normal;
    font-weight:900;
    font-size:25px
}

.why-grid h4 {
    margin:0 0 7px;
    color:var(--navy)
}

.why-grid p {
    margin:0;
    color:var(--muted);
    font-size:13px
}

.testimonials {
    padding-top:35px
}

.testimonial-window {
    overflow:hidden
}

.testimonial-track {
    display:flex;
    gap:24px;
    animation:testimonialSlide 5s linear infinite
}

.testimonial-window:hover .testimonial-track {
    animation-play-state:paused
}

.testimonial-card {
    min-width:360px;
    background:#fff;
    border:1px solid #e2e9f2;
    border-radius:16px;
    padding:28px;
    box-shadow:0 12px 30px rgba(9,
    31,
    66,
    .07)
}

.testimonial-card b {
    color:#ffc107;
    letter-spacing:2px
}

.testimonial-card p {
    line-height:1.7;
    color:#304056
}

.testimonial-card h4 {
    margin:18px 0 4px;
    color:var(--navy)
}

.testimonial-card span {
    color:var(--muted);
    font-size:13px
}

@keyframes testimonialSlide {
    to {
        transform:translateX(-50%)
    }

}

.cta-section {
    padding-top:25px;
    padding-bottom:60px
}

.cta {
    display:grid;
    grid-template-columns:.9fr 1.6fr;
    gap:36px;
    align-items:center;
    background:linear-gradient(105deg, #061b3d, #0b2e64 60%, #113b79);
    border-radius:18px;
    color:#fff;
    padding:34px 48px;
    overflow:hidden
}

.cta-products {
    display:flex;
    align-items:flex-end
}

.cta-products img {
    height:170px;
    margin-right:-28px;
    filter:drop-shadow(0 18px 14px rgba(0,
    0,
    0,
    .28))
}

.cta h2 {
    font-size:36px;
    margin:0 0 4px
}

.cta h3 {
    font-size:31px;
    color:#43d05b;
    margin:0 0 8px
}

.footer {
    background:#071527;
    color:#dbe5f0;
    padding:48px 0 22px;
    position:relative
}

.footer-grid {
    display:grid;
    grid-template-columns:1.5fr repeat(4, 1fr);
    gap:32px
}

.footer-logo {
    height:58px
}

.footer h4 {
    color:#fff
}

.footer a {
    display:block;
    color:#fff;
    margin:10px 0
}

.footer p {
    color:#aebccd;
    line-height:1.7;
    font-size:14px
}

.copyright {
    text-align:center;
    border-top:1px solid rgba(255, 255, 255, .1);
    margin-top:30px;
    padding-top:20px;
    color:#91a3b8;
    font-size:13px
}

.whatsapp {
    position:fixed;
    left:20px;
    bottom:20px;
    background:#25d366;
    color:#fff;
    text-decoration:none;
    padding:14px 19px;
    border-radius:999px;
    font-weight:900;
    box-shadow:0 12px 26px rgba(37, 211, 102, .35);
    z-index:20
}

@media (max-width:980px) {
    .main-nav,
    .nav-actions {
        display:none
    }

.menu-toggle {
        display:block;
        margin-left:auto;
        background:var(--navy);
        color:white;
        border:0;
        border-radius:8px;
        padding:10px 13px
    }

.main-nav.open {
        position:absolute;
        top:82px;
        left:0;
        right:0;
        background:#fff;
        display:grid;
        padding:22px;
        box-shadow:0 12px 28px rgba(0,
        0,
        0,
        .08)
    }

.main-nav.open .mobile-login {
        display:block
    }

.dropdown-menu {
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        box-shadow:none;
        width:auto;
        border:0
    }

.hero-grid,
    .cta {
        grid-template-columns:1fr
    }

.hero-copy h1 {
        font-size:42px
    }

.hero-products {
        height:390px
    }

.category-grid {
        grid-template-columns:1fr 1fr
    }

.industry-grid,
    .why-grid {
        grid-template-columns:repeat(2,
        1fr)
    }

.footer-grid {
        grid-template-columns:1fr 1fr
    }

}

@media (max-width:620px) {
    .nav-wrap {
        height:72px
    }

.brand img {
        height:55px
    }

.hero-slider {
        min-height:390px
    }

.offer-slide .hero-grid {
        min-height:720px;
        padding-top:18px
    }

.hero-products {
        height:200px
    }

.hero-products img {
        max-height:250px
    }

.hero-copy h1 {
        font-size:30px
    }

.category-grid {
        grid-template-columns:1fr
    }

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

.cta-products img {
        height:120px
    }

.cta {
        padding:30px 22px
    }

.testimonial-card {
        min-width:300px
    }

.phone {
        display:none
    }

}

/* SVG icon fixes and visibility fallback */
 .trust-row span  {
     display: inline-flex;
     align-items: center;
     gap: 9px;

}

.trust-row span img  {
     width: 18px;
     height: 18px;
     object-fit: contain;
     flex: 0 0 auto;

}

.line-icon  {
     width: 52px;
     height: 52px;
     border: 0;
     border-radius: 16px;
   /*  background: rgba(255, 255, 255, .72);
     box-shadow: 0 10px 22px rgba(6, 27, 61, .08);*/
     display: inline-grid;
     place-items: center;
     line-height: 1;
     margin-bottom: 2px;
     transition: transform .35s ease,  box-shadow .35s ease,  background .35s ease;

}

.line-icon img  {
     width: 31px;
     height: 31px;
     object-fit: contain;
     display: block;

}

.category-card:hover .line-icon  {
     transform: scale(1.08) rotate(-2deg);
     background: #fff;
     box-shadow: 0 14px 30px rgba(6, 27, 61, .12);

}

/* Keep product images separate from icon images */
 .category-card > img  {
     height: 165px;
     max-width: 160px;
     object-fit: contain;
     transition: .35s;
     position: relative;
     z-index: 2;

}

.category-card:hover > img  {
     transform: scale(1.12) rotate(2deg);

}

/* Do not hide categories if the reveal JS fails or loads late */
 .category-card  {
     opacity: 1;
     transform: translateY(0);

}

.industry-card  {
     display: flex;
     min-height: 128px;
     align-items: center;
     justify-content: center;
     flex-direction: column;

}

.industry-card img  {
     width: 46px;
     height: 46px;
     object-fit: contain;
     display: block;
     margin: 0 auto 12px;
     filter: brightness(0) invert(1);
     transition: transform .35s ease,  filter .35s ease;

}

.industry-card:hover img  {
     filter: none;
     transform: scale(1.12);

}

/* Hero slider visibility protection */
 .hero-slider .slide.active  {
     display: block;
     opacity: 1;
     visibility: visible;

}

.hero-slider .visual-slide.active,
 .hero-slider .offer-slide.active  {
     z-index: 3;

}

/* ========================================================= Slider + SVG Visibility Fix ========================================================= */
 .hero-slider  {
     position: relative;
     min-height: 530px;
     overflow: hidden;

}

.hero-slider .slide  {
     position: absolute;
     inset: 0;
     opacity: 0;
     visibility: hidden;
     transform: translateX(100%);
     transition: transform .85s cubic-bezier(.22, .61, .36, 1),  opacity .85s ease,  visibility .85s ease;
     z-index: 1;
     pointer-events: none;

}

.hero-slider .slide.active  {
     opacity: 1;
     visibility: visible;
     transform: translateX(0);
     z-index: 3;
     pointer-events: auto;

}

.hero-slider .slide.leaving-left  {
     opacity: 1;
     visibility: visible;
     transform: translateX(-100%);
     z-index: 2;

}

.hero-slider .slide.leaving-right  {
     opacity: 1;
     visibility: visible;
     transform: translateX(100%);
     z-index: 2;

}

.hero-slider .slide.from-left  {
     transform: translateX(-100%);

}

.slider-dots button  {
     transition: width .3s ease,  background .3s ease,  transform .3s ease;

}

.slider-dots button:hover  {
     transform: scale(1.15);

}

/* Keep categories visible even if JS fails */
 .category-card  {
     opacity: 1;
     transform: translateY(0);

}

/* Smooth appearing animation when JS is active */
 .js-ready .category-card  {
     opacity: 0;
     transform: translateY(26px);

}

.js-ready .category-card.show  {
     opacity: 1;
     transform: translateY(0);

}

/* Keep hover movement after reveal */
 .js-ready .category-card.show:hover,
 .category-card:hover  {
     transform: translateY(-9px) scale(1.015);

}

/* SVG icon sizing */
 .line-icon  {
     width: 52px;
     height: 52px;
     border: 0;
     border-radius: 16px;

    /* background: rgba(255,255,255,.74); */

    /* box-shadow: 0 10px 22px rgba(6,27,61,.08); */
 display: inline-grid;
     place-items: center;
     margin-bottom: 2px;

}

.line-icon img  {
     width: 42px;
     height: 42px;
     object-fit: contain;
     display: block;

}

.category-card > img  {
     height: 165px;
     max-width: 160px;
     object-fit: contain;
     transition: .35s;
     position: relative;
     z-index: 2;

}

.category-card:hover > img  {
     transform: scale(1.12) rotate(2deg);

}

.category-card:hover .line-icon  {
     transform: scale(1.08) rotate(-2deg);
     background: #fff;

}

.trust-row span  {
     display: inline-flex;
     align-items: center;
     gap: 9px;

}

.trust-row span img  {
     width: 18px;
     height: 18px;
     object-fit: contain;

}

.industry-card  {
     display: flex;
     min-height: 128px;
     align-items: center;
     justify-content: center;
     flex-direction: column;

}

.industry-card img  {
     width: 46px;
     height: 46px;
     object-fit: contain;
     display: block;
     margin: 0 auto 12px;
     filter: brightness(0) invert(1);
     transition: transform .35s ease,  filter .35s ease;

}

.industry-card:hover img  {
     filter: none;
     transform: scale(1.12);

}
/* =========================================================
   Blog Section
========================================================= */

.blog-section {
    background: #f7fbff;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.blog-card {
    background: #ffffff;
    border: 1px solid #e4edf7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(9, 31, 66, 0.08);
    transition: all 0.35s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
}

.blog-image {
    height: 210px;
    background: linear-gradient(135deg, #eaf7ff, #eefdec);
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-content {
    padding: 24px;
}

.blog-date {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
}

.blog-content h3 {
    margin: 0 0 12px;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.35;
}

.blog-content p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

.blog-btn {
    color: var(--navy);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-btn:hover {
    color: var(--green);
}

.blog-view-all {
    margin-top: 36px;
    text-align: center;
}

/* Blog Responsive */
@media (max-width: 980px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-image {
        height: 190px;
    }

    .blog-content {
        padding: 22px;
    }

    .blog-content h3 {
        font-size: 18px;
    }
	
	.btn {
    display: inline-block;
    text-decoration: none;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
    margin: 0px 3px !important;
    transition: .3s;
	
	font-size: 15px;
}
.hero-copy p {
font-size: 14px;}

.hero-slider {
 
    min-height: 620px;
 
}
.section-title h2, .industries h2 {
    font-size: 28px;

}
.testimonial-track {
    display:flex;
    gap:24px;
    animation:testimonialSlide 2s linear infinite
}
.basket-floating {
        right: 14px;
        bottom: 84px;
        z-index: 10001;
    }

    .basket-toggle {
        width: 54px;
        height: 54px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .basket-icon {
        width: auto;
        height: auto;
        background: transparent;
        font-size: 22px;
    }

    .basket-text {
        position: absolute;
        inset: 0;
        font-size: 0;
    }

    .basket-text strong {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 22px;
        height: 22px;
        font-size: 11px;
        border: 2px solid #ffffff;
    }

}

 .before-login-panel {
            background: linear-gradient(105deg, #061b3d, #0b2e64 60%, #113b79);
        }

        .before-login-panel strong {
            font-size: 21px;
            line-height: 1.35;
        }

        .variant-note {
            margin: 12px 0 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .cart-actions .btn {
            text-align: center;
        }

        @media (max-width: 620px) {
            .cart-actions .btn {
                display: block;
                width: 100%;
            }
        }
		
/* =========================================================
   Dasen About Page
========================================================= */

.about-hero {
    padding: 72px 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
        url("../img/bg.jpg") center center / cover no-repeat;
    overflow: hidden;
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 52px;
    align-items: center;
}

.about-hero-content h1 {
    margin: 20px 0 16px;
    color: var(--navy);
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -2px;
}

.about-hero-content h1 em {
    color: var(--green);
    font-style: normal;
}

.about-hero-content p {
    max-width: 620px;
    color: #26364c;
    font-size: 17px;
    line-height: 1.8;
}

.about-hero-actions {
    margin-top: 24px;
}

.about-hero-card {
    position: relative;
    padding: 34px;
    border: 1px solid #dfeaf6;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 28px 70px rgba(6, 27, 61, 0.13);
    backdrop-filter: blur(14px);
}

.about-hero-card::before {
    content: "";
    position: absolute;
    inset: 28px;
    z-index: 0;
    border-radius: 28px;
    background: linear-gradient(145deg, #eaf8ee, #eef7ff);
}

.about-product-cluster {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 320px;
    align-items: flex-end;
    justify-content: center;
}

.about-product-cluster img {
    max-height: 250px;
    max-width: 130px;
    object-fit: contain;
    margin: 0 -12px;
    filter: drop-shadow(0 22px 18px rgba(6, 27, 61, 0.24));
}

.about-product-cluster img:nth-child(2) {
    max-height: 285px;
}

.about-product-cluster img:nth-child(3) {
    max-height: 230px;
}

.about-product-cluster img:nth-child(4) {
    max-height: 300px;
}

.hero-quality-badges {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 22px;
}

.hero-quality-badges div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border: 1px solid #e4edf7;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
}

.hero-quality-badges span,
.flat-icon,
.quality-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--mint);
    color: var(--green);
}

.hero-quality-badges span {
    width: 38px;
    height: 38px;
}

.hero-quality-badges svg,
.flat-icon svg,
.quality-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.section-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.about-intro {
    background: #ffffff;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 54px;
}

.about-intro h2 {
    margin: 0;
    color: var(--navy);
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: -1px;
}

.about-intro p {
    margin: 0 0 18px;
    color: #304056;
    font-size: 16px;
    line-height: 1.8;
}

.vision-mission {
    background: #f7fbff;
}

.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.vm-card,
.quality-grid article,
.range-grid article {
    padding: 30px;
    border: 1px solid #e4edf7;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(6, 27, 61, 0.07);
}

.flat-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 20px;
}

.flat-icon svg {
    width: 34px;
    height: 34px;
}

.vm-card h3,
.quality-grid h3,
.range-grid h3,
.partner-cards h3 {
    margin: 0 0 12px;
    color: var(--navy);
}

.vm-card p,
.vm-card li,
.quality-grid p,
.quality-grid li,
.range-grid p,
.partner-content p,
.partner-cards li {
    color: #304056;
    line-height: 1.7;
}

.vm-card ul,
.quality-grid ul,
.partner-cards ul {
    margin: 0;
    padding-left: 20px;
}

.quality-section {
    background: #ffffff;
}

.quality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.quality-grid article {
    background: linear-gradient(145deg, #ffffff, #f7fbff);
}

.quality-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
}

.quality-icon svg {
    width: 30px;
    height: 30px;
}

.product-range-section {
    background: #f7fbff;
}

.range-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.range-grid article {
    transition: 0.3s ease;
}

.range-grid article:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
}

.range-grid span {
    display: grid;
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
    place-items: center;
    border-radius: 18px;
    background: var(--mint);
    font-size: 28px;
}

.industries-about {
    background: #ffffff;
}

.industries-about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.industries-about-grid div {
    padding: 18px;
    border: 1px solid #e4edf7;
    border-radius: 16px;
    background: #f7fbff;
    color: var(--navy);
    font-weight: 900;
    text-align: center;
}

.partner-section {
    background:
        linear-gradient(rgba(6, 27, 61, 0.92), rgba(6, 27, 61, 0.92)),
        url("../img/bg.jpg") center center / cover no-repeat;
    color: #ffffff;
}

.partner-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 42px;
    align-items: center;
}

.partner-content h2 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.25;
}

.partner-content p {
    color: #dbe5f0;
}

.partner-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.partner-cards article {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.partner-cards h3 {
    color: #ffffff;
}

.partner-cards li {
    color: #dbe5f0;
}

.about-cta {
    padding: 52px 0;
    background: #ffffff;
}

.about-cta-box {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: center;
    padding: 38px 42px;
    border-radius: 24px;
    background: linear-gradient(105deg, #061b3d, #0b2e64 60%, #113b79);
    color: #ffffff;
}

.about-cta-box h2 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 34px;
}

.about-cta-box p {
    margin: 0;
    color: #dbe5f0;
}

@media (max-width: 980px) {
    .about-hero-grid,
    .about-intro-grid,
    .partner-grid {
        grid-template-columns: 1fr;
    }

    .quality-grid,
    .range-grid,
    .industries-about-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-hero-content h1 {
        font-size: 44px;
    }
}

@media (max-width: 620px) {
    .about-hero {
        padding: 46px 0;
    }

    .about-hero-content h1 {
        font-size: 36px;
    }

    .about-hero-card {
        padding: 20px;
    }

    .about-product-cluster {
        min-height: 250px;
    }

    .about-product-cluster img {
        max-width: 90px;
        max-height: 220px;
    }

    .hero-quality-badges,
    .vm-grid,
    .quality-grid,
    .range-grid,
    .industries-about-grid,
    .partner-cards {
        grid-template-columns: 1fr;
    }

    .about-intro h2,
    .partner-content h2,
    .about-cta-box h2 {
        font-size: 28px;
    }

    .about-cta-box {
        align-items: flex-start;
        flex-direction: column;
        padding: 30px 24px;
    }
}



/* =========================================================
   About Hero Product Image Visual
========================================================= */

.about-hero-visual {
    position: relative;
}

.about-image-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid #dfeaf6;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(6, 27, 61, 0.14);
}

.about-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0.38) 100%
    );
    pointer-events: none;
}

.about-image-wrap img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center;
}

.about-floating-badges {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.about-floating-badges div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 12px;
    border: 1px solid rgba(223, 234, 246, 0.95);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
    box-shadow: 0 12px 28px rgba(6, 27, 61, 0.10);
    backdrop-filter: blur(12px);
}

.about-floating-badges span {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 980px) {
    .about-image-wrap img {
        height: 470px;
    }
}

@media (max-width: 620px) {
    .about-image-wrap {
        border-radius: 22px;
    }

    .about-image-wrap img {
        height: 390px;
        object-position: center;
    }

    .about-floating-badges {
        position: static;
        grid-template-columns: 1fr;
        margin-top: 14px;
    }

    .about-floating-badges div {
        min-height: auto;
    }
}
		
/* =========================================================
   Dasen Login & Register Pages
   Keep this file after your main style.css
========================================================= */

.auth-page {
    min-height: calc(100vh - 82px);
    padding: 70px 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.84)),
        url("../img/bg.jpg") center center / cover no-repeat;
}

.auth-wrap {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 42px;
    align-items: center;
}

.auth-content {
    max-width: 520px;
}

.auth-badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 13px;
    border: 1px solid #bee8bd;
    border-radius: 8px;
    background: #ecf9e8;
    color: #238b35;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-content h1 {
    margin: 0 0 16px;
    color: var(--navy);
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.auth-content h1 em {
    color: var(--green);
    font-style: normal;
}

.auth-content p {
    margin: 0 0 26px;
    color: #26364c;
    font-size: 16px;
    line-height: 1.7;
}

.auth-benefits {
    display: grid;
    gap: 14px;
}

.auth-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid #e0e8f2;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 24px rgba(6, 27, 61, 0.07);
}

.auth-benefit span {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--mint);
    color: var(--green);
    font-weight: 900;
}

.auth-benefit strong {
    display: block;
    margin-bottom: 3px;
    color: var(--navy);
    font-size: 14px;
}

.auth-benefit small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.auth-card {
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    padding: 34px;
    border: 1px solid #dfeaf6;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 28px 70px rgba(6, 27, 61, 0.13);
    backdrop-filter: blur(14px);
}

.auth-card h2 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 30px;
}

.auth-card .form-note {
    margin: 0 0 26px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.auth-form {
    display: grid;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border: 1px solid #d7e2ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 14px 15px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border 0.28s ease, box-shadow 0.28s ease;
}

.form-group textarea {
    min-height: 92px;
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.12);
}

.form-extra {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    color: var(--muted);
    font-size: 13px;
}

.form-extra label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.form-extra a,
.auth-switch a {
    color: var(--green);
    font-weight: 900;
    text-decoration: none;
}

.auth-submit {
    width: 100%;
    border: 0;
    cursor: pointer;
    margin-top: 4px;
    text-align: center;
}

.auth-switch {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.auth-divider {
    position: relative;
    margin: 24px 0;
    text-align: center;
}

.auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e4edf7;
}

.auth-divider span {
    position: relative;
    padding: 0 14px;
    background: #ffffff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.auth-support {
    padding: 16px;
    border-radius: 14px;
    background: #f7fbff;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.auth-support a {
    color: var(--navy);
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 980px) {
    .auth-wrap {
        grid-template-columns: 1fr;
    }

    .auth-content,
    .auth-card {
        max-width: 100%;
    }

    .auth-card {
        margin-left: 0;
    }
}

@media (max-width: 620px) {
    .auth-page {
        padding: 42px 0;
    }

    .auth-content h1 {
        font-size: 36px;
    }

    .auth-card {
        padding: 24px;
        border-radius: 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-extra {
        align-items: flex-start;
        flex-direction: column;
    }

}

.reg {
    width: 600px;

}

@media (max-width: 768px) {
    .reg {
        width: 100%;
    }
}

/* ==========================================
   CONTACT PAGE
========================================== */

.contact-section{
    padding:80px 0;
    background:#f8fbff;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:40px;
    align-items:start;
}

/* ==========================================
   LEFT INFO CARD
========================================== */

.contact-info-card{
    background:#ffffff;
    border:1px solid #e5edf7;
    border-radius:24px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    position:sticky;
    top:120px;
}

.contact-logo{
    max-width:180px;
    margin-bottom:25px;
}

.contact-info-card h2{
    font-size:28px;
    font-weight:800;
    line-height:1.3;
    color:#062a5b;
    margin-bottom:30px;
}

.info-item{
    display:flex;
    gap:15px;
    margin-bottom:25px;
}

.info-icon{
    width:52px;
    height:52px;
    min-width:52px;
    border-radius:14px;
    background:#ecf8ee;
    color:#39b54a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.info-item h4{
    font-size:15px;
    font-weight:700;
    margin-bottom:5px;
    color:#062a5b;
}

.info-item p{
    margin:0;
    color:#555;
    line-height:1.7;
    font-size:15px;
}

.info-item a{
    color:#062a5b;
    text-decoration:none;
    font-weight:600;
}

.contact-tagline{
    margin-top:30px;
    padding:20px;
    border-radius:16px;
    background:#f6fbf6;
    border-left:4px solid #39b54a;
    color:#062a5b;
    font-size:18px;
    font-weight:700;
    line-height:1.6;
}

/* ==========================================
   FORM CARD
========================================== */

.contact-form-card{
    background:#ffffff;
    border:1px solid #e5edf7;
    border-radius:24px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.section-heading.left{
    text-align:left;
    margin-bottom:35px;
}

.section-heading.left span{
    display:inline-block;
    padding:8px 15px;
    background:#eef9f0;
    color:#39b54a;
    border-radius:50px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:15px;
}

.section-heading.left h2{
    font-size:38px;
    font-weight:800;
    color:#062a5b;
    margin-bottom:10px;
}

.section-heading.left p{
    color:#666;
    line-height:1.8;
}

/* ==========================================
   FORM
========================================== */

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:700;
    color:#062a5b;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    height:54px;
    padding:0 18px;
    border:1px solid #dfe7f1;
    border-radius:12px;
    background:#fff;
    font-size:15px;
    transition:.3s;
    font-family:inherit;
}

.form-group textarea{
    height:130px;
    padding:15px 18px;
    resize:none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;
    border-color:#39b54a;
    box-shadow:0 0 0 4px rgba(57,181,74,.08);
}

.btn-primary{
    background:#062a5b;
    color:#fff;
    border:none;
    padding:15px 35px;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.btn-primary:hover{
    background:#39b54a;
}

/* ==========================================
   FACTORY LOCATION
========================================== */

.factory-location{
    padding:0 0 80px;
    background:#f8fbff;
}

.section-heading.center{
    text-align:center;
    margin-bottom:45px;
}

.section-heading.center span{
    display:inline-block;
    padding:8px 15px;
    background:#eef9f0;
    color:#39b54a;
    border-radius:50px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:15px;
}

.section-heading.center h2{
    font-size:42px;
    color:#062a5b;
    margin-bottom:10px;
}

.section-heading.center p{
    color:#666;
}

.factory-card{
    display:grid;
    grid-template-columns:380px 1fr;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
    border:1px solid #e5edf7;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.factory-content{
    padding:45px;
    background:linear-gradient(
    135deg,
    #062a5b,
    #0c3977);
    color:#fff;
}

.factory-content h3{
    font-size:28px;
    margin-bottom:20px;
}

.factory-content p{
    line-height:2;
    margin-bottom:30px;
    opacity:.9;
}

.btn-outline{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 30px;
    border-radius:12px;
    background:#39b54a;
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

.factory-map iframe{
    width:100%;
    height:100%;
    min-height:420px;
    border:none;
}

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

@media(max-width:991px){

    .contact-wrapper{
        grid-template-columns:1fr;
    }

    .contact-info-card{
        position:relative;
        top:auto;
    }

    .factory-card{
        grid-template-columns:1fr;
    }

    .factory-content{
        text-align:center;
    }
}

@media(max-width:767px){

    .contact-section{
        padding:60px 0;
    }

    .contact-info-card,
    .contact-form-card{
        padding:25px;
    }

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

    .section-heading.left h2{
        font-size:30px;
    }

    .section-heading.center h2{
        font-size:32px;
    }

    .factory-content{
        padding:30px;
    }

    .factory-map iframe{
        min-height:320px;
    }

    .btn-primary,
    .btn-outline{
        width:100%;
        justify-content:center;
    }
}

/* =========================================================
   WooCommerce — Cart / Checkout / My Account page styling
   Uses theme variables so it matches the rest of the site
========================================================= */

.dasen-page .woocommerce,
.dasen-page .woocommerce-page {
    font-family: Inter, Arial, sans-serif;
}

/* Cart table */
.dasen-page .woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e4edf7;
    border-radius: 18px;
    overflow: hidden;
}

.dasen-page .woocommerce table.shop_table th {
    background: var(--navy);
    color: #ffffff;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 900;
    text-align: left;
}

.dasen-page .woocommerce table.shop_table td {
    padding: 16px 18px;
    border-bottom: 1px solid #e4edf7;
    vertical-align: middle;
    color: var(--text);
    font-size: 14px;
}

.dasen-page .woocommerce table.shop_table tr:last-child td {
    border-bottom: 0;
}

.dasen-page .woocommerce table.shop_table tr:nth-child(even) td {
    background: #f7fbff;
}

/* Cart product images */
.dasen-page .woocommerce table.cart .product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid #e4edf7;
    background: #f7fbff;
    padding: 6px;
}

/* Qty input in cart */
.dasen-page .woocommerce .quantity .input-text {
    width: 72px;
    padding: 10px 12px;
    border: 1px solid #d8e3ef;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    color: var(--navy);
    text-align: center;
}

/* Cart totals box */
.dasen-page .cart_totals,
.dasen-page .woocommerce-checkout-review-order {
    padding: 28px;
    border: 1px solid #e4edf7;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(6, 27, 61, 0.07);
}

.dasen-page .cart_totals h2,
.dasen-page .woocommerce-billing-fields h3,
.dasen-page .woocommerce-shipping-fields h3 {
    margin: 0 0 18px;
    color: var(--navy);
    font-size: 22px;
}

/* WooCommerce buttons */
.dasen-page .woocommerce .button,
.dasen-page .woocommerce button.button,
.dasen-page .woocommerce input.button,
.dasen-page .woocommerce #respond input#submit {
    display: inline-block;
    background: var(--navy);
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    padding: 14px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s;
}

.dasen-page .woocommerce .button:hover,
.dasen-page .woocommerce button.button:hover {
    background: var(--green);
}

.dasen-page .woocommerce .button.alt,
.dasen-page .woocommerce .checkout-button,
.dasen-page .woocommerce #place_order {
    background: var(--green);
}

.dasen-page .woocommerce .button.alt:hover,
.dasen-page .woocommerce .checkout-button:hover,
.dasen-page .woocommerce #place_order:hover {
    background: #1f8f39;
}

/* Form fields */
.dasen-page .woocommerce form .form-row input.input-text,
.dasen-page .woocommerce form .form-row textarea,
.dasen-page .woocommerce form .form-row select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d8e3ef;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: #ffffff;
    box-sizing: border-box;
}

.dasen-page .woocommerce form .form-row input.input-text:focus,
.dasen-page .woocommerce form .form-row textarea:focus,
.dasen-page .woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.12);
}

.dasen-page .woocommerce form .form-row label {
    display: block;
    margin-bottom: 6px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
}

/* Notices */
.dasen-page .woocommerce-message,
.dasen-page .woocommerce-info,
.dasen-page .woocommerce-error {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 800;
}

.dasen-page .woocommerce-message {
    background: #ecf9e8;
    border-left: 4px solid var(--green);
    color: #238b35;
}

.dasen-page .woocommerce-info {
    background: #eaf7ff;
    border-left: 4px solid #0b8fd4;
    color: #0b5c8a;
}

.dasen-page .woocommerce-error {
    background: #fff0f0;
    border-left: 4px solid #dc3545;
    color: #a91c2a;
}

/* My Account — nav */
.dasen-page .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.dasen-page .woocommerce-MyAccount-navigation li a {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid #d8e3ef;
    border-radius: 999px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    transition: 0.2s;
}

.dasen-page .woocommerce-MyAccount-navigation li.is-active a,
.dasen-page .woocommerce-MyAccount-navigation li a:hover {
    background: var(--navy);
    color: #ffffff;
    border-color: var(--navy);
}

/* Responsive */
@media (max-width: 768px) {
    .dasen-page .woocommerce table.shop_table {
        display: block;
        overflow-x: auto;
    }
}

/* =========================================================
   Dasen Toast Notification + Cart Loading State
========================================================= */

.dasen-toast {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 9999;
    padding: 13px 20px;
    border-radius: 12px;
    background: var(--navy);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 12px 34px rgba(6, 27, 61, 0.25);
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 320px;
}

.dasen-toast--show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dasen-toast--success {
    background: #1a7a31;
}

.dasen-toast--error {
    background: #c0392b;
}

/* Cart drawer loading overlay */
.gc-loading {
    position: absolute;
    inset: 80px 0 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
}

.gc-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 4px solid #e4edf7;
    border-top-color: var(--green);
    border-radius: 50%;
    animation: gcSpin 0.7s linear infinite;
}

@keyframes gcSpin {
    to { transform: rotate(360deg); }
}

/* Ensure drawer has position:relative for the loading overlay */
#globalCartDrawer {
    position: fixed;
}

/* =========================================================
   WooCommerce Archive — Product Loop
========================================================= */

/* ── Archive Hero ─────────────────────────────────────── */
.archive-hero {
    padding: 48px 0 36px;
    background:
        linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.88)),
        url('../img/bg.png') center / cover no-repeat;
    border-bottom: 1px solid #e4edf7;
}

.archive-hero .breadcrumb,
.archive-hero .woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.archive-hero .woocommerce-breadcrumb a { color: var(--navy); text-decoration: none; }

.archive-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.archive-hero-inner h1 {
    margin: 10px 0 8px;
    color: var(--navy);
    font-size: 38px;
    letter-spacing: -1px;
}

.archive-hero-inner p {
    max-width: 600px;
    color: #304056;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.archive-meta span {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #dfeaf6;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

/* ── Filter Chips ─────────────────────────────────────── */
.archive-filters {
    background: #ffffff;
    border-bottom: 1px solid #e4edf7;
    padding: 14px 0;
    position: sticky;
    top: 82px;
    z-index: 40;
    box-shadow: 0 4px 12px rgba(6,27,61,0.06);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid #d8e3ef;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s;
    white-space: nowrap;
}

.filter-chip:hover,
.filter-chip.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.chip-count {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    font-size: 11px;
}

.filter-chip:not(.active) .chip-count {
    background: #eef2f7;
    color: var(--muted);
}

/* ── Archive Products Section ─────────────────────────── */
.archive-products {
    background: #f7fbff;
}

/* WC loop wrapper */
.archive-products ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* ── Product Card ─────────────────────────────────────── */
.dasen-product-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e4edf7;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(6,27,61,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    list-style: none;
}

.dasen-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(6,27,61,0.14);
}

/* Image wrapper — colour background from theme palette */
.dpc-image-wrap {
    display: block;
    position: relative;
    height: 220px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dasen-product-card.green  .dpc-image-wrap { background: linear-gradient(135deg,#eefdec,#fff); }
.dasen-product-card.purple .dpc-image-wrap { background: linear-gradient(135deg,#f0edff,#fff); }
.dasen-product-card.yellow .dpc-image-wrap { background: linear-gradient(135deg,#fff8dc,#fff); }
.dasen-product-card.pink   .dpc-image-wrap { background: linear-gradient(135deg,#fff0f8,#fff); }
.dasen-product-card.blue   .dpc-image-wrap { background: linear-gradient(135deg,#eaf7ff,#fff); }
.dasen-product-card.cyan   .dpc-image-wrap { background: linear-gradient(135deg,#e9ffff,#fff); }
.dasen-product-card.orange .dpc-image-wrap { background: linear-gradient(135deg,#fff3e6,#fff); }
.dasen-product-card.sky    .dpc-image-wrap { background: linear-gradient(135deg,#edf7ff,#fff); }
.dasen-product-card.mint   .dpc-image-wrap { background: linear-gradient(135deg,#eefdec,#fff); }

.dpc-image-wrap img {
    max-height: 180px;
    max-width: 80%;
    object-fit: contain;
    transition: transform 0.35s ease;
    filter: drop-shadow(0 14px 12px rgba(6,27,61,0.15));
}

.dasen-product-card:hover .dpc-image-wrap img {
    transform: scale(1.08);
}

/* Sale / discount badge */
.dpc-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.2px;
}

.dpc-badge--sale { background: #e67e22; }

/* Card body */
.dpc-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
}

.dpc-cat {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--green);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.dpc-title {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.35;
}

.dpc-title a {
    color: var(--navy);
    text-decoration: none;
    transition: color 0.2s;
}

.dpc-title a:hover { color: var(--green); }

.dpc-desc {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    flex: 1;
}

/* Price row */
.dpc-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dpc-mrp {
    color: rgba(6,27,61,0.4);
    font-size: 13px;
    font-weight: 800;
    text-decoration: line-through;
}

.dpc-price {
    color: var(--navy);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.dpc-unit {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.dpc-price-hidden {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #f7fbff;
    border: 1px dashed #c5d5e8;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

/* Actions */
.dpc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dpc-btn-detail {
    flex: 1;
    text-align: center;
    padding: 12px 16px;
    font-size: 13px;
}

.dpc-btn-login {
    padding: 12px 16px;
    font-size: 13px;
}

/* ── WC Pagination ────────────────────────────────────── */
.archive-products .woocommerce-pagination {
    margin-top: 42px;
    text-align: center;
}

.archive-products .woocommerce-pagination ul {
    display: inline-flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.archive-products .woocommerce-pagination ul li a,
.archive-products .woocommerce-pagination ul li span {
    display: inline-grid;
    min-width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #d8e3ef;
    border-radius: 10px;
    background: #fff;
    color: var(--navy);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    transition: 0.2s;
}

.archive-products .woocommerce-pagination ul li a:hover,
.archive-products .woocommerce-pagination ul li span.current {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* ── WC Ordering / Results Count ─────────────────────── */
.woocommerce-products-header { display: none; }

.woocommerce-result-count {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 20px;
}

.woocommerce-ordering select {
    padding: 9px 14px;
    border: 1px solid #d8e3ef;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
    background: #fff;
    cursor: pointer;
}

/* ── No products found ────────────────────────────────── */
.woocommerce-no-products-found {
    text-align: center;
    padding: 60px 0;
    color: var(--muted);
}

.woocommerce-no-products-found p {
    font-size: 16px;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 980px) {
    .archive-products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
    .archive-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .archive-hero-inner h1 { font-size: 30px; }
}

@media (max-width: 620px) {
    .archive-products ul.products {
        grid-template-columns: 1fr;
    }
    .archive-filters {
        top: 72px;
    }
    .filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .dpc-image-wrap { height: 180px; }
}

/* =========================================================
   Dasen B2B Basket System + Slide Cart
   (Moved from product-detail.css — loads globally)
========================================================= */

.add-to-cart-btn {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

/* ── Floating basket toggle ── */
.basket-floating {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 998;
}

.basket-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #061b3d, #0c3472);
    color: #ffffff;
    padding: 12px 18px;
    cursor: pointer;
    box-shadow: 0 18px 36px rgba(6, 27, 61, 0.22);
}

.basket-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.basket-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 900;
}

.basket-text strong {
    display: grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #ffffff;
    font-size: 12px;
}

/* ── Overlay ── */
.basket-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(6, 27, 61, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.basket-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ── Slide cart drawer ── */
.basket-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    width: min(480px, 92vw);
    height: 100vh;
    background: #ffffff;
    box-shadow: -24px 0 60px rgba(6, 27, 61, 0.18);
    transform: translateX(105%);
    transition: transform 0.35s ease;
    display: flex;
    flex-direction: column;
}

.basket-drawer.active {
    transform: translateX(0);
}

.basket-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 26px;
    border-bottom: 1px solid #e4edf7;
}

.basket-header h3 {
    margin: 8px 0 0;
    color: var(--navy);
    font-size: 24px;
}

.basket-close {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f2f6fb;
    color: var(--navy);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
}

.basket-items {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    position: relative;
}

.empty-basket {
    padding: 28px;
    border: 1px dashed #d8e3ef;
    border-radius: 18px;
    color: var(--muted);
    text-align: center;
}

/* ── Cart items ── */
.basket-item {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #eef2f7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.basket-item-img {
    display: grid;
    height: 92px;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff, #eef7ff);
}

.basket-item-img img {
    max-width: 72px;
    max-height: 82px;
    object-fit: contain;
}

.basket-item h4 {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.35;
}

.basket-item p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.basket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.basket-meta span {
    padding: 6px 9px;
    border-radius: 999px;
    background: #f7fbff;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
}

.basket-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
}

.basket-line strong {
    color: var(--green);
    font-size: 16px;
}

.remove-item {
    border: 0;
    background: transparent;
    color: #dc3545;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    transition: color 0.2s;
}

.remove-item:hover {
    color: #a91c2a;
}

/* ── Cart summary footer ── */
.basket-summary {
    padding: 18px 24px;
    border-top: 1px solid #e4edf7;
    background: #f7fbff;
}

.basket-summary div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
}

.basket-summary span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.basket-summary strong {
    color: var(--navy);
}

.basket-checkout {
    display: block;
    margin: 18px 24px 24px;
    text-align: center;
}

/* ── Loading overlay inside drawer ── */
.gc-loading {
    position: absolute;
    inset: 80px 0 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
}

.gc-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 4px solid #e4edf7;
    border-top-color: var(--green);
    border-radius: 50%;
    animation: gcSpin 0.7s linear infinite;
}

@keyframes gcSpin {
    to { transform: rotate(360deg); }
}

/* ── Responsive ── */
@media (min-width: 768px) {
    .basket-floating {
        bottom: 30px;
    }
}

@media (max-width: 620px) {
    .basket-floating {
        right: 14px;
        bottom: 84px;
        z-index: 10001;
    }

    .basket-toggle {
        width: 54px;
        height: 54px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .basket-icon {
        width: auto;
        height: auto;
        background: transparent;
        font-size: 22px;
    }

    .basket-text {
        position: absolute;
        inset: 0;
        font-size: 0;
    }

    .basket-text strong {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 22px;
        height: 22px;
        font-size: 11px;
        border: 2px solid #ffffff;
    }

    .basket-drawer {
        width: 100vw;
    }

    .basket-item {
        grid-template-columns: 72px 1fr;
    }
}