@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap');

/* =========================
ROOT
========================= */
:root{
   --main-color:radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
   --orange:#f39c12;
   --red:#e74c3c;
   --black:#333;
   --white:#fff;
   --light-color:#666;
   --broun:#B69574;
   --light-bg:#e7dcd1;
   --border:.2rem solid var(--black);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

/* =========================
RESET
========================= */
*{
   font-family:'Nunito', sans-serif;
   margin:0;
   padding:0;
   box-sizing:border-box;
   outline:none;
   border:none;
   text-decoration:none;
}

*::selection{
   background-color:radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
   color:var(--white);
}

html{
   font-size:62.5%;
   overflow-x:hidden;
   scroll-behavior:smooth;
}

body{
   background:transparent;
}

section{
   padding:2rem;
   max-width:1200px;
   margin:0 auto;
}

/* =========================
SCROLLBAR
========================= */
::-webkit-scrollbar{
   height:.5rem;
   width:1rem;
}

::-webkit-scrollbar-track{
   background-color:transparent;
}

::-webkit-scrollbar-thumb{
   background-color:radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
}

/* =========================
GENERAL
========================= */
.heading{
   font-size:3rem;
   color:var(--black);
   margin-bottom:2rem;
   text-align:center;
   text-transform:uppercase;
}

.empty{
   padding:1.5rem;
   background-color:var(--white);
   box-shadow:var(--box-shadow);
   border-radius:.5rem;
   text-align:center;
   font-size:2rem;
   color:var(--red);
}

.disabled{
   pointer-events:none;
   user-select:none;
   opacity:.5;
}

.btn,
.delete-btn,
.option-btn{
   display:block;
   width:100%;
   margin-top:1rem;
   border-radius:.5rem;
   padding:1rem 3rem;
   font-size:1.7rem;
   text-transform:capitalize;
   color:var(--white);
   cursor:pointer;
   text-align:center;
   transition:.2s linear;
}

.btn{
   background:radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
}

.option-btn{
   background:var(--broun);
}

.delete-btn{
   background:var(--red);
}

.btn:hover,
.option-btn:hover,
.delete-btn:hover{
   background:var(--black);
}

.flex-btn{
   display:flex;
   gap:1rem;
}

/* =========================
   USER SUCCESS POPUP
========================= */
.message,
.quick-message,
.alert-success{
   max-width: 1250px;
   margin: 1.5rem auto;
   padding: 1.6rem 2rem;
   background: #ecfdf5 !important;
   color: #047857 !important;
   border-left: 4px solid #059669 !important;
   border-radius: .8rem !important;
   font-size: 1.6rem;
   box-shadow: none !important;
}

.message span,
.quick-message span,
.alert-success span{
   color: #047857 !important;
}

.message i,
.quick-message i,
.alert-success i{
   color: #ef4444 !important;
   cursor: pointer;
}

/* =========================
ANIMATION
========================= */
@keyframes fadeIn{
   0%{
      transform:translateY(1rem);
   }
}

/* =========================
HEADER
========================= */
.header{
   background:transparent;
   position:sticky;
   top:0;
   left:0;
   right:0;
   z-index:999999;
}

.header .flex{
   display:flex;
   align-items:center;
   justify-content:space-between;
   position:relative;
}

.header .flex .logo{
   display:flex;
   align-items:center;
   margin-right:2rem;
}

.header .flex .logo img{
   width:150px;
   height:auto;
   object-fit:contain;
}

.header .flex .navbar a{
   margin:0 1rem;
   font-size:2rem;
   color:var(--black);
   font-weight:bold;
}

.header .flex .navbar a:hover{
   color:radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
   text-decoration:underline;
}

.header .flex .icons > *{
   margin-left:1rem;
   font-size:2.5rem;
   cursor:pointer;
   color:var(--black);
}

.header .flex .icons > *:hover{
   color:radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
}

.header .flex .icons a span{
   font-size:2rem;
}

#menu-btn{
   display:none;
}

/* =========================
PROFILE PANEL
========================= */
.header .flex .profile{
   position:fixed;
   top:0;
   right:-35rem;
   width:32rem;
   height:100vh;
   background:var(--white);
   box-shadow:-.5rem 0 1rem rgba(0,0,0,.15);
   padding:2rem;
   padding-top:9rem;
   z-index:1000000;
   transition:right .3s ease;
   overflow-y:auto;
}

.header .flex .profile.active{
   right:0;
}

.header .flex .profile p{
   text-align:center;
   font-size:2rem;
   color:var(--black);
   margin-bottom:1rem;
}

.header .flex .profile .flex-btn{
   display:flex;
   flex-direction:column;
   gap:1rem;
}

/* =========================
CATEGORY
========================= */
.category .slide{
   margin-bottom:5rem;
   box-shadow:var(--box-shadow);
   border:var(--border);
   text-align:center;
   padding:2rem;
   background:var(--white);
   border-radius:.5rem;
}

.category .slide img{
   height:20rem;
   width:100%;
   object-fit:contain;
   margin-bottom:1rem;
   user-select:none;
}

.category .slide h3{
   font-size:2rem;
   color:var(--black);
   user-select:none;
}



@keyframes slideContainer{
   0%{
      transform:translateX(0);
   }
   100%{
      transform:translateX(-100%);
   }
}

.swiper.category-slider .swiper-wrapper{
   display:flex;
   overflow:hidden;
   width:fit-content;
   animation:slideContainer 50s linear infinite;
}

.swiper.category-slider .swiper-slide{
   position:relative;
   flex-shrink:0;
   width:100%;
   transition:transform .5s ease;
}

/* =========================
HOME PRODUCTS
========================= */
.home-products .slide{
   position:relative;
   padding:2rem;
   border-radius:.5rem;
   border:var(--border);
   background-color:var(--white);
   box-shadow:var(--box-shadow);
   margin-bottom:5rem;
   overflow:hidden;
   user-select:none;
}

.home-products .slide img{
   width:100%;
   height:20rem;
   object-fit:contain;
   margin-bottom:2rem;
}

.home-products .slide .name{
   font-size:2rem;
   color:var(--black);
}

.home-products .slide .flex{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:1rem;
}

.home-products .slide .flex .qty{
   width:7rem;
   padding:1rem;
   border:var(--border);
   font-size:1.8rem;
   color:var(--black);
   border-radius:.5rem;
}

.home-products .slide .flex .price{
   margin:1rem 0;
   font-size:2rem;
   color:var(--red);
}

.home-products .slide .fa-heart,
.home-products .slide .fa-eye{
   position:absolute;
   top:1rem;
   height:4.5rem;
   width:4.5rem;
   line-height:4.2rem;
   font-size:2rem;
   background-color:var(--white);
   border:var(--border);
   border-radius:.5rem;
   text-align:center;
   color:var(--black);
   cursor:pointer;
   transition:.2s linear;
}

.home-products .slide .fa-heart{
   right:-6rem;
}

.home-products .slide .fa-eye{
   left:-6rem;
}

.home-products .slide .fa-heart:hover,
.home-products .slide .fa-eye:hover{
   background-color:var(--black);
   color:var(--white);
}

.home-products .slide:hover .fa-heart{
   right:1rem;
}

.home-products .slide:hover .fa-eye{
   left:1rem;
}

/* =========================
VIDEO
========================= */
.video{
   display:flex;
   justify-content:center;
   align-items:center;
   width:100%;
   max-width:100%;
   overflow:hidden;
   height:70vh;
   margin:0 auto;
}

.video video{
   width:100%;
   height:100%;
   object-fit:cover;
}

/* =========================
QUICK VIEW
========================= */
.quick-view form{
   padding:2rem;
   border-radius:.5rem;
   border:var(--border);
   background-color:var(--white);
   box-shadow:var(--box-shadow);
   margin-top:1rem;
}

.quick-view form .row{
   display:flex;
   align-items:center;
   gap:1.5rem;
   flex-wrap:wrap;
}

.quick-view form .row .image-container{
   margin-bottom:2rem;
   flex:1 1 40rem;
}

.quick-view form .row .image-container .main-image img{
   height:30rem;
   width:100%;
   object-fit:contain;
}

.quick-view form .row .image-container .sub-image{
   display:flex;
   gap:1.5rem;
   justify-content:center;
   margin-top:2rem;
}

.quick-view form .row .image-container .sub-image img{
   height:7rem;
   width:10rem;
   object-fit:contain;
   padding:.5rem;
   border:var(--border);
   cursor:pointer;
   transition:.2s linear;
}

.quick-view form .row .image-container .sub-image img:hover{
   transform:scale(1.1);
}

.quick-view form img{
   width:100%;
   height:20rem;
   object-fit:contain;
   margin-bottom:2rem;
}

.quick-view form .row .content{
   flex:1 1 40rem;
}

.quick-view form .row .content .name{
   font-size:2rem;
   color:var(--black);
}

.quick-view form .row .flex{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:1rem;
   margin:1rem 0;
}

.quick-view form .row .flex .qty{
   width:7rem;
   padding:1rem;
   border:var(--border);
   font-size:1.8rem;
   color:var(--black);
   border-radius:.5rem;
}

.quick-view form .row .flex .price{
   font-size:2rem;
   color:var(--red);
}

.quick-view form .row .content .details{
   font-size:1.6rem;
   color:var(--light-color);
   line-height:2;
}

/* =========================
PRODUCTS PAGE
========================= */
.products .box-container{
   display:grid;
   grid-template-columns:repeat(auto-fit, 33rem);
   gap:1.5rem;
   justify-content:center;
   align-items:flex-start;
}

.products .box-container .box{
   position:relative;
   background-color:var(--white);
   box-shadow:var(--box-shadow);
   border-radius:.5rem;
   border:var(--border);
   padding:2rem;
   overflow:hidden;
}

.products .box-container .box img{
   height:20rem;
   width:100%;
   object-fit:contain;
   margin-bottom:1rem;
}

.products .box-container .box .fa-heart,
.products .box-container .box .fa-eye{
   position:absolute;
   top:1rem;
   height:4.5rem;
   width:4.5rem;
   line-height:4.2rem;
   font-size:2rem;
   background-color:var(--white);
   border:var(--border);
   border-radius:.5rem;
   text-align:center;
   color:var(--black);
   cursor:pointer;
   transition:.2s linear;
}

.products .box-container .box .fa-heart{
   right:-6rem;
}

.products .box-container .box .fa-eye{
   left:-6rem;
}

.products .box-container .box .fa-heart:hover,
.products .box-container .box .fa-eye:hover{
   background-color:var(--black);
   color:var(--white);
}

.products .box-container .box:hover .fa-heart{
   right:1rem;
}

.products .box-container .box:hover .fa-eye{
   left:1rem;
}

.products .box-container .box .name{
   font-size:2rem;
   color:var(--black);
}

.products .box-container .box .flex{
   display:flex;
   align-items:center;
   gap:1rem;
}

.products .box-container .box .flex .qty{
   width:7rem;
   padding:1rem;
   border:var(--border);
   font-size:1.8rem;
   color:var(--black);
   border-radius:.5rem;
}

.products .box-container .box .flex .price{
   font-size:2rem;
   color:var(--red);
   margin-right:auto;
}

/* =========================
FORM CONTAINER
========================= */
.form-container{
   position:relative;
   overflow:hidden;
}

.form-container::before{
   content:"";
   position:absolute;
   top:0;
   left:0;
   width:100%;
   max-width:100%;
   height:100%;
   background-image:url(../images/BackgroundRegistrasi/Background1.jpeg);
   background-size:cover;
   background-position:center;
   z-index:-1;
}

.form-container form{
   position:relative;
   z-index:1;
   padding:2rem;
   border-radius:.5rem;
   box-shadow:var(--box-shadow);
   text-align:center;
   margin:0 auto;
   max-width:40rem;
   background-color:rgba(255,255,255,.7);
}

.form-container form h3{
   font-size:2.5rem;
   text-transform:uppercase;
   color:var(--black);
}

.form-container form p{
   font-size:2rem;
   color:var(--light-color);
   margin:1.5rem 0;
}

.form-container form .box{
   margin:1rem 0;
   background-color:rgba(255,255,255,.7);
   padding:1.4rem;
   font-size:1.8rem;
   color:var(--black);
   width:100%;
   border-radius:.5rem;
}

/* =========================
ABOUT
========================= */
.about .row{
   display:flex;
   align-items:center;
   flex-wrap:wrap;
   gap:1.5rem;
}

.about .row .image{
   flex:1 1 40rem;
}

.about .row .image img{
   width:100%;
}

.about .row .content{
   flex:1 1 40rem;
}

.about .row .content h3{
   font-size:3rem;
   color:var(--black);
}

.about .row .content p{
   line-height:2;
   font-size:1.5rem;
   color:var(--light-color);
   padding:1rem 0;
}

.about .row .content .btn{
   display:inline-block;
   width:auto;
}

/* =========================
REVIEWS
========================= */
.reviews .slide{
   padding:2rem;
   text-align:center;
   background-color:var(--white);
   box-shadow:var(--box-shadow);
   border-radius:.5rem;
   border:var(--border);
   margin-bottom:5rem;
   user-select:none;
}

.reviews .slide img{
   height:10rem;
   width:10rem;
   border-radius:50%;
   margin-bottom:.5rem;
}

.reviews .slide p{
   padding:1rem 0;
   line-height:2;
   font-size:1.5rem;
   color:var(--light-color);
}

.reviews .slide .stars{
   display:inline-block;
   margin-bottom:1rem;
   background-color:var(--light-bg);
   padding:1rem 1.5rem;
   border-radius:.5rem;
}

.reviews .slide .stars i{
   margin:0 .3rem;
   font-size:1.7rem;
   color:var(--orange);
}

.reviews .slide h3{
   font-size:2rem;
   color:var(--black);
}

/* =========================
CONTACT
========================= */
.contact form{
   padding:2rem;
   text-align:center;
   background-color:var(--white);
   box-shadow:var(--box-shadow);
   border-radius:.5rem;
   border:var(--border);
   max-width:50rem;
   margin:0 auto;
}

.contact form h3{
   margin-bottom:1rem;
   text-transform:capitalize;
   font-size:2.5rem;
   color:var(--black);
}

.contact form .box{
   margin:1rem 0;
   width:100%;
   background-color:var(--light-bg);
   padding:1.4rem;
   font-size:1.8rem;
   color:var(--black);
   border-radius:.5rem;
}

.contact form textarea{
   height:15rem;
   resize:none;
}

/* =========================
SEARCH FORM - MODERN
========================= */
.search-form{
   display:flex;
   justify-content:center;
   align-items:center;
   margin:3rem auto;
   max-width:700px;
   width:100%;
}

.search-form form{
   display:flex;
   width:100%;
   background:var(--white);
   border-radius:50px;
   overflow:hidden;
   box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.search-form input{
   flex:1;
   padding:1.2rem 2rem;
   font-size:1.6rem;
   color:var(--black);
   border:none;
   outline:none;
   background:var(--white);
}

.search-form input::placeholder{
   color:#aaa;
}

.search-form button{
   width:60px;
   background:radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
   color:var(--white);
   font-size:1.8rem;
   cursor:pointer;
   border:none;
   transition:.3s;
}

.search-form button:hover{
   background:var(--black);
}


/* =========================
WISHLIST PAGE
========================= */
.wishlist-page {
   background: #f8f9fc;
   min-height: 100vh;
   padding: 2.4rem 0 6rem;
   font-family: 'Segoe UI', sans-serif;
}

.wishlist-container {
   max-width: 1300px;
   margin: 0 auto;
   padding: 0 2rem;
}

/* ===== PAGE HEADER ===== */
.wishlist-page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 2.4rem;
   animation: fadeSlideDown .45s ease both;
}

.wishlist-page-header-left {
   display: flex;
   align-items: center;
   gap: 1.2rem;
   flex-wrap: wrap;
}

.wishlist-page-header h2 {
   font-size: 2.8rem;
   font-weight: 800;
   color: #1e293b;
   display: flex;
   align-items: center;
   gap: .8rem;
}

.wishlist-page-header h2 i { color: #e11d48; }

.wish-count-badge {
   background: #fff0f3;
   color: #be123c;
   border-radius: 3rem;
   padding: .5rem 1.2rem;
   font-size: 1.3rem;
   font-weight: 700;
   border: 1px solid #fecdd3;
}

.wishlist-header-actions {
   display: flex;
   gap: 1rem;
   align-items: center;
   flex-wrap: wrap;
}

.btn-continue-shop {
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   padding: .9rem 1.8rem;
   background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
   color: #fff;
   border-radius: .8rem;
   font-size: 1.35rem;
   font-weight: 600;
   text-decoration: none;
   transition: transform .15s, box-shadow .15s;
}

.btn-continue-shop:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(79,110,247,.3); }

.btn-clear-wish {
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   padding: .9rem 1.8rem;
   background: #fff0f3;
   color: #be123c;
   border: 1px solid #fecdd3;
   border-radius: .8rem;
   font-size: 1.35rem;
   font-weight: 600;
   text-decoration: none;
   transition: background .15s;
}

.btn-clear-wish:hover { background: #ffe4e6; }

/* ===== NOTIFICATIONS ===== */
.wish-notif {
   padding: 1.2rem 1.6rem;
   border-radius: .8rem;
   font-size: 1.35rem;
   display: flex;
   align-items: center;
   gap: .8rem;
   margin-bottom: 1.6rem;
   animation: fadeSlideDown .3s ease both;
}

.wish-notif.success { background: #ecfdf5; border-left: 4px solid #059669; color: #065f46; }
.wish-notif.info    { background: #eff2ff; border-left: 4px solid #4f6ef7; color: #1e40af; }
.wish-notif.warn    { background: #fffbeb; border-left: 4px solid #f59e0b; color: #78350f; }

/* ===== PRODUCT GRID ===== */
.wishlist-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
   gap: 2rem;
   margin-bottom: 2.4rem;
}

/* ===== PRODUCT CARD ===== */
.wish-card {
   background: #fff;
   border-radius: 1.4rem;
   overflow: hidden;
   box-shadow: 0 2px 12px rgba(0,0,0,.05);
   display: flex;
   flex-direction: column;
   transition: transform .22s, box-shadow .22s;
   animation: fadeSlideUp .5s ease both;
   position: relative;
}

.wish-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 14px 36px rgba(0,0,0,.1);
}

/* Heart badge */
.wish-heart-badge {
   position: absolute;
   top: 1rem; right: 1rem;
   width: 3.4rem; height: 3.4rem;
   border-radius: 50%;
   background: rgba(255,255,255,.92);
   display: flex; align-items: center; justify-content: center;
   color: #e11d48;
   font-size: 1.5rem;
   z-index: 2;
   box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* Quick view link */
.wish-view-link {
   position: absolute;
   top: 1rem; left: 1rem;
   width: 3.4rem; height: 3.4rem;
   border-radius: 50%;
   background: rgba(255,255,255,.92);
   display: flex; align-items: center; justify-content: center;
   color: #475569;
   font-size: 1.4rem;
   z-index: 2;
   text-decoration: none;
   box-shadow: 0 2px 8px rgba(0,0,0,.1);
   transition: color .15s, background .15s;
   opacity: 0;
   transition: opacity .2s;
}

.wish-card:hover .wish-view-link { opacity: 1; }
.wish-view-link:hover { background: #fff; color: #4f6ef7; }

/* Image */
.wish-img-wrap {
   width: 100%;
   aspect-ratio: 1/1;
   overflow: hidden;
   background: #f8fafc;
   display: block;
   text-decoration: none;
}

.wish-img-wrap img {
   width: 100%; height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .3s;
}

.wish-card:hover .wish-img-wrap img { transform: scale(1.06); }

/* Card body */
.wish-card-body {
   padding: 1.6rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   flex: 1;
}

.wish-product-name {
   font-size: 1.5rem;
   font-weight: 700;
   color: #1e293b;
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-decoration: none;
}

.wish-product-name:hover { color: #4f6ef7; }

.wish-price-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: .8rem;
}

.wish-price {
   font-size: 2rem;
   font-weight: 800;
   color: #e11d48;
}

/* Qty input */
.wish-qty-wrap {
   display: flex;
   align-items: center;
   gap: 0;
   border: 1.5px solid #e2e8f0;
   border-radius: .6rem;
   overflow: hidden;
}

.wish-qty-btn {
   width: 3rem; height: 3rem;
   background: #f8fafc;
   border: none;
   font-size: 1.5rem;
   color: #475569;
   cursor: pointer;
   display: flex; align-items: center; justify-content: center;
   transition: background .15s;
   flex-shrink: 0;
   line-height: 1;
}

.wish-qty-btn:hover { background: #eff2ff; color: #1a2a6c; }

.wish-qty-input {
   width: 4rem; height: 3rem;
   text-align: center;
   border: none;
   border-left: 1.5px solid #e2e8f0;
   border-right: 1.5px solid #e2e8f0;
   font-size: 1.4rem;
   color: #1e293b;
   font-weight: 600;
   font-family: inherit;
   outline: none;
   -moz-appearance: textfield;
}

.wish-qty-input::-webkit-inner-spin-button,
.wish-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Card actions */
.wish-card-actions {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: .8rem;
   margin-top: auto;
   padding-top: 1rem;
   border-top: 1px solid #f8fafc;
}

.btn-add-to-cart {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   padding: 1rem;
   background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
   color: #fff;
   border: none;
   border-radius: .8rem;
   font-size: 1.35rem;
   font-weight: 600;
   cursor: pointer;
   transition: transform .15s, box-shadow .15s;
   font-family: inherit;
   width: 100%;
}

.btn-add-to-cart:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79,110,247,.3); }
.btn-add-to-cart:active { transform: scale(.97); }

.btn-remove-wish {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 1rem 1.2rem;
   background: #fff0f3;
   color: #be123c;
   border: 1px solid #fecdd3;
   border-radius: .8rem;
   font-size: 1.4rem;
   cursor: pointer;
   transition: background .15s;
   font-family: inherit;
   white-space: nowrap;
}

.btn-remove-wish:hover { background: #ffe4e6; }

/* ===== BOTTOM SUMMARY BAR ===== */
.wish-summary-bar {
   position: fixed;
   bottom: 0; left: 0; right: 0;
   background: #fff;
   border-top: 1px solid #e8e8e8;
   box-shadow: 0 -4px 20px rgba(0,0,0,.08);
   padding: 1.2rem 0;
   z-index: 100;
   animation: slideUp .3s ease both;
}

@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

.wish-summary-inner {
   max-width: 1300px;
   margin: 0 auto;
   padding: 0 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
   flex-wrap: wrap;
}

.wish-summary-left {
   display: flex;
   flex-direction: column;
}

.wish-total-label { font-size: 1.3rem; color: #64748b; }

.wish-total-value {
   font-size: 2.2rem;
   font-weight: 800;
   color: #e11d48;
}

.wish-summary-right {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   align-items: center;
}

/* ===== EMPTY STATE ===== */
.wish-empty-state {
   text-align: center;
   padding: 7rem 2rem;
   color: #94a3b8;
   background: #fff;
   border-radius: 1.4rem;
   box-shadow: 0 2px 12px rgba(0,0,0,.04);
   animation: fadeSlideUp .5s ease both;
}

.wish-empty-state i {
   font-size: 6.4rem;
   display: block;
   margin-bottom: 1.6rem;
   color: #fca5a5;
}

.wish-empty-state h3 {
   font-size: 2.2rem;
   font-weight: 700;
   color: #475569;
   margin-bottom: .8rem;
}

.wish-empty-state p {
   font-size: 1.4rem;
   margin-bottom: 2.4rem;
   max-width: 36rem;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.7;
}

.btn-shop-now {
   display: inline-flex;
   align-items: center;
   gap: .7rem;
   padding: 1.3rem 3rem;
   background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
   color: #fff;
   border-radius: 1rem;
   font-size: 1.5rem;
   font-weight: 700;
   text-decoration: none;
   transition: transform .15s, box-shadow .2s;
}

.btn-shop-now:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,110,247,.35); }

/* ===== ANIMATIONS ===== */
@keyframes fadeSlideDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideUp   { from{opacity:0;transform:translateY(18px)}  to{opacity:1;transform:translateY(0)} }

.wish-card:nth-child(1) { animation-delay:.04s }
.wish-card:nth-child(2) { animation-delay:.08s }
.wish-card:nth-child(3) { animation-delay:.12s }
.wish-card:nth-child(4) { animation-delay:.16s }
.wish-card:nth-child(n+5) { animation-delay:.20s }

@media(max-width:900px){
   .wishlist-container { padding: 0 1.4rem; }
   .wishlist-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:520px){
   .wishlist-grid { grid-template-columns: 1fr; }
   .wish-summary-inner { flex-direction: column; align-items: stretch; }
   .wish-summary-right { justify-content: space-between; }
}

/* =========================
WISHLIST TOTAL / CART TOTAL
========================= */
.wishlist-total,
.cart-total{
   max-width:50rem;
   margin:0 auto;
   margin-top:3rem;
   background-color:var(--white);
   border:var(--border);
   border-radius:.5rem;
   padding:2rem;
   text-align:center;
}

.wishlist-total p,
.cart-total p{
   font-size:2.5rem;
   color:var(--black);
   margin-bottom:2rem;
}

.wishlist-total p span,
.cart-total p span{
   color:var(--red);
}

/* =========================
SHOPPING CART
========================= */
.shopping-cart .fa-edit{
   height:4.5rem;
   border-radius:.5rem;
   background-color:var(--orange);
   width:5rem;
   font-size:2rem;
   color:var(--white);
   cursor:pointer;
}

.shopping-cart .fa-edit:hover{
   background-color:var(--black);
}

.shopping-cart .sub-total{
   margin:2rem 0;
   font-size:2rem;
   color:var(--light-color);
}

.shopping-cart .sub-total span{
   color:var(--red);
}

/* =========================
DISPLAY ORDERS / CHECKOUT
========================= */
.display-orders{
   text-align:center;
   padding-bottom:0;
}

.display-orders p{
   display:inline-block;
   padding:1rem 2rem;
   margin:1rem .5rem;
   font-size:2rem;
   text-align:center;
   border:var(--border);
   background-color:var(--white);
   box-shadow:var(--box-shadow);
   border-radius:.5rem;
}

.display-orders p span{
   color:var(--red);
}

.display-orders .grand-total{
   margin-top:1.5rem;
   margin-bottom:2.5rem;
   font-size:2.5rem;
   color:var(--light-color);
}

.display-orders .grand-total span{
   color:var(--red);
}

.checkout-orders form{
   padding:2rem;
   border:var(--border);
   background-color:var(--white);
   box-shadow:var(--box-shadow);
   border-radius:.5rem;
}

.checkout-orders form h3{
   border-radius:.5rem;
   background-color:var(--black);
   color:var(--white);
   padding:1.5rem 1rem;
   text-align:center;
   text-transform:uppercase;
   margin-bottom:2rem;
   font-size:2.5rem;
}

.checkout-orders form .flex{
   display:flex;
   flex-wrap:wrap;
   gap:1.5rem;
   justify-content:space-between;
}

.checkout-orders form .flex .inputBox{
   width:49%;
}

.checkout-orders form .flex .inputBox .box{
   width:100%;
   border:var(--border);
   border-radius:.5rem;
   font-size:1.8rem;
   color:var(--black);
   padding:1.2rem 1.4rem;
   margin:1rem 0;
   background-color:var(--light-bg);
}

.checkout-orders form .flex .inputBox span{
   font-size:1.8rem;
   color:var(--light-color);
}

.checkout-orders .btn{
   width:20%;
}

/* =========================
ORDERS PAGE
========================= */
.orders .box-container{
   display:flex;
   flex-wrap:wrap;
   gap:1.5rem;
   align-items:flex-start;
}

.orders .box-container .box{
   padding:1rem 2rem;
   flex:1 1 40rem;
   border:var(--border);
   background-color:var(--white);
   box-shadow:var(--box-shadow);
   border-radius:.5rem;
}

.orders .box-container .box p{
   margin:.6rem 0;
   line-height:1.8;
   font-size:2rem;
   color:var(--light-color);
}

.orders .box-container .box p span{
   color:radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
}

/* =========================
FOOTER (FIX FINAL)
========================= */

.footer{
   background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
   color: #fff !important;
   padding: 3rem 2rem;
}

/* grid layout */
.footer .grid{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   gap: 2rem;
}

/* title */
.footer .grid .box h3{
   font-size:2rem;
   color:#fff !important;
   margin-bottom:2rem;
   text-transform:capitalize;
}

/* link */
.footer .grid .box a{
   display:block;
   margin:1.5rem 0;
   font-size:1.7rem;
   color:rgba(255,255,255,.7) !important;
   transition:.3s;
}

/* icon */
.footer .grid .box a i{
   padding-right:1rem;
   color:#fff !important;
   transition:.3s;
}

/* hover */
.footer .grid .box a:hover{
   color:#fff !important;
   transform: translateX(5px);
}

.footer .grid .box a:hover i{
   padding-right:2rem;
}

/* bottom credit */
.footer .credit{
   text-align:center;
   padding:2.5rem 2rem;
   border-top:1px solid rgba(255,255,255,.15);
   font-size:1.8rem;
   color:rgba(255,255,255,.8) !important;
}

/* highlight */
.footer .credit span{
   color:#00d4ff !important;
}

.footer{
   box-shadow: inset 0 20px 40px rgba(0,0,0,0.6);
}

/* =========================
RESPONSIVE
========================= */
@media (max-width:991px){
   html{
      font-size:55%;
   }
}

@media (max-width:768px){

   #menu-btn{
      display:inline-block;
   }

   .header .flex .navbar{
      position:absolute;
      top:99%;
      left:0;
      right:0;
      border-top:var(--border);
      border-bottom:var(--border);
      background-color:var(--white);
      transition:.2s linear;
      clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);
      z-index:999999;
   }

   .header .flex .navbar.active{
      clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
   }

   .header .flex .navbar a{
      display:block;
      margin:2rem;
   }

   .home-bg .home .slide .content{
      text-align:center;
   }

   .home-bg .home .slide .content h3{
      font-size:3rem;
   }

   .checkout-orders form .flex .inputBox{
      width:100%;
   }

   .checkout-orders .btn{
      width:100%;
   }

   .search-form{
      padding:0 1.5rem;
   }
}

@media (max-width:450px){

   html{
      font-size:50%;
   }

   .heading{
      font-size:3rem;
   }

   .flex-btn{
      flex-flow:column;
      gap:0;
   }

   .quick-view form .row .image-container .sub-image img{
      width:8rem;
   }

   .header .flex .profile{
      width:28rem;
   }
}

.payment-info{
   background-color: var(--light-bg) !important;
   border: var(--border);
   border-radius: .5rem;
   font-size: 1.6rem;
   color: var(--black);
   line-height: 1.8;
   padding: 1.5rem;
}

/* ===== HEADER ICON FINAL USER ===== */
.header .flex .icons {
   display: flex !important;
   align-items: center !important;
   gap: 1.2rem !important;
}

.header .flex .icons .header-icon-link,
.header .flex .icons #user-btn,
.header .flex .icons #menu-btn {
   position: relative !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   color: var(--black) !important;
   cursor: pointer !important;
   text-decoration: none !important;
}

