/* ============ ADMIN PANEL ============ */
.admin-body{background:#ffffff; min-height:100vh;}
.admin-shell{display:flex; min-height:100vh;}

/* Platform owner UI uses the Ecom SaaS blue identity instead of a tenant's
   storefront palette. Status colours (success, warning, danger) stay intact. */
.master-admin-theme{
  --forest:#173d5d;
  --forest-2:#245a7d;
  --forest-deep:#102a43;
  --cream:#f4f9fc;
  --cream-2:#e8f1f7;
  --tan:#d7e4ed;
  --brown:#14213d;
  --brown-soft:#5b7088;
  --shadow:0 16px 32px -16px rgba(16,42,67,.3);
}
.master-admin-theme .admin-form input:focus,
.master-admin-theme .admin-form select:focus,
.master-admin-theme .admin-form textarea:focus{
  border-color:#173d5d;
  box-shadow:0 0 0 3px rgba(23,61,93,.1);
}

.admin-sidebar{
  width:230px; background:var(--forest-deep); color:var(--cream); flex-shrink:0;
  display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh;
  overflow-y:auto;
}
.admin-brand{display:flex; align-items:center; gap:10px; padding:0 8px 24px; font-family:'Fraunces',serif; font-weight:700; font-size:15px; flex-shrink:0;}
.admin-brand .brand-mark{width:34px; height:34px;}
.admin-brand small{display:block; font-size:10px; font-weight:400; opacity:0.6; font-family:'Work Sans',sans-serif;}
/* min-height:0 lets this flex child actually shrink and scroll instead of
   silently overflowing the fixed-height sidebar (behavior that used to
   depend on whether the page itself was tall enough to scroll) */
.admin-nav{display:flex; flex-direction:column; gap:2px; flex:1; min-height:0; overflow-y:auto;}
.admin-nav a{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-size:13.5px; font-weight:600; color:rgba(244,234,210,0.85); text-decoration:none;}
.admin-nav a svg{width:17px; height:17px; stroke-width:1.7;}
.admin-nav a:hover, .admin-nav a.active{background:rgba(244,234,210,0.12); color:#ffffff;}

/* Collapsible parent groups (WordPress-style) */
.admin-nav-group{display:flex; flex-direction:column;}
.admin-nav-parent{display:flex; align-items:stretch; gap:2px;}
.admin-nav-parent-link{
  flex:1; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px;
  font-size:13.5px; font-weight:600; color:rgba(244,234,210,0.85);
  background:none; border:none; cursor:pointer; text-align:left; font-family:inherit;
}
.admin-nav-parent-link span{flex:1;}
.admin-nav-parent-link svg{width:17px; height:17px; stroke-width:1.7; flex-shrink:0;}
.admin-nav-parent-link:hover, .admin-nav-parent-link.active{background:rgba(244,234,210,0.12); color:#ffffff;}
.admin-nav-toggle{
  flex-shrink:0; width:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:rgba(244,234,210,0.7); cursor:pointer; border-radius:8px;
}
.admin-nav-toggle:hover{background:rgba(244,234,210,0.12); color:#ffffff;}
.admin-nav-chevron{width:15px; height:15px; stroke-width:2; transition:transform .2s ease;}
.admin-nav-group.open .admin-nav-chevron{transform:rotate(180deg);}

.admin-nav-children-wrap{display:grid; grid-template-rows:0fr;}
.admin-nav.admin-nav-ready .admin-nav-children-wrap{transition:grid-template-rows .2s ease;}
.admin-nav-group.open .admin-nav-children-wrap{grid-template-rows:1fr;}
.admin-nav-children{overflow:hidden; min-height:0; display:flex; flex-direction:column; gap:2px;}
.admin-nav-children a{padding:9px 12px 9px 34px; font-size:12.5px; font-weight:500; color:rgba(244,234,210,0.85);}
.admin-nav-children a:hover, .admin-nav-children a.active{color:#ffffff; background:rgba(244,234,210,0.12);}
.admin-nav-children a svg{width:15px; height:15px;}
.admin-foot{border-top:1px solid rgba(244,234,210,0.15); padding-top:16px; display:flex; flex-direction:column; gap:8px; font-size:12.5px; flex-shrink:0;}
.admin-foot a{color:var(--gold-soft);}
/* Soft "glass card" — same treatment as .admin-sidebar-alert below, so both
   cards this sidebar can show feel like one family instead of two different
   apps. Sits above the .admin-foot divider line, not inside it. */
.admin-foot-expiry-card{
  flex-shrink:0; display:flex; align-items:center; gap:10px;
  margin-top:10px; padding:12px; border-radius:10px;
  background:rgba(244,234,210,0.08); border:1px solid rgba(244,234,210,0.16);
}
.admin-foot-expiry-card.is-due{background:rgba(240,185,94,0.14); border-color:rgba(240,185,94,0.35);}
.admin-foot-expiry-icon{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:rgba(244,234,210,0.1);
}
.admin-foot-expiry-icon svg{width:16px; height:16px; stroke:var(--gold-soft);}
.admin-foot-expiry-card.is-due .admin-foot-expiry-icon{background:rgba(240,185,94,0.18);}
.admin-foot-expiry-card.is-due .admin-foot-expiry-icon svg{stroke:#F0B95E;}
.admin-foot-expiry-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.admin-foot-expiry-label{font-size:11px; color:rgba(244,234,210,0.65);}
.admin-foot-expiry-value{font-size:13px; font-weight:700; line-height:1.3; color:rgba(244,234,210,0.95);}
.admin-foot-expiry-card.is-due .admin-foot-expiry-value{color:#F0B95E;}
/* Plan Expired banner — spans the top of every admin page's main content
   (not just the sidebar) so it can't be missed or hidden behind the
   collapsed mobile nav. The admin panel itself is never gated by this; see
   store_access_blocked() for what actually goes down (the public site). */
.admin-expired-banner{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin-bottom:22px; padding:16px 18px; border-radius:12px;
  background:#FFF3CD; border:1px solid #F0DDA0;
}
.admin-expired-banner svg{width:22px; height:22px; stroke:#7A5B00; flex-shrink:0;}
.admin-expired-banner-body{display:flex; flex-direction:column; gap:3px; flex:1; min-width:220px;}
.admin-expired-banner-body strong{font-size:14.5px; color:#7A5B00;}
.admin-expired-banner-body span{font-size:12.5px; line-height:1.5; color:#8a6a1a;}
.admin-expired-banner-btn{
  flex-shrink:0; background:#7A5B00; color:#FFF3CD; border-radius:9px;
  padding:10px 20px; font-size:13px; font-weight:700; text-decoration:none;
}
.admin-expired-banner-btn:hover{background:#5f4600;}
.admin-mobile-nav-toggle{
  display:none; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0;
  background:none; border:1px solid rgba(244,234,210,0.3); border-radius:8px; color:var(--cream); cursor:pointer;
}
.admin-mobile-nav-toggle svg{width:16px; height:16px; transition:transform .2s ease;}
.admin-sidebar.mobile-nav-open .admin-mobile-nav-toggle svg{transform:rotate(180deg);}


.admin-main{flex:1; padding:32px 36px; min-width:0; background:#ffffff;}

/* Persistent top bar (Visit Store + account menu) above every admin page's
   content — quick access that doesn't depend on scrolling the sidebar down
   to the bottom. See admin/includes/header.php / master-admin/includes/header.php. */
.admin-topbar{display:flex; justify-content:flex-end; align-items:center; gap:18px; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid #cbd5e1;}
.admin-topbar-link{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--brown-soft); text-decoration:none;}
.admin-topbar-link:hover{color:var(--forest);}
.admin-topbar-link .ic{width:16px; height:16px;}
.admin-topbar-account{position:relative;}
.admin-topbar-account-btn{
  display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--brown); padding:5px 8px 5px 5px; border-radius:999px;
}
.admin-topbar-account-btn:hover{background:var(--cream-2);}
.admin-topbar-account-btn .ic{width:14px; height:14px; color:var(--brown-soft); flex-shrink:0;}
.admin-topbar-avatar{
  width:28px; height:28px; border-radius:50%; background:var(--forest); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.admin-topbar-avatar .ic{width:15px; height:15px; color:var(--white);}
.admin-topbar-dropdown{
  display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:170px;
  background:var(--white); border-radius:10px; box-shadow:0 12px 24px -12px rgba(0,0,0,0.25); padding:6px; z-index:80;
}
.admin-topbar-account.open .admin-topbar-dropdown{display:block;}
.admin-topbar-dropdown a{display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:8px; font-size:13px; font-weight:600; color:var(--brown); text-decoration:none;}
.admin-topbar-dropdown a:hover{background:var(--cream-2); color:var(--forest-deep);}
.admin-topbar-dropdown a .ic{width:15px; height:15px; flex-shrink:0;}
@media (max-width:600px){
  .admin-topbar-name{display:none;}
}

.admin-topline{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.admin-topline h1{font-size:24px;}
.admin-topline .sub{font-size:13px; color:var(--brown-soft); margin-top:4px;}

.admin-stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:32px;}
.admin-stat{background:var(--white); border-radius:16px; padding:20px; box-shadow:0 10px 20px -16px rgba(28,46,22,0.25);}
.admin-stat span{font-size:11.5px; color:var(--brown-soft); font-weight:600;}
.admin-stat b{display:block; font-family:'Fraunces',serif; font-size:26px; color:var(--forest-deep); margin-top:6px;}

.admin-panel{background:var(--white); border-radius:16px; padding:24px; box-shadow:0 10px 20px -16px rgba(28,46,22,0.2); margin-bottom:24px;}
.admin-panel h3{font-size:16px; margin-bottom:16px;}

/* New-client launch checklist — shown only while a store has no catalogue
   or orders, then naturally gives way to the normal operations dashboard. */
.starter-launch-card{background:linear-gradient(135deg,#f8fbff,#eef4ff);border:1px solid #d8e4ff;border-radius:18px;padding:26px;margin:0 0 26px;box-shadow:0 14px 30px -24px rgba(37,99,235,.45)}
.starter-launch-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.starter-eyebrow{font-size:10px;letter-spacing:.12em;font-weight:800;color:#2563eb}.starter-launch-head h2{margin:5px 0 6px;font-size:24px}.starter-launch-head p{margin:0;color:var(--brown-soft);font-size:13px}.starter-launch-head>strong{white-space:nowrap;background:#dbeafe;color:#1d4ed8;border-radius:999px;padding:8px 11px;font-size:12px}.starter-progress{height:8px;background:#dbeafe;border-radius:99px;margin:20px 0}.starter-progress span{display:block;height:100%;background:#2563eb;border-radius:inherit;transition:width .2s}.starter-step-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.starter-step{display:flex;gap:10px;padding:14px 11px;border:1px solid #dbe3f3;border-radius:12px;background:#fff;text-decoration:none;color:var(--brown);min-width:0}.starter-step:hover{border-color:#2563eb;transform:translateY(-1px)}.starter-step-number{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:#eff6ff;color:#2563eb;font-weight:800;font-size:12px}.starter-step.complete .starter-step-number{background:#dcfce7;color:#15803d}.starter-step b,.starter-step small,.starter-step em{display:block}.starter-step b{font-size:12px}.starter-step small{font-size:10.5px;line-height:1.35;color:var(--brown-soft);margin:4px 0}.starter-step em{font-style:normal;font-size:10px;font-weight:800;color:#2563eb}.starter-launch-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.starter-launch-actions form{margin:0}.starter-notice{margin:-8px 0 18px}
@media (max-width:980px){.starter-step-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.starter-launch-card{padding:18px}.starter-launch-head{display:block}.starter-launch-head>strong{display:inline-block;margin-top:12px}.starter-step-grid{grid-template-columns:1fr}.starter-launch-actions{align-items:stretch;flex-direction:column}.starter-launch-actions form,.starter-launch-actions .btn{width:100%}.starter-launch-actions .btn{text-align:center}}

/* Store-functionality lock — shown instead of a page's real content when
   the client has no active subscription (see admin_feature_locked(),
   admin/includes/admin_auth.php). The sidebar/menu above it is untouched. */
.admin-feature-locked{max-width:480px; margin:40px auto; padding:40px 32px; text-align:center;}
.admin-feature-locked-icon{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:50%; background:var(--cream-2); margin-bottom:18px;
}
.admin-feature-locked-icon .ic{width:24px; height:24px; color:var(--forest);}
.admin-feature-locked h2{font-size:19px; margin:0 0 10px;}
.admin-feature-locked p{font-size:13.5px; line-height:1.6; color:var(--brown-soft); margin:0 0 22px;}

.support-panel{max-width:480px;}
.support-list{list-style:disc; padding-left:20px; display:flex; flex-direction:column; gap:6px;}
.support-list a{color:var(--forest); font-weight:600; font-size:14px;}
.support-list a:hover{text-decoration:underline;}

.admin-table-wrapper{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.admin-table{width:100%; border-collapse:collapse; font-size:13px; min-width:560px;}
.admin-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--brown-soft); padding:10px 12px; border-bottom:1px solid rgba(74,58,34,0.12);}
.admin-table td{padding:12px; border-bottom:1px solid rgba(74,58,34,0.08); vertical-align:middle;}
.admin-table tr:hover td{background:var(--cream-2);}
.admin-table .row-actions{display:flex; gap:10px;}
.admin-table .row-actions a, .admin-table .row-actions button{font-size:12px; font-weight:700; color:var(--forest); background:none; border:none; cursor:pointer; padding:0;}
.admin-table .row-actions .danger{color:#C4463B;}
button.danger{background:none; border:none; color:#C4463B; font-size:12px; font-weight:700; cursor:pointer; padding:0;}

/* =========================================================
   ORDERS DASHBOARD
========================================================= */
.orders-dashboard{display:flex; flex-direction:column; gap:20px;}

.orders-header{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;}
.orders-title h1{font-size:24px; margin:0;}
.orders-subtitle{font-size:13px; color:var(--brown-soft); margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.filter-badge{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; background:var(--forest); color:var(--white); font-size:11px; font-weight:700; text-transform:capitalize;}
.btn-sm{padding:8px 16px; font-size:12px;}
.orders-clear-filter{align-self:flex-end;}

.orders-toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;}

.search-form{display:flex; align-items:center; gap:8px; flex:1; max-width:420px;}
.search-wrapper{position:relative; flex:1; display:flex; align-items:center;}
.search-icon{
  position:absolute; left:12px; width:18px; height:18px;
  stroke:var(--brown-soft); pointer-events:none;
}
.search-wrapper input{
  width:100%; border:1px solid rgba(74,58,34,0.2); border-radius:10px;
  padding:10px 12px 10px 42px; font-size:13px; font-family:inherit; background:#fff;
}
.search-wrapper input:focus{outline:none; border-color:var(--forest);}
.products-search-form{min-width:48px;max-width:420px;}.products-search-form .search-wrapper input{width:48px;flex:0 0 48px;padding-left:39px;padding-right:0;color:transparent;cursor:pointer;transition:width .18s ease,color .18s ease;}.products-search-form .search-wrapper input::placeholder{color:transparent;}.products-search-form .search-wrapper:focus-within input{width:260px;flex-basis:260px;padding-right:12px;color:var(--brown);cursor:text;}.products-search-form .search-wrapper:focus-within input::placeholder{color:var(--brown-soft);}

.export-dropdown{position:relative; flex:0 0 auto;}
.export-trigger{display:inline-flex; align-items:center; gap:6px;}
.export-ic{width:16px; height:16px; stroke:var(--brown-soft); flex-shrink:0;}
.btn-ic{width:16px; height:16px; stroke:currentColor;}
.export-menu{
  position:absolute; top:100%; right:0; margin-top:6px;
  background:var(--white); border-radius:10px; box-shadow:0 12px 24px -12px rgba(0,0,0,0.2);
  border:1px solid rgba(74,58,34,0.12); padding:6px; min-width:160px;
  display:none; flex-direction:column; z-index:10;
}
.export-menu.visible{display:flex;}
.export-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:8px; font-size:13px; color:var(--brown); text-decoration:none;
  transition:background .15s ease;
}
.export-item:hover{background:var(--cream-2); color:var(--forest-deep);}

/* Filter Dropdown */
.filter-dropdown{flex:0 0 auto;}
.filter-form{margin:0;}
.filter-select{
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; padding:10px 36px 10px 12px;
  font-family:inherit; font-size:13px; background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A3A22' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size:16px; appearance:none; cursor:pointer; min-width:180px;
}
.filter-select:focus{outline:none; border-color:var(--forest); background-color:#fff;}

/* Date range filter */
.date-range-form{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.date-range-form input[type="date"]{
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; padding:9px 10px;
  font-family:inherit; font-size:13px; background:var(--white); color:var(--brown);
}
.date-range-form input[type="date"]:focus{outline:none; border-color:var(--forest);}

.status-filter-tabs{
  display:flex; gap:8px; overflow-x:auto; padding:4px; border-radius:14px;
  background:var(--white); box-shadow:0 10px 20px -16px rgba(28,46,22,0.2);
  -webkit-overflow-scrolling:touch;
}
.status-tab{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; font-size:13px; font-weight:600; color:var(--brown-soft);
  white-space:nowrap; transition:background .15s ease, color .15s ease;
  border:1.5px solid transparent;
}
.status-tab:hover{background:#f1f5f9; color:#0f172a;}
.status-tab.active{background:#2563eb !important; color:#ffffff !important; border-color:#1d4ed8 !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;}
.tab-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; font-size:10.5px; font-weight:700; background:rgba(74,58,34,0.1); color:var(--brown-soft);
}
.status-tab.active .tab-count{background:rgba(255,255,255,0.25) !important; color:#ffffff !important;}

.orders-card{
  background:var(--white); border-radius:16px; padding:0; overflow:hidden;
  box-shadow:0 10px 20px -16px rgba(28,46,22,0.2);
}
.orders-table-wrapper{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.orders-table{width:100%; border-collapse:collapse; font-size:13px; min-width:760px;}
.orders-table thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--brown-soft);
  padding:12px 14px; border-bottom:1px solid rgba(74,58,34,0.12); background:var(--cream-2); font-weight:700;
}
.orders-table tbody td{padding:12px 14px; border-bottom:1px solid rgba(74,58,34,0.06); vertical-align:top;}
.orders-table tbody tr:last-child td{border-bottom:none;}

/* min-width hints keep columns from cramping — the browser still sizes
   them to fit content, so nothing gets clipped. */
.orders-table .col-order{min-width:110px;}
.orders-table .col-customer{min-width:190px;}
.orders-table .col-date{min-width:130px;}
.orders-table .col-total{min-width:80px; text-align:right;}
.orders-table .col-status{min-width:100px; text-align:center;}
.orders-table .col-actions{min-width:70px; text-align:right;}

.order-code{display:flex; flex-direction:column; gap:3px;}
.order-code code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; font-weight:700; color:var(--forest-deep);}
.payment-ref{font-size:10px; color:var(--brown-soft); font-family:ui-monospace, monospace; display:inline-block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:top;}

.customer-info{display:flex; flex-direction:column; gap:2px;}
.customer-name{font-weight:600; font-size:13px; color:var(--brown); display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:top;}
.customer-phone{font-size:11.5px; color:var(--brown-soft);}
.customer-email{font-size:11.5px; color:var(--brown-soft); display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:top;}
.order-date{font-size:12.5px; color:var(--brown); white-space:nowrap;}
.order-time{font-size:11px; color:var(--brown-soft);}

.order-total{font-weight:700; color:var(--forest-deep); font-size:13.5px; white-space:nowrap;}

/* Badges */
.badge{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:10.5px; font-weight:700; white-space:nowrap;}
.badge-status.badge-pending{background:#FDF0D5; color:#8C6A1B;}
.badge-status.badge-confirmed{background:#E1EEFB; color:#1B5A8C;}
.badge-status.badge-packed{background:#EEE6FB; color:#5A3B8C;}
.badge-status.badge-shipped{background:#FCE9E4; color:#B85C2E;}
.badge-status.badge-delivered{background:#E1F3E4; color:#1E7A32;}
.badge-status.badge-cancelled{background:#FCE3E1; color:#B0291B;}

.badge-payment.badge-pending{background:#FDF0D5; color:#8C6A1B;}
.badge-payment.badge-paid{background:#E3F3E3; color:#1E7D34;}
.badge-payment.badge-failed{background:#FCE3E1; color:#B0291B;}

.badge-type{background:#EEE6FB; color:#5A3B8C;}
.badge-hidden{background:#FCE9E4; color:#B85C2E;}

/* Collapsible column cards — keeps long footers/headers manageable to edit */
.accordion-card{padding:0; overflow:hidden;}
.accordion-card > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:20px 24px; flex-wrap:wrap;
}
.accordion-card > summary::-webkit-details-marker{display:none;}
.accordion-summary-main{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:15px; flex:1; min-width:0;}
.accordion-summary-main b{font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px;}
.accordion-summary-actions{display:flex; align-items:center; gap:14px;}
.accordion-chevron{font-size:13px; color:var(--brown-soft); transition:transform .15s ease; flex-shrink:0;}
.accordion-card[open] .accordion-chevron{transform:rotate(180deg);}
.accordion-card[open] > summary{border-bottom:1px solid rgba(74,58,34,0.1);}
.accordion-body{padding:20px 24px 24px;}

/* Status update form */
.status-update-form{margin:0;}
.status-update-form select{
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; padding:8px 10px; font-family:inherit; font-size:12.5px;
  outline:none; background:var(--cream-2); color:var(--brown); cursor:pointer; min-width:110px;
}
.status-update-form select:focus{border-color:var(--forest); background:var(--white);}

/* Row actions */
.row-actions{display:flex; gap:8px; align-items:center;}
.action-btn{
  font-size:12px; font-weight:700; padding:7px 12px; border-radius:8px; cursor:pointer; border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease; white-space:nowrap;
}
.action-view{background:var(--cream-2); color:var(--forest-deep);}
.action-view:hover{background:var(--forest); color:var(--white);}
.action-delete{background:rgba(196,70,59,0.08); color:#C4463B; border-color:rgba(196,70,59,0.2);}
.action-delete:hover{background:#C4463B; color:var(--white); border-color:#C4463B;}

/* Empty state */
.orders-empty{text-align:center; padding:56px 24px; display:flex; flex-direction:column; align-items:center; gap:8px;}
.orders-empty .empty-icon{width:52px; height:52px; color:var(--brown-soft); opacity:0.4; margin-bottom:8px;}
.orders-empty h3{font-size:17px; color:var(--forest-deep); margin:0;}
.orders-empty p{font-size:13px; color:var(--brown-soft); margin:0;}

@media (max-width:900px){
  .orders-header{flex-direction:column; align-items:stretch;}
  .orders-header .btn{width:100%;}
}
@media (max-width:600px){
  .status-tab{padding:9px 11px; font-size:12px;}
  .orders-table thead th{padding:10px 12px; font-size:10px;}
  .orders-table tbody td{padding:10px 12px;}
  /* Secondary detail — still visible on the order's own View page, just
     hidden here to keep rows compact on small screens. */
  .customer-email, .payment-ref{display:none;}
}

/* Bulk Actions */
.bulk-orders-form{margin:0;}
.bulk-actions-bar{
  display:none; align-items:center; gap:12px; padding:12px 16px;
  background:var(--cream-2); border:1px solid rgba(74,58,34,0.08); border-radius:10px;
  font-size:13px; font-weight:600; color:var(--brown-soft);
  margin-bottom:12px; position:sticky; top:0; z-index:5;
}
.bulk-actions-bar.visible{display:flex;}
.bulk-selected-count{font-weight:700; color:var(--brown);}

.import-form{flex:0 0 auto; margin:0;}

.import-result-banner{
  padding:10px 16px; margin-bottom:12px; border-radius:10px;
  background:#E8F3E8; color:var(--forest); font-size:13px; font-weight:600;
  border:1px solid rgba(34,70,29,0.15);
}
.btn-danger{
  background:rgba(196,70,59,0.1); color:#C4463B; border-color:rgba(196,70,59,0.2);
}
.btn-danger:hover{background:#C4463B; color:var(--white); border-color:#C4463B;}

/* Checkbox styling */
.col-select{width:48px; text-align:center;}
.checkbox-wrapper{
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; cursor:pointer; user-select:none;
}
.checkbox-wrapper input[type="checkbox"]{
  position:absolute; opacity:0; width:18px; height:18px; cursor:pointer;
}
.checkbox-checkmark{
  width:18px; height:18px; border:2px solid rgba(74,58,34,0.3);
  border-radius:4px; background:var(--white); display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, background .15s ease;
}
.checkbox-wrapper:hover .checkbox-checkmark{border-color:var(--forest);}
.checkbox-wrapper input:checked ~ .checkbox-checkmark{
  background:var(--forest); border-color:var(--forest);
}
.checkbox-wrapper input:checked ~ .checkbox-checkmark::after{
  content:''; width:5px; height:9px; border:solid var(--white); border-width:0 2px 2px 0;
  transform:rotate(45deg) translateY(-1px);
}
.orders-table tbody tr.selected td, .admin-table tbody tr.selected td{background:#E8F3E8;}
.orders-table thead .col-select .checkbox-wrapper input:focus ~ .checkbox-checkmark,
.orders-table tbody .col-select .checkbox-wrapper input:focus ~ .checkbox-checkmark{
  box-shadow:0 0 0 2px rgba(34,70,29,0.2);
}

@media (max-width:600px){
  .bulk-actions-bar{flex-wrap:wrap;}
  .col-select{width:40px;}
}
.status-pending{background:#FDF0D5; color:#8C6A1B;}
.status-confirmed{background:#E1EEFB; color:#1B5A8C;}
.status-packed{background:#EEE6FB; color:#5A3B8C;}
.status-saved{background:#E3F3E3; color:#1E7D34;}
.secret-status{display:inline-flex; align-items:center; gap:6px; margin-top:6px;}
.status-shipped{background:#FCE9E4; color:#B85C2E;}
.status-delivered{background:#E1F3E4; color:#1E7A32;}
.status-cancelled{background:#FCE3E1; color:#B0291B;}
.status-paid{background:#E3F3E3; color:#1E7D34;}
.status-overdue{background:#FCE3E1; color:#B0291B;}

.admin-form{display:flex; flex-direction:column; gap:16px; max-width:640px;}
.admin-form label{font-size:12.5px; font-weight:700; color:var(--brown); display:flex; flex-direction:column; gap:6px;}
.admin-form input, .admin-form select, .admin-form textarea{border:1px solid rgba(74,58,34,0.2); border-radius:10px; padding:11px 14px; font-family:inherit; font-size:13.5px; outline:none;}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus{border-color:var(--forest);}
.admin-form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.admin-form-row>label,.admin-filter-form>label{font-size:12.5px;font-weight:700;color:var(--brown);display:flex;flex-direction:column;gap:6px;min-width:0;}
.admin-form-row>label>input:not([type="checkbox"]):not([type="radio"]),.admin-form-row>label>select,.admin-form-row>label>textarea,.admin-filter-form>label>input,.admin-filter-form>label>select,.admin-filter-form>label>textarea{width:100%;box-sizing:border-box;border:1px solid rgba(74,58,34,.2);border-radius:10px;padding:11px 14px;font:inherit;font-size:13.5px;outline:none;background:var(--white);}
.admin-form-row>label>input:not([type="checkbox"]):not([type="radio"]):focus,.admin-form-row>label>select:focus,.admin-form-row>label>textarea:focus,.admin-filter-form>label>input:focus,.admin-filter-form>label>select:focus,.admin-filter-form>label>textarea:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(31,79,43,.1);}
.admin-filter-form{display:grid;grid-template-columns:minmax(240px,1fr) minmax(160px,.5fr) minmax(160px,.5fr) auto;align-items:end;gap:14px;margin:0;}.admin-filter-form .btn{min-height:43px;justify-content:center;}.admin-filter-form .btn+.btn{margin-left:-7px;}
.admin-checkbox{flex-direction:row !important; align-items:center; gap:8px !important;}
.checkbox-grid{display:flex; flex-wrap:wrap; gap:8px 18px; font-weight:400 !important;}
.checkbox-grid .admin-checkbox{font-weight:400;}

/* WordPress-style collapsible category/tag checklist — see
   includes/category_checklist.php (admin/blog.php, admin/page-editor.php). */
.cat-checklist-panel{border:1px solid rgba(74,58,34,0.16); border-radius:10px; overflow:hidden; font-weight:400;}
.cat-checklist-header{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--cream-2); cursor:pointer; user-select:none;}
.cat-checklist-title{font-size:12.5px; font-weight:700; color:var(--brown); text-transform:none;}
.cat-checklist-collapse{background:none; border:none; padding:2px; cursor:pointer; display:flex; color:var(--brown-soft); transition:transform .15s ease;}
.cat-checklist-collapse .ic{width:16px; height:16px;}
.cat-checklist-collapse.is-collapsed{transform:rotate(-90deg);}
.cat-checklist-body{padding:12px 14px;}
.cat-checklist-tabs{display:flex; gap:16px; margin-bottom:10px; border-bottom:1px solid rgba(74,58,34,0.12);}
.cat-checklist-tab{background:none; border:none; padding:0 0 8px; font-size:12px; font-weight:600; color:var(--brown-soft); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.cat-checklist-tab.active{color:var(--forest-deep); border-bottom-color:var(--forest);}
.cat-checklist-list{max-height:180px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding-right:4px;}
.cat-checklist-item{display:flex !important; flex-direction:row !important; align-items:center; gap:8px !important; padding:4px 6px; border-radius:6px; font-size:13px; font-weight:400 !important; cursor:pointer;}
.cat-checklist-item:hover{background:var(--cream-2);}
.cat-checklist-item input[type="checkbox"]{accent-color:var(--forest); width:15px; height:15px; flex-shrink:0;}
.cat-checklist-list.filter-most-used .cat-checklist-item[data-most-used="0"]{display:none !important;}
.cat-checklist-add-new{display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:var(--forest); text-decoration:none;}
.cat-checklist-add-new:hover{text-decoration:underline;}
.admin-image-preview{display:flex; align-items:center; gap:14px; margin:6px 0 10px; padding:10px; background:var(--cream-2); border-radius:12px;}
.admin-image-preview img{width:70px; height:70px; object-fit:cover; border-radius:10px;}
.admin-hint{font-size:11px; color:var(--brown-soft); font-weight:400; margin-top:4px;}
.color-input-row{display:flex; align-items:center; gap:8px; width:100%;}
.color-input-row input[type="color"]{
  width:44px; height:42px; min-height:42px; padding:2px 3px;
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; box-sizing:border-box;
  cursor:pointer; background:#fff; flex-shrink:0;
}
.color-input-row input[type="text"]{
  flex:1; min-width:0; height:42px; min-height:42px; background:var(--cream-2);
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; padding:9px 12px;
  font-size:13.5px; box-sizing:border-box; color:var(--brown);
}
.swatch-row{display:flex; gap:14px;}
.swatch{flex:1; height:70px; border-radius:12px; display:flex; align-items:flex-end; padding:10px; box-shadow:0 8px 16px -10px rgba(0,0,0,0.3);}
.swatch span{font-size:11px; font-weight:700; color:#fff;}

.section-list{display:flex; flex-direction:column; gap:8px;}
.section-row{
  display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--cream-2);
  border-radius:10px; cursor:grab; user-select:none;
}
.section-row.dragging{opacity:0.4;}
.drag-handle{font-size:16px; color:var(--brown-soft); cursor:grab;}
.section-label{flex:1; font-weight:600; font-size:13.5px;}
.section-row-actions{display:flex; align-items:center; gap:10px;}
.section-edit-link{font-size:12px; font-weight:700; color:var(--forest); white-space:nowrap;}
.section-edit-link.disabled{color:#B3A996; cursor:default;}
.inline-toggle{margin:0;}
.toggle-btn{
  border:none; padding:6px 14px; border-radius:999px; font-size:11.5px; font-weight:700; cursor:pointer;
  background:#EBD8D8; color:#A0453F;
}
.toggle-btn.on{background:#DCEFE0; color:#1E7A32;}
.section-color-row{border-top:1px solid rgba(74,58,34,0.1); padding-top:18px; margin-top:18px;}
.section-color-row:first-of-type{border-top:none; margin-top:10px; padding-top:0;}

.page-picker-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.element-row{border-top:1px solid rgba(74,58,34,0.1); padding:0;}
.element-row:first-of-type{border-top:none;}
.element-toggle{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  border:0; background:transparent; color:var(--forest-deep); cursor:pointer;
  text-align:left; padding:14px 0; margin:0; font:inherit; font-size:14px; font-weight:700;
}
.element-toggle small{font-size:12px; font-weight:600; color:var(--brown-soft);}
.element-toggle small b{font-size:16px; font-weight:400; margin-left:4px;}
.element-row:not(.is-open) .element-fields{display:none;}
.element-row.is-open .element-fields{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:16px 20px; align-items:start; padding:4px 0 20px;
}
.element-label{display:block; font-size:13.5px; margin-bottom:10px;}
.element-row .element-toggle{display:flex; margin-bottom:0;}
.element-fields{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:16px 20px; align-items:start;
}
.element-field{
  display:flex; flex-direction:column; gap:7px; font-size:12.5px;
  font-weight:700; color:var(--brown); width:100%; min-width:0;
}
.element-field > span:first-child{
  display:block; font-size:12.5px; font-weight:700; color:var(--brown);
  min-height:18px; line-height:1.3;
}
.element-field input[type="number"],
.element-field select{
  width:100%; height:42px; min-height:42px; border:1px solid rgba(74,58,34,0.2);
  border-radius:10px; padding:9px 12px; font-size:13.5px; box-sizing:border-box;
  background:#fff; color:var(--brown);
}
.element-field input[type="number"]:focus,
.element-field select:focus{
  border-color:var(--forest); box-shadow:0 0 0 3px rgba(31,79,43,.1);
}
.element-field .color-input-row{display:flex; align-items:center; gap:8px; width:100%;}
.element-field .color-input-row input[type="color"]{
  width:44px; height:42px; min-height:42px; padding:2px 3px;
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; box-sizing:border-box;
  cursor:pointer; background:#fff; flex-shrink:0;
}
.element-field .color-input-row input[type="text"]{
  width:100%; height:42px; min-height:42px; padding:9px 12px; font-size:13.5px;
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; box-sizing:border-box;
  background:var(--cream-2); color:var(--brown); flex:1; min-width:0;
}
.element-field .vis-dropdown{width:100%; min-width:0; position:relative;}
.element-field .vis-dropdown summary{
  height:42px; min-height:42px; width:100%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; padding:0 12px;
  font-size:12.5px; font-weight:600; color:var(--brown); background:#fff; cursor:pointer;
}

/* Accordion containers in design.php */
.design-settings-group{
  font-size:14px; margin-top:20px; border:1.5px solid rgba(74,58,34,0.12);
  border-radius:14px; padding:0; background:#fff; overflow:hidden;
}
.design-settings-group > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:16px 20px;
  background:var(--cream-2); user-select:none; transition:background .15s ease;
  border-bottom:1px solid transparent;
}
.design-settings-group > summary::-webkit-details-marker{display:none;}
.design-settings-group > summary::after{
  content:'▾'; font-size:14px; color:var(--brown-soft); transition:transform .2s ease;
  line-height:1; flex-shrink:0;
}
.design-settings-group[open] > summary{border-bottom-color:rgba(74,58,34,0.1);}
.design-settings-group[open] > summary::after{transform:rotate(180deg);}
.design-settings-group > summary:hover{background:#f0e4cc;}
.design-settings-group > summary > span{font-size:15px; font-weight:700; color:var(--forest-deep);}
.design-settings-group > summary small{font-size:12px; font-weight:500; color:var(--brown-soft); margin-left:auto;}
.design-settings-group-body{padding:18px 22px 24px;}
.design-settings-group .admin-hint{font-size:13px; line-height:1.45;}

/* Section Layout Appearance panel */
.design-settings-group .view-panel .admin-form-row{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:18px;
}
.design-settings-group .view-panel .admin-form-row.cs-three-col{
  grid-template-columns:repeat(3, 1fr) !important;
}
.design-settings-group .view-panel .admin-form-field{
  display:flex; flex-direction:column; gap:6px; width:100%; min-width:0;
}
.design-settings-group .view-panel .admin-form-field .field-label{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; min-height:20px; font-size:13px; font-weight:700; color:var(--brown);
}
.design-settings-group .view-panel .admin-form-field input[type="number"],
.design-settings-group .view-panel .admin-form-field input[type="text"],
.design-settings-group .view-panel .admin-form-field select{
  width:100%; height:44px; min-height:44px; font-size:14px; padding:10px 13px;
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; box-sizing:border-box;
  background:#fff; color:var(--brown);
}
.design-settings-group .view-panel .admin-form-field input[type="number"]:focus,
.design-settings-group .view-panel .admin-form-field input[type="text"]:focus,
.design-settings-group .view-panel .admin-form-field select:focus{
  border-color:var(--forest); box-shadow:0 0 0 3px rgba(31,79,43,.1);
}
.design-settings-group .view-panel .admin-form-field input[type="file"]{
  width:100%; height:44px; min-height:44px; font-size:13px; padding:8px 12px;
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; box-sizing:border-box;
  background:#fff; color:var(--brown); cursor:pointer;
}
.design-settings-group .view-panel .color-input-row{display:flex; align-items:center; gap:10px; width:100%;}
.design-settings-group .view-panel .color-input-row input[type="color"]{
  width:48px; height:44px; min-height:44px; padding:2px 3px;
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; box-sizing:border-box;
  cursor:pointer; background:#fff; flex-shrink:0;
}
.design-settings-group .view-panel .color-input-row input[type="text"]{
  width:100%; height:44px; min-height:44px; font-size:14px; padding:10px 13px;
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; box-sizing:border-box;
  background:var(--cream-2); color:var(--brown); flex:1; min-width:0;
}
.design-settings-group .view-panel .admin-hint{font-size:12px; font-weight:400; color:var(--brown-soft); margin-top:2px; line-height:1.35;}
.design-settings-group .view-panel .field-sub-action{margin-top:4px; font-size:12px; color:var(--brown-soft);}
.design-settings-group .view-panel .admin-image-preview{display:flex; align-items:center; gap:12px; margin-top:6px;}
.design-settings-group .view-panel .admin-image-preview img{max-height:44px; border-radius:8px; border:1px solid rgba(74,58,34,0.15); object-fit:cover;}

@media (max-width:768px){
  .element-row.is-open .element-fields{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px;}
  .design-settings-group .view-panel .admin-form-row{grid-template-columns:1fr !important; gap:14px;}
}
@media (max-width:500px){
  .element-row.is-open .element-fields{grid-template-columns:1fr;}
}

.vis-dropdown{position:relative; min-width:170px;}
.vis-dropdown summary{
  display:flex; align-items:center; justify-content:space-between; gap:8px; list-style:none; cursor:pointer;
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; padding:9px 12px; font-size:12.5px; font-weight:600; color:var(--brown); background:#fff;
}
.vis-dropdown summary::-webkit-details-marker{display:none;}
.vis-dropdown summary::after{content:'⌄'; font-size:12px; color:var(--brown-soft); flex-shrink:0;}
.vis-dropdown[open] summary{border-color:var(--forest);}
.vis-dropdown[open] summary::after{content:'⌃';}
.vis-dropdown-menu{
  position:absolute; z-index:5; top:calc(100% + 6px); left:0; min-width:180px;
  background:#fff; border:1px solid rgba(74,58,34,0.15); border-radius:10px; padding:10px 12px;
  box-shadow:0 14px 28px -14px rgba(28,46,22,0.35); display:flex; flex-direction:column; gap:8px;
}
.vis-dropdown-menu .admin-checkbox{font-size:12px; font-weight:600; color:var(--brown); white-space:nowrap;}
.page-card{
  background:#f1f5f9; border:1.5px solid #e2e8f0; border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:4px; text-decoration:none;
  transition:border-color .15s ease, transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.page-card:hover{
  transform:translateY(-2px); border-color:#2563eb; background:#fff;
  box-shadow:0 4px 14px -2px rgba(15, 23, 42, 0.08);
}
.page-card.active{
  border-color:#2563eb; background:#fff;
  box-shadow:0 0 0 2px rgba(37, 99, 235, 0.2);
}
.page-card b{font-size:14px; font-weight:700; color:var(--forest-deep, #0f172a);}
.page-card small{font-size:12px; color:var(--brown-soft, #64748b);}
.page-card-count{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold, #d97706); margin-bottom:2px;}

.admin-btn-row{display:flex; gap:12px; margin-top:20px; align-items:center;}
.admin-topline .btn{padding:11px 20px;}

/* Header Manager Form Styles & Field Alignment */
.admin-form-full { max-width: none !important; width: 100%; }
.admin-form-field { display: flex; flex-direction: column; gap: 6px; }
.admin-form-field label.field-label { font-size: 13px; font-weight: 700; color: var(--forest-deep, #0f172a); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin: 0; }
.admin-form-field input[type="text"],
.admin-form-field select {
  height: 42px; border: 1.5px solid rgba(74,58,34,0.18); border-radius: 10px;
  padding: 0 14px; font-family: inherit; font-size: 13.5px; outline: none; background: #fff; width: 100%; box-sizing: border-box;
}
.admin-form-field input[type="text"]:focus,
.admin-form-field select:focus {
  border-color: var(--forest, #2d5a27); box-shadow: 0 0 0 3px rgba(45,90,39,0.12);
}

/* Secondary Header Live Preview Panel */
.secondary-preview-panel {
  background: #ffffff; border: 1px solid rgba(74,58,34,0.12); border-radius: 16px;
  padding: 22px 24px; margin-bottom: 24px; box-shadow: 0 4px 20px -4px rgba(0,0,0,0.04);
}
.secondary-preview-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; margin-bottom: 16px;
}
.secondary-preview-title {
  display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--forest-deep, #0f172a);
}
.preview-pulse-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.7);
  animation: previewPulse 2s infinite;
  display: inline-block; flex-shrink: 0;
}
@keyframes previewPulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
  70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.preview-badge-hint {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 999px; background: rgba(16,185,129,0.12); color: #059669;
}
.preview-browser-shell {
  border: 1px solid rgba(74,58,34,0.16); border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.06); background: #f8fafc;
}
.preview-browser-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: #f1f5f9; border-bottom: 1px solid rgba(74,58,34,0.1);
}
.browser-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }
.browser-url-pill {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  padding: 3px 12px; border-radius: 6px; font-size: 12px; color: #64748b;
  border: 1px solid rgba(74,58,34,0.08); margin-left: 8px; font-family: ui-monospace, monospace;
}
.preview-topbar-wrapper { position: relative; }
.storefront-live-topbar {
  background: linear-gradient(120deg, var(--gold-soft, #f7e6a7), var(--gold, #dfa524));
  color: var(--forest-deep, #132810);
  font-size: 12.5px; font-weight: 700; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.storefront-live-topbar .topbar-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 9px 32px; gap: 14px; flex-wrap: wrap;
}
.storefront-live-topbar .tb-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.storefront-live-topbar .tb-item {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  border-radius: 999px; background: rgba(255,255,255,0.28); opacity: 0.95;
  color: inherit; text-decoration: none; font-size: 12.5px; font-weight: 700; transition: background .15s, opacity .15s;
}
.storefront-live-topbar .tb-item:hover { opacity: 1; background: rgba(255,255,255,0.42); }
.storefront-live-topbar .tb-ic { width: 14px; height: 14px; stroke-width: 1.9; }
.storefront-live-topbar .tb-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.28);
  opacity: 0.95; color: inherit; text-decoration: none; transition: background .15s, opacity .15s; flex-shrink: 0;
}
.storefront-live-topbar .tb-icon-btn:hover { opacity: 1; background: rgba(255,255,255,0.42); }
.storefront-live-topbar .tb-icon-btn svg { width: 14px; height: 14px; stroke-width: 1.9; fill: none; stroke: currentColor; }
.preview-hidden-banner {
  background: #fffbeb; border-top: 1px solid #fef3c7; color: #b45309;
  font-size: 12px; font-weight: 600; padding: 8px 16px; display: flex; align-items: center; gap: 8px;
}

/* Master Topbar Visibility Card */
.sec-master-visibility-card {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding: 14px 18px; background: var(--cream-2, #faf6ee); border: 1.5px solid rgba(74,58,34,0.12);
  border-radius: 12px; margin-bottom: 20px;
}
.sec-master-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.sec-master-checkbox input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--forest, #2d5a27); }
.sec-master-text { display: flex; flex-direction: column; }
.sec-master-text strong { font-size: 13.5px; color: var(--forest-deep, #0f172a); }

/* Contact Cards in Secondary Header */
.contact-card {
  background: #ffffff; border: 1.5px solid rgba(74,58,34,0.12); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.contact-card:focus-within {
  border-color: var(--forest, #2d5a27); box-shadow: 0 4px 14px -3px rgba(45,90,39,0.08);
}
.contact-card-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.contact-card-title strong { font-size: 13px; color: var(--forest-deep, #0f172a); }
.contact-card-title .admin-hint { margin-left: 6px; font-size: 11.5px; }
.admin-input-full {
  width: 100%; height: 42px; border: 1.5px solid rgba(74,58,34,0.18); border-radius: 10px;
  padding: 0 14px; font-family: inherit; font-size: 13.5px; outline: none; background: #fff; box-sizing: border-box;
}
.admin-input-full:focus {
  border-color: var(--forest, #2d5a27); box-shadow: 0 0 0 3px rgba(45,90,39,0.12);
}
.contact-card-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; padding-top: 8px; border-top: 1px dashed rgba(74,58,34,0.1);
}
.contact-card-checkboxes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.contact-card-checkboxes .admin-checkbox,
.contact-card-footer .admin-checkbox {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--forest-deep, #0f172a); cursor: pointer; margin: 0;
}
.contact-card-checkboxes input[type="checkbox"],
.contact-card-footer input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--forest, #2d5a27);
}

/* Header Manager Columns */
.header-manager-columns { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 24px; align-items: start; }
.header-manager-col .admin-form { max-width: none; }
@media (max-width: 980px) {
  .header-manager-columns { grid-template-columns: 1fr; }
}

/* Social Icon Cards */
.social-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.social-item-card {
  background: #ffffff; border: 1.5px solid rgba(74,58,34,0.12); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.social-item-card:hover { border-color: rgba(74,58,34,0.22); }
.social-item-main { display: flex; align-items: flex-start; gap: 12px; }
.social-row-icon {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--forest-deep, #132810); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.social-row-icon svg { width: 17px; height: 17px; }
.social-row-icon-add { background: var(--gold-soft, #f7e6a7); color: var(--forest-deep, #132810); }
.social-item-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.social-inputs-line { display: flex; align-items: center; gap: 8px; }
.social-platform-select {
  flex: 0 0 140px; height: 38px; border: 1.5px solid rgba(74,58,34,0.18); border-radius: 8px;
  padding: 0 10px; font-family: inherit; font-size: 13px; outline: none; background: #fff; box-sizing: border-box;
}
.social-url-input {
  flex: 1; min-width: 0; height: 38px; border: 1.5px solid rgba(74,58,34,0.18); border-radius: 8px;
  padding: 0 12px; font-family: inherit; font-size: 13px; outline: none; background: #fff; box-sizing: border-box;
}
.social-platform-select:focus, .social-url-input:focus {
  border-color: var(--forest, #2d5a27);
}
.social-item-delete-btn {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; background: rgba(196,70,59,0.08); color: #c4463b;
  border: none; cursor: pointer; transition: background .15s, color .15s;
}
.social-item-delete-btn:hover { background: #c4463b; color: #fff; }
.social-actions-line {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; padding-top: 6px; border-top: 1px dashed rgba(74,58,34,0.1);
}
.social-toggles-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.social-toggles-wrap .admin-checkbox {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--forest-deep, #0f172a); cursor: pointer; margin: 0;
}
.social-toggles-wrap input[type="checkbox"] {
  width: 15px; height: 15px; cursor: pointer; accent-color: var(--forest, #2d5a27);
}

/* Add Social Card */
.social-add-card {
  background: #fdfdfd; border: 1.5px dashed rgba(74,58,34,0.3); border-radius: 12px;
  padding: 14px; margin-top: 16px; display: flex; flex-direction: column; gap: 12px;
}
.social-add-card .contact-card-title strong { font-size: 13px; color: var(--forest-deep, #0f172a); }
.social-add-inputs { display: flex; align-items: center; gap: 10px; }
@media (max-width: 600px) {
  .social-inputs-line, .social-add-inputs { flex-direction: column; align-items: stretch; }
  .social-platform-select { flex: 1 1 auto; width: 100%; }
}


.admin-login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--forest),var(--forest-deep));}
.admin-login-card{background:var(--white); border-radius:20px; padding:40px; width:360px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);}
.admin-login-card h2{text-align:center; margin-bottom:6px;}
.admin-login-card p{text-align:center; font-size:12.5px; color:var(--brown-soft); margin-bottom:24px;}

/* Keep verification steps aligned with the blue EcomSaaS auth theme. */
.verification-page .admin-login-wrap{background:linear-gradient(160deg,#173d5d,#102a43);}
.verification-page .admin-login-card h2{color:#102a43;}
.verification-page .admin-form .btn-primary{background:#102a43;}
.verification-page .admin-form input:focus{border-color:#102a43;box-shadow:0 0 0 3px rgba(16,42,67,.1);}
.verification-page .admin-login-card a{color:#0d5d91;}

@media (max-width:900px){
  .admin-shell{flex-direction:column;}
  /* Sidebar collapses to a compact top bar (logo + toggle); the full nav
     list opens as a dropdown below it instead of squeezing everything —
     including nested dropdown groups — into one unreadable scrolling row. */
  .admin-sidebar{
    width:100%; height:auto; position:static; overflow:visible;
    flex-direction:column; align-items:stretch; padding:14px 16px;
  }
  .admin-brand{padding:0; margin-bottom:0; justify-content:space-between;}
  .admin-mobile-nav-toggle{display:flex;}
  .admin-nav{
    flex-direction:column; display:none; margin-top:14px;
    max-height:65vh; overflow-y:auto;
  }
  .admin-sidebar.mobile-nav-open .admin-nav{display:flex;}
  .admin-foot{display:none;}
  .admin-sidebar.mobile-nav-open .admin-foot{display:flex; margin-top:8px;}
  .admin-stat-grid{grid-template-columns:1fr 1fr;}
  .admin-form-row{grid-template-columns:1fr;}
  .admin-filter-form{grid-template-columns:1fr 1fr;}.admin-filter-search{grid-column:1 / -1;}
  .page-picker-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .admin-main{padding:20px 16px;}
  .admin-stat-grid{grid-template-columns:1fr; gap:12px;}
  .admin-panel{padding:16px;}
  .admin-filter-form{grid-template-columns:1fr;}.admin-filter-search{grid-column:auto;}.admin-filter-form .btn+.btn{margin-left:0;}
  .admin-topline h1{font-size:20px;}
}
/* Stock stepper widget */
.stock-stepper{display:flex; align-items:stretch; width:140px; border:1px solid rgba(74,58,34,0.2); border-radius:10px; overflow:hidden;}
.stock-stepper input{border:none; text-align:center; font-size:16px; font-weight:700; width:70px; padding:10px 0;}
.stock-stepper-btns{display:flex; flex-direction:column; border-left:1px solid rgba(74,58,34,0.15);}
.stock-btn{border:none; background:var(--cream-2); width:44px; flex:1; cursor:pointer; font-size:14px; font-weight:700; color:var(--forest-deep);}
.stock-btn:hover{background:var(--forest); color:#fff;}
.stock-btn.stock-inc{border-bottom:1px solid rgba(74,58,34,0.15);}

/* Variant rows */
.variant-row{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr auto; gap:10px; margin-bottom:10px; align-items:center;}
.variant-row input{border:1px solid rgba(74,58,34,0.2); border-radius:8px; padding:9px 10px; font-size:13px; font-family:inherit;}
.variant-remove{background:none; border:none; color:#C4463B; font-size:20px; cursor:pointer; padding:0 6px;}

.attr-value-list{display:flex; flex-wrap:wrap; gap:8px;}
.attr-value-chip{background:var(--cream-2); border-radius:999px; padding:6px 8px 6px 14px; font-size:12.5px; display:flex; align-items:center; gap:6px;}
.attr-value-chip button{background:none; border:none; color:#C4463B; font-size:16px; cursor:pointer; padding:0 4px;}
.variant-check{margin-bottom:0 !important;}


/*====== pages css =====*/
/* =========================================================
   PAGE MANAGEMENT
========================================================= */

.page-editor-panel{
  max-width:760px;
}

.page-editor-panel h3{
  margin-bottom:22px;
}

.page-seo-box{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid rgba(74,58,34,.10);
}

.page-seo-box h4{
  margin:0 0 16px;
  color:var(--forest-deep);
  font-size:15px;
}

.seo-yoast-box h4{margin:0 0 16px; color:var(--forest-deep); font-size:15px;}
.seo-yoast-box label{font-size:12.5px; font-weight:700; color:var(--brown); display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.seo-yoast-box input, .seo-yoast-box textarea{border:1px solid rgba(74,58,34,0.2); border-radius:10px; padding:11px 14px; font-family:inherit; font-size:13.5px; outline:none;}
.seo-yoast-box input:focus, .seo-yoast-box textarea:focus{border-color:var(--forest);}
.seo-snippet-preview{background:var(--cream-2); border-radius:10px; padding:14px 16px; margin-bottom:18px;}
.seo-snippet-title{color:#1a0dab; font-size:16.5px; line-height:1.3; margin-bottom:3px; overflow-wrap:anywhere;}
.seo-snippet-url{color:#006621; font-size:12.5px; margin-bottom:5px;}
.seo-snippet-desc{color:#4d5156; font-size:12.5px; line-height:1.5; overflow-wrap:anywhere;}
.seo-length-bar{height:4px; border-radius:2px; background:rgba(74,58,34,0.12); overflow:hidden; margin-top:2px;}
.seo-length-fill{height:100%; width:0; border-radius:2px; background:rgba(74,58,34,0.3); transition:width .15s, background-color .15s;}
.seo-length-fill.ok{background:#1E7A32;}
.seo-length-fill.warn{background:#C98A1A;}
.seo-length-fill.bad{background:#C4463B;}

/* ============================================================
   META CHARACTER COUNTERS
============================================================ */
.char-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--brown-soft);
  margin-left: 8px;
  font-weight: 600;
  background: rgba(74,58,34,0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

.char-counter #genMetaTitleCount,
.char-counter #genMetaDescCount,
.char-counter #prodMetaTitleCount,
.char-counter #prodMetaDescCount,
.char-counter #pageMetaTitleCount,
.char-counter #pageMetaDescCount,
.char-counter #editorMetaTitleCount,
.char-counter #editorMetaDescCount {
  min-width: 20px;
  text-align: right;
  transition: color 0.15s;
}

label.over-limit .char-counter {
  background: #fdeaea;
  color: #C4463B;
}

label.over-limit .char-counter span[id$="Count"] {
  color: #C4463B;
}

.pages-list-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.pages-list-heading h3{
  margin:0;
}

.page-row{
  margin-bottom:8px;
}

.page-row .section-label{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.page-status{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
}

.page-status.published{
  background:rgba(47,117,61,.10);
  color:#2f753d;
}

.page-status.draft{
  background:rgba(160,120,50,.12);
  color:#92702f;
}

.btn-small{
  padding:7px 11px;
  font-size:11px;
}

.form-error{
  padding:10px 14px;
  border-radius:8px;
  background:rgba(176,41,27,.08);
  color:#b0291b;
  font-size:12px;
}
.req{color:#E5484D; margin-left:2px;}
.field-error{color:#C53030; font-size:12px; margin:6px 0 0; display:block;}
.input-invalid{border-color:#E5484D!important;}
/* =========================================================
   PAGE BUILDER - MODULE PICKER
========================================================= */

.page-module-empty {
    text-align: center;
    padding: 35px 20px;
    border: 2px dashed rgba(28, 46, 22, 0.12);
    border-radius: 16px;
    margin-top: 20px;
}

.page-module-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--forest-deep);
    color: #fff;

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

    font-size: 24px;
}

.page-module-empty h4 {
    margin: 0 0 6px;
}

.page-module-empty p {
    max-width: 500px;
    margin: 0 auto 18px;

    color: var(--brown-soft);
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   MODULE PICKER OVERLAY
========================================================= */

.module-picker-overlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    background: rgba(10, 25, 10, 0.60) !important;

    z-index: 99999 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;

    box-sizing: border-box !important;
}


/* IMPORTANT:
   Hidden picker must really remain hidden.
*/

.module-picker-overlay[hidden] {
    display: none !important;
}


/* =========================================================
   MODULE PICKER BOX
========================================================= */

.module-picker {
    width: min(760px, 100%) !important;
    max-height: 90vh;

    overflow-y: auto;

    background: var(--white);

    border-radius: 20px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.30);

    box-sizing: border-box;
}


/* =========================================================
   PICKER HEADER
========================================================= */

.module-picker-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 24px 26px;

    border-bottom:
        1px solid rgba(28, 46, 22, 0.10);
}

.module-picker-head h3 {
    margin: 0 0 5px;

    color: var(--forest-deep);
}

.module-picker-close {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    border: 0;

    border-radius: 50%;

    background: #f4ead2;

    color: var(--forest-deep);

    font-size: 24px;

    cursor: pointer;

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

.module-picker-close:hover {
    background: var(--gold);
}


/* =========================================================
   MODULE GRID
========================================================= */

.module-picker-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    padding: 24px;
}


/* =========================================================
   MODULE OPTION
========================================================= */

.module-option {
    width: 100%;

    text-align: left;

    border:
        1px solid rgba(28, 46, 22, 0.12);

    background: #faf6ea;

    border-radius: 14px;

    padding: 18px;

    cursor: pointer;

    font-family: inherit;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.module-option:hover {
    background: #f4ead2;

    border-color: var(--gold);

    transform: translateY(-1px);
}

.module-option strong {
    display: block;

    color: var(--forest-deep);

    font-size: 14px;

    margin-bottom: 5px;
}

.module-option span {
    display: block;

    color: var(--brown-soft);

    font-size: 11.5px;

    line-height: 1.5;
}


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

@media (max-width: 600px) {

    .module-picker-overlay {
        padding: 12px !important;
    }

    .module-picker {
        max-height: 94vh;

        border-radius: 16px;
    }

    .module-picker-head {
        padding: 18px;
    }

    .module-picker-grid {
        grid-template-columns: 1fr;

        padding: 18px;
    }

}
/* =========================================================
   ADVANCED / RAW HTML — collapsible wrapper around the classic
   editor on the Pages screen, demoted below the visual Page
   Sections builder.
========================================================= */

.classic-editor-details summary {
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: var(--brown);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.classic-editor-details summary::-webkit-details-marker { display: none; }
.classic-editor-details summary::before {
    content: '▸';
    font-size: 12px;
    color: var(--brown-soft);
    transition: transform .15s ease;
}
.classic-editor-details[open] summary::before { transform: rotate(90deg); }
.classic-editor-details > p.admin-hint { margin: 8px 0 14px; }
.classic-editor-details > .classic-editor-panel { margin-top: 6px; }

/* =========================================================
   CLASSIC EDITOR (shared by Pages and Blog admin screens)
========================================================= */

/* =========================================================
   EDITOR PANEL
========================================================= */

.classic-editor-panel {
    padding: 0;
    overflow: hidden;
}


/* =========================================================
   TABS
========================================================= */

.classic-editor-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(74,58,34,.14);
    background: var(--cream-2);
}


.classic-tab {
    border: 0;
    background: transparent;
    padding: 12px 18px;
    font-family: inherit;
    font-weight: 700;
    color: var(--brown-soft);
    cursor: pointer;
}


.classic-tab.active {
    background: var(--white);
    color: var(--forest-deep);
    box-shadow:
        inset 0 -2px 0 var(--forest);
}


/* =========================================================
   TOOLBAR
========================================================= */

.classic-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 10px;
    border-bottom: 1px solid rgba(74,58,34,.14);
    background: #fff;
}


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

.classic-toolbar button,
.classic-select {
    min-height: 34px;
    padding: 6px 10px;

    border: 1px solid rgba(74,58,34,.18);
    border-radius: 6px;

    background: #fff;
    color: var(--brown);

    font-family: inherit;
    font-size: 12px;

    cursor: pointer;

    box-sizing: border-box;
}


.classic-toolbar button:hover,
.classic-select:hover {
    background: var(--cream-2);
}


.classic-toolbar button:active {
    transform: translateY(1px);
}


/* =========================================================
   DROPDOWNS
========================================================= */

.format-select {
    min-width: 120px;
}


.font-size-select {
    min-width: 105px;
}


/* =========================================================
   DIVIDER
========================================================= */

.toolbar-divider {
    width: 1px;
    height: 25px;
    margin: 0 3px;
    background: rgba(74,58,34,.16);
}


/* =========================================================
   SECTION MANAGER (admin/sections.php) — drag-reorder list of
   Home's built-in/custom sections
========================================================= */

.section-mgr-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-mgr-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    cursor: grab;
    transition: all 0.15s ease;
}

.section-mgr-row:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.section-mgr-row.dragging {
    opacity: 0.45;
    background: #cbd5e1;
}

.section-mgr-row:active {
    cursor: grabbing;
}

.section-mgr-handle {
    font-size: 16px;
    color: var(--brown-soft, #6B7259);
    line-height: 1;
    flex-shrink: 0;
}

.section-mgr-label {
    flex: 1;
}

.section-mgr-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.section-mgr-inline-form {
    display: inline-flex;
    margin: 0;
}

.section-mgr-actions .admin-badge {
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}

.section-mgr-actions button.danger {
    font-size: 13px;
}

/* Custom Sections — compact card + collapsible editor panel below it.
   The panel travels with its card during drag-reorder because both live
   inside one .section-mgr-item wrapper. */
.section-mgr-item {
    display: flex;
    flex-direction: column;
}

.section-mgr-editor {
    margin-top: 10px;
    padding: 16px 18px;
    background: var(--white, #fff);
    border: 1px solid rgba(74,58,34,.15);
    border-radius: 10px;
}
.section-mgr-editor[hidden] {
    display: none;
}
.section-mgr-editor h4 {
    margin: 0;
    font-size: 14px;
    color: var(--brown, #3E3A2A);
}
.section-mgr-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.section-mgr-editor-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-mgr-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.section-mgr-editor-grid label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brown);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.section-mgr-editor-grid input[type="text"] {
    border: 1px solid rgba(74,58,34,.2);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    background: var(--white, #fff);
    color: var(--brown, #3E3A2A);
}
.section-mgr-editor-grid input[type="text"]:focus {
    border-color: var(--forest, #3A5A40);
}
.section-mgr-editor-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.section-mgr-edit-form {
    margin: 0;
}
.section-mgr-editor-grid input[type="number"],
.section-mgr-editor-grid select {
    border: 1px solid rgba(74,58,34,.2);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    background: var(--white, #fff);
    color: var(--brown, #3E3A2A);
}
.section-mgr-editor-grid textarea {
    border: 1px solid rgba(74,58,34,.2);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    background: var(--white, #fff);
    color: var(--brown, #3E3A2A);
    resize: vertical;
}
.section-mgr-editor-grid .section-mgr-editor-wide {
    grid-column: 1 / -1;
}
.section-mgr-img-preview img {
    max-width: 240px;
    max-height: 140px;
    border-radius: 8px;
    display: block;
    margin-top: 8px;
    border: 1px solid rgba(74,58,34,.15);
}

/* ---------------------------------------------------------
   SECTION MANAGER — Layout panel (rows / columns / modules)
   inside each custom section's editor. All .sm-* classes so
   nothing collides with the .section-mgr-* drag-reorder JS.
--------------------------------------------------------- */

.sm-structure {
    border: 1px dashed rgba(74,58,34,.3);
    border-radius: 10px;
    padding: 14px;
    background: var(--cream-2, #F4E7C8);
    margin-bottom: 16px;
}
.sm-structure-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.sm-structure-head b {
    font-size: 13px;
    color: var(--brown, #3E3A2A);
}
.sm-structure-head .admin-hint { margin: 0; }

.sm-row {
    background: var(--white, #fff);
    border: 1px solid rgba(74,58,34,.15);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}
.sm-row:last-child { margin-bottom: 0; }
.sm-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sm-row-head b {
    font-size: 13px;
    color: var(--brown, #3E3A2A);
}
.sm-row-head .admin-hint {
    margin: 0;
    flex: 1;
}
.sm-link-danger {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #C4463B;
    cursor: pointer;
}
.sm-link-danger:hover { text-decoration: underline; }

.sm-cols {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.sm-col {
    min-width: 0;
    border: 1px dashed rgba(74,58,34,.3);
    border-radius: 8px;
    padding: 10px;
    background: var(--cream-2, #F4E7C8);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sm-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--brown, #3E3A2A);
}
.sm-col-head b { font-size: 12px; }
.sm-muted { opacity: 0.55; }

.sm-module-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--white, #fff);
    border: 1px solid rgba(74,58,34,.15);
    border-radius: 8px;
    padding: 8px 10px;
}
.sm-module-chip-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.sm-module-chip-label b {
    font-size: 12.5px;
    color: var(--brown, #3E3A2A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-module-chip-label small {
    font-size: 11.5px;
    color: var(--brown-soft, #6B7259);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-module-chip-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.sm-chip-btn {
    background: none;
    border: none;
    padding: 3px 7px;
    font-size: 13px;
    line-height: 1;
    color: var(--brown-soft, #6B7259);
    cursor: pointer;
    border-radius: 6px;
}
.sm-chip-btn:hover {
    background: rgba(74,58,34,.08);
    color: var(--brown, #3E3A2A);
}
.sm-col-empty {
    margin: 0;
    font-size: 12px;
}

.sm-add-module {
    display: flex;
    gap: 6px;
    margin: 2px 0 0;
}
.sm-add-module select {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(74,58,34,.2);
    border-radius: 8px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
    background: var(--white, #fff);
    color: var(--brown, #3E3A2A);
}
.sm-add-module select:focus {
    border-color: var(--forest, #3A5A40);
}

.sm-add-row {
    margin-top: 12px;
}
.sm-add-row summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--forest, #3A5A40);
    display: flex;
    align-items: center;
    gap: 7px;
}
.sm-row-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.sm-row-preset-form { margin: 0; }
.sm-row-preset {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: var(--white, #fff);
    border: 1px solid rgba(74,58,34,.15);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    font-family: inherit;
}
.sm-row-preset:hover { border-color: var(--forest, #3A5A40); }
.sm-row-preset-bars {
    display: flex;
    gap: 3px;
    height: 18px;
}
.sm-row-preset-bars span {
    background: var(--forest, #3A5A40);
    border-radius: 3px;
    opacity: 0.85;
}
.sm-row-preset small {
    font-size: 11.5px;
    color: var(--brown, #3E3A2A);
}

/* Inline per-module editor — sits right under its chip, inside the column. */
.sm-module-editor {
    border: 1px solid rgba(74,58,34,.15);
    border-radius: 8px;
    background: var(--white, #fff);
}
.sm-module-editor > summary {
    cursor: pointer;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--brown, #3E3A2A);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-module-editor > summary::-webkit-details-marker { display: none; }
/* Open/close chevron — points right when collapsed, rotates down when open. */
.sm-add-row > summary::before,
.sm-module-editor > summary::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
    opacity: .65;
}
.sm-add-row[open] > summary::before,
.sm-module-editor[open] > summary::before {
    transform: rotate(45deg);
}
.sm-module-editor .section-mgr-edit-form { padding: 0 10px 10px; }
.sm-module-editor .section-mgr-editor-grid { gap: 8px; }
.sm-module-editor .section-mgr-editor-actions { margin-top: 10px; }
/* Module editor tabs — the Page Builder's .cs-tab-btn styles, compacted for
   the inline editor so the two keep the exact same look and feel. */
.sm-module-editor .cs-tabs { margin-bottom: 10px; }
.sm-module-editor .cs-tab-btn { padding: 8px 12px; font-size: 12.5px; }
.sm-module-editor .cs-bp-tabs { margin-bottom: 10px; }

/* "+ Add Custom Section" type chooser */
.section-type-picker {
    margin: 0 0 22px;
    padding: 18px;
    background: var(--white, #fff);
    border: 1px solid rgba(74,58,34,.15);
    border-radius: 12px;
}
.section-type-picker[hidden] {
    display: none;
}
.section-type-picker h4 {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--brown, #3E3A2A);
}
.section-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.section-type-card {
    margin: 0;
}
.section-type-card button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(74,58,34,.2);
    border-radius: 10px;
    background: var(--cream-2, #F4E7C8);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color .15s ease, background .15s ease;
}
.section-type-card button:hover {
    border-color: var(--forest, #3A5A40);
    background: var(--white, #fff);
}
.section-type-card b {
    font-size: 13px;
    color: var(--brown, #3E3A2A);
}
.section-type-card span {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--brown-soft, #6B7259);
    line-height: 1.45;
}

.admin-form-four {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}


/* =========================================================
   CLASSIC EDITOR — STYLE PANEL (background/padding/align for a
   selected Section/Card/Button/CTA — see includes/classic_editor.php)
========================================================= */

.ce-style-panel[hidden] {
    display: none !important;
}

.ce-style-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    margin: 0 0 10px;
    border: 1px solid rgba(74,58,34,.16);
    border-radius: 8px;
    background: #FBF8F1;
}

.ce-style-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.ce-style-row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brown, #4A3A22);
}

.ce-style-row select,
.ce-style-row input[type="text"] {
    min-width: 160px;
}

.ce-style-actions {
    display: flex;
    gap: 8px;
}


/* =========================================================
   COLOR CONTROLS
========================================================= */

.color-control {
    position: relative;

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

    width: 36px;
    height: 34px;

    border: 1px solid rgba(74,58,34,.18);
    border-radius: 6px;

    background: #fff;

    cursor: pointer;

    box-sizing: border-box;
}


.color-control span {
    font-size: 16px;
    font-weight: 700;
}


.font-color-icon {
    border-bottom: 3px solid #000;
}


.highlight-icon {
    padding: 0 3px;
    background: #ffff00;
}


.color-control input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   VISUAL EDITOR
========================================================= */

.classic-editor-content {

    min-height: 520px;

    padding: 28px;

    outline: none;

    background: var(--white);

    color: var(--brown);

    font-family: inherit;

    font-size: 15px;

    line-height: 1.8;

    box-sizing: border-box;
}


.classic-editor-content:focus {
    box-shadow:
        inset 0 0 0 2px rgba(34,70,29,.08);
}

/* Dragging a + Button/Card/Spacer/CTA Banner toolbar chip over the editor
   (see includes/classic_editor.php) — click-to-insert is unaffected. */
.classic-editor-content.ce-drag-over {
    box-shadow: inset 0 0 0 2px var(--forest, #22461D);
    background: #F7FBF4;
}

.insert-el-button[draggable="true"] {
    cursor: grab;
}
.insert-el-button[draggable="true"]:active {
    cursor: grabbing;
}


/* =========================================================
   CONTENT TYPOGRAPHY
========================================================= */

.classic-editor-content h1 {
    font-size: 40px;
    line-height: 1.2;
    margin: 24px 0 14px;
    color: var(--forest-deep);
}


.classic-editor-content h2 {
    font-size: 32px;
    line-height: 1.25;
    margin: 22px 0 12px;
    color: var(--forest-deep);
}


.classic-editor-content h3 {
    font-size: 26px;
    line-height: 1.3;
    margin: 20px 0 10px;
    color: var(--forest-deep);
}


.classic-editor-content h4 {
    font-size: 22px;
    line-height: 1.35;
    margin: 18px 0 9px;
    color: var(--forest-deep);
}


.classic-editor-content h5 {
    font-size: 19px;
    line-height: 1.4;
    margin: 16px 0 8px;
    color: var(--forest-deep);
}


.classic-editor-content h6 {
    font-size: 17px;
    line-height: 1.45;
    margin: 14px 0 7px;
    color: var(--forest-deep);
}


.classic-editor-content p {
    margin: 0 0 16px;
}


.classic-editor-content ul,
.classic-editor-content ol {
    margin: 0 0 18px 28px;
}


.classic-editor-content li {
    margin-bottom: 5px;
}


.classic-editor-content blockquote {
    margin: 18px 0;
    padding: 12px 18px;

    border-left: 4px solid var(--forest);

    background: var(--cream-2);
}


.classic-editor-content img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 15px 0;
}


.classic-editor-content a {
    color: var(--forest);
    text-decoration: underline;
}


.classic-editor-content hr {
    margin: 25px 0;

    border: 0;
    border-top: 1px solid rgba(74,58,34,.2);
}


.classic-editor-content table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
}

.classic-editor-content table td,
.classic-editor-content table th {
    border: 1px solid rgba(74,58,34,.2);
    padding: 8px 12px;
    text-align: left;
}

.classic-editor-content table th {
    background: var(--cream-2);
    font-weight: 700;
}


.classic-editor-content pre {
    margin: 18px 0;
    padding: 14px 16px;

    background: var(--cream-2);
    border-radius: 8px;

    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    white-space: pre-wrap;
}


/* =========================================================
   SECTION / ROW / COLUMN LAYOUT BLOCKS
   Dashed outlines only show up while editing, so authors can
   see the structure. They don't render on the live site.
========================================================= */

.classic-editor-content .builder-section {
    margin: 18px 0;
    padding: 14px;

    border: 1px dashed rgba(34,70,29,.35);
    border-radius: 8px;
    background: rgba(34,70,29,.03);
}

.classic-editor-content .builder-row {
    display: grid;
    gap: 20px;
}

.classic-editor-content .builder-row.cols-1 { grid-template-columns: 1fr; }
.classic-editor-content .builder-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.classic-editor-content .builder-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.classic-editor-content .builder-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

.classic-editor-content .builder-col {
    min-width: 0;
    padding: 10px;

    border: 1px dashed rgba(74,58,34,.25);
    border-radius: 6px;
}

.classic-editor-content .builder-col > *:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SECTION CSS MODAL
========================================================= */

.section-css-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(28,20,10,.45);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.section-css-modal-box {
    background: var(--white, #fff);
    border-radius: 14px;
    padding: 22px 24px;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.4);
}

.section-css-modal-box h4 {
    margin: 0 0 8px;
}

.section-css-modal-box code {
    background: rgba(74,58,34,.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12.5px;
}

.section-css-modal-box textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    border: 1px solid rgba(74,58,34,.2);
    border-radius: 8px;
    resize: vertical;
}


/* =========================================================
   HTML EDITOR
========================================================= */

.classic-html-editor {

    display: none;

    width: 100%;
    min-height: 520px;

    box-sizing: border-box;

    border: 0;

    padding: 28px;

    resize: vertical;

    outline: none;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 13px;

    line-height: 1.6;
}

/* admin/page-editor.php's HTML mode reuses .classic-html-editor for its
   font/padding, but shows/hides itself via #peHtmlMode's own wrapper (the
   outer Visual/HTML mode toggle), not the classic editor's own Visual/HTML
   JS — so the class's default display:none (meant to stay hidden until
   that JS reveals it) must be overridden here, and it needs its own
   border/radius since it isn't nested in .classic-editor-panel's frame. */
#pbHtmlContent{display:block; border:1px solid rgba(74,58,34,0.16); border-radius:10px; margin-top:2px;}


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

.classic-editor-help {
    padding: 0 20px 16px;
}


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

@media (max-width: 700px) {

    .classic-toolbar {
        gap: 4px;
    }


    .classic-toolbar button,
    .classic-select {
        font-size: 11px;
        padding: 5px 8px;
    }


    .classic-editor-content,
    .classic-html-editor {
        min-height: 420px;
        padding: 18px;
    }

}


/* =========================================================
   PRINT
   .no-print is hidden on paper; .print-only only shows on
   paper (e.g. a report header with the applied date range).
========================================================= */

.print-only { display: none; }

@media print {
    .admin-sidebar,
    .no-print {
        display: none !important;
    }

    .admin-main {
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-only {
        display: block;
    }

    .admin-panel {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .admin-stat-grid {
        break-inside: avoid;
    }
}


/* =========================================================
   SHIPPING & DELIVERY
   Shared by shipping-order-limits.php, shipping-methods.php,
   and shipping-areas.php (three separate pages).
========================================================= */
.ship-page{font-size:15px;}
.ship-page .admin-panel h3{font-size:19px;}
.shipping-workspace-tabs{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 20px; padding:6px; border-radius:14px; background:var(--cream-2, #F4EAD2);}
.shipping-workspace-tab{appearance:none; border:0; border-radius:10px; background:transparent; color:var(--brown-soft, #8a795f); cursor:pointer; flex:1; min-width:180px; padding:12px 16px; text-align:left; font:inherit; font-size:14px; font-weight:700; transition:background .15s, color .15s, box-shadow .15s;}
.shipping-workspace-tab small{display:block; margin-top:3px; font-size:12px; font-weight:500; opacity:.85;}
.shipping-workspace-tab:hover{color:var(--forest-deep, #28401F);}
.shipping-workspace-tab.active{background:#fff; color:var(--forest-deep, #28401F); box-shadow:0 2px 8px rgba(74,58,34,.12);}
.shipping-workspace-panel[hidden]{display:none;}
.shipping-workspace-panel{width:100%; max-width:none; box-sizing:border-box;}
.duplicate-method-action{margin:8px 0 0 10px; padding:7px 11px; border:1px solid currentColor; border-radius:8px; background:transparent; color:inherit; cursor:pointer; font:inherit; font-size:13px; font-weight:700;}
.duplicate-method-action:hover{background:rgba(138, 45, 35, .08);}
@media (max-width:760px){ .shipping-workspace-tab{min-width:100%;} }
.ship-steps{display:flex; flex-direction:column; gap:24px;}
.ship-step{border-left:3px solid var(--forest, #28401F); padding:6px 0 6px 16px;}
.ship-step h4{margin:0 0 6px; font-size:16px; color:var(--forest-deep, #28401F);}
.ship-step .admin-hint{margin-top:2px;}
.order-limit-panels{margin-top:16px;}
.order-limit-group[hidden]{display:none;}
.ship-summary{background:var(--cream-2, #F4EAD2); border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.5; margin-bottom:4px;}
.ship-summary b{color:var(--forest-deep, #28401F);}
.range-row{position:relative; border:1px solid rgba(74,58,34,.12); border-radius:12px; padding:14px; margin-bottom:12px; background:#fff;}
.range-row .admin-form-row{align-items:end;}
.range-row-remove{position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(74,58,34,.12); color:var(--brown, #4A3A22); font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s, color .15s;}
.range-row-remove:hover:not(:disabled){background:#8A2D23; color:#fff;}
.range-row-remove:disabled{opacity:.35; cursor:not-allowed;}
.ship-empty{color:var(--brown-soft, #8a795f); font-size:14.5px; padding:24px; text-align:center; border:1px dashed rgba(74,58,34,.2); border-radius:12px;}
.charge-badge{display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--cream-2, #F4EAD2); color:var(--forest-deep, #28401F); margin-left:8px;}

/* ---- bigger, clearer form typography ---- */
.ship-page .admin-form label{font-size:14.5px; font-weight:700; gap:7px;}
.ship-page .admin-form{max-width:none; width:100%;}
.ship-page .admin-form input, .ship-page .admin-form select, .ship-page .admin-form textarea{font-size:15.5px; padding:12px 14px;}
.ship-page .ship-step > .admin-form-row{grid-template-columns:repeat(2, minmax(0, 360px)); max-width:760px;}
.ship-page #defaultFields label{max-width:360px;}
.ship-page .range-row{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; align-items:end;}
.ship-page .range-row.price-range{grid-template-columns:repeat(4, minmax(135px, 1fr));}
.ship-page .range-row.price-range label{min-width:0;}
.ship-page .range-row.price-range{border-color:rgba(40,64,31,.28); background:#fbfdf9;}
.ship-page .range-row .admin-form-row{display:contents;}
@media (max-width:900px){ .ship-page .range-row.price-range{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:600px){ .ship-page .ship-step > .admin-form-row, .ship-page .range-row{grid-template-columns:1fr;} }
.ship-page .admin-hint{font-size:13px;}
.ship-page .admin-table{font-size:14.5px;}
.ship-page .admin-table th{font-size:12px;}

/* ---- charge-type tabs (default / price based / weighted) ---- */
.ship-tabs{display:flex; gap:10px; margin:6px 0 16px; flex-wrap:wrap;}
.ship-tab{flex:1; min-width:150px; text-align:center; padding:14px 12px; border-radius:12px; border:1.5px solid rgba(74,58,34,.18); background:#fff; font-size:14.5px; font-weight:700; color:var(--brown-soft, #8a795f); cursor:pointer; transition:border-color .15s, background .15s, color .15s;}
.ship-tab:hover{border-color:var(--forest, #28401F);}
.ship-tab small{display:block; font-weight:500; font-size:12px; opacity:.85; margin-top:3px;}
.ship-tab.active{background:var(--forest, #28401F); border-color:var(--forest, #28401F); color:#fff;}

/* ---- saved-methods filter tabs ---- */
.list-tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.list-tab{padding:9px 16px; border-radius:999px; border:1.5px solid rgba(74,58,34,.18); background:#fff; font-size:13.5px; font-weight:700; color:var(--brown-soft, #8a795f); cursor:pointer;}
.list-tab.active{background:var(--cream-2, #F4EAD2); border-color:var(--forest, #28401F); color:var(--forest-deep, #28401F);}

/* ---- Indian-states multi-select ---- */
.state-picker{border:1px solid rgba(74,58,34,.18); border-radius:12px; padding:16px; background:#fbf9f4; margin-top:6px;}
.state-picker-label{font-size:14.5px; font-weight:700; color:var(--brown, #4A3A22); display:block; margin-bottom:4px; cursor:pointer;}
.state-picker-label::marker{color:var(--forest, #28401F);}
.state-picker[open]{box-shadow:0 8px 18px -14px rgba(40,64,31,.45);}
.state-picker-toolbar{display:flex; align-items:center; gap:8px; margin:10px 0 12px;}
.state-picker-toolbar input{flex:1; border:1px solid rgba(74,58,34,.2); border-radius:10px; padding:11px 14px; font-size:14.5px; font-family:inherit;}
.btn-sm{padding:9px 14px !important; font-size:13px !important; white-space:nowrap;}
.state-chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:0;}
.state-chip-row{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin;}
.state-chip-row:not(:empty){margin-bottom:12px;}
.state-chip{background:var(--forest, #28401F); color:#fff; border-radius:999px; padding:7px 8px 7px 14px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:7px;}
.state-chip button{background:rgba(255,255,255,.25); border:none; color:#fff; width:19px; height:19px; border-radius:50%; font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
.state-grid{max-height:230px; overflow-y:auto; display:grid; grid-template-columns:1fr; gap:2px 10px; border-top:1px dashed rgba(74,58,34,.15); padding-top:10px;}
.state-option{display:flex !important; flex-direction:row !important; align-items:center; justify-content:flex-start; gap:9px; width:100%; box-sizing:border-box; font-size:14.5px; font-weight:500; text-align:left; padding:7px 6px; border-radius:8px; cursor:pointer;}
.state-option:hover{background:var(--cream-2, #F4EAD2);}
.state-option input{width:17px; height:17px; accent-color:var(--forest, #28401F); cursor:pointer; flex-shrink:0;}
.state-option.is-hidden{display:none;}
.state-count{font-size:13px; font-weight:600; color:var(--brown-soft, #8a795f); margin-left:auto;}

/* ---- device visibility dropdown-checkbox (admin/floating-buttons.php) ---- */
.visibility-picker{border:1px solid rgba(74,58,34,.2); border-radius:10px; padding:11px 14px; background:#fff;}
.visibility-picker-label{font-size:13.5px; font-weight:700; color:var(--brown, #4A3A22); cursor:pointer; display:flex; align-items:center; gap:6px; list-style:none;}
.visibility-picker-label::-webkit-details-marker{display:none;}
.visibility-picker-label::before{content:'▸'; font-size:10px; color:var(--forest, #28401F); transition:transform .15s ease;}
.visibility-picker[open] .visibility-picker-label::before{transform:rotate(90deg);}
.visibility-picker-summary{font-weight:500; color:var(--brown-soft, #8a795f);}
.visibility-picker-options{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px; padding-top:10px; border-top:1px dashed rgba(74,58,34,.15);}
.visibility-option{display:flex !important; flex-direction:row !important; align-items:center; gap:8px; font-size:13.5px; font-weight:500 !important; padding:5px 6px; border-radius:8px; cursor:pointer;}
.visibility-option:hover{background:var(--cream-2, #F4EAD2);}
.visibility-option input{width:16px; height:16px; accent-color:var(--forest, #28401F); cursor:pointer;}

/* ---- pin code tag entry ---- */
.pincode-chip-box{border:1px solid rgba(74,58,34,.2); border-radius:10px; padding:8px 10px; background:#fff; display:flex; flex-wrap:wrap; gap:7px; align-items:center;}
.pincode-chip-box:focus-within{border-color:var(--forest, #28401F);}
.pincode-chip-box input{border:none !important; outline:none; flex:1; min-width:160px; padding:6px 4px !important; font-size:14.5px;}

/* ---- weighted ranges: each added range is its own light-colored panel, stacked below ---- */
.ship-page .range-row.weight-range{border-color:rgba(74,58,34,.16);}
.range-row-tag{grid-column:1/-1; font-size:12px; font-weight:700; color:var(--forest-deep, #28401F); margin:-4px 0 2px; text-transform:uppercase; letter-spacing:.02em;}

/* ============ SECTION BUILDER (admin/custom-section-form.php) ============ */
.cs-builder{max-width:820px;}
.cs-builder label{font-size:12.5px; font-weight:700; color:var(--brown); display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.cs-builder label:last-child{margin-bottom:0;}
.cs-builder input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
.cs-builder select, .cs-builder textarea{
  border:1px solid rgba(74,58,34,0.2); border-radius:10px; padding:11px 14px; font-family:inherit; font-size:13.5px; outline:none; width:100%; box-sizing:border-box;
}
.cs-builder input:focus, .cs-builder select:focus, .cs-builder textarea:focus{border-color:var(--forest, #28401F);}
.cs-builder input[type=range]{width:100%;}
.cs-builder .admin-checkbox{flex-direction:row !important; align-items:center; gap:8px !important; margin-bottom:10px;}
.cs-builder .cs-field-group{margin-bottom:16px;}
.cs-builder .cs-field-group:last-child{margin-bottom:0;}
.cs-type-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px;}
.cs-type-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  border:1.5px solid rgba(74,58,34,0.16); border-radius:14px; padding:14px; background:var(--white);
  cursor:pointer; font-family:inherit; transition:border-color .15s ease, background .15s ease;
}
.cs-type-card:hover{border-color:var(--forest, #28401F);}
.cs-type-card.active{border-color:var(--forest, #28401F); background:var(--cream-2, #F4EAD2);}
.cs-type-card .cs-type-ic{width:26px; height:26px; stroke-width:1.6; color:var(--forest, #28401F);}
.cs-type-card b{font-size:13.5px; color:var(--brown);}
.cs-type-card small{font-size:11.5px; color:var(--brown-soft); line-height:1.4; font-weight:400;}

.cs-tabs{display:flex; gap:4px; margin-bottom:18px; border-bottom:1.5px solid rgba(74,58,34,0.12); flex-wrap:wrap;}
.cs-tab-btn{
  background:none; border:none; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--brown-soft);
  padding:11px 16px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1.5px;
}
.cs-tab-btn:hover{color:var(--brown);}
.cs-tab-btn.active{color:var(--forest, #28401F); border-bottom-color:var(--forest, #28401F);}
.cs-tab-panel{display:none;}
.cs-tab-panel.active{display:block;}

.cs-subblock{border-top:1px dashed rgba(74,58,34,0.16); margin-top:18px; padding-top:16px; display:flex; flex-direction:column; gap:16px;}
.cs-subblock h4{font-size:13.5px; color:var(--forest-deep, #28401F);}
.cs-three-col{grid-template-columns:repeat(3,1fr) !important;}
.cs-four-col{grid-template-columns:repeat(4,1fr) !important;}

.cs-bp-tabs{display:flex; gap:8px; margin-bottom:14px;}
.cs-bp-btn{
  background:var(--cream-2, #F4EAD2); border:1.5px solid transparent; border-radius:999px; font-family:inherit;
  font-size:12.5px; font-weight:700; color:var(--brown-soft); padding:7px 16px; cursor:pointer;
}
.cs-bp-btn.active{background:var(--forest, #28401F); color:#fff;}
.cs-bp-panel{display:none;}
.cs-bp-panel.active{display:block;}

@media (max-width:700px){
  .cs-three-col, .cs-four-col{grid-template-columns:1fr 1fr !important;}
}

/* =========================================================
   PAGE EDITOR LAYOUT (admin/page-editor.php)
   Single full-width column: title/slug/status/categories up top in
   #pageSettingsPanel, then the visual builder / raw HTML below it, at the
   page's full width — no right sidebar (status, categories moved up into
   #pageSettingsPanel; Featured Image removed).
========================================================= */
.pe-layout{display:block;}
.pe-main{min-width:0;}
.pe-layout .admin-form{max-width:none;}
/* Toolbar's "Customize" button scrolls here and triggers this once, via
   classList.add — a brief highlight so it's obvious something happened. */
#pageSettingsPanel.pb-pulse{animation:pbSidebarPulse 1s ease;}
@keyframes pbSidebarPulse{
  0%, 100%{box-shadow:none;}
  30%{box-shadow:0 0 0 3px rgba(40,64,31,0.35);}
}

/* =========================================================
   PAGE BUILDER (admin/page-builder.php)
   A nested outline of Section > Row > Column > Block boxes, each with a
   drag handle + Edit/Duplicate/Hide/Delete toolbar. Every level is built
   and re-rendered entirely by JS; these rules only style the shell.
========================================================= */
.pb-builder-panel{padding:20px;}
/* Row above the toolbar: mode tabs (Visual/HTML) on the left, Save/Preview/
   Publish on the right — same actions as before, just relocated up next to
   the tabs instead of a separate panel below the canvas. */
.pb-topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.pb-topbar-actions{display:flex; gap:8px; flex-wrap:wrap;}
/* Toolbar (+ Section / + Row / + Column / Elements / Advanced Elements /
   Customize on the left, device-preview + fullscreen on the right) — no
   sidebar, so the canvas below stays full-width. + Section adds directly
   (click or drag); + Elements / + Advanced Elements toggle the same chip
   panel open right underneath, scoped to a different group. Collapsed by
   default (nothing rendered) keeps the page clean until the admin actually
   wants to add something. */
.pb-toolbar{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px; flex-wrap:wrap;}
.pb-toolbar-group{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.pb-toolbar-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--white); border:1.5px solid rgba(74,58,34,0.18); border-radius:9px;
  padding:9px 16px; font-family:inherit; font-size:13px; font-weight:700; color:var(--brown); cursor:pointer;
}
.pb-toolbar-btn .ic{width:15px; height:15px; flex-shrink:0;}
.pb-toolbar-btn:hover{border-color:var(--forest, #28401F); background:var(--cream);}
.pb-toolbar-btn.active{background:var(--forest, #28401F); border-color:var(--forest, #28401F); color:#fff;}
.pb-toolbar-btn-primary{background:var(--forest-deep, #1c2e17); border-color:var(--forest-deep, #1c2e17); color:#fff;}
.pb-toolbar-btn-primary:hover{background:var(--forest, #28401F); border-color:var(--forest, #28401F);}
/* Device-preview + fullscreen icon buttons, right end of the toolbar —
   cosmetic canvas-width preview only, nothing is saved differently. */
.pb-toolbar-devices{
  background:var(--cream-2, #F4EAD2); border-radius:9px; padding:3px; gap:2px;
}
.pb-device-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; background:none; border:none; border-radius:7px;
  color:var(--brown-soft); cursor:pointer;
}
.pb-device-btn .ic{width:16px; height:16px;}
.pb-device-btn:hover{background:rgba(74,58,34,0.08); color:var(--brown);}
.pb-device-btn.active{background:var(--forest, #28401F); color:#fff;}
/* Canvas frame — device buttons above constrain this to simulate tablet /
   mobile widths; Desktop (default) is unconstrained. */
.pb-canvas-frame{transition:max-width .18s ease;}
.pb-canvas-frame.device-tablet{max-width:768px; margin:0 auto; border:1px solid rgba(74,58,34,0.18); border-radius:14px; padding:16px; background:var(--cream-2, #F4EAD2);}
.pb-canvas-frame.device-mobile{max-width:390px; margin:0 auto; border:1px solid rgba(74,58,34,0.18); border-radius:14px; padding:16px; background:var(--cream-2, #F4EAD2);}
/* Fullscreen (focus) mode — covers the viewport so long pages are easier to
   build without scrolling past Page Settings / SEO. Toggled by the same
   button, no data changes. */
.pb-builder-panel.is-fullscreen{
  position:fixed; inset:0; z-index:1000; overflow-y:auto;
  border-radius:0; margin:0; background:var(--white);
}

/* Work area: Elements/Advanced Elements palette as a left sidebar next to
   the canvas (not a dropdown under the toolbar) — closed by default (no
   width taken), opens to a fixed-width column when either toolbar button
   is active. Sticky so it stays visible while scrolling a long canvas. */
.pb-work-area{display:flex; align-items:flex-start; gap:16px; margin-top:10px;}
.pb-canvas-frame{flex:1; min-width:0;}
.pb-toolbox-panel{
  flex:0 0 260px; width:260px; padding:16px; position:sticky; top:20px;
  background:var(--white); border:1.5px solid rgba(74,58,34,0.14); border-radius:14px;
  box-shadow:0 10px 24px -18px rgba(28,46,22,0.35);
}
@media (max-width:900px){
  .pb-work-area{flex-direction:column;}
  .pb-toolbox-panel{width:100%; flex-basis:auto; position:static;}
}
.pb-toolbox-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.pb-toolbox-title{font-size:14px; font-weight:800; color:var(--forest-deep, #1c2e17);}
.pb-toolbox-close{background:none; border:none; font-size:20px; line-height:1; color:var(--brown-soft); cursor:pointer; padding:0 2px;}
.pb-toolbox-search{
  display:flex; align-items:center; gap:8px; margin-bottom:16px; padding:8px 12px;
  background:var(--cream-2, #F4EAD2); border-radius:9px; color:var(--brown-soft);
}
.pb-toolbox-search .ic{width:15px; height:15px; flex-shrink:0;}
.pb-toolbox-search input{
  flex:1; border:none; background:none; font-family:inherit; font-size:13px; color:var(--brown); outline:none;
}
.pb-toolbox-group-label{
  font-size:10.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--brown-soft); margin:16px 0 8px;
}
.pb-toolbox-group-label:first-of-type{margin-top:0;}
.pb-toolbox-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
.pb-palette-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:var(--cream-2, #F4EAD2); border:1px solid rgba(74,58,34,0.12); border-radius:10px;
  padding:14px 8px; font-size:11.5px; font-weight:700; color:var(--brown); cursor:grab; user-select:none;
}
.pb-palette-chip-icon{width:20px; height:20px; color:var(--forest, #28401F); flex-shrink:0;}
.pb-palette-chip:hover{border-color:var(--forest, #28401F); background:var(--white); box-shadow:0 6px 16px -10px rgba(28,46,22,0.4);}
.pb-palette-chip.dragging{opacity:0.4;}
@media (max-width:560px){ .pb-toolbox-grid{grid-template-columns:repeat(2, 1fr);} }
.pb-canvas{display:flex; flex-direction:column; gap:14px;}
.pb-drop-active{outline:2px dashed var(--forest, #28401F); outline-offset:-2px; background:rgba(34,70,29,0.06);}
.pb-blocks-empty-hint{
  border:1.5px dashed rgba(74,58,34,0.25); border-radius:10px; padding:16px; text-align:center;
  font-size:12.5px; color:var(--brown-soft);
}
/* Divi-style "choose your columns" picker — shown inside a section with no
   rows yet, or on demand via "+ Add Row" for one that already has some. */
.pb-layout-picker{margin-top:10px; padding:14px; background:var(--cream-2, #F4EAD2); border:1.5px dashed rgba(74,58,34,0.25); border-radius:10px;}
.pb-layout-presets{display:flex; flex-wrap:wrap; gap:10px;}
.pb-layout-preset{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:var(--white); border:1px solid rgba(74,58,34,0.16); border-radius:8px;
  padding:10px 12px; cursor:pointer; font-family:inherit;
}
.pb-layout-preset:hover{border-color:var(--forest, #28401F); background:var(--cream);}
.pb-layout-preview{display:flex; gap:3px; width:72px; height:26px;}
.pb-layout-preview span{background:var(--forest, #28401F); opacity:0.35; border-radius:3px;}
.pb-layout-preset:hover .pb-layout-preview span{opacity:0.7;}
.pb-layout-preset small{font-size:10.5px; font-weight:700; color:var(--brown-soft);}
.pb-layout-picker-cancel{
  margin-top:10px; background:none; border:none; font-family:inherit; font-size:12px; font-weight:700;
  color:var(--brown-soft); cursor:pointer; text-decoration:underline; padding:0;
}
.pb-sections{display:flex; flex-direction:column; gap:14px;}
.pb-empty-canvas{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:48px 24px; border:1.5px dashed rgba(74,58,34,0.25); border-radius:16px;
  background:var(--cream-2, #F4EAD2);
}
.pb-empty-canvas-icon{
  width:52px; height:52px; border-radius:50%; background:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  color:var(--forest, #28401F); margin-bottom:14px; box-shadow:0 6px 14px -8px rgba(28,46,22,0.3);
}
.pb-empty-canvas h4{font-size:16px; margin:0 0 8px; color:var(--forest-deep, #28401F);}
.pb-empty-canvas .admin-hint{max-width:480px; margin:0 0 20px;}

/* Section = blue, Row = green, Column = amber — same idea as most visual
   page builders, so the nesting level is readable at a glance without
   reading every label. Colors are borders + a tinted header only; node
   bodies stay white so real content previews accurately. */
.pb-node{
  background:var(--white); border:1.5px solid rgba(74,58,34,0.14); border-radius:14px;
  overflow:hidden;
}
.pb-node-section{border-color:#B9D3F5;}
.pb-node-row{border-color:#BEE0C4;}
.pb-node-column{border-color:#F3D8A8;}
.pb-node.dragging{opacity:0.4;}
.pb-node-head{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--cream-2); border-bottom:1px solid rgba(74,58,34,0.1);
}
.pb-node-section > .pb-node-head{background:#E9F1FD; border-bottom-color:#B9D3F5;}
.pb-node-row > .pb-node-head{background:#EAF7EC; border-bottom-color:#BEE0C4;}
.pb-node-column > .pb-node-head{background:#FDF1DC; border-bottom-color:#F3D8A8;}
.pb-node-block > .pb-node-head{background:var(--white); border-bottom:none;}
.pb-drag{cursor:grab; color:var(--brown-soft); flex-shrink:0; display:flex;}
.pb-drag .ic{width:15px; height:15px;}
.pb-drag:active{cursor:grabbing;}
.pb-node-label{flex:1; font-size:13px; font-weight:700; color:var(--brown); display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;}
.pb-node-label small{font-weight:600; color:var(--brown-soft); font-size:11.5px;}
.pb-hidden-badge{background:#F4D9D2; color:#9A3B26; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px;}
.pb-node-actions{display:flex; align-items:center; gap:4px; flex-shrink:0;}
.pb-icon-btn{
  display:flex; align-items:center; justify-content:center; width:26px; height:26px;
  background:none; border:none; border-radius:7px; color:var(--forest, #28401F); cursor:pointer; padding:0;
}
.pb-icon-btn .ic{width:14.5px; height:14.5px;}
.pb-icon-btn:hover{background:rgba(28,46,22,0.1);}
.pb-icon-btn:disabled{opacity:0.3; cursor:default;}
.pb-icon-btn:disabled:hover{background:none;}
.pb-icon-btn.danger{color:#B23B2E;}
.pb-icon-btn.danger:hover{background:rgba(178,59,46,0.12);}
.pb-node-body{padding:14px;}

.pb-rows, .pb-cols, .pb-blocks{display:flex; flex-direction:column; gap:12px;}
.pb-cols{flex-direction:row; flex-wrap:wrap;}
.pb-node-column{flex:1 1 220px; min-width:220px;}

.pb-add-btn{
  align-self:flex-start; background:none; border:1.5px dashed rgba(74,58,34,0.3); border-radius:10px;
  padding:9px 16px; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--forest, #28401F); cursor:pointer;
}
.pb-add-btn:hover{border-color:var(--forest, #28401F); background:var(--cream-2);}

/* ---- Settings modal ---- */
.pb-modal{
  display:none; position:fixed; inset:0; background:rgba(28,20,10,0.45); z-index:200;
  align-items:center; justify-content:center; padding:20px;
}
.pb-modal.open{display:flex;}
.pb-modal-box{
  background:var(--white); border-radius:16px; width:100%; max-width:640px; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);
}
.pb-modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px 0;}
.pb-modal-head h3{margin:0;}
.pb-modal-head button{background:none; border:none; font-size:26px; line-height:1; color:var(--brown-soft); cursor:pointer;}
#pbModalTabs{padding:0 22px; margin-top:10px;}
.pb-modal-body{flex:1; overflow-y:auto; padding:4px 22px 20px;}
.pb-modal-foot{padding:14px 22px; border-top:1px solid rgba(74,58,34,0.12);}

.pb-text-toolbar{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.pb-text-toolbar button, .pb-text-toolbar select{
  background:var(--cream-2); border:1px solid rgba(74,58,34,0.16); border-radius:8px;
  padding:6px 10px; font-family:inherit; font-size:12px; cursor:pointer;
}
.pb-text-editable{
  min-height:120px; border:1px solid rgba(74,58,34,0.2); border-radius:10px; padding:12px 14px;
  font-size:13.5px; line-height:1.7; outline:none;
}
.pb-text-editable:focus{border-color:var(--forest);}

.pb-gallery-editor{display:flex; flex-direction:column; gap:8px;}
.pb-gallery-edit-item{display:flex; align-items:center; gap:10px;}
.pb-gallery-edit-item img{width:44px; height:44px; object-fit:cover; border-radius:8px; flex-shrink:0;}
.pb-gallery-edit-item input{flex:1;}
.pb-gallery-edit-item button{background:none; border:none; color:#B23B2E; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;}

@media (max-width:700px){
  .pb-cols{flex-direction:column;}
  .pb-node-column{min-width:0;}
}

/* ============ RESPONSIVE VIEW SELECTOR (Desktop/Tablet/Mobile tabs) ============
   Reused across Design Settings wherever a setting can be overridden per
   device: per-section Layout/Background, and the Product/Category/
   Testimonial styling panels' Columns + Alignment. */
.view-tabs{display:flex; gap:4px; margin-bottom:16px; border-bottom:1.5px solid rgba(74,58,34,0.12); flex-wrap:wrap;}
.view-tab-btn{
  background:none; border:none; font-family:inherit; font-size:13px; font-weight:700; color:var(--brown-soft);
  padding:9px 14px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1.5px;
  display:flex; align-items:center; gap:7px;
}
.view-tab-btn:hover{color:var(--brown);}
.view-tab-btn.active{color:var(--forest, #28401F); border-bottom-color:var(--forest, #28401F);}
.view-tab-btn .view-tab-dot{width:6px; height:6px; border-radius:50%; background:var(--gold, #DFA524); display:none;}
.view-tab-btn.has-override .view-tab-dot{display:inline-block;}

/* Top-level Customization section tabs (Design Settings > Brand & Colors /
   Product / Category / Testimonials). Pill-style, distinct from the
   underline .view-tab-btn tabs used one level deeper for Desktop/Tablet/Mobile. */
.dstab-nav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}
.dstab-btn{
  background:var(--white); border:1.5px solid rgba(74,58,34,0.15); border-radius:999px;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--brown-soft);
  padding:10px 18px; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.dstab-btn:hover{border-color:#cbd5e1; color:#0f172a; background:#f8fafc;}
.dstab-btn.active{background:#2563eb !important; border-color:#1d4ed8 !important; color:#ffffff !important; box-shadow: 0 2px 6px rgba(37,99,235,0.25) !important;}
.dstab-panel{display:none;}
.dstab-panel.active{display:block;}
.view-panel{display:none;}
.view-panel.active{display:block;}
.view-inherit-hint{font-size:11.5px; color:var(--brown-soft); font-weight:400; margin-bottom:14px;}

/* ============ BUSINESS TEMPLATES (admin/templates.php) ============ */
.tpl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px;}
.tpl-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left;
  border:1.5px solid rgba(74,58,34,0.16); border-radius:16px; padding:18px; background:var(--white);
}
.tpl-card.active{border-color:var(--forest, #28401F); background:var(--cream-2, #F4EAD2);}
.tpl-thumb{width:100%; aspect-ratio:16/10; border-radius:10px; background-size:cover; background-position:center; margin-bottom:6px;}
.tpl-current-store-preview,.tpl-demo-store-preview{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(74,58,34,.13);isolation:isolate;}
.tpl-current-store-preview iframe,.tpl-demo-store-preview iframe{position:absolute;inset:0;width:500%;height:500%;border:0;transform:scale(.2);transform-origin:top left;pointer-events:none;background:#fff;}
.tpl-current-store-preview>span,.tpl-demo-store-preview>span{position:absolute;left:8px;bottom:7px;z-index:1;padding:4px 8px;border-radius:999px;background:rgba(20,31,18,.88);color:#fff;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.14);}
.tpl-card b{font-size:14.5px; color:var(--brown);}
.tpl-card small{font-size:12px; color:var(--brown-soft); line-height:1.5; font-weight:400;}
.tpl-meta{font-size:11px; color:var(--brown-soft); font-weight:600; margin:2px 0 6px;}
.tpl-card-actions{display:flex; flex-direction:column; gap:6px; width:100%; margin-top:4px;}
.tpl-card-actions .btn{min-height:38px;padding:9px 14px;font-size:12px;}
.tpl-card form{width:100%; margin:0;}
.tpl-active-badge{
  position:absolute; top:14px; right:14px; font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  z-index:5; background:var(--forest, #28401F); color:#fff; padding:3px 9px; border-radius:999px;
  white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.16);
}

/* ============ PAYMENT METHOD CARDS (admin/signup.php, admin/plan-checkout.php) ============ */
.pm-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px;}
.pm-card{
  position:relative; display:flex; align-items:flex-start; gap:12px; text-align:left; cursor:pointer;
  border:1.5px solid rgba(74,58,34,0.16); border-radius:14px; padding:16px 18px; background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pm-card:hover{border-color:rgba(40,64,31,0.4);}
.pm-card.is-selected{
  border-color:var(--forest, #28401F); background:var(--cream-2, #F4EAD2); box-shadow:0 0 0 3px rgba(40,64,31,0.12);
}
.pm-radio{flex-shrink:0; width:18px; height:18px; margin-top:2px; accent-color:var(--forest, #28401F); cursor:pointer;}
.pm-card-body{display:flex; flex-direction:column; gap:3px; min-width:0;}
.pm-card-title{font-size:14.5px; font-weight:700; color:var(--brown);}
.pm-card.is-selected .pm-card-title{color:var(--forest-deep, #1c2e17);}
.pm-card-desc{font-size:12.5px; color:var(--brown-soft); line-height:1.5; font-weight:400;}
@media (max-width:520px){ .pm-grid{grid-template-columns:1fr;} }

/* ============ PRODUCT CATALOGUE MANAGER (Ultra-Clear High-End SaaS UI) ============ */
.product-page-header { margin-bottom: 20px; align-items: center; }
.product-header-title-row { display: flex; align-items: center; gap: 12px; }
.product-header-title-row h1 { font-size: 24px; font-weight: 800; color: var(--forest-deep, #1c2e17); letter-spacing: -0.02em; margin: 0; }
.product-count-badge { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; background: rgba(40,64,31,0.08); color: var(--forest, #28401F); font-size: 12px; font-weight: 800; }
.product-page-header .admin-topline-actions { display: flex; align-items: center; gap: 10px; }
.product-page-header .export-trigger,
.product-page-header #importTrigger {
  height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1.5px solid #d1d5db;
  background: #ffffff;
  color: #334155;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.product-page-header .export-trigger:hover,
.product-page-header #importTrigger:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}
.product-add-btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  border-radius: 9px; 
  height: 38px;
  padding: 0 18px; 
  font-size: 13px;
  font-weight: 700; 
  background: var(--forest, #28401F); 
  color: #fff; 
  box-shadow: 0 4px 12px rgba(40,64,31,0.2); 
  transition: all 0.15s ease; 
  text-decoration: none; 
}
.product-add-btn:hover { background: var(--forest-deep, #1c2e17); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(40,64,31,0.28); color: #fff; }


/* Single Unified Filter Tabs Bar (Modern SaaS Standard) */
.product-tabs-header { 
  padding: 10px 18px; 
  border-bottom: 1px solid #e2e8f0; 
  overflow-x: auto; 
  background: #fafbf9; 
  scrollbar-width: none; 
}
.product-tabs-header::-webkit-scrollbar { display: none; }
.product-underline-tabs { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.product-underline-tabs .tab-link { 
  display: inline-flex; 
  align-items: center; 
  gap: 7px; 
  padding: 6px 14px; 
  border-radius: 999px; 
  color: #475569; 
  text-decoration: none; 
  transition: all 0.15s ease; 
  white-space: nowrap; 
  border: 1px solid transparent; 
  font-size: 13px;
  font-weight: 600;
}
.product-underline-tabs .tab-link:hover { 
  background: #f1f5f9; 
  color: #0f172a; 
}
.product-underline-tabs .tab-link.active { 
  background: var(--forest-deep, #1c2e17); 
  color: #ffffff; 
  box-shadow: 0 2px 6px rgba(28,46,22,0.15); 
}
.product-underline-tabs .count-pill { 
  display: inline-grid; 
  place-items: center; 
  min-width: 20px; 
  height: 20px; 
  padding: 0 6px; 
  border-radius: 999px; 
  background: #e2e8f0; 
  color: #334155; 
  font-size: 11px; 
  font-weight: 800; 
  line-height: 1; 
}
.product-underline-tabs .tab-link.active .count-pill { 
  background: rgba(255,255,255,0.25); 
  color: #ffffff; 
}
.product-underline-tabs .tab-link:not(.active) .count-pill.badge-in { background: #ecfdf5; color: #065f46; }
.product-underline-tabs .tab-link:not(.active) .count-pill.badge-low { background: #fffbeb; color: #b45309; }
.product-underline-tabs .tab-link:not(.active) .count-pill.badge-out { background: #fef2f2; color: #b91c1c; }
.product-underline-tabs .tab-link:not(.active) .count-pill.badge-feat { background: #fef9c3; color: #854d0e; }

/* Streamlined Single-Line Toolbar */
.products-toolbar-row { padding: 12px 18px; background: #ffffff; border-bottom: 1px solid #f1f5f9; }
.products-filter-form { display: flex; align-items: center; gap: 12px; width: 100%; flex-wrap: wrap; margin: 0; }
.products-filter-form .search-wrapper { position: relative; display: flex; align-items: center; flex: 1; min-width: 260px; }
.products-filter-form .search-wrapper .search-icon { position: absolute; left: 12px; width: 16px; height: 16px; color: #94a3b8; pointer-events: none; }
.products-filter-form .search-wrapper input { width: 100%; min-height: 40px; padding: 8px 34px 8px 36px; border-radius: 9px; border: 1.5px solid #cbd5e1; font-size: 13.5px; color: #0f172a; background: #ffffff; transition: all 0.15s ease; outline: none; }
.products-filter-form .search-wrapper input:focus { border-color: var(--forest, #28401F); box-shadow: 0 0 0 3px rgba(40,64,31,0.08); }
.search-clear-btn { position: absolute; right: 10px; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: 10px; font-weight: 800; text-decoration: none; }
.search-clear-btn:hover { background: var(--forest, #28401F); color: #ffffff; }

.toolbar-controls-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.toolbar-controls-group .filter-select { min-height: 40px; padding: 8px 32px 8px 12px; border-radius: 9px; border: 1.5px solid #cbd5e1; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; font-size: 13px; font-weight: 600; color: #1e293b; outline: none; transition: border-color 0.15s ease; cursor: pointer; }
.toolbar-controls-group .filter-select:focus { border-color: var(--forest, #28401F); }

/* Compact Date Range Filter Box */
.date-filter-box { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 5px 10px; border-radius: 9px; border: 1px solid rgba(74,58,34,0.18); background: #ffffff; transition: all 0.15s ease; }
.date-filter-box:focus-within, .date-filter-box:hover { border-color: var(--forest, #28401F); box-shadow: 0 0 0 3px rgba(40, 64, 31, 0.08); }
.date-filter-box.has-value { border-color: var(--forest, #28401F); background: #f7faf6; }
.date-box-icon { width: 15px; height: 15px; color: var(--brown-soft, #6B7259); flex-shrink: 0; }
.filter-date-input { border: none; background: transparent; font-size: 12px; font-weight: 600; color: var(--brown, #3E3A2A); padding: 0; outline: none; cursor: pointer; font-family: inherit; width: 104px; }
.filter-date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.65; }
.filter-date-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.date-to-sep { color: var(--brown-soft, #6B7259); font-weight: 700; font-size: 11px; text-transform: uppercase; user-select: none; }
.date-clear-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(74,58,34,0.12); color: var(--brown, #3E3A2A); font-size: 10px; font-weight: 800; text-decoration: none; margin-left: 2px; }
.date-clear-btn:hover { background: #b9362c; color: #ffffff; }

/* Active Filter Chips */
.product-active-filters-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid rgba(74,58,34,0.08); background: #ffffff; }
.active-label { font-size: 12px; font-weight: 700; color: var(--brown, #3E3A2A); }
.product-filter-chips-list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #eef4ed; border: 1px solid rgba(40,64,31,0.2); color: var(--forest, #28401F); font-size: 12px; font-weight: 700; text-decoration: none; transition: all 0.15s ease; }
.filter-chip:hover { background: #e0ece0; }
.filter-chip span { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(40,64,31,0.15); font-size: 10px; font-weight: 800; }
.product-clear-all-link { font-size: 12px; font-weight: 800; color: #b9362c; text-decoration: none; margin-left: 4px; }
.product-clear-all-link:hover { text-decoration: underline; }

/* Floating Bulk Bar */
.bulk-actions-bar { display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; margin-bottom: 18px; border-radius: 14px; background: #eff6ff; border: 1.5px solid #bfdbfe; color: #1e3a8a; box-shadow: 0 4px 14px -3px rgba(37,99,235,0.12); }
.bulk-actions-bar.visible { display: flex; animation: slideDown 0.2s ease; }
.bulk-selected-count { font-size: 13.5px; font-weight: 700; color: #1e3a8a; }
.bulk-actions-right { display: flex; align-items: center; gap: 10px; }
.bulk-actions-bar .filter-select { background: rgba(255,255,255,0.12); color: #ffffff; border-color: rgba(255,255,255,0.25); }

/* High-Clarity Table Card */
.products-table-panel { padding: 0; overflow-x: auto; border-radius: 16px; border: 1px solid rgba(74,58,34,0.12); background: #ffffff; box-shadow: 0 4px 20px -5px rgba(74,58,34,0.06); }
.products-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.products-table thead th { padding: 12px 14px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brown-soft, #6B7259); border-bottom: 1px solid rgba(74,58,34,0.1); background: #fafbf8; white-space: nowrap; }
.products-table tbody tr { transition: background-color 0.15s ease; border-bottom: 1px solid rgba(74,58,34,0.06); }
.products-table tbody tr:last-child { border-bottom: none; }
.products-table tbody td { padding: 12px 14px; vertical-align: middle; }
.products-table tbody tr:hover td { background: #faf9f5; }
.products-table tbody tr.selected td { background: #e8f3e8; }

.product-list-identity { display: flex; align-items: center; gap: 12px; min-width: 180px; color: var(--brown, #3E3A2A); text-decoration: none; }
.product-list-thumb { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; object-fit: cover; background: var(--cream-2, #f4ead2); border: 1px solid rgba(74,58,34,0.12); transition: transform 0.15s ease; }
.product-list-identity:hover .product-list-thumb { transform: scale(1.05); }
.product-list-thumb-empty { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; background: #faf9f5; border: 1px solid rgba(74,58,34,0.12); color: var(--brown-soft, #6B7259); }
.product-list-thumb-empty svg { width: 20px; height: 20px; }
.product-list-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-name-link { color: #0f172a; font-size: 13.5px; font-weight: 700; line-height: 1.3; transition: color 0.15s ease; }
.product-subtext { color: #64748b; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.product-list-identity:hover .product-name-link { color: var(--forest, #28401F); text-decoration: underline; }
.product-variant-tag { display: inline-flex; align-items: center; width: fit-content; padding: 1px 7px; border-radius: 6px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 600; margin-top: 2px; border: 1px solid #e2e8f0; }

.product-category-pill { display: inline-flex; padding: 3px 9px; border-radius: 7px; background: #f8fafc; color: #334155; font-size: 11.5px; font-weight: 600; border: 1px solid #e2e8f0; white-space: nowrap; }
.product-price-cell .price-val { color: #0f172a; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.product-price-empty { display: inline-flex; padding: 2px 7px; border-radius: 6px; background: #f1f5f9; color: #94a3b8; font-size: 11px; font-weight: 600; }

.product-stock-combined { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; text-align: center; }
.stock-num { font-size: 13.5px; font-weight: 700; color: #1e293b; white-space: nowrap; }

.product-stock-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.product-stock-badge .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.product-stock-badge.is-in { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.product-stock-badge.is-low { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.product-stock-badge.is-out { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Interactive Star Button */
.product-star-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: 50%; color: #cbd5e1; cursor: pointer; transition: all 0.15s ease; }
.product-star-btn .star-icon { width: 16px; height: 16px; }
.product-star-btn:hover { background: rgba(223,165,36,0.15); color: #eab308; transform: scale(1.15); }
.product-star-btn.is-featured { color: #eab308; }

/* Action Buttons (Compact Micro-Pills with SVG Icons) */
.product-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.product-action-btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 5px; 
  justify-content: center; 
  padding: 5px 11px; 
  border-radius: 8px; 
  background: #ffffff; 
  border: 1px solid #e2e8f0; 
  color: #334155; 
  font-size: 12px; 
  font-weight: 700; 
  text-decoration: none; 
  cursor: pointer; 
  transition: all 0.15s ease; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.product-action-btn .btn-ic { width: 13px; height: 13px; flex-shrink: 0; stroke-width: 2; }
.product-action-btn:hover { 
  background: #f8fafc; 
  color: #0f172a; 
  border-color: #94a3b8; 
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.product-action-btn.copy-btn { 
  background: #ffffff; 
  color: #475569; 
  border-color: #e2e8f0; 
}
.product-action-btn.copy-btn:hover { 
  background: #f8fafc; 
  color: #0f172a; 
  border-color: #94a3b8; 
}
.product-action-btn.preview-btn { 
  background: #ffffff; 
  color: var(--forest, #28401F); 
  border-color: #e2e8f0; 
}
.product-action-btn.preview-btn:hover { 
  background: #f0fdf4; 
  color: #166534; 
  border-color: #86efac; 
}

/* Empty State Card */
.product-empty-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; color: var(--brown-soft, #6B7259); }
.product-empty-card .empty-icon { width: 44px; height: 44px; color: var(--brown-soft, #6B7259); margin-bottom: 12px; opacity: 0.5; }
.product-empty-card h3 { margin: 0 0 6px; font-size: 16px; color: var(--brown, #3E3A2A); font-weight: 700; }
.product-empty-card p { margin: 0 0 16px; font-size: 13px; max-width: 400px; color: var(--brown-soft, #6B7259); }

/* Pagination Navigation */
.product-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; color: var(--brown-soft, #6B7259); font-size: 13px; }
.product-pagination .page-indicator { font-weight: 500; }
.product-pagination .page-indicator b { color: var(--brown, #3E3A2A); font-weight: 800; }
.product-pagination .is-disabled { opacity: 0.45; pointer-events: none; }

@media (max-width: 800px) {
  .product-page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .admin-topline-actions { width: 100%; justify-content: flex-start; }
  .products-toolbar-row { padding: 12px; }
  .products-filter-form { flex-direction: column; align-items: stretch; gap: 10px; }
  .products-filter-form .search-wrapper { width: 100%; min-width: 100%; }
  .toolbar-controls-group { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar-controls-group select { width: 100% !important; justify-content: space-between; }

  /* Transform Data Table into Responsive Cards when screen is mobile (<800px) */
  .products-table-panel { border-radius: 12px; background: transparent; border: none; box-shadow: none; overflow: visible; }
  .products-table { display: block; width: 100%; min-width: 100%; }
  .products-table thead { display: none; }
  .products-table tbody { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .products-table tbody tr { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid rgba(74,58,34,0.14); border-radius: 14px; background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.04); position: relative; }
  .products-table tbody td { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border: none; }
  .products-table tbody td:before { content: attr(data-label); font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--brown-soft, #6B7259); letter-spacing: 0.04em; }
  .products-table tbody td.col-select { position: absolute; top: 14px; right: 14px; padding: 0; }
  .products-table tbody td.col-select:before { content: none; }
  .products-table tbody td[data-label="Product Name"] { padding-right: 30px; }
  .products-table tbody td[data-label="Product Name"]:before { content: none; }
  .products-table tbody td[data-label="Actions"] { border-top: 1px solid rgba(74,58,34,0.08); padding-top: 12px; margin-top: 4px; justify-content: flex-end; }
  .products-table tbody td[data-label="Actions"]:before { content: none; }
  .product-row-actions { width: 100%; justify-content: space-between; }
  .product-action-btn { flex: 1; text-align: center; }
}

/* ============ CATEGORY MANAGER (Modernized SaaS UI/UX) ============ */
.category-list-page { width: 100%; }
.category-list-column { min-width: 0; }

/* Modern Search & Order Hint Toolbar */
.category-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.category-search-form { flex: 1; max-width: 420px; }
.category-search-form .search-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.category-search-form .search-icon { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--brown-soft, #6B7259); pointer-events: none; }
.category-search-form input { width: 100%; min-height: 40px; padding: 8px 34px 8px 38px; border-radius: 10px; border: 1.5px solid rgba(74,58,34,0.18); font-size: 13px; color: var(--brown, #3E3A2A); background: #ffffff; transition: all 0.15s ease; outline: none; }
.category-search-form input:focus { border-color: var(--forest, #28401F); box-shadow: 0 0 0 3px rgba(40,64,31,0.08); }
.category-reorder-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brown-soft, #6B7259); background: rgba(74,58,34,0.06); padding: 6px 12px; border-radius: 8px; user-select: none; }
.category-reorder-hint span { font-size: 14px; font-weight: 900; }

/* Dynamic Sliding Bulk Actions Bar (Clean White Card - No Green BG) */
.category-bulk-bar { 
  display: none; 
  align-items: center; 
  justify-content: space-between; 
  gap: 14px; 
  padding: 12px 20px; 
  margin-bottom: 14px; 
  border-radius: 14px; 
  background: #ffffff; 
  border: 1px solid #e2e8f0; 
  color: #0f172a; 
  box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.08); 
}
.category-bulk-bar.visible { display: flex; animation: slideDown 0.2s ease; }
.category-bulk-count { font-size: 13.5px; font-weight: 800; color: #0f172a; }
.category-bulk-bar .btn-danger { 
  background: #dc2626; 
  color: #ffffff; 
  border: none; 
  border-radius: 8px; 
  font-size: 12.5px; 
  font-weight: 700; 
  padding: 7px 15px; 
  cursor: pointer; 
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25); 
  transition: all 0.15s ease; 
}
.category-bulk-bar .btn-danger:hover:not(:disabled) { 
  background: #b91c1c; 
  box-shadow: 0 4px 10px rgba(185, 28, 28, 0.35); 
  transform: translateY(-1px); 
}
.category-bulk-bar .btn-danger:disabled { 
  opacity: 0.5; 
  cursor: not-allowed; 
  box-shadow: none; 
}

/* High-Clarity Categories Table Panel */
.category-table-panel { padding: 0; overflow-x: auto; border-radius: 16px; border: 1px solid rgba(74,58,34,0.12); background: #ffffff; box-shadow: 0 4px 20px -5px rgba(74,58,34,0.06); }
.category-table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; }
.category-table thead th { padding: 12px 16px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brown-soft, #6B7259); border-bottom: 1px solid rgba(74,58,34,0.1); background: #fafbf8; white-space: nowrap; }
.category-table tbody tr { transition: background-color 0.15s ease; border-bottom: 1px solid rgba(74,58,34,0.06); }
.category-table tbody tr:last-child { border-bottom: none; }
.category-table tbody td { padding: 12px 16px; vertical-align: middle; }
.category-table tbody tr:hover td { background: #fafaf7; }

.category-select-col { width: 40px; text-align: center; }
.category-select-col input { width: 16px; height: 16px; accent-color: var(--forest, #28401F); cursor: pointer; }

.category-thumb, .category-icon-fallback { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--cream-2, #f4ead2); border: 1px solid rgba(74,58,34,0.12); color: var(--forest, #28401F); font-weight: 800; font-size: 15px; }
.category-name-link { font-size: 13.5px; font-weight: 700; color: var(--forest-deep, #1c2e17); text-decoration: none; transition: color 0.15s ease; }
.category-name-link:hover { color: var(--forest, #28401F); text-decoration: underline; }

/* Even Color Slug Badge */
.category-slug { 
  display: inline-flex; 
  align-items: center; 
  padding: 4px 10px; 
  border-radius: 8px; 
  background: #f1f5f9; 
  border: 1px solid #cbd5e1; 
  color: #0f172a; 
  font-size: 12.5px; 
  font-weight: 700; 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; 
  white-space: nowrap; 
}

.category-product-count { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #e7f4e7; color: #216d31; font-size: 11.5px; font-weight: 800; white-space: nowrap; }

/* Category Action Buttons (Refined SaaS Micro-Pills with subtle, elegant hover) */
.category-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.category-action-btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 5px; 
  justify-content: center; 
  padding: 5px 11px; 
  border-radius: 8px; 
  font-size: 12px; 
  font-weight: 700; 
  text-decoration: none; 
  cursor: pointer; 
  transition: all 0.15s ease; 
  border: 1px solid #e2e8f0; 
  background: #ffffff; 
  color: #334155; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.03); 
}
.category-action-btn .btn-ic { width: 13px; height: 13px; flex-shrink: 0; stroke-width: 2; }

/* Elegant, soft hover states (No harsh dark blue blocks!) */
.category-action-btn.cat-btn-edit:hover { 
  background: #f8fafc; 
  border-color: #94a3b8; 
  color: #0f172a; 
  transform: translateY(-1px); 
  box-shadow: 0 2px 4px rgba(0,0,0,0.06); 
}
.category-action-btn.cat-btn-live { 
  color: var(--forest, #28401F); 
}
.category-action-btn.cat-btn-live:hover { 
  background: #f0fdf4; 
  border-color: #86efac; 
  color: #166534; 
  transform: translateY(-1px); 
  box-shadow: 0 2px 4px rgba(22,101,52,0.08); 
}
.category-action-btn.cat-btn-delete { 
  color: #b91c1c; 
  border-color: rgba(185,28,28,0.2); 
  background: #ffffff; 
}
.category-action-btn.cat-btn-delete:hover:not(:disabled) { 
  background: #fef2f2; 
  border-color: #fca5a5; 
  color: #991b1b; 
  transform: translateY(-1px); 
  box-shadow: 0 2px 4px rgba(185,28,28,0.08); 
}

/* Elegant Table Row Hover */
.category-table tbody tr:hover td { 
  background: #fafaf7; 
}

/* 2-Column Category Form Page */
.category-form-page { width: 100%; max-width: 1100px; margin: 0 auto; }
.category-editor-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.category-editor-main { display: flex; flex-direction: column; gap: 20px; }
.category-editor-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }

.category-card-panel { padding: 22px 24px; border-radius: 16px; border: 1px solid rgba(74,58,34,0.12); background: #ffffff; box-shadow: 0 4px 20px -5px rgba(74,58,34,0.05); }
.category-section-title { font-size: 15px; font-weight: 800; color: var(--forest-deep, #1c2e17); margin: 0 0 4px; }
.category-section-sub { font-size: 12px; font-weight: 500; color: var(--brown-soft, #6B7259); margin: 0 0 16px; }

.category-field-group { margin-bottom: 16px; }
.category-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--forest-deep, #1c2e17); margin-bottom: 6px; }
.category-label .req { color: #b91c1c; margin-left: 2px; }
.category-input { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 9px; border: 1.5px solid rgba(74,58,34,0.18); font-size: 13px; font-weight: 600; color: var(--brown, #3E3A2A); background: #ffffff; outline: none; transition: border-color 0.15s ease; font-family: inherit; }
.category-input:focus { border-color: var(--forest, #28401F); box-shadow: 0 0 0 3px rgba(40,64,31,0.08); }

.category-slug-wrap { display: flex; align-items: center; border: 1.5px solid rgba(74,58,34,0.18); border-radius: 9px; overflow: hidden; background: #ffffff; }
.category-slug-prefix { display: inline-flex; align-items: center; padding: 0 12px; min-height: 40px; background: #f4f6f3; border-right: 1.5px solid rgba(74,58,34,0.14); color: var(--brown-soft, #6B7259); font-size: 11.5px; font-weight: 700; font-family: monospace; }
.category-slug-input { flex: 1; border: none; padding: 8px 12px; font-size: 13px; font-weight: 600; font-family: monospace; color: var(--brown, #3E3A2A); outline: none; background: transparent; }

/* Square 1:1 Photo Uploader */
.category-photo-dropzone { display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; margin: 0 auto 12px; border: 2px dashed rgba(74,58,34,0.22); border-radius: 14px; background: #fafbf8; overflow: hidden; position: relative; }
.category-photo-dropzone .square-photo-img { width: 100%; height: 100%; object-fit: cover; }
.category-photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--brown-soft, #6B7259); font-size: 11px; font-weight: 600; padding: 10px; }
.category-photo-placeholder .placeholder-ic { width: 32px; height: 32px; opacity: 0.6; }
.category-remove-photo-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #b91c1c; cursor: pointer; }

/* Presentation & Metrics Box */
.category-stats-box { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: #f4f8f3; border: 1px solid rgba(40,64,31,0.12); margin-top: 14px; }
.category-stats-box .stats-label { font-size: 12px; font-weight: 700; color: var(--forest, #28401F); }
.category-stats-box .stats-value { font-size: 13px; font-weight: 800; color: var(--forest-deep, #1c2e17); }

/* SEO Panel */
.category-seo-panel { border: 1px solid rgba(74,58,34,0.12); border-radius: 12px; background: #ffffff; overflow: hidden; padding: 4px; }
.category-seo-summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 10px 12px; list-style: none; user-select: none; }
.category-seo-summary::-webkit-details-marker { display: none; }
.category-seo-summary .seo-badge { font-size: 11px; font-weight: 800; color: var(--forest, #28401F); background: #eef4ed; padding: 3px 9px; border-radius: 999px; }

/* Responsive Category Layout */
@media (max-width: 960px) {
  .category-editor-grid { grid-template-columns: 1fr; }
  .category-editor-sidebar { position: static; }
}
@media (max-width: 640px) {
  .category-toolbar-row { flex-direction: column; align-items: stretch; }
  .category-search-form { max-width: 100%; }
}

/* ==========================================================================
   MODERN PRODUCT TAGS (2-COLUMN COMMAND CENTER)
   ========================================================================== */
.tag-page-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.tag-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}

.tag-card {
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid rgba(74,58,34,0.12);
  background: #ffffff;
  box-shadow: 0 4px 20px -5px rgba(74,58,34,0.05);
}

.tag-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

.tag-card-sub {
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.55;
  margin: 6px 0 18px;
}

.tag-field-group {
  margin-bottom: 20px;
}

.tag-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #334155;
  margin-bottom: 8px;
}

.tag-label.tag-sublabel {
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

.tag-label .req {
  color: #dc2626;
  margin-left: 2px;
}

.tag-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #d1d5db;
  font-size: 14.5px;
  font-weight: 600;
  color: #1e293b;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}

.tag-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.tag-input:focus {
  border-color: var(--forest, #28401F);
  box-shadow: 0 0 0 3px rgba(40,64,31,0.1);
}

.tag-quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.tag-quick-pill {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.tag-quick-pill:hover {
  background: #eef4ed;
  border-color: var(--forest, #28401F);
  color: var(--forest-deep, #1c2e17);
  transform: translateY(-1px);
}

.tag-submit-btn {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 10px;
  margin-top: 6px;
  letter-spacing: 0.01em;
}

.tag-tip-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  padding: 20px 22px;
}

.tag-tip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tag-tip-icon {
  font-size: 18px;
}

.tag-tip-title {
  font-size: 14px;
  color: #1e293b;
  font-weight: 800;
}

.tag-tip-body {
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  margin: 0;
  font-weight: 400;
}

.tag-tip-body b {
  color: #1e293b;
  font-weight: 700;
}

/* Right Main Column & Table */
.tag-main {
  min-width: 0;
}

.tag-table-panel {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.04);
}

.tag-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.tag-search-form {
  flex: 1;
  max-width: 360px;
}

.tag-search-form .search-wrapper input {
  height: 38px;
  font-size: 13.5px;
  border-color: #e2e8f0;
  color: #1e293b;
}

.tag-filter-tag {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 999px;
}

.tag-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}

.tag-table th {
  background: #f8fafc;
  padding: 13px 20px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.tag-table td {
  padding: 15px 20px;
  font-size: 14px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.tag-table tbody tr:last-child td {
  border-bottom: none;
}

.tag-table tbody tr:hover td {
  background: #fbfdf9;
}

.tag-select-col {
  width: 48px;
  text-align: center;
  padding-left: 20px !important;
  padding-right: 8px !important;
}

.tag-select-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--forest, #28401F);
}

.tag-row-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.tag-assigned-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.tag-assigned-badge.has-products {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.tag-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 7px;
  background: #ffffff;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.tag-delete-btn:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(220, 38, 38, 0.08);
}

.tag-del-ic {
  width: 13px;
  height: 13px;
}

/* Responsive Tags Layout */
@media (max-width: 900px) {
  .tag-page-layout {
    grid-template-columns: 1fr;
  }
  .tag-sidebar {
    position: static;
  }
  .tag-panel-header {
    flex-direction: column;
    align-items: stretch;
  }
  .tag-search-form {
    max-width: 100%;
  }
}

/* ==========================================================================
   MODERN INVENTORY MANAGEMENT (COMMAND CENTER)
   ========================================================================== */

/* 1. Health Metrics Strip */
.inv-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.inv-metric-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.15s ease;
}

.inv-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.07);
  border-color: #cbd5e1;
}

.inv-metric-card.is-active {
  border-color: var(--forest, #28401F);
  box-shadow: 0 0 0 2px rgba(40, 64, 31, 0.15);
}

.inv-metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.inv-metric-info {
  display: flex;
  flex-direction: column;
}

.inv-metric-value {
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.inv-metric-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-top: 3px;
}

/* 2. Compact Single-Row Filter Toolbar */
.inv-filter-panel {
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.inv-filter-form {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.inv-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.inv-search-wrap .search-icon {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 17px;
  height: 17px;
  stroke: #94a3b8;
  pointer-events: none;
}

.inv-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 38px;
  border-radius: 9px;
  border: 1px solid #d1d5db;
  font-size: 13.5px;
  font-weight: 500;
  color: #1e293b;
  outline: none;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.inv-search-input:focus {
  border-color: var(--forest, #28401F);
  box-shadow: 0 0 0 3px rgba(40, 64, 31, 0.08);
}

.inv-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inv-filter-lbl {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  white-space: nowrap;
}

.inv-select {
  height: 38px;
  padding: 0 32px 0 12px;
  border-radius: 9px;
  border: 1px solid #d1d5db;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  outline: none;
  cursor: pointer;
  min-width: 160px;
}

.inv-select:focus {
  border-color: var(--forest, #28401F);
}

.inv-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 3. Table Elements */
.inv-table-panel {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.04);
}

.inv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}

.inv-table th {
  background: #f8fafc;
  padding: 13px 18px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.inv-table td {
  padding: 14px 18px;
  font-size: 13.5px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.inv-table tbody tr:last-child td {
  border-bottom: none;
}

.inv-table tbody tr:hover td {
  background: #fbfdf9;
}

.inv-photo-thumb {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  object-fit: cover;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: block;
}

.inv-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 800;
  font-size: 15px;
  border: 1px solid #e2e8f0;
}

.inv-item-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.inv-item-unit {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-top: 2px;
}

.inv-cat-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}

.inv-price-main {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.inv-price-mrp {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: line-through;
}

/* Stock Status Pills */
.inv-stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.inv-stock-pill .stock-bullet-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.inv-stock-pill.in-stock {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.inv-stock-pill.low-stock {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.inv-stock-pill.out-of-stock {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.inv-quick-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.inv-quick-edit-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* 4. Elegant Quick Edit Modal */
.inv-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.inv-modal-card {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 580px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.25);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  animation: invModalSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes invModalSlide {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.inv-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbf9;
}

.inv-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

.inv-modal-sub {
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;
  margin: 4px 0 0;
}

.inv-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
}

.inv-modal-close:hover {
  color: #0f172a;
  background: #e2e8f0;
}

.inv-modal-form {
  padding: 22px 24px;
}

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

.inv-form-field {
  display: flex;
  flex-direction: column;
}

.inv-label {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #334155;
  margin-bottom: 6px;
}

.inv-label .req {
  color: #dc2626;
  margin-left: 2px;
}

.inv-input {
  height: 40px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1.5px solid #d1d5db;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  background: #ffffff;
  outline: none;
}

.inv-input:focus {
  border-color: var(--forest, #28401F);
  box-shadow: 0 0 0 3px rgba(40, 64, 31, 0.08);
}

/* Modern Stock Stepper with +/- */
.inv-stock-stepper-modern {
  display: flex;
  align-items: center;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  height: 44px;
  max-width: 220px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inv-stock-stepper-modern:focus-within {
  border-color: var(--forest, #28401F);
  box-shadow: 0 0 0 3px rgba(40, 64, 31, 0.08);
}

.inv-stock-stepper-modern .step-btn {
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  user-select: none;
}

.inv-stock-stepper-modern .step-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.inv-stock-stepper-modern .step-btn:active {
  background: #cbd5e1;
}

.inv-stock-stepper-modern .step-input {
  flex: 1;
  border: none;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  outline: none;
  background: transparent;
  width: 100%;
  -moz-appearance: textfield;
}

.inv-stock-stepper-modern .step-input::-webkit-outer-spin-button,
.inv-stock-stepper-modern .step-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.inv-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
/* =========================================================
   MODERN UI UPGRADE: ORDERS, CUSTOMERS, REVIEWS, COUPONS & SHIPPING
   ========================================================= */

/* --- Universal Admin KPI / Metric Cards --- */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.admin-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.admin-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -4px rgba(15, 23, 42, 0.08);
}
.admin-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-kpi-icon svg {
  width: 22px;
  height: 22px;
}
.admin-kpi-icon.blue { background: #eff6ff; color: #2563eb; }
.admin-kpi-icon.green { background: #f0fdf4; color: #166534; }
.admin-kpi-icon.amber { background: #fef3c7; color: #d97706; }
.admin-kpi-icon.purple { background: #f5f3ff; color: #7c3aed; }
.admin-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.admin-kpi-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
}
.admin-kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* --- Orders Modernization --- */
.orders-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.orders-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.orders-title h1 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  letter-spacing: -0.02em;
}
.orders-subtitle {
  font-size: 13px !important;
  color: #64748b !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.filter-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #166534 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
}
.bulk-actions-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  color: #1e3a8a;
  border-radius: 12px;
  box-shadow: 0 4px 14px -3px rgba(37, 99, 235, 0.12);
  animation: slideDown 0.2s ease;
}
.bulk-actions-bar.visible {
  display: flex;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.bulk-selected-count {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3a8a;
}
.orders-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.04);
}
.orders-toolbar .search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 240px;
}
.orders-toolbar .search-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.orders-toolbar .search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  stroke: #94a3b8;
  pointer-events: none;
}
.orders-toolbar .search-wrapper input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 9px 12px 9px 36px;
  font-size: 13px;
  background: #ffffff;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.orders-toolbar .search-wrapper input:focus {
  outline: none;
  border-color: #166534;
  box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.12);
}
.date-range-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-range-form input[type="date"] {
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: #0f172a;
  background: #ffffff;
}
.date-range-form input[type="date"]:focus {
  outline: none;
  border-color: #166534;
}
.filter-select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 9px !important;
  padding: 9px 32px 9px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  appearance: none !important;
  cursor: pointer !important;
}
.filter-select:focus {
  outline: none !important;
  border-color: #166534 !important;
}

/* Orders Card & Table */
.orders-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05) !important;
}
.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 800px;
}
.orders-table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.orders-table tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}
.orders-table tbody tr:hover {
  background: #f8fafc !important;
}
.orders-table tbody tr.selected {
  background: #f0fdf4 !important;
}
.order-code-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}
.badge-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  line-height: 1.3 !important;
}
.badge-status.badge-pending { background: #fef3c7 !important; color: #b45309 !important; border-color: #fde68a !important; }
.badge-status.badge-confirmed { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
.badge-status.badge-packed { background: #f5f3ff !important; color: #6d28d9 !important; border-color: #ddd6fe !important; }
.badge-status.badge-shipped { background: #e0f2fe !important; color: #0369a1 !important; border-color: #bae6fd !important; }
.badge-status.badge-delivered { background: #ecfdf5 !important; color: #047857 !important; border-color: #a7f3d0 !important; }
.badge-status.badge-cancelled { background: #fff1f2 !important; color: #be123c !important; border-color: #fecdd3 !important; }

/* --- Customers Modernization --- */
.customer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}
.customer-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.customer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.customer-name-text {
  font-weight: 700;
  color: #0f172a;
  font-size: 13.5px;
}
.customer-sub-text {
  font-size: 12px;
  color: #64748b;
}

/* --- Reviews Modernization --- */
.review-rating-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: #fefce8 !important;
  border: 1px solid #fef08a !important;
}
.review-rating-box .star {
  color: #f59e0b !important;
  font-size: 15px !important;
}
.review-rating-box .star-empty {
  color: #cbd5e1 !important;
  font-size: 15px !important;
}
.rating-pill-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: all 0.15s ease;
}
.rating-pill:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}
.rating-pill.active {
  background: #166534;
  color: #ffffff;
  border-color: #166534;
}

/* --- Coupons Modernization --- */
.coupon-ticket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #f8fafc;
  border: 1.5px dashed #94a3b8;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.04em;
}
.coupon-ticket svg {
  width: 14px;
  height: 14px;
  stroke: #166534;
}
.page-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
}
.page-status.published,
.page-status.active {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}
.page-status.draft,
.page-status.expired,
.page-status.disabled {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}
.page-status.used-up {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

/* --- Shipping Workspace Tabs & Segmented Controls --- */
.shipping-workspace-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 12px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  margin-bottom: 22px !important;
}
.shipping-workspace-tab {
  appearance: none !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #64748b !important;
  cursor: pointer !important;
  flex: 1 !important;
  min-width: 180px !important;
  padding: 11px 16px !important;
  text-align: left !important;
  font-family: var(--admin-font) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}
.shipping-workspace-tab small {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  opacity: 0.8 !important;
  margin-top: 2px !important;
}
.shipping-workspace-tab:hover {
  color: #0f172a !important;
}
.shipping-workspace-tab.active {
  background: #102a43 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 42, 67, 0.25) !important;
}
.ship-step {
  border-left: 3px solid #102a43 !important;
  padding: 6px 0 6px 18px !important;
  margin-bottom: 22px !important;
}
.ship-step h4 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
}
.ship-tabs {
  display: flex !important;
  gap: 10px !important;
  margin: 6px 0 16px !important;
  flex-wrap: wrap !important;
}
.ship-tab {
  flex: 1 !important;
  min-width: 140px !important;
  text-align: center !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.ship-tab:hover {
  border-color: #102a43 !important;
  color: #102a43 !important;
}
.ship-tab.active {
  background: #102a43 !important;
  border-color: #102a43 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 42, 67, 0.25) !important;
}
.ship-tab small {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.85 !important;
  margin-top: 3px !important;
}
.ship-tab.active small {
  color: rgba(255, 255, 255, 0.9) !important;
}
.list-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}
.list-tab {
  padding: 7px 14px !important;
  border-radius: 999px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.list-tab:hover {
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
.list-tab.active {
  background: #102a43 !important;
  border-color: #102a43 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 42, 67, 0.25) !important;
}
.list-tab.active .charge-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.charge-badge {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  margin-left: 6px !important;
}

/* Serviceable State Options */
.state-option {
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}
.state-option:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
.state-option input[type="checkbox"]:checked + span {
  font-weight: 700 !important;
  color: #102a43 !important;
}
.attr-value-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
.attr-value-chip button {
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  font-size: 15px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.attr-value-chip button:hover {
  color: #e11d48 !important;
}

/* =========================================================
   ORDERS PAGE HIGH-VISIBILITY TYPOGRAPHY & CONTRAST
   ========================================================= */
.orders-dashboard {
  font-family: var(--admin-font) !important;
  color: #0f172a !important;
}

.orders-title h1 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
}

.orders-subtitle {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

.orders-subtitle .filter-badge {
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 3px 10px !important;
}

/* Table Header */
.orders-table thead th {
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 18px !important;
  border-bottom: 2px solid #cbd5e1 !important;
}

/* Table Rows & Cells */
.orders-table tbody td {
  padding: 16px 18px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  color: #0f172a !important;
}

.orders-table tbody tr:hover td {
  background: #f8fafc !important;
}

/* Order Code Badge */
.order-code-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: 0.02em !important;
}

/* Customer Details */
.customer-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.customer-name {
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
}

.customer-phone {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.3 !important;
}

.customer-email {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1.3 !important;
}

/* Date & Time */
.order-date {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  white-space: nowrap !important;
}

.order-time {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin-top: 2px !important;
}

/* Order Total */
.order-total {
  font-weight: 800 !important;
  color: #0f172a !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

/* Status Badges */
.badge-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid transparent !important;
  line-height: 1.2 !important;
}

.badge-status.badge-pending {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fcd34d !important;
}

.badge-status.badge-confirmed {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-color: #bfdbfe !important;
}

.badge-status.badge-packed {
  background: #f5f3ff !important;
  color: #5b21b6 !important;
  border-color: #ddd6fe !important;
}

.badge-status.badge-shipped {
  background: #e0f2fe !important;
  color: #075985 !important;
  border-color: #7dd3fc !important;
}

.badge-status.badge-delivered {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border-color: #6ee7b7 !important;
}

.badge-status.badge-cancelled {
  background: #fff1f2 !important;
  color: #9f1239 !important;
  border-color: #fecdd3 !important;
}

/* Action Button: View */
.orders-table .action-view {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.orders-table .action-view:hover {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1e40af !important;
  transform: translateY(-1px) !important;
}

/* Toolbar & Filters */
.orders-toolbar .search-wrapper input {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.orders-toolbar .search-wrapper input::placeholder {
  color: #94a3b8 !important;
}

.orders-toolbar .filter-select {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.orders-toolbar .date-range-form input[type="date"] {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

.payment-ref {
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

/* Orders Dashboard Tabs Active State */
.orders-dashboard .rating-pill {
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.orders-dashboard .rating-pill:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

.orders-dashboard .rating-pill.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

.orders-dashboard .rating-pill.active .charge-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Primary buttons across Admin - Unified Deep Navy (#102a43) */
:root {
  --admin-primary: #102a43;
  --admin-primary-border: #0b1f33;
  --admin-primary-hover: #0b1f33;
  --admin-primary-shadow: rgba(16, 42, 67, 0.25);
}

.btn-primary,
.btn-saas-primary,
.pb-toolbar-btn-primary,
.orders-dashboard .btn-primary,
.admin-form .btn-primary,
.admin-panel .btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary {
  background: #102a43 !important;
  border: 1.5px solid #0b1f33 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(16, 42, 67, 0.25) !important;
  transition: all 0.15s ease !important;
}

.btn-primary:hover,
.btn-saas-primary:hover,
.pb-toolbar-btn-primary:hover,
.orders-dashboard .btn-primary:hover,
.admin-form .btn-primary:hover,
.admin-panel .btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
input[type="submit"].btn-primary:hover {
  background: #0b1f33 !important;
  border-color: #0b1f33 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 42, 67, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* One primary-action color across every admin screen. Older page-specific
   styles used navy; keep red danger controls and neutral/outline controls
   semantic, but normalize all primary save/add/apply actions to deep navy. */
.admin-main .btn-dark,
.admin-main .btn-dark-sm,
.admin-main .btn-primary,
.admin-main .btn-saas-primary,
.admin-main .primary-action,
.admin-main button[style*="#102a43"]:not(.danger):not(.btn-outline),
.admin-main a[style*="#102a43"]:not(.danger):not(.btn-outline),
.admin-main button[style*="#0f172a"]:not(.danger):not(.btn-outline),
.admin-main a[style*="#0f172a"]:not(.danger):not(.btn-outline) {
  background-color: #102a43 !important;
  border-color: #0b1f33 !important;
  color: #ffffff !important;
}

.admin-main .btn-dark:hover,
.admin-main .btn-dark-sm:hover,
.admin-main .btn-primary:hover,
.admin-main .btn-saas-primary:hover,
.admin-main .primary-action:hover {
  background-color: #0b1f33 !important;
  border-color: #0b1f33 !important;
}

/* Active pills & tabs unified to deep navy */
.orders-dashboard .rating-pill.active,
.list-tab.active,
.ship-tab.active,
.status-tab.active,
.dstab-btn.active,
.btn-zone-filter.active {
  background: #102a43 !important;
  border-color: #0b1f33 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 42, 67, 0.25) !important;
}

.orders-dashboard .btn-outline,
.admin-form .btn-outline {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.orders-dashboard .btn-outline:hover,
.admin-form .btn-outline:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* =========================================================
   MODERN SAAS SETTINGS & TOGGLE SWITCHES
   ========================================================= */
.settings-panel {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.payment-gateway-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.15s ease !important;
}

.payment-gateway-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.payment-gateway-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.payment-gateway-header h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 4px !important;
}

.payment-fields-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

.payment-fields-grid label {
  display: flex !important;
  flex-direction: column !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  gap: 6px !important;
}

/* Tactile Toggle Switch */
.gateway-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

.gateway-toggle input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 44px !important;
  height: 24px !important;
  background: #cbd5e1 !important;
  border-radius: 999px !important;
  position: relative !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.gateway-toggle input[type="checkbox"]::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.gateway-toggle input[type="checkbox"]:checked {
  background: #102a43 !important;
}

.gateway-toggle input[type="checkbox"]:checked::after {
  transform: translateX(20px) !important;
}

.gateway-toggle input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(16, 42, 67, 0.2) !important;
}

.payment-security-note {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #102a43 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #475569 !important;
  margin-top: 16px !important;
  line-height: 1.5 !important;
}

/* Global Form Focus Enhancement - No Shadow */
.admin-form input[type="text"]:focus,
.admin-form input[type="email"]:focus,
.admin-form input[type="password"]:focus,
.admin-form input[type="number"]:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  border-color: #102a43 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Public admin authentication pages */
.admin-auth-page{background:#eef5f8!important;color:#14213d!important;}
.admin-auth-page .admin-login-wrap{min-height:100vh;padding:32px 20px;background:linear-gradient(135deg,#e9f4f8 0%,#f8fbfd 55%,#edf8f2 100%);}
.admin-auth-page .auth-layout{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(360px,.85fr);width:min(980px,100%);overflow:hidden;border:1px solid #d7e4ed;border-radius:24px;background:#fff;box-shadow:0 28px 65px rgba(16,42,67,.16);}
.admin-auth-page .auth-brand-panel{display:flex;flex-direction:column;justify-content:space-between;min-height:610px;padding:46px;background:linear-gradient(150deg,#173d5d,#102a43);color:#fff;}
.admin-auth-page .auth-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;}.admin-auth-page .auth-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.28);border-radius:11px;background:rgba(255,255,255,.1);}
.admin-auth-page .auth-brand-panel h1{max-width:360px;margin:44px 0 12px;font-size:36px;line-height:1.12;letter-spacing:-.04em;}.admin-auth-page .auth-brand-panel p{max-width:350px;margin:0;color:#ccdae6;font-size:15px;line-height:1.7;}
.admin-auth-page .auth-points{display:grid;gap:12px;margin-top:28px;}.admin-auth-page .auth-points span{color:#d9e6ef;font-size:13px;font-weight:700;}.admin-auth-page .auth-points span:before{content:'✓';display:inline-grid;place-items:center;width:19px;height:19px;margin-right:8px;border-radius:50%;color:#0a794b;background:#dff8ec;font-size:11px;}
.admin-auth-page .auth-footer{color:#b9ccda;font-size:12px;}.admin-auth-page .admin-login-card{width:auto!important;margin:0;padding:47px 48px;border-radius:0;background:#fff;box-shadow:none;}.admin-auth-page .admin-login-card h2{text-align:left;margin:0 0 7px;color:#102a43;font-size:28px;letter-spacing:-.035em;}.admin-auth-page .admin-login-card>p:not(.form-error):not(.form-success){text-align:left;margin:0 0 27px;color:#5b7088;font-size:14px;line-height:1.55;}
.admin-auth-page .admin-form{max-width:none;gap:17px;}.admin-auth-page .admin-form label{gap:7px;color:#334e64;font-size:13px;}.admin-auth-page .admin-form input{border:1px solid #c5d6e2;border-radius:10px;padding:12px 13px;color:#14213d;background:#fff;font-size:14px;}.admin-auth-page .admin-form input:focus{border-color:#102a43!important;box-shadow:0 0 0 3px rgba(16,42,67,.1)!important;}.admin-auth-page .admin-form .btn-primary{min-height:48px;border-radius:10px;background:#102a43!important;box-shadow:0 10px 20px rgba(16,42,67,.16)!important;}.admin-auth-page .admin-login-card a{color:#0d5d91;font-weight:800;}.admin-auth-page .admin-login-card .form-success,.admin-auth-page .admin-login-card .form-error{margin:0 0 17px;text-align:left;border-radius:9px;}
@media(max-width:760px){.admin-auth-page .admin-login-wrap{align-items:flex-start;padding:18px;}.admin-auth-page .auth-layout{grid-template-columns:1fr;max-width:500px;}.admin-auth-page .auth-brand-panel{min-height:0;padding:30px;}.admin-auth-page .auth-brand-panel h1{margin:25px 0 8px;font-size:29px;}.admin-auth-page .auth-points,.admin-auth-page .auth-footer{display:none;}.admin-auth-page .admin-login-card{padding:32px 27px;}}
.platform-brand-mark { overflow: hidden !important; padding: 3px !important; background: #fff !important; }
.platform-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }