:root{
  /* ═══ PHASE-5.1-UNIFIED-TOKENS — Brand Colors ═══ */
  --pink:#D46A8F;
  --pink-soft:#FFE4EE;
  --pink-dark:#A53E67;
  --lilac:#B79CD6;
  --lilac-soft:#F0E8FA;
  --green:#4FB286;
  --green-soft:#E2F5EC;
  --gold:#C9A96A;
  --gold-soft:#F5EBD4;

  /* ═══ Text ═══ */
  --text:#1F1B24;
  --text-soft:#4A444F;
  --muted:#8A8291;

  /* ═══ Surfaces ═══ */
  --bg:#FBF8FA;
  --surface:#FFFFFF;
  --surface-elevated:#FFFFFF;

  /* ═══ Borders & Dividers ═══ */
  --line:#EFE6EC;
  --line-soft:#F7F0F4;
  --divider:#F0E8EE;

  /* ═══ Radii ═══ */
  --radius:22px;
  --radius-sm:14px;
  --radius-pill:999px;

  /* ═══ Shadows ═══ */
  --shadow-sm:0 2px 10px rgba(164,62,103,.06);
  --shadow:0 10px 40px rgba(164,62,103,.10);
  --shadow-lg:0 24px 70px rgba(164,62,103,.16);

  /* ═══ Typography ═══ */
  --font: "Vazirmatn", "IRANSans", Tahoma, sans-serif;

  /* ═══ Status ═══ */
  --success:#4FB286;
  --warning:#E0B94B;
  --error:#C41E5A;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.7}
a{color:inherit;text-decoration:none}
.container{max-width:1240px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-weight:700}
.btn-primary{background:var(--pink);color:#fff;border:none;padding:11px 20px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;display:inline-block;transition:.2s}
.btn-primary:hover{background:var(--pink-dark)}
.btn-primary.small{padding:6px 10px;font-size:12px}
.btn-ghost{background:#fff;border:1px solid var(--line);padding:10px 16px;border-radius:var(--radius-sm);cursor:pointer;display:inline-block;color:var(--text)}
.btn-ghost.small{padding:6px 10px;font-size:12px}

.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.top-strip{background:linear-gradient(90deg,var(--pink-soft),var(--lilac-soft));color:var(--muted);font-size:12px;padding:6px 20px;display:flex;justify-content:center;gap:24px}
.header-main{display:flex;align-items:center;gap:18px;padding:14px 20px}
.brand{font-size:22px;font-weight:800;color:var(--pink-dark);display:flex;flex-direction:column;line-height:1}
.brand span{font-size:10px;color:var(--muted);letter-spacing:2px}
.search-box{flex:1;display:flex;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative}
.search-box select{border:none;background:var(--pink-soft);padding:0 12px;color:var(--text);font-family:var(--font)}
.search-box input{flex:1;border:none;padding:11px 14px;font-family:var(--font);outline:none}
.search-box button{background:var(--pink);color:#fff;border:none;padding:0 18px;cursor:pointer}
.suggest-box{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;max-height:380px;overflow:auto;display:none;z-index:100}
.suggest-box.open{display:block}
.suggest-box .sg{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;cursor:pointer}
.suggest-box .sg:hover{background:var(--pink-soft)}
.suggest-box img{width:40px;height:40px;object-fit:cover;border-radius:8px;background:var(--pink-soft)}
.header-actions{display:flex;gap:6px}
.icon-btn{position:relative;display:flex;flex-direction:column;align-items:center;font-size:12px;color:var(--muted);padding:6px 10px;border-radius:10px}
.icon-btn:hover{background:var(--pink-soft);color:var(--pink-dark)}
.icon-btn b{position:absolute;top:0;left:4px;background:var(--pink);color:#fff;font-size:10px;border-radius:10px;padding:1px 6px;display:none}
.main-nav{display:flex;gap:24px;padding:12px 20px;border-top:1px solid var(--line);overflow-x:auto}
.main-nav a{color:var(--muted);font-size:14px;white-space:nowrap}
.main-nav a:hover{color:var(--pink-dark)}

.hero{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:linear-gradient(120deg,var(--pink-soft),var(--lilac-soft));border-radius:20px;padding:36px;margin:24px 0;align-items:center}
.hero h1{font-size:28px;margin:6px 0 10px}
.kicker{color:var(--pink-dark);font-size:13px;font-weight:600}
.hero-art{height:200px;background:radial-gradient(circle at 30% 30%,#fff,transparent 60%),radial-gradient(circle at 70% 70%,var(--pink),transparent 50%);border-radius:20px}

.block{margin:40px 0}
.block-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.block-head h2{margin:0;font-size:20px}
.block-head a{color:var(--pink-dark);font-size:13px}

.cat-scroller{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.cat-card{min-width:150px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:center;transition:.2s}
.cat-card:hover{border-color:var(--pink);transform:translateY(-2px)}
.cat-img{height:70px;border-radius:10px;background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));margin-bottom:8px}
.cat-card span{display:block;font-weight:600}
.cat-card small{color:var(--muted);font-size:11px}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.product-card:hover{box-shadow:var(--shadow);border-color:var(--pink-soft)}
.pc-image{position:relative;display:block;aspect-ratio:1/1;background:var(--pink-soft)}
.pc-image img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:10px;right:10px;background:var(--pink);color:#fff;font-size:11px;padding:3px 8px;border-radius:8px}
.badge.out{background:#999}
.pc-body{padding:12px;display:flex;flex-direction:column;gap:6px}
.pc-brand{color:var(--muted);font-size:11px}
.pc-name{font-weight:600;font-size:14px;min-height:2.6em}
.pc-price{display:flex;gap:8px;align-items:center;font-size:13px}
.pc-price .old{color:#aaa;text-decoration:line-through;font-size:11px}
.pc-price .now{color:var(--green);font-weight:700}
.btn-add{background:var(--pink-soft);color:var(--pink-dark);text-align:center;padding:8px;border-radius:10px;font-weight:600;font-size:13px;margin-top:4px}
.btn-add:hover{background:var(--pink);color:#fff}

.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:24px 0}
.pd-gallery .pd-main-img{aspect-ratio:1/1;background:var(--pink-soft);border-radius:16px;overflow:hidden}
.pd-main-img img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:8px;margin-top:10px}
.pd-thumbs img{width:60px;height:60px;border-radius:8px;object-fit:cover;cursor:pointer;border:2px solid transparent}
.pd-thumbs img:hover{border-color:var(--pink)}
.pd-brand{color:var(--muted);font-size:13px}
.pd-info h1{font-size:22px;margin:6px 0}
.pd-price{font-size:22px;font-weight:800;color:var(--green);margin:12px 0}
.pd-price .old{color:#aaa;text-decoration:line-through;font-size:14px;margin-left:8px}
.variant-chip{background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:10px;cursor:pointer;margin:4px;font-family:var(--font);font-size:13px}
.variant-chip.active{border-color:var(--pink);background:var(--pink-soft);color:var(--pink-dark)}
.variant-chip[data-avail="unavailable"]{opacity:.4;cursor:not-allowed}
.variant-chip small{color:var(--pink-dark);margin-right:4px}
.stock-line{color:var(--muted);font-size:13px;margin:8px 0}
.pd-actions{display:flex;gap:10px;margin-top:14px;align-items:center;flex-wrap:wrap}
.qty{width:70px;padding:10px;border:1px solid var(--line);border-radius:10px;text-align:center;font-family:var(--font)}

.cart-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cart-table th,.cart-table td{padding:12px;text-align:right;border-bottom:1px solid var(--line)}
.cart-item{display:flex;gap:12px;align-items:center}
.cart-item img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:var(--pink-soft)}
.cart-qty{width:60px;padding:6px;border:1px solid var(--line);border-radius:8px;text-align:center;font-family:var(--font)}
.remove-btn{background:#fff;border:1px solid #eab;color:#c66;padding:6px 10px;border-radius:8px;cursor:pointer;font-family:var(--font)}
.cart-summary{display:flex;justify-content:flex-end;gap:24px;align-items:center;margin-top:16px;font-weight:600;flex-wrap:wrap}

.auth-card{max-width:420px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.auth-card label{display:block;margin-bottom:12px;font-size:13px;color:var(--muted)}
.auth-card input{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;font-family:var(--font);margin-top:4px}
.auth-card button{width:100%;margin-top:8px}

.page-title{margin:24px 0 16px;font-size:22px}
.alert-error{background:#fde8e8;color:#a33;padding:10px 14px;border-radius:10px;margin:10px 0;font-size:13px}
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:30px}
.mini-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:14px}
.mini-table th,.mini-table td{padding:10px;border-bottom:1px solid var(--line);text-align:right}
.mini-table th{background:var(--pink-soft);color:var(--pink-dark);font-weight:600}
.timeline{list-style:none;padding:0}
.timeline li{padding:10px 14px;border-right:3px solid var(--pink);margin-bottom:6px;background:#fff;border-radius:8px;font-size:13px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:40px 0;text-align:center;color:var(--muted)}
.account-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.acc-tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;font-weight:600;transition:.2s}
.acc-tile:hover{border-color:var(--pink);color:var(--pink-dark)}
.stack-form{display:flex;flex-direction:column;gap:10px;max-width:480px;margin:16px 0}
.stack-form input,.stack-form select,.stack-form textarea{padding:10px;border:1px solid var(--line);border-radius:10px;font-family:var(--font)}
.addr-card{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;cursor:pointer}
.addr-card-static{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:8px}
.checkout-grid{display:grid;grid-template-columns:1fr 320px;gap:24px}
.order-summary{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.form-grid label{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.form-grid input,.form-grid select{padding:9px;border:1px solid var(--line);border-radius:8px;font-family:var(--font);margin-top:4px}
.form-actions{display:flex;gap:10px;margin-top:20px}
.inline-form{display:flex;gap:6px}
.inline-form input{padding:6px;border:1px solid var(--line);border-radius:6px;width:70px;font-family:var(--font)}
.inline-form button{padding:6px 10px;background:var(--pink);color:#fff;border:none;border-radius:6px;cursor:pointer}
.pd-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.muted{color:var(--muted);font-size:13px}

.site-footer{background:#fff;border-top:1px solid var(--line);margin-top:60px;padding:36px 0 0}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-bottom:20px}
.footer-grid h4{margin:0 0 10px;font-size:15px}
.footer-grid a{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
.footer-bottom{border-top:1px solid var(--line);padding:14px;text-align:center;color:var(--muted);font-size:12px}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .product-detail{grid-template-columns:1fr}
  .checkout-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr}
  .account-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .header-main{flex-wrap:wrap}
  .search-box{order:3;flex-basis:100%}
  .main-nav{overflow-x:auto}
}
@media (max-width: 500px){
  .product-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pc-name{font-size:12px}
  .btn-add{font-size:12px;padding:6px}
}


/* --- PHASE4-STYLES --- */
/* Mega menu */
.mega-parent{position:relative}
.mega-parent:hover .mega-panel{display:flex}
.mega-panel{display:none;position:absolute;top:100%;right:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px;min-width:200px;box-shadow:var(--shadow);z-index:60;flex-direction:column;gap:4px}
.mega-panel a{padding:6px 10px;border-radius:8px;color:var(--muted);font-size:13px}
.mega-panel a:hover{background:var(--pink-soft);color:var(--pink-dark)}

/* Notification bell */
.notif-btn b{position:absolute;top:0;left:4px;background:var(--green);color:#fff;font-size:10px;
  border-radius:10px;padding:1px 6px}

/* Product card hover actions */
.pc-hover-actions{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:6px;opacity:0;transition:.2s}
.product-card:hover .pc-hover-actions{opacity:1}
.pc-quick,.pc-wish{background:#fff;border:1px solid var(--line);border-radius:10px;width:34px;height:34px;
  cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:.15s}
.pc-quick:hover,.pc-wish:hover{background:var(--pink);color:#fff;border-color:var(--pink)}

/* Quick View modal */
.qv-overlay{position:fixed;inset:0;background:rgba(40,20,30,.45);display:flex;align-items:center;
  justify-content:center;z-index:999;padding:20px}
.qv-modal{background:#fff;border-radius:18px;max-width:900px;width:100%;max-height:90vh;overflow:auto;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.25);padding:24px}
.qv-close{position:absolute;top:12px;left:12px;background:transparent;border:none;font-size:20px;cursor:pointer;color:var(--muted)}
.qv-body{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.qv-img{aspect-ratio:1/1;background:var(--pink-soft);border-radius:14px;overflow:hidden}
.qv-img img{width:100%;height:100%;object-fit:cover}
.qv-info h3{margin:6px 0}
.qv-price{font-size:20px;color:var(--green);font-weight:800;margin:10px 0}
.qv-price .old{color:#aaa;text-decoration:line-through;font-size:14px;margin-left:8px}
.qv-variants{margin:12px 0;display:flex;flex-wrap:wrap;gap:6px}
.qv-loading{padding:40px;text-align:center;color:var(--muted)}
@media (max-width:700px){.qv-body{grid-template-columns:1fr}}

/* Tabs */
.pd-tabs{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin:24px 0}
.tab-head{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tab{background:transparent;border:none;padding:10px 14px;cursor:pointer;color:var(--muted);font-size:14px;font-family:var(--font);border-bottom:2px solid transparent}
.tab.active{color:var(--pink-dark);border-bottom-color:var(--pink);font-weight:600}

/* Rating summary */
.pd-rating{display:flex;align-items:center;gap:8px;margin:6px 0}
.stars{color:#F4B740;letter-spacing:2px}
.rating-summary{display:flex;gap:24px;align-items:center;padding:14px;background:var(--pink-soft);border-radius:12px;margin-bottom:16px;flex-wrap:wrap}
.rating-avg b{font-size:32px;color:var(--pink-dark)}
.rating-avg span{font-size:12px;color:var(--muted);margin-right:6px}
.rating-bars{flex:1;min-width:220px}
.rb{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:12px}
.rb-track{flex:1;height:6px;background:#fff;border-radius:6px;overflow:hidden}
.rb-fill{height:100%;background:var(--pink)}
.rb small{color:var(--muted);width:30px;text-align:left}

/* Review form and list */
.review-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:20px}
.review-form label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;font-size:13px;color:var(--muted)}
.review-form input,.review-form select,.review-form textarea{padding:9px;border:1px solid var(--line);border-radius:8px;font-family:var(--font)}
.reviews-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.review-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.rv-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap;gap:8px}
.review-item h5{margin:6px 0}
.admin-reply{background:var(--green-soft);padding:8px 12px;border-radius:8px;margin-top:8px;font-size:13px}
.my-review{background:var(--lilac-soft);padding:12px;border-radius:10px;margin-bottom:12px}

/* Q&A */
.qa-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.qa-form textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-family:var(--font);margin:8px 0}
.qa-list{display:flex;flex-direction:column;gap:10px}
.qa-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.qa-answer{background:var(--green-soft);padding:10px 12px;border-radius:8px;margin-top:8px;font-size:13px}
.restock-btn{margin-top:10px;font-size:13px}

/* Listing (filters + main) */
.listing{display:grid;grid-template-columns:250px 1fr;gap:24px;margin:16px 0}
.listing-side .filters{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;position:sticky;top:120px}
.filter-block{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.filter-block:last-of-type{border-bottom:none}
.filter-block h4{margin:0 0 8px;font-size:14px}
.filter-check{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0;color:var(--muted);cursor:pointer}
.filter-row{display:flex;gap:6px}
.filter-row input{flex:1;padding:8px;border:1px solid var(--line);border-radius:8px;font-family:var(--font)}
.filters select{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;font-family:var(--font)}
.filter-reset{display:block;margin-top:10px;color:var(--pink-dark);font-size:13px;text-align:center}
.listing-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:var(--muted);font-size:13px}
.sort-form select{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-family:var(--font)}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin:24px 0 8px;flex-wrap:wrap}
.pg-btn{padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--muted);background:#fff}
.pg-btn:hover{border-color:var(--pink);color:var(--pink-dark)}
.pg-btn.active{background:var(--pink);color:#fff;border-color:var(--pink)}
.pg-btn.disabled{opacity:.4;pointer-events:none}
.pg-info{text-align:center;color:var(--muted);font-size:12px;margin-bottom:20px}

/* Notifications */
.notif-list{display:flex;flex-direction:column;gap:8px}
.notif-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.notif-item.unread{border-right:4px solid var(--pink)}
.notif-title{font-weight:600}
.notif-body{font-size:13px;color:var(--muted)}
.notif-item small{color:#aaa;font-size:11px}

/* Mobile bottom nav */
.mobile-bottom-nav{display:none}
@media (max-width:700px){
  .mobile-bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;position:fixed;bottom:0;left:0;right:0;
    background:#fff;border-top:1px solid var(--line);padding:8px 4px 4px;z-index:80;box-shadow:0 -2px 10px rgba(0,0,0,.04)}
  .mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--muted);padding:4px}
  .mobile-bottom-nav a:hover{color:var(--pink-dark)}
  body{padding-bottom:64px}
  .listing{grid-template-columns:1fr}
  .listing-side .filters{position:static}
}
.qv-overlay[hidden]{display:none !important}


/* --- PHASE5-STYLES --- */
.badge-status{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:600}
.badge-status.s-open{background:#FDE8E8;color:#a33}
.badge-status.s-pending{background:#FDF1E0;color:#a76a20}
.badge-status.s-answered{background:var(--green-soft);color:#3a7a58}
.badge-status.s-closed{background:#EEE;color:#666}

/* Ticket chat */
.ticket-chat{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.msg{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;max-width:80%}
.msg.staff{background:var(--pink-soft);align-self:flex-start;margin-left:auto;border-color:var(--pink)}
.msg.user{background:#fff;align-self:flex-start}
.msg-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);margin-bottom:6px;gap:12px}
.msg-body{white-space:pre-wrap;line-height:1.8}

/* Charts */
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:200px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 12px 4px;overflow-x:auto}
.bar-col{display:flex;flex-direction:column;align-items:center;flex:1;min-width:24px;height:100%;justify-content:flex-end}
.bar{width:100%;background:linear-gradient(180deg,var(--pink),var(--pink-dark));border-radius:6px 6px 0 0;min-height:2px;transition:.3s}
.bar-col small{color:var(--muted);font-size:10px;margin-top:4px}

/* Global search */
.gs-wrap{position:relative;flex:1;max-width:520px}
#gsInput{width:100%;padding:9px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--font);font-size:13px;background:#fff}
.gs-results{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;margin-top:6px;max-height:400px;overflow:auto;z-index:200;box-shadow:0 12px 40px rgba(0,0,0,.1)}
.gs-section{padding:6px 0;border-bottom:1px solid var(--line)}
.gs-section:last-child{border-bottom:none}
.gs-section h5{margin:6px 14px;font-size:11px;color:var(--muted);text-transform:uppercase}
.gs-item{display:block;padding:8px 14px;color:var(--text);font-size:13px;cursor:pointer}
.gs-item:hover{background:var(--pink-soft);color:var(--pink-dark)}
.gs-empty{padding:20px;text-align:center;color:var(--muted);font-size:13px}


/* --- OPS-CARDS --- */
.ops-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0}
.ops-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;
  flex-direction:column;align-items:center;text-align:center;gap:4px;transition:.2s;text-decoration:none;color:var(--text)}
.ops-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--pink)}
.ops-card.alert{background:linear-gradient(180deg,#FFF5F7,#FFFFFF);border-color:#F4B8C6}
.ops-card.info{background:linear-gradient(180deg,#F3F7FF,#FFFFFF);border-color:#B8CCE8}
.ops-icon{font-size:22px}
.ops-num{font-size:26px;font-weight:800;color:var(--pink-dark)}
.ops-label{font-size:12px;color:var(--muted)}


/* --- TICKETS-UX --- */
.tickets-table tr:hover{background:var(--pink-soft)}
.tickets-table .row-link{font-weight:600;color:var(--text)}
.tickets-table .row-link:hover{color:var(--pink-dark);text-decoration:underline}
.tickets-table .order-link{color:var(--muted);font-size:12px}
.tickets-table .order-link:hover{color:var(--pink-dark);text-decoration:underline}
.ticket-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0}
.ticket-meta span{color:var(--muted);font-size:12px;margin-left:4px}
.reply-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:20px}
.reply-box h3{margin:0 0 12px}
.reply-box textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font);font-size:14px;line-height:1.7;resize:vertical}
.reply-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.closed-banner{background:#EEE;color:#666;padding:16px;border-radius:12px;text-align:center;margin-top:20px;font-size:13px}


/* --- PHASE6-STYLES --- */

/* Banner slider */
.banner-slider{position:relative;border-radius:20px;overflow:hidden;margin:24px 0;height:340px;background:var(--pink-soft)}
.banner-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  display:none;align-items:center;padding:36px;color:#fff}
.banner-slide.active{display:flex;animation:fadeIn .5s}
.banner-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),transparent)}
.banner-content{position:relative;z-index:1;max-width:520px}
.banner-content h1{font-size:32px;margin:0 0 10px}
.banner-content p{font-size:16px;margin:0 0 16px;opacity:.9}
.banner-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.banner-dots .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.2s}
.banner-dots .dot.active{background:#fff;width:24px;border-radius:5px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Magazine */
.mag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.mag-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:.2s}
.mag-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.mag-cover{aspect-ratio:16/9;background:var(--pink-soft);background-size:cover;background-position:center}
.mag-body{padding:12px}
.mag-body h3{margin:0 0 6px;font-size:15px}
.mag-body p{color:var(--muted);font-size:13px;margin:0 0 6px;line-height:1.6}
.mag-body small{color:#aaa;font-size:11px}
.mag-cats{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.mag-cat{padding:6px 14px;border:1px solid var(--line);border-radius:20px;font-size:13px;color:var(--muted);background:#fff}
.mag-cat.active,.mag-cat:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
.mag-article{max-width:780px;margin:0 auto}
.mag-hero{width:100%;border-radius:16px;margin:12px 0}
.mag-lead{font-size:17px;line-height:1.9;color:var(--muted);margin:12px 0 20px}
.cms-content{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;line-height:2;margin:16px 0}
.cms-content h2{margin-top:24px}
.cms-content p{margin:12px 0}
.cms-content img{max-width:100%;border-radius:10px}

/* Compare */
.compare-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;min-width:500px}
.compare-table th,.compare-table td{padding:12px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
.compare-table thead th{background:var(--pink-soft);color:var(--pink-dark)}
.compare-table img{width:100%;max-width:120px;height:120px;object-fit:cover;border-radius:8px;background:var(--pink-soft)}
.compare-remove{color:#c66;cursor:pointer;font-size:12px;background:none;border:none;padding:0}
.compare-remove:hover{text-decoration:underline}

/* Compare button on product card */
.pc-hover-actions .pc-compare{background:#fff;border:1px solid var(--line);border-radius:10px;width:34px;height:34px;
  cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:.15s}
.pc-hover-actions .pc-compare:hover{background:var(--lilac);color:#fff;border-color:var(--lilac)}


/* --- PHASE65-NOCODE --- */
.no-code-field{border:1px dashed var(--line);border-radius:14px;padding:16px;margin:14px 0;background:#fff}
.no-code-field legend{padding:0 10px;font-weight:600;font-size:13px;color:var(--pink-dark)}
.link-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.link-row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.link-row select,.link-row input{padding:9px;border:1px solid var(--line);border-radius:8px;font-family:var(--font);background:#fff}

/* Rich Editor */
.re-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;background:var(--pink-soft);border-radius:10px 10px 0 0;border:1px solid var(--line);border-bottom:none}
.re-toolbar button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;font-family:var(--font);font-size:13px;min-width:34px}
.re-toolbar button:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
.re-area{min-height:220px;padding:16px;border:1px solid var(--line);border-radius:0 0 10px 10px;background:#fff;line-height:1.9;outline:none;font-family:var(--font)}
.re-area:focus{border-color:var(--pink)}
.re-area h2{margin-top:20px}
.re-area ul,.re-area ol{padding-right:22px}
.re-area a{color:var(--pink-dark);text-decoration:underline}

/* Image Uploader */
[data-image-upload]{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
[data-image-upload] input[type=file]{padding:10px;border:1px dashed var(--line);border-radius:10px;background:#fff;font-family:var(--font);cursor:pointer;width:100%;max-width:420px}
[data-image-upload] .iu-url{width:100%;max-width:480px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-family:var(--font)}
[data-image-upload] .iu-preview{max-width:220px;border-radius:10px;border:1px solid var(--line);background:var(--pink-soft)}

/* Product Picker */
[data-product-picker]{display:flex;flex-direction:column;gap:8px}
[data-product-picker] .pp-search{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-family:var(--font)}
[data-product-picker] .pp-results{display:none;max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
[data-product-picker] .pp-item{display:flex;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
[data-product-picker] .pp-item:last-child{border-bottom:none}
[data-product-picker] .pp-item:hover{background:var(--pink-soft)}
[data-product-picker] .pp-item img{width:38px;height:38px;object-fit:cover;border-radius:8px;background:var(--pink-soft)}
[data-product-picker] .pp-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
[data-product-picker] .pp-selected{display:flex;flex-wrap:wrap;gap:6px}
[data-product-picker] .pp-chip{display:flex;align-items:center;gap:6px;background:var(--pink-soft);border:1px solid var(--pink);border-radius:20px;padding:5px 12px;font-size:13px;color:var(--pink-dark)}
[data-product-picker] .pp-chip button{background:transparent;border:none;cursor:pointer;color:var(--pink-dark);font-size:14px;padding:0 2px}

@media (max-width:700px){.link-row{grid-template-columns:1fr}}


/* --- PHASE7-BULK --- */
.bulk-bar{display:flex;align-items:center;gap:12px;background:var(--pink-soft);border-radius:12px;padding:10px 16px;margin-bottom:12px;flex-wrap:wrap}
.bulk-bar .bulk-count{font-size:13px;color:var(--pink-dark);font-weight:600}
.bulk-bar select{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-family:var(--font);background:#fff}
.products-table input[type=checkbox]{transform:scale(1.2);cursor:pointer}


/* --- PHASE8-NOTIFY --- */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin:14px 0}
.tpl-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.tpl-head{display:flex;justify-content:space-between;align-items:center}
.tpl-channel{padding:3px 10px;border-radius:10px;font-size:12px;font-weight:600}
.tpl-sms{background:#E5F0FF;color:#2a5b99}
.tpl-email{background:#FDE8F0;color:#a33b6f}
.tpl-key{font-family:monospace;font-size:11px;color:var(--muted)}
.tpl-card label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.tpl-card input,.tpl-card textarea{padding:8px;border:1px solid var(--line);border-radius:8px;font-family:var(--font)}
.tpl-card textarea{font-size:13px;line-height:1.6;resize:vertical}
.tpl-actions{display:flex;justify-content:space-between;align-items:center}
.tpl-actions label{flex-direction:row;align-items:center;gap:6px;display:flex;font-size:13px;color:var(--text)}
code{background:var(--pink-soft);padding:2px 6px;border-radius:5px;font-size:11px;color:var(--pink-dark)}


/* --- PHASE9-PWA --- */
.pwa-install{position:fixed;bottom:76px;left:16px;background:linear-gradient(135deg,var(--pink),var(--lilac));
  color:#fff;border:none;padding:11px 18px;border-radius:14px;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;box-shadow:0 8px 20px rgba(200,140,160,.35);z-index:80;display:inline-flex;align-items:center;gap:6px}
.pwa-install:hover{transform:translateY(-2px)}
@media (min-width:701px){ .pwa-install{bottom:20px;left:20px} }
.offline-state{text-align:center;padding:80px 20px;color:var(--muted)}
.offline-icon{font-size:56px;margin-bottom:16px}
.offline-state h2{margin:0 0 10px;color:var(--text)}


/* --- PHASE10A-RETURNS --- */
.badge-status.s-approved{background:#E5F0FF;color:#2a5b99}
.badge-status.s-received{background:#FDF1E0;color:#a76a20}
.badge-status.s-refunded{background:var(--green-soft);color:#3a7a58}
.badge-status.s-rejected{background:#FDE8E8;color:#a33}


/* --- PHASE10B-ANALYTICS --- */
.funnel{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.funnel-row{display:grid;grid-template-columns:180px 1fr 60px;gap:12px;align-items:center}
.funnel-label{font-size:13px;color:var(--text)}
.funnel-bar-wrap{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;height:34px;position:relative}
.funnel-bar{height:100%;background:linear-gradient(90deg,var(--pink),var(--pink-dark));display:flex;align-items:center;justify-content:flex-start;padding:0 12px;color:#fff;font-weight:600;font-size:13px;transition:.3s}
.funnel-pct{font-size:12px;color:var(--muted);text-align:left}

.heat{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.heat-cell{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#4a3a42;border:1px solid var(--line)}
.heat-cell small{font-size:10px;font-weight:600}

.dow-list{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.dow-row{display:grid;grid-template-columns:80px 1fr 40px;gap:10px;align-items:center;font-size:13px}
.dow-track{background:var(--pink-soft);height:12px;border-radius:6px;overflow:hidden}
.dow-fill{height:100%;background:var(--pink-dark);border-radius:6px}
.dow-row small{color:var(--muted);text-align:left}

.cohort-wrap{overflow-x:auto}
.cohort-table{min-width:560px}
.cohort-table th:first-child,.cohort-table td:first-child{min-width:110px}
.cohort-cell{text-align:center;font-weight:600;font-size:12px}


/* --- PHASE10B5-ANALYTICS-UI --- */
.insights-box{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));border-radius:18px;padding:20px;margin:16px 0}
.insights-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.insight{background:#fff;border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.7;box-shadow:0 2px 8px rgba(200,140,160,.08)}
.insight p{margin:0}
.insight .ins-icon{font-size:20px;flex-shrink:0}
.insight-success{border-right:4px solid #7DC49A}
.insight-warning{border-right:4px solid #E8A24A}
.insight-info{border-right:4px solid #C8B6E2}

.chart-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;position:relative}

.kpi small.trend{display:block;font-size:11px;margin-top:4px;font-weight:600}
.kpi small.trend.up{color:#3a7a58}
.kpi small.trend.down{color:#a33}
.kpi small.trend:not(.up):not(.down){color:var(--muted)}

.heat{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.heat-cell{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#4a3a42;border:1px solid var(--line)}
.heat-cell small{font-size:10px;font-weight:600}

.cohort-wrap{overflow-x:auto}
.cohort-table{min-width:560px}
.cohort-table th:first-child,.cohort-table td:first-child{min-width:110px}
.cohort-cell{text-align:center;font-weight:600;font-size:12px}


/* --- PHASE10C-WALLET-GC-REFERRAL --- */
.topup-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.quick-amounts{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.ref-code-box{display:flex;gap:10px;align-items:center;background:#fff;border:2px dashed var(--pink);border-radius:14px;padding:14px;margin-top:8px}
.ref-code-box code{font-size:22px;font-weight:800;color:var(--pink-dark);letter-spacing:2px;flex:1;text-align:center;background:var(--pink-soft);padding:10px;border-radius:10px}
.referral-hero{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));border-radius:18px;padding:22px;margin:14px 0}
.gc-code{background:var(--lilac-soft);color:#6b4c9c;padding:3px 8px;border-radius:6px;font-weight:700;font-size:13px;letter-spacing:1px}

@media (max-width: 800px){
  .topup-grid{grid-template-columns:1fr}
}


/* --- PHASE10D-BUNDLES --- */
.badge.bundle{background:#C8B6E2;color:#fff}

.bundle-box{background:linear-gradient(135deg,var(--lilac-soft),var(--pink-soft));border-radius:14px;padding:16px;margin:14px 0}
.bundle-box h4{margin:0 0 10px;color:#6b4c9c}
.bundle-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.bundle-list li{display:flex;gap:10px;align-items:center;background:#fff;border-radius:10px;padding:8px 12px}
.bundle-list img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#fff;border:1px solid var(--line)}
.bundle-list li > div{display:flex;flex-direction:column;font-size:13px}
.bundle-list small{color:var(--muted);font-size:11px}
.bundle-list .qty-x{background:var(--pink);color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;margin-top:2px;width:fit-content}

.bundle-savings{background:#fff;border-radius:10px;padding:10px 14px;margin-top:12px;font-size:13px;color:#3a7a58;border-right:4px solid #7DC49A}
.bundle-savings b{color:#2c6244}
.bundle-savings small{color:var(--muted);font-size:11px}

.comp-summary{display:flex;justify-content:space-between;align-items:center;background:var(--pink-soft);border-radius:10px;padding:10px 14px;margin-top:10px}
.comp-summary span{font-size:13px;color:var(--pink-dark)}


/* --- PHASE10E-CHAT-NOTES --- */
.chat-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:820px;margin:20px auto;display:flex;flex-direction:column;height:640px}
.admin-chat{max-width:none;height:70vh;margin:16px 0}
.chat-header{padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft))}
.chat-body{flex:1;overflow-y:auto;padding:18px;background:#FDFBFC;display:flex;flex-direction:column;gap:10px}
.chat-msg{display:flex;max-width:80%}
.chat-msg.me{align-self:flex-end;justify-content:flex-end}
.chat-msg.staff{align-self:flex-start}
.chat-bubble{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:0 1px 4px rgba(0,0,0,.03);max-width:100%;word-wrap:break-word}
.chat-msg.me .chat-bubble{background:var(--pink-soft);border-color:var(--pink)}
.chat-msg.staff .chat-bubble{background:#fff}
.chat-meta{font-size:10px;color:var(--muted);margin-bottom:4px}
.chat-text{font-size:14px;line-height:1.7;white-space:pre-wrap}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.chat-form textarea{flex:1;padding:10px;border:1px solid var(--line);border-radius:10px;font-family:var(--font);resize:none}
.chat-form button{padding:0 24px}
.chat-empty{text-align:center;color:var(--muted);padding:40px;font-size:14px}

.chat-nav{position:relative}
.chat-nav .chat-badge{position:absolute;top:6px;left:6px;background:var(--pink);color:#fff;font-size:10px;border-radius:10px;padding:1px 6px}

.chat-btn b{position:absolute;top:0;left:4px;background:var(--green);color:#fff;font-size:10px;border-radius:10px;padding:1px 6px}

/* CRM Notes */
.notes-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.note-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.note-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.note-kind{padding:2px 10px;border-radius:8px;font-size:11px;font-weight:600}
.note-note{background:#EDE5F7;color:#6b4c9c}
.note-call{background:#D9EFE2;color:#3a7a58}
.note-issue{background:#FDE8E8;color:#a33}
.note-reminder{background:#FDF1E0;color:#a76a20}
.note-body{font-size:14px;line-height:1.8;white-space:pre-wrap}

@media (max-width:700px){
  .chat-wrap{height:75vh;margin:8px}
}


/* ===================================================================
   PHASE 10E.2 — Floating Chat Widget
   =================================================================== */
.zc-wrap{position:fixed;bottom:24px;left:24px;z-index:9000;font-family:var(--font)}

/* Launcher button */
.zc-launcher{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#E8A5B8,#C8B6E2);color:#fff;border:none;cursor:pointer;box-shadow:0 10px 28px rgba(200,140,160,.45);display:flex;align-items:center;justify-content:center;position:relative;transition:.25s transform,.25s box-shadow}
.zc-launcher:hover{transform:scale(1.07);box-shadow:0 14px 36px rgba(200,140,160,.55)}
.zc-launcher-icon{display:flex;align-items:center;justify-content:center}
.zc-badge{position:absolute;top:-4px;right:-4px;background:#E85A85;color:#fff;min-width:22px;height:22px;border-radius:11px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 2px 6px rgba(232,90,133,.5);border:2px solid #fff}
.zc-launcher.has-badge{animation:zcPulse 1.8s infinite}
@keyframes zcPulse{0%,100%{box-shadow:0 10px 28px rgba(200,140,160,.45)}50%{box-shadow:0 10px 28px rgba(232,90,133,.75),0 0 0 12px rgba(232,90,133,.12)}}

/* Panel */
.zc-panel{position:fixed;bottom:100px;left:24px;width:380px;max-width:calc(100vw - 32px);height:600px;max-height:calc(100vh - 140px);background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(40,20,30,.22);display:flex;flex-direction:column;overflow:hidden;animation:zcSlideIn .25s ease}
@keyframes zcSlideIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.zc-header{background:linear-gradient(135deg,#E8A5B8,#C8B6E2);color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.zc-header-info{display:flex;align-items:center;gap:12px}
.zc-avatar{width:44px;height:44px;border-radius:50%;background:#fff;color:#C97C93;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;position:relative;flex-shrink:0}
.zc-avatar-staff{background:#fff;color:#C97C93}
.zc-online-dot{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background:#ccc;border:2px solid #fff;transition:.3s}
.zc-online-dot.online{background:#4CD18F;box-shadow:0 0 0 3px rgba(76,209,143,.25)}
.zc-online-dot.offline{background:#bbb}
.zc-header-text b{display:block;font-size:15px;line-height:1.2}
.zc-status-text{font-size:11px;opacity:.9;display:block;margin-top:2px}
.zc-close{background:rgba(255,255,255,.22);border:none;color:#fff;width:32px;height:32px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.zc-close:hover{background:rgba(255,255,255,.35)}

/* Body / messages */
.zc-body{flex:1;overflow-y:auto;padding:18px;background:#FAF7F9;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.zc-loader{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:auto}
.zc-spinner{width:28px;height:28px;border:3px solid var(--pink-soft);border-top-color:var(--pink-dark);border-radius:50%;animation:zcSpin 0.8s linear infinite}
@keyframes zcSpin{to{transform:rotate(360deg)}}

.zc-row{display:flex;gap:8px;align-items:flex-end;max-width:85%}
.zc-row.me{flex-direction:row-reverse;align-self:flex-end;margin-left:auto}
.zc-row.staff{align-self:flex-start}
.zc-avatar-sm{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#E8A5B8,#C8B6E2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.zc-bubble{background:#fff;border-radius:16px 16px 16px 4px;padding:10px 14px;box-shadow:0 2px 8px rgba(40,20,30,.06);font-size:13.5px;line-height:1.75;word-wrap:break-word;white-space:pre-wrap}
.zc-row.me .zc-bubble{background:linear-gradient(135deg,#E8A5B8,#D890AA);color:#fff;border-radius:16px 16px 4px 16px;box-shadow:0 2px 8px rgba(200,140,160,.3)}
.zc-time{font-size:10px;color:var(--muted);margin-top:4px;display:block}
.zc-row.me .zc-time{color:rgba(255,255,255,.85);text-align:left}

.zc-welcome{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));border-radius:14px;padding:16px;font-size:13px;color:var(--text);text-align:center;line-height:1.8}
.zc-welcome b{display:block;font-size:14px;margin-bottom:6px;color:var(--pink-dark)}

/* Typing indicator inside panel */
.zc-typing{display:flex;gap:5px;align-items:center;padding:8px 18px;background:#FAF7F9;font-size:12px;color:var(--muted)}
.zc-typing-dot{width:6px;height:6px;border-radius:50%;background:var(--pink-dark);animation:zcTyping 1.4s infinite ease-in-out}
.zc-typing-dot:nth-child(2){animation-delay:.2s}
.zc-typing-dot:nth-child(3){animation-delay:.4s}
@keyframes zcTyping{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.zc-typing-text{margin-right:6px}

/* Form */
.zc-form{display:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid var(--line);align-items:flex-end}
.zc-form textarea{flex:1;border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-family:var(--font);font-size:13.5px;resize:none;outline:none;line-height:1.6;max-height:120px;transition:border .2s}
.zc-form textarea:focus{border-color:var(--pink)}
.zc-send{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#E8A5B8,#C8B6E2);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}
.zc-send:hover{transform:scale(1.07)}
.zc-send:disabled{opacity:.5;cursor:default;transform:none}

/* Mobile */
@media (max-width:520px){
  .zc-wrap{bottom:16px;left:16px}
  .zc-launcher{width:54px;height:54px}
  .zc-panel{left:8px;right:8px;bottom:84px;width:auto;height:calc(100vh - 120px);max-height:none;border-radius:16px}
}

/* ---- Admin chat v2 ---- */
.admin-chat-v2{display:grid;grid-template-columns:260px 1fr;gap:20px;margin-top:12px}
.acv-side{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:16px;height:fit-content}
.acv-profile{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.acv-profile b{font-size:15px}
.acv-profile small{font-size:12px}
.acv-typing{display:inline-flex;align-items:center;gap:4px;background:var(--pink-soft);color:var(--pink-dark);padding:4px 10px;border-radius:10px;font-size:11px;margin-top:6px}
.acv-actions{display:flex;flex-direction:column;gap:6px}
.acv-main{min-width:0}
.zc-v2-wrap{max-width:none;margin:0;height:70vh;border-radius:16px}
@media (max-width:800px){
  .admin-chat-v2{grid-template-columns:1fr}
  .acv-side{flex-direction:row;align-items:center}
}


/* ===================================================================
   PHASE 10E.3 — Glass chat + offline banner
   =================================================================== */

/* ---- Glass panel: transparent with blur ---- */
.zc-panel{
  background: rgba(253, 251, 252, 0.72) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow: 0 24px 60px rgba(40,20,30,.18) !important;
}

/* Header keeps its gradient but slightly translucent */
.zc-header{
  background: linear-gradient(135deg, rgba(232,165,184,.85), rgba(200,182,226,.85)) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.35);
}

/* Body: transparent so the page behind shows through the glass */
.zc-body{
  background: transparent !important;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

/* Bubbles are slightly translucent white so they feel like part of glass */
.zc-bubble{
  background: rgba(255,255,255,0.88) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.zc-row.me .zc-bubble{
  background: linear-gradient(135deg, rgba(232,165,184,.95), rgba(216,144,170,.95)) !important;
}

/* Form: translucent too */
.zc-form{
  background: rgba(255,255,255,0.65) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.5) !important;
}
.zc-form textarea{
  background: rgba(255,255,255,0.85) !important;
}
.zc-typing{
  background: rgba(255,255,255,0.55) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Welcome card also glass-like */
.zc-welcome{
  background: linear-gradient(135deg, rgba(247,221,228,.9), rgba(237,229,247,.9)) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---- Offline banner ---- */
.zc-offline{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  margin: 0;
  background: linear-gradient(135deg, #FFF7E8, #FDEFE2);
  border-top: 1px solid rgba(232,162,74,.25);
  border-bottom: 1px solid rgba(232,162,74,.25);
  color: #8a5a1a;
  font-size: 12.5px;
  line-height: 1.6;
}
.zc-offline-icon{
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.zc-offline-text b{
  display: block;
  font-size: 13px;
  color: #7a4c12;
  margin-bottom: 2px;
}
.zc-offline-text p{
  margin: 0;
  color: #8a5a1a;
  opacity: .9;
  font-size: 12px;
}

/* ---- Admin chat v3: richer sidebar ---- */
.acv-v3{display:grid;grid-template-columns:320px 1fr;gap:20px;margin-top:12px}
.acv-side-v3{
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 90px;
}
.acv-head{
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.acv-avatar-lg{
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--lilac));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; flex-shrink: 0; position: relative;
}
.acv-avatar-lg .acv-status{
  position: absolute; bottom: 2px; right: 2px; width: 13px; height: 13px;
  border-radius: 50%; border: 2px solid #fff;
}
.acv-avatar-lg .acv-status.online{ background: #4CD18F; box-shadow: 0 0 0 3px rgba(76,209,143,.25) }
.acv-avatar-lg .acv-status.offline{ background: #bbb }
.acv-name b{ display: block; font-size: 15px; }
.acv-name small{ font-size: 12px; color: var(--muted); }

.acv-badges{ display: flex; gap: 6px; flex-wrap: wrap; }
.acv-badge{
  display: inline-block; padding: 4px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.acv-badge.online{ background: #D9EFE2; color: #2c6244 }
.acv-badge.offline{ background: #EEE; color: #666 }
.acv-badge.vip{ background: linear-gradient(135deg,#FFE9B8,#FFD27A); color: #7a4c12 }
.acv-badge.new{ background: #E5F0FF; color: #2a5b99 }
.acv-badge.returning{ background: #EDE5F7; color: #6b4c9c }
.acv-badge.inactive{ background: #FDE8E8; color: #a33 }

.acv-stats{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.acv-stat{
  background: rgba(255,255,255,0.75); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.acv-stat span{ display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.acv-stat b{ font-size: 15px; color: var(--text); }

.acv-last-order{
  background: var(--pink-soft); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px;
}
.acv-last-order b{ color: var(--pink-dark); }

.acv-actions{ display: flex; flex-direction: column; gap: 6px; }
.acv-actions a{ text-align: center; padding: 9px; font-size: 13px }

.acv-main-v3{ min-width: 0 }
.acv-main-v3 .chat-wrap{
  max-width: none; margin: 0; height: 72vh;
  background: rgba(255,255,255,0.75);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.acv-main-v3 .chat-body{ background: transparent; }

@media (max-width: 900px){
  .acv-v3{ grid-template-columns: 1fr }
  .acv-side-v3{ position: static }
}


/* ---- Force floating widget visibility ---- */
.zc-wrap{
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  z-index: 99999 !important;
}
.zc-launcher.active{
  background: linear-gradient(135deg, #C97C93, #A58FD4) !important;
  transform: rotate(90deg);
}
.zc-login-btn{
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(135deg, #E8A5B8, #C8B6E2);
  color: #fff !important;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
  transition: .2s;
}
.zc-login-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(200,140,160,.3);
}


/* --- CRITICAL FIX: hidden attribute must override display:flex --- */
.zc-panel[hidden]{ display: none !important; }
.zc-typing[hidden]{ display: none !important; }
.zc-offline[hidden]{ display: none !important; }


/* ---- Admin floating chat pill ---- */
.adm-chat-pill{
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #E8A5B8, #C8B6E2);
  color: #fff !important;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(200,140,160,.45);
  transition: .25s;
}
.adm-chat-pill:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(200,140,160,.55);
}
.adm-pill-icon{ font-size: 18px; }
.adm-pill-badge{
  background: #E85A85;
  color: #fff;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 6px;
  box-shadow: 0 2px 6px rgba(232,90,133,.4);
}
.adm-chat-pill.pulse{
  animation: admPulse .5s ease-in-out 2;
}
@keyframes admPulse{
  0%, 100% { transform: translateY(-3px) scale(1); }
  50% { transform: translateY(-3px) scale(1.08); }
}

/* Sidebar badge next to 'چت زنده' link */
.sidebar-badge{
  display: inline-block;
  background: #E85A85;
  color: #fff;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
  margin-right: auto;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}
.admin-side nav a.chat-nav{
  display: flex !important;
  align-items: center;
  gap: 8px;
}


/* ===================================================================
   PHASE 11 — Graphics polish + Settings + Edit buttons
   =================================================================== */

/* ---- Settings page ---- */
.settings-hero{margin-bottom:20px}
.settings-hero h2{margin:0 0 4px}
.alert-success{background:linear-gradient(135deg,#D9EFE2,#E5F8ED);color:#2c6244;
  padding:12px 18px;border-radius:12px;margin:12px 0;font-size:14px;font-weight:600;
  border-right:4px solid #4CD18F;animation:slideDown .3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.settings-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;margin-top:14px}
.settings-tabs{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;
  height:fit-content;position:sticky;top:90px}
.settings-tab{display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;border-radius:10px;color:var(--muted);font-size:13.5px;
  text-decoration:none;transition:.15s;margin-bottom:2px}
.settings-tab:hover{background:var(--pink-soft);color:var(--pink-dark)}
.settings-tab.active{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));
  color:var(--pink-dark);font-weight:700}
.settings-tab-count{background:#fff;color:var(--pink-dark);padding:1px 8px;
  border-radius:10px;font-size:11px;font-weight:700;min-width:22px;text-align:center}

.settings-content{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.setting-row{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:center;
  padding:14px 0;border-bottom:1px dashed var(--line)}
.setting-row:last-of-type{border-bottom:none}
.setting-label b{display:block;font-size:14px;margin-bottom:2px}
.setting-label small{color:var(--muted);font-size:11.5px}
.setting-input input[type=text],
.setting-input textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font-family:var(--font);font-size:13.5px;transition:border .15s}
.setting-input input:focus,
.setting-input textarea:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(232,165,184,.18)}
.settings-actions{display:flex;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}

/* iOS-style switch */
.switch{position:relative;display:inline-block;width:52px;height:28px;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#ccc;border-radius:28px;
  transition:.25s;box-shadow:inset 0 2px 6px rgba(0,0,0,.1)}
.switch .slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.switch input:checked + .slider{background:linear-gradient(135deg,#E8A5B8,#C8B6E2)}
.switch input:checked + .slider:before{transform:translateX(24px)}

.btn-danger-outline{background:#fff;color:#c66;border:1px solid #f0c8c8;
  padding:10px 16px;border-radius:10px;font-family:var(--font);cursor:pointer;
  font-size:13px;font-weight:600;transition:.15s}
.btn-danger-outline:hover{background:#FDE8E8}

/* ---- Form cards (create/edit forms above tables) ---- */
.form-card{background:linear-gradient(180deg,#FFF8FA,#FFFFFF);border:1px solid var(--line);
  border-radius:14px;padding:18px;margin:14px 0 20px}
.form-card h3{margin:0 0 14px;font-size:16px;color:var(--pink-dark)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid-2 label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.form-grid-2 input,
.form-grid-2 select,
.form-grid-2 textarea{padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font);font-size:13.5px;background:#fff;transition:.15s}
.form-grid-2 input:focus,
.form-grid-2 select:focus,
.form-grid-2 textarea:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(232,165,184,.18)}
.form-grid-2 .checkbox-row{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--text)}

/* ---- Fancy table ---- */
.fancy-table{background:#fff;border-radius:14px;overflow:hidden}
.fancy-table th{background:linear-gradient(180deg,#F7DDE4,#F5D6DE);color:var(--pink-dark);
  font-weight:700;font-size:12.5px;text-transform:none;letter-spacing:0}
.fancy-table tr:hover td{background:#FFF8FA}
.fancy-table td{padding:11px 10px;font-size:13.5px;vertical-align:middle}
.fancy-table code{background:var(--lilac-soft);color:#6b4c9c;padding:2px 8px;
  border-radius:6px;font-size:12.5px;font-weight:600}

.pill{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11.5px;font-weight:700}
.pill-green{background:var(--green-soft);color:#2c6244}
.pill-gray{background:#EEE;color:#666}
.pill-pink{background:var(--pink-soft);color:var(--pink-dark)}
.pill-blue{background:#E5F0FF;color:#2a5b99}

/* ---- Icon buttons in tables ---- */
.actions-cell{white-space:nowrap;text-align:left}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;
  cursor:pointer;font-size:15px;text-decoration:none;color:var(--text);transition:.15s;
  padding:0;margin:0 2px;font-family:inherit}
.btn-icon:hover{background:var(--pink-soft);border-color:var(--pink);transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(232,165,184,.28)}
.btn-icon-danger:hover{background:#FDE8E8;border-color:#f0c8c8}

/* ---- Better sidebar admin ---- */
.admin-side nav a{padding:10px 14px;border-radius:10px;font-size:13.5px;transition:.15s;
  display:flex;align-items:center;gap:8px}
.admin-side nav a:hover{background:var(--pink-soft);color:var(--pink-dark);transform:translateX(-2px)}
.admin-side nav a.active,
.admin-side nav a[href*="settings"]{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft))}

/* ---- Better KPI cards ---- */
.kpi{position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;right:0;width:60px;height:60px;
  background:radial-gradient(circle,rgba(232,165,184,.18) 0%,transparent 70%);
  border-radius:50%;transform:translate(30%,-30%)}
.kpi b{font-size:24px;font-weight:800;letter-spacing:-.5px}
.kpi.highlight{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));
  box-shadow:0 6px 20px rgba(200,140,160,.15)}

/* ---- Better empty state ---- */
.empty-state{padding:70px 30px;text-align:center}
.empty-state p{font-size:15px;color:var(--muted);margin:0 0 18px}
.empty-state::before{content:"📭";display:block;font-size:52px;margin-bottom:14px;opacity:.5}

/* ---- Buttons polish ---- */
.btn-primary{padding:11px 22px;font-size:14px;box-shadow:0 4px 12px rgba(200,140,160,.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,140,160,.35)}
.btn-ghost{padding:10px 18px;font-size:13.5px;transition:.15s}
.btn-ghost:hover{background:var(--pink-soft);border-color:var(--pink);color:var(--pink-dark)}

/* Responsive */
@media (max-width:900px){
  .settings-layout{grid-template-columns:1fr}
  .settings-tabs{position:static;display:flex;flex-wrap:wrap;gap:4px}
  .settings-tab{flex:1 1 auto;min-width:140px}
  .setting-row{grid-template-columns:1fr}
  .form-grid-2{grid-template-columns:1fr}
}


/* ===================================================================
   PHASE 11 — Graphics polish + Settings + Edit buttons
   =================================================================== */

/* ---- Settings page ---- */
.settings-hero{margin-bottom:20px}
.settings-hero h2{margin:0 0 4px}
.alert-success{background:linear-gradient(135deg,#D9EFE2,#E5F8ED);color:#2c6244;
  padding:12px 18px;border-radius:12px;margin:12px 0;font-size:14px;font-weight:600;
  border-right:4px solid #4CD18F;animation:slideDown .3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.settings-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;margin-top:14px}
.settings-tabs{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;
  height:fit-content;position:sticky;top:90px}
.settings-tab{display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;border-radius:10px;color:var(--muted);font-size:13.5px;
  text-decoration:none;transition:.15s;margin-bottom:2px}
.settings-tab:hover{background:var(--pink-soft);color:var(--pink-dark)}
.settings-tab.active{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));
  color:var(--pink-dark);font-weight:700}
.settings-tab-count{background:#fff;color:var(--pink-dark);padding:1px 8px;
  border-radius:10px;font-size:11px;font-weight:700;min-width:22px;text-align:center}

.settings-content{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.setting-row{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:center;
  padding:14px 0;border-bottom:1px dashed var(--line)}
.setting-row:last-of-type{border-bottom:none}
.setting-label b{display:block;font-size:14px;margin-bottom:2px}
.setting-label small{color:var(--muted);font-size:11.5px}
.setting-input input[type=text],
.setting-input textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font-family:var(--font);font-size:13.5px;transition:border .15s}
.setting-input input:focus,
.setting-input textarea:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(232,165,184,.18)}
.settings-actions{display:flex;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}

/* iOS-style switch */
.switch{position:relative;display:inline-block;width:52px;height:28px;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#ccc;border-radius:28px;
  transition:.25s;box-shadow:inset 0 2px 6px rgba(0,0,0,.1)}
.switch .slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.switch input:checked + .slider{background:linear-gradient(135deg,#E8A5B8,#C8B6E2)}
.switch input:checked + .slider:before{transform:translateX(24px)}

.btn-danger-outline{background:#fff;color:#c66;border:1px solid #f0c8c8;
  padding:10px 16px;border-radius:10px;font-family:var(--font);cursor:pointer;
  font-size:13px;font-weight:600;transition:.15s}
.btn-danger-outline:hover{background:#FDE8E8}

/* ---- Form cards (create/edit forms above tables) ---- */
.form-card{background:linear-gradient(180deg,#FFF8FA,#FFFFFF);border:1px solid var(--line);
  border-radius:14px;padding:18px;margin:14px 0 20px}
.form-card h3{margin:0 0 14px;font-size:16px;color:var(--pink-dark)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid-2 label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.form-grid-2 input,
.form-grid-2 select,
.form-grid-2 textarea{padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font);font-size:13.5px;background:#fff;transition:.15s}
.form-grid-2 input:focus,
.form-grid-2 select:focus,
.form-grid-2 textarea:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(232,165,184,.18)}
.form-grid-2 .checkbox-row{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--text)}

/* ---- Fancy table ---- */
.fancy-table{background:#fff;border-radius:14px;overflow:hidden}
.fancy-table th{background:linear-gradient(180deg,#F7DDE4,#F5D6DE);color:var(--pink-dark);
  font-weight:700;font-size:12.5px;text-transform:none;letter-spacing:0}
.fancy-table tr:hover td{background:#FFF8FA}
.fancy-table td{padding:11px 10px;font-size:13.5px;vertical-align:middle}
.fancy-table code{background:var(--lilac-soft);color:#6b4c9c;padding:2px 8px;
  border-radius:6px;font-size:12.5px;font-weight:600}

.pill{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11.5px;font-weight:700}
.pill-green{background:var(--green-soft);color:#2c6244}
.pill-gray{background:#EEE;color:#666}
.pill-pink{background:var(--pink-soft);color:var(--pink-dark)}
.pill-blue{background:#E5F0FF;color:#2a5b99}

/* ---- Icon buttons in tables ---- */
.actions-cell{white-space:nowrap;text-align:left}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;
  cursor:pointer;font-size:15px;text-decoration:none;color:var(--text);transition:.15s;
  padding:0;margin:0 2px;font-family:inherit}
.btn-icon:hover{background:var(--pink-soft);border-color:var(--pink);transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(232,165,184,.28)}
.btn-icon-danger:hover{background:#FDE8E8;border-color:#f0c8c8}

/* ---- Better sidebar admin ---- */
.admin-side nav a{padding:10px 14px;border-radius:10px;font-size:13.5px;transition:.15s;
  display:flex;align-items:center;gap:8px}
.admin-side nav a:hover{background:var(--pink-soft);color:var(--pink-dark);transform:translateX(-2px)}
.admin-side nav a.active,
.admin-side nav a[href*="settings"]{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft))}

/* ---- Better KPI cards ---- */
.kpi{position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;right:0;width:60px;height:60px;
  background:radial-gradient(circle,rgba(232,165,184,.18) 0%,transparent 70%);
  border-radius:50%;transform:translate(30%,-30%)}
.kpi b{font-size:24px;font-weight:800;letter-spacing:-.5px}
.kpi.highlight{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));
  box-shadow:0 6px 20px rgba(200,140,160,.15)}

/* ---- Better empty state ---- */
.empty-state{padding:70px 30px;text-align:center}
.empty-state p{font-size:15px;color:var(--muted);margin:0 0 18px}
.empty-state::before{content:"📭";display:block;font-size:52px;margin-bottom:14px;opacity:.5}

/* ---- Buttons polish ---- */
.btn-primary{padding:11px 22px;font-size:14px;box-shadow:0 4px 12px rgba(200,140,160,.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,140,160,.35)}
.btn-ghost{padding:10px 18px;font-size:13.5px;transition:.15s}
.btn-ghost:hover{background:var(--pink-soft);border-color:var(--pink);color:var(--pink-dark)}

/* Responsive */
@media (max-width:900px){
  .settings-layout{grid-template-columns:1fr}
  .settings-tabs{position:static;display:flex;flex-wrap:wrap;gap:4px}
  .settings-tab{flex:1 1 auto;min-width:140px}
  .setting-row{grid-template-columns:1fr}
  .form-grid-2{grid-template-columns:1fr}
}


/* ===================================================================
   PHASE 11 — Graphics polish + Settings + Edit buttons
   =================================================================== */

/* ---- Settings page ---- */
.settings-hero{margin-bottom:20px}
.settings-hero h2{margin:0 0 4px}
.alert-success{background:linear-gradient(135deg,#D9EFE2,#E5F8ED);color:#2c6244;
  padding:12px 18px;border-radius:12px;margin:12px 0;font-size:14px;font-weight:600;
  border-right:4px solid #4CD18F;animation:slideDown .3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.settings-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;margin-top:14px}
.settings-tabs{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;
  height:fit-content;position:sticky;top:90px}
.settings-tab{display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;border-radius:10px;color:var(--muted);font-size:13.5px;
  text-decoration:none;transition:.15s;margin-bottom:2px}
.settings-tab:hover{background:var(--pink-soft);color:var(--pink-dark)}
.settings-tab.active{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));
  color:var(--pink-dark);font-weight:700}
.settings-tab-count{background:#fff;color:var(--pink-dark);padding:1px 8px;
  border-radius:10px;font-size:11px;font-weight:700;min-width:22px;text-align:center}

.settings-content{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.setting-row{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:center;
  padding:14px 0;border-bottom:1px dashed var(--line)}
.setting-row:last-of-type{border-bottom:none}
.setting-label b{display:block;font-size:14px;margin-bottom:2px}
.setting-label small{color:var(--muted);font-size:11.5px}
.setting-input input[type=text],
.setting-input textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font-family:var(--font);font-size:13.5px;transition:border .15s}
.setting-input input:focus,
.setting-input textarea:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(232,165,184,.18)}
.settings-actions{display:flex;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}

/* iOS-style switch */
.switch{position:relative;display:inline-block;width:52px;height:28px;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#ccc;border-radius:28px;
  transition:.25s;box-shadow:inset 0 2px 6px rgba(0,0,0,.1)}
.switch .slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.switch input:checked + .slider{background:linear-gradient(135deg,#E8A5B8,#C8B6E2)}
.switch input:checked + .slider:before{transform:translateX(24px)}

.btn-danger-outline{background:#fff;color:#c66;border:1px solid #f0c8c8;
  padding:10px 16px;border-radius:10px;font-family:var(--font);cursor:pointer;
  font-size:13px;font-weight:600;transition:.15s}
.btn-danger-outline:hover{background:#FDE8E8}

/* ---- Form cards (create/edit forms above tables) ---- */
.form-card{background:linear-gradient(180deg,#FFF8FA,#FFFFFF);border:1px solid var(--line);
  border-radius:14px;padding:18px;margin:14px 0 20px}
.form-card h3{margin:0 0 14px;font-size:16px;color:var(--pink-dark)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid-2 label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.form-grid-2 input,
.form-grid-2 select,
.form-grid-2 textarea{padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font);font-size:13.5px;background:#fff;transition:.15s}
.form-grid-2 input:focus,
.form-grid-2 select:focus,
.form-grid-2 textarea:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(232,165,184,.18)}
.form-grid-2 .checkbox-row{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--text)}

/* ---- Fancy table ---- */
.fancy-table{background:#fff;border-radius:14px;overflow:hidden}
.fancy-table th{background:linear-gradient(180deg,#F7DDE4,#F5D6DE);color:var(--pink-dark);
  font-weight:700;font-size:12.5px;text-transform:none;letter-spacing:0}
.fancy-table tr:hover td{background:#FFF8FA}
.fancy-table td{padding:11px 10px;font-size:13.5px;vertical-align:middle}
.fancy-table code{background:var(--lilac-soft);color:#6b4c9c;padding:2px 8px;
  border-radius:6px;font-size:12.5px;font-weight:600}

.pill{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11.5px;font-weight:700}
.pill-green{background:var(--green-soft);color:#2c6244}
.pill-gray{background:#EEE;color:#666}
.pill-pink{background:var(--pink-soft);color:var(--pink-dark)}
.pill-blue{background:#E5F0FF;color:#2a5b99}

/* ---- Icon buttons in tables ---- */
.actions-cell{white-space:nowrap;text-align:left}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;
  cursor:pointer;font-size:15px;text-decoration:none;color:var(--text);transition:.15s;
  padding:0;margin:0 2px;font-family:inherit}
.btn-icon:hover{background:var(--pink-soft);border-color:var(--pink);transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(232,165,184,.28)}
.btn-icon-danger:hover{background:#FDE8E8;border-color:#f0c8c8}

/* ---- Better sidebar admin ---- */
.admin-side nav a{padding:10px 14px;border-radius:10px;font-size:13.5px;transition:.15s;
  display:flex;align-items:center;gap:8px}
.admin-side nav a:hover{background:var(--pink-soft);color:var(--pink-dark);transform:translateX(-2px)}
.admin-side nav a.active,
.admin-side nav a[href*="settings"]{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft))}

/* ---- Better KPI cards ---- */
.kpi{position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;right:0;width:60px;height:60px;
  background:radial-gradient(circle,rgba(232,165,184,.18) 0%,transparent 70%);
  border-radius:50%;transform:translate(30%,-30%)}
.kpi b{font-size:24px;font-weight:800;letter-spacing:-.5px}
.kpi.highlight{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));
  box-shadow:0 6px 20px rgba(200,140,160,.15)}

/* ---- Better empty state ---- */
.empty-state{padding:70px 30px;text-align:center}
.empty-state p{font-size:15px;color:var(--muted);margin:0 0 18px}
.empty-state::before{content:"📭";display:block;font-size:52px;margin-bottom:14px;opacity:.5}

/* ---- Buttons polish ---- */
.btn-primary{padding:11px 22px;font-size:14px;box-shadow:0 4px 12px rgba(200,140,160,.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,140,160,.35)}
.btn-ghost{padding:10px 18px;font-size:13.5px;transition:.15s}
.btn-ghost:hover{background:var(--pink-soft);border-color:var(--pink);color:var(--pink-dark)}

/* Responsive */
@media (max-width:900px){
  .settings-layout{grid-template-columns:1fr}
  .settings-tabs{position:static;display:flex;flex-wrap:wrap;gap:4px}
  .settings-tab{flex:1 1 auto;min-width:140px}
  .setting-row{grid-template-columns:1fr}
  .form-grid-2{grid-template-columns:1fr}
}


/* ===================================================================
   PHASE 11C — Graphics polish
   =================================================================== */

/* ---- Modern product card ---- */
.product-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:all .3s cubic-bezier(.2,.9,.4,1);
  position:relative
}
.product-card:hover{
  box-shadow:0 14px 40px rgba(200,140,160,.18);border-color:transparent;
  transform:translateY(-4px)
}
.pc-image{position:relative;display:block;aspect-ratio:1/1;background:linear-gradient(135deg,#FFF7FA,#F5EDF7);overflow:hidden}
.pc-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.9,.4,1)}
.product-card:hover .pc-image img{transform:scale(1.08)}

.pc-badges{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.badge{padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.badge.discount{background:linear-gradient(135deg,#E85A85,#C97C93)}
.badge.bundle{background:linear-gradient(135deg,#C8B6E2,#A58FD4)}
.badge.out{background:#999}

.pc-hover-actions{
  position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateX(-6px);transition:.25s
}
.product-card:hover .pc-hover-actions{opacity:1;transform:translateX(0)}
.pc-quick,.pc-wish,.pc-compare{
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:11px;width:36px;height:36px;cursor:pointer;
  font-size:15px;display:flex;align-items:center;justify-content:center;transition:.2s;
  box-shadow:0 3px 10px rgba(0,0,0,.06);padding:0
}
.pc-quick:hover,.pc-wish:hover{background:var(--pink);color:#fff;border-color:var(--pink);transform:scale(1.08)}
.pc-compare:hover{background:var(--lilac);color:#fff;border-color:var(--lilac);transform:scale(1.08)}

.pc-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pc-brand{color:var(--muted);font-size:11px;letter-spacing:.3px}
.pc-name{font-weight:600;font-size:14px;line-height:1.6;min-height:2.8em;color:var(--text);transition:color .15s}
.pc-name:hover{color:var(--pink-dark)}
.pc-price{display:flex;gap:8px;align-items:baseline;font-size:15px;margin-top:auto;padding-top:6px}
.pc-price .old{color:#bbb;text-decoration:line-through;font-size:11.5px}
.pc-price .now{color:var(--green);font-weight:800;font-size:16px;display:inline-flex;align-items:baseline;gap:3px}
.pc-price .now small{font-size:11px;font-weight:500;color:var(--muted);margin-right:3px}
.btn-add{
  background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));
  color:var(--pink-dark);text-align:center;padding:10px;border-radius:11px;font-weight:700;font-size:13px;
  margin-top:8px;transition:.2s;display:flex;align-items:center;justify-content:center;gap:6px
}
.btn-add:hover{background:linear-gradient(135deg,var(--pink),var(--lilac));color:#fff;transform:translateY(-1px)}

/* ---- Modern KPI ---- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:18px 0}
.kpi{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;
  display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
  transition:all .25s
}
.kpi::before{
  content:"";position:absolute;top:-20px;right:-20px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,165,184,.14),transparent 70%);transition:.3s
}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(200,140,160,.12)}
.kpi:hover::before{transform:scale(1.3)}
.kpi span{color:var(--muted);font-size:12.5px;font-weight:500;position:relative}
.kpi b{font-size:26px;font-weight:800;color:var(--text);letter-spacing:-.5px;position:relative}
.kpi.highlight{
  background:linear-gradient(135deg,#FFF2F6 0%,#F0E9FA 100%);
  border-color:transparent;box-shadow:0 8px 24px rgba(200,140,160,.15)
}
.kpi.highlight b{color:var(--pink-dark)}

/* ---- Dashboard ops cards (better) ---- */
.ops-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:20px 0}
.ops-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  transition:all .25s;text-decoration:none;color:var(--text);position:relative;overflow:hidden
}
.ops-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(200,140,160,.15);border-color:var(--pink)}
.ops-card.alert{background:linear-gradient(180deg,#FFF2F6,#FFFFFF);border-color:#F4B8C6}
.ops-card.alert::after{
  content:"";position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;
  background:#E85A85;box-shadow:0 0 0 3px rgba(232,90,133,.2);animation:pulse 2s infinite
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.ops-card.info{background:linear-gradient(180deg,#F3F7FF,#FFFFFF);border-color:#B8CCE8}
.ops-icon{font-size:24px}
.ops-num{font-size:28px;font-weight:800;color:var(--pink-dark);letter-spacing:-1px}
.ops-label{font-size:12px;color:var(--muted);font-weight:500}

/* ---- Section headings with underline ---- */
.block-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:20px;padding-bottom:10px;position:relative
}
.block-head h2{
  margin:0;font-size:19px;font-weight:800;
  display:inline-flex;align-items:center;gap:8px
}
.block-head h2::before{
  content:"";display:inline-block;width:5px;height:20px;
  background:linear-gradient(180deg,var(--pink),var(--lilac));border-radius:3px
}
.block-head a{
  color:var(--pink-dark);font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;transition:gap .2s
}
.block-head a:hover{gap:8px}
.block-head a::after{content:"←";font-size:14px}

/* ---- Category scroller (modern) ---- */
.cat-scroller{gap:16px;padding:4px 4px 14px}
.cat-card{
  min-width:160px;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:16px 12px;text-align:center;transition:all .25s;position:relative;overflow:hidden
}
.cat-card::before{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,var(--pink-soft));
  opacity:0;transition:.25s
}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(200,140,160,.15);border-color:var(--pink)}
.cat-card:hover::before{opacity:1}
.cat-img{
  height:78px;width:78px;margin:0 auto 10px;border-radius:50%;
  background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft));
  position:relative;z-index:1;box-shadow:inset 0 -6px 12px rgba(255,255,255,.5)
}
.cat-card span{display:block;font-weight:700;font-size:13.5px;position:relative;z-index:1}
.cat-card small{color:var(--muted);font-size:11px;position:relative;z-index:1}

/* ---- Hero modern ---- */
.hero{
  background:linear-gradient(135deg,#FFF2F6 0%,#F0E9FA 60%,#E9F5EE 100%);
  border-radius:24px;padding:44px 40px;position:relative;overflow:hidden;
  margin:24px 0;box-shadow:0 12px 40px rgba(200,140,160,.1)
}
.hero::before{
  content:"";position:absolute;top:-100px;right:-100px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,165,184,.35),transparent 70%)
}
.hero::after{
  content:"";position:absolute;bottom:-120px;left:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,182,226,.35),transparent 70%)
}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:32px;margin:10px 0 14px;font-weight:800;letter-spacing:-.5px;line-height:1.35}
.hero p{font-size:16px;color:var(--muted);margin:0 0 22px;line-height:1.8;max-width:520px}
.kicker{
  display:inline-block;padding:6px 14px;background:#fff;border-radius:999px;
  color:var(--pink-dark);font-size:12.5px;font-weight:700;box-shadow:0 3px 10px rgba(200,140,160,.15)
}
.hero-art{
  position:relative;z-index:1;height:220px;border-radius:20px;
  background:radial-gradient(circle at 30% 30%,#fff,transparent 55%),
             radial-gradient(circle at 70% 70%,var(--pink),transparent 50%),
             radial-gradient(circle at 50% 50%,var(--lilac),transparent 60%)
}

/* ---- Trust bar modern ---- */
.trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:44px 0;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 18px
}
.trust > div{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  font-size:13px;color:var(--muted);font-weight:600;
  padding:10px;border-radius:12px;transition:.2s
}
.trust > div:hover{background:var(--pink-soft);color:var(--pink-dark);transform:translateY(-2px)}

/* ---- Modern tables ---- */
.fancy-table{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  border-collapse:separate;border-spacing:0
}
.fancy-table thead th{
  background:linear-gradient(180deg,#FFF2F6,#FBE9F0);color:var(--pink-dark);
  font-weight:800;font-size:12.5px;padding:14px 12px;text-align:right;
  border-bottom:1px solid #F4D7E1;letter-spacing:.2px;position:sticky;top:0
}
.fancy-table tbody td{
  padding:14px 12px;font-size:13.5px;border-bottom:1px solid #F5E9EF;
  vertical-align:middle;text-align:right;transition:background .15s
}
.fancy-table tbody tr:last-child td{border-bottom:none}
.fancy-table tbody tr{transition:.15s}
.fancy-table tbody tr:hover{background:#FFF8FA}
.fancy-table code{
  background:linear-gradient(135deg,#EDE5F7,#F7DDE4);color:#6b4c9c;
  padding:3px 10px;border-radius:7px;font-size:12px;font-weight:700
}
.fancy-table .actions-cell{white-space:nowrap;text-align:left}

/* ---- Buttons polish ---- */
.btn-primary{
  background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;
  padding:11px 22px;border-radius:12px;font-weight:700;font-size:14px;
  box-shadow:0 6px 16px rgba(200,140,160,.28);transition:.2s;border:none;cursor:pointer
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(200,140,160,.42)}
.btn-ghost{
  background:#fff;border:1.5px solid var(--line);padding:10px 18px;border-radius:12px;
  color:var(--text);font-weight:600;font-size:13.5px;transition:.15s;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px
}
.btn-ghost:hover{background:var(--pink-soft);border-color:var(--pink);color:var(--pink-dark);transform:translateY(-1px)}

/* ---- Pill styles ---- */
.pill{display:inline-block;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:700}
.pill-green{background:linear-gradient(135deg,#D9EFE2,#C8E6D5);color:#2c6244}
.pill-pink{background:linear-gradient(135deg,#F7DDE4,#F1C9D4);color:#a33b6f}
.pill-gray{background:#EEEEEE;color:#666}
.pill-blue{background:linear-gradient(135deg,#E5F0FF,#D0E3FC);color:#2a5b99}
.pill-purple{background:linear-gradient(135deg,#EDE5F7,#DFD1EF);color:#6b4c9c}

/* ---- Storefront: header improvement ---- */
.site-header{box-shadow:0 2px 18px rgba(200,140,160,.06)}
.top-strip{
  background:linear-gradient(90deg,#F7DDE4 0%,#EDE5F7 50%,#D9EFE2 100%);
  color:#6B6773;font-size:12.5px;padding:8px 20px;font-weight:600
}
.header-main{padding:16px 20px}
.search-box{box-shadow:0 3px 12px rgba(200,140,160,.08);border-radius:14px}
.search-box:focus-within{box-shadow:0 6px 22px rgba(200,140,160,.2);transform:translateY(-1px)}
.search-box select{background:linear-gradient(180deg,#F7DDE4,#FBE5EC);border:none;font-weight:600}
.search-box button{background:linear-gradient(135deg,var(--pink),var(--pink-dark));padding:0 22px}
.main-nav a{font-weight:600;padding:8px 4px;position:relative;transition:.15s}
.main-nav a::after{
  content:"";position:absolute;bottom:0;right:0;left:0;height:2px;
  background:linear-gradient(90deg,var(--pink),var(--lilac));
  transform:scaleX(0);transition:.2s;border-radius:2px
}
.main-nav a:hover::after{transform:scaleX(1)}

/* ---- Footer modern ---- */
.site-footer{
  background:linear-gradient(180deg,#FFF7FA,#F5EDF7);
  border-top:none;padding:48px 0 0;margin-top:70px;position:relative
}
.site-footer::before{
  content:"";position:absolute;top:0;right:0;left:0;height:4px;
  background:linear-gradient(90deg,var(--pink),var(--lilac),var(--green))
}
.footer-grid h4{
  color:var(--pink-dark);font-size:15px;font-weight:800;margin:0 0 14px;
  display:inline-block;position:relative
}
.footer-grid h4::after{
  content:"";display:block;width:32px;height:2px;
  background:linear-gradient(90deg,var(--pink),var(--lilac));border-radius:2px;margin-top:6px
}
.footer-grid a{display:block;color:var(--muted);font-size:13px;margin-bottom:8px;transition:.15s}
.footer-grid a:hover{color:var(--pink-dark);transform:translateX(-4px)}
.footer-bottom{
  border-top:1px solid rgba(200,140,160,.15);padding:18px;text-align:center;
  color:var(--muted);font-size:12.5px;margin-top:24px
}

/* ---- Admin sidebar ---- */
.admin-side nav a.active{background:linear-gradient(135deg,#F7DDE4,#EDE5F7)}

/* ---- Empty state ---- */
.empty-state{padding:80px 30px;text-align:center}
.empty-state::before{content:"📭";display:block;font-size:60px;margin-bottom:16px;opacity:.6}
.empty-state p{font-size:15px;color:var(--muted);margin:0 0 20px}

/* ---- Responsive ---- */
@media (max-width:700px){
  .trust{grid-template-columns:1fr 1fr;gap:8px;padding:14px}
  .trust > div{font-size:11.5px;padding:8px}
  .hero{padding:28px 22px}
  .hero h1{font-size:22px}
  .hero p{font-size:14px}
  .pc-body{padding:10px}
  .pc-name{font-size:12.5px}
  .pc-price .now{font-size:14px}
  .btn-add{font-size:12px;padding:8px}
}

/* ═══ PHASE 2.2 — swatch styles ═══ */
.variant-chip.variant-swatch-color {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  /* background handled by inline style */
  position: relative;
  box-shadow: 0 0 0 1px #EFE6EC, 0 2px 6px rgba(0,0,0,.08);
  transition: all .15s;
  cursor: pointer;
  vertical-align: middle;
}
.variant-chip.variant-swatch-color:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px #D46A8F, 0 4px 12px rgba(212,106,143,.25);
}
.variant-chip.variant-swatch-color.active {
  border-color: #fff;
  box-shadow: 0 0 0 3px #D46A8F, 0 4px 14px rgba(212,106,143,.35);
  transform: scale(1.05);
}
.variant-chip.variant-swatch-color.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  pointer-events: none;
}
.variant-chip.variant-swatch-color[data-avail="unavailable"] {
  opacity: .35;
  cursor: not-allowed;
}
.variant-chip.variant-swatch-color[data-avail="unavailable"]::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: #B42318;
  transform: rotate(-45deg);
  transform-origin: center;
}
.variant-chip.variant-swatch-color[data-avail="unavailable"]::after {
  display: none;
}
/* /PHASE 2.2 */

/* ═══ Variant swatch wrapper + label ═══ */
.variant-swatch-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 4px;
}
.variant-swatch-label {
  font-size: 11px;
  color: #4A444F;
  font-weight: 600;
  text-align: center;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.variant-swatch-wrap .variant-chip.variant-swatch-color.active + .variant-swatch-label {
  color: #A53E67;
  font-weight: 800;
}
.variant-swatch-wrap .variant-chip.variant-swatch-color[data-avail="unavailable"] + .variant-swatch-label {
  color: #BBB;
  text-decoration: line-through;
}



/* ═══════════════════════════════════════════════════════════
   PHASE-5.4.1-HEADER — Refined Header styles
   Uses unified Design Tokens.
   ═══════════════════════════════════════════════════════════ */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(8px);
}

/* Top notice strip */
.site-header .top-strip {
  background: linear-gradient(90deg, var(--pink-soft) 0%, var(--lilac-soft) 100%);
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 20px;
  letter-spacing: .2px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.site-header .top-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Main header row */
.site-header .header-main {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  min-height: 72px;
}

/* Brand */
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease;
}
.site-header .brand:hover {
  transform: translateY(-1px);
}
.site-header .brand-logo {
  height: 40px;
  width: auto;
  display: block;
}
.site-header .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.site-header .brand-text strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--pink-dark);
  letter-spacing: -.3px;
}
.site-header .brand-text small {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 3px;
  margin-top: 2px;
}

/* Search area */
.site-header .header-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.site-header .search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  min-width: 0;
}
.site-header .search-box:focus-within {
  border-color: var(--pink);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(212, 106, 143, .10);
}
.site-header .search-box input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 11px 18px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.site-header .search-box input::placeholder {
  color: var(--muted);
  font-weight: 500;
}
.site-header .search-box button {
  background: var(--pink);
  color: #fff;
  border: none;
  padding: 0 20px;
  height: 44px;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  transition: background .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-header .search-box button:hover {
  background: var(--pink-dark);
}

/* Mega menu trigger */
.site-header .mega-trigger {
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--text-soft);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .18s ease;
  flex-shrink: 0;
}
.site-header .mega-trigger:hover {
  background: var(--pink-soft);
  border-color: var(--pink);
  color: var(--pink-dark);
}

/* Main nav */
.site-header .main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 20px 10px;
  border-top: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.site-header .main-nav::-webkit-scrollbar {
  display: none;
}
.site-header .main-nav a {
  position: relative;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-soft);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all .15s ease;
  white-space: nowrap;
}
.site-header .main-nav a:hover {
  background: var(--pink-soft);
  color: var(--pink-dark);
}

/* Mobile */
@media (max-width: 900px) {
  .site-header .header-main {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }
  .site-header .header-search {
    order: 3;
    width: 100%;
    flex-basis: 100%;
  }
  .site-header .brand-text strong { font-size: 16px; }
  .site-header .main-nav {
    padding: 6px 16px 8px;
  }
}

@media (max-width: 600px) {
  .site-header .top-strip {
    font-size: 11.5px;
    padding: 6px 12px;
    gap: 12px;
  }
  .site-header .brand-logo { height: 34px; }
}


/* ═══════════════════════════════════════════════════════════
   PHASE-5.4.2-HOMEPAGE — Refined Homepage styles
   ═══════════════════════════════════════════════════════════ */

/* ─── Hero ─── */
.home-hero,
section.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
  padding: 56px 48px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #FFF4F9 0%, #F8F0FB 50%, #F3FBF6 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 24px 0 44px;
}

section.hero .hero-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 2;
}

section.hero .kicker {
  display: inline-block;
  padding: 7px 16px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 12.5px;
  box-shadow: var(--shadow-sm);
  width: fit-content;
  letter-spacing: .3px;
}

section.hero h1 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.5px;
  margin: 0;
  color: var(--text);
}

section.hero h1 em {
  display: inline-block;
  font-style: normal;
  color: var(--pink-dark);
  font-weight: 900;
  position: relative;
}

section.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 8px;
  background: rgba(212, 106, 143, .18);
  border-radius: 4px;
  z-index: -1;
}

section.hero p {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--text-soft);
  margin: 0;
  max-width: 540px;
}

section.hero .btn-primary {
  align-self: flex-start;
  padding: 14px 32px;
  font-size: 15px;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px rgba(212, 106, 143, .25);
}

/* Hero art */
section.hero .hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

section.hero .hero-blob {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 30px 80px rgba(164, 62, 103, .18);
  animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

section.hero .hero-blob-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -.5px;
  text-shadow: 0 2px 12px rgba(0,0,0,.15);
}

section.hero .hero-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--pink);
  opacity: .5;
}
section.hero .hero-dot.d1 { width: 14px; height: 14px; top: 10%; right: 8%; background: var(--pink); }
section.hero .hero-dot.d2 { width: 10px; height: 10px; bottom: 12%; left: 6%; background: var(--lilac); }
section.hero .hero-dot.d3 { width: 18px; height: 18px; bottom: 30%; right: 20%; background: var(--green); opacity: .35; }

section.hero .hero-image {
  max-width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ─── Block head ─── */
.home-section { margin: 52px 0; }

.block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line-soft);
}

.block-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.block-head h2::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--pink), var(--lilac));
}

.block-head a {
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 13px;
  transition: color .15s ease;
}
.block-head a:hover { color: var(--pink); }

/* ─── Categories scroller ─── */
.cat-scroller {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  text-align: center;
  transition: all .2s ease;
  box-shadow: var(--shadow-sm);
}
.cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--pink);
  box-shadow: var(--shadow);
}
.cat-card .cat-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-soft), var(--lilac-soft));
  background-size: cover;
  background-position: center;
}
.cat-card .cat-img.has-image {
  background-color: transparent;
}
.cat-card span {
  font-weight: 700;
  font-size: 14px;
}
.cat-card small {
  font-size: 11.5px;
  color: var(--muted);
}

/* ─── Trust icons ─── */
.trust-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px 24px;
  margin: 48px 0;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-soft);
}
.trust-icons .ti-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.trust-icons .ti-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 6px;
}
.trust-icons .ti-title {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--text);
}
.trust-icons .ti-sub {
  font-size: 12.5px;
  color: var(--muted);
}

/* ─── Newsletter ─── */
.newsletter {
  background: linear-gradient(135deg, var(--pink-soft), var(--lilac-soft));
  border-radius: var(--radius);
  padding: 40px 32px;
  margin: 48px 0;
  box-shadow: var(--shadow-sm);
}
.newsletter .nl-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.newsletter .nl-copy {
  display: flex;
  align-items: center;
  gap: 18px;
}
.newsletter .nl-icon {
  font-size: 42px;
  line-height: 1;
}
.newsletter .nl-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.newsletter .nl-sub {
  font-size: 13.5px;
  color: var(--text-soft);
}
.newsletter .nl-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.newsletter .nl-form input {
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  background: var(--surface);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  min-width: 240px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.newsletter .nl-form input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(212,106,143,.15);
}
.newsletter .nl-form button {
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--pink);
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.newsletter .nl-form button:hover {
  background: var(--pink-dark);
  transform: translateY(-1px);
}
.newsletter .nl-msg {
  font-size: 12.5px;
  margin-top: 8px;
  width: 100%;
  color: var(--text-soft);
}
.newsletter .nl-msg.ok  { color: var(--green); }
.newsletter .nl-msg.err { color: var(--error); }

/* ─── Brands strip ─── */
.brands-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 0;
}
.brands-strip .brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--text-soft);
  font-weight: 700;
  font-size: 13.5px;
  transition: all .18s ease;
  box-shadow: var(--shadow-sm);
}
.brands-strip .brand-chip:hover {
  border-color: var(--pink);
  color: var(--pink-dark);
  transform: translateY(-2px);
}
.brands-strip .bc-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.brands-strip .bc-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brands-strip .bc-letter {
  font-size: 12px;
  color: var(--pink-dark);
  font-weight: 900;
}

/* ─── Countdown banner ─── */
.countdown-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 32px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--pink) 0%, var(--pink-dark) 100%);
  color: #fff;
  box-shadow: var(--shadow);
  margin: 40px 0;
  flex-wrap: wrap;
}
.countdown-banner .cd-copy {
  display: flex;
  align-items: center;
  gap: 18px;
}
.countdown-banner .cd-emoji {
  font-size: 38px;
  line-height: 1;
}
.countdown-banner .cd-title {
  font-size: 18px;
  font-weight: 800;
}
.countdown-banner .cd-sub {
  font-size: 13px;
  opacity: .9;
}
.countdown-banner .cd-timer {
  display: flex;
  gap: 10px;
}
.countdown-banner .cd-box {
  background: rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-width: 62px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.countdown-banner .cd-num {
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
}
.countdown-banner .cd-lbl {
  display: block;
  font-size: 11px;
  opacity: .85;
  margin-top: 2px;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  section.hero {
    grid-template-columns: 1fr;
    padding: 40px 24px;
    text-align: center;
  }
  section.hero .hero-copy {
    align-items: center;
  }
  section.hero .btn-primary {
    align-self: center;
  }
  section.hero .hero-art {
    min-height: 220px;
  }
  .trust-icons {
    grid-template-columns: repeat(2, 1fr);
    padding: 24px 16px;
  }
  .newsletter {
    padding: 28px 20px;
  }
  .newsletter .nl-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .newsletter .nl-form {
    width: 100%;
  }
  .newsletter .nl-form input {
    flex: 1;
    min-width: 0;
  }
  .countdown-banner {
    padding: 20px 22px;
  }
}


/* ═══════════════════════════════════════════════════════════
   PHASE-5.4.3-PRODUCT-CARD — Refined Product Card styles
   ═══════════════════════════════════════════════════════════ */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: var(--shadow-sm);
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--pink-soft);
  box-shadow: var(--shadow);
}

/* ─── Image area ─── */
.product-card .pc-image {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--lilac-soft) 100%);
  overflow: hidden;
}

.product-card .pc-img-primary,
.product-card .pc-img-secondary {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .35s ease, transform .35s ease;
}

.product-card .pc-img-secondary {
  opacity: 0;
}

.product-card:hover .pc-img-primary {
  opacity: 0;
  transform: scale(1.03);
}

.product-card:hover .pc-img-secondary {
  opacity: 1;
  transform: scale(1.03);
}

/* If only one image, keep visible */
.product-card:not(:has(.pc-img-secondary)):hover .pc-img-primary {
  opacity: 1;
  transform: scale(1.05);
}

/* ─── Badges ─── */
.product-card .pc-badges {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.product-card .badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}

.product-card .badge.bundle {
  background: linear-gradient(135deg, var(--lilac), var(--pink));
  color: #fff;
}

.product-card .badge.discount {
  background: linear-gradient(135deg, #E8557E, var(--pink-dark));
  color: #fff;
}

.product-card .badge.out {
  background: rgba(107, 103, 115, .85);
  color: #fff;
}

/* ─── Image dots ─── */
.product-card .pc-img-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(255,255,255,.85);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.product-card .pc-img-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .4;
  transition: all .2s ease;
}

.product-card .pc-img-dot.active {
  background: var(--pink);
  opacity: 1;
  width: 16px;
  border-radius: 3px;
}

/* ─── Hover actions ─── */
.product-card .pc-hover-actions {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s ease, transform .25s ease;
}

.product-card:hover .pc-hover-actions {
  opacity: 1;
  transform: translateX(0);
}

.product-card .pc-hover-actions button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.95);
  color: var(--text-soft);
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
  padding: 0;
  font-family: var(--font);
}

.product-card .pc-hover-actions button:hover {
  background: var(--pink);
  color: #fff;
  transform: scale(1.08);
}

/* ─── Body ─── */
.product-card .pc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}

.product-card .pc-brand {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.product-card .pc-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
  transition: color .15s ease;
}

.product-card .pc-name:hover {
  color: var(--pink-dark);
}

.product-card .pc-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.product-card .pc-price .old {
  font-size: 12px;
  color: var(--muted);
  text-decoration: line-through;
}

.product-card .pc-price .now {
  font-size: 17px;
  font-weight: 900;
  color: var(--pink-dark);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.product-card .pc-price .now small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* ─── Add-to-cart button ─── */
.product-card .btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  margin-top: 6px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--pink-soft), var(--lilac-soft));
  color: var(--pink-dark);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  border: none;
  transition: all .2s ease;
}

.product-card .btn-add:hover {
  background: linear-gradient(135deg, var(--pink), var(--pink-dark));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212,106,143,.28);
}

.product-card .btn-add svg {
  transition: transform .2s ease;
}

.product-card .btn-add:hover svg {
  transform: translateX(-3px);
}

/* ─── Mobile: hide hover actions (touch) ─── */
@media (hover: none) {
  .product-card .pc-hover-actions {
    opacity: 1;
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════
   PHASE-5.4.4-PRODUCT-DETAIL — Refined Product Detail + Shade
   ═══════════════════════════════════════════════════════════ */

/* ─── Layout ─── */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  margin: 32px 0 48px;
  align-items: start;
}

/* ─── Gallery ─── */
.pd-gallery { position: sticky; top: 130px; }

.pd-slider {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.pd-slider-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--lilac-soft) 100%);
  overflow: hidden;
}

.pd-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
  z-index: 0;
}
.pd-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.pd-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nav buttons */
.pd-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--line-soft);
  color: var(--pink-dark);
  font-size: 22px;
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: all .18s ease;
  padding: 0;
}
.pd-nav:hover {
  background: var(--pink);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.pd-prev { right: 14px; }
.pd-next { left: 14px; }

/* Counter */
.pd-counter {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 10;
  background: rgba(31,27,36,.72);
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

/* Zoom */
.pd-zoom {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--line-soft);
  color: var(--text-soft);
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all .15s ease;
  padding: 0;
}
.pd-zoom:hover {
  background: var(--pink);
  color: #fff;
}

/* Thumbnails strip */
.pd-thumbs-strip {
  display: flex;
  gap: 10px;
  padding: 14px;
  overflow-x: auto;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  scrollbar-width: thin;
}
.pd-thumbs-strip::-webkit-scrollbar { height: 6px; }
.pd-thumbs-strip::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

.pd-thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--bg);
  cursor: pointer;
  padding: 0;
  transition: all .15s ease;
}
.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-thumb:hover {
  border-color: var(--pink-soft);
}
.pd-thumb.active {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(212,106,143,.20);
}

/* Dots (mobile) */
.pd-dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.pd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: all .2s ease;
}
.pd-dot.active {
  background: var(--pink);
  width: 24px;
  border-radius: 4px;
}

/* ─── Info panel ─── */
.pd-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pd-info .pd-brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--pink-dark);
  text-transform: uppercase;
}

.pd-info h1 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

.pd-info .pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.pd-info .pd-rating .stars {
  color: #F0A93B;
  letter-spacing: 2px;
  font-size: 15px;
}
.pd-info .pd-rating .muted {
  color: var(--muted);
  font-size: 12.5px;
}

.pd-info .pd-desc {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-soft);
  margin: 0;
}

.pd-info .pd-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin: 4px 0;
}
.pd-info .pd-price .old {
  font-size: 15px;
  color: var(--muted);
  text-decoration: line-through;
}
.pd-info .pd-price .now {
  font-size: 26px;
  font-weight: 900;
  color: var(--pink-dark);
  letter-spacing: -.5px;
}

/* ─── Variant / Shade Selector ─── */
.pd-variants {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
}
.pd-variants > label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .3px;
}

.variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Swatch wrap */
.variant-swatch-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.variant-chip {
  position: relative;
  min-width: 60px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--text-soft);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.variant-chip:hover {
  border-color: var(--pink);
  color: var(--pink-dark);
  transform: translateY(-1px);
}
.variant-chip.active {
  border-color: var(--pink);
  background: linear-gradient(135deg, var(--pink-soft), var(--lilac-soft));
  color: var(--pink-dark);
  box-shadow: 0 4px 12px rgba(212,106,143,.18);
}

/* Color swatch */
.variant-chip.variant-swatch-color {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 50%;
  border-width: 3px;
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--line);
}
.variant-chip.variant-swatch-color:hover {
  transform: scale(1.10);
  box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--pink);
}
.variant-chip.variant-swatch-color.active {
  box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 3px var(--pink-dark), 0 4px 12px rgba(212,106,143,.25);
}

.variant-swatch-label {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

/* Stock line */
.stock-line {
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0 0;
  min-height: 18px;
  font-weight: 600;
}

/* Restock button */
.restock-btn {
  align-self: flex-start;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  background: var(--pink-soft);
  border-color: var(--pink-soft);
  color: var(--pink-dark);
}
.restock-btn:hover {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}

/* ─── Actions ─── */
.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.pd-actions .qty {
  width: 72px;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: border-color .15s ease;
}
.pd-actions .qty:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(212,106,143,.15);
}

.pd-actions .btn-primary {
  flex: 1;
  min-width: 180px;
  padding: 14px 24px;
  font-size: 15px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(212,106,143,.25);
}
.pd-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(212,106,143,.35);
}

.pd-actions .btn-ghost {
  padding: 12px 18px;
  font-size: 13px;
  border-radius: var(--radius-pill);
}
.pd-actions .btn-ghost:hover {
  background: var(--pink-soft);
  border-color: var(--pink-soft);
  color: var(--pink-dark);
}

/* ─── Tabs ─── */
.pd-tabs {
  margin: 48px 0;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.pd-tabs .tab-head {
  display: flex;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
}
.pd-tabs .tab-head::-webkit-scrollbar { display: none; }

.pd-tabs .tab {
  flex: 1;
  min-width: 120px;
  padding: 16px 20px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: all .18s ease;
  white-space: nowrap;
}
.pd-tabs .tab:hover {
  color: var(--pink-dark);
  background: var(--pink-soft);
}
.pd-tabs .tab.active {
  color: var(--pink-dark);
  background: var(--surface);
}
.pd-tabs .tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--lilac));
  border-radius: 2px;
}

.pd-tabs .tab-body {
  padding: 28px 24px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-soft);
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pd-gallery { position: static; }
  .pd-thumbs-strip { display: none; }
  .pd-dots { display: flex; }
  .pd-nav { width: 38px; height: 38px; font-size: 18px; }
  .pd-info .pd-price .now { font-size: 22px; }
  .pd-actions .btn-primary { min-width: 140px; font-size: 14px; }
  .pd-tabs .tab { padding: 14px 16px; font-size: 13px; }
  .pd-tabs .tab-body { padding: 20px 16px; }
}


/* ═══════════════════════════════════════════════════════════
   PHASE-5.4.5-LISTING — Refined Category + Search + Filters
   ═══════════════════════════════════════════════════════════ */

/* ─── Listing layout ─── */
.listing {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  margin: 24px 0 56px;
  align-items: start;
}

/* ─── Sidebar (filters) ─── */
.listing-side {
  position: sticky;
  top: 130px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.listing-side::-webkit-scrollbar { width: 6px; }
.listing-side::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

/* ─── Main area ─── */
.listing-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ─── Sort bar ─── */
.sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.sort-bar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.sort-bar select {
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color .15s ease;
}
.sort-bar select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(212,106,143,.15);
}

/* ─── Product grid in listing ─── */
.listing-main .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 0;
}

/* ─── Pagination ─── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 32px 0 0;
  flex-wrap: wrap;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: var(--text-soft);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  transition: all .15s ease;
}
.pagination a:hover {
  border-color: var(--pink);
  color: var(--pink-dark);
  background: var(--pink-soft);
  transform: translateY(-1px);
}
.pagination .active,
.pagination span.active {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  box-shadow: 0 4px 12px rgba(212,106,143,.25);
}

/* ─── Empty state ─── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 24px;
  background: var(--surface);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  min-height: 280px;
}
.empty-state p {
  font-size: 15px;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
  max-width: 400px;
  line-height: 1.8;
}
.empty-state .btn-primary {
  border-radius: var(--radius-pill);
  padding: 12px 26px;
}

/* ─── Filters components (shared) ─── */
.listing-side h3,
.listing-side h4 {
  margin: 18px 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.listing-side h3:first-child,
.listing-side h4:first-child {
  margin-top: 0;
}

.listing-side .filter-group {
  margin-bottom: 20px;
}

.listing-side label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
  font-weight: 600;
  transition: color .15s ease;
}
.listing-side label:hover {
  color: var(--pink-dark);
}

.listing-side input[type="checkbox"],
.listing-side input[type="radio"] {
  accent-color: var(--pink);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.listing-side input[type="text"],
.listing-side input[type="number"] {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease;
}
.listing-side input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(212,106,143,.12);
}

.listing-side .btn-primary,
.listing-side button[type="submit"] {
  width: 100%;
  margin-top: 8px;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 800;
}

.listing-side a {
  color: var(--pink-dark);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  margin-top: 6px;
}
.listing-side a:hover {
  color: var(--pink);
}

/* ─── Mobile filter toggle (touch-friendly) ─── */
@media (max-width: 900px) {
  .listing {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .listing-side {
    position: static;
    max-height: none;
    padding: 18px 16px;
  }
  .listing-main .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
}


/* ═══════════════════════════════════════════════════════════
   FIX-MEGA-TRIGGER-WIDTH — allow text inside the trigger
   ═══════════════════════════════════════════════════════════ */

.site-header .mega-trigger {
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 16px 0 14px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font);
  line-height: 1;
  flex-shrink: 0;
}

.site-header .mega-trigger .mega-trigger-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 900px) {
  .site-header .mega-trigger {
    padding: 0 12px;
    font-size: 12.5px;
  }
  .site-header .mega-trigger .mega-trigger-icon {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .site-header .mega-trigger span:not(.mega-trigger-icon) {
    display: none;
  }
  .site-header .mega-trigger {
    padding: 0 12px;
    width: 44px;
    min-width: 44px;
  }
}


/* ═══════════════════════════════════════════════════════════
   PHASE-5.4.6-CART-CHECKOUT — Refined Cart + Checkout + C2C
   ═══════════════════════════════════════════════════════════ */

/* ─── Cart page ─── */
.cart-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 24px 0;
}
.cart-table thead {
  background: var(--bg);
}
.cart-table th {
  padding: 16px 18px;
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-soft);
  border-bottom: 1px solid var(--line-soft);
  letter-spacing: .2px;
}
.cart-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--text);
  vertical-align: middle;
}
.cart-table tr:last-child td {
  border-bottom: none;
}
.cart-table tr:hover td {
  background: rgba(212,106,143,.025);
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cart-item img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}
.cart-item a {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.5;
  display: block;
}
.cart-item a:hover {
  color: var(--pink-dark);
}
.cart-item small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 2px;
}

.cart-qty {
  width: 68px;
  padding: 9px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: border-color .15s ease;
}
.cart-qty:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(212,106,143,.12);
}

.remove-btn {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.remove-btn:hover {
  background: #FFE8EF;
  border-color: var(--error);
  color: var(--error);
}

/* Cart summary */
.cart-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px;
  background: linear-gradient(135deg, var(--pink-soft), var(--lilac-soft));
  border-radius: var(--radius);
  margin: 20px 0 48px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.cart-summary > span {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
}
.cart-summary > span:last-of-type {
  font-size: 18px;
  color: var(--pink-dark);
  font-weight: 900;
}
.cart-summary-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.cart-summary-actions .btn-primary {
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
}
.cart-summary-actions .btn-ghost-danger {
  background: transparent;
  border: 1.5px solid rgba(196,30,90,.35);
  color: var(--error);
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
}
.cart-summary-actions .btn-ghost-danger:hover {
  background: rgba(196,30,90,.08);
  border-color: var(--error);
}

/* ─── Checkout page ─── */
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 28px;
  margin: 24px 0 48px;
  align-items: start;
}
.checkout-grid > div:first-child {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.checkout-grid h3 {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

/* Address cards */
.addr-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: var(--bg);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .18s ease;
}
.addr-card:hover {
  border-color: var(--pink);
  background: var(--pink-soft);
}
.addr-card input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--pink);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.addr-card input[type="radio"]:checked + div {
  color: var(--pink-dark);
}
.addr-card > div {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-soft);
  flex: 1;
}
.addr-card > div b {
  color: var(--text);
  font-weight: 800;
}

/* Form labels in checkout */
.checkout-grid label {
  display: block;
  margin: 16px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.checkout-grid label select,
.checkout-grid label input[type="text"],
.checkout-grid label input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.checkout-grid label select:focus,
.checkout-grid label input:focus {
  border-color: var(--pink);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(212,106,143,.12);
}
.checkout-grid label textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  min-height: 80px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: border-color .15s ease;
}
.checkout-grid label textarea:focus {
  border-color: var(--pink);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(212,106,143,.12);
}

/* C2C preview block */
.c2c-preview {
  padding: 18px 20px;
  margin: 18px 0;
  background: linear-gradient(135deg, var(--pink-soft), var(--lilac-soft));
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212,106,143,.15);
}
.c2c-preview .c2c-title {
  font-weight: 800;
  color: var(--pink-dark);
  font-size: 14px;
  margin-bottom: 10px;
}
.c2c-preview .c2c-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text-soft);
}
.c2c-preview .c2c-row b {
  color: var(--text);
  font-weight: 800;
}
.c2c-preview .c2c-card {
  font-family: 'Courier New', monospace;
  letter-spacing: 1.5px;
  font-size: 14px;
  color: var(--pink-dark);
  font-weight: 900;
}
.c2c-preview .c2c-copy {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.c2c-preview .c2c-copy:hover {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}
.c2c-preview .c2c-hint {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 10px;
  line-height: 1.7;
  opacity: .85;
}

/* Order summary (aside) */
.order-summary {
  position: sticky;
  top: 130px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.order-summary h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.order-summary ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  max-height: 280px;
  overflow-y: auto;
}
.order-summary ul li {
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-soft);
  border-bottom: 1px dashed var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.order-summary ul li:last-child {
  border-bottom: none;
}
.order-summary p {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.order-summary p:last-child {
  color: var(--pink-dark);
  font-size: 17px;
  font-weight: 900;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

/* ─── Card-to-Card page ─── */
.c2c-wrap {
  max-width: 720px;
  margin: 32px auto 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.c2c-success {
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(135deg, var(--pink-soft), var(--lilac-soft));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.c2c-success .c2c-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #3DA073);
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(79,178,134,.35);
}
.c2c-success h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}
.c2c-success p {
  margin: 6px 0;
  font-size: 14.5px;
  color: var(--text-soft);
}
.c2c-success .c2c-amount {
  font-size: 22px;
  font-weight: 900;
  color: var(--pink-dark);
  letter-spacing: -.5px;
}
.c2c-success .c2c-deadline {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--pink-dark);
  box-shadow: var(--shadow-sm);
}
.c2c-success .c2c-deadline.expired {
  background: #FFE8EF;
  color: var(--error);
}

.c2c-card-box {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.c2c-card-box h3 {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.c2c-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14px;
}
.c2c-info-row:last-child { border-bottom: none; }
.c2c-info-row span {
  color: var(--muted);
  font-weight: 600;
}
.c2c-info-row b {
  color: var(--text);
  font-weight: 800;
}
.c2c-big-number {
  font-family: 'Courier New', monospace;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--pink-dark);
  font-weight: 900;
}
.c2c-copy-btn {
  background: var(--pink-soft);
  border: none;
  color: var(--pink-dark);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s ease;
}
.c2c-copy-btn:hover {
  background: var(--pink);
  color: #fff;
}

.c2c-steps {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.c2c-steps h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 800;
}
.c2c-steps ol {
  padding-right: 22px;
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: var(--text-soft);
}
.c2c-steps ol li {
  padding: 4px 0;
}
.c2c-steps ol li b {
  color: var(--pink-dark);
  font-weight: 800;
}

.c2c-warning {
  padding: 16px 20px;
  background: #FFF8E1;
  border: 1px solid rgba(224,185,75,.35);
  border-right: 4px solid var(--warning);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.8;
  color: #6A5213;
}
.c2c-warning b {
  color: #6A5213;
}

.c2c-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.c2c-actions .btn-primary {
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 800;
}
.c2c-actions .btn-ghost {
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  .order-summary {
    position: static;
  }
  .cart-table th:nth-child(2),
  .cart-table td:nth-child(2),
  .cart-table th:nth-child(4),
  .cart-table td:nth-child(4) {
    display: none;
  }
}

@media (max-width: 600px) {
  .cart-table {
    font-size: 12.5px;
  }
  .cart-table th,
  .cart-table td {
    padding: 10px 8px;
  }
  .cart-item img {
    width: 52px;
    height: 52px;
  }
  .cart-summary {
    padding: 18px;
  }
  .c2c-big-number {
    font-size: 16px;
    letter-spacing: 1px;
  }
  .c2c-actions {
    flex-direction: column;
    width: 100%;
  }
  .c2c-actions .btn-primary,
  .c2c-actions .btn-ghost {
    width: 100%;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════
   PHASE-5.4.6.1-CHECKOUT-CSS — Redesigned Checkout layout
   ═══════════════════════════════════════════════════════════ */

/* ─── Checkout grid ─── */
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 24px;
  margin: 20px 0 56px;
  align-items: start;
}

.checkout-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ─── Step block ─── */
.co-step {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 22px;
  box-shadow: var(--shadow-sm);
}

.co-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.co-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--lilac));
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(212,106,143,.25);
  flex-shrink: 0;
}
.co-step-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

/* ─── Address grid (compact 2-column) ─── */
.addr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.addr-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .18s ease;
}
.addr-card:hover {
  border-color: var(--pink-soft);
  background: var(--surface);
}
.addr-card input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--pink);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.addr-card:has(input[type="radio"]:checked) {
  border-color: var(--pink);
  background: linear-gradient(135deg, var(--pink-soft), var(--lilac-soft));
  box-shadow: 0 4px 14px rgba(212,106,143,.15);
}
.addr-info {
  flex: 1;
  min-width: 0;
}
.addr-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.addr-name b {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.addr-phone {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  direction: ltr;
  font-family: 'Courier New', monospace;
}
.addr-line {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.co-empty {
  text-align: center;
  padding: 32px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 2px dashed var(--line);
}
.co-empty p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 600;
}

/* ─── 2-column fields ─── */
.co-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 4px;
}

.co-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.co-field-full { margin-top: 14px; }

.co-field > span {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .2px;
}

.co-field select,
.co-field input[type="text"],
.co-field input[type="number"],
.co-field input:not([type]),
.co-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.co-field select:focus,
.co-field input:focus,
.co-field textarea:focus {
  border-color: var(--pink);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(212,106,143,.10);
}
.co-field textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.7;
}

/* ─── C2C preview (compact) ─── */
.c2c-preview {
  margin-top: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--pink-soft), var(--lilac-soft));
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212,106,143,.15);
}
.c2c-preview-head {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--pink-dark);
  margin-bottom: 12px;
}
.c2c-preview-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c2c-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.c2c-preview-row > span {
  color: var(--muted);
  font-weight: 600;
  min-width: 80px;
}
.c2c-preview-row > b {
  color: var(--text);
  font-weight: 800;
}
.c2c-preview-row .c2c-card {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  color: var(--pink-dark);
  font-size: 14px;
}
.c2c-preview-row .c2c-copy {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-soft);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.c2c-preview-row .c2c-copy:hover {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}
.c2c-preview-hint {
  font-size: 11.5px;
  color: var(--text-soft);
  margin-top: 10px;
  line-height: 1.6;
  opacity: .85;
}

/* ─── Actions ─── */
.co-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 0 0;
}
.co-actions .co-submit {
  flex: 1;
  min-width: 220px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(212,106,143,.28);
}
.co-actions .co-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(212,106,143,.35);
}
.co-actions .co-cancel {
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--error);
  border-color: rgba(196,30,90,.35);
}
.co-actions .co-cancel:hover {
  background: #FFE8EF;
  border-color: var(--error);
}

/* ─── Order summary (sidebar) ─── */
.order-summary {
  position: sticky;
  top: 130px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
}
.order-summary h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.os-items {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  max-height: 260px;
  overflow-y: auto;
}
.os-items li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 13px;
}
.os-items li:last-child { border-bottom: none; }
.os-name {
  color: var(--text-soft);
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.os-price {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.os-totals {
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.os-totals p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  font-size: 13.5px;
}
.os-totals p span {
  color: var(--muted);
  font-weight: 600;
}
.os-totals p b {
  color: var(--text);
  font-weight: 800;
}
.os-totals p:last-child b {
  color: var(--pink-dark);
  font-size: 16px;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  .order-summary {
    position: static;
    order: -1;
  }
  .co-row-2col {
    grid-template-columns: 1fr;
  }
  .co-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .co-actions .co-submit,
  .co-actions .co-cancel {
    width: 100%;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════
   FIX-CHECKOUT-BUTTONS-EQUAL — consistent button sizing
   ═══════════════════════════════════════════════════════════ */

.co-actions {
  display: flex;
  gap: 12px;
  align-items: stretch;   /* equal height */
  flex-wrap: wrap;
  padding: 4px 0 0;
}

.co-actions .co-submit,
.co-actions .co-cancel {
  /* identical height, padding, font-size, radius */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
  text-decoration: none;
  white-space: nowrap;
  transition: all .18s ease;
}

/* Primary (submit) — grows to fill space */
.co-actions .co-submit {
  flex: 1 1 auto;
  min-width: 200px;
  background: var(--pink);
  color: #fff;
  border: none;
  box-shadow: 0 10px 26px rgba(212,106,143,.28);
  cursor: pointer;
}
.co-actions .co-submit:hover {
  background: var(--pink-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(212,106,143,.35);
}
.co-actions .co-submit:active {
  transform: translateY(0);
}

/* Ghost (cancel) — fixed, but same height */
.co-actions .co-cancel {
  flex: 0 0 auto;
  background: var(--surface);
  color: var(--error);
  border: 1.5px solid rgba(196,30,90,.35);
}
.co-actions .co-cancel:hover {
  background: #FFE8EF;
  border-color: var(--error);
}

/* ─── Mobile: stack, full-width ─── */
@media (max-width: 700px) {
  .co-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .co-actions .co-submit,
  .co-actions .co-cancel {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 6.16 v2 — Variant chip active + shake (D-VAR-01, D-VAR-06)
   ═══════════════════════════════════════════════════════════════ */
.variant-chip { position: relative !important; }
.variant-chip.active {
  outline: 3px solid #D46A8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 4px 14px rgba(212, 106, 143, .35) !important;
  transform: scale(1.08) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.variant-chip.active::after {
  content: "\2713" !important;   /* check mark ✓ */
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  width: 18px !important;
  height: 18px !important;
  background: #D46A8F !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
.variant-swatch-color.active {
  outline-color: #A53E67 !important;
}

@keyframes chip-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
.shake-warn {
  animation: chip-shake .35s ease-in-out 2 !important;
  box-shadow: 0 0 0 4px rgba(212, 106, 143, .25) !important;
}