.header .flex .icons .header-icon-link i,
.header .flex .icons #user-btn,
.header .flex .icons #menu-btn {
   font-size: 2.7rem !important;
   line-height: 1 !important;
}

.header .flex .icons .header-icon-link:hover,
.header .flex .icons #user-btn:hover,
.header .flex .icons #menu-btn:hover {
   color: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
}

.header .flex .icons .header-inline-count {
   font-size: 1.7rem !important;
   margin-left: .3rem !important;
   color: var(--black) !important;
   line-height: 1 !important;
}

.header .flex .icons .chat-icon-wrap {
   position: relative !important;
}

.header .flex .icons .chat-icon-wrap .chat-notif-badge {
   position: absolute !important;
   top: -8px !important;
   right: -10px !important;
   min-width: 20px !important;
   height: 20px !important;
   padding: 0 5px !important;
   border-radius: 50% !important;
   background: #e74c3c !important;
   color: #fff !important;
   font-size: 1.1rem !important;
   font-weight: 700 !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   line-height: 1 !important;
   box-shadow: 0 2px 6px rgba(0,0,0,.18) !important;
   z-index: 99 !important;
}

/* FORCE FIX PRODUK CARD */

.products .box-container {
   display: grid !important;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
   gap: 20px;
}

.products .box {
   display: flex !important;
   flex-direction: column !important;
   justify-content: space-between !important;
   min-height: 420px !important;
   padding: 15px;
}

/* Judul biar rata */
.products .box .name {
   min-height: 50px;
   line-height: 1.3;
}

/* Dorong bagian bawah */
.products .box .flex {
   margin-top: auto;
}

/* Gambar biar konsisten */
.products .box img {
   height: 200px;
   object-fit: cover;
}

/* =========================
MOVED PHP INLINE CSS
========================= */

/* ===== moved from cart.php | scope: body.php-cart ===== */
body.php-cart *,
body.php-cart *::before,
body.php-cart *::after{
   box-sizing: border-box;
}

body.php-cart .cart-page-wrapper{background: #f5f5f5;
         min-height: 100vh;
         padding: 2rem 0 6rem;
         font-family: 'Segoe UI', sans-serif;}

body.php-cart .cart-container{max-width: 1200px;
         margin: 0 auto;
         padding: 0 1.6rem;}

body.php-cart .cart-page-title{font-size: 2rem;
         font-weight: 700;
         color: #222;
         margin-bottom: 1.6rem;
         letter-spacing: -.3px;}

body.php-cart .cart-header-row{background: #fff;
         border-radius: 1rem;
         padding: 1.2rem 2rem;
         display: grid;
         grid-template-columns: 2.4rem 1fr 14rem 14rem 14rem 10rem;
         align-items: center;
         gap: 1rem;
         margin-bottom: .8rem;
         font-size: 1.3rem;
         color: #888;
         font-weight: 500;}

body.php-cart .cart-item-card{background: #fff;
         border-radius: 1rem;
         padding: 1.6rem 2rem;
         display: grid;
         grid-template-columns: 2.4rem 1fr 14rem 14rem 14rem 10rem;
         align-items: center;
         gap: 1rem;
         margin-bottom: .8rem;
         transition: box-shadow .2s;}

body.php-cart .cart-item-card:hover{box-shadow: 0 4px 16px rgba(0,0,0,.07);}

body.php-cart .cart-check input[type="checkbox"]{width: 1.8rem;
         height: 1.8rem;
         cursor: pointer;
         accent-color: #1a2a6c;}

body.php-cart .cart-product-info{display: flex;
         align-items: flex-start;
         gap: 1.2rem;}

body.php-cart .cart-product-info a.product-img-link{flex-shrink: 0;}

body.php-cart .cart-product-info img{width: 7.2rem;
         height: 7.2rem;
         object-fit: cover;
         border-radius: .6rem;
         border: 1px solid #f0f0f0;}

body.php-cart .cart-product-meta{display: flex;
         flex-direction: column;
         gap: .4rem;}

body.php-cart .cart-product-name{font-size: 1.4rem;
         font-weight: 500;
         color: #222;
         line-height: 1.5;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;}

body.php-cart .cart-variation-tag{display: inline-flex;
         align-items: center;
         gap: .4rem;
         background: #f5f5f5;
         border-radius: .4rem;
         padding: .3rem .8rem;
         font-size: 1.2rem;
         color: #555;
         width: fit-content;}

body.php-cart .cart-variation-tag i{font-size: 1rem;
         color: #aaa;}

body.php-cart .cart-unit-price{font-size: 1.4rem;
         color: #444;
         text-align: center;}

body.php-cart .cart-qty-cell{display: flex;
         align-items: center;
         justify-content: center;}

body.php-cart .qty-form{display: flex;
         align-items: center;
         gap: 0;}

body.php-cart .qty-form input[type="number"]{width: 4.4rem;
         height: 3.2rem;
         text-align: center;
         border: 1px solid #e0e0e0;
         border-left: none;
         border-right: none;
         font-size: 1.4rem;
         color: #222;
         -moz-appearance: textfield;
         outline: none;}

body.php-cart .qty-form input[type="number"]::-webkit-inner-spin-button,
body.php-cart .qty-form input[type="number"]::-webkit-outer-spin-button{-webkit-appearance: none;}

body.php-cart .qty-btn{width: 3.2rem;
         height: 3.2rem;
         background: #fff;
         border: 1px solid #e0e0e0;
         font-size: 1.6rem;
         color: #444;
         cursor: pointer;
         transition: background .15s;
         display: flex;
         align-items: center;
         justify-content: center;
         line-height: 1;}

body.php-cart .qty-btn:first-child{border-radius: .4rem 0 0 .4rem;}

body.php-cart .qty-btn:last-child{border-radius: 0 .4rem .4rem 0;}

body.php-cart .qty-btn:hover{background: #f5f5f5;}

body.php-cart .cart-subtotal{font-size: 1.4rem;
         font-weight: 600;
         color: #1a2a6c;
         text-align: center;}

body.php-cart .cart-actions-cell{display: flex;
         flex-direction: column;
         align-items: center;
         gap: .8rem;}

body.php-cart .btn-hapus-item{background: none;
         border: none;
         color: #888;
         font-size: 1.3rem;
         cursor: pointer;
         padding: .4rem .8rem;
         border-radius: .4rem;
         transition: color .15s, background .15s;}

body.php-cart .btn-hapus-item:hover{color: #ee4d2d; background: #fff0ed;}

body.php-cart .btn-view-item{color: #1a6ec7;
         font-size: 1.2rem;
         text-decoration: none;
         padding: .4rem .8rem;
         border-radius: .4rem;
         transition: background .15s;}

body.php-cart .btn-view-item:hover{background: #eef4ff;}

body.php-cart .cart-bottom-bar{position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
         background: #fff;
         border-top: 1px solid #e8e8e8;
         z-index: 100;
         padding: 1.2rem 0;
         box-shadow: 0 -4px 20px rgba(0,0,0,.08);}

body.php-cart .cart-bottom-inner{max-width: 1200px;
         margin: 0 auto;
         padding: 0 1.6rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 2rem;
         flex-wrap: wrap;}

body.php-cart .cart-bottom-left{display: flex;
         align-items: center;
         gap: 2rem;
         flex-wrap: wrap;}

body.php-cart .select-all-form,
body.php-cart .reset-form,
body.php-cart .delete-all-form{display: inline-flex;
         align-items: center;}

body.php-cart .btn-select-all,
body.php-cart .btn-reset,
body.php-cart .btn-hapus-semua{background: none;
         border: none;
         font-size: 1.4rem;
         cursor: pointer;
         padding: .6rem 1rem;
         border-radius: .5rem;
         transition: background .15s;
         color: #444;}

body.php-cart .btn-select-all:hover{background: #f5f5f5;}

body.php-cart .btn-reset:hover{color: #ee4d2d; background: #fff0ed;}

body.php-cart .btn-hapus-semua{color: #ee4d2d;}

body.php-cart .btn-hapus-semua:hover{background: #fff0ed;}

body.php-cart .cart-bottom-right{display: flex;
         align-items: center;
         gap: 2.4rem;}

body.php-cart .cart-total-info{text-align: right;}

body.php-cart .cart-total-label{font-size: 1.3rem;
         color: #888;}

body.php-cart .cart-total-value{font-size: 2rem;
         font-weight: 700;
         color: #1a2a6c;}

body.php-cart .cart-total-count{font-size: 1.2rem;
         color: #aaa;
         margin-top: .2rem;}

body.php-cart .btn-checkout{background: linear-gradient(135deg, #1a2a6c, #4f6ef7);
         color: #fff;
         border: none;
         padding: 1.2rem 3.2rem;
         border-radius: .6rem;
         font-size: 1.5rem;
         font-weight: 600;
         cursor: pointer;
         text-decoration: none;
         display: inline-block;
         transition: opacity .2s, transform .1s;
         white-space: nowrap;}

body.php-cart .btn-checkout:hover{opacity: .9;}

body.php-cart .btn-checkout:active{transform: scale(.97);}

body.php-cart .btn-checkout.disabled{background: #ccc;
         cursor: not-allowed;
         pointer-events: none;}

body.php-cart .btn-lanjut-belanja{color: #1a2a6c;
         font-size: 1.4rem;
         text-decoration: none;
         padding: .6rem 1rem;
         border-radius: .5rem;
         transition: background .15s;}

body.php-cart .btn-lanjut-belanja:hover{background: #fff0ed;}

body.php-cart .cart-empty{background: #fff;
         border-radius: 1rem;
         padding: 6rem 2rem;
         text-align: center;
         color: #aaa;
         font-size: 1.6rem;}

body.php-cart .cart-empty i{font-size: 5rem;
         display: block;
         margin-bottom: 1.6rem;
         color: #ddd;}

@media (max-width: 900px){body.php-cart .cart-header-row{display: none;}

body.php-cart .cart-item-card{grid-template-columns: 2.4rem 1fr auto;
            grid-template-rows: auto auto auto;}

body.php-cart .cart-check{grid-row: 1; grid-column: 1;}

body.php-cart .cart-product-info{grid-row: 1; grid-column: 2;}

body.php-cart .cart-actions-cell{grid-row: 1; grid-column: 3; flex-direction: row;}

body.php-cart .cart-unit-price{grid-row: 2; grid-column: 2; text-align: left;}

body.php-cart .cart-qty-cell{grid-row: 3; grid-column: 2; justify-content: flex-start;}

body.php-cart .cart-subtotal{grid-row: 2; grid-column: 3; text-align: right;}
}

@media (max-width: 600px){body.php-cart .cart-bottom-inner{flex-direction: column; align-items: stretch;}

body.php-cart .cart-bottom-right{justify-content: space-between;}
}

/* ===== moved from search_page.php | scope: body.php-search-page ===== */
body.php-search-page *,
body.php-search-page *::before,
body.php-search-page *::after{
   box-sizing: border-box;
}

body.php-search-page{background: #f8f9fc; font-family: 'Segoe UI', sans-serif;}

body.php-search-page .sp-page{max-width: 1200px; margin: 0 auto; padding: 3rem 2.4rem 6rem;}

body.php-search-page .sp-bc{font-size: 1.4rem; color: #94a3b8;
         margin-bottom: 2rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
         animation: fadeUp .4s ease both;}

body.php-search-page .sp-bc a{color: #94a3b8; text-decoration: none; transition: color .15s;}

body.php-search-page .sp-bc a:hover{color: #1a2a6c;}

body.php-search-page .sp-bc i{font-size: 1.1rem; color: #cbd5e1;}

body.php-search-page .sp-search-section{margin-bottom: 3.2rem;
         animation: fadeUp .45s ease both;}

body.php-search-page .sp-search-title{font-size: 2.6rem; font-weight: 800; color: #1e293b;
         margin-bottom: .6rem; letter-spacing: -.4px;}

body.php-search-page .sp-search-title span{background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

body.php-search-page .sp-search-sub{font-size: 1.4rem; color: #64748b; margin-bottom: 2rem;}

body.php-search-page .sp-search-form{display: flex; align-items: center; gap: 0;
         background: #fff; border-radius: 1rem;
         box-shadow: 0 4px 20px rgba(0,0,0,.08);
         overflow: hidden;
         max-width: 68rem;}

body.php-search-page .sp-search-form i{padding: 0 1.6rem; font-size: 1.6rem; color: #94a3b8;
         flex-shrink: 0;}

body.php-search-page .sp-search-input{flex: 1; padding: 1.6rem 0; border: none; outline: none;
         font-size: 1.55rem; color: #0f172a; background: transparent;
         font-family: inherit;}

body.php-search-page .sp-search-input::placeholder{color: #94a3b8;}

body.php-search-page .sp-search-btn{padding: 1.4rem 2.8rem;
         background: linear-gradient(135deg, #1a2a6c, #4f6ef7);
         color: #fff; border: none; font-size: 1.5rem; font-weight: 700;
         cursor: pointer; font-family: inherit;
         transition: opacity .18s, transform .15s;
         display: flex; align-items: center; gap: .7rem; white-space: nowrap;
         flex-shrink: 0;}

body.php-search-page .sp-search-btn:hover{opacity: .88;}

body.php-search-page .sp-result-bar{display: flex; align-items: center; justify-content: space-between;
         flex-wrap: wrap; gap: 1rem;
         margin-bottom: 2rem;
         animation: fadeUp .5s ease both;}

body.php-search-page .sp-result-count{font-size: 1.4rem; color: #475569;}

body.php-search-page .sp-result-count strong{color: #0f172a;}

body.php-search-page .sp-result-count .qhighlight{display: inline-flex; align-items: center;
         background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         color: #fff; padding: .3rem 1rem; border-radius: 2rem;
         font-size: 1.3rem; font-weight: 700; margin-left: .4rem;}

body.php-search-page .sp-sort-select{padding: .8rem 1.4rem; border: 1.5px solid #e2e8f0; border-radius: .8rem;
         font-size: 1.3rem; color: #0f172a; background: #fff; outline: none;
         font-family: inherit; cursor: pointer;}

body.php-search-page .sp-fuzzy-notice{display: none;
         padding: 1rem 1.4rem; background: #fffbeb; border-left: 3px solid #f59e0b;
         border-radius: .8rem; font-size: 1.3rem; color: #78350f;
         margin-bottom: 1.6rem; align-items: center; gap: .7rem;
         animation: fadeUp .3s ease both;}

body.php-search-page .sp-fuzzy-notice.show{display: flex;}

body.php-search-page .sp-grid{display: grid;
         grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
         gap: 2rem;}

body.php-search-page .sp-card{background: #fff; border-radius: 1.4rem;
         overflow: hidden; position: relative;
         box-shadow: 0 2px 12px rgba(0,0,0,.05);
         transition: transform .25s, box-shadow .25s;
         display: flex; flex-direction: column;
         animation: fadeUp .5s ease both;}

body.php-search-page .sp-card:hover{transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,.11);}

body.php-search-page .sp-card:nth-child(1){animation-delay:.05s}

body.php-search-page .sp-card:nth-child(2){animation-delay:.10s}

body.php-search-page .sp-card:nth-child(3){animation-delay:.15s}

body.php-search-page .sp-card:nth-child(n+4){animation-delay:.20s}

body.php-search-page .sp-card-img{position: relative; aspect-ratio: 1/1;
         overflow: hidden; background: #f2f1ed;}

body.php-search-page .sp-card-img img{width: 100%; height: 100%; object-fit: cover; display: block;
         transition: transform .5s cubic-bezier(.25,.46,.45,.94);}

body.php-search-page .sp-card:hover .sp-card-img img{transform: scale(1.07);}

body.php-search-page .sp-cat-ribbon{position: absolute; bottom: 1rem; left: 1rem;
         padding: .35rem .9rem; border-radius: 2rem;
         font-size: 1.15rem; font-weight: 700; color: #fff; z-index: 2;}

body.php-search-page .sp-card-actions{position: absolute; top: 1.2rem; right: 1.2rem;
         display: flex; flex-direction: column; gap: .8rem;
         opacity: 0; transform: translateX(1rem);
         transition: opacity .22s, transform .22s; z-index: 3;}

body.php-search-page .sp-card:hover .sp-card-actions{opacity: 1; transform: translateX(0);}

body.php-search-page .sp-act-btn{width: 4rem; height: 4rem; border-radius: 50%;
         background: #fff; border: none; color: #111; font-size: 1.5rem;
         display: flex; align-items: center; justify-content: center;
         box-shadow: 0 3px 10px rgba(0,0,0,.14);
         cursor: pointer; transition: background .18s, color .18s;
         text-decoration: none; font-family: inherit;}

body.php-search-page .sp-act-btn:hover{background: #111; color: #fff;}

body.php-search-page .sp-card-body{padding: 1.6rem 1.8rem 1.8rem;
         display: flex; flex-direction: column; gap: .8rem; flex: 1;}

body.php-search-page .sp-card-name{font-size: 1.5rem; font-weight: 600; color: #111;
         line-height: 1.4; text-decoration: none;
         display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

body.php-search-page .sp-card-name:hover{color: #1a2a6c;}

body.php-search-page .sp-card-name mark{background: #fef08a; color: #0f172a; border-radius: .2rem; padding: 0 .1rem;}

body.php-search-page .sp-card-price{font-size: 1.8rem; font-weight: 800; color: #e11d48;}

body.php-search-page .sp-card-footer{display: flex; gap: .8rem; align-items: center; margin-top: auto;}

body.php-search-page .sp-qty{width: 5.5rem; height: 4rem; border: 1.5px solid #e2e8f0; border-radius: .7rem;
         text-align: center; font-size: 1.5rem; color: #111; font-family: inherit;
         background: #f8fafc; flex-shrink: 0; outline: none;}

body.php-search-page .sp-qty:focus{border-color: #4f6ef7;}

body.php-search-page .sp-cart-btn{flex: 1; height: 4rem;
         background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         color: #fff; border: none; border-radius: .7rem;
         font-size: 1.35rem; font-weight: 700; cursor: pointer;
         font-family: inherit; text-transform: uppercase; letter-spacing: .04em;
         transition: opacity .18s, transform .15s;}

body.php-search-page .sp-cart-btn:hover{opacity: .88; transform: scale(.98);}

body.php-search-page .sp-empty{grid-column: 1/-1; text-align: center;
         padding: 6rem 2rem; background: #fff; border-radius: 1.4rem;
         box-shadow: 0 2px 12px rgba(0,0,0,.04); color: #94a3b8;
         animation: fadeUp .5s ease both;}

body.php-search-page .sp-empty i{font-size: 5.6rem; display: block; margin-bottom: 1.6rem; color: #cbd5e1;}

body.php-search-page .sp-empty h3{font-size: 2rem; font-weight: 700; color: #475569; margin-bottom: .8rem;}

body.php-search-page .sp-empty p{font-size: 1.4rem; margin-bottom: 2.4rem; line-height: 1.7;}

body.php-search-page .sp-empty-tip{font-size: 1.3rem; color: #94a3b8; display: flex; flex-wrap: wrap;
         justify-content: center; gap: .6rem; margin-bottom: 2.4rem;}

body.php-search-page .sp-empty-tip-item{background: #f1f5f9; border-radius: 2rem; padding: .4rem 1rem; cursor: pointer;
         transition: background .15s, color .15s;}

body.php-search-page .sp-empty-tip-item:hover{background: #eff2ff; color: #1a2a6c;}

body.php-search-page .btn-shop-all{display: inline-flex; align-items: center; gap: .7rem;
         padding: 1.2rem 2.8rem; background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         color: #fff; border-radius: 1rem; font-size: 1.5rem; font-weight: 700;
         text-decoration: none; transition: transform .15s, box-shadow .2s;}

body.php-search-page .btn-shop-all:hover{transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,110,247,.35);}

body.php-search-page .sp-initial{text-align: center; padding: 5rem 2rem;
         animation: fadeUp .5s ease both;}

body.php-search-page .sp-initial i{font-size: 5rem; color: #cbd5e1; display: block; margin-bottom: 1.6rem;}

body.php-search-page .sp-initial h3{font-size: 2rem; font-weight: 700; color: #475569; margin-bottom: .8rem;}

body.php-search-page .sp-initial p{font-size: 1.4rem; color: #94a3b8; margin-bottom: 2.4rem;}

body.php-search-page .sp-cat-chips{display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
         margin-bottom: .4rem;}

body.php-search-page .sp-cat-chip{display: inline-flex; align-items: center; gap: .5rem;
         padding: .6rem 1.4rem; border-radius: 3rem; font-size: 1.3rem; font-weight: 600;
         cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s;
         color: #fff;}

body.php-search-page .sp-cat-chip:hover{transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.15);}

@keyframes fadeUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

@media(max-width:900px){body.php-search-page .sp-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:520px){body.php-search-page .sp-page{padding:2rem 1.4rem 4rem}

body.php-search-page .sp-grid{grid-template-columns:1fr}
}

/* ===== moved from checkout.php | scope: body.php-checkout ===== */
body.php-checkout *,
body.php-checkout *::before,
body.php-checkout *::after{
   box-sizing: border-box;
}

body.php-checkout{background: #f8f9fc; font-family: 'Segoe UI', sans-serif;}

body.php-checkout .checkout-page{max-width: 1200px;
         margin: 0 auto;
         padding: 3rem 2.4rem 6rem;}

body.php-checkout .checkout-bc{font-size: 1.4rem; color: #94a3b8;
         margin-bottom: 2.4rem;
         display: flex; align-items: center; gap: .6rem;
         animation: fadeSlideDown .4s ease both;}

body.php-checkout .checkout-bc a{color: #94a3b8; text-decoration: none; transition: color .15s;}

body.php-checkout .checkout-bc a:hover{color: #1a2a6c;}

body.php-checkout .checkout-bc i{font-size: 1.1rem; color: #cbd5e1;}

body.php-checkout .checkout-page-title{font-size: 2.8rem; font-weight: 800; color: #1e293b;
         margin-bottom: 2.8rem; display: flex; align-items: center; gap: .8rem;
         animation: fadeSlideDown .45s ease both;}

body.php-checkout .checkout-page-title i{color: #4f6ef7;}

body.php-checkout .checkout-steps{display: flex;
         align-items: center;
         margin-bottom: 3.2rem;
         animation: fadeSlideUp .5s ease both;}

body.php-checkout .checkout-step{display: flex; align-items: center; gap: .8rem;
         flex: 1;
         position: relative;}

body.php-checkout .step-circle{width: 3.8rem; height: 3.8rem; border-radius: 50%;
         display: flex; align-items: center; justify-content: center;
         font-size: 1.5rem; font-weight: 700;
         flex-shrink: 0;
         border: 2px solid #e2e8f0;
         background: #fff; color: #94a3b8;
         transition: all .3s;}

body.php-checkout .step-circle.done{background: #059669; border-color: #059669; color: #fff;}

body.php-checkout .step-circle.current{background: linear-gradient(135deg,#1a2a6c,#4f6ef7); border-color: #4f6ef7; color: #fff; box-shadow: 0 0 0 4px rgba(79,110,247,.18);}

body.php-checkout .step-label{font-size: 1.25rem; font-weight: 600; color: #94a3b8;}

body.php-checkout .checkout-step.done    .step-label{color: #059669;}

body.php-checkout .checkout-step.current .step-label{color: #1a2a6c;}

body.php-checkout .step-line{flex: 1; height: 2px; background: #e2e8f0; margin: 0 .4rem;}

body.php-checkout .step-line.done{background: linear-gradient(90deg,#059669,#34d399);}

body.php-checkout .checkout-layout{display: grid;
         grid-template-columns: 1fr 44rem;
         gap: 2.4rem;
         align-items: start;}

body.php-checkout .co-panel{background: #fff; border-radius: 1.4rem;
         box-shadow: 0 2px 12px rgba(0,0,0,.05);
         overflow: hidden;
         animation: fadeSlideUp .5s ease both;}

body.php-checkout .co-panel:nth-child(2){animation-delay: .06s;}

body.php-checkout .co-panel-header{padding: 1.8rem 2.2rem;
         border-bottom: 1px solid #f1f5f9;
         display: flex; align-items: center; gap: .8rem;
         font-size: 1.6rem; font-weight: 700; color: #0f172a;}

body.php-checkout .co-panel-header i{color: #4f6ef7; font-size: 1.5rem;}

body.php-checkout .co-panel-body{padding: 2.2rem;}

body.php-checkout .form-grid-2{display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 1.4rem 1.8rem;}

body.php-checkout .form-grid-2 .full{grid-column: 1/-1;}

body.php-checkout .form-field{display: flex; flex-direction: column; gap: .6rem;}

body.php-checkout .form-field label{font-size: 1.3rem; font-weight: 700; color: #475569;
         display: flex; align-items: center; gap: .5rem;}

body.php-checkout .form-field label i{color: #94a3b8; font-size: 1.2rem;}

body.php-checkout .input-wrap{position: relative;}

body.php-checkout .input-wrap i.fi{position: absolute; left: 1.4rem; top: 50%;
         transform: translateY(-50%);
         color: #94a3b8; font-size: 1.4rem;
         pointer-events: none; transition: color .2s;}

body.php-checkout .input-wrap:focus-within i.fi{color: #4f6ef7;}

body.php-checkout .form-input{width: 100%;
         padding: 1.2rem 1.4rem 1.2rem 4rem;
         border: 1.5px solid #e2e8f0; border-radius: .9rem;
         font-size: 1.4rem; color: #0f172a; background: #f8fafc;
         outline: none; font-family: inherit;
         transition: border-color .2s, box-shadow .2s, background .2s;}

body.php-checkout .form-input:focus{border-color: #4f6ef7; background: #fff;
         box-shadow: 0 0 0 3px rgba(79,110,247,.12);}

body.php-checkout .form-input::placeholder{color: #94a3b8;}

body.php-checkout .form-input[readonly]{background: #f1f5f9; color: #64748b; cursor: not-allowed;}

body.php-checkout .file-upload-area{border: 2px dashed #c7d2fe; border-radius: .9rem;
         padding: 2.4rem 1.6rem; text-align: center;
         cursor: pointer; background: #f8fafc;
         position: relative; transition: border-color .2s, background .2s;
         display: flex; flex-direction: column; align-items: center; gap: .6rem;}

body.php-checkout .file-upload-area:hover{border-color: #4f6ef7; background: #eff2ff;}

body.php-checkout .file-upload-area input[type="file"]{position: absolute; inset: 0; opacity: 0; cursor: pointer;
         width: 100%; height: 100%;}

body.php-checkout .file-upload-area i{font-size: 3rem; color: #94a3b8; pointer-events: none;}

body.php-checkout .file-upload-area .fu-title{font-size: 1.4rem; font-weight: 600; color: #475569; pointer-events: none;}

body.php-checkout .file-upload-area .fu-sub{font-size: 1.25rem; color: #94a3b8; pointer-events: none;}

body.php-checkout .file-upload-area .fu-name{font-size: 1.3rem; color: #4f6ef7; font-weight: 700; margin-top: .4rem;}

body.php-checkout .proof-preview{display: none;
         width: 100%; max-height: 20rem;
         object-fit: cover; border-radius: .8rem;
         margin-top: .8rem;
         border: 2px solid #e2e8f0;}

body.php-checkout .bank-info-card{background: linear-gradient(135deg, #0f2027 0%, #1a2a6c 55%, #2c3e8f 100%);
         border-radius: 1.2rem;
         padding: 2rem 2.2rem;
         margin-top: 1.6rem;
         position: relative;
         overflow: hidden;}

body.php-checkout .bank-info-card::before{content: '';
         position: absolute; top: -40%; right: -5%;
         width: 22rem; height: 22rem;
         background: radial-gradient(circle, rgba(79,110,247,.25) 0%, transparent 70%);
         pointer-events: none;}

body.php-checkout .bank-info-title{font-size: 1.3rem; font-weight: 700;
         color: rgba(255,255,255,.7);
         text-transform: uppercase; letter-spacing: .08em;
         margin-bottom: 1.4rem;
         position: relative; z-index: 1;}

body.php-checkout .bank-row{display: flex; align-items: center; justify-content: space-between;
         gap: 1rem; padding: .8rem 0;
         border-bottom: 1px solid rgba(255,255,255,.1);
         position: relative; z-index: 1;}

body.php-checkout .bank-row:last-child{border-bottom: none;}

body.php-checkout .bank-row-label{font-size: 1.25rem; color: rgba(255,255,255,.6);}

body.php-checkout .bank-row-val{font-size: 1.4rem; font-weight: 700; color: #fff;}

body.php-checkout .copy-btn{background: rgba(255,255,255,.15); border: none; border-radius: .5rem;
         color: #fff; font-size: 1.1rem; padding: .3rem .8rem; cursor: pointer;
         transition: background .15s; font-family: inherit;}

body.php-checkout .copy-btn:hover{background: rgba(255,255,255,.25);}

body.php-checkout .order-summary-panel{position: sticky; top: 9rem;}

body.php-checkout .summary-items{display: flex; flex-direction: column; gap: .8rem;}

body.php-checkout .summary-item{display: flex; align-items: center; gap: 1.4rem;
         padding: 1.2rem; border-radius: .9rem; background: #f8fafc;
         transition: background .15s;}

body.php-checkout .summary-item:hover{background: #f1f5f9;}

body.php-checkout .sum-item-img{width: 6.4rem; height: 6.4rem; border-radius: .8rem;
         overflow: hidden; background: #e2e8f0; flex-shrink: 0;}

body.php-checkout .sum-item-img img{width: 100%; height: 100%; object-fit: cover; display: block;}

body.php-checkout .sum-item-info{flex: 1; min-width: 0;}

body.php-checkout .sum-item-name{font-size: 1.35rem; font-weight: 700; color: #1e293b;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

body.php-checkout .sum-item-variation{font-size: 1.2rem; color: #64748b; margin-top: .3rem;}

body.php-checkout .sum-item-qty{display: inline-flex; align-items: center;
         background: #eff2ff; color: #1a2a6c;
         border-radius: .4rem; padding: .2rem .6rem;
         font-size: 1.2rem; font-weight: 700;
         margin-top: .3rem;}

body.php-checkout .sum-item-price{font-size: 1.4rem; font-weight: 800; color: #e11d48; flex-shrink: 0;}

body.php-checkout .summary-totals{padding: 1.6rem 0 0;
         border-top: 1px solid #f1f5f9;
         display: flex; flex-direction: column; gap: .8rem;}

body.php-checkout .total-row{display: flex; justify-content: space-between;
         align-items: center; font-size: 1.35rem;}

body.php-checkout .total-row .lbl{color: #64748b;}

body.php-checkout .total-row .val{font-weight: 700; color: #1e293b;}

body.php-checkout .total-row.grand .lbl{font-size: 1.5rem; font-weight: 700; color: #0f172a;}

body.php-checkout .total-row.grand .val{font-size: 2rem; font-weight: 800; color: #e11d48;}

body.php-checkout .btn-checkout-submit{width: 100%; padding: 1.6rem;
         background: linear-gradient(135deg, #1a2a6c, #4f6ef7);
         color: #fff; border: none; border-radius: 1rem;
         font-size: 1.6rem; font-weight: 700; cursor: pointer;
         transition: transform .15s, box-shadow .2s;
         font-family: inherit;
         display: flex; align-items: center; justify-content: center; gap: .7rem;
         margin-top: 1.6rem;}

body.php-checkout .btn-checkout-submit:hover{transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,110,247,.35);}

body.php-checkout .btn-checkout-submit:active{transform: scale(.97);}

body.php-checkout .btn-checkout-submit.disabled{background: #e2e8f0; color: #94a3b8; cursor: not-allowed; pointer-events: none;}

body.php-checkout .btn-back-cart{display: inline-flex; align-items: center; gap: .6rem;
         font-size: 1.35rem; font-weight: 600; color: #64748b;
         text-decoration: none; padding: 1rem 0;
         transition: color .15s;}

body.php-checkout .btn-back-cart:hover{color: #1a2a6c;}

body.php-checkout .co-notif{padding: 1.2rem 1.6rem; border-radius: .9rem;
         font-size: 1.35rem; display: flex; align-items: center; gap: .8rem;
         margin-bottom: 1.6rem; animation: fadeSlideDown .35s ease both;}

body.php-checkout .co-notif.success{background: #ecfdf5; border-left: 4px solid #059669; color: #065f46;}

body.php-checkout .co-notif.error{background: #fff1f2; border-left: 4px solid #e11d48; color: #be123c;}

body.php-checkout .empty-checkout{text-align: center; padding: 5rem 2rem;
         background: #fff; border-radius: 1.4rem;
         box-shadow: 0 2px 12px rgba(0,0,0,.05);
         color: #94a3b8;
         animation: fadeSlideUp .5s ease both;}

body.php-checkout .empty-checkout i{font-size: 5rem; display: block; margin-bottom: 1.4rem; color: #cbd5e1;}

body.php-checkout .empty-checkout h3{font-size: 2rem; font-weight: 700; color: #475569; margin-bottom: .8rem;}

body.php-checkout .empty-checkout p{font-size: 1.4rem; margin-bottom: 2rem;}

body.php-checkout .btn-go-cart{display: inline-flex; align-items: center; gap: .7rem;
         padding: 1.2rem 2.8rem; background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         color: #fff; border-radius: 1rem; font-size: 1.5rem; font-weight: 700;
         text-decoration: none; transition: transform .15s, box-shadow .2s;}

body.php-checkout .btn-go-cart:hover{transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,110,247,.35);}

@keyframes fadeSlideDown{ from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }

@keyframes fadeSlideUp{ from{opacity:0;transform:translateY(18px)}  to{opacity:1;transform:translateY(0)} }

@media(max-width:960px){body.php-checkout .checkout-page{padding: 2rem 1.6rem 4rem;}

body.php-checkout .checkout-layout{grid-template-columns: 1fr;}

body.php-checkout .order-summary-panel{position: static;}
}

@media(max-width:600px){body.php-checkout .form-grid-2{grid-template-columns: 1fr;}

body.php-checkout .form-grid-2 .full{grid-column: 1;}
}

/* ===== moved from quick_view.php | scope: body.php-quick-view ===== */
body.php-quick-view *,
body.php-quick-view *::before,
body.php-quick-view *::after{
   box-sizing: border-box;
}
body.php-quick-view{background: #fafaf8;
         font-family: 'Segoe UI', sans-serif;}

body.php-quick-view .qv-page{max-width: 1200px;
         margin: 0 auto;
         padding: 3rem 2.4rem 6rem;
         animation: fadeUp .5s ease both;}

@keyframes fadeUp{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

body.php-quick-view .qv-breadcrumb{font-size: 1.4rem;
         color: #94a3b8;
         margin-bottom: 2.8rem;
         display: flex;
         align-items: center;
         gap: .6rem;
         flex-wrap: wrap;}

body.php-quick-view .qv-breadcrumb a{color: #94a3b8;
         text-decoration: none;
         transition: color .15s;}

body.php-quick-view .qv-breadcrumb a:hover{color: #1a2a6c;}

body.php-quick-view .qv-breadcrumb i{font-size: 1.1rem; color: #cbd5e1;}

body.php-quick-view .qv-product-layout{display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 5rem;
         align-items: start;}

body.php-quick-view .qv-gallery{display: flex; flex-direction: column; gap: 1.4rem; position: sticky; top: 10rem;}

body.php-quick-view .qv-main-img-wrap{width: 100%;
         aspect-ratio: 1/1;
         border-radius: 1.6rem;
         overflow: hidden;
         background: #f1f0ec;
         position: relative;
         cursor: zoom-in;}

body.php-quick-view .qv-main-img{width: 100%; height: 100%;
         object-fit: cover;
         display: block;
         transition: transform .4s cubic-bezier(.25,.46,.45,.94);}

body.php-quick-view .qv-main-img-wrap:hover .qv-main-img{transform: scale(1.06);}

body.php-quick-view .qv-cat-badge{position: absolute;
         top: 1.4rem; left: 1.4rem;
         padding: .4rem 1.1rem;
         border-radius: 2rem;
         font-size: 1.2rem;
         font-weight: 700;
         color: #fff;
         z-index: 2;}

body.php-quick-view .qv-thumbs{display: flex;
         gap: 1rem;}

body.php-quick-view .qv-thumb{width: calc(33.333% - .7rem);
         aspect-ratio: 1/1;
         border-radius: .9rem;
         overflow: hidden;
         border: 2px solid transparent;
         cursor: pointer;
         transition: border-color .2s, transform .2s;
         background: #f1f0ec;
         flex-shrink: 0;}

body.php-quick-view .qv-thumb.active{border-color: #1a2a6c;}

body.php-quick-view .qv-thumb:hover{transform: translateY(-2px); border-color: #c7d2fe;}

body.php-quick-view .qv-thumb img{width: 100%; height: 100%;
         object-fit: cover; display: block;}

body.php-quick-view .qv-info{display: flex; flex-direction: column; gap: 2rem;}

body.php-quick-view .qv-product-name{font-size: 2.8rem;
         font-weight: 800;
         color: #0f172a;
         line-height: 1.3;
         letter-spacing: -.3px;}

body.php-quick-view .qv-price-row{display: flex;
         align-items: center;
         gap: 1.6rem;
         flex-wrap: wrap;}

body.php-quick-view .qv-price{font-size: 3.2rem;
         font-weight: 800;
         color: #e11d48;
         letter-spacing: -.5px;}

body.php-quick-view .qv-stock-badge{display: inline-flex;
         align-items: center;
         gap: .5rem;
         padding: .5rem 1.2rem;
         border-radius: 2rem;
         font-size: 1.25rem;
         font-weight: 700;
         background: #ecfdf5;
         color: #059669;
         border: 1px solid #a7f3d0;}

body.php-quick-view .qv-stock-dot{width: .7rem; height: .7rem;
         border-radius: 50%;
         background: #059669;
         animation: pulse 2s infinite;}

@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

body.php-quick-view .qv-divider{height: 1px; background: #f1f5f9;}

body.php-quick-view .qv-desc-title{font-size: 1.3rem;
         font-weight: 700;
         color: #64748b;
         text-transform: uppercase;
         letter-spacing: .08em;
         margin-bottom: .8rem;}

body.php-quick-view .qv-desc-text{font-size: 1.5rem;
         color: #475569;
         line-height: 1.8;
         white-space: pre-wrap;}

body.php-quick-view .variation-group{padding: 1.6rem;
         background: #f8fafc;
         border-radius: 1.2rem;
         border: 1px solid #f1f5f9;}

body.php-quick-view .variation-title{font-size: 1.5rem;
         font-weight: 700;
         color: #0f172a;
         margin-bottom: 1.2rem;
         display: flex;
         align-items: center;
         gap: .6rem;}

body.php-quick-view .variation-title i{color: #4f6ef7; font-size: 1.3rem;}

body.php-quick-view .variation-options{display: grid;
         grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
         gap: 1rem;}

body.php-quick-view .variation-option{position: relative;}

body.php-quick-view .variation-option input[type="radio"]{display: none;}

body.php-quick-view .variation-option label{display: flex;
         flex-direction: column;
         align-items: center;
         gap: .7rem;
         padding: 1rem;
         border: 2px solid #e2e8f0;
         border-radius: 1rem;
         background: #fff;
         cursor: pointer;
         font-size: 1.35rem;
         font-weight: 500;
         color: #334155;
         text-align: center;
         transition: border-color .2s, background .2s, transform .15s, box-shadow .15s;
         min-height: 9rem;
         justify-content: center;}

body.php-quick-view .variation-option label:hover{border-color: #c7d2fe;
         background: #f8fafc;
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(0,0,0,.06);}

body.php-quick-view .variation-option input:checked + label{border-color: #1a2a6c;
         background: linear-gradient(135deg, #1a2a6c, #4f6ef7);
         color: #fff;
         box-shadow: 0 6px 18px rgba(79,110,247,.3);
         transform: translateY(-2px);}

body.php-quick-view .variation-option img{width: 5.6rem; height: 5.6rem;
         object-fit: cover;
         border-radius: .7rem;
         border: 2px solid rgba(255,255,255,.3);}

body.php-quick-view .variation-option span{font-size: 1.3rem; line-height: 1.4; word-break: break-word;}

body.php-quick-view .variation-note{font-size: 1.25rem;
         color: #94a3b8;
         margin-top: 1rem;
         display: flex;
         align-items: center;
         gap: .4rem;}

body.php-quick-view .variation-error{display: none;
         margin-top: .8rem;
         padding: 1.1rem 1.4rem;
         border-radius: .8rem;
         background: #fff1f2;
         border-left: 4px solid #e11d48;
         color: #be123c;
         font-size: 1.35rem;
         font-weight: 600;
         animation: shake .35s ease both;}

@keyframes shake{
         0%,100%{transform:translateX(0)}
         20%{transform:translateX(-8px)}
         40%{transform:translateX(8px)}
         60%{transform:translateX(-4px)}
         80%{transform:translateX(4px)}
      }

body.php-quick-view .qv-qty-section{display: flex; flex-direction: column; gap: .8rem;}

body.php-quick-view .qv-qty-label{font-size: 1.3rem;
         font-weight: 700;
         color: #64748b;
         text-transform: uppercase;
         letter-spacing: .06em;}

body.php-quick-view .qv-qty-wrap{display: flex;
         align-items: center;
         gap: 0;
         border: 1.5px solid #e2e8f0;
         border-radius: .8rem;
         overflow: hidden;
         width: fit-content;}

body.php-quick-view .qty-stepper-btn{width: 4rem; height: 4.4rem;
         background: #f8fafc;
         border: none;
         font-size: 1.8rem;
         color: #475569;
         cursor: pointer;
         display: flex; align-items: center; justify-content: center;
         transition: background .15s, color .15s;
         line-height: 1;
         font-family: inherit;}

body.php-quick-view .qty-stepper-btn:hover{background: #eff2ff; color: #1a2a6c;}

body.php-quick-view .qty-stepper-input{width: 5rem; height: 4.4rem;
         text-align: center;
         border: none;
         border-left: 1.5px solid #e2e8f0;
         border-right: 1.5px solid #e2e8f0;
         font-size: 1.6rem;
         color: #0f172a;
         font-weight: 700;
         font-family: inherit;
         outline: none;
         -moz-appearance: textfield;}

body.php-quick-view .qty-stepper-input::-webkit-inner-spin-button,
body.php-quick-view .qty-stepper-input::-webkit-outer-spin-button{-webkit-appearance: none;}

body.php-quick-view .qv-actions{display: flex;
         flex-direction: column;
         gap: 1rem;}

body.php-quick-view .btn-add-cart{display: flex;
         align-items: center;
         justify-content: center;
         gap: .8rem;
         width: 100%;
         padding: 1.6rem;
         background: linear-gradient(135deg, #1a2a6c, #4f6ef7);
         color: #fff;
         border: none;
         border-radius: 1rem;
         font-size: 1.6rem;
         font-weight: 700;
         cursor: pointer;
         font-family: inherit;
         transition: transform .15s, box-shadow .2s;
         letter-spacing: .02em;}

body.php-quick-view .btn-add-cart:hover{transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,110,247,.35);}

body.php-quick-view .btn-add-cart:active{transform: scale(.97);}

body.php-quick-view .btn-add-wish{display: flex;
         align-items: center;
         justify-content: center;
         gap: .7rem;
         width: 100%;
         padding: 1.4rem;
         background: #fff;
         color: #e11d48;
         border: 2px solid #fecdd3;
         border-radius: 1rem;
         font-size: 1.5rem;
         font-weight: 700;
         cursor: pointer;
         font-family: inherit;
         transition: background .15s, border-color .15s, transform .15s;}

body.php-quick-view .btn-add-wish:hover{background: #fff0f3; border-color: #e11d48; transform: translateY(-1px);}

body.php-quick-view .qv-trust-strip{display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 1.2rem;
         padding: 1.6rem;
         background: #f8fafc;
         border-radius: 1rem;
         border: 1px solid #f1f5f9;}

body.php-quick-view .trust-item{display: flex;
         flex-direction: column;
         align-items: center;
         gap: .5rem;
         text-align: center;}

body.php-quick-view .trust-item i{font-size: 2rem; color: #4f6ef7;}

body.php-quick-view .trust-item strong{font-size: 1.25rem; font-weight: 700; color: #0f172a;}

body.php-quick-view .trust-item span{font-size: 1.15rem; color: #64748b;}

body.php-quick-view .qv-notif{padding: 1.2rem 1.6rem;
         border-radius: .8rem;
         font-size: 1.35rem;
         display: flex;
         align-items: center;
         gap: .8rem;
         animation: fadeSlideDown .35s ease both;
         margin-bottom: 1.6rem;}

@keyframes fadeSlideDown{ from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }

body.php-quick-view .qv-notif.success{background: #ecfdf5; border-left: 4px solid #059669; color: #065f46;}

body.php-quick-view .qv-notif.info{background: #eff2ff; border-left: 4px solid #4f6ef7; color: #1e40af;}

body.php-quick-view .qv-notif.warn{background: #fffbeb; border-left: 4px solid #f59e0b; color: #78350f;}

body.php-quick-view .qv-empty{text-align: center;
         padding: 6rem 2rem;
         color: #94a3b8;}

body.php-quick-view .qv-empty i{font-size: 5rem; display: block; margin-bottom: 1.4rem; color: #cbd5e1;}

body.php-quick-view .qv-empty p{font-size: 1.6rem; margin-bottom: 2rem;}

body.php-quick-view .btn-back-shop{display: inline-flex;
         align-items: center;
         gap: .7rem;
         padding: 1.2rem 2.4rem;
         background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         color: #fff;
         border-radius: .8rem;
         font-size: 1.4rem;
         font-weight: 700;
         text-decoration: none;
         transition: transform .15s, box-shadow .15s;}

body.php-quick-view .btn-back-shop:hover{transform: translateY(-2px); box-shadow: 0 6px 18px rgba(79,110,247,.35);}

@media(max-width:900px){body.php-quick-view .qv-product-layout{grid-template-columns: 1fr; gap: 3rem;}

body.php-quick-view .qv-gallery{position: static;}

body.php-quick-view .qv-product-name{font-size: 2.2rem;}
}

@media(max-width:600px){body.php-quick-view .qv-page{padding: 2rem 1.4rem 4rem;}

body.php-quick-view .qv-price{font-size: 2.6rem;}

body.php-quick-view .variation-options{grid-template-columns: 1fr 1fr;}

body.php-quick-view .qv-trust-strip{grid-template-columns: 1fr;}
}

/* ===== moved from chat.php | scope: body.php-chat ===== */
body.php-chat *,
body.php-chat *::before,
body.php-chat *::after{
   box-sizing: border-box;
}

body.php-chat{background: #f0f2f8;
         font-family: 'Segoe UI', sans-serif;
         min-height: 100vh;
         display: flex;
         flex-direction: column;}

body.php-chat .chat-page{flex: 1;
         display: flex;
         align-items: stretch;
         justify-content: center;
         padding: 2rem 1.6rem 3rem;
         animation: fadeUp .45s ease both;}

@keyframes fadeUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

body.php-chat .chat-window{background: #fff;
         border-radius: 1.6rem;
         box-shadow: 0 4px 28px rgba(0,0,0,.09);
         overflow: hidden;
         display: flex;
         flex-direction: column;
         width: 100%;
         max-width: 860px;
         height: calc(100vh - 16rem);
         min-height: 50rem;}

body.php-chat .chat-win-header{background: linear-gradient(135deg, #0f2027 0%, #1a2a6c 55%, #2c3e8f 100%);
         padding: 1.6rem 2rem;
         display: flex;
         align-items: center;
         gap: 1.4rem;
         position: relative;
         overflow: hidden;
         flex-shrink: 0;}

body.php-chat .chat-win-header::before{content: '';
         position: absolute;
         top: -50%; right: -5%;
         width: 22rem; height: 22rem;
         background: radial-gradient(circle, rgba(79,110,247,.3) 0%, transparent 70%);
         pointer-events: none;}

body.php-chat .hdr-avatar{width: 4.6rem; height: 4.6rem;
         border-radius: 50%;
         background: rgba(255,255,255,.18);
         border: 2px solid rgba(255,255,255,.3);
         display: flex; align-items: center; justify-content: center;
         font-size: 2rem; font-weight: 800; color: #fff;
         flex-shrink: 0; z-index: 1;}

body.php-chat .hdr-info{flex: 1; z-index: 1;}

body.php-chat .hdr-info h3{font-size: 1.6rem; font-weight: 700; color: #fff;}

body.php-chat .hdr-info p{font-size: 1.2rem; color: rgba(255,255,255,.6); margin-top: .2rem;}

body.php-chat .hdr-status{display: flex; align-items: center; gap: .5rem;
         font-size: 1.2rem; color: rgba(255,255,255,.75); z-index: 1;}

body.php-chat .hdr-badge{display: flex;
         align-items: center;
         gap: .5rem;
         background: rgba(255,255,255,.12);
         border: 1px solid rgba(255,255,255,.2);
         border-radius: 2rem;
         padding: .5rem 1.1rem;
         font-size: 1.2rem;
         color: rgba(255,255,255,.85);
         z-index: 1;}

body.php-chat .status-dot{width: .8rem; height: .8rem;
         border-radius: 50%;
         background: #34d399;
         box-shadow: 0 0 6px #34d399;
         animation: statusPulse 2s infinite;}

@keyframes statusPulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

body.php-chat .chat-msgs{flex: 1;
         overflow-y: auto;
         padding: 2rem;
         background: #f8fafc;
         display: flex;
         flex-direction: column;
         gap: .8rem;
         scroll-behavior: smooth;}

body.php-chat .chat-msgs::-webkit-scrollbar{width: 4px;}

body.php-chat .chat-msgs::-webkit-scrollbar-thumb{background: #cbd5e1; border-radius: 4px;}

body.php-chat .msg-placeholder{display: flex; flex-direction: column;
         align-items: center; justify-content: center;
         flex: 1; gap: 1rem;
         color: #94a3b8; padding: 4rem; text-align: center;
         animation: fadeUp .4s ease both;}

body.php-chat .msg-placeholder i{font-size: 4.8rem; color: #dbeafe;}

body.php-chat .msg-placeholder h4{font-size: 1.6rem; font-weight: 700; color: #64748b;}

body.php-chat .msg-placeholder p{font-size: 1.35rem;}

body.php-chat .msg-row{display: flex;
         width: 100%;
         align-items: flex-end;
         gap: .8rem;}

body.php-chat .msg-row.row-user{justify-content: flex-end;}

body.php-chat .msg-row.row-admin{justify-content: flex-start;}

body.php-chat .row-avatar{width: 3.2rem; height: 3.2rem;
         border-radius: 50%;
         background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         display: flex; align-items: center; justify-content: center;
         font-size: 1.3rem; font-weight: 700; color: #fff;
         flex-shrink: 0;
         margin-bottom: .2rem;}

body.php-chat .row-user .row-avatar{display: none;}

body.php-chat .msg-bubble{max-width: 65%;
         padding: 1.1rem 1.4rem;
         border-radius: 1.4rem;
         font-size: 1.4rem;
         line-height: 1.65;
         word-break: break-word;
         box-shadow: 0 2px 8px rgba(0,0,0,.06);
         animation: bubbleIn .18s ease both;}

@keyframes bubbleIn{
         from { opacity:0; transform:scale(.94) translateY(6px); }
         to   { opacity:1; transform:scale(1) translateY(0); }
      }

body.php-chat .row-admin .msg-bubble{background: #fff;
         color: #1e293b;
         border: 1px solid #f1f5f9;
         border-bottom-left-radius: .3rem;}

body.php-chat .row-user .msg-bubble{background: linear-gradient(135deg, #1a2a6c 0%, #4f6ef7 100%);
         color: #fff;
         border-bottom-right-radius: .3rem;}

body.php-chat .bubble-sender{font-size: 1.1rem; font-weight: 700;
         margin-bottom: .35rem; opacity: .75;}

body.php-chat .row-admin .bubble-sender{color: #1a2a6c;}

body.php-chat .row-user  .bubble-sender{color: rgba(255,255,255,.8);}

body.php-chat .bubble-text{font-size: 1.4rem;}

body.php-chat .bubble-time{font-size: 1.05rem;
         margin-top: .5rem;
         opacity: .55;
         display: flex;
         align-items: center;
         justify-content: flex-end;
         gap: .4rem;}

body.php-chat .row-user .bubble-time i{color: rgba(255,255,255,.6); font-size: 1rem;}

body.php-chat .date-sep{display: flex; align-items: center; gap: 1rem;
         margin: .8rem 0;
         font-size: 1.2rem; color: #94a3b8; font-weight: 600;}

body.php-chat .date-sep::before,
body.php-chat .date-sep::after{content: ''; flex: 1; height: 1px; background: #e2e8f0;}

body.php-chat .chat-input-row{padding: 1.4rem 1.8rem;
         border-top: 1px solid #f1f5f9;
         background: #fff;
         display: flex;
         align-items: center;
         gap: 1rem;
         flex-shrink: 0;}

body.php-chat .chat-input-row input{flex: 1;
         padding: 1.2rem 1.6rem;
         border: 1.5px solid #e2e8f0;
         border-radius: 3rem;
         font-size: 1.4rem;
         color: #0f172a;
         background: #f8fafc;
         outline: none;
         font-family: inherit;
         transition: border-color .2s, box-shadow .2s, background .2s;}

body.php-chat .chat-input-row input:focus{border-color: #4f6ef7;
         background: #fff;
         box-shadow: 0 0 0 3px rgba(79,110,247,.12);}

body.php-chat .chat-input-row input::placeholder{color: #94a3b8;}

body.php-chat .btn-send{width: 4.8rem; height: 4.8rem;
         border-radius: 50%;
         background: linear-gradient(135deg, #1a2a6c, #4f6ef7);
         color: #fff;
         border: none;
         cursor: pointer;
         display: flex; align-items: center; justify-content: center;
         font-size: 1.8rem;
         flex-shrink: 0;
         box-shadow: 0 4px 12px rgba(79,110,247,.35);
         transition: transform .15s, box-shadow .15s;}

body.php-chat .btn-send:hover{transform: scale(1.08); box-shadow: 0 6px 18px rgba(79,110,247,.4);}

body.php-chat .btn-send:active{transform: scale(.94);}

body.php-chat .chat-info-strip{background: #eff2ff;
         border-bottom: 1px solid #c7d2fe;
         padding: .8rem 2rem;
         display: flex;
         align-items: center;
         gap: .7rem;
         font-size: 1.25rem;
         color: #1e40af;
         flex-shrink: 0;}

body.php-chat .chat-info-strip i{font-size: 1.2rem;}

@media(max-width:600px){body.php-chat .chat-page{padding: .8rem .8rem 2rem;}

body.php-chat .chat-window{height: calc(100vh - 12rem); min-height: 42rem; border-radius: 1rem;}

body.php-chat .msg-bubble{max-width: 85%;}

body.php-chat .chat-msgs{padding: 1.2rem;}

body.php-chat .chat-input-row{padding: 1rem 1.2rem;}

body.php-chat .hdr-badge{display: none;}
}

/* ===== moved from user_register.php | scope: body.php-user-register ===== */
body.php-user-register *,
body.php-user-register *::before,
body.php-user-register *::after{
   box-sizing: border-box;
}

body.php-user-register{min-height: 100vh;
         background: #fafafa;
         font-family: 'Segoe UI', sans-serif;
         display: flex;
         flex-direction: column;}

body.php-user-register .auth-layout{flex: 1;
         display: grid;
         grid-template-columns: 1fr 1fr;
         min-height: calc(100vh - 8rem);}

body.php-user-register .auth-visual{background: linear-gradient(160deg, #1a2a6c 0%, #0f2027 40%, #2c3e8f 100%);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: 5rem 4rem;
         position: relative;
         overflow: hidden;}

body.php-user-register .auth-visual::before{content: '';
         position: absolute;
         top: -8rem; right: -8rem;
         width: 40rem; height: 40rem;
         border-radius: 50%;
         background: radial-gradient(circle, rgba(79,110,247,.28) 0%, transparent 65%);
         animation: floatBlob 8s ease-in-out infinite;}

body.php-user-register .auth-visual::after{content: '';
         position: absolute;
         bottom: -6rem; left: -4rem;
         width: 28rem; height: 28rem;
         border-radius: 50%;
         background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 65%);
         animation: floatBlob 10s ease-in-out infinite reverse;}

@keyframes floatBlob{
         0%,100% { transform: translate(0,0) scale(1); }
         50%      { transform: translate(-15px,20px) scale(1.05); }
      }

body.php-user-register .visual-content{position: relative; z-index: 1; text-align: center;}

body.php-user-register .visual-steps{display: flex;
         flex-direction: column;
         gap: 1.6rem;
         width: 100%;
         max-width: 32rem;
         margin: 0 auto 3rem;}

body.php-user-register .vstep{display: flex;
         align-items: center;
         gap: 1.4rem;
         animation: fadeSlideRight .5s ease both;}

body.php-user-register .vstep:nth-child(1){animation-delay:.1s}

body.php-user-register .vstep:nth-child(2){animation-delay:.2s}

body.php-user-register .vstep:nth-child(3){animation-delay:.3s}

body.php-user-register .vstep:nth-child(4){animation-delay:.4s}

@keyframes fadeSlideRight{
         from{opacity:0;transform:translateX(-18px)}
         to  {opacity:1;transform:translateX(0)}
      }

body.php-user-register .vstep-num{width: 3.6rem; height: 3.6rem;
         border-radius: 50%;
         background: rgba(255,255,255,.18);
         border: 2px solid rgba(255,255,255,.3);
         display: flex; align-items: center; justify-content: center;
         font-size: 1.4rem; font-weight: 800; color: #fff;
         flex-shrink: 0;}

body.php-user-register .vstep-info strong{display: block; font-size: 1.4rem; font-weight: 700; color: #fff;}

body.php-user-register .vstep-info span{font-size: 1.25rem; color: rgba(255,255,255,.6);}

body.php-user-register .vstep-divider{width: 2px; height: 1.4rem;
         background: rgba(255,255,255,.2);
         margin-left: 1.7rem;}

body.php-user-register .visual-content h2{font-size: 2.8rem;
         font-weight: 800;
         color: #fff;
         margin-bottom: 1rem;
         line-height: 1.2;}

body.php-user-register .visual-content p{font-size: 1.4rem;
         color: rgba(255,255,255,.65);
         line-height: 1.7;
         max-width: 32rem;
         margin: 0 auto 3rem;}

body.php-user-register .visual-stats{display: flex;
         gap: 2rem;
         justify-content: center;
         margin-top: 2.4rem;}

body.php-user-register .vstat{text-align: center;
         background: rgba(255,255,255,.08);
         border: 1px solid rgba(255,255,255,.12);
         border-radius: 1rem;
         padding: 1.2rem 2rem;}

body.php-user-register .vstat-val{font-size: 2.2rem; font-weight: 800; color: #fff; line-height: 1;}

body.php-user-register .vstat-lbl{font-size: 1.2rem; color: rgba(255,255,255,.55); margin-top: .3rem;}

body.php-user-register .auth-form-panel{background: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: 4rem 6rem;}

body.php-user-register .auth-form-inner{width: 100%;
         max-width: 44rem;
         animation: fadeSlideUp .55s cubic-bezier(.22,1,.36,1) both;}

@keyframes fadeSlideUp{
         from{opacity:0;transform:translateY(24px)}
         to  {opacity:1;transform:translateY(0)}
      }

body.php-user-register .form-brand{display: flex;
         align-items: center;
         gap: 1rem;
         margin-bottom: 2.8rem;}

body.php-user-register .form-brand-icon{width: 4.4rem; height: 4.4rem;
         border-radius: 1rem;
         background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         display: flex; align-items: center; justify-content: center;
         font-size: 2rem; color: #fff;
         box-shadow: 0 4px 14px rgba(79,110,247,.35);}

body.php-user-register .form-brand-text strong{display: block; font-size: 2rem; font-weight: 800; color: #0f172a; line-height:1.2;}

body.php-user-register .form-brand-text span{font-size: 1.3rem; color: #94a3b8;}

body.php-user-register .form-heading{margin-bottom: 2.4rem;}

body.php-user-register .form-heading h3{font-size: 2.4rem; font-weight: 800; color: #0f172a; margin-bottom: .5rem;}

body.php-user-register .form-heading p{font-size: 1.4rem; color: #64748b;}

body.php-user-register .auth-alert{padding: 1.2rem 1.4rem;
         border-radius: .9rem;
         font-size: 1.35rem;
         display: flex;
         align-items: center;
         gap: .8rem;
         margin-bottom: 2rem;}

body.php-user-register .auth-alert.error{background: #fff1f2; border-left: 4px solid #e11d48; color: #be123c;}

body.php-user-register .auth-alert.success{background: #ecfdf5; border-left: 4px solid #059669; color: #065f46;}

body.php-user-register .auth-form{display: flex; flex-direction: column; gap: 1.4rem;}

body.php-user-register .auth-field{display: flex; flex-direction: column; gap: .6rem;}

body.php-user-register .auth-field label{font-size: 1.3rem;
         font-weight: 700;
         color: #475569;}

body.php-user-register .auth-input-wrap{position: relative;}

body.php-user-register .auth-input-wrap i.ai{position: absolute;
         left: 1.4rem; top: 50%;
         transform: translateY(-50%);
         color: #94a3b8; font-size: 1.4rem;
         pointer-events: none;
         transition: color .2s;}

body.php-user-register .auth-input-wrap:focus-within i.ai{color: #4f6ef7;}

body.php-user-register .auth-input{width: 100%;
         padding: 1.2rem 1.4rem 1.2rem 4.2rem;
         border: 1.5px solid #e2e8f0;
         border-radius: 1rem;
         font-size: 1.4rem;
         color: #0f172a;
         background: #f8fafc;
         outline: none;
         font-family: inherit;
         transition: border-color .2s, box-shadow .2s, background .2s;}

body.php-user-register .auth-input:focus{border-color: #4f6ef7;
         background: #fff;
         box-shadow: 0 0 0 3px rgba(79,110,247,.12);}

body.php-user-register .auth-input::placeholder{color: #94a3b8;}

body.php-user-register .toggle-eye{position: absolute;
         right: 1.4rem; top: 50%;
         transform: translateY(-50%);
         color: #94a3b8; font-size: 1.4rem;
         cursor: pointer;
         transition: color .2s;
         z-index: 2;}

body.php-user-register .toggle-eye:hover{color: #4f6ef7;}

body.php-user-register .fields-row{display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 1.2rem;}

body.php-user-register .strength-wrap{margin-top: .6rem;}

body.php-user-register .strength-track{height: .4rem; background: #e2e8f0; border-radius: 2rem; overflow: hidden;}

body.php-user-register .strength-fill{height: 100%; width: 0; border-radius: 2rem; transition: width .35s, background .35s;}

body.php-user-register .strength-lbl{font-size: 1.2rem; margin-top: .3rem; font-weight: 600;}

body.php-user-register .terms-row{display: flex;
         align-items: flex-start;
         gap: .8rem;
         font-size: 1.3rem;
         color: #64748b;
         padding: 1rem 1.2rem;
         background: #f8fafc;
         border-radius: .8rem;
         border: 1px solid #f1f5f9;}

body.php-user-register .terms-row input[type="checkbox"]{width: 1.6rem; height: 1.6rem; accent-color: #4f6ef7; flex-shrink:0; margin-top:.15rem;}

body.php-user-register .terms-row a{color: #4f6ef7; font-weight: 600; text-decoration: none;}

body.php-user-register .terms-row a:hover{text-decoration: underline;}

body.php-user-register .btn-auth{width: 100%;
         padding: 1.5rem;
         background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         color: #fff;
         border: none;
         border-radius: 1rem;
         font-size: 1.5rem;
         font-weight: 700;
         cursor: pointer;
         transition: transform .15s, box-shadow .2s;
         font-family: inherit;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: .7rem;}

body.php-user-register .btn-auth:hover{transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,110,247,.35);}

body.php-user-register .btn-auth:active{transform: scale(.97);}

body.php-user-register .auth-switch{text-align: center;
         font-size: 1.4rem;
         color: #64748b;
         margin-top: 2rem;}

body.php-user-register .auth-switch a{color: #4f6ef7; font-weight: 700; text-decoration: none;}

body.php-user-register .auth-switch a:hover{text-decoration: underline;}

body.php-user-register .redirect-bar{background: #ecfdf5;
         border-left: 4px solid #059669;
         border-radius: .9rem;
         padding: 1.4rem 1.6rem;
         margin-bottom: 2rem;
         font-size: 1.35rem;
         color: #065f46;}

body.php-user-register .redirect-progress{margin-top: .8rem;
         height: .4rem;
         background: #d1fae5;
         border-radius: 2rem;
         overflow: hidden;}

body.php-user-register .redirect-fill{height: 100%;
         background: #059669;
         border-radius: 2rem;
         animation: fillProgress 3s linear both;
         width: 0%;}

@keyframes fillProgress{ from{width:0%} to{width:100%} }

@media(max-width:960px){body.php-user-register .auth-layout{grid-template-columns: 1fr;}

body.php-user-register .auth-visual{display: none;}

body.php-user-register .auth-form-panel{padding: 4rem 2.4rem;}

body.php-user-register .fields-row{grid-template-columns: 1fr;}
}

@media(max-width:480px){body.php-user-register .auth-form-panel{padding: 3rem 1.6rem;}
}

/* ===== moved from index.php | scope: body.php-index ===== */
body.php-index{--galaxy-blue: linear-gradient(135deg, #0f2faa, #1a6fff, #00c6ff);
         --galaxy-blue-solid: #1a6fff;
         --galaxy-blue-dark: #0f2faa;}

body.php-index.home-modern{padding-top: 0 !important;
         background: #f5f3ef;}

body.php-index .btn,
body.php-index .option-btn,
body.php-index .hero-btn-main,
body.php-index .promo-split-btn,
body.php-index .cat-view-all{background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         color: #fff !important;
         border: none !important;
         transition: opacity .25s ease, transform .2s ease !important;}

body.php-index .btn:hover,
body.php-index .option-btn:hover,
body.php-index .hero-btn-main:hover,
body.php-index .promo-split-btn:hover,
body.php-index .cat-view-all:hover{opacity: .85 !important;
         transform: translateY(-2px) !important;
         background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         color: #fff !important;}

body.php-index .hero-fashion{position: relative;
         width: 100%;
         min-height: 100vh;
         overflow: hidden;
         background: #000;}

body.php-index .hero-fashion video{position: absolute; inset: 0;
         width: 100%; height: 100%;
         object-fit: cover; z-index: 0;}

body.php-index .hero-overlay{position: absolute; inset: 0;
         background: linear-gradient(to right, rgba(0,0,0,.58), rgba(0,0,0,.08));
         z-index: 1;}

body.php-index .hero-content{position: absolute;
         top: 54%; left: 5%;
         transform: translateY(-50%);
         z-index: 3;
         max-width: 70rem;
         color: #fff;}

body.php-index .hero-mini{display: inline-block;
         font-size: 1.3rem; font-weight: 600;
         letter-spacing: .14rem; text-transform: uppercase;
         margin-bottom: 1.6rem;
         background: rgba(255,255,255,.14);
         backdrop-filter: blur(4px);
         padding: .7rem 1.4rem; border-radius: 3rem;}

body.php-index .hero-content h1{font-size: clamp(3.2rem, 5.5vw, 6.5rem);
         line-height: 1.08; font-weight: 300;
         margin: 0 0 2rem; text-transform: uppercase; color: #fff;}

body.php-index .hero-content h1 strong{font-weight: 800;}

body.php-index .hero-content p{max-width: 54rem; font-size: 1.9rem; line-height: 1.85;
         margin-bottom: 2.5rem; color: rgba(255,255,255,.9);}

body.php-index .hero-btn-main{display: inline-block; padding: 1.4rem 3rem;
         font-size: 1.6rem; font-weight: 600;
         border-radius: .6rem; letter-spacing: .04rem;}

         body.php-index .category-editorial{padding: clamp(4.5rem, 6vw, 7rem) 5%;
            background: #fff;}

body.php-index .promo-split{display: grid;
         grid-template-columns: 1fr 1fr;
         min-height: 62vh;}

body.php-index .promo-split-text{display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 7rem 6rem 7rem 7rem;
         background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);}

body.php-index .promo-split-text .promo-eyebrow{font-size: 1.3rem;
         font-weight: 700;
         letter-spacing: .22rem;
         text-transform: uppercase;
         color: rgba(255,255,255,.65);
         margin-bottom: 2.4rem;
         font-family: 'Courier New', Courier, monospace;}

body.php-index .promo-split-text h2{font-family: 'Courier New', Courier, monospace;
         font-size: clamp(3.2rem, 3.8vw, 5.2rem);
         font-weight: 900;
         line-height: 1.1;
         text-transform: uppercase;
         letter-spacing: -.01em;
         color: #ffffff;
         margin: 0 0 3.5rem;}

body.php-index .promo-split-btn{display: inline-block;
         padding: 1.6rem 3.2rem;
         background: #0f2027;
         color: #ffffff;
         font-size: 1.4rem;
         font-weight: 700;
         letter-spacing: .12rem;
         text-transform: uppercase;
         font-family: 'Courier New', Courier, monospace;
         border: 2px solid #ffffff;
         transition: .25s ease;
         align-self: flex-start;}

body.php-index .promo-split-btn:hover{background: transparent;
         color: #ffffff;}

body.php-index .promo-split-img{position: relative;
         overflow: hidden;}

body.php-index .promo-split-img img{width: 100%; height: 100%;
         object-fit: cover; display: block;
         transition: transform .65s cubic-bezier(.25,.46,.45,.94);}

body.php-index .promo-split-img:hover img{transform: scale(1.05);}

body.php-index .promo-ticker{background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         overflow: hidden;
         padding: 1.7rem 0;
         white-space: nowrap;
         user-select: none;
         position: relative;}

body.php-index .promo-ticker::before{content: "";
         position: absolute; inset: 0;
         background: radial-gradient(circle at 70% 40%, rgba(0,150,255,.25), transparent 60%),
                     radial-gradient(circle at 30% 60%, rgba(100,0,255,.2), transparent 60%);
         pointer-events: none;}

body.php-index .promo-ticker-track{display: inline-flex;
         animation: ticker-scroll 32s linear infinite;}

body.php-index .promo-ticker-track:hover{animation-play-state: paused;}

body.php-index .promo-ticker-item{display: inline-flex; align-items: center; gap: 1.8rem;
         padding: 0 3rem;
         font-family: 'Courier New', Courier, monospace;
         font-size: 1.5rem; font-weight: 700;
         letter-spacing: .15rem; text-transform: uppercase; color: #fdf6ee;}

body.php-index .promo-ticker-dot{width: .65rem; height: .65rem; border-radius: 50%;
         background: rgba(253,246,238,.55); flex-shrink: 0;}

@keyframes ticker-scroll{
         0%   { transform: translateX(0); }
         100% { transform: translateX(-50%); }
      }

body.php-index .latest-products{padding: 7rem 5%;
         background: #fff;}

body.php-index .latest-products .lp-header{text-align: center;
         margin-bottom: 1.4rem;}

body.php-index .latest-products .lp-header h2{font-size: clamp(2.8rem, 4vw, 4.2rem);
         font-weight: 800;
         color: #111;
         letter-spacing: -.02em;
         margin: 0 0 1rem;}

body.php-index .latest-products .lp-header p{font-size: 1.7rem;
         color: #888;
         max-width: 55rem;
         margin: 0 auto 3.6rem;
         line-height: 1.7;}

body.php-index .lp-grid{display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 2.4rem;}

body.php-index .lp-card{background: #f7f8fc;
         border-radius: 1.6rem;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         transition: transform .28s ease, box-shadow .28s ease;
         border: 1.5px solid #ececec;
         position: relative;}

body.php-index .lp-card:hover{transform: translateY(-10px);
         box-shadow: 0 1.6rem 4rem rgba(26,111,255,.13);}

body.php-index .lp-card-top{padding: 2rem 2.4rem 1rem;}

body.php-index .lp-card-top .lp-name{font-size: 1.9rem;
         font-weight: 700;
         color: #111;
         line-height: 1.3;
         margin: 0 0 .4rem;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;}

body.php-index .lp-card-top .lp-shop-link{font-size: 1.4rem;
         font-weight: 700;
         background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         text-decoration: none;
         letter-spacing: .03rem;}

body.php-index .lp-card-top .lp-shop-link:hover{opacity: .75;}

body.php-index .lp-card-img{position: relative;
         width: 100%;
         aspect-ratio: 1 / 1;
         overflow: hidden;
         background: #eef0f7;
         flex: 1;}

body.php-index .lp-card-img img{width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: transform .4s cubic-bezier(.25,.46,.45,.94);}

body.php-index .lp-card:hover .lp-card-img img{transform: scale(1.07);}

body.php-index .lp-card .lp-actions{position: absolute;
         top: 1rem; right: 1rem;
         display: flex; flex-direction: column; gap: .6rem;
         z-index: 5;}

body.php-index .lp-card .lp-actions a,
body.php-index .lp-card .lp-actions button{width: 3.8rem; height: 3.8rem;
         border-radius: 50%;
         background: #fff;
         box-shadow: 0 .2rem .8rem rgba(0,0,0,.13);
         display: flex; align-items: center; justify-content: center;
         font-size: 1.6rem; color: #111;
         cursor: pointer; border: none;
         transition: background .2s, color .2s;}

body.php-index .lp-card .lp-actions a:hover,
body.php-index .lp-card .lp-actions button:hover{background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         color: #fff;}

body.php-index .lp-card-footer{padding: 1.6rem 2.4rem 2rem;
         display: flex;
         flex-direction: column;
         gap: 1.2rem;
         background: #fff;}

body.php-index .lp-card-footer .lp-price-row{display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 1rem;}

body.php-index .lp-card-footer .lp-price{font-size: 2rem;
         font-weight: 800;
         color: #e74c3c;}

body.php-index .lp-card-footer .lp-qty{width: 7rem; height: 4rem;
         border: 1.5px solid #ddd;
         border-radius: .6rem;
         text-align: center;
         font-size: 1.6rem; color: #333;}

body.php-index .lp-card-footer .lp-btn-cart{width: 100%;
         padding: 1.2rem;
         border: none; border-radius: .8rem;
         font-size: 1.5rem; font-weight: 700;
         cursor: pointer; letter-spacing: .04rem;
         color: #fff;
         background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         transition: opacity .2s, transform .2s;}

body.php-index .lp-card-footer .lp-btn-cart:hover{opacity: .85;
         transform: translateY(-2px);}

@media (max-width: 1200px){body.php-index .cat-grid{grid-auto-rows: clamp(13rem, 12vw, 16rem);}

body.php-index .promo-split-text{padding: 5rem 4rem 5rem 5rem;}
}

@media (max-width: 900px){body.php-index .cat-grid{grid-template-columns: repeat(2, minmax(0, 1fr));
         grid-auto-rows: clamp(13rem, 22vw, 19rem);}

body.php-index .cat-card-featured,
body.php-index .cat-card-wide,
body.php-index .cat-card-full{grid-column: span 2;}

body.php-index .cat-card-featured{grid-row: span 2;}

body.php-index .promo-split{grid-template-columns: 1fr;}

body.php-index .promo-split-img{min-height: 55vw;}

body.php-index .promo-split-text{padding: 5rem 5%; order: 2;}

body.php-index .promo-split-img{order: 1;}

body.php-index .lp-grid{grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 640px){body.php-index .cat-grid{grid-template-columns: 1fr;
         grid-auto-rows: auto; gap: 1.2rem;}

body.php-index .cat-grid-card,
body.php-index .cat-card-featured,
body.php-index .cat-card-tall,
body.php-index .cat-card-wide,
body.php-index .cat-card-full{grid-column: 1 / -1; grid-row: auto;
         aspect-ratio: 4 / 3; min-height: 22rem;}

body.php-index .cat-card-featured{aspect-ratio: 4 / 5;}

body.php-index .cat-card-full{aspect-ratio: 16 / 9;}

body.php-index .cat-grid-card .cat-card-label{padding: 1.8rem;}

body.php-index .category-editorial{padding: 4rem 4%;}

body.php-index .hero-content{left: 5%; right: 5%;}

body.php-index .hero-content h1{font-size: clamp(3rem, 10vw, 5rem);}

body.php-index .hero-content p{font-size: 1.7rem;}

body.php-index .promo-split-text h2{font-size: clamp(2.8rem, 8vw, 4.2rem);}

body.php-index .promo-ticker-item{font-size: 1.35rem; padding: 0 2rem;}

body.php-index .lp-grid{grid-template-columns: 1fr;}

body.php-index .latest-products{padding: 5rem 4%;}
}

body.php-index .footer{background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000) !important;
         color: #fff !important;
         padding: 3rem 2rem;}

body.php-index .footer .grid{display: grid;
         grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
         gap: 2rem;}

body.php-index .footer .grid .box h3{font-size:2rem;
         color:#fff !important;
         margin-bottom:2rem;
         text-transform:capitalize;}

body.php-index .footer .grid .box a{display:block;
         margin:1.5rem 0;
         font-size:1.7rem;
         color:rgba(255,255,255,.7) !important;
         transition:.3s;}

body.php-index .footer .grid .box a i{padding-right:1rem;
         color:#fff !important;
         transition:.3s;}

body.php-index .footer .grid .box a:hover{color:#fff !important;
         transform: translateX(5px);}

body.php-index .footer .grid .box a:hover i{padding-right:2rem;}

body.php-index .footer .credit{text-align:center;
         padding:2.5rem 2rem;
         border-top:1px solid rgba(255,255,255,.15);
         font-size:1.8rem;
         color:rgba(255,255,255,.8) !important;}

body.php-index .footer .credit span{color:#00d4ff !important;}

body.php-index .footer{box-shadow: inset 0 20px 40px rgba(0,0,0,0.6);}

/* ===== moved from user_login.php | scope: body.php-user-login ===== */
body.php-user-login *,
body.php-user-login *::before,
body.php-user-login *::after{
   box-sizing: border-box;
}

body.php-user-login{min-height: 100vh;
         background: #fafafa;
         font-family: 'Segoe UI', sans-serif;
         display: flex;
         flex-direction: column;}

body.php-user-login .auth-layout{flex: 1;
         display: grid;
         grid-template-columns: 1fr 1fr;
         min-height: calc(100vh - 8rem);}

body.php-user-login .auth-visual{background: linear-gradient(160deg, #1a2a6c 0%, #0f2027 40%, #2c3e8f 100%);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: 5rem 4rem;
         position: relative;
         overflow: hidden;}

body.php-user-login .auth-visual::before{content: '';
         position: absolute;
         top: -8rem; left: -8rem;
         width: 40rem; height: 40rem;
         border-radius: 50%;
         background: radial-gradient(circle, rgba(79,110,247,.3) 0%, transparent 65%);
         animation: floatBlob 7s ease-in-out infinite;}

body.php-user-login .auth-visual::after{content: '';
         position: absolute;
         bottom: -6rem; right: -6rem;
         width: 32rem; height: 32rem;
         border-radius: 50%;
         background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 65%);
         animation: floatBlob 9s ease-in-out infinite reverse;}

@keyframes floatBlob{
         0%,100% { transform: translate(0,0) scale(1); }
         50%      { transform: translate(20px,-20px) scale(1.06); }
      }

body.php-user-login .visual-content{position: relative;
         z-index: 1;
         text-align: center;}

body.php-user-login .visual-icon-wrap{width: 10rem; height: 10rem;
         border-radius: 50%;
         background: rgba(255,255,255,.1);
         border: 2px solid rgba(255,255,255,.2);
         display: flex; align-items: center; justify-content: center;
         font-size: 4.4rem; color: #fff;
         margin: 0 auto 2.4rem;
         animation: iconPulse 3s ease-in-out infinite;}

@keyframes iconPulse{
         0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.15); }
         50%      { box-shadow: 0 0 0 20px rgba(255,255,255,0); }
      }

body.php-user-login .visual-content h2{font-size: 3.2rem;
         font-weight: 800;
         color: #fff;
         margin-bottom: 1rem;
         letter-spacing: -.5px;
         line-height: 1.2;}

body.php-user-login .visual-content p{font-size: 1.5rem;
         color: rgba(255,255,255,.65);
         line-height: 1.7;
         max-width: 34rem;
         margin: 0 auto 3rem;}

body.php-user-login .feature-pills{display: flex;
         flex-direction: column;
         gap: 1.2rem;
         width: 100%;
         max-width: 32rem;
         margin: 0 auto;}

body.php-user-login .feature-pill{display: flex;
         align-items: center;
         gap: 1.2rem;
         background: rgba(255,255,255,.1);
         border: 1px solid rgba(255,255,255,.15);
         border-radius: 1rem;
         padding: 1.2rem 1.6rem;
         color: rgba(255,255,255,.9);
         font-size: 1.35rem;
         font-weight: 500;
         animation: fadeSlideRight .6s ease both;}

body.php-user-login .feature-pill:nth-child(1){animation-delay:.1s}

body.php-user-login .feature-pill:nth-child(2){animation-delay:.2s}

body.php-user-login .feature-pill:nth-child(3){animation-delay:.3s}

@keyframes fadeSlideRight{
         from{opacity:0;transform:translateX(-20px)}
         to  {opacity:1;transform:translateX(0)}
      }

body.php-user-login .feature-pill i{width: 3.2rem; height: 3.2rem;
         border-radius: .7rem;
         background: rgba(255,255,255,.18);
         display: flex; align-items: center; justify-content: center;
         font-size: 1.5rem;
         flex-shrink: 0;}

body.php-user-login .auth-form-panel{background: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: 5rem 6rem;
         position: relative;}

body.php-user-login .auth-form-inner{width: 100%;
         max-width: 42rem;
         animation: fadeSlideUp .55s cubic-bezier(.22,1,.36,1) both;}

@keyframes fadeSlideUp{
         from{opacity:0;transform:translateY(24px)}
         to  {opacity:1;transform:translateY(0)}
      }

body.php-user-login .form-brand{display: flex;
         align-items: center;
         gap: 1rem;
         margin-bottom: 3.2rem;}

body.php-user-login .form-brand-icon{width: 4.4rem; height: 4.4rem;
         border-radius: 1rem;
         background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         display: flex; align-items: center; justify-content: center;
         font-size: 2rem; color: #fff;
         box-shadow: 0 4px 14px rgba(79,110,247,.35);}

body.php-user-login .form-brand-text{line-height: 1.2;}

body.php-user-login .form-brand-text strong{display: block; font-size: 2rem; font-weight: 800; color: #0f172a;}

body.php-user-login .form-brand-text span{font-size: 1.3rem; color: #94a3b8; font-weight: 500;}

body.php-user-login .form-heading{margin-bottom: 2.8rem;}

body.php-user-login .form-heading h3{font-size: 2.6rem; font-weight: 800; color: #0f172a; margin-bottom: .5rem;}

body.php-user-login .form-heading p{font-size: 1.4rem; color: #64748b;}

body.php-user-login .auth-alert{padding: 1.2rem 1.4rem;
         border-radius: .9rem;
         font-size: 1.35rem;
         display: flex;
         align-items: center;
         gap: .8rem;
         margin-bottom: 2rem;}

body.php-user-login .auth-alert.error{background: #fff1f2; border-left: 4px solid #e11d48; color: #be123c;}

body.php-user-login .auth-alert.success{background: #ecfdf5; border-left: 4px solid #059669; color: #065f46;}

body.php-user-login .auth-form{display: flex; flex-direction: column; gap: 1.6rem;}

body.php-user-login .auth-field{display: flex; flex-direction: column; gap: .6rem;}

body.php-user-login .auth-field label{font-size: 1.3rem;
         font-weight: 700;
         color: #475569;
         display: flex;
         align-items: center;
         gap: .5rem;}

body.php-user-login .auth-input-wrap{position: relative;}

body.php-user-login .auth-input-wrap i.ai{position: absolute;
         left: 1.4rem; top: 50%;
         transform: translateY(-50%);
         color: #94a3b8; font-size: 1.5rem;
         pointer-events: none;
         transition: color .2s;}

body.php-user-login .auth-input-wrap:focus-within i.ai{color: #4f6ef7;}

body.php-user-login .auth-input{width: 100%;
         padding: 1.3rem 1.4rem 1.3rem 4.2rem;
         border: 1.5px solid #e2e8f0;
         border-radius: 1rem;
         font-size: 1.45rem;
         color: #0f172a;
         background: #f8fafc;
         outline: none;
         font-family: inherit;
         transition: border-color .2s, box-shadow .2s, background .2s;}

body.php-user-login .auth-input:focus{border-color: #4f6ef7;
         background: #fff;
         box-shadow: 0 0 0 3px rgba(79,110,247,.12);}

body.php-user-login .auth-input::placeholder{color: #94a3b8;}

body.php-user-login .toggle-eye{position: absolute;
         right: 1.4rem; top: 50%;
         transform: translateY(-50%);
         color: #94a3b8; font-size: 1.4rem;
         cursor: pointer;
         transition: color .2s;
         z-index: 2;}

body.php-user-login .toggle-eye:hover{color: #4f6ef7;}

body.php-user-login .btn-auth{width: 100%;
         padding: 1.5rem;
         background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         color: #fff;
         border: none;
         border-radius: 1rem;
         font-size: 1.5rem;
         font-weight: 700;
         cursor: pointer;
         transition: transform .15s, box-shadow .2s;
         font-family: inherit;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: .7rem;
         margin-top: .4rem;}

body.php-user-login .btn-auth:hover{transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,110,247,.35);}

body.php-user-login .btn-auth:active{transform: scale(.97);}

body.php-user-login .auth-divider{display: flex;
         align-items: center;
         gap: 1.2rem;
         margin: 2.4rem 0 1.6rem;
         font-size: 1.3rem;
         color: #94a3b8;}

body.php-user-login .auth-divider::before,
body.php-user-login .auth-divider::after{content: '';
         flex: 1;
         height: 1px;
         background: #e2e8f0;}

body.php-user-login .auth-switch{text-align: center;
         font-size: 1.4rem;
         color: #64748b;}

body.php-user-login .auth-switch a{color: #4f6ef7;
         font-weight: 700;
         text-decoration: none;
         transition: color .15s;}

body.php-user-login .auth-switch a:hover{color: #1a2a6c; text-decoration: underline;}

body.php-user-login .trust-badges{display: flex;
         justify-content: center;
         gap: 2rem;
         margin-top: 3.2rem;
         padding-top: 2.4rem;
         border-top: 1px solid #f1f5f9;}

body.php-user-login .trust-badge{display: flex;
         align-items: center;
         gap: .5rem;
         font-size: 1.2rem;
         color: #94a3b8;
         font-weight: 600;}

body.php-user-login .trust-badge i{color: #cbd5e1;}

@media(max-width:900px){body.php-user-login .auth-layout{grid-template-columns: 1fr;}

body.php-user-login .auth-visual{display: none;}

body.php-user-login .auth-form-panel{padding: 4rem 2.4rem; min-height: auto;}
}

@media(max-width:480px){body.php-user-login .auth-form-panel{padding: 3rem 1.6rem;}
}

/* ===== moved from about.php | scope: body.php-about ===== */
body.php-about.about-page{background: #f5f3ef;
         font-family: Georgia, 'Times New Roman', serif;
         overflow-x: hidden;}

body.php-about .fade-up{opacity: 0;
         transform: translateY(4rem);
         transition: opacity .85s cubic-bezier(.22,1,.36,1),
                     transform .85s cubic-bezier(.22,1,.36,1);}

body.php-about .fade-up.visible{opacity: 1;
         transform: translateY(0);}

body.php-about .fade-in{opacity: 0;
         transition: opacity 1s ease;}

body.php-about .fade-in.visible{opacity: 1;}

body.php-about .zoom-in{opacity: 0;
         transform: scale(.92);
         transition: opacity .9s cubic-bezier(.22,1,.36,1),
                     transform .9s cubic-bezier(.22,1,.36,1);}

body.php-about .zoom-in.visible{opacity: 1;
         transform: scale(1);}

body.php-about .delay-1{transition-delay: .1s !important;}

body.php-about .delay-2{transition-delay: .22s !important;}

body.php-about .delay-3{transition-delay: .36s !important;}

body.php-about .delay-4{transition-delay: .50s !important;}

body.php-about .delay-5{transition-delay: .65s !important;}

body.php-about .about-hero{display: grid;
         grid-template-columns: 1fr 1fr;
         min-height: 88vh;
         background: #f5f3ef;
         overflow: hidden;}

body.php-about .about-hero-text{display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 8rem 6rem 8rem 7%;}

body.php-about .about-hero-eyebrow{font-family: 'Courier New', Courier, monospace;
         font-size: 1.2rem;
         letter-spacing: .28rem;
         text-transform: uppercase;
         color: #999;
         margin-bottom: 2.8rem;}

body.php-about .about-hero-h1{font-size: clamp(4rem, 5.5vw, 7rem);
         font-weight: 400;
         line-height: 1.05;
         text-transform: uppercase;
         letter-spacing: -.02em;
         color: #111;
         margin: 0 0 3rem;}

body.php-about .about-hero-h1 em{font-style: italic;
         font-weight: 300;}

body.php-about .about-hero-sub{font-family: Georgia, serif;
         font-size: 1.7rem;
         line-height: 1.85;
         color: #666;
         max-width: 46rem;
         margin-bottom: 3.6rem;}

body.php-about .about-hero-btn{display: inline-block;
         padding: 1.4rem 3.2rem;
         font-family: 'Courier New', Courier, monospace;
         font-size: 1.35rem;
         font-weight: 700;
         letter-spacing: .14rem;
         text-transform: uppercase;
         background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         color: #fff;
         border: none;
         border-radius: .5rem;
         cursor: pointer;
         text-decoration: none;
         align-self: flex-start;
         transition: opacity .25s ease, transform .2s ease;}

body.php-about .about-hero-btn:hover{opacity: .82;
         transform: translateY(-2px);}

body.php-about .about-hero-collage{position: relative;
         overflow: hidden;}

body.php-about .about-hero-collage .col-img-big{position: absolute;
         left: 5%;
         top: 8%;
         width: 58%;
         aspect-ratio: 3 / 4;
         border-radius: 1rem;
         overflow: hidden;
         box-shadow: 0 2rem 5rem rgba(0,0,0,.14);}

body.php-about .about-hero-collage .col-img-top{position: absolute;
         right: 2%;
         top: 5%;
         width: 36%;
         aspect-ratio: 2 / 3;
         border-radius: 1rem;
         overflow: hidden;
         box-shadow: 0 1.4rem 3.6rem rgba(0,0,0,.12);}

body.php-about .about-hero-collage .col-img-bot{position: absolute;
         right: 2%;
         bottom: 5%;
         width: 36%;
         aspect-ratio: 2 / 3;
         border-radius: 1rem;
         overflow: hidden;
         box-shadow: 0 1.4rem 3.6rem rgba(0,0,0,.12);}

body.php-about .about-hero-collage img{width: 100%; height: 100%;
         object-fit: cover; display: block;
         transition: transform .7s cubic-bezier(.25,.46,.45,.94);}

body.php-about .about-hero-collage .col-img-big:hover img,
body.php-about .about-hero-collage .col-img-top:hover img,
body.php-about .about-hero-collage .col-img-bot:hover img{transform: scale(1.06);}

body.php-about .about-stats{background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         display: flex;
         justify-content: center;
         gap: 0;
         padding: 4rem 5%;}

body.php-about .stat-item{flex: 1;
         max-width: 22rem;
         text-align: center;
         padding: 1rem 2rem;
         border-right: 1px solid rgba(255,255,255,.15);}

body.php-about .stat-item:last-child{border-right: none;}

body.php-about .stat-num{font-size: clamp(3.2rem, 4vw, 4.8rem);
         font-weight: 800;
         color: #fff;
         line-height: 1;
         margin-bottom: .6rem;
         font-family: Georgia, serif;}

body.php-about .stat-label{font-family: 'Courier New', Courier, monospace;
         font-size: 1.2rem;
         letter-spacing: .18rem;
         text-transform: uppercase;
         color: rgba(255,255,255,.6);}

body.php-about .about-split{display: grid;
         grid-template-columns: 1fr 1fr;
         min-height: 70vh;
         background: #fff;
         overflow: hidden;}

body.php-about .about-split-img{position: relative;
         overflow: hidden;}

body.php-about .about-split-img img{width: 100%; height: 100%;
         object-fit: cover; display: block;
         transition: transform .7s cubic-bezier(.25,.46,.45,.94);}

body.php-about .about-split-img:hover img{transform: scale(1.04);}

body.php-about .about-split-text{display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 7rem 7% 7rem 6rem;
         background: #fff;}

body.php-about .about-split-text .eyebrow{font-family: 'Courier New', Courier, monospace;
         font-size: 1.2rem;
         letter-spacing: .22rem;
         text-transform: uppercase;
         color: #aaa;
         margin-bottom: 2.2rem;}

body.php-about .about-split-text h2{font-size: clamp(2.8rem, 3.4vw, 4.4rem);
         font-weight: 400;
         line-height: 1.2;
         color: #111;
         margin: 0 0 2.6rem;}

body.php-about .about-split-text p{font-size: 1.6rem;
         line-height: 1.9;
         color: #666;
         margin-bottom: 1.6rem;
         max-width: 50rem;}

body.php-about .about-split-stats{display: flex;
         gap: 4rem;
         margin-top: 3rem;
         padding-top: 3rem;
         border-top: 1px solid #eee;}

body.php-about .split-stat-num{font-size: 3.6rem;
         font-weight: 800;
         color: #111;
         line-height: 1;
         font-family: Georgia, serif;}

body.php-about .split-stat-label{font-family: 'Courier New', Courier, monospace;
         font-size: 1.15rem;
         letter-spacing: .16rem;
         text-transform: uppercase;
         color: #aaa;
         margin-top: .5rem;}

body.php-about .about-values{padding: 8rem 5%;
         background: #f5f3ef;}

body.php-about .about-values .section-header{text-align: center;
         margin-bottom: 5.6rem;}

body.php-about .about-values .section-header .eyebrow{font-family: 'Courier New', Courier, monospace;
         font-size: 1.2rem;
         letter-spacing: .22rem;
         text-transform: uppercase;
         color: #aaa;
         display: block;
         margin-bottom: 1.4rem;}

body.php-about .about-values .section-header h2{font-size: clamp(2.8rem, 3.5vw, 4.6rem);
         font-weight: 400;
         color: #111;
         margin: 0;
         line-height: 1.15;}

body.php-about .values-grid{display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 2.8rem;
         max-width: 1200px;
         margin: 0 auto;}

body.php-about .value-card{background: #fff;
         border-radius: 1.4rem;
         padding: 3.6rem 3rem;
         border: 1px solid #eeecea;
         transition: box-shadow .3s ease, transform .3s ease;}

body.php-about .value-card:hover{box-shadow: 0 1.2rem 3.5rem rgba(0,0,0,.09);
         transform: translateY(-6px);}

body.php-about .value-icon{width: 5.2rem; height: 5.2rem;
         border-radius: 1rem;
         background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         display: flex; align-items: center; justify-content: center;
         margin-bottom: 2.4rem;
         font-size: 2.2rem;
         color: #fff;}

body.php-about .value-card h3{font-size: 2rem;
         font-weight: 600;
         color: #111;
         margin: 0 0 1.2rem;
         font-family: Georgia, serif;}

body.php-about .value-card p{font-size: 1.5rem;
         line-height: 1.8;
         color: #777;
         margin: 0;}

body.php-about .about-video-section{position: relative;
         width: 100%;
         min-height: 60vh;
         overflow: hidden;
         background: #111;
         display: flex;
         align-items: center;
         justify-content: center;}

body.php-about .about-video-section video{position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         z-index: 0;
         opacity: .55;}

body.php-about .about-video-placeholder{position: absolute;
         inset: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
         z-index: 0;}

body.php-about .about-video-placeholder .placeholder-text{font-family: 'Courier New', Courier, monospace;
         font-size: 1.4rem;
         letter-spacing: .2rem;
         color: rgba(255,255,255,.25);
         text-transform: uppercase;}

body.php-about .about-video-overlay{position: absolute;
         inset: 0;
         background: linear-gradient(to right,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.2) 60%,
            rgba(0,0,0,.4) 100%);
         z-index: 1;}

body.php-about .about-video-content{position: relative;
         z-index: 2;
         text-align: center;
         color: #fff;
         padding: 8rem 5%;}

body.php-about .about-video-content .eyebrow{font-family: 'Courier New', Courier, monospace;
         font-size: 1.2rem;
         letter-spacing: .28rem;
         text-transform: uppercase;
         color: rgba(255,255,255,.6);
         display: block;
         margin-bottom: 2rem;}

body.php-about .about-video-content h2{font-size: clamp(3.2rem, 5vw, 6rem);
         font-weight: 300;
         line-height: 1.1;
         text-transform: uppercase;
         letter-spacing: -.01em;
         margin: 0 0 2.4rem;
         color: #fff;}

body.php-about .about-video-content h2 strong{font-weight: 800;}

body.php-about .about-video-content p{font-size: 1.7rem;
         line-height: 1.8;
         color: rgba(255,255,255,.8);
         max-width: 55rem;
         margin: 0 auto 3.6rem;}

body.php-about .about-video-btn{display: inline-flex;
         align-items: center;
         gap: 1rem;
         padding: 1.5rem 3.2rem;
         background: #fff;
         color: #111;
         font-family: 'Courier New', Courier, monospace;
         font-size: 1.35rem;
         font-weight: 700;
         letter-spacing: .12rem;
         text-transform: uppercase;
         border-radius: .5rem;
         text-decoration: none;
         transition: background .2s ease, color .2s ease, transform .2s ease;}

body.php-about .about-video-btn:hover{background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         color: #fff;
         transform: translateY(-2px);}

body.php-about .about-cta{padding: 8rem 5%;
         background: #fff;
         text-align: center;}

body.php-about .about-cta .eyebrow{font-family: 'Courier New', Courier, monospace;
         font-size: 1.2rem;
         letter-spacing: .24rem;
         text-transform: uppercase;
         color: #aaa;
         display: block;
         margin-bottom: 1.8rem;}

body.php-about .about-cta h2{font-size: clamp(2.8rem, 3.8vw, 5rem);
         font-weight: 400;
         color: #111;
         line-height: 1.15;
         margin: 0 0 1.8rem;}

body.php-about .about-cta p{font-size: 1.7rem;
         line-height: 1.8;
         color: #777;
         max-width: 52rem;
         margin: 0 auto 3.8rem;}

body.php-about .about-cta-btns{display: flex;
         gap: 1.6rem;
         justify-content: center;
         flex-wrap: wrap;}

body.php-about .btn-dark{display: inline-block;
         padding: 1.4rem 3.2rem;
         font-family: 'Courier New', Courier, monospace;
         font-size: 1.4rem;
         font-weight: 700;
         letter-spacing: .12rem;
         text-transform: uppercase;
         background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000000);
         color: #fff;
         border-radius: .5rem;
         text-decoration: none;
         transition: opacity .2s ease, transform .2s ease;}

body.php-about .btn-dark:hover{opacity: .82;
         transform: translateY(-2px);}

body.php-about .btn-outline{display: inline-block;
         padding: 1.4rem 3.2rem;
         font-family: 'Courier New', Courier, monospace;
         font-size: 1.4rem;
         font-weight: 700;
         letter-spacing: .12rem;
         text-transform: uppercase;
         background: transparent;
         color: #111;
         border: 2px solid #111;
         border-radius: .5rem;
         text-decoration: none;
         transition: background .2s ease, color .2s ease, transform .2s ease;}

body.php-about .btn-outline:hover{background: #111;
         color: #fff;
         transform: translateY(-2px);}

@media (max-width: 1024px){body.php-about .about-hero{grid-template-columns: 1fr; min-height: auto;}

body.php-about .about-hero-text{padding: 6rem 5%;}

body.php-about .about-hero-collage{min-height: 55vw;}

body.php-about .about-hero-collage .col-img-big{left: 3%; width: 54%;}

body.php-about .about-split{grid-template-columns: 1fr;}

body.php-about .about-split-img{min-height: 55vw;}

body.php-about .about-split-text{padding: 5rem 5%;}

body.php-about .values-grid{grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 640px){body.php-about .about-stats{flex-wrap: wrap; gap: 2rem;}

body.php-about .stat-item{border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); flex: 0 0 45%;}

body.php-about .values-grid{grid-template-columns: 1fr;}

body.php-about .about-split-stats{gap: 2.4rem; flex-wrap: wrap;}
}


/* ===== moved from order_detail.php | scope: body.php-order-detail ===== */
body.php-order-detail *,
body.php-order-detail *::before,
body.php-order-detail *::after{box-sizing:border-box;margin:0;padding:0}

body.php-order-detail{background:#f8f9fc;font-family:'Segoe UI',sans-serif}

body.php-order-detail .order-detail-page{max-width:900px;margin:0 auto;padding:3rem 2.4rem 6rem}

body.php-order-detail .detail-bc{font-size:1.4rem;color:#94a3b8;margin-bottom:2rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;animation:fadeSlideDown .4s ease both}

body.php-order-detail .detail-bc a{color:#94a3b8;text-decoration:none;transition:color .15s}

body.php-order-detail .detail-bc a:hover{color:#1a2a6c}

body.php-order-detail .detail-bc i{font-size:1.1rem;color:#cbd5e1}

body.php-order-detail .btn-back-o{display:inline-flex;align-items:center;gap:.7rem;padding:.8rem 1.8rem;background:#fff;border:1.5px solid #e2e8f0;border-radius:3rem;font-size:1.4rem;font-weight:600;color:#475569;text-decoration:none;margin-bottom:2rem;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:color .15s,box-shadow .15s,border-color .15s;animation:fadeSlideDown .4s ease both}

body.php-order-detail .btn-back-o:hover{color:#1a2a6c;box-shadow:0 4px 14px rgba(0,0,0,.1);border-color:#c7d2fe}

body.php-order-detail .detail-banner{background:linear-gradient(135deg,#0f2027 0%,#1a2a6c 55%,#2c3e8f 100%);border-radius:1.6rem;padding:2.4rem 2.8rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.6rem;margin-bottom:2.4rem;position:relative;overflow:hidden;animation:fadeSlideDown .5s ease both}

body.php-order-detail .detail-banner::before{content:'';position:absolute;top:-40%;right:-5%;width:28rem;height:28rem;background:radial-gradient(circle,rgba(79,110,247,.25) 0%,transparent 70%);pointer-events:none}

body.php-order-detail .banner-left{position:relative;z-index:1}

body.php-order-detail .banner-left h2{font-size:2rem;font-weight:800;color:#fff;margin-bottom:.4rem}

body.php-order-detail .banner-left p{font-size:1.3rem;color:rgba(255,255,255,.6)}

body.php-order-detail .banner-badges{display:flex;gap:.8rem;flex-wrap:wrap;position:relative;z-index:1}

body.php-order-detail .banner-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:2rem;padding:.6rem 1.3rem;font-size:1.2rem;font-weight:600;color:#fff}

body.php-order-detail .progress-panel{background:#fff;border-radius:1.4rem;padding:2.2rem 2.4rem;box-shadow:0 2px 12px rgba(0,0,0,.05);margin-bottom:1.4rem;animation:fadeSlideUp .5s ease both}

body.php-order-detail .progress-title{font-size:1.2rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2rem;display:flex;align-items:center;gap:.6rem}

body.php-order-detail .progress-track{display:flex;align-items:center}

body.php-order-detail .progress-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;z-index:1}

body.php-order-detail .step-dot{width:4rem;height:4rem;border-radius:50%;border:3px solid #e2e8f0;background:#fff;color:#cbd5e1;display:flex;align-items:center;justify-content:center;font-size:1.5rem;position:relative;z-index:2;transition:all .3s}

body.php-order-detail .progress-step.done    .step-dot{background:linear-gradient(135deg,#059669,#34d399);border-color:#059669;color:#fff}

body.php-order-detail .progress-step.current .step-dot{background:linear-gradient(135deg,#1a2a6c,#4f6ef7);border-color:#4f6ef7;color:#fff;box-shadow:0 0 0 5px rgba(79,110,247,.18);animation:stepPulse 2s infinite}

@keyframes stepPulse{0%,100%{box-shadow:0 0 0 5px rgba(79,110,247,.18)}50%{box-shadow:0 0 0 10px rgba(79,110,247,.06)}}

body.php-order-detail .step-label{font-size:1.2rem;font-weight:600;color:#94a3b8;margin-top:.6rem;text-align:center}

body.php-order-detail .progress-step.done    .step-label{color:#059669}

body.php-order-detail .progress-step.current .step-label{color:#1a2a6c}

body.php-order-detail .progress-line{flex:1;height:3px;background:#e2e8f0;margin-top:-2rem;z-index:1}

body.php-order-detail .progress-line.filled{background:linear-gradient(90deg,#059669,#34d399)}

body.php-order-detail .detail-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-bottom:1.4rem;animation:fadeSlideUp .55s ease both}

body.php-order-detail .detail-panel{background:#fff;border-radius:1.4rem;padding:2rem 2.2rem;box-shadow:0 2px 12px rgba(0,0,0,.05)}

body.php-order-detail .panel-title{font-size:1.45rem;font-weight:700;color:#0f172a;margin-bottom:1.4rem;display:flex;align-items:center;gap:.7rem;padding-bottom:1.2rem;border-bottom:1px solid #f1f5f9}

body.php-order-detail .panel-title i{color:#4f6ef7}

body.php-order-detail .detail-info-rows{display:flex;flex-direction:column;gap:.8rem}

body.php-order-detail .dir{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-radius:.6rem;background:#f8fafc;font-size:1.3rem}

body.php-order-detail .dir-lbl{color:#64748b;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:.5rem}

body.php-order-detail .dir-lbl i{color:#94a3b8;font-size:1.2rem}

body.php-order-detail .dir-val{color:#0f172a;font-weight:600;text-align:right;word-break:break-word}

body.php-order-detail .dir-price{font-size:2rem;font-weight:800;color:#e11d48}

body.php-order-detail .sb{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:2rem;font-size:1.2rem;font-weight:700}

body.php-order-detail .sb-diproses{background:#fffbeb;color:#b45309}

body.php-order-detail .sb-dikemas{background:#ecfeff;color:#0e7490}

body.php-order-detail .sb-dikirim{background:#ecfdf5;color:#065f46}

body.php-order-detail .sb-selesai{background:#f1f5f9;color:#475569}

body.php-order-detail .pb{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .8rem;border-radius:2rem;font-size:1.2rem;font-weight:700}

body.php-order-detail .pb-p{background:#fff1f2;color:#be123c}

body.php-order-detail .pb-c{background:#ecfdf5;color:#065f46}

body.php-order-detail .products-panel{background:#fff;border-radius:1.4rem;padding:2rem 2.2rem;box-shadow:0 2px 12px rgba(0,0,0,.05);margin-bottom:1.4rem;animation:fadeSlideUp .6s ease both}

body.php-order-detail .pline{display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.2rem;border-radius:.8rem;background:#f8fafc;margin-bottom:.8rem;font-size:1.35rem;color:#334155;font-weight:500;line-height:1.5;border-left:3px solid #c7d2fe}

body.php-order-detail .pline i{color:#4f6ef7;flex-shrink:0;margin-top:.15rem}

body.php-order-detail .proof-panel{background:#fff;border-radius:1.4rem;padding:2rem 2.2rem;box-shadow:0 2px 12px rgba(0,0,0,.05);animation:fadeSlideUp .65s ease both}

body.php-order-detail .proof-row{display:flex;align-items:center;gap:.8rem;font-size:1.4rem;font-weight:500;color:#475569;margin-bottom:1.4rem}

body.php-order-detail .proof-available{color:#059669;font-weight:700}

body.php-order-detail .proof-none{color:#94a3b8}

body.php-order-detail .proof-img-d{width:100%;max-width:36rem;border-radius:1rem;display:block;margin-bottom:1.2rem;box-shadow:0 4px 16px rgba(0,0,0,.1)}

body.php-order-detail .btn-proof{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.8rem;border-radius:.7rem;background:#eff2ff;color:#1a2a6c;font-size:1.4rem;font-weight:600;text-decoration:none;transition:background .15s}

body.php-order-detail .btn-proof:hover{background:#e0e7ff}

body.php-order-detail .privacy-note{margin-top:1.2rem;padding:1rem 1.2rem;background:#fffbeb;border-left:3px solid #f59e0b;border-radius:.6rem;font-size:1.25rem;color:#78350f;display:flex;align-items:flex-start;gap:.7rem;line-height:1.5}

@keyframes fadeSlideDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}

@keyframes fadeSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:700px){body.php-order-detail .order-detail-page{padding:2rem 1.4rem 4rem}

body.php-order-detail .detail-info-grid{grid-template-columns:1fr}

body.php-order-detail .step-label{font-size:1rem}

body.php-order-detail .detail-banner{flex-direction:column;align-items:flex-start}
}


/* ===== moved from shop.php | scope: body.php-shop ===== */
body.php-shop *,
body.php-shop *::before,
body.php-shop *::after{box-sizing:border-box;}

body.php-shop.shop-page{background:#fafaf8;font-family:'Segoe UI',sans-serif}

body.php-shop.shop-page .header{background:rgba(255,255,255,.92)!important;
         backdrop-filter:blur(12px);
         box-shadow:0 1px 12px rgba(0,0,0,.06)!important;
         position:sticky!important;top:0!important;z-index:9999!important;}

body.php-shop .shop-page-wrap{max-width:1380px;margin:0 auto;padding:0 3.2rem 6rem}

body.php-shop .shop-breadcrumb{padding:2.4rem 0 0;font-size:1.4rem;color:#999}

body.php-shop .shop-breadcrumb a{color:#999;text-decoration:none}

body.php-shop .shop-breadcrumb a:hover{color:#111}

body.php-shop .shop-breadcrumb span{margin:0 .6rem}

body.php-shop .shop-title{font-size:clamp(2.6rem,4vw,4.4rem);font-weight:800;letter-spacing:-.04em;color:#111;margin:1.4rem 0 3rem;text-transform:uppercase}

body.php-shop .shop-layout{display:grid;grid-template-columns:22rem 1fr;gap:4rem;align-items:start}

body.php-shop .shop-sidebar{position:sticky;top:9rem}

body.php-shop .sidebar-section{margin-bottom:3rem}

body.php-shop .sidebar-section h4{font-size:1.2rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#111;margin-bottom:1.4rem;padding-bottom:.8rem;border-bottom:1.5px solid #e8e8e4}

body.php-shop .sidebar-cat-list{display:flex;flex-direction:column;gap:.4rem}

body.php-shop .sidebar-cat-btn{display:flex;align-items:center;gap:1rem;padding:.9rem 1.2rem;border-radius:.8rem;font-size:1.4rem;font-weight:500;color:#555;cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:background .18s,color .18s;position:relative}

body.php-shop .sidebar-cat-btn:hover{background:#f1f5f9;color:#111}

body.php-shop .sidebar-cat-btn.active{background:#f1f5f9;color:#111;font-weight:700}

body.php-shop .sidebar-cat-btn.active::before{content:'';position:absolute;left:0;top:.6rem;bottom:.6rem;width:3px;border-radius:2px;background:var(--cat-color,#1a2a6c)}

body.php-shop .sidebar-cat-icon{width:3rem;height:3rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;transition:background .18s}

body.php-shop .sidebar-cat-count{margin-left:auto;font-size:1.2rem;background:#e2e8f0;color:#475569;border-radius:2rem;padding:.2rem .7rem;font-weight:700}

body.php-shop .sidebar-cat-btn.active .sidebar-cat-count{background:var(--cat-color,#1a2a6c);color:#fff;opacity:.9}

body.php-shop .price-range-row{display:flex;align-items:center;gap:.8rem}

body.php-shop .price-input{flex:1;padding:.9rem 1rem;border:1.5px solid #e2e8f0;border-radius:.6rem;font-size:1.3rem;color:#0f172a;background:#f8fafc;outline:none;font-family:inherit;width:100%;transition:border-color .2s}

body.php-shop .price-input:focus{border-color:#1a2a6c}

body.php-shop .btn-apply-filter{width:100%;margin-top:1rem;padding:1rem;background:linear-gradient(135deg,#1a2a6c,#4f6ef7);color:#fff;border:none;border-radius:.7rem;font-size:1.4rem;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .2s}

body.php-shop .btn-apply-filter:hover{opacity:.88}

body.php-shop .btn-reset-price{width:100%;margin-top:.6rem;padding:.8rem;background:none;border:1.5px solid #e2e8f0;border-radius:.7rem;font-size:1.3rem;color:#64748b;cursor:pointer;font-family:inherit;transition:border-color .2s,color .2s}

body.php-shop .btn-reset-price:hover{border-color:#94a3b8;color:#334155}

body.php-shop .shop-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;gap:1.2rem;flex-wrap:wrap}

body.php-shop .shop-count{font-size:1.4rem;color:#888}

body.php-shop .shop-count strong{color:#111;font-weight:700}

body.php-shop .active-cat-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1.1rem;border-radius:3rem;font-size:1.3rem;font-weight:700;color:#fff;margin-top:.5rem}

body.php-shop .sort-select{padding:.7rem 1.2rem;border:1.5px solid #e2e8f0;border-radius:.6rem;font-size:1.3rem;color:#0f172a;background:#fff;outline:none;font-family:inherit;cursor:pointer}

body.php-shop .shop-products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem 2rem}

body.php-shop .shop-card{background:#fff;border-radius:1.2rem;overflow:hidden;position:relative;border:1px solid #eeede8;transition:box-shadow .28s,transform .28s;display:flex;flex-direction:column}

body.php-shop .shop-card:hover{box-shadow:0 1.2rem 3rem rgba(0,0,0,.10);transform:translateY(-6px)}

body.php-shop .shop-card-img{position:relative;overflow:hidden;aspect-ratio:1/1;background:#f2f1ed}

body.php-shop .shop-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}

body.php-shop .shop-card:hover .shop-card-img img{transform:scale(1.07)}

body.php-shop .shop-card-cat-ribbon{position:absolute;bottom:1rem;left:1rem;padding:.35rem .9rem;border-radius:2rem;font-size:1.15rem;font-weight:700;color:#fff;z-index:3}

body.php-shop .shop-card-hover-actions{position:absolute;top:1.2rem;right:1.2rem;display:flex;flex-direction:column;gap:.8rem;opacity:0;transform:translateX(1rem);transition:opacity .25s,transform .25s;z-index:3}

body.php-shop .shop-card:hover .shop-card-hover-actions{opacity:1;transform:translateX(0)}

body.php-shop .shop-card-hover-actions button,
body.php-shop .shop-card-hover-actions a{width:4rem;height:4rem;border-radius:50%;background:#fff;color:#111;font-size:1.5rem;display:flex;align-items:center;justify-content:center;box-shadow:0 .3rem .8rem rgba(0,0,0,.14);cursor:pointer;transition:background .2s,color .2s;text-decoration:none;border:none;font-family:inherit}

body.php-shop .shop-card-hover-actions button:hover,
body.php-shop .shop-card-hover-actions a:hover{background:#111;color:#fff}

body.php-shop .shop-card-body{padding:1.6rem 1.8rem 1.8rem;display:flex;flex-direction:column;flex:1;gap:.8rem}

body.php-shop .shop-card-name{font-size:1.55rem;font-weight:600;color:#111;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:4.4rem;text-decoration:none}

body.php-shop .shop-card-price{font-size:1.7rem;font-weight:800;color:#e74c3c}

body.php-shop .shop-card-footer{display:flex;gap:1rem;align-items:center;margin-top:auto}

body.php-shop .shop-card-qty{width:5.5rem;height:4rem;border:1.5px solid #ddd;border-radius:.6rem;text-align:center;font-size:1.5rem;color:#111;background:#fafaf8;flex-shrink:0;font-family:inherit}

body.php-shop .shop-card-btn{flex:1;height:4rem;background:linear-gradient(135deg,#1a2a6c,#4f6ef7);color:#fff;font-size:1.4rem;font-weight:700;letter-spacing:.04rem;border-radius:.6rem;cursor:pointer;border:none;transition:opacity .2s,transform .15s;text-transform:uppercase;font-family:inherit}

body.php-shop .shop-card-btn:hover{opacity:.88;transform:scale(.98)}

body.php-shop .shop-card-link-btn{display:flex;
   align-items:center;
   justify-content:center;
   text-decoration:none;
   color:#fff;}

body.php-shop .shop-pagination{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:5rem;flex-wrap:wrap}

body.php-shop .page-nav-btn{display:inline-flex;align-items:center;gap:.8rem;padding:1.1rem 2.4rem;font-size:1.45rem;font-weight:700;letter-spacing:.04rem;text-transform:uppercase;border-radius:.7rem;cursor:pointer;border:2px solid #111;background:transparent;color:#111;transition:.2s;font-family:inherit}

body.php-shop .page-nav-btn:hover:not(:disabled){background:linear-gradient(135deg,#1a2a6c,#4f6ef7);color:#fff;border-color:transparent}

body.php-shop .page-nav-btn:disabled{opacity:.3;cursor:not-allowed}

body.php-shop .page-indicator{font-size:1.4rem;color:#666;min-width:8rem;text-align:center}

body.php-shop .shop-empty{grid-column:1/-1;text-align:center;padding:6rem 2rem;color:#aaa}

body.php-shop .shop-empty i{font-size:4rem;display:block;margin-bottom:1.5rem;opacity:.35}

body.php-shop .shop-empty p{font-size:1.7rem}

body.php-shop .mobile-cat-toggle{display:none}

@media(max-width:1100px){body.php-shop .shop-layout{grid-template-columns:19rem 1fr;gap:3rem}

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

@media(max-width:768px){body.php-shop .shop-layout{grid-template-columns:1fr}

body.php-shop .shop-sidebar{position:static}

body.php-shop .shop-sidebar-inner{display:none}

body.php-shop .shop-sidebar-inner.open{display:block}

body.php-shop .mobile-cat-toggle{display:flex;align-items:center;gap:.8rem;padding:1rem 1.4rem;background:#111;color:#fff;border:none;border-radius:.8rem;font-size:1.4rem;font-weight:700;cursor:pointer;margin-bottom:1.2rem;font-family:inherit}

body.php-shop .shop-products-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}

body.php-shop .shop-page-wrap{padding:0 1.6rem 4rem}
}

@media(max-width:480px){body.php-shop .shop-products-grid{grid-template-columns:1fr}
}


/* ===== moved from components/user_header.php ===== */
body{padding-top: 72px !important;}

.gc-header{position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   z-index: 10000 !important;
   height: 72px !important;
   transition: box-shadow .35s ease, background .35s ease !important;}

.gc-home .gc-header{background: radial-gradient(circle at 30% 50%, #1a2a6c, #0f2027, #000) !important;
   border-bottom: 1px solid rgba(255,255,255,.10) !important;}

.gc-home .gc-header.scrolled{box-shadow: 0 4px 32px rgba(0,0,0,.45) !important;}

.gc-other .gc-header{background: rgba(255,255,255,.97) !important;
   border-bottom: 1px solid rgba(0,0,0,.08) !important;
   backdrop-filter: blur(12px);}

.gc-other .gc-header.scrolled{box-shadow: 0 4px 24px rgba(0,0,0,.09) !important;}

.gc-inner{max-width: 1440px;
   margin: 0 auto;
   padding: 0 4rem;
   height: 72px;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 2rem;}

.gc-nav{display: flex;
   align-items: center;
   gap: .4rem;}

.gc-nav a{position: relative;
   font-size: 1.4rem;
   font-weight: 500;
   letter-spacing: .06em;
   text-transform: uppercase;
   text-decoration: none;
   padding: .6rem 1.1rem;
   border-radius: .4rem;
   transition: color .2s;
   white-space: nowrap;
   font-family: 'DM Sans', sans-serif;}

.gc-nav a::after{content: '';
   position: absolute;
   bottom: .2rem; left: 1.1rem; right: 1.1rem;
   height: 1.5px;
   transform: scaleX(0);
   transform-origin: right;
   transition: transform .3s ease;}

.gc-nav a:hover::after,
.gc-nav a.gc-active::after{transform: scaleX(1);
   transform-origin: left;}

.gc-home .gc-nav a{color: rgba(255,255,255,.82);}

.gc-home .gc-nav a::after{background: #fff;}

.gc-home .gc-nav a:hover,
.gc-home .gc-nav a.gc-active{color: #fff; font-weight: 600;}

.gc-other .gc-nav a{color: #0d0d0d;}

.gc-other .gc-nav a::after{background: #1a2a6c;}

.gc-other .gc-nav a:hover,
.gc-other .gc-nav a.gc-active{color: #1a2a6c; font-weight: 600;}

.gc-nav-item{position: relative;}

.gc-dropdown{position: absolute;
   top: calc(100% + 1rem);
   left: 50%;
   transform: translateX(-50%) translateY(8px);
   border-radius: 1.2rem;
   padding: .8rem;
   min-width: 20rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity .22s ease, transform .28s ease;
   z-index: 999;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: .3rem;}

.gc-dropdown::before{content: '';
   position: absolute;
   top: -6px; left: 50%;
   transform: translateX(-50%) rotate(45deg);
   width: 12px; height: 12px;
   border-top: 1px solid; border-left: 1px solid;}

.gc-nav-item:hover .gc-dropdown{opacity: 1;
   pointer-events: auto;
   transform: translateX(-50%) translateY(0);}

.gc-home .gc-dropdown{background: #0f2027;
   border: 1px solid rgba(255,255,255,.12);
   box-shadow: 0 20px 60px rgba(0,0,0,.5);}

.gc-home .gc-dropdown::before{background: #0f2027;
   border-color: rgba(255,255,255,.12);}

.gc-other .gc-dropdown{background: #fff;
   border: 1px solid rgba(0,0,0,.08);
   box-shadow: 0 20px 60px rgba(0,0,0,.12);}

.gc-other .gc-dropdown::before{background: #fff;
   border-color: rgba(0,0,0,.08);}

.gc-drop-link{display: flex !important;
   align-items: center !important;
   gap: .8rem !important;
   padding: .8rem 1rem !important;
   border-radius: .8rem !important;
   font-size: 1.3rem !important;
   text-decoration: none !important;
   transition: background .15s, color .15s !important;
   font-weight: 400 !important;
   text-transform: none !important;
   letter-spacing: 0 !important;
   white-space: nowrap;}

.gc-drop-link::after{display: none !important;}

.gc-home .gc-drop-link{color: rgba(255,255,255,.8) !important;}

.gc-home .gc-drop-link:hover{background: rgba(255,255,255,.1) !important; color: #fff !important;}

.gc-other .gc-drop-link{color: #0d0d0d !important;}

.gc-other .gc-drop-link:hover{background: #eff2ff !important; color: #1a2a6c !important;}

.gc-drop-icon{width: 2.8rem; height: 2.8rem;
   border-radius: .5rem;
   display: flex; align-items: center; justify-content: center;
   font-size: 1.1rem;
   flex-shrink: 0;}

.gc-logo{text-align: center;
   text-decoration: none !important;
   display: flex;
   flex-direction: column;
   align-items: center;
   line-height: 1;}

.gc-logo__img{height: 46px;
   width: auto;
   max-width: 170px;
   object-fit: contain;
   display: block;
   transition: opacity .2s;}

.gc-logo:hover .gc-logo__img{opacity: .8;}

.gc-home .gc-logo__img{filter: brightness(0) invert(1);}

.gc-other .gc-logo__img{filter: none;}

.gc-logo__sub{font-size: .9rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   font-weight: 500;
   margin-top: .3rem;
   font-family: 'DM Sans', sans-serif;}

.gc-home .gc-logo__sub{color: rgba(255,255,255,.4);}

.gc-other .gc-logo__sub{color: #b89b6a;}

.gc-actions{display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: .3rem;}

.gc-icon-btn{position: relative;
   width: 4rem; height: 4rem;
   border-radius: .7rem;
   background: transparent;
   border: none;
   font-size: 1.65rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background .18s, color .18s, transform .18s;
   text-decoration: none !important;
   flex-shrink: 0;
   line-height: 1;}

.gc-icon-btn:hover{transform: scale(1.07);}

.gc-home .gc-icon-btn{color: rgba(255,255,255,.8);}

.gc-home .gc-icon-btn:hover{background: rgba(255,255,255,.1); color: #fff;}

.gc-other .gc-icon-btn{color: #0d0d0d;}

.gc-other .gc-icon-btn:hover{background: #eff2ff; color: #1a2a6c;}

.gc-badge{position: absolute;
   top: .4rem; right: .4rem;
   min-width: 1.7rem; height: 1.7rem;
   background: #4f7cff;
   color: #fff;
   font-size: .95rem;
   font-weight: 700;
   border-radius: 10rem;
   display: flex; align-items: center; justify-content: center;
   padding: 0 .35rem;
   line-height: 1;
   pointer-events: none;
   animation: badgePop .3s ease;}

.gc-home .gc-badge{border: 2px solid #0f2027;}

.gc-other .gc-badge{border: 2px solid #fff;}

@keyframes badgePop{
   0% { transform: scale(0); }
   70% { transform: scale(1.2); }
   100% { transform: scale(1); }
}

.gc-divider{width: 1px; height: 2rem;
   margin: 0 .4rem;
   flex-shrink: 0;}

.gc-home .gc-divider{background: rgba(255,255,255,.15);}

.gc-other .gc-divider{background: rgba(0,0,0,.09);}

.gc-search-wrap{position: relative; display: flex; align-items: center;}

.gc-search-input{width: 0;
   overflow: hidden;
   padding: 0;
   border: none !important;
   border-bottom: 1.5px solid transparent !important;
   background: transparent !important;
   border-radius: 0 !important;
   font-family: 'DM Sans', sans-serif;
   font-size: 1.3rem;
   outline: none !important;
   transition: width .4s ease, padding .4s, border-color .3s;}

.gc-search-wrap.open .gc-search-input{width: 17rem;
   padding: .4rem .6rem .4rem 0 !important;}

.gc-home .gc-search-input{color: #fff;}

.gc-home .gc-search-input::placeholder{color: rgba(255,255,255,.4);}

.gc-home .gc-search-wrap.open .gc-search-input{border-bottom-color: rgba(255,255,255,.5) !important;}

.gc-other .gc-search-input{color: #0d0d0d;}

.gc-other .gc-search-input::placeholder{color: #94a3b8;}

.gc-other .gc-search-wrap.open .gc-search-input{border-bottom-color: #0d0d0d !important;}

.gc-user-wrap{position: relative; display: inline-flex; align-items: center;}

.gc-user-chip{display: inline-flex !important;
   align-items: center !important;
   gap: .6rem !important;
   padding: .5rem 1.1rem .5rem .7rem !important;
   border-radius: 10rem !important;
   text-decoration: none !important;
   font-size: 1.25rem !important;
   font-weight: 500 !important;
   font-family: 'DM Sans', sans-serif !important;
   cursor: pointer;
   border: 1px solid transparent !important;
   background: none;
   transition: background .18s, border-color .18s, color .18s !important;
   white-space: nowrap;}

.gc-user-chip__av{width: 2.5rem; height: 2.5rem;
   border-radius: 50%;
   color: #fff;
   display: flex; align-items: center; justify-content: center;
   font-size: 1.1rem; font-weight: 700;
   flex-shrink: 0;}

.gc-user-chip__caret{font-size: 1rem;
   opacity: .65;
   transition: transform .22s ease;}

.gc-user-wrap.open .gc-user-chip__caret{transform: rotate(180deg);}

.gc-home .gc-user-chip{background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.18) !important; color: rgba(255,255,255,.9) !important;}

.gc-home .gc-user-chip:hover{background: rgba(255,255,255,.18) !important;}

.gc-home .gc-user-chip__av{background: #4f7cff;}

.gc-other .gc-user-chip{background: #eff2ff !important; border-color: rgba(0,0,0,.08) !important; color: #0d0d0d !important;}

.gc-other .gc-user-chip:hover{background: #e0e7ff !important; color: #1a2a6c !important;}

.gc-other .gc-user-chip__av{background: #1a2a6c;}

.gc-user-popup{position: absolute;
   top: calc(100% + 1.2rem);
   right: 0;
   width: 28rem;
   border-radius: 1.4rem;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translateY(10px) scale(.98);
   transition: opacity .22s ease, transform .26s ease, visibility .22s ease;
   z-index: 10050;
   overflow: hidden;}

.gc-user-wrap.open .gc-user-popup{opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateY(0) scale(1);}

.gc-home .gc-user-popup{background: #0f2027; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 70px rgba(0,0,0,.45);}

.gc-other .gc-user-popup{background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 24px 70px rgba(0,0,0,.14);}

.gc-popup-top{padding: 1.6rem 1.6rem 1.2rem;
   display: flex; align-items: center; gap: 1.2rem;}

.gc-popup-av{width: 4.8rem; height: 4.8rem;
   border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   font-size: 1.6rem; font-weight: 700; color: #fff;
   flex-shrink: 0;
   background: linear-gradient(135deg,#1a2a6c,#4f7cff);}

.gc-popup-label{font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; opacity: .5; font-family: 'DM Sans', sans-serif;}

.gc-popup-name{font-size: 1.6rem; font-weight: 700; font-family: 'DM Sans', sans-serif; word-break: break-word;}

.gc-home .gc-popup-label,
.gc-home .gc-popup-name{color: #fff;}

.gc-other .gc-popup-label{color: #64748b;}

.gc-other .gc-popup-name{color: #0f172a;}

.gc-popup-hr{height: 1px; margin: 0 1.6rem;}

.gc-home .gc-popup-hr{background: rgba(255,255,255,.1);}

.gc-other .gc-popup-hr{background: rgba(0,0,0,.07);}

.gc-popup-actions{padding: 1.2rem 1.4rem;
   display: flex; flex-direction: column; gap: .7rem;}

.gc-popup-btn{display: flex !important;
   align-items: center !important;
   gap: .9rem !important;
   padding: 1.1rem 1.2rem !important;
   border-radius: .9rem !important;
   text-decoration: none !important;
   font-size: 1.35rem !important;
   font-weight: 600 !important;
   font-family: 'DM Sans', sans-serif !important;
   transition: background .18s, color .18s, transform .15s !important;
   border: 1px solid transparent !important;}

.gc-popup-btn:hover{transform: translateY(-1px);}

.gc-popup-btn i{width: 1.6rem; text-align: center; font-size: 1.3rem;}

.gc-popup-btn--primary{background: linear-gradient(135deg,#1a2a6c,#4f7cff) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(79,124,255,.2);}

.gc-popup-btn--primary:hover{filter: brightness(1.05);}

.gc-home .gc-popup-btn--ghost{background: rgba(255,255,255,.07) !important; color: #fff !important; border-color: rgba(255,255,255,.1) !important;}

.gc-home .gc-popup-btn--ghost:hover{background: rgba(255,255,255,.14) !important;}

.gc-other .gc-popup-btn--ghost{background: #f8fafc !important; color: #0f172a !important; border-color: rgba(0,0,0,.07) !important;}

.gc-other .gc-popup-btn--ghost:hover{background: #eff2ff !important; color: #1d4ed8 !important;}

.gc-hamburger{display: none;
   flex-direction: column;
   justify-content: center;
   gap: .5rem;
   width: 4rem; height: 4rem;
   background: none; border: none;
   cursor: pointer;
   padding: .8rem;
   border-radius: .6rem;
   transition: background .18s;}

.gc-home .gc-hamburger:hover{background: rgba(255,255,255,.1);}

.gc-other .gc-hamburger:hover{background: #eff2ff;}

.gc-hamburger span{display: block;
   width: 100%; height: 1.5px;
   border-radius: 2px;
   transition: transform .32s ease, opacity .22s;}

.gc-home .gc-hamburger span{background: rgba(255,255,255,.85);}

.gc-other .gc-hamburger span{background: #0d0d0d;}

.gc-hamburger.open span:nth-child(1){transform: translateY(6.5px) rotate(45deg);}

.gc-hamburger.open span:nth-child(2){opacity: 0; transform: scaleX(0);}

.gc-hamburger.open span:nth-child(3){transform: translateY(-6.5px) rotate(-45deg);}

.gc-drawer{display: none;
   position: fixed;
   inset: 0;
   z-index: 9998;}

.gc-drawer.open{display: block;}

.gc-drawer__overlay{position: absolute; inset: 0;
   background: rgba(0,0,0,.55);
   backdrop-filter: blur(4px);
   animation: gcFadeIn .28s ease;}

.gc-drawer__panel{position: absolute;
   top: 0; left: 0; bottom: 0;
   width: min(85vw, 34rem);
   padding: 2.4rem 1.8rem;
   overflow-y: auto;
   animation: gcSlideIn .35s cubic-bezier(.19,1,.22,1);}

.gc-home .gc-drawer__panel{background: #0f2027;}

.gc-other .gc-drawer__panel{background: #fff;}

@keyframes gcFadeIn{ from { opacity: 0; } to { opacity: 1; } }

@keyframes gcSlideIn{ from { transform: translateX(-100%); } to { transform: translateX(0); } }

.gc-drawer-logo{display: block;
   margin-bottom: 2.2rem;
   text-decoration: none;}

.gc-drawer-logo img{height: 38px; width: auto;}

.gc-home .gc-drawer-logo img{filter: brightness(0) invert(1);}

.gc-other .gc-drawer-logo img{filter: none;}

.gc-drawer-nav{display: flex; flex-direction: column; gap: .3rem;
   margin-bottom: 1.8rem;}

.gc-drawer-nav a{display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   padding: 1.1rem 1.2rem !important;
   border-radius: .8rem !important;
   font-size: 1.5rem !important;
   font-weight: 500 !important;
   text-decoration: none !important;
   font-family: 'DM Sans', sans-serif !important;
   transition: background .15s, color .15s !important;}

.gc-home .gc-drawer-nav a{color: rgba(255,255,255,.82) !important;}

.gc-home .gc-drawer-nav a:hover,
.gc-home .gc-drawer-nav a.gc-active{background: rgba(255,255,255,.08) !important; color: #fff !important;}

.gc-other .gc-drawer-nav a{color: #0d0d0d !important;}

.gc-other .gc-drawer-nav a:hover,
.gc-other .gc-drawer-nav a.gc-active{background: #eff2ff !important; color: #1a2a6c !important;}

.gc-drawer-hr{height: 1px; margin: 1.4rem 0;}

.gc-home .gc-drawer-hr{background: rgba(255,255,255,.1);}

.gc-other .gc-drawer-hr{background: rgba(0,0,0,.08);}

.gc-drawer-extras{display: flex; flex-direction: column; gap: .6rem;}

.gc-drawer-extras a{display: flex !important;
   align-items: center !important;
   gap: 1rem !important;
   padding: 1rem 1.2rem !important;
   border-radius: .8rem !important;
   font-size: 1.4rem !important;
   text-decoration: none !important;
   font-family: 'DM Sans', sans-serif !important;
   transition: background .15s, color .15s !important;
   font-weight: 400 !important;}

.gc-home .gc-drawer-extras a{color: rgba(255,255,255,.6) !important;}

.gc-home .gc-drawer-extras a:hover{background: rgba(255,255,255,.08) !important; color: #fff !important;}

.gc-other .gc-drawer-extras a{color: #64748b !important;}

.gc-other .gc-drawer-extras a:hover{background: #eff2ff !important; color: #0d0d0d !important;}

.gc-drawer-count{margin-left: auto;
   background: #4f7cff; color: #fff;
   border-radius: 10rem; padding: .15rem .65rem;
   font-size: 1.1rem; font-weight: 700;}

.gc-alert-success{max-width: 1250px;
   margin: 1.5rem auto;
   padding: 1.5rem 2rem;
   background: #ecfdf5 !important;
   color: #047857 !important;
   border-left: 4px solid #059669 !important;
   border-radius: .8rem !important;
   font-size: 1.55rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   box-shadow: none !important;}

.gc-alert-success span{color: #047857 !important;
   display: flex;
   align-items: center;
   gap: .8rem;}

.gc-alert-success span i{color: #059669 !important;}

.gc-alert-close{color: #ef4444 !important;
   cursor: pointer;
   font-size: 1.8rem;}

.header .flex .navbar,
.header .flex .profile,
#user-btn,
#menu-btn{display: none !important;}

@media (max-width: 1024px){.gc-nav{display: none !important;}

.gc-hamburger{display: flex !important;}

.gc-inner{grid-template-columns: auto 1fr auto !important;}

.gc-logo{text-align: left; align-items: flex-start;}
}

@media (max-width: 640px){.gc-inner{padding: 0 1.6rem !important;}

.gc-search-wrap.open .gc-search-input{width: 12rem;}

.gc-user-popup{width: 26rem;}
}

/* ===== moved from orders.php | scope: body.php-orders ===== */
body.php-orders *,
body.php-orders *::before,
body.php-orders *::after{
   box-sizing: border-box;
}

body.php-orders{background: #f8f9fc; font-family: 'Segoe UI', sans-serif;}

body.php-orders .orders-page{max-width: 1200px;
         margin: 0 auto;
         padding: 3rem 2.4rem 6rem;}

body.php-orders .orders-breadcrumb{font-size: 1.4rem;
         color: #94a3b8;
         margin-bottom: 2.4rem;
         display: flex;
         align-items: center;
         gap: .6rem;
         animation: fadeSlideDown .4s ease both;}

body.php-orders .orders-breadcrumb a{color: #94a3b8; text-decoration: none; transition: color .15s;}

body.php-orders .orders-breadcrumb a:hover{color: #1a2a6c;}

body.php-orders .orders-breadcrumb i{font-size: 1.1rem; color: #cbd5e1;}

body.php-orders .orders-page-header{display: flex;
         align-items: center;
         justify-content: space-between;
         flex-wrap: wrap;
         gap: 1rem;
         margin-bottom: 2.4rem;
         animation: fadeSlideDown .45s ease both;}

body.php-orders .orders-page-header h1{font-size: 2.8rem;
         font-weight: 800;
         color: #1e293b;
         letter-spacing: -.4px;}

body.php-orders .orders-page-header h1 i{color: #e11d48; margin-right: .5rem;}

body.php-orders .orders-summary-strip{display: grid;
         grid-template-columns: repeat(5, 1fr);
         gap: 1rem;
         margin-bottom: 2.4rem;
         animation: fadeSlideUp .5s ease both;}

body.php-orders .summary-chip{background: #fff;
         border-radius: 1rem;
         padding: 1.4rem 1.2rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         gap: .4rem;
         box-shadow: 0 2px 10px rgba(0,0,0,.05);
         position: relative;
         overflow: hidden;
         transition: transform .2s, box-shadow .2s;}

body.php-orders .summary-chip:hover{transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.09);}

body.php-orders .summary-chip::before{content: '';
         position: absolute;
         top: 0; left: 0; right: 0;
         height: 3px;
         border-radius: 1rem 1rem 0 0;}

body.php-orders .chip-all::before{background: linear-gradient(90deg,#1a2a6c,#4f6ef7);}

body.php-orders .chip-proc::before{background: linear-gradient(90deg,#f59e0b,#fbbf24);}

body.php-orders .chip-pack::before{background: linear-gradient(90deg,#0891b2,#22d3ee);}

body.php-orders .chip-ship::before{background: linear-gradient(90deg,#059669,#34d399);}

body.php-orders .chip-done::before{background: linear-gradient(90deg,#64748b,#94a3b8);}

body.php-orders .summary-chip-num{font-size: 2.4rem; font-weight: 800; color: #1e293b; line-height: 1;}

body.php-orders .summary-chip-lbl{font-size: 1.2rem; font-weight: 600; color: #64748b;}

body.php-orders .order-filter-tabs{display: flex;
         flex-wrap: wrap;
         gap: .7rem;
         margin-bottom: 2.4rem;
         background: #fff;
         padding: 1.2rem 1.6rem;
         border-radius: 1.2rem;
         box-shadow: 0 2px 10px rgba(0,0,0,.05);
         animation: fadeSlideUp .5s .05s ease both;}

body.php-orders .filter-tab{display: inline-flex;
         align-items: center;
         gap: .6rem;
         padding: .8rem 1.6rem;
         border-radius: 3rem;
         font-size: 1.3rem;
         font-weight: 600;
         color: #475569;
         background: #f1f5f9;
         text-decoration: none;
         border: 1.5px solid transparent;
         transition: all .18s;
         white-space: nowrap;}

body.php-orders .filter-tab:hover{background: #e0e7ff; color: #1a2a6c;}

body.php-orders .filter-tab.active{background: linear-gradient(135deg, #1a2a6c, #4f6ef7);
         color: #fff;
         box-shadow: 0 4px 12px rgba(79,110,247,.3);}

body.php-orders .tab-count{background: rgba(255,255,255,.22);
         border-radius: 1rem;
         padding: .1rem .6rem;
         font-size: 1.1rem;
         font-weight: 700;}

body.php-orders .filter-tab:not(.active) .tab-count{background: #e2e8f0; color: #475569;}

body.php-orders .orders-grid{display: grid;
         grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr));
         gap: 1.8rem;}

body.php-orders .order-card{background: #fff;
         border-radius: 1.4rem;
         overflow: hidden;
         box-shadow: 0 2px 12px rgba(0,0,0,.05);
         display: flex;
         flex-direction: column;
         transition: transform .22s, box-shadow .22s;
         animation: fadeSlideUp .5s ease both;
         position: relative;}

body.php-orders .order-card:hover{transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0,0,0,.1);}

body.php-orders .order-card-bar{height: 4px; width: 100%;}

body.php-orders .bar-diproses{background: linear-gradient(90deg,#f59e0b,#fbbf24);}

body.php-orders .bar-dikemas{background: linear-gradient(90deg,#0891b2,#22d3ee);}

body.php-orders .bar-dikirim{background: linear-gradient(90deg,#059669,#34d399);}

body.php-orders .bar-selesai{background: linear-gradient(90deg,#64748b,#94a3b8);}

body.php-orders .order-card-inner{padding: 1.8rem; display: flex; flex-direction: column; gap: 1.2rem; flex: 1;}

body.php-orders .order-card-head{display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: .8rem;}

body.php-orders .order-num{font-size: 1.5rem; font-weight: 800; color: #1e293b; letter-spacing: -.2px;}

body.php-orders .order-date{font-size: 1.25rem; color: #94a3b8; margin-top: .3rem; display: flex; align-items: center; gap: .4rem;}

body.php-orders .status-badge{display: inline-flex;
         align-items: center;
         gap: .4rem;
         padding: .5rem 1.1rem;
         border-radius: 2rem;
         font-size: 1.2rem;
         font-weight: 700;
         white-space: nowrap;
         flex-shrink: 0;}

body.php-orders .badge-diproses{background: #fffbeb; color: #b45309;}

body.php-orders .badge-dikemas{background: #ecfeff; color: #0e7490;}

body.php-orders .badge-dikirim{background: #ecfdf5; color: #065f46;}

body.php-orders .badge-selesai{background: #f1f5f9; color: #475569;}

body.php-orders .order-card-info{background: #f8fafc;
         border-radius: .8rem;
         padding: 1.2rem;
         display: flex;
         flex-direction: column;
         gap: .8rem;}

body.php-orders .info-row{display: flex;
         align-items: flex-start;
         gap: .8rem;
         font-size: 1.3rem;}

body.php-orders .info-row i{color: #94a3b8; font-size: 1.2rem; margin-top: .15rem; flex-shrink: 0; width: 1.4rem;}

body.php-orders .info-label{color: #94a3b8; font-weight: 600; white-space: nowrap;}

body.php-orders .info-val{color: #334155; font-weight: 500;}

body.php-orders .pay-badge{display: inline-flex;
         align-items: center;
         gap: .3rem;
         padding: .2rem .7rem;
         border-radius: 2rem;
         font-size: 1.15rem;
         font-weight: 700;}

body.php-orders .pay-pending{background: #fff1f2; color: #be123c;}

body.php-orders .pay-completed{background: #ecfdf5; color: #065f46;}

body.php-orders .product-preview{font-size: 1.3rem;
         color: #334155;
         line-height: 1.5;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;}

body.php-orders .order-card-footer{display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 1rem;
         margin-top: auto;
         padding-top: 1.2rem;
         border-top: 1px solid #f1f5f9;}

body.php-orders .order-total{font-size: 2rem; font-weight: 800; color: #e11d48;}

body.php-orders .btn-order-detail{display: inline-flex;
         align-items: center;
         gap: .5rem;
         padding: .9rem 1.8rem;
         border-radius: .8rem;
         background: linear-gradient(135deg, #1a2a6c, #4f6ef7);
         color: #fff;
         font-size: 1.35rem;
         font-weight: 700;
         text-decoration: none;
         transition: transform .15s, box-shadow .15s;
         white-space: nowrap;}

body.php-orders .btn-order-detail:hover{transform: translateY(-2px); box-shadow: 0 6px 16px rgba(79,110,247,.3);}

body.php-orders .orders-empty{grid-column: 1/-1;
         text-align: center;
         padding: 7rem 2rem;
         background: #fff;
         border-radius: 1.4rem;
         box-shadow: 0 2px 12px rgba(0,0,0,.04);
         color: #94a3b8;}

body.php-orders .orders-empty i{font-size: 5.6rem; display: block; margin-bottom: 1.6rem; color: #cbd5e1;}

body.php-orders .orders-empty h3{font-size: 2rem; font-weight: 700; color: #475569; margin-bottom: .8rem;}

body.php-orders .orders-empty p{font-size: 1.4rem; margin-bottom: 2.4rem;}

body.php-orders .btn-shop-now{display: inline-flex;
         align-items: center;
         gap: .7rem;
         padding: 1.2rem 2.8rem;
         background: linear-gradient(135deg,#1a2a6c,#4f6ef7);
         color: #fff;
         border-radius: 1rem;
         font-size: 1.5rem;
         font-weight: 700;
         text-decoration: none;
         transition: transform .15s, box-shadow .2s;}

body.php-orders .btn-shop-now:hover{transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,110,247,.35);}

@keyframes fadeSlideDown{ from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }

@keyframes fadeSlideUp{ from{opacity:0;transform:translateY(18px)}  to{opacity:1;transform:translateY(0)} }

body.php-orders .order-card:nth-child(1){animation-delay:.05s}

body.php-orders .order-card:nth-child(2){animation-delay:.10s}

body.php-orders .order-card:nth-child(3){animation-delay:.15s}

body.php-orders .order-card:nth-child(4){animation-delay:.20s}

body.php-orders .order-card:nth-child(n+5){animation-delay:.25s}

@media(max-width:900px){body.php-orders .orders-page{padding:2rem 1.6rem 4rem}

body.php-orders .orders-summary-strip{grid-template-columns:repeat(3,1fr)}

body.php-orders .orders-grid{grid-template-columns:1fr}
}

@media(max-width:580px){body.php-orders .orders-summary-strip{grid-template-columns:repeat(2,1fr)}

body.php-orders .order-card-footer{flex-direction:column;align-items:stretch}

body.php-orders .btn-order-detail{justify-content:center}
}

/* =========================
MOVED STATIC INLINE STYLE ATTRIBUTES
========================= */
.u-inline-style-001{text-align:center;}
.u-inline-style-002{color:#4f6ef7;font-size:3.2rem;}
.u-inline-style-003{color:#dbeafe;font-size:4.8rem;}
.u-inline-style-004{font-size:1.4rem;}
.u-inline-style-005{color:#dbeafe;}
.u-inline-style-006{color:#475569;font-weight:600;}
.u-inline-style-007{margin-bottom:1.6rem;}
.u-inline-style-008{display:flex;align-items:center;gap:.8rem;}
.u-inline-style-009{color:#fbbf24;}
.u-inline-style-010{margin-top:1.6rem;}
.u-inline-style-011{font-size:1.35rem;color:#64748b;margin-bottom:1.2rem;line-height:1.6;}
.u-inline-style-012{color:#4f6ef7;}
.u-inline-style-013{color:#059669;}
.u-inline-style-014{padding-top:1rem;border-top:2px solid #f1f5f9;margin-top:.4rem;}
.u-inline-style-015{text-align:center;}
.u-inline-style-016{display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid #f1f5f9;margin-top:1rem;}
.u-inline-style-017{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;color:#94a3b8;font-weight:600;}
.u-inline-style-018{color:#cbd5e1;}
.u-inline-style-019{font-size:2.6rem;}
.u-inline-style-020{grid-column:1/-1;text-align:center;}
.u-inline-style-021{font-size:1.2rem;}
.u-inline-style-022{max-width:18rem;}
.u-inline-style-023{flex-shrink:0;margin-top:.1rem;}
.u-inline-style-024{margin-bottom:1.4rem;}
.u-inline-style-025{color:#94a3b8;font-size:1.2rem;}
.u-inline-style-026{font-size:1.4rem;color:#475569;font-weight:600;margin-bottom:1.2rem;}
.u-inline-style-027{color:#f59e0b;flex-shrink:0;}
.u-inline-style-028{background:#eff2ff;color:#4f6ef7;}
.u-inline-style-029{font-size:1.3rem;color:#94a3b8;padding:.8rem 0;}
.u-inline-style-030{font-size:1.4rem;color:#94a3b8;}
.u-inline-style-031{color:#4f6ef7;font-weight:700;text-decoration:none;}
.u-inline-style-032{display:flex;align-items:center;gap:.7rem;margin-bottom:.4rem;}
.u-inline-style-033{font-size:1.2rem;margin-top:.3rem;}
.u-inline-style-034{background:#eff2ff;color:#1a2a6c;}
.u-inline-style-035{margin-bottom:1.2rem;}
.u-inline-style-036{font-size:1.2rem;font-weight:700;color:#64748b;margin-bottom:.8rem;}
.u-inline-style-037{margin-top:1.4rem;}
.u-inline-style-038{display:none;}
.u-inline-style-039{--c:#4f6ef7;}
.u-inline-style-040{background:#eff2ff;color:#4f6ef7;width:3.6rem;height:3.6rem;border-radius:.8rem;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;}
.u-inline-style-050{font-size:.85rem;margin-left:.2rem;}
.u-inline-style-051{font-size:1rem;}
.u-inline-style-052{font-size:1rem;opacity:.35;}
.u-inline-style-053{width:1.6rem;color:#4f7cff;}
.u-inline-style-054{width:1.6rem;color:#94a3b8;}

/* =========================
CATEGORY AND STATUS UTILITIES
========================= */
.category-theme{--cat-color:#64748b;--cat-light:#64748b22;}
.category-theme-default{--cat-color:#64748b;--cat-light:#64748b22;}
.category-theme-all{--cat-color:#1a2a6c;--cat-light:#eff2ff;}
.category-theme-totebag{--cat-color:#4f6ef7;--cat-light:#4f6ef722;}
.category-theme-slingbag{--cat-color:#059669;--cat-light:#05966922;}
.category-theme-dompet{--cat-color:#f59e0b;--cat-light:#f59e0b22;}
.category-theme-heels{--cat-color:#e11d48;--cat-light:#e11d4822;}
.category-theme-flat-shoes{--cat-color:#0891b2;--cat-light:#0891b222;}
.category-theme-top-handle{--cat-color:#7c3aed;--cat-light:#7c3aed22;}
.category-theme-clutch{--cat-color:#ea580c;--cat-light:#ea580c22;}
.category-theme-ransel{--cat-color:#65a30d;--cat-light:#65a30d22;}
.category-theme-waistbag{--cat-color:#db2777;--cat-light:#db277722;}

.sidebar-cat-btn.category-theme .sidebar-cat-icon,
.gc-drop-icon.category-theme,
.cat-stat-icon.category-theme{
   background:var(--cat-light);
   color:var(--cat-color);
}

.active-cat-badge.category-theme,
.shop-card-cat-ribbon.category-theme,
.sp-cat-chip.category-theme,
.sp-cat-ribbon.category-theme,
.qv-cat-badge.category-theme,
.product-category-badge.category-theme{
   background:var(--cat-color);
}

.cat-pill-preview.category-theme{
   background:var(--cat-light);
   color:var(--cat-color);
}

.cat-stat-chip.category-theme{
   border-left:3px solid var(--cat-color);
}

.cat-stat-icon{
   width:3.6rem;
   height:3.6rem;
   border-radius:.8rem;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:1.5rem;
   flex-shrink:0;
}

.status-positive{color:#059669;}
.status-muted{color:#94a3b8;}
.proof-file-icon{font-size:1.6rem;}
.img-load-error{opacity:.3;}

/* FIX HEADER & FOOTER GLOBAL */
.header,
.header *,
.footer,
.footer *{
   box-sizing: border-box;
}

body{
   min-height: 100vh;
}

.footer{
   margin-top: auto;
}

/* ===== KATEGORI HOME COLLAGE ===== */
body.php-index .category-editorial{
   --cat-ink:#2b2019;
   --cat-muted:#89786d;
   --cat-line:#d8cec3;
   --cat-paper:#fff;
   position: relative;
   overflow: hidden;
   padding: 6.4rem 5% 4.6rem !important;
   background:#fff !important;
}

body.php-index .category-editorial::before{
   content:"";
   position:absolute;
   inset:0;
   background-image:
      linear-gradient(90deg, rgba(15,23,42,.024) 1px, transparent 1px),
      linear-gradient(0deg, rgba(15,23,42,.02) 1px, transparent 1px);
   background-size: 4.8rem 4.8rem;
   mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
   pointer-events:none;
}

body.php-index .cat-spark{
   position:absolute;
   width:2.6rem;
   height:2.6rem;
   opacity:.34;
   pointer-events:none;
}

body.php-index .cat-spark::before,
body.php-index .cat-spark::after{
   content:"";
   position:absolute;
   left:50%;
   top:50%;
   background:#b9a898;
   border-radius:999px;
   transform:translate(-50%, -50%);
}

body.php-index .cat-spark::before{
   width:.18rem;
   height:100%;
}

body.php-index .cat-spark::after{
   width:100%;
   height:.18rem;
}

body.php-index .cat-spark-one{left:7%; top:20%;}
body.php-index .cat-spark-two{right:8%; top:55%; transform:scale(.82);}
body.php-index .cat-spark-three{left:10%; bottom:23%; transform:scale(.72);}

body.php-index .cat-header{
   position:relative;
   z-index:2;
   max-width:136rem;
   margin:0 auto 2.2rem;
   display:grid;
   grid-template-columns:1fr auto 1fr;
   align-items:center;
   gap:2rem;
}

body.php-index .cat-title{
   grid-column:2;
   text-align:center;
}

body.php-index .cat-title h2{
   margin:0;
   color:var(--cat-ink);
   font-family:'Cormorant Garamond', 'Times New Roman', serif;
   font-size:5.8rem;
   line-height:.98;
   font-weight:700;
   text-transform:uppercase;
   letter-spacing:0;
}

body.php-index .cat-title p{
   max-width:48rem;
   margin:1.4rem auto 0;
   color:var(--cat-muted);
   font-size:1.65rem;
   line-height:1.65;
}

body.php-index .cat-view-all{
   grid-column:3;
   justify-self:end;
   display:inline-flex;
   align-items:center;
   gap:.9rem;
   min-height:4.2rem;
   padding:0 2rem;
   border-radius:999px;
   background:#2b2019 !important;
   color:#fff !important;
   font-size:1.35rem;
   font-weight:800;
   text-transform:uppercase;
   letter-spacing:0;
   box-shadow:0 1.2rem 2.8rem rgba(43,32,25,.18);
   transition:transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

body.php-index .cat-view-all:hover{
   opacity:1 !important;
   background:#473226 !important;
   transform:translateY(-.25rem) !important;
   box-shadow:0 1.6rem 3.4rem rgba(43,32,25,.25);
}

body.php-index .cat-view-all i{
   font-size:1.2rem;
}

body.php-index .cat-layout{
   position:relative;
   z-index:2;
   max-width:136rem !important;
   margin:0 auto !important;
}

body.php-index .cat-grid{
   position:relative;
   display:grid !important;
   grid-template-columns:repeat(10, minmax(0, 1fr)) !important;
   grid-template-rows:minmax(34rem, auto) minmax(29rem, auto) !important;
   grid-auto-rows:auto !important;
   gap:1.4rem !important;
   width:100% !important;
   min-height:66rem;
   padding:1.8rem .8rem .5rem;
   align-items:start;
}

body.php-index .cat-grid-card{
   --card-y:0rem;
   --card-r:0deg;
   --card-hover-r:0deg;
   position:relative !important;
   display:block;
   height:33.5rem;
   min-height:0 !important;
   overflow:hidden !important;
   isolation:isolate;
   border:.8rem solid rgba(255,255,255,.88);
   border-radius:.8rem !important;
   background:#d8cec3;
   box-shadow:0 2.2rem 4.2rem rgba(43,32,25,.18), 0 .45rem 1rem rgba(43,32,25,.11) !important;
   transform:translateY(var(--card-y)) rotate(var(--card-r));
   transform-origin:center bottom;
   transition:transform .42s cubic-bezier(.2,.75,.2,1), box-shadow .42s ease, filter .32s ease;
}

body.php-index .cat-grid-card::after{
   content:"";
   position:absolute;
   inset:0;
   z-index:1;
   background:linear-gradient(180deg, rgba(15,12,10,0) 35%, rgba(15,12,10,.74) 100%);
   pointer-events:none;
}

body.php-index .cat-grid-card::before{
   content:"";
   position:absolute;
   inset:-45% -75%;
   z-index:2;
   background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%);
   transform:translateX(-55%) rotate(10deg);
   opacity:0;
   pointer-events:none;
}

body.php-index .cat-grid-card:hover,
body.php-index .cat-grid-card:focus-visible{
   z-index:6;
   transform:translateY(calc(var(--card-y) - 1.5rem)) rotate(var(--card-hover-r)) scale(1.035);
   box-shadow:0 3rem 6rem rgba(43,32,25,.24), 0 .8rem 1.8rem rgba(43,32,25,.18) !important;
}

body.php-index .cat-grid-card:hover::before,
body.php-index .cat-grid-card:focus-visible::before{
   animation:catCardShine .8s ease forwards;
}

body.php-index .cat-grid:has(.cat-grid-card:hover) .cat-grid-card:not(:hover){
   filter:saturate(.88) brightness(.94);
}

body.php-index .cat-grid-card img{
   width:100% !important;
   height:100% !important;
   display:block;
   object-fit:cover !important;
   transform:scale(1.01);
   transition:transform .58s cubic-bezier(.2,.75,.2,1), filter .42s ease;
}

body.php-index .cat-grid-card:hover img,
body.php-index .cat-grid-card:focus-visible img{
   transform:scale(1.11);
   filter:contrast(1.05) saturate(1.05);
}

body.php-index .cat-card-label{
   position:absolute;
   left:0;
   right:0;
   bottom:0;
   z-index:3;
   padding:2rem 2rem 1.8rem;
   color:#fff;
   transform:translateY(.25rem);
   transition:transform .3s ease;
}

body.php-index .cat-grid-card:hover .cat-card-label,
body.php-index .cat-grid-card:focus-visible .cat-card-label{
   transform:translateY(-.35rem);
}

body.php-index .cat-card-label h3{
   margin:0 0 .9rem;
   color:#fff;
   font-size:2.35rem;
   line-height:1.05;
   font-weight:900;
   text-transform:uppercase;
   letter-spacing:0;
   text-shadow:0 .3rem 1rem rgba(0,0,0,.35);
}

body.php-index .cat-card-label span{
   display:inline-flex;
   align-items:center;
   gap:.8rem;
   color:rgba(255,255,255,.95);
   font-size:1.45rem;
   font-weight:700;
   line-height:1;
}

body.php-index .cat-card-label span i{
   width:2.6rem;
   height:2.6rem;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   border-radius:50%;
   background:#fff;
   color:#2b2019;
   font-size:1.15rem;
   transition:transform .25s ease;
}

body.php-index .cat-grid-card:hover .cat-card-label span i,
body.php-index .cat-grid-card:focus-visible .cat-card-label span i{
   transform:translateX(.25rem);
}

body.php-index .cat-badge{
   position:absolute;
   top:1.4rem;
   left:1.4rem;
   z-index:4;
   display:inline-flex;
   align-items:center;
   gap:.65rem;
   max-width:calc(100% - 2.8rem);
   min-height:3rem;
   padding:0 1.1rem;
   border-radius:.6rem;
   background:rgba(255,255,255,.95);
   color:#4c3b30;
   font-size:1.1rem;
   line-height:1;
   font-weight:900;
   text-transform:uppercase;
   letter-spacing:0;
   box-shadow:0 .7rem 1.6rem rgba(43,32,25,.14);
}

body.php-index .cat-badge i{
   font-size:.72rem;
}

body.php-index .cat-badge-new i{color:#4e9b53;}
body.php-index .cat-badge-best i{color:#b68a39; font-size:1.2rem;}

body.php-index .cat-card-tote{
   grid-column:1 / 3 !important;
   grid-row:1 !important;
   --card-y:2.1rem;
   --card-r:-5deg;
   --card-hover-r:-2deg;
}

body.php-index .cat-card-sling{
   grid-column:3 / 5 !important;
   grid-row:1 !important;
   --card-y:3.6rem;
   --card-r:2deg;
   --card-hover-r:.8deg;
}

body.php-index .cat-card-dompet{
   grid-column:5 / 7 !important;
   grid-row:1 !important;
   --card-y:2.8rem;
   --card-r:.5deg;
   --card-hover-r:0deg;
}

body.php-index .cat-card-heels{
   grid-column:7 / 9 !important;
   grid-row:1 !important;
   --card-y:2.4rem;
   --card-r:-2deg;
   --card-hover-r:-.6deg;
}

body.php-index .cat-card-flat{
   grid-column:9 / 11 !important;
   grid-row:1 !important;
   --card-y:2.3rem;
   --card-r:5deg;
   --card-hover-r:2deg;
}

body.php-index .cat-card-tophandle{
   grid-column:2 / 4 !important;
   grid-row:2 !important;
   height:28rem;
   --card-y:-1rem;
   --card-r:1.5deg;
   --card-hover-r:.5deg;
}

body.php-index .cat-card-clutch{
   grid-column:5 / 7 !important;
   grid-row:2 !important;
   height:30.5rem;
   --card-y:-2rem;
   --card-r:-1.2deg;
   --card-hover-r:-.4deg;
}

body.php-index .cat-card-ransel{
   grid-column:7 / 9 !important;
   grid-row:2 !important;
   height:30rem;
   --card-y:-1.2rem;
   --card-r:-2deg;
   --card-hover-r:-.7deg;
}

body.php-index .cat-orbit{
   position:absolute;
   left:50%;
   top:52%;
   z-index:5;
   width:13.6rem;
   height:13.6rem;
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   gap:.6rem;
   border-radius:50%;
   background:#fff;
   color:#6b5141;
   box-shadow:0 1.6rem 4rem rgba(43,32,25,.18), inset 0 0 0 1px rgba(107,81,65,.13);
   transform:translate(-50%, -50%);
   pointer-events:none;
}

body.php-index .cat-orbit::before{
   content:"";
   position:absolute;
   inset:.9rem;
   border:1px dashed rgba(107,81,65,.28);
   border-radius:50%;
   animation:catOrbit 10s linear infinite;
}

body.php-index .cat-orbit span{
   position:relative;
   z-index:1;
   font-size:1.18rem;
   line-height:1;
   font-weight:900;
   text-transform:uppercase;
   letter-spacing:0;
}

body.php-index .cat-orbit i{
   position:relative;
   z-index:1;
   color:#4b3529;
   font-size:2.5rem;
}

body.php-index .cat-benefits{
   position:relative;
   z-index:2;
   max-width:136rem;
   margin:3.8rem auto 0;
   padding:2.4rem 0;
   border-top:1px solid var(--cat-line);
   border-bottom:1px solid var(--cat-line);
   display:grid;
   grid-template-columns:repeat(4, minmax(0, 1fr));
}

body.php-index .cat-benefit{
   display:flex;
   align-items:center;
   gap:1.6rem;
   padding:0 2.8rem;
   color:#5b4638;
   border-left:1px solid var(--cat-line);
}

body.php-index .cat-benefit:first-child{
   border-left:0;
}

body.php-index .cat-benefit i{
   width:3.8rem;
   flex:0 0 3.8rem;
   color:#5b4638;
   font-size:3rem;
   text-align:center;
}

body.php-index .cat-benefit strong{
   display:block;
   color:#5b4638;
   font-size:1.45rem;
   line-height:1.25;
   font-weight:900;
   text-transform:uppercase;
   letter-spacing:0;
}

body.php-index .cat-benefit span{
   display:block;
   margin-top:.45rem;
   color:#927c6d;
   font-size:1.35rem;
   line-height:1.35;
}

@keyframes catCardShine{
   0%{opacity:0; transform:translateX(-60%) rotate(10deg);}
   20%{opacity:1;}
   100%{opacity:0; transform:translateX(60%) rotate(10deg);}
}

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

@media (max-width:1180px){
   body.php-index .cat-header{
      grid-template-columns:1fr auto;
   }

   body.php-index .cat-title{
      grid-column:1;
      text-align:left;
   }

   body.php-index .cat-title p{
      margin-left:0;
      margin-right:0;
   }

   body.php-index .cat-view-all{
      grid-column:2;
   }

   body.php-index .cat-grid{
      grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
      grid-template-rows:repeat(2, minmax(30rem, auto)) !important;
      min-height:62rem;
   }

   body.php-index .cat-grid-card{
      height:30rem;
   }

   body.php-index .cat-card-tote{grid-column:1 / 3 !important; grid-row:1 !important;}
   body.php-index .cat-card-sling{grid-column:3 / 5 !important; grid-row:1 !important;}
   body.php-index .cat-card-dompet{grid-column:5 / 7 !important; grid-row:1 !important;}
   body.php-index .cat-card-heels{grid-column:7 / 9 !important; grid-row:1 !important;}
   body.php-index .cat-card-flat{grid-column:1 / 3 !important; grid-row:2 !important;}
   body.php-index .cat-card-tophandle{grid-column:3 / 5 !important; grid-row:2 !important;}
   body.php-index .cat-card-clutch{grid-column:5 / 7 !important; grid-row:2 !important;}
   body.php-index .cat-card-ransel{grid-column:7 / 9 !important; grid-row:2 !important;}

   body.php-index .cat-orbit{
      width:11.8rem;
      height:11.8rem;
      top:51%;
   }

   body.php-index .cat-benefit{
      padding:0 1.8rem;
   }
}

@media (max-width:900px){
   body.php-index .category-editorial{
      padding:5.2rem 4% 4rem !important;
   }

   body.php-index .cat-header{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      margin-bottom:1.8rem;
   }

   body.php-index .cat-title h2{
      font-size:4.8rem;
   }

   body.php-index .cat-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
      grid-template-rows:none !important;
      min-height:0;
      gap:1.5rem !important;
      padding:0;
   }

   body.php-index .cat-grid-card,
   body.php-index .cat-card-tophandle,
   body.php-index .cat-card-clutch,
   body.php-index .cat-card-ransel{
      grid-column:auto !important;
      grid-row:auto !important;
      height:27rem;
      --card-y:0rem;
      --card-r:0deg;
      --card-hover-r:0deg;
      transform:translateY(0) rotate(0) !important;
   }

   body.php-index .cat-grid-card:hover,
   body.php-index .cat-grid-card:focus-visible{
      transform:translateY(-.8rem) scale(1.02) !important;
   }

   body.php-index .cat-orbit{
      display:none;
   }

   body.php-index .cat-benefits{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:0;
      padding:0;
   }

   body.php-index .cat-benefit{
      border-left:0;
      border-top:1px solid var(--cat-line);
      padding:2rem 1.2rem;
   }

   body.php-index .cat-benefit:nth-child(-n+2){
      border-top:0;
   }

   body.php-index .cat-benefit:nth-child(even){
      border-left:1px solid var(--cat-line);
   }
}

@media (max-width:560px){
   body.php-index .category-editorial{
      padding:4.4rem 4% 3.6rem !important;
   }

   body.php-index .cat-title h2{
      font-size:4rem;
   }

   body.php-index .cat-title p{
      font-size:1.48rem;
   }

   body.php-index .cat-view-all{
      width:100%;
      justify-content:center;
   }

   body.php-index .cat-grid{
      grid-template-columns:1fr !important;
   }

   body.php-index .cat-grid-card,
   body.php-index .cat-card-tophandle,
   body.php-index .cat-card-clutch,
   body.php-index .cat-card-ransel{
      height:25.5rem;
   }

   body.php-index .cat-card-label h3{
      font-size:2.15rem;
   }

   body.php-index .cat-benefits{
      grid-template-columns:1fr;
      margin-top:2.6rem;
   }

   body.php-index .cat-benefit,
   body.php-index .cat-benefit:nth-child(even){
      border-left:0;
      border-top:1px solid var(--cat-line);
   }

   body.php-index .cat-benefit:first-child{
      border-top:0;
   }
}