:root{
  --black:#050608;
  --ink:#0b1020;
  --navy:#071a34;
  --blue:#2d6ed8;
  --blue2:#6aa5ff;
  --gold:#d7ae54;
  --gold2:#f2d792;
  --ivory:#f7f5ef;
  --white:#fff;
  --text:#172033;
  --muted:#667085;
  --line:rgba(255,255,255,.13);
  --line-dark:#e5e7eb;
  --shadow:0 22px 70px rgba(5,15,34,.12)
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  font-family:Inter,Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--ivory);
  line-height:1.65
}

img{
  max-width:100%;
  display:block
}

a{
  color:inherit
}

.container{
  width:min(1200px,calc(100% - 40px));
  margin:auto
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(5,6,8,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)
}

.nav-wrap{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  min-width:190px
}

.brand img{
  width:154px;
  height:62px;
  object-fit:cover;
  object-position:center 62%;
  border-radius:8px
}

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

.nav a{
  text-decoration:none;
  color:#eef3fb;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em
}

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

.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  color:white;
  font-size:28px;
  cursor:pointer
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 22px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111827!important;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
  transition:.2s transform,.2s box-shadow
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(215,174,84,.25)
}

.btn-sm{
  padding:10px 16px;
  font-size:13px
}

.btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.38);
  color:white!important
}

.btn-dark{
  background:var(--ink);
  color:white!important
}

.btn-blue{
  background:linear-gradient(135deg,#1d56ad,#357ee6);
  color:white!important
}

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 25%,rgba(45,110,216,.3),transparent 34%),
    radial-gradient(circle at 95% 80%,rgba(215,174,84,.17),transparent 30%),
    linear-gradient(135deg,#03060c 0%,#07172c 55%,#081f40 100%);
  color:white;
  padding:108px 0 90px
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent)
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:center
}

.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  letter-spacing:.22em;
  color:var(--gold2);
  margin-bottom:18px
}

.eyebrow.dark{
  color:#9b7425
}

.hero h1,
.page-hero h1,
.section h2,
.cta h2{
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.02;
  margin:0
}

.hero h1{
  font-size:clamp(52px,7vw,88px);
  max-width:850px
}

.hero-copy>p{
  font-size:18px;
  max-width:760px;
  color:#cbd5e1;
  margin:26px 0 32px
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

.trust-row{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-top:35px;
  color:#b9c6d7;
  font-size:13px
}

.trust-row span:before{
  content:"✓";
  color:var(--gold2);
  margin-right:7px
}

.brand-panel{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  border-radius:30px;
  padding:28px;
  backdrop-filter:blur(14px);
  box-shadow:0 26px 80px rgba(0,0,0,.22)
}

.brand-panel img{
  border-radius:20px;
  width:100%;
  aspect-ratio:1.46/1;
  object-fit:cover
}

.brand-panel .mini{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px
}

.brand-panel .mini div{
  padding:14px 10px;
  background:rgba(255,255,255,.05);
  border-radius:14px;
  text-align:center
}

.brand-panel strong{
  display:block;
  color:var(--gold2);
  font-size:13px
}

.brand-panel small{
  color:#aebdd0;
  font-size:11px
}

.section{
  padding:96px 0
}

.section-light{
  background:var(--ivory)
}

.section-white{
  background:#fff
}

.section-dark{
  background:var(--ink);
  color:#fff
}

.section-blue{
  background:linear-gradient(135deg,#0b2448,#07182f);
  color:#fff
}

.section-head{
  max-width:790px;
  margin-bottom:48px
}

.section h2{
  font-size:clamp(38px,5vw,60px)
}

.section-head p{
  font-size:17px;
  color:var(--muted)
}

.section-dark .section-head p,
.section-blue .section-head p{
  color:#b8c5d6
}

.split{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:start
}

.lead p{
  font-size:18px;
  color:#475467;
  margin-top:0
}

.feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:44px
}

.feature-strip div{
  background:#fff;
  border:1px solid var(--line-dark);
  padding:20px;
  border-radius:18px
}

.feature-strip strong{
  display:block;
  color:var(--navy);
  font-size:15px
}

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

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px
}

.card{
  padding:28px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--line-dark);
  box-shadow:0 8px 30px rgba(16,24,40,.04)
}

.section-dark .card,
.section-blue .card{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  box-shadow:none
}

.card .num{
  font-size:12px;
  font-weight:900;
  color:var(--gold);
  letter-spacing:.12em
}

.card h3{
  font-size:19px;
  margin:19px 0 10px
}

.card p{
  font-size:14px;
  color:var(--muted);
  margin:0
}

.section-dark .card p,
.section-blue .card p{
  color:#b8c5d6
}

.category-card{
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden
}

.category-card:before{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  border-radius:50%;
  top:-30px;
  right:-30px;
  background:radial-gradient(circle,rgba(45,110,216,.2),transparent 70%)
}

.category-card a{
  margin-top:16px;
  font-size:13px;
  font-weight:800;
  color:#1e5ab5;
  text-decoration:none
}

.steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px
}

.step{
  border-top:2px solid #d8bd78;
  padding:18px 8px 0 0
}

.step span{
  font-weight:900;
  color:#9a752b
}

.step h3{
  font-size:17px
}

.step p{
  font-size:13px;
  color:var(--muted)
}

.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}

.why-list{
  display:grid;
  gap:0
}

.why-list div{
  padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.13)
}

.why-list strong{
  font-size:18px
}

.why-list p{
  color:#b8c5d6;
  margin:7px 0 0
}

.cta{
  background:linear-gradient(135deg,#edda9f,#cda64f);
  padding:56px 0
}

.cta-inner{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center
}

.cta h2{
  font-size:44px
}

.cta p{
  margin:10px 0 0
}

.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px
}

.contact-box{
  background:#fff;
  border-radius:26px;
  padding:32px;
  box-shadow:var(--shadow)
}

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

.form label{
  display:grid;
  gap:7px;
  font-weight:800;
  font-size:12px
}

.form .full,
.form button{
  grid-column:1/-1
}

.form input,
.form select,
.form textarea{
  width:100%;
  border:1px solid #d9dee7;
  border-radius:12px;
  padding:13px 14px;
  font:inherit;
  background:#fff
}

.form input:focus,
.form textarea:focus,
.form select:focus{
  outline:2px solid rgba(45,110,216,.25);
  border-color:#4b82d6
}

.page-hero{
  background:
    radial-gradient(circle at 80% 30%,rgba(45,110,216,.25),transparent 34%),
    linear-gradient(135deg,#03060c,#091d39);
  color:white;
  padding:92px 0 76px
}

.page-hero h1{
  font-size:clamp(48px,6vw,74px);
  max-width:900px
}

.page-hero p{
  max-width:760px;
  color:#c9d4e2;
  font-size:18px
}

.breadcrumbs{
  font-size:12px;
  color:#9fb0c5;
  margin-bottom:18px
}

.breadcrumbs a{
  color:var(--gold2);
  text-decoration:none
}

.content-grid{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:60px
}

.side-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:24px;
  position:sticky;
  top:108px
}

.side-card a{
  display:block;
  padding:10px 0;
  border-bottom:1px solid #eee;
  text-decoration:none;
  font-weight:700;
  font-size:14px
}

.faq{
  display:grid;
  gap:12px
}

.faq details{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px 20px
}

.faq summary{
  cursor:pointer;
  font-weight:800
}

.faq p{
  color:var(--muted);
  margin-bottom:2px
}

.notice{
  border-left:4px solid var(--gold);
  padding:16px 18px;
  background:#fff9e8;
  border-radius:10px;
  color:#5c4a21
}

.footer{
  background:#03070d;
  color:#aab7c7;
  padding:58px 0 28px
}

.footer-top{
  display:grid;
  grid-template-columns:1.3fr .7fr .7fr .9fr;
  gap:40px;
  padding-bottom:35px
}

.footer-logo img{
  width:180px;
  height:90px;
  object-fit:cover;
  object-position:center 62%;
  border-radius:10px
}

.footer h4{
  color:#fff;
  margin:0 0 13px
}

.footer a{
  display:block;
  color:#aab7c7;
  text-decoration:none;
  font-size:13px;
  margin:8px 0
}

.footer a:hover{
  color:var(--gold2)
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:24px;
  font-size:12px
}

.pill{
  display:inline-flex;
  padding:8px 12px;
  border:1px solid #d9dee7;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#fff
}

.social-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.social-row a{
  display:inline-flex;
  border:1px solid rgba(255,255,255,.2);
  padding:8px 11px;
  border-radius:999px;
  margin:0
}

.catalog-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:30px
}

.catalog-toolbar button{
  border:1px solid #d7dce5;
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:800
}

.catalog-toolbar button.active{
  background:var(--ink);
  color:#fff
}

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

.product-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:24px
}

.product-icon{
  height:120px;
  border-radius:16px;
  background:linear-gradient(135deg,#eef4ff,#fff5d7);
  display:grid;
  place-items:center;
  font-size:42px;
  margin-bottom:18px
}

.product-card h3{
  margin:0 0 7px
}

.product-card p{
  color:var(--muted);
  font-size:14px
}

.product-card a{
  font-weight:900;
  color:#1d5db5;
  text-decoration:none;
  font-size:13px
}

.legal-copy{
  max-width:850px
}

.legal-copy h2{
  font-family:inherit;
  font-size:26px;
  margin-top:36px
}

.legal-copy p,
.legal-copy li{
  color:#4f596b
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}


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

@media(max-width:1000px){

  .menu-toggle{
    display:block
  }

  .nav{
    position:absolute;
    top:82px;
    left:0;
    right:0;
    background:#050608;
    padding:22px 20px;
    display:none;
    flex-direction:column;
    align-items:flex-start
  }

  .nav.open{
    display:flex
  }

  .hero-grid,
  .split,
  .why-grid,
  .contact-grid,
  .content-grid{
    grid-template-columns:1fr
  }

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

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

  .feature-strip{
    grid-template-columns:1fr 1fr
  }

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

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

  .side-card{
    position:static
  }

  .cta-inner{
    align-items:flex-start;
    flex-direction:column
  }
}


@media(max-width:640px){

  .container{
    width:min(100% - 28px,1200px)
  }

  .brand img{
    width:132px;
    height:56px
  }

  .hero{
    padding:76px 0 64px
  }

  .hero h1{
    font-size:49px
  }

  .section{
    padding:70px 0
  }

  .cards,
  .steps,
  .feature-strip,
  .form,
  .footer-top,
  .product-grid{
    grid-template-columns:1fr
  }

  .form .full,
  .form button{
    grid-column:1
  }

  .hero-actions .btn{
    width:100%
  }

  .brand-panel{
    padding:18px
  }

  .cta h2{
    font-size:36px
  }

  .footer-bottom{
    flex-direction:column
  }

  .page-hero{
    padding:72px 0 58px
  }

  .page-hero h1{
    font-size:46px
  }
}


/* ===========================
   COMMERCE + SOURCING
=========================== */

.cart-link{
  display:inline-flex!important;
  align-items:center;
  gap:6px
}

.cart-link span{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:var(--gold);
  color:#111;
  font-size:11px
}

.catalog-controls{
  display:grid;
  gap:18px
}

.catalog-filter-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,280px);
  gap:12px;
  align-items:center
}

.catalog-search input{
  width:100%;
  border:1px solid #d7dce5;
  border-radius:16px;
  padding:15px 17px;
  font:inherit;
  background:#fff;
  box-shadow:0 6px 20px rgba(16,24,40,.04)
}

.catalog-brand-filter select{
  width:100%;
  border:1px solid #d7dce5;
  border-radius:16px;
  padding:15px 42px 15px 17px;
  font:inherit;
  font-weight:700;
  background:#fff;
  color:var(--ink);
  box-shadow:0 6px 20px rgba(16,24,40,.04);
  cursor:pointer
}

.product-brand{
  margin:-3px 0 8px;
  color:var(--muted);
  font-size:13px
}

.product-brand strong{
  color:var(--ink)
}

.catalog-summary{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin:0 0 22px;
  font-size:13px;
  color:var(--muted)
}

.catalog-summary a{
  font-weight:900;
  color:#1d5db5;
  text-decoration:none
}

.product-card{
  display:flex;
  flex-direction:column;
  min-height:390px
}

.product-card .product-icon{
  height:145px
}

.product-card .product-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px
}

.mode-badge{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
  background:#edf4ff;
  color:#154b96
}

.mode-badge.buy{
  background:#ecfdf3;
  color:#067647
}

.product-price{
  font-size:20px;
  font-weight:900;
  color:var(--ink)
}

.product-card .product-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:18px
}

.product-card .product-actions a,
.product-card .product-actions button{
  flex:1;
  min-width:120px
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 14px;
  border:1px solid #d5dbe5;
  border-radius:999px;
  background:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  color:var(--ink)
}

.product-detail{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:56px;
  align-items:start
}

.product-visual{
  min-height:460px;
  border-radius:28px;
  background:
    radial-gradient(circle at 30% 25%,rgba(45,110,216,.18),transparent 33%),
    linear-gradient(135deg,#eef4ff,#fff7db);
  display:grid;
  place-items:center;
  font-size:110px;
  border:1px solid #e5e7eb
}

.product-info h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(42px,5vw,64px);
  line-height:1.03;
  margin:10px 0 18px
}

.product-info .summary{
  font-size:18px;
  color:#566176
}

.product-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin:28px 0
}

.product-fact{
  padding:15px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff
}

.product-fact small{
  display:block;
  color:var(--muted)
}

.product-fact strong{
  display:block;
  margin-top:3px
}

.spec-list{
  padding-left:20px;
  color:#4f596b
}

.product-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:26px
}

.darkcrumb{
  color:#6b7280
}

.darkcrumb a{
  color:#1d5db5
}

.compact{
  padding:66px 0 54px
}

.cart-layout{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:36px;
  align-items:start
}

.cart-items{
  display:grid;
  gap:14px
}

.cart-item{
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:18px;
  align-items:center;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:18px
}

.cart-icon{
  width:90px;
  height:90px;
  border-radius:14px;
  background:linear-gradient(135deg,#eef4ff,#fff5d7);
  display:grid;
  place-items:center;
  font-size:36px
}

.cart-item h3{
  margin:0 0 4px
}

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

.cart-qty{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px
}

.cart-qty button{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid #d5dbe5;
  background:#fff;
  cursor:pointer
}

.cart-summary{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:22px;
  padding:24px;
  position:sticky;
  top:105px
}

.cart-summary h2{
  margin-top:0
}

.summary-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:13px 0;
  border-bottom:1px solid #eee
}

.summary-row.total{
  font-size:18px;
  border-bottom:0
}

.mini-note{
  font-size:12px;
  color:var(--muted)
}

.fullbtn{
  width:100%
}

.empty-state{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:22px;
  padding:42px;
  text-align:center
}

.upload-field input{
  padding:11px;
  background:#f8fafc
}

.upload-help{
  font-size:11px;
  color:var(--muted);
  font-weight:500
}

.photo-preview{
  grid-column:1/-1;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px
}

.photo-preview img{
  max-height:260px;
  border-radius:12px;
  margin-bottom:10px
}

.quote-media-preview-wrap{
  display:block
}

.quote-media-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px
}

.quote-media-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px
}

.quote-media-preview-item{
  overflow:hidden;
  border:1px solid #e2e7ee;
  border-radius:14px;
  background:#fff
}

.quote-media-preview-item img,
.quote-media-preview-item video{
  display:block;
  width:100%;
  height:150px;
  object-fit:cover;
  margin:0;
  border-radius:0;
  background:#0f1115
}

.quote-media-preview-item>div{
  display:grid;
  gap:3px;
  padding:10px 11px
}

.quote-media-preview-item strong{
  font-size:12px;
  overflow-wrap:anywhere
}

.quote-media-preview-item small{
  color:var(--muted);
  font-size:11px
}

.ghana-delivery-options{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  padding:20px;
  border:1px solid #e1c46c;
  border-radius:18px;
  background:#fffaf0
}

.ghana-delivery-options[hidden]{
  display:none
}

.ghana-delivery-head{
  grid-column:1/-1
}

.ghana-delivery-head h3{
  margin:6px 0 8px
}

.ghana-delivery-head p{
  margin:0;
  color:var(--muted);
  line-height:1.6
}

.ghana-delivery-options .full{
  grid-column:1/-1
}

@media(max-width:700px){
  .ghana-delivery-options{
    grid-template-columns:1fr;
    padding:16px
  }
}

.public-shipping-rate-card{
  margin-top:34px;
  padding:28px;
  border:1px solid #e2c66e;
  border-radius:24px;
  background:linear-gradient(135deg,#fffaf0,#ffffff);
  box-shadow:0 14px 34px rgba(5,15,34,.08)
}

.public-shipping-rate-card[hidden]{
  display:none
}

.shipping-rate-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:22px
}

.shipping-rate-head h2{
  margin:7px 0 0;
  font-size:clamp(28px,4vw,42px)
}

.shipping-provider-badge{
  display:inline-flex;
  padding:9px 13px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:12px;
  font-weight:800
}

.shipping-rate-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}

.shipping-rate-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px
}

.shipping-rate-meta>div{
  padding:14px 16px;
  border:1px solid #e6e9ef;
  border-radius:16px;
  background:#fff
}

.shipping-rate-meta small{
  display:block;
  margin-bottom:5px;
  color:var(--muted)
}

.shipping-rate-meta strong{
  display:block;
  font-size:16px
}

.shipping-destination-rates{
  display:grid;
  gap:10px
}

.shipping-destination-rate{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:16px 18px;
  border:1px solid #e4e8ef;
  border-radius:16px;
  background:#fff
}

.shipping-destination-rate small{
  display:block;
  margin-bottom:4px;
  color:var(--muted)
}

.shipping-destination-rate>div>strong{
  font-size:17px
}

.shipping-destination-price{
  text-align:right;
  white-space:nowrap
}

.shipping-destination-price strong{
  display:block;
  font-size:22px;
  color:var(--ink)
}

.shipping-destination-price span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-weight:700
}

.public-shipping-destination-rates{
  display:grid;
  gap:10px;
  margin:4px 0 8px
}

.public-shipping-destination-rates>small{
  color:#667085
}

.shipping-rate-grid>div{
  padding:16px;
  border:1px solid #e6e9ef;
  border-radius:16px;
  background:#fff
}

.shipping-rate-grid small{
  display:block;
  color:var(--muted);
  margin-bottom:5px
}

.shipping-rate-grid strong{
  display:block;
  font-size:17px
}

.shipping-rate-price strong{
  font-size:28px;
  color:var(--ink)
}

.shipping-rate-price span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-weight:700
}

.shipping-rate-notice{
  margin-top:18px;
  padding:14px 16px;
  border-radius:14px;
  background:#f5f7fa;
  color:#4f596b;
  line-height:1.55
}

.shipping-rate-actions{
  margin-top:18px
}

@media(max-width:760px){
  .public-shipping-rate-card{
    padding:20px
  }

  .shipping-rate-head{
    flex-direction:column
  }

  .shipping-rate-grid,
  .shipping-rate-meta{
    grid-template-columns:1fr
  }

  .shipping-destination-rate{
    align-items:flex-start
  }

  .shipping-destination-price{
    text-align:right
  }

  .shipping-provider-badge{
    border-radius:12px
  }
}

.text-button{
  border:0;
  background:transparent;
  color:#1d5db5;
  font-weight:800;
  cursor:pointer;
  padding:0
}

.consent{
  grid-template-columns:auto 1fr!important;
  align-items:start;
  font-weight:500!important
}

.consent input{
  width:auto!important;
  margin-top:4px
}

.commerce-note{
  padding:14px 16px;
  border-radius:12px;
  background:#f5f7fb;
  color:#596275;
  font-size:13px
}


@media(max-width:1000px){

  .product-detail,
  .cart-layout{
    grid-template-columns:1fr
  }

  .cart-summary{
    position:static
  }

  .product-facts{
    grid-template-columns:1fr 1fr
  }
}


@media(max-width:640px){

  .catalog-summary{
    align-items:flex-start;
    flex-direction:column
  }

  .product-detail{
    gap:28px
  }

  .product-visual{
    min-height:300px
  }

  .product-facts{
    grid-template-columns:1fr
  }

  .cart-item{
    grid-template-columns:70px 1fr
  }

  .cart-icon{
    width:70px;
    height:70px
  }

  .cart-item>div:last-child{
    grid-column:1/-1
  }

  .product-cta .btn,
  .product-cta .btn-ghost{
    width:100%
  }
}


/* ===========================
   BACKEND / ACCOUNT / ADMIN
=========================== */

.product-image{
  height:180px;
  border-radius:14px;
  overflow:hidden;
  background:#f0f2f5;
  display:flex;
  align-items:center;
  justify-content:center
}

.product-image img{
  width:100%;
  height:100%;
  object-fit:cover
}

.product-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px
}

.form-status{
  margin-top:14px;
  font-weight:700;
  min-height:1.3em
}

.checkout-grid,
.account-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:28px;
  align-items:start
}

.summary-card,
.form-card{
  background:#fff;
  border:1px solid #e5e8ec;
  border-radius:20px;
  padding:24px;
  box-shadow:0 12px 35px rgba(0,0,0,.06)
}

.summary-line{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
  border-bottom:1px solid #eceff2
}

.small-note{
  font-size:.88rem;
  color:#626b76
}


/* CHECKOUT FORM — RESPONSIVE LAYOUT */

#checkoutForm{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box
}

#checkoutForm h2{
  margin:0 0 22px;
  line-height:1.08
}

#checkoutForm .form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:16px
}

#checkoutForm label{
  display:grid;
  gap:8px;
  min-width:0;
  margin:0 0 16px;
  font-weight:750;
  color:#172033
}

#checkoutForm .form-grid > label{
  margin:0
}

#checkoutForm input,
#checkoutForm select,
#checkoutForm textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  margin:0;
  padding:13px 14px;
  border:1px solid #d8dee9;
  border-radius:12px;
  background:#fff;
  color:#172033;
  font:inherit;
  line-height:1.35
}

#checkoutForm input,
#checkoutForm select{
  min-height:50px
}

#checkoutForm textarea{
  min-height:100px;
  resize:vertical
}

#checkoutForm input:focus,
#checkoutForm select:focus,
#checkoutForm textarea:focus{
  outline:3px solid rgba(45,110,216,.14);
  border-color:#4b82d6
}

#checkoutForm > .btn{
  min-height:52px
}

#checkoutForm .checkout-policy-ack{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:11px;
  align-items:start;
  margin:6px 0 18px;
  padding:14px 15px;
  border:1px solid #e4d7aa;
  border-radius:14px;
  background:#fffaf0;
  color:#344054;
  font-size:13px;
  font-weight:600;
  line-height:1.55
}

#checkoutForm .checkout-policy-ack input{
  width:20px;
  height:20px;
  min-height:0;
  margin:2px 0 0;
  padding:0
}

#checkoutForm .checkout-policy-ack a{
  color:#184f9f;
  font-weight:800
}

#checkoutForm .checkout-field-note{
  display:block;
  color:#667085;
  font-size:12px;
  font-weight:550;
  line-height:1.45
}

#checkoutRegionStatus[data-state="ready"]{
  color:#177245;
  font-weight:700
}

#checkoutRegionStatus[data-state="manual"]{
  color:#a15c00;
  font-weight:700
}

@media(max-width:640px){
  .checkout-grid{
    gap:18px
  }

  #checkoutForm{
    padding:18px
  }

  #checkoutForm h2{
    margin-bottom:18px;
    font-size:clamp(30px,9vw,40px)
  }

  #checkoutForm .form-grid{
    grid-template-columns:1fr;
    gap:14px
  }

  #checkoutForm .form-grid > label,
  #checkoutForm > label{
    margin:0 0 14px
  }

  #checkoutForm .form-grid > label{
    margin:0
  }

  #checkoutForm input,
  #checkoutForm select,
  #checkoutForm textarea{
    font-size:16px
  }

  #checkoutForm > .btn{
    width:100%;
    margin-top:4px
  }
}

.center{
  text-align:center
}

.success-logo{
  width:120px;
  max-height:86px;
  object-fit:contain;
  margin-bottom:18px
}

.tab-row{
  display:flex;
  gap:8px;
  margin-bottom:20px
}

.tab-row button,
.admin-side button{
  border:0;
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  font:inherit
}

.tab-row button.active,
.admin-side button.active{
  background:#0e4aa8;
  color:#fff
}

.account-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

.order-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid #e9ecef
}

.order-row small{
  display:block;
  color:#69727d;
  margin-top:4px
}

.admin-body{
  background:#f3f5f8
}

.admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:250px 1fr
}

.admin-side{
  background:#080b10;
  color:#fff;
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:10px
}

.admin-side img{
  width:140px;
  margin-bottom:12px
}

.admin-side h1{
  font-size:1.15rem;
  margin:0 0 18px
}

.admin-side button,
.admin-side a{
  text-align:left;
  background:transparent;
  color:#dce2e9;
  text-decoration:none
}

.admin-main{
  padding:34px;
  overflow:auto
}

.admin-login{
  max-width:520px;
  margin:8vh auto
}

.admin-top,
.admin-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px
}

.admin-actions{
  justify-content:flex-start
}

.table-wrap{
  overflow:auto;
  background:#fff;
  border:1px solid #e2e5e8;
  border-radius:16px
}

.table-wrap table{
  width:100%;
  border-collapse:collapse;
  min-width:760px
}

.table-wrap th,
.table-wrap td{
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid #eceff2;
  vertical-align:top
}

.table-wrap th{
  background:#f7f8fa
}

.admin-cards{
  display:grid;
  gap:16px
}

.check-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0
}

.check-label input{
  width:auto
}

.empty-state{
  padding:30px;
  border:1px dashed #bdc4cc;
  border-radius:16px;
  background:#fafbfc
}

.open-static{
  display:flex!important
}


@media(max-width:900px){

  .checkout-grid,
  .account-grid{
    grid-template-columns:1fr
  }

  .admin-shell{
    grid-template-columns:1fr
  }

  .admin-side{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center
  }

  .admin-side img{
    width:100px;
    margin:0
  }

  .admin-side h1{
    width:100%;
    margin:0
  }

  .admin-main{
    padding:20px
  }

  .open-static{
    gap:12px
  }
}


.admin-cards{
  display:grid;
  gap:16px;
  margin-top:18px
}

.admin-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px
}

.form-status{
  min-height:1.4em
}

.check-label{
  display:flex!important;
  align-items:center;
  gap:8px
}

.check-label input{
  width:auto!important
}

.service-card h3{
  font-size:1.6rem;
  margin:.4rem 0 0
}

.admin-main select{
  max-width:100%
}


/* ===========================
   BULK PRODUCT IMPORT
=========================== */

.admin-import-guidance{
  margin:18px 0;
  padding:15px 16px;
  border:1px solid #e3e7ee;
  border-radius:14px;
  background:#f8fafc
}

.admin-import-guidance strong{
  display:block;
  margin-bottom:6px;
  color:#172033
}

.admin-import-guidance p{
  margin:0;
  color:#667085;
  line-height:1.55
}

#importTable .import-ok{
  color:#147d38
}

#importTable .import-error{
  color:#b42318
}

#importTable td small{
  display:block;
  max-width:360px;
  margin-top:5px;
  color:#667085;
  line-height:1.45
}


/* ===========================
   PRODUCT EDITOR
=========================== */

#productEditor{
  max-width:1040px;
  overflow:hidden
}

#productEditor h2{
  margin:0 0 24px;
  font-size:clamp(28px,4vw,40px);
  line-height:1.1
}

#productEditor .form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
  margin-bottom:18px
}

#productEditor label:not(.check-label){
  display:grid;
  gap:8px;
  min-width:0;
  margin:0 0 18px;
  font-weight:700;
  line-height:1.35
}

#productEditor .form-grid > label{
  margin:0
}

#productEditor input,
#productEditor select,
#productEditor textarea{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  margin:0;
  border:1px solid #d8dde6;
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font:inherit
}

#productEditor input,
#productEditor select{
  min-height:48px;
  padding:11px 13px
}

#productEditor textarea{
  min-height:108px;
  padding:12px 13px;
  resize:vertical;
  line-height:1.45
}

#productEditor label small,
#productEditor .admin-pricing-editor > small{
  color:#667085;
  font-size:12px;
  font-weight:500;
  line-height:1.45
}

#productEditor input:focus,
#productEditor select:focus,
#productEditor textarea:focus{
  outline:2px solid rgba(45,110,216,.18);
  border-color:#4b82d6
}

#productEditor .admin-gallery-editor{
  margin:26px 0 24px;
  border:1px solid #e2e6ec;
  border-radius:18px;
  background:#f7fbff;
  overflow:hidden
}

#productEditor .admin-gallery-editor > summary{
  list-style:none
}

#productEditor .admin-gallery-editor > summary::-webkit-details-marker{
  display:none
}

#productEditor .admin-gallery-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  cursor:pointer;
  user-select:none
}

#productEditor .admin-gallery-summary:hover{
  background:rgba(255,255,255,.55)
}

#productEditor .admin-gallery-summary > div{
  display:grid;
  gap:4px;
  min-width:0
}

#productEditor .admin-gallery-summary strong{
  color:var(--ink);
  font-size:20px;
  line-height:1.25
}

#productEditor .admin-gallery-summary small{
  color:#667085;
  font-size:12px;
  font-weight:600;
  line-height:1.4
}

#productEditor .admin-gallery-chevron{
  flex:0 0 auto;
  font-size:34px;
  line-height:1;
  color:#456fb2;
  transform:rotate(90deg);
  transition:transform .18s ease
}

#productEditor .admin-gallery-editor[open] .admin-gallery-chevron{
  transform:rotate(-90deg)
}

#productEditor .admin-gallery-content{
  display:grid;
  gap:16px;
  padding:18px 20px 20px;
  border-top:1px solid #dbe7f2
}

#productEditor .admin-gallery-content > p{
  margin:0;
  color:#667085;
  line-height:1.55
}

#productEditor .admin-gallery-content > small{
  color:#667085;
  line-height:1.5
}

#productEditor .admin-gallery-content .btn-ghost{
  justify-self:start
}


#productEditor .admin-variant-editor{
  margin:26px 0 24px;
  border:1px solid #e2e6ec;
  border-radius:18px;
  background:#fffaf0;
  overflow:hidden
}

#productEditor .admin-variant-editor > summary{
  list-style:none
}

#productEditor .admin-variant-editor > summary::-webkit-details-marker{
  display:none
}

#productEditor .admin-variant-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  cursor:pointer;
  user-select:none
}

#productEditor .admin-variant-summary:hover{
  background:rgba(255,255,255,.5)
}

#productEditor .admin-variant-summary > div{
  display:grid;
  gap:4px;
  min-width:0
}

#productEditor .admin-variant-summary strong{
  color:var(--ink);
  font-size:20px;
  line-height:1.25
}

#productEditor .admin-variant-summary small{
  color:#667085;
  font-size:12px;
  font-weight:600;
  line-height:1.4
}

#productEditor .admin-variant-chevron{
  flex:0 0 auto;
  font-size:34px;
  line-height:1;
  color:#8a6a20;
  transform:rotate(90deg);
  transition:transform .18s ease
}

#productEditor .admin-variant-editor[open] .admin-variant-chevron{
  transform:rotate(-90deg)
}

#productEditor .admin-variant-content{
  padding:0 20px 20px;
  border-top:1px solid #eadfbe
}

#productEditor .admin-variant-content .section-heading{
  margin:16px 0 18px
}

#productEditor .admin-variant-content .section-heading p{
  margin:0;
  color:#667085;
  line-height:1.55
}

#productEditor .admin-variant-editor .form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:12px
}

#productEditor .admin-variant-content > small{
  display:block;
  color:#667085;
  line-height:1.5
}

#productEditor .variant-inventory-manager{
  display:grid;
  gap:14px;
  margin:22px 0 18px;
  padding-top:18px;
  border-top:1px solid #eadfbe
}

#productEditor .variant-inventory-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px
}

#productEditor .variant-inventory-heading > div{
  display:grid;
  gap:4px
}

#productEditor .variant-inventory-heading strong{
  font-size:16px;
  color:var(--ink)
}

#productEditor .variant-inventory-heading small,
#productEditor .variant-inventory-summary span,
#productEditor .variant-inventory-empty{
  color:#667085;
  font-size:12px;
  line-height:1.45
}

#productEditor .variant-inventory-summary{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:10px
}

#productEditor .variant-inventory-summary strong{
  white-space:nowrap
}

#productEditor .variant-inventory-table-wrap{
  overflow-x:auto;
  border:1px solid #e1e5ec;
  border-radius:14px;
  background:#fff
}

#productEditor .variant-inventory-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse
}

#productEditor .variant-inventory-table th,
#productEditor .variant-inventory-table td{
  padding:11px;
  border-bottom:1px solid #eef1f5;
  text-align:left;
  vertical-align:middle
}

#productEditor .variant-inventory-table th{
  font-size:12px;
  color:#667085;
  background:#f8fafc
}

#productEditor .variant-inventory-table td:first-child{
  min-width:190px
}

#productEditor .variant-inventory-table input{
  min-height:40px;
  padding:8px 10px;
  border-radius:9px
}

#productEditor .variant-inventory-table input[type="checkbox"]{
  width:22px;
  min-height:22px;
  padding:0
}

#productEditor .variant-inventory-empty{
  margin:0;
  padding:14px;
  border:1px dashed #d7dce5;
  border-radius:12px;
  background:#fff
}

#productEditor #peGenerateVariantInventory{
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center
}


#productEditor .admin-pricing-editor{
  margin:26px 0 24px;
  border:1px solid #e2e6ec;
  border-radius:18px;
  background:#f8fafc;
  overflow:hidden
}

#productEditor .admin-pricing-editor > summary{
  list-style:none
}

#productEditor .admin-pricing-editor > summary::-webkit-details-marker{
  display:none
}

#productEditor .admin-pricing-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  cursor:pointer;
  user-select:none
}

#productEditor .admin-pricing-summary:hover{
  background:rgba(255,255,255,.55)
}

#productEditor .admin-pricing-summary > div{
  display:grid;
  gap:4px;
  min-width:0
}

#productEditor .admin-pricing-summary strong{
  color:var(--ink);
  font-size:20px;
  line-height:1.25
}

#productEditor .admin-pricing-summary small{
  color:#667085;
  font-size:12px;
  font-weight:600;
  line-height:1.4
}

#productEditor .admin-pricing-chevron{
  flex:0 0 auto;
  font-size:34px;
  line-height:1;
  color:#456fb2;
  transform:rotate(90deg);
  transition:transform .18s ease
}

#productEditor .admin-pricing-editor[open] .admin-pricing-chevron{
  transform:rotate(-90deg)
}

#productEditor .admin-pricing-content{
  padding:0 20px 20px;
  border-top:1px solid #e2e6ec
}

#productEditor .admin-pricing-content .section-heading{
  margin:16px 0 18px
}

#productEditor .admin-pricing-content .section-heading p{
  margin:0;
  color:#667085;
  line-height:1.55
}

#productEditor .admin-pricing-editor .form-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:16px
}

#productEditor .admin-pricing-content > small{
  display:block;
  color:#667085;
  line-height:1.5
}


#productEditor .check-label{
  margin:18px 0;
  font-weight:700
}

#productEditor > .btn,
#productEditor > .btn-ghost{
  margin-right:10px;
  margin-top:4px
}

@media(max-width:760px){

  #productEditor{
    padding:20px
  }

  #productEditor .form-grid,
  #productEditor .admin-pricing-editor .form-grid{
    grid-template-columns:1fr;
    gap:15px
  }

  #productEditor label:not(.check-label){
    margin-bottom:16px
  }

  #productEditor .form-grid > label{
    margin:0
  }

  #productEditor .admin-pricing-editor{
    margin:22px 0
  }

  #productEditor .admin-pricing-summary{
    padding:16px
  }

  #productEditor .admin-pricing-summary strong{
    font-size:18px
  }

  #productEditor .admin-pricing-content{
    padding:0 16px 16px
  }

  #productEditor .admin-gallery-editor{
    margin:22px 0
  }

  #productEditor .admin-gallery-summary{
    padding:16px
  }

  #productEditor .admin-gallery-summary strong{
    font-size:18px
  }

  #productEditor .admin-gallery-content{
    padding:16px
  }

  #productEditor .admin-gallery-content .btn-ghost{
    width:100%
  }

  #productEditor .admin-variant-editor{
    margin:22px 0
  }

  #productEditor .admin-variant-summary{
    padding:16px
  }

  #productEditor .admin-variant-summary strong{
    font-size:18px
  }

  #productEditor .admin-variant-content{
    padding:0 16px 16px
  }


  #productEditor .variant-inventory-heading,
  #productEditor .variant-inventory-summary{
    display:grid;
    gap:10px
  }

  #productEditor .variant-inventory-heading .btn-ghost{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    line-height:1.25
  }

  #productEditor .variant-inventory-summary span{
    white-space:normal;
    overflow-wrap:anywhere
  }

  #productEditor .variant-inventory-table-wrap{
    overflow:visible;
    border:0;
    background:transparent
  }

  #productEditor .variant-inventory-table{
    min-width:0;
    width:100%;
    display:block
  }

  #productEditor .variant-inventory-table thead{
    display:none
  }

  #productEditor .variant-inventory-table tbody{
    display:grid;
    gap:14px
  }

  #productEditor .variant-inventory-table tr{
    display:grid;
    gap:10px;
    padding:14px;
    border:1px solid #e1e5ec;
    border-radius:14px;
    background:#fff
  }

  #productEditor .variant-inventory-table td{
    display:grid;
    grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr);
    gap:10px;
    align-items:center;
    padding:0;
    border:0
  }

  #productEditor .variant-inventory-table td::before{
    content:attr(data-label);
    color:#667085;
    font-size:12px;
    font-weight:800;
    line-height:1.25
  }

  #productEditor .variant-inventory-table td:first-child{
    min-width:0
  }

  #productEditor .variant-inventory-table td:first-child strong{
    overflow-wrap:anywhere
  }

  #productEditor .variant-inventory-table input{
    width:100%;
    min-width:0
  }

  #productEditor .variant-inventory-table input[type="checkbox"]{
    justify-self:start
  }

  #productEditor .admin-variant-editor .form-grid{
    grid-template-columns:1fr
  }

  #productEditor input,
  #productEditor select{
    min-height:50px
  }

  #productEditor > .btn,
  #productEditor > .btn-ghost{
    width:100%;
    margin:8px 0 0
  }
}


/* ===========================
   V5 PRODUCTION READINESS
=========================== */

.product-gallery{
  min-width:0
}

.product-thumbs{
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  margin-top:.8rem
}

.product-thumb{
  width:70px;
  height:70px;
  padding:3px;
  border:1px solid #d9dde5;
  border-radius:10px;
  background:#fff;
  cursor:pointer
}

.product-thumb.active{
  outline:2px solid #1c64f2
}

.product-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:7px
}

.admin-actions{
  flex-wrap:wrap
}

.admin-actions a{
  text-decoration:none
}


/* ===========================
   SMALLER HEADER LOGO
=========================== */

.brand img{
  width:90px;
  height:auto;
  object-fit:contain;
  object-position:center
}

@media(max-width:640px){

  .brand img{
    width:75px;
    height:auto
  }
}


/* ==================================
   CRINEO ADMIN DASHBOARD STATISTICS
================================== */

#adminStats.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:22px
}

#adminStats .service-card{
  min-width:0;
  margin:0;
  padding:20px;
  background:#ffffff;
  border:1px solid #e5e8ec;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(5,15,34,.06)
}

#adminStats .service-card .eyebrow{
  display:block;
  margin:0 0 8px;
  font-size:11px;
  line-height:1.35;
  letter-spacing:.15em;
  color:var(--gold)
}

#adminStats .service-card h3{
  margin:0;
  font-size:32px;
  line-height:1.1;
  color:var(--ink)
}

#adminStats .service-card p{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.4;
  color:var(--muted)
}


/* ===========================
   TABLET / MOBILE ADMIN
=========================== */

@media(max-width:900px){

  #adminStats.service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }

  #adminStats .service-card{
    padding:16px;
    border-radius:16px
  }

  #adminStats .service-card h3{
    font-size:28px
  }

  #adminStats .service-card .eyebrow{
    font-size:10px;
    letter-spacing:.13em
  }

  #adminStats .service-card:last-child{
    grid-column:1/-1
  }

  #dashboardView>.form-card{
    margin-top:18px
  }
}


/* ===========================
   EXTRA SMALL PHONES
=========================== */

@media(max-width:390px){

  #adminStats.service-grid{
    gap:10px
  }

  #adminStats .service-card{
    padding:13px
  }

  #adminStats .service-card h3{
    font-size:24px
  }

  #adminStats .service-card .eyebrow{
    font-size:9px
  }

  #adminStats .service-card p{
    font-size:13px
  }
}
/* ==================================
   ADMIN MOBILE COMPACT SIZE ONLY
================================== */

@media (max-width:900px){

  .admin-side{
    padding:12px 16px;
    gap:6px 8px;
  }

  .admin-side img{
    width:58px;
    height:auto;
    margin:0;
  }

  .admin-side h1{
    width:100%;
    font-size:16px;
    margin:0 0 4px;
  }

  .admin-side button,
  .admin-side a{
    font-size:12px;
    padding:7px 10px;
    border-radius:8px;
  }

  .admin-main{
    padding:16px;
  }

  .admin-top{
    margin-bottom:14px;
  }

  #adminTitle{
    font-size:28px;
    margin:0;
  }

  #adminLogout{
    padding:8px 13px;
    font-size:12px;
  }

  #adminStats.service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  #adminStats .service-card{
    padding:12px;
    border-radius:13px;
  }

  #adminStats .service-card .eyebrow{
    font-size:8px;
    margin-bottom:5px;
  }

  #adminStats .service-card h3{
    font-size:22px;
  }

  #adminStats .service-card p{
    font-size:11px;
    margin-top:5px;
  }

  #dashboardView > .form-card{
    padding:14px;
    margin-top:12px;
  }
}
/* ==================================
   ADMIN MOBILE WIDTH FIX
================================== */

@media (max-width:900px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .admin-shell,
  .admin-main,
  #adminApp,
  #dashboardView,
  #adminStats{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .admin-main{
    overflow-x:hidden;
  }

  #adminStats.service-grid{
    width:100%;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  #adminStats .service-card{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
  }

  .admin-top{
    width:100%;
    max-width:100%;
  }
}
/* ==================================
   CRINEO LOGO — FINAL STANDARD
================================== */

/* Website header */
.brand{
  display:flex;
  align-items:center;
  min-width:auto;
  text-decoration:none;
}

.brand img{
  width:120px;
  height:auto;
  max-height:64px;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#ffffff;
  border-radius:4px;
}


/* Website footer */
.footer-logo img{
  width:150px;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#ffffff;
  border-radius:4px;
}


/* Admin dashboard */
.admin-side img{
  width:78px;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#ffffff;
  border-radius:4px;
  margin:0 0 10px;
}


/* Account / success-page logo */
.success-logo{
  width:105px;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#ffffff;
  border-radius:4px;
  margin-bottom:18px;
}


/* Mobile sizes */
@media(max-width:640px){

  .brand img{
    width:100px;
    max-height:56px;
  }

  .footer-logo img{
    width:135px;
  }

  .admin-side img{
    width:68px;
  }

  .success-logo{
    width:92px;
  }
}
/* =========================================
   CRINEO LOGO — FINAL SIZE ADJUSTMENTS
========================================= */

.brand img{
  width:90px;
  height:auto;
  max-height:54px;
  object-fit:contain;
}

.brand-panel img{
  width:76%;
  max-width:420px;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
  border-radius:14px;
}

.admin-side img{
  width:62px;
  height:auto;
  object-fit:contain;
}

@media(max-width:640px){

  .brand img{
    width:84px;
    max-height:50px;
  }

  .brand-panel img{
    width:82%;
    max-width:340px;
  }

  .admin-side img{
    width:60px;
  }
}
.brand-panel img{
  width:68%;
  max-width:280px;
}
.brand-panel img{
  width:55%;
  max-width:230px;
}
/* =========================================
   CRINEO CHAT — COMPACT MESSAGE BUBBLES
========================================= */

#accountMessages{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#accountMessages .chat-row{
  display:flex;
  width:100%;
}

#accountMessages .chat-row.customer{
  justify-content:flex-end;
}

#accountMessages .chat-row.admin{
  justify-content:flex-start;
}

#accountMessages .chat-bubble{
  display:inline-block !important;
  width:fit-content !important;
  max-width:76% !important;
  padding:10px 13px !important;
  border-radius:16px !important;
  overflow:hidden;
}

#accountMessages .chat-row.customer .chat-bubble{
  border-bottom-right-radius:6px !important;
}

#accountMessages .chat-row.admin .chat-bubble{
  border-bottom-left-radius:6px !important;
}

#accountMessages .chat-message-text{
  margin:0 !important;
  font-size:15px !important;
  line-height:1.4 !important;
}

#accountMessages .chat-sender{
  display:block;
  margin-bottom:5px !important;
  font-size:12px !important;
}

#accountMessages .chat-time{
  display:block;
  margin-top:6px !important;
  font-size:11px !important;
  line-height:1.25 !important;
}

/* Images */
#accountMessages .chat-bubble img{
  width:auto !important;
  max-width:250px !important;
  max-height:280px !important;
  object-fit:cover !important;
  border-radius:12px !important;
}

/* Videos */
#accountMessages .chat-bubble video{
  width:250px !important;
  max-width:100% !important;
  border-radius:12px !important;
}

/* Voice notes */
#accountMessages .chat-bubble audio{
  width:200px !important;
  max-width:100% !important;
}


/* Mobile */
@media(max-width:640px){

  #accountMessages .chat-bubble{
    max-width:78% !important;
    padding:9px 12px !important;
  }

  #accountMessages .chat-bubble img{
    max-width:220px !important;
    max-height:250px !important;
  }

  #accountMessages .chat-bubble video{
    width:220px !important;
  }

  #accountMessages .chat-bubble audio{
    width:185px !important;
  }

}
/* =========================================
   FINAL CHAT BUBBLE SIZE OVERRIDE
========================================= */

#accountMessages .chat-bubble{
  width:max-content!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;

  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;

  gap:3px!important;

  padding:7px 10px!important;
  margin:0!important;
}

#accountMessages .chat-message-text{
  width:max-content!important;
  min-width:0!important;
  max-width:100%!important;

  height:auto!important;
  min-height:0!important;

  margin:0!important;
  padding:0!important;
}

#accountMessages .chat-sender{
  width:max-content!important;
  min-width:0!important;

  height:auto!important;
  min-height:0!important;

  margin:0!important;
  padding:0!important;
}

/* Normal messages can still grow when text is long */
#accountMessages .chat-bubble{
  max-width:82%!important;
}

#accountMessages .chat-message-text{
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
}


/* Keep media at useful sizes */
#accountMessages .chat-bubble:has(img),
#accountMessages .chat-bubble:has(video),
#accountMessages .chat-bubble:has(audio){
  width:auto!important;
}


/* Mobile */
@media(max-width:640px){

  #accountMessages .chat-bubble{
    padding:6px 9px!important;
    gap:2px!important;
    max-width:82%!important;
  }

}
#accountMessages .chat-bubble{
  width:max-content!important;
  min-width:0!important;
  max-width:70%!important;

  height:auto!important;
  min-height:0!important;

  padding:6px 9px!important;
  gap:2px!important;

  display:inline-flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
}

#accountMessages .chat-message-text{
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;

  font-size:14px!important;
  line-height:1.25!important;
}

#accountMessages .chat-sender{
  width:max-content!important;
  margin:0!important;
  padding:0!important;

  font-size:10px!important;
  line-height:1.1!important;
}

@media(max-width:640px){

  #accountMessages .chat-bubble{
    max-width:70%!important;
    padding:6px 9px!important;
  }

}

/* =========================================
   ADMIN MOBILE VIEWPORT HARD FIX
========================================= */

@media (max-width:900px){

  body.admin-body,
  body.admin-body main{
    width:100%;
    max-width:100vw;
    min-width:0;
    overflow-x:hidden;
  }

  .admin-shell{
    display:block;
    width:100%;
    max-width:100vw;
    min-width:0;
    overflow-x:hidden;
  }

  .admin-side{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:12px;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    overflow:hidden;
  }

  .admin-side img,
  .admin-side h1{
    grid-column:1/-1;
  }

  .admin-side h1{
    width:auto;
    max-width:100%;
    margin:0 0 4px;
  }

  .admin-side button,
  .admin-side a{
    width:100%;
    max-width:100%;
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:left;
  }

  .admin-main,
  #adminApp,
  #dashboardView,
  #productsView,
  #importView,
  #categoriesView,
  #ordersView,
  #quotesView,
  #messagesView,
  #shippingView,
  #readinessView,
  #launchView{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
  }

  .admin-main{
    padding:14px;
  }

  .admin-top,
  .admin-actions,
  .admin-messages-layout,
  .admin-message-panel,
  .admin-message-sidebar,
  .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .admin-top{
    flex-wrap:wrap;
  }

  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* =========================================
   CRINEO LIVE VOICE / VIDEO CALLS
========================================= */

.chat-call-actions,
.admin-chat-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.chat-call-actions .btn-ghost,
.admin-chat-head-actions .btn-ghost{
  white-space:nowrap;
}

.crineo-call-open{
  overflow:hidden!important;
}

.crineo-call-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,14,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.crineo-call-overlay[hidden]{
  display:none!important;
}

.crineo-call-shell{
  width:min(760px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;
  background:#071426;
  color:#fff;
  box-shadow:0 30px 100px rgba(0,0,0,.45);
}

.crineo-call-top{
  text-align:center;
  padding:4px 10px 16px;
}

.crineo-call-type{
  display:block;
  margin-bottom:6px;
  color:#d7ae54;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
}

.crineo-call-top h2{
  margin:0;
  color:#fff;
  font-size:clamp(26px,5vw,42px);
  line-height:1.12;
}

.crineo-call-top p{
  margin:8px 0 0;
  color:rgba(255,255,255,.72);
  font-size:14px;
}

.crineo-call-media{
  position:relative;
  width:100%;
  min-height:330px;
  overflow:hidden;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 35%,rgba(45,110,216,.28),transparent 42%),
    linear-gradient(145deg,#02060d,#081a33);
}

.crineo-call-media[data-call-type="voice"]{
  display:flex;
  align-items:center;
  justify-content:center;
}

.crineo-call-avatar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:130px;
  height:130px;
  overflow:hidden;
  border:2px solid rgba(215,174,84,.75);
  border-radius:50%;
  background:#0e2b55;
  color:#f2d792;
  font-size:22px;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.crineo-call-avatar-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
}
.crineo-call-avatar[data-avatar-kind="brand"] .crineo-call-avatar-image{
  object-fit:contain;
  padding:12px;
}

.crineo-remote-video{
  width:100%;
  height:min(58vh,520px);
  min-height:330px;
  object-fit:cover;
  background:#02050a;
}

.crineo-local-video{
  position:absolute;
  top:14px;
  right:14px;
  width:min(28%,180px);
  aspect-ratio:3/4;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.88);
  border-radius:16px;
  background:#111827;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  z-index:3;
}

.crineo-call-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding-top:18px;
}

.crineo-call-control{
  min-height:46px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:#14243b;
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.crineo-call-control:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.crineo-call-control.accept{
  background:#1f8a4c;
  border-color:#1f8a4c;
}

.crineo-call-control.reject,
.crineo-call-control.end{
  background:#b42318;
  border-color:#b42318;
}

@media(max-width:640px){

  .chat-call-actions,
  .admin-chat-head-actions{
    width:100%;
    justify-content:flex-start;
  }

  .chat-call-actions .btn-ghost,
  .admin-chat-head-actions .btn-ghost{
    flex:1 1 auto;
    min-width:120px;
  }

  .crineo-call-overlay{
    padding:0;
    align-items:stretch;
  }

  .crineo-call-shell{
    width:100%;
    min-height:100vh;
    max-height:100vh;
    border:0;
    border-radius:0;
    padding:
      max(18px,env(safe-area-inset-top))
      14px
      max(18px,env(safe-area-inset-bottom));
  }

  .crineo-call-media{
    min-height:52vh;
    border-radius:20px;
  }

  .crineo-remote-video{
    height:52vh;
    min-height:52vh;
  }

  .crineo-local-video{
    top:10px;
    right:10px;
    width:30%;
    max-width:130px;
    border-radius:14px;
  }

  .crineo-call-controls{
    gap:8px;
    padding-top:14px;
  }

  .crineo-call-control{
    flex:1 1 calc(50% - 8px);
    min-width:135px;
  }
}


/* =========================================
   MESSAGE DELETE CONTROLS
========================================= */

.message-meta-actions,
.admin-message-meta-actions{
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
  min-width:0;
  margin-top:3px;
}

.chat-row.customer .message-meta-actions,
.admin-chat-row.customer .admin-message-meta-actions{
  justify-content:flex-end;
}

.chat-row.admin .message-meta-actions,
.admin-chat-row.admin .admin-message-meta-actions{
  justify-content:flex-start;
}

.chat-time-outside{
  display:block;
  margin:0 3px;
  font-size:11px;
  line-height:1.2;
  color:#7c8798;
  white-space:nowrap;
  opacity:.95;
}

.admin-message-meta-actions .admin-chat-time{
  margin-top:0;
}

.message-action-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

.message-more-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:26px;
  padding:0 6px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#7c8798;
  font:inherit;
  font-size:14px;
  font-weight:800;
  letter-spacing:1px;
  line-height:1;
  cursor:pointer;
}

.message-more-btn:hover,
.message-more-btn:focus-visible{
  background:rgba(15,23,42,.07);
  color:#172033;
  outline:none;
}

.message-delete-menu{
  position:absolute;
  top:calc(100% + 5px);
  right:0;
  z-index:80;
  width:max-content;
  min-width:170px;
  overflow:hidden;
  border:1px solid #e1e6ee;
  border-radius:12px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.18);
}

.chat-row.admin .message-delete-menu,
.admin-chat-row.admin .message-delete-menu{
  right:auto;
  left:0;
}

.message-delete-menu[hidden]{
  display:none!important;
}

.message-delete-menu button{
  display:block;
  width:100%;
  padding:11px 13px;
  border:0;
  border-bottom:1px solid #edf0f5;
  background:#fff;
  color:#172033;
  text-align:left;
  font:inherit;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}

.message-delete-menu button:last-child{
  border-bottom:0;
}

.message-delete-menu button:hover,
.message-delete-menu button:focus-visible{
  background:#f7f8fb;
  outline:none;
}

.message-delete-menu .delete-everyone{
  color:#b42318;
}

@media(max-width:640px){

  .message-delete-menu{
    min-width:160px;
  }

  .message-delete-menu button{
    padding:12px 13px;
  }
}


/* =========================================
   ADMIN MESSAGES NAVIGATION EMPHASIS
========================================= */

.admin-side .admin-message-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:50px;
  padding:13px 16px;
  background:#d7ae54 !important;
  color:#071426 !important;
  font-size:1.04rem;
  font-weight:900;
  box-shadow:0 8px 20px rgba(215,174,84,.22);
}

.admin-side .admin-message-nav:hover,
.admin-side .admin-message-nav:focus-visible{
  background:#e2bd68 !important;
  color:#071426 !important;
  outline:none;
}

.admin-side .admin-message-nav.active{
  background:#f0c96d !important;
  color:#071426 !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.15),
    0 10px 24px rgba(215,174,84,.3);
}

.admin-message-nav-label{
  display:inline-flex;
  align-items:center;
  min-width:0;
}

.admin-message-unread-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:25px;
  height:25px;
  padding:0 7px;
  border-radius:999px;
  background:#071426;
  color:#ffffff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-sizing:border-box;
}

.admin-message-unread-badge[hidden]{
  display:none!important;
}


@media(max-width:900px){

  .admin-side{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    align-items:stretch;
  }

  .admin-side img,
  .admin-side h1{
    grid-column:1 / -1;
  }

  .admin-side button{
    width:100%;
    min-width:0;
    min-height:46px;
  }

  .admin-side .admin-message-nav{
    grid-column:2;
    min-height:56px;
    font-size:1.08rem;
    padding:15px 16px;
  }

  .admin-side > a{
    grid-column:1 / -1;
    margin-top:2px;
  }
}


/* =========================================
   MESSAGE SENT / READ TICKS
========================================= */

.message-delivery-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:18px;
  height:18px;
  margin-left:1px;
  font-size:13px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  vertical-align:middle;
}

.message-delivery-status.sent{
  color:#8b95a5;
  letter-spacing:0;
}

.message-delivery-status.read{
  color:#16a34a;
  letter-spacing:-3px;
  min-width:21px;
  text-shadow:0 0 .01px currentColor;
}



/* =========================================
   CRINEO OFFICIAL SOCIAL / CONTACT LINKS
========================================= */

.contact-social-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.contact-social-links a,
.crineo-footer-social-line a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 11px;
  border:1px solid rgba(215,174,84,.55);
  border-radius:999px;
  color:inherit;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.crineo-footer-connect{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:22px 0;
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.crineo-footer-contact-line,
.crineo-footer-social-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.crineo-footer-contact-line strong{
  width:100%;
}

.crineo-footer-contact-line a{
  color:inherit;
  text-decoration:none;
}

@media(max-width:700px){
  .crineo-footer-connect{
    grid-template-columns:1fr;
  }
}


.crineo-footer-contact-line a[href^="tel:"]{
  font-weight:800;
}


/* =========================================
   CUSTOMER ENGAGEMENT CENTRE
========================================= */

.account-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.notification-bell-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:1px solid #d7deea;
  border-radius:999px;
  background:#fff;
  color:#172033;
  font-size:20px;
  cursor:pointer;
}

.notification-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#d7ae54;
  color:#071426;
  font-size:11px;
  font-weight:900;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}

.notification-badge[hidden]{
  display:none!important;
}

.notification-panel{
  margin:18px 0 28px;
  padding:18px;
  border:1px solid #dfe4ec;
  border-radius:20px;
  background:#fff;
}

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

.notification-panel-head,
.account-section-head,
.account-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.notification-panel-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.notification-list{
  display:grid;
  gap:8px;
  margin-top:16px;
}

.notification-item{
  display:grid;
  gap:4px;
  width:100%;
  padding:13px 14px;
  border:1px solid #e3e7ef;
  border-radius:14px;
  background:#fff;
  color:#172033;
  text-align:left;
  cursor:pointer;
}

.notification-item.unread{
  border-color:#d7ae54;
  background:#fffaf0;
  box-shadow:inset 3px 0 0 #d7ae54;
}

.notification-item strong{
  font-size:14px;
}

.notification-item span,
.notification-item small{
  color:#687386;
}

.notification-kind{
  width:max-content;
  padding:3px 7px;
  border-radius:999px;
  background:#eef2f8;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.order-tracking-card,
.quote-decision-card{
  margin:0 0 12px;
  padding:15px;
  border:1px solid #e0e5ed;
  border-radius:16px;
  background:#fff;
}

.order-tracking-card p,
.quote-decision-card p{
  margin:.35rem 0 0;
}

.order-tracking-details{
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid #edf0f5;
}

.order-timeline{
  display:grid;
  gap:0;
}

.order-timeline-step{
  position:relative;
  display:grid;
  grid-template-columns:28px 1fr;
  gap:10px;
  min-height:54px;
  color:#7b8493;
}

.order-timeline-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:13px;
  top:27px;
  bottom:0;
  width:2px;
  background:#e3e8ef;
}

.order-timeline-step.done:not(:last-child)::after{
  background:#d7ae54;
}

.order-timeline-dot{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:2px solid #dfe4ec;
  border-radius:999px;
  background:#fff;
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.order-timeline-step.done .order-timeline-dot{
  border-color:#d7ae54;
  background:#d7ae54;
  color:#071426;
}

.order-timeline-step.active strong{
  color:#172033;
}

.order-timeline-step strong,
.order-timeline-step small{
  display:block;
}

.order-timeline-step small{
  margin-top:4px;
  font-size:11px;
}

.quote-decision-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:13px;
}

.quote-decline-btn{
  color:#b42318!important;
}

.account-call-history{
  margin:28px 0;
  padding:18px;
  border:1px solid #e0e5ed;
  border-radius:18px;
  background:#fff;
}

.call-history-list{
  display:grid;
  gap:8px;
  margin-top:14px;
}

.call-history-item{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:11px;
  align-items:center;
  padding:11px 12px;
  border:1px solid #e6eaf0;
  border-radius:13px;
}

.call-history-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  background:#f2f5f9;
  font-size:18px;
}

.call-history-item strong,
.call-history-item small{
  display:block;
}

.call-history-item small{
  margin-top:3px;
  color:#778294;
}

@media(max-width:700px){
  .notification-panel-head,
  .account-section-head,
  .account-item-head{
    align-items:stretch;
    flex-direction:column;
  }

  .notification-panel-actions{
    justify-content:flex-start;
  }

  .quote-decision-actions .btn,
  .quote-decision-actions .btn-ghost{
    width:100%;
  }
}


/* =========================================
   ADMIN ENGAGEMENT FEATURES
========================================= */

.admin-top-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.admin-order-broad-status{
  display:block;
  margin-top:5px;
  color:#7b8493;
  text-transform:capitalize;
}

.admin-order-tracking-control{
  display:grid;
  grid-template-columns:minmax(220px,320px) minmax(0,1fr);
  gap:22px;
  margin:18px 0;
  padding:16px;
  border:1px solid #e2e6ed;
  border-radius:16px;
  background:#fafbfc;
}

.admin-order-tracking-control label{
  display:grid;
  gap:8px;
  align-content:start;
  font-weight:800;
}

.admin-order-tracking-control select{
  width:100%;
}

.admin-order-timeline-wrap{
  min-width:0;
}

.admin-quote-decision{
  margin:12px 0;
  padding:12px 14px;
  border:1px solid rgba(215,174,84,.55);
  border-radius:12px;
  background:#fffaf0;
  text-transform:capitalize;
}

.admin-quote-decision p{
  margin:.45rem 0 0;
  text-transform:none;
  color:#596476;
}

.admin-call-history-panel{
  margin:0 0 14px;
  padding:14px;
  border:1px solid #e2e6ed;
  border-radius:16px;
  background:#fff;
}

.admin-call-history-panel[hidden]{
  display:none!important;
}

@media(max-width:900px){
  .admin-order-tracking-control{
    grid-template-columns:1fr;
  }

  .admin-top-actions{
    width:100%;
    justify-content:flex-start;
  }
}



/* =========================================
   CRINEO PUBLIC STATISTICS
========================================= */

.public-stats-section{
  position:relative;
  overflow:hidden;
  padding:76px 0;
  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(215,174,84,.13),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #050608 0%,
      #071426 58%,
      #0b2443 100%
    );
  color:#fff;
}

.public-stats-section::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-130px;
  bottom:-160px;
  border:1px solid rgba(215,174,84,.2);
  border-radius:50%;
  pointer-events:none;
}

.public-stats-head{
  max-width:720px;
  margin-bottom:34px;
}

.public-stats-head h2{
  margin:10px 0 12px;
  color:#fff;
}

.public-stats-head p{
  margin:0;
  color:rgba(255,255,255,.7);
}

.public-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.public-stat{
  min-width:0;
  padding:24px 18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}

.public-stat strong{
  display:block;
  margin-bottom:9px;
  color:#d7ae54;
  font-size:clamp(2rem,4.5vw,3.45rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}

.public-stat span{
  display:block;
  color:rgba(255,255,255,.82);
  font-size:.82rem;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.public-stats-note{
  margin:18px 0 0;
  color:rgba(255,255,255,.52);
  font-size:.82rem;
}

.public-stats-note[data-state="error"]{
  color:#f1c7c7;
}

@media(max-width:900px){
  .public-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:520px){
  .public-stats-section{
    padding:58px 0;
  }

  .public-stats-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .public-stat{
    padding:20px 14px;
  }

  .public-stat strong{
    font-size:clamp(1.8rem,10vw,2.65rem);
  }

  .public-stat span{
    font-size:.72rem;
  }
}


/* CRINEO PORTAL DOCUMENT CENTRE */
.account-sourcing-hub{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
  margin:28px 0 34px;
  padding:22px;
  border:1px solid rgba(7,26,52,.12);
  border-radius:18px;
  background:#f7f9fc;
}
.account-sourcing-hub h3{margin:6px 0 8px}
.account-sourcing-hub p{max-width:620px;margin:0;line-height:1.6;opacity:.78}
.order-document-center{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(7,26,52,.12);
}
.order-document-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.order-document-head h4{margin:6px 0 0}
.order-document-list{
  display:grid;
  gap:10px;
}
.order-document-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid rgba(7,26,52,.12);
  border-radius:14px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.order-document-item:hover{
  transform:translateY(-1px);
  border-color:rgba(45,110,216,.45);
  box-shadow:0 10px 24px rgba(7,26,52,.08);
}
.order-document-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:10px;
  background:#eef3fb;
}
.order-document-copy{
  display:grid;
  gap:3px;
  min-width:0;
  flex:1;
}
.order-document-copy strong,
.order-document-copy small,
.order-document-copy span{
  overflow-wrap:anywhere;
}
.order-document-copy small{opacity:.68}
.order-document-copy span{font-size:13px;line-height:1.45;opacity:.78}
.order-document-open{font-weight:800;opacity:.55}
.order-document-empty{
  margin:0;
  padding:14px;
  border-radius:12px;
  background:#f7f9fc;
  line-height:1.55;
  opacity:.76;
}
.admin-order-document-upload{
  margin-top:24px;
  padding:18px;
  border:1px solid rgba(7,26,52,.12);
  border-radius:16px;
  background:#f8fafc;
}
.admin-order-document-upload h4{margin-top:0}
.admin-order-document-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.admin-order-document-grid .full{grid-column:1/-1}
.admin-order-document-grid input,
.admin-order-document-grid select,
.admin-order-document-grid textarea{
  width:100%;
  box-sizing:border-box;
  margin-top:7px;
}
.admin-order-document-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}
@media(max-width:720px){
  .admin-order-document-grid{grid-template-columns:1fr}
  .admin-order-document-grid .full{grid-column:auto}
}


/* CRINEO SHIPMENT TRACKING */
.order-shipment-center{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(7,26,52,.12);
}
.order-shipment-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.order-shipment-head h4{margin:6px 0 0}
.order-shipment-list{
  display:grid;
  gap:14px;
}
.order-shipment-card{
  padding:18px;
  border:1px solid rgba(7,26,52,.12);
  border-radius:16px;
  background:#fff;
}
.order-shipment-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.order-shipment-card-head>div{
  display:grid;
  gap:4px;
}
.order-shipment-card-head small{
  opacity:.62;
  overflow-wrap:anywhere;
}
.order-shipment-card-head strong{
  font-size:1.08rem;
}
.shipment-status-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:#eef3fb;
  font-size:.76rem;
  font-weight:800;
  line-height:1.2;
}
.shipment-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.shipment-facts>div{
  padding:12px;
  border-radius:12px;
  background:#f7f9fc;
  min-width:0;
}
.shipment-facts small{
  display:block;
  margin-bottom:4px;
  opacity:.62;
}
.shipment-facts strong{
  display:block;
  overflow-wrap:anywhere;
}
.shipment-external-link{
  margin:14px 0 0;
}
.shipment-external-link a{
  font-weight:800;
}
.shipment-notes{
  margin:14px 0 0;
  padding:12px;
  border-radius:12px;
  background:#fff8e8;
  line-height:1.55;
}
.shipment-events{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(7,26,52,.1);
}
.shipment-events h5{
  margin:0 0 12px;
}
.shipment-event{
  position:relative;
  display:grid;
  grid-template-columns:14px 1fr;
  gap:10px;
  padding:0 0 16px;
}
.shipment-event:not(:last-child)::before{
  content:"";
  position:absolute;
  left:5px;
  top:12px;
  bottom:0;
  width:2px;
  background:#dce4ef;
}
.shipment-event-dot{
  position:relative;
  z-index:1;
  width:12px;
  height:12px;
  margin-top:4px;
  border-radius:50%;
  background:#d7ae54;
  box-shadow:0 0 0 3px #f8f2e5;
}
.shipment-event>div{
  display:grid;
  gap:3px;
}
.shipment-event small{
  opacity:.62;
}
.shipment-event p{
  margin:4px 0 0;
  line-height:1.5;
  opacity:.8;
}
.admin-shipment-center{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(7,26,52,.12);
}
.admin-shipment-card{
  margin-top:14px;
  padding:18px;
  border:1px solid rgba(7,26,52,.12);
  border-radius:16px;
  background:#fff;
}
.admin-shipment-card h4{
  margin:0 0 4px;
}
.admin-shipment-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.admin-shipment-grid .full{
  grid-column:1/-1;
}
.admin-shipment-grid label{
  min-width:0;
}
.admin-shipment-grid input,
.admin-shipment-grid select,
.admin-shipment-grid textarea{
  width:100%;
  box-sizing:border-box;
  margin-top:7px;
}
.admin-shipment-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}
.admin-shipment-events{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(7,26,52,.1);
}
@media(max-width:720px){
  .shipment-facts,
  .admin-shipment-grid{
    grid-template-columns:1fr;
  }
  .admin-shipment-grid .full{
    grid-column:auto;
  }
}


/* CRINEO ORDER PAYMENTS */
.order-payment-center{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(7,26,52,.12);
}
.order-payment-center h4{
  margin:7px 0 14px;
}
.payment-plan-banner{
  display:grid;
  gap:4px;
  margin-bottom:14px;
  padding:13px 14px;
  border:1px solid rgba(215,174,84,.45);
  border-radius:14px;
  background:#fff9ec;
}
.payment-plan-banner strong{
  color:#172033;
}
.payment-plan-banner span{
  color:#6c7483;
  font-size:.84rem;
  line-height:1.45;
}
.payment-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.payment-facts>div{
  padding:12px 13px;
  border-radius:13px;
  background:#f7f9fc;
}
.payment-facts small,
.payment-facts strong{
  display:block;
}
.payment-facts small{
  margin-bottom:4px;
  color:#737d8d;
}
.payment-next-due{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0;
  padding:14px;
  border-radius:14px;
  background:#071426;
  color:#fff;
}
.payment-next-due span{
  font-size:.86rem;
  font-weight:800;
}
.payment-next-due strong{
  font-size:1.05rem;
  text-align:right;
}
.order-pay-button{
  width:100%;
  margin-top:2px;
}
.order-payment-status{
  margin:10px 0 0;
}
.payment-complete-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#eef8f1;
  font-weight:800;
}
@media(max-width:520px){
  .payment-facts{
    grid-template-columns:1fr;
  }
  .payment-next-due{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* CRINEO ADMIN PAYMENT CENTRE */
.admin-payment-center{
  margin:26px 0;
  padding:20px;
  border:1px solid #dfe4ec;
  border-radius:18px;
  background:#fff;
}
.admin-payment-center h3{
  margin:8px 0 10px;
}
.admin-payment-center>p{
  color:#5f697a;
}
.admin-payment-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.admin-payment-grid label{
  display:grid;
  gap:7px;
  font-weight:800;
}
.admin-payment-grid input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.admin-payment-total{
  display:grid;
  align-content:center;
  gap:4px;
  padding:14px;
  border-radius:14px;
  background:#071426;
  color:#fff;
}
.admin-payment-total small{
  color:rgba(255,255,255,.72);
}
.admin-payment-total strong{
  font-size:1.2rem;
}
.admin-payment-summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #e5e9ef;
}
.admin-payment-summary span{
  color:#677184;
}
.admin-payment-summary strong{
  color:#172033;
}
@media(max-width:650px){
  .admin-payment-grid{
    grid-template-columns:1fr;
  }
}


/* CRINEO ADMIN MOBILE FINAL COMPACT */
@media(max-width:700px){

  .admin-body{
    font-size:14px;
  }

  .admin-shell{
    display:block;
  }

  .admin-side{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px!important;
    padding:9px 10px!important;
    align-items:center!important;
  }

  .admin-side img{
    grid-column:1!important;
    width:46px!important;
    margin:0!important;
  }

  .admin-side h1{
    grid-column:2/-1!important;
    width:auto!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.2!important;
    align-self:center;
  }

  .admin-side button,
  .admin-side a{
    width:100%;
    min-width:0;
    min-height:34px!important;
    padding:5px 6px!important;
    border-radius:7px!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    text-align:center!important;
  }

  .admin-side .admin-message-nav{
    grid-column:auto!important;
    min-height:34px!important;
    padding:5px 6px!important;
    font-size:10.5px!important;
    justify-content:center!important;
    gap:5px!important;
    box-shadow:none!important;
  }

  .admin-message-unread-badge{
    min-width:18px!important;
    height:18px!important;
    padding:0 5px!important;
    font-size:9px!important;
  }

  .admin-side > a{
    grid-column:1/-1!important;
    width:max-content!important;
    justify-self:start;
    min-height:0!important;
    margin-top:2px!important;
    padding:5px 2px!important;
    text-align:left!important;
  }

  .admin-main{
    padding:12px!important;
  }

  .admin-top{
    align-items:flex-start!important;
    gap:10px!important;
    margin-bottom:12px!important;
  }

  .admin-top-actions{
    width:auto!important;
    margin-left:auto;
    justify-content:flex-end!important;
    gap:7px!important;
    flex-wrap:nowrap!important;
  }

  .admin-main .eyebrow{
    font-size:9px!important;
    letter-spacing:.13em!important;
  }

  #adminTitle{
    margin:3px 0 0!important;
    font-size:24px!important;
    line-height:1.05!important;
  }

  .notification-bell-btn{
    width:38px!important;
    height:38px!important;
    font-size:16px!important;
  }

  .notification-badge{
    min-width:18px!important;
    height:18px!important;
    padding:0 5px!important;
    font-size:9px!important;
  }

  #adminLogout{
    min-height:38px!important;
    padding:7px 11px!important;
    font-size:11px!important;
  }

  .admin-cards{
    gap:10px!important;
    margin-top:10px!important;
  }

  .admin-main .form-card{
    padding:15px!important;
    border-radius:15px!important;
  }

  #adminQuotes .form-card{
    padding:14px!important;
  }

  #adminQuotes .account-head{
    gap:9px!important;
    align-items:flex-start!important;
  }

  #adminQuotes h3{
    margin:5px 0 0!important;
    font-size:20px!important;
    line-height:1.15!important;
  }

  #adminQuotes h4{
    font-size:16px!important;
  }

  #adminQuotes p{
    margin:.55rem 0!important;
    font-size:13px!important;
    line-height:1.45!important;
  }

  #adminQuotes select{
    width:auto!important;
    max-width:110px!important;
    min-height:32px!important;
    padding:5px 7px!important;
    font-size:12px!important;
  }

  .admin-main input,
  .admin-main select,
  .admin-main textarea{
    font-size:14px!important;
  }

  .admin-main input,
  .admin-main textarea{
    padding:9px 10px!important;
  }

  .admin-main .btn,
  .admin-main .btn-ghost{
    min-height:38px;
    padding:8px 12px;
    font-size:12px;
  }

  .admin-quote-conversion{
    margin-top:10px!important;
    padding-top:10px!important;
  }

  .admin-shipment-grid{
    gap:9px!important;
  }

  .admin-order-tracking-control,
  .admin-payment-center,
  .admin-shipment-card,
  .admin-order-document-upload{
    padding:14px!important;
    border-radius:14px!important;
  }

  .table-wrap th,
  .table-wrap td{
    padding:10px 11px!important;
    font-size:12px!important;
  }
}


/* =========================================
   ADMIN SHIPPING — RESPONSIVE FINAL LAYOUT
========================================= */

#shippingView{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box
}

#shippingView *,
#shippingView *::before,
#shippingView *::after{
  box-sizing:border-box
}

#shippingView .admin-shipping-card{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0 0 22px;
  overflow:hidden
}

#shippingView .admin-shipping-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px
}

#shippingView .admin-shipping-section-head>div{
  min-width:0
}

#shippingView .admin-shipping-section-head h3{
  margin:6px 0 8px;
  font-size:24px;
  line-height:1.2;
  color:var(--ink)
}

#shippingView .admin-shipping-section-head p{
  max-width:760px;
  margin:0;
  color:#667085;
  line-height:1.55
}

#shippingView .admin-shipping-notice{
  display:grid;
  gap:5px;
  margin:0 0 22px;
  padding:15px 17px;
  border:1px solid #e3c66f;
  border-radius:14px;
  background:#fffaf0;
  color:#596275;
  line-height:1.5
}

#shippingView .admin-shipping-notice strong{
  color:#8a671f
}

#shippingView .admin-shipping-form{
  width:100%;
  min-width:0
}

#shippingView .admin-shipping-main-fields,
#shippingView .admin-internal-shipping-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

#shippingView .admin-shipping-field{
  display:grid;
  gap:7px;
  min-width:0;
  margin:0;
  font-weight:750;
  color:#172033
}

#shippingView .admin-shipping-field>span{
  display:block;
  min-width:0
}

#shippingView .admin-shipping-field input,
#shippingView .admin-shipping-field select,
#shippingView .admin-shipping-field textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:50px;
  margin:0;
  padding:12px 14px;
  border:1px solid #d8dce3;
  border-radius:12px;
  background:#fff;
  color:#172033;
  font:inherit;
  line-height:1.3
}

#shippingView .admin-shipping-field input:focus,
#shippingView .admin-destination-rate-card input:focus{
  outline:3px solid rgba(45,110,216,.14);
  border-color:#4b82d6
}

#shippingView .admin-destination-rate-section{
  width:100%;
  min-width:0;
  margin-top:24px;
  padding:20px;
  border:1px solid #e4e7ec;
  border-radius:18px;
  background:#f8fafc
}

#shippingView .admin-destination-rate-head{
  margin-bottom:16px
}

#shippingView .admin-destination-rate-head h4{
  margin:6px 0 5px;
  font-size:20px;
  color:#172033
}

#shippingView .admin-destination-rate-head p{
  margin:0;
  color:#667085;
  line-height:1.5
}

#shippingView .admin-destination-rate-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  width:100%;
  min-width:0
}

#shippingView .admin-destination-rate-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,160px);
  grid-template-areas:
    "name rate"
    "basis rate";
  column-gap:14px;
  row-gap:3px;
  align-items:center;
  width:100%;
  min-width:0;
  margin:0;
  padding:15px 16px;
  border:1px solid #dfe4eb;
  border-radius:15px;
  background:#fff
}

#shippingView .admin-destination-name{
  grid-area:name;
  min-width:0;
  font-size:16px;
  font-weight:850;
  line-height:1.3;
  color:#172033;
  overflow-wrap:anywhere
}

#shippingView .admin-destination-rate-label{
  grid-area:basis;
  min-width:0;
  color:#667085;
  font-size:12px;
  font-weight:650
}

#shippingView .admin-destination-rate-card input{
  grid-area:rate;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:48px;
  margin:0;
  padding:11px 12px;
  border:1px solid #d8dce3;
  border-radius:11px;
  background:#fff;
  color:#172033;
  font:inherit;
  font-size:17px;
  font-weight:750;
  text-align:right
}

#shippingView .admin-shipping-publish-row{
  width:100%;
  min-width:0;
  margin-top:18px
}

#shippingView .admin-shipping-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  max-width:100%;
  min-width:0;
  margin:0;
  color:#172033;
  font-weight:750
}

#shippingView .admin-shipping-checkbox input{
  flex:0 0 auto;
  width:22px!important;
  height:22px;
  margin:0
}

#shippingView .admin-shipping-checkbox span{
  min-width:0;
  overflow-wrap:anywhere
}

#shippingView .admin-shipping-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  width:100%;
  margin-top:20px
}

#shippingView .admin-shipping-actions .btn{
  min-height:48px;
  margin:0
}

#shippingView .admin-shipping-status{
  flex:1 1 260px;
  min-width:0;
  margin:0
}

#shippingView .admin-shipping-rules-list{
  width:100%;
  min-width:0;
  margin-top:4px
}

#shippingView .admin-shipping-table-wrap{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch
}

#shippingView .admin-shipping-table-wrap table{
  min-width:760px
}


@media(max-width:900px){

  #shippingView .admin-shipping-main-fields,
  #shippingView .admin-internal-shipping-grid{
    grid-template-columns:1fr
  }

  #shippingView .admin-destination-rate-grid{
    grid-template-columns:1fr
  }

  #shippingView .admin-shipping-card{
    padding:18px
  }

  #shippingView .admin-destination-rate-section{
    padding:16px
  }
}


@media(max-width:600px){

  #shippingView{
    overflow-x:hidden
  }

  #shippingView .admin-shipping-card{
    padding:16px;
    border-radius:16px
  }

  #shippingView .admin-shipping-section-head h3{
    font-size:21px
  }

  #shippingView .admin-shipping-section-head p,
  #shippingView .admin-shipping-notice,
  #shippingView .admin-destination-rate-head p{
    font-size:13px
  }

  #shippingView .admin-destination-rate-section{
    margin-top:20px;
    padding:14px;
    border-radius:15px
  }

  #shippingView .admin-destination-rate-card{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "name"
      "basis"
      "rate";
    gap:7px;
    padding:14px
  }

  #shippingView .admin-destination-rate-card input{
    width:100%;
    text-align:left;
    font-size:16px
  }

  #shippingView .admin-shipping-field input,
  #shippingView .admin-shipping-field select,
  #shippingView .admin-shipping-field textarea,
  #shippingView .admin-destination-rate-card input{
    min-height:50px
  }

  #shippingView .admin-shipping-checkbox{
    align-items:flex-start
  }

  #shippingView .admin-shipping-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px
  }

  #shippingView .admin-shipping-actions .btn{
    width:100%;
  }

  #shippingView .admin-shipping-status{
    width:100%
  }
}


@media(max-width:390px){

  #shippingView .admin-shipping-card{
    padding:13px
  }

  #shippingView .admin-destination-rate-section{
    padding:12px
  }

  #shippingView .admin-destination-rate-card{
    padding:12px
  }

  #shippingView .admin-shipping-field>span,
  #shippingView .admin-destination-name{
    font-size:14px
  }
}


/* =========================================
   ADMIN ORDER — AUTOMATIC SHIPPING RATE
========================================= */

.admin-shipping-application{
  margin-top:22px;
  padding:22px;
  border:1px solid #d9e1ed;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(5,15,34,.05);
  box-sizing:border-box;
  min-width:0
}

.admin-shipping-application h3{
  margin:6px 0 8px
}

.admin-shipping-application>p{
  margin:0 0 16px;
  color:#667085;
  line-height:1.55
}

.admin-shipping-application-note{
  display:grid;
  gap:5px;
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid #e4c66b;
  border-radius:14px;
  background:#fffaf0;
  color:#596275;
  line-height:1.5
}

.admin-shipping-application-note strong{
  color:#8a671f
}

.admin-auto-shipping-form{
  min-width:0
}

.admin-auto-shipping-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

.admin-auto-shipping-grid label{
  display:grid;
  gap:7px;
  min-width:0;
  font-weight:750;
  color:#172033
}

.admin-auto-shipping-grid input,
.admin-auto-shipping-grid select{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:48px;
  padding:11px 13px;
  border:1px solid #d8dce3;
  border-radius:12px;
  background:#fff;
  color:#172033;
  font:inherit;
  box-sizing:border-box
}

.admin-auto-shipping-grid input[readonly]{
  background:#f7f8fa;
  color:#475467
}

.admin-auto-shipping-result{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px
}

.admin-auto-shipping-result>div{
  padding:15px 16px;
  border:1px solid #e3e7ee;
  border-radius:14px;
  background:#f8fafc
}

.admin-auto-shipping-result small{
  display:block;
  margin-bottom:5px;
  color:#667085
}

.admin-auto-shipping-result strong{
  display:block;
  font-size:20px;
  color:#172033
}

.admin-auto-shipping-applied{
  display:grid;
  gap:5px;
  margin-top:14px;
  padding:14px 16px;
  border-radius:14px;
  background:#eef7ff;
  color:#344054;
  line-height:1.5
}

.admin-auto-shipping-applied strong{
  color:#1849a9
}


@media(max-width:700px){

  .admin-shipping-application{
    padding:16px
  }

  .admin-auto-shipping-grid,
  .admin-auto-shipping-result{
    grid-template-columns:1fr
  }

  .admin-auto-shipping-result strong{
    font-size:18px
  }
}


/* =========================================
   ADMIN ORDER — RECORD PAYMENT RECEIVED
========================================= */

.admin-record-payment{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid #e4e7ec
}

.admin-record-payment-head h4{
  margin:6px 0 7px;
  font-size:20px;
  color:#172033
}

.admin-record-payment-head p{
  margin:0 0 16px;
  color:#667085;
  line-height:1.5
}

.admin-record-payment-form{
  min-width:0
}

.admin-record-payment-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

.admin-record-payment-grid label{
  display:grid;
  gap:7px;
  min-width:0;
  margin:0;
  font-weight:750;
  color:#172033
}

.admin-record-payment-grid label.full{
  grid-column:1/-1
}

.admin-record-payment-grid input,
.admin-record-payment-grid select,
.admin-record-payment-grid textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  border:1px solid #d8dce3;
  border-radius:12px;
  background:#fff;
  color:#172033;
  font:inherit
}

.admin-record-payment-grid input,
.admin-record-payment-grid select{
  min-height:48px;
  padding:11px 13px
}

.admin-record-payment-grid textarea{
  min-height:86px;
  padding:12px 13px;
  resize:vertical
}

.admin-record-payment-grid input:focus,
.admin-record-payment-grid select:focus,
.admin-record-payment-grid textarea:focus{
  outline:3px solid rgba(45,110,216,.14);
  border-color:#4b82d6
}

.admin-record-payment-warning{
  display:grid;
  gap:4px;
  margin-top:14px;
  padding:13px 15px;
  border:1px solid #e4c66b;
  border-radius:13px;
  background:#fffaf0;
  color:#596275;
  line-height:1.5
}

.admin-record-payment-warning strong{
  color:#8a671f
}

.admin-payment-history{
  display:grid;
  gap:10px;
  margin-top:20px
}

.admin-payment-history>strong{
  color:#172033
}

.admin-payment-history-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:13px 14px;
  border:1px solid #e4e7ec;
  border-radius:13px;
  background:#f8fafc
}

.admin-payment-history-item>div{
  display:grid;
  gap:3px;
  min-width:0
}

.admin-payment-history-item>div:last-child{
  text-align:right
}

.admin-payment-history-item span,
.admin-payment-history-item small{
  color:#667085;
  overflow-wrap:anywhere
}


@media(max-width:700px){

  .admin-record-payment-grid{
    grid-template-columns:1fr
  }

  .admin-record-payment-grid label.full{
    grid-column:auto
  }

  .admin-payment-history-item{
    display:grid;
    grid-template-columns:1fr;
    gap:8px
  }

  .admin-payment-history-item>div:last-child{
    text-align:left
  }
}


/* =========================================
   ADMIN — CUSTOMER RECORDS
========================================= */

#customersView{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box
}

#customersView *,
#customersView *::before,
#customersView *::after{
  box-sizing:border-box
}

.admin-customer-directory-head{
  margin-bottom:20px
}

.admin-customer-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px
}

.admin-customer-stat{
  display:grid;
  gap:5px;
  min-width:0;
  padding:14px 16px;
  border:1px solid #e3e7ee;
  border-radius:14px;
  background:#f8fafc
}

.admin-customer-stat small{
  color:#667085
}

.admin-customer-stat strong{
  color:#172033;
  font-size:20px;
  overflow-wrap:anywhere
}

.admin-customer-toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(180px,.42fr) minmax(180px,.42fr);
  gap:12px;
  margin-top:18px
}

.admin-customer-toolbar input,
.admin-customer-toolbar select{
  width:100%;
  min-width:0;
  min-height:48px;
  padding:11px 13px;
  border:1px solid #d8dce3;
  border-radius:12px;
  background:#fff;
  color:#172033;
  font:inherit
}

.admin-customer-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  width:100%;
  min-width:0
}

.admin-customer-card{
  display:grid;
  gap:16px;
  min-width:0;
  padding:18px;
  border:1px solid #dfe4eb;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(5,15,34,.05)
}

.admin-customer-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0
}

.admin-customer-card-head>div{
  min-width:0
}

.admin-customer-card-head h4{
  margin:5px 0 4px;
  color:#172033;
  font-size:20px;
  overflow-wrap:anywhere
}

.admin-customer-card-head p{
  margin:0;
  color:#667085;
  overflow-wrap:anywhere
}

.admin-customer-account-type{
  display:inline-block;
  max-width:100%;
  color:#8a671f;
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  overflow-wrap:anywhere
}

.admin-customer-activity-pill{
  flex:0 0 auto;
  max-width:190px;
  padding:7px 10px;
  border-radius:999px;
  background:#eef4ff;
  color:#2459b8;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  text-align:center
}

.admin-customer-contact-grid,
.admin-customer-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}

.admin-customer-contact-grid>div,
.admin-customer-metrics>div{
  min-width:0;
  padding:11px 12px;
  border-radius:12px;
  background:#f8fafc
}

.admin-customer-contact-grid small,
.admin-customer-metrics small{
  display:block;
  margin-bottom:4px;
  color:#667085
}

.admin-customer-contact-grid strong,
.admin-customer-metrics strong{
  display:block;
  color:#172033;
  overflow-wrap:anywhere
}

.admin-customer-card-actions{
  display:flex;
  justify-content:flex-end
}

.admin-customer-card-actions .btn{
  margin:0
}

.admin-customer-details{
  margin-top:22px;
  min-width:0
}

.admin-customer-record-head p{
  margin:5px 0 0;
  color:#667085;
  overflow-wrap:anywhere
}

.admin-customer-profile-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px
}

.admin-customer-profile-grid>div{
  min-width:0;
  padding:13px 14px;
  border:1px solid #e4e7ec;
  border-radius:13px;
  background:#fff
}

.admin-customer-profile-grid small,
.admin-customer-record-summary small{
  display:block;
  margin-bottom:5px;
  color:#667085
}

.admin-customer-profile-grid strong,
.admin-customer-record-summary strong{
  display:block;
  color:#172033;
  overflow-wrap:anywhere
}

.admin-customer-record-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
  padding:16px;
  border-radius:16px;
  background:#f8fafc
}

.admin-customer-record-summary>div{
  min-width:0;
  padding:12px;
  border-radius:12px;
  background:#fff
}

.admin-customer-record-section{
  margin-top:16px;
  border:1px solid #e4e7ec;
  border-radius:14px;
  background:#fff;
  overflow:hidden
}

.admin-customer-record-section>summary{
  padding:14px 16px;
  cursor:pointer;
  font-weight:850;
  color:#172033;
  background:#f8fafc
}

.admin-customer-record-section[open]>summary{
  border-bottom:1px solid #e4e7ec
}

.admin-customer-record-table{
  margin:0;
  border:0;
  border-radius:0
}

.admin-customer-record-table table{
  min-width:780px
}

.admin-customer-record-table th,
.admin-customer-record-table td{
  vertical-align:top
}


@media(max-width:900px){

  .admin-customer-list{
    grid-template-columns:1fr
  }

  .admin-customer-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .admin-customer-toolbar{
    grid-template-columns:1fr
  }

  .admin-customer-record-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}


@media(max-width:600px){

  .admin-customer-directory-head,
  .admin-customer-details{
    padding:16px
  }

  .admin-customer-stats,
  .admin-customer-profile-grid,
  .admin-customer-record-summary{
    grid-template-columns:1fr
  }

  .admin-customer-card{
    padding:15px
  }

  .admin-customer-card-head{
    display:grid;
    grid-template-columns:1fr
  }

  .admin-customer-activity-pill{
    justify-self:start;
    max-width:100%
  }

  .admin-customer-contact-grid,
  .admin-customer-metrics{
    grid-template-columns:1fr
  }

  .admin-customer-card-actions{
    display:grid;
    grid-template-columns:1fr
  }

  .admin-customer-card-actions .btn{
    width:100%
  }

  .admin-customer-stat strong{
    font-size:18px
  }
}


/* =========================================
   ADMIN — CUSTOMER 360 PROFILE
========================================= */

.admin-customer-360-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px
}

.admin-customer-360-actions .btn,
.admin-customer-360-actions .btn-ghost{
  margin:0
}

.admin-customer-timeline{
  display:grid;
  gap:0;
  padding:16px
}

.admin-customer-timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:12px;
  min-width:0;
  padding:0 0 18px
}

.admin-customer-timeline-item:last-child{
  padding-bottom:0
}

.admin-customer-timeline-item::before{
  content:'';
  position:absolute;
  left:8px;
  top:12px;
  bottom:-2px;
  width:2px;
  background:#e4e7ec
}

.admin-customer-timeline-item:last-child::before{
  display:none
}

.admin-customer-timeline-dot{
  position:relative;
  z-index:1;
  width:18px;
  height:18px;
  margin-top:2px;
  border:4px solid #fff;
  border-radius:999px;
  background:#d7ae54;
  box-shadow:0 0 0 1px #d7ae54
}

.admin-customer-timeline-item>div:last-child{
  display:grid;
  gap:4px;
  min-width:0
}

.admin-customer-timeline-type{
  color:#8a671f;
  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase
}

.admin-customer-timeline-item strong{
  color:#172033;
  overflow-wrap:anywhere
}

.admin-customer-timeline-item p{
  margin:0;
  color:#667085;
  line-height:1.45;
  overflow-wrap:anywhere
}

.admin-customer-timeline-item small{
  color:#98a2b3
}

.admin-customer-section-action{
  display:flex;
  justify-content:flex-end;
  padding:12px 14px 0
}

.admin-customer-section-action .btn-ghost{
  margin:0
}


@media(max-width:600px){

  .admin-customer-360-actions{
    display:grid;
    grid-template-columns:1fr
  }

  .admin-customer-360-actions .btn,
  .admin-customer-360-actions .btn-ghost{
    width:100%
  }

  .admin-customer-section-action{
    display:grid;
    grid-template-columns:1fr
  }

  .admin-customer-section-action .btn-ghost{
    width:100%
  }
}

/* GENERIC QUANTITY PRICING */
.product-pricing{
  margin:22px 0;
}

.product-pricing-head{
  margin-bottom:12px;
}

.product-pricing-head h3{
  margin:4px 0 6px;
}

.product-pricing-head p{
  margin:0;
  color:#667085;
  font-size:13px;
}

.price-tier-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
}

.price-tier-card{
  display:grid;
  gap:6px;
  padding:14px;
  border:1px solid #e4e7ec;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(5,15,34,.05);
}

.price-tier-card small{
  font-weight:800;
  color:#667085;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.price-tier-card strong{
  font-size:22px;
  line-height:1.1;
  color:#172033;
}

.price-tier-card span{
  font-size:13px;
  color:#667085;
}

.product-live-price{
  margin:14px 0 8px;
  font-size:26px;
  font-weight:900;
  color:#172033;
}

.product-quantity-box{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0 18px;
  padding:14px;
  border:1px solid #e4e7ec;
  border-radius:14px;
  background:#f8fafc;
}

.product-quantity-box label{
  display:grid;
  gap:6px;
  font-weight:800;
}

.product-quantity-box input{
  width:130px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  font:inherit;
  box-sizing:border-box;
}

.product-quantity-box small,
.tiered-price-note{
  color:#667085;
  font-size:12px;
}

.cart-qty input{
  width:72px;
  min-height:36px;
  padding:6px 8px;
  text-align:center;
  border:1px solid #d0d5dd;
  border-radius:8px;
  font:inherit;
  box-sizing:border-box;
}

@media (max-width:640px){
  .price-tier-grid{
    grid-template-columns:1fr;
  }

  .product-live-price{
    font-size:22px;
  }
}


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


.product-variants{
  display:grid;
  gap:14px;
  margin:20px 0;
  padding:18px;
  border:1px solid #e2e6ec;
  border-radius:16px;
  background:#fffaf0
}

.product-variants-head h3{
  margin:5px 0 4px
}

.product-variants-head p{
  margin:0;
  color:#667085;
  font-size:13px
}

.product-variant-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px
}

.product-variant-field{
  display:grid;
  gap:6px;
  min-width:0;
  font-weight:800
}

.product-variant-field select{
  width:100%;
  min-width:0;
  min-height:46px;
  padding:10px 12px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  background:#fff;
  font:inherit
}

.cart-variant-label,
.checkout-variant-label{
  display:block;
  margin:5px 0;
  color:#667085;
  font-size:12px;
  line-height:1.45
}

@media(max-width:640px){
  .product-variant-grid{
    grid-template-columns:1fr
  }
}


.variant-availability{
  margin:2px 0 0;
  padding:10px 12px;
  border-radius:10px;
  background:#eef8f0;
  color:#176b32;
  font-size:13px;
  font-weight:800;
  line-height:1.4
}

.variant-availability.unavailable{
  background:#fff0ee;
  color:#b42318
}


/* SHOE HEEL HEIGHT / LENGTH PREFERENCE */

.product-heel-preference{
  display:grid;
  gap:7px;
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid #eadfbe;
  border-radius:14px;
  background:#fffaf0
}

.product-heel-preference label{
  display:grid;
  gap:7px;
  color:#172033;
  font-weight:800
}

.product-heel-preference input{
  width:100%;
  min-width:0;
  min-height:48px;
  box-sizing:border-box;
  padding:11px 13px;
  border:1px solid #d0d5dd;
  border-radius:11px;
  background:#fff;
  color:#172033;
  font:inherit
}

.product-heel-preference small{
  color:#667085;
  line-height:1.45
}



.cart-mix-label{
  display:inline-flex;
  width:fit-content;
  margin:0 0 5px;
  padding:4px 8px;
  border-radius:999px;
  background:#eef4ff;
  color:#315b9a;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
}

/* MULTI-PAIR COLOUR / SIZE MIX */

.product-mix-prompt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid #d9e3f4;
  border-radius:14px;
  background:#f5f9ff
}

.product-mix-prompt[hidden],
.product-mix-order[hidden]{
  display:none!important
}

.product-mix-prompt>div{
  display:grid;
  gap:3px
}

.product-mix-prompt strong{
  color:#172033
}

.product-mix-prompt small{
  color:#667085;
  line-height:1.45
}

.product-mix-prompt .btn-ghost{
  flex:0 0 auto;
  margin:0
}

.product-mix-order{
  display:grid;
  gap:14px;
  margin:0 0 20px;
  padding:18px;
  border:1px solid #d8e1ef;
  border-radius:16px;
  background:#f8fbff
}

.product-mix-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px
}

.product-mix-head h3{
  margin:5px 0 4px
}

.product-mix-head p{
  margin:0;
  color:#667085;
  font-size:13px;
  line-height:1.5
}

#productMixSummary{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  background:#fff4d6;
  color:#7a5a15;
  font-size:12px;
  white-space:nowrap
}

#productMixSummary.complete{
  background:#eaf7ee;
  color:#176b32
}

#productMixSummary.over{
  background:#fff0ee;
  color:#b42318
}

.product-mix-rows{
  display:grid;
  gap:12px
}

.product-mix-row{
  position:relative;
  display:grid;
  gap:10px;
  padding:14px 46px 14px 14px;
  border:1px solid #dfe5ee;
  border-radius:14px;
  background:#fff
}

.product-mix-row-number{
  color:#475467;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em
}

.product-mix-fields{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:10px
}

.product-mix-fields label{
  display:grid;
  gap:6px;
  min-width:0;
  color:#172033;
  font-size:12px;
  font-weight:800
}

.product-mix-fields select,
.product-mix-fields input{
  width:100%;
  min-width:0;
  min-height:44px;
  box-sizing:border-box;
  padding:9px 10px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  background:#fff;
  color:#172033;
  font:inherit
}

.product-mix-remove{
  position:absolute;
  top:12px;
  right:12px;
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  background:#f2f4f7;
  color:#667085;
  font-size:20px;
  line-height:1;
  cursor:pointer
}

.product-mix-add{
  width:fit-content;
  margin:0
}

@media(max-width:640px){
  .product-mix-prompt,
  .product-mix-head{
    display:grid;
    grid-template-columns:1fr
  }

  .product-mix-prompt .btn-ghost,
  .product-mix-add{
    width:100%
  }

  #productMixSummary{
    width:fit-content
  }

  .product-mix-fields{
    grid-template-columns:1fr
  }

  .product-mix-order{
    padding:14px
  }
}


/* CUSTOMER ORDER LIST */

.customer-order-list{
  margin:18px 0;
  padding:16px;
  border:1px solid #dfe5ee;
  border-radius:16px;
  background:#fff
}

.customer-order-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px
}

.customer-order-list-head h4{
  margin:4px 0 0
}

.customer-order-lines{
  display:grid;
  gap:9px
}

.customer-order-line{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px;
  border:1px solid #edf0f4;
  border-radius:12px;
  background:#fafbfc
}

.customer-order-line>div{
  display:grid;
  gap:4px
}

.customer-order-line>div:last-child{
  text-align:right;
  justify-items:end
}

.customer-order-line small,
.customer-order-line span{
  color:#667085;
  font-size:12px;
  line-height:1.4
}

@media(max-width:640px){
  .customer-order-list-head,
  .customer-order-line{
    display:grid;
    grid-template-columns:1fr
  }

  .customer-order-line>div:last-child{
    text-align:left;
    justify-items:start
  }
}


/* 12-HOUR ORDER LIST SEAL */

.order-seal-badge{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-top:7px;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1.2
}

.order-seal-badge.active{
  background:#fff4d6;
  color:#7a5a15
}

.order-seal-badge.sealed{
  background:#eef1f5;
  color:#344054
}

.order-seal-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
  margin:16px 0;
  padding:16px;
  border-radius:16px
}

.order-seal-card.active{
  border:1px solid #ead8a1;
  background:#fffaf0
}

.order-seal-card.sealed{
  border:2px solid #344054;
  background:#f7f8fa
}

.order-seal-stamp{
  display:grid;
  place-items:center;
  min-width:72px;
  min-height:54px;
  padding:8px 10px;
  border:2px solid currentColor;
  border-radius:8px;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.08em;
  text-align:center;
  transform:rotate(-3deg)
}

.order-seal-card.active .order-seal-stamp{
  color:#9a6c12
}

.order-seal-card.sealed .order-seal-stamp{
  color:#344054
}

.order-seal-card strong{
  color:#172033
}

.order-seal-card p{
  margin:4px 0 6px;
  color:#667085;
  line-height:1.5
}

.order-seal-card small{
  color:#475467;
  font-weight:800
}

@media(max-width:640px){
  .order-seal-card{
    grid-template-columns:1fr
  }

  .order-seal-stamp{
    width:fit-content
  }
}


/* PRODUCT REVIEWS & RATINGS */

.product-review-badge{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:8px 0 14px;
  color:#667085;
  font-size:14px
}

.review-stars{
  color:#b88716;
  letter-spacing:.04em
}

.product-reviews-shell{
  margin-top:30px
}

.product-reviews-layout{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:18px;
  align-items:start
}

.product-review-overview h2{
  margin:6px 0 18px
}

.review-summary{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:22px;
  align-items:center
}

.review-summary-score{
  display:grid;
  gap:6px;
  align-content:start
}

.review-summary-score>strong{
  font-size:46px;
  line-height:1;
  color:#172033
}

.review-summary-score .review-stars{
  font-size:22px
}

.review-summary-score small{
  color:#667085
}

.review-breakdown{
  display:grid;
  gap:7px
}

.review-breakdown-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 30px;
  gap:9px;
  align-items:center;
  font-size:12px;
  color:#667085
}

.review-breakdown-track{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#eef1f5
}

.review-breakdown-track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:#d7ae54
}

.product-review-form{
  display:grid;
  gap:14px
}

.review-form-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}

.review-form-head h3{
  margin:5px 0 0
}

.product-review-form label{
  display:grid;
  gap:7px;
  font-weight:800
}

.product-review-form input,
.product-review-form select,
.product-review-form textarea{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  border:1px solid #d8dce3;
  border-radius:12px;
  background:#fff;
  color:#172033;
  font:inherit
}

.product-review-form input,
.product-review-form select{
  min-height:48px;
  padding:11px 13px
}

.product-review-form textarea{
  min-height:120px;
  padding:12px 13px;
  resize:vertical
}

.product-review-form label>small,
.review-moderation-note{
  color:#667085;
  font-weight:500;
  line-height:1.45
}

.verified-purchase-badge{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  padding:6px 9px;
  border-radius:999px;
  background:#eef8f0;
  color:#176b32;
  font-size:11px;
  font-weight:850;
  line-height:1.25
}

.review-unverified-badge{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  padding:6px 9px;
  border-radius:999px;
  background:#f2f4f7;
  color:#667085;
  font-size:11px;
  font-weight:800
}

.review-submission-status{
  padding:11px 13px;
  border-radius:12px;
  background:#fff8e8;
  color:#7a5a15;
  line-height:1.45
}

.review-submission-status.approved{
  background:#eef8f0;
  color:#176b32
}

.review-submission-status.rejected{
  background:#fff0ee;
  color:#b42318
}

.review-signin-card{
  display:grid;
  gap:10px
}

.review-signin-card h3,
.review-signin-card p{
  margin:0
}

.review-signin-card p{
  color:#667085
}

.product-review-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px
}

.product-review-card{
  min-width:0;
  padding:18px;
  border:1px solid #e4e7ec;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(5,15,34,.05)
}

.product-review-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}

.product-review-card-head>div{
  display:grid;
  gap:5px;
  min-width:0
}

.product-review-card-head>small{
  flex:0 0 auto;
  color:#98a2b3
}

.product-review-card h4{
  margin:14px 0 7px
}

.product-review-card p{
  margin:10px 0 0;
  color:#475467;
  line-height:1.6;
  overflow-wrap:anywhere
}

.product-review-card .verified-purchase-badge{
  margin-top:10px
}

.review-media-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px
}

.review-media-grid a,
.review-media-grid img{
  display:block;
  width:100%
}

.review-media-grid img{
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e4e7ec
}

.review-existing-media{
  display:grid;
  gap:7px
}

.review-existing-media>small{
  color:#667085
}


/* ADMIN PRODUCT REVIEWS */

.admin-review-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-top:16px
}

.admin-review-stats>div{
  min-width:0;
  padding:13px 14px;
  border:1px solid #e4e7ec;
  border-radius:13px;
  background:#f8fafc
}

.admin-review-stats small{
  display:block;
  margin-bottom:5px;
  color:#667085
}

.admin-review-stats strong{
  display:block;
  color:#172033;
  font-size:20px;
  overflow-wrap:anywhere
}

.admin-review-toolbar{
  display:grid;
  grid-template-columns:minmax(180px,.35fr) minmax(240px,1fr);
  gap:12px;
  margin-top:16px
}

.admin-review-toolbar select,
.admin-review-toolbar input{
  width:100%;
  min-width:0;
  min-height:48px;
  padding:11px 13px;
  border:1px solid #d8dce3;
  border-radius:12px;
  background:#fff;
  font:inherit
}

.admin-reviews-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px
}

.admin-review-card{
  min-width:0;
  padding:18px;
  border:1px solid #dfe4eb;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(5,15,34,.05)
}

.admin-review-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px
}

.admin-review-card-head>div:first-child{
  min-width:0
}

.admin-review-card-head h4{
  margin:7px 0 4px;
  font-size:20px;
  color:#172033;
  overflow-wrap:anywhere
}

.admin-review-card-head p{
  margin:0;
  color:#667085;
  overflow-wrap:anywhere
}

.admin-review-rating{
  flex:0 0 auto;
  display:grid;
  gap:3px;
  text-align:right
}

.admin-review-rating strong{
  color:#b88716;
  letter-spacing:.04em
}

.admin-review-rating span{
  color:#667085;
  font-size:12px
}

.admin-review-status{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:#fff8e8;
  color:#8a671f;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em
}

.admin-review-status.approved{
  background:#eef8f0;
  color:#176b32
}

.admin-review-status.rejected{
  background:#fff0ee;
  color:#b42318
}

.admin-review-meta{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:12px
}

.admin-review-meta>span:last-child{
  color:#98a2b3;
  font-size:12px
}

.admin-review-card h5{
  margin:15px 0 7px;
  font-size:16px
}

.admin-review-body{
  margin:8px 0;
  color:#475467;
  line-height:1.55;
  overflow-wrap:anywhere
}

.admin-review-media{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px
}

.admin-review-media img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e4e7ec
}

.admin-review-note-label{
  display:grid;
  gap:7px;
  margin-top:15px;
  font-weight:800
}

.admin-review-note-label input{
  width:100%;
  min-width:0;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #d8dce3;
  border-radius:10px;
  font:inherit;
  box-sizing:border-box
}

.admin-review-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px
}

.admin-review-actions .btn,
.admin-review-actions .btn-ghost{
  margin:0
}

.text-button.danger{
  color:#b42318
}


@media(max-width:900px){
  .product-reviews-layout,
  .admin-reviews-list{
    grid-template-columns:1fr
  }

  .admin-review-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}


@media(max-width:600px){
  .review-summary{
    grid-template-columns:1fr;
    gap:16px
  }

  .review-summary-score>strong{
    font-size:40px
  }

  .review-form-head,
  .product-review-card-head,
  .admin-review-card-head{
    display:grid;
    grid-template-columns:1fr
  }

  .product-review-list{
    grid-template-columns:1fr
  }

  .review-media-grid,
  .admin-review-media{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .admin-review-stats,
  .admin-review-toolbar{
    grid-template-columns:1fr
  }

  .admin-review-rating{
    text-align:left
  }

  .admin-review-actions{
    display:grid;
    grid-template-columns:1fr
  }

  .admin-review-actions .btn,
  .admin-review-actions .btn-ghost,
  .admin-review-actions .text-button{
    width:100%
  }
}


/* CUSTOMER WISHLIST */

.nav .wishlist-link{
  display:inline-flex;
  align-items:center;
  gap:6px
}

.nav [data-wishlist-count]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#d7ae54;
  color:#111827;
  font-size:11px;
  font-weight:900;
  line-height:1
}

.nav [data-wishlist-count][hidden]{
  display:none!important
}

.product-image{
  position:relative
}

.wishlist-toggle{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(17,24,39,.1);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#172033;
  font-size:25px;
  line-height:1;
  box-shadow:0 7px 20px rgba(5,15,34,.12);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent
}

.wishlist-toggle.saved{
  background:#172033;
  color:#f2cf78
}

.product-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px
}

.product-title-row h1{
  margin-right:auto
}

.wishlist-product-button{
  flex:0 0 auto;
  min-height:44px;
  padding:10px 15px;
  border:1px solid #d7ae54;
  border-radius:999px;
  background:#fff;
  color:#172033;
  font:inherit;
  font-weight:850;
  cursor:pointer
}

.wishlist-product-button.saved{
  background:#172033;
  color:#f2cf78;
  border-color:#172033
}

.account-wishlist-section{
  margin:34px 0;
  padding-top:28px;
  border-top:1px solid #e2e8f0
}

.account-wishlist-list{
  display:grid;
  gap:14px;
  margin-top:16px
}

.wishlist-account-card{
  display:grid;
  grid-template-columns:126px minmax(0,1fr);
  gap:16px;
  padding:14px;
  border:1px solid #e1e5ec;
  border-radius:16px;
  background:#fff
}

.wishlist-account-card.unavailable{
  background:#fafafa
}

.wishlist-account-image{
  display:block;
  min-height:126px;
  border-radius:12px;
  overflow:hidden;
  background:#f5f6f8
}

.wishlist-account-image img{
  width:100%;
  height:100%;
  min-height:126px;
  object-fit:cover;
  display:block
}

.wishlist-product-placeholder{
  min-height:126px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  color:#98a2b3
}

.wishlist-account-info{
  display:grid;
  gap:10px;
  min-width:0
}

.wishlist-account-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px
}

.wishlist-account-title-row small{
  color:#667085;
  font-weight:700
}

.wishlist-account-title-row h4{
  margin:4px 0 0;
  font-size:18px;
  line-height:1.25
}

.wishlist-account-title-row h4 a{
  color:inherit;
  text-decoration:none
}

.wishlist-remove-button{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:1px solid #e1e5ec;
  border-radius:999px;
  background:#fff;
  color:#667085;
  font-size:18px;
  cursor:pointer
}

.wishlist-variant-label{
  margin:0;
  color:#667085;
  font-size:13px;
  line-height:1.45
}

.wishlist-account-status{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}

.wishlist-current-price{
  color:#172033;
  font-size:18px
}

.wishlist-account-status>span{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:850
}

.wishlist-account-status>span.available{
  background:#eef8f0;
  color:#176b32
}

.wishlist-account-status>span.unavailable{
  background:#fff0ee;
  color:#b42318
}

.wishlist-account-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap
}

.wishlist-account-actions .btn,
.wishlist-account-actions .btn-ghost{
  margin:0
}

.wishlist-empty{
  padding:22px;
  border:1px dashed #d0d5dd;
  border-radius:14px;
  text-align:center;
  background:#f8fafc
}

.wishlist-empty p{
  color:#667085
}

@media(max-width:640px){
  .product-title-row{
    display:grid;
    grid-template-columns:1fr
  }

  .wishlist-product-button{
    width:100%
  }

  .wishlist-account-card{
    grid-template-columns:92px minmax(0,1fr);
    gap:12px;
    padding:12px
  }

  .wishlist-account-image,
  .wishlist-account-image img,
  .wishlist-product-placeholder{
    min-height:92px
  }

  .wishlist-account-title-row h4{
    font-size:16px
  }

  .wishlist-account-actions{
    display:grid;
    grid-template-columns:1fr
  }

  .wishlist-account-actions .btn,
  .wishlist-account-actions .btn-ghost{
    width:100%
  }
}


/* PRODUCT COMPARISON */

.nav .compare-link{
  display:inline-flex;
  align-items:center;
  gap:6px
}

.nav [data-compare-count]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#d7ae54;
  color:#111827;
  font-size:11px;
  font-weight:900;
  line-height:1
}

.nav [data-compare-count][hidden]{
  display:none!important
}

.compare-toggle.selected,
.compare-product-button.selected{
  background:#172033;
  color:#f2cf78;
  border-color:#172033
}

.product-title-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end
}

.compare-product-button{
  flex:0 0 auto;
  min-height:44px;
  padding:10px 15px;
  border:1px solid #d8dce3;
  border-radius:999px;
  background:#fff;
  color:#172033;
  font:inherit;
  font-weight:850;
  cursor:pointer
}

.compare-tray{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:120;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  pointer-events:none
}

.compare-tray-inner{
  width:min(1120px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr) auto;
  gap:14px;
  align-items:center;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(9,15,28,.96);
  color:#fff;
  box-shadow:0 18px 50px rgba(5,15,34,.28);
  backdrop-filter:blur(16px);
  pointer-events:auto
}

.compare-tray-copy{
  display:grid;
  gap:3px
}

.compare-tray-copy strong{
  font-size:15px
}

.compare-tray-copy span{
  color:#c7cedb;
  font-size:11px
}

.compare-tray-products{
  display:flex;
  gap:7px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:thin
}

.compare-tray-chip{
  flex:0 0 auto;
  max-width:220px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.compare-tray-chip button{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:16px;
  line-height:1;
  cursor:pointer
}

.compare-tray-actions{
  display:flex;
  gap:8px;
  align-items:center
}

.compare-tray-actions .btn,
.compare-tray-actions .btn-ghost{
  margin:0;
  white-space:nowrap
}

.compare-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px
}

.compare-page-head h2{
  margin:6px 0 8px
}

.compare-page-head p{
  max-width:760px;
  margin:0;
  color:#667085;
  line-height:1.6
}

.compare-page-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end
}

.compare-page-actions .btn,
.compare-page-actions .btn-ghost{
  margin:0
}

.compare-table{
  --compare-columns:2;
  min-width:0;
  overflow-x:auto;
  border:1px solid #dfe4eb;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 34px rgba(5,15,34,.06)
}

.compare-head-grid,
.compare-row{
  display:grid;
  grid-template-columns:180px repeat(var(--compare-columns),minmax(230px,1fr));
  min-width:calc(180px + (var(--compare-columns) * 230px))
}

.compare-head-grid{
  position:sticky;
  top:0;
  z-index:4;
  align-items:stretch;
  border-bottom:1px solid #dfe4eb;
  background:#fff
}

.compare-head-grid>.compare-row-label{
  display:flex;
  align-items:flex-end;
  padding:18px;
  background:#f8fafc
}

.compare-product-head{
  position:relative;
  display:grid;
  gap:9px;
  align-content:start;
  padding:18px;
  border-left:1px solid #eef1f5;
  background:#fff
}

.compare-remove{
  position:absolute;
  top:9px;
  right:9px;
  z-index:2;
  width:32px;
  height:32px;
  border:1px solid #e1e5ec;
  border-radius:999px;
  background:#fff;
  color:#667085;
  font-size:18px;
  cursor:pointer
}

.compare-product-image{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:13px;
  background:#f5f6f8
}

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

.compare-product-placeholder{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#98a2b3;
  font-size:13px
}

.compare-product-head small{
  color:#667085;
  font-weight:700
}

.compare-product-head h3{
  margin:0;
  font-size:17px;
  line-height:1.3
}

.compare-product-head .btn-ghost{
  width:100%;
  margin:3px 0 0
}

.compare-body{
  display:grid
}

.compare-row{
  border-bottom:1px solid #eef1f5
}

.compare-row:last-child{
  border-bottom:0
}

.compare-row-label{
  padding:15px 18px;
  background:#f8fafc;
  color:#475467;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em
}

.compare-row-value{
  min-width:0;
  padding:15px 18px;
  border-left:1px solid #eef1f5;
  color:#172033;
  font-size:13px;
  line-height:1.55;
  overflow-wrap:anywhere
}

.compare-empty{
  padding:42px 24px;
  text-align:center
}

.compare-empty h2{
  margin:0 0 8px
}

.compare-empty p{
  max-width:520px;
  margin:0 auto 18px;
  color:#667085;
  line-height:1.6
}

@media(max-width:820px){
  .compare-page-head{
    display:grid;
    grid-template-columns:1fr;
    align-items:start
  }

  .compare-page-actions{
    justify-content:flex-start
  }

  .compare-tray-inner{
    grid-template-columns:1fr;
    gap:10px
  }

  .compare-tray-products{
    order:2
  }

  .compare-tray-actions{
    order:3;
    display:grid;
    grid-template-columns:1fr 1fr
  }

  .compare-tray-actions .btn,
  .compare-tray-actions .btn-ghost{
    width:100%
  }
}

@media(max-width:640px){
  .product-title-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%
  }

  .compare-product-button,
  .wishlist-product-button{
    width:100%
  }

  .compare-page-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%
  }

  .compare-page-actions .btn,
  .compare-page-actions .btn-ghost{
    width:100%
  }

  .compare-head-grid,
  .compare-row{
    grid-template-columns:130px repeat(var(--compare-columns),minmax(200px,1fr));
    min-width:calc(130px + (var(--compare-columns) * 200px))
  }

  .compare-row-label,
  .compare-row-value,
  .compare-product-head{
    padding:13px
  }

  .compare-tray{
    padding-left:8px;
    padding-right:8px
  }

  .compare-tray-inner{
    border-radius:15px
  }
}


/* RECENTLY VIEWED PRODUCTS */

.recent-products-section{
  margin-top:34px;
  padding-top:28px;
  border-top:1px solid #e2e8f0
}

.recent-products-section[hidden]{
  display:none!important
}

.recent-products-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px
}

.recent-products-head h2,
.recent-products-head h3{
  margin:6px 0 6px
}

.recent-products-head p{
  margin:0;
  max-width:680px;
  color:#667085;
  line-height:1.55
}

.recent-products-head .btn-ghost{
  flex:0 0 auto;
  margin:0
}

.recent-products-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px
}

.recent-product-card{
  min-width:0;
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border:1px solid #e1e5ec;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(5,15,34,.05)
}

.recent-product-image{
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f5f6f8
}

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

.recent-product-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px
}

.recent-product-info{
  min-width:0;
  display:grid;
  gap:9px;
  align-content:start;
  padding:14px
}

.recent-product-meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  color:#667085;
  font-size:11px
}

.recent-product-meta span{
  min-width:0;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.recent-product-meta small{
  flex:0 0 auto;
  color:#98a2b3
}

.recent-product-info h4{
  margin:0;
  font-size:16px;
  line-height:1.3
}

.recent-product-info h4 a{
  color:#172033;
  text-decoration:none
}

.recent-product-price{
  color:#172033;
  font-size:15px
}

.recent-product-info .btn-ghost{
  width:100%;
  margin:2px 0 0
}

.recent-products-loading{
  grid-column:1/-1;
  margin:0;
  padding:18px;
  color:#667085;
  text-align:center
}

.account-recent-products{
  margin-bottom:34px
}

@media(max-width:960px){
  .recent-products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:640px){
  .recent-products-head{
    display:grid;
    grid-template-columns:1fr
  }

  .recent-products-head .btn-ghost{
    width:100%
  }

  .recent-products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }

  .recent-product-info{
    padding:11px
  }

  .recent-product-meta{
    display:grid;
    grid-template-columns:1fr
  }

  .recent-product-meta small{
    display:none
  }

  .recent-product-info h4{
    font-size:14px
  }

  .recent-product-price{
    font-size:14px
  }
}


/* PRODUCT DETAIL MOBILE IMAGE COMPACT */

.product-gallery .product-visual{
  overflow:hidden
}

.product-gallery .product-visual img{
  display:block;
  max-width:100%;
  object-position:center
}

@media(max-width:640px){
  .product-detail{
    gap:22px
  }

  .product-gallery{
    width:100%
  }

  .product-gallery .product-visual{
    min-height:0;
    height:auto;
    max-height:none;
    aspect-ratio:4/3;
    padding:10px;
    border-radius:18px;
    background:#fff
  }

  .product-gallery .product-visual img{
    width:100%;
    height:100%;
    max-height:320px;
    object-fit:contain;
    border-radius:12px
  }

  .product-info h1{
    font-size:clamp(32px,10vw,42px);
    line-height:1.04;
    margin:8px 0 14px
  }

  .product-title-row{
    gap:10px
  }

  .product-title-actions{
    gap:8px
  }

  .product-info .summary{
    font-size:16px;
    line-height:1.55
  }
}

@media(max-width:390px){
  .product-gallery .product-visual{
    aspect-ratio:1/1
  }

  .product-gallery .product-visual img{
    max-height:280px
  }

  .product-info h1{
    font-size:32px
  }
}


/* PRODUCT GALLERY SLIDER */

.product-slider{
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  user-select:none
}

.product-slider img{
  transition:
    opacity .2s ease,
    transform .25s ease
}

.product-slide-arrow{
  position:absolute;
  top:50%;
  z-index:4;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  border:1px solid rgba(23,32,51,.12);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#172033;
  font-size:30px;
  line-height:1;
  box-shadow:0 8px 22px rgba(5,15,34,.14);
  cursor:pointer;
  backdrop-filter:blur(8px)
}

.product-slide-prev{
  left:14px
}

.product-slide-next{
  right:14px
}

.product-slide-counter{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(9,15,28,.78);
  color:#fff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.03em;
  backdrop-filter:blur(8px)
}

.product-slide-help{
  margin:.65rem 0 0;
  color:#667085;
  font-size:12px;
  line-height:1.45
}

.product-thumbs{
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:2px 2px 5px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin
}

.product-thumb{
  flex:0 0 70px;
  scroll-snap-align:center
}

.product-thumb.active{
  outline:2px solid #c89b32;
  outline-offset:1px
}

@media(max-width:640px){
  .product-slide-arrow{
    width:40px;
    height:40px;
    font-size:27px
  }

  .product-slide-prev{
    left:8px
  }

  .product-slide-next{
    right:8px
  }

  .product-slide-counter{
    right:9px;
    bottom:9px
  }

  .product-thumb{
    flex-basis:62px;
    width:62px;
    height:62px
  }
}


/* =========================================
   ADMIN PRODUCTS — MOBILE TABLE FIX
   Converts the wide product table to stacked
   cards so it cannot push the admin viewport
   horizontally on phones.
========================================= */
@media(max-width:700px){
  #productsView{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
  }

  #productsView > .table-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }

  #productsView > .table-wrap table,
  #productsView > .table-wrap tbody,
  #productsView > .table-wrap tr,
  #productsView > .table-wrap td{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0!important;
    box-sizing:border-box;
  }

  #productsView > .table-wrap table{
    min-width:0!important;
  }

  #productsView > .table-wrap thead{
    display:none;
  }

  #productsView > .table-wrap tbody{
    display:grid;
    gap:10px;
  }

  #productsView > .table-wrap tr{
    background:#fff;
    border:1px solid #e2e5e8;
    border-radius:14px;
    padding:7px 11px;
    box-shadow:0 3px 12px rgba(8,17,31,.04);
    overflow:hidden;
  }

  #productsView > .table-wrap td{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:10px;
    align-items:start;
    padding:9px 0!important;
    border-bottom:1px solid #eef1f4!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  #productsView > .table-wrap td:last-child{
    border-bottom:0!important;
  }

  #productsView > .table-wrap td::before{
    font-weight:800;
    color:#647184;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #productsView > .table-wrap td:nth-child(1)::before{content:"Product";}
  #productsView > .table-wrap td:nth-child(2)::before{content:"Brand";}
  #productsView > .table-wrap td:nth-child(3)::before{content:"Mode";}
  #productsView > .table-wrap td:nth-child(4)::before{content:"Price (USD)";}
  #productsView > .table-wrap td:nth-child(5)::before{content:"Stock";}
  #productsView > .table-wrap td:nth-child(6)::before{content:"Status";}
  #productsView > .table-wrap td:nth-child(7)::before{content:"Actions";}

  #productsView > .table-wrap td:last-child > *{
    max-width:100%;
  }
}


/* =========================================
   PUBLIC NAVIGATION — FINAL RESPONSIVE FIX
========================================= */
.site-header{
  isolation:isolate;
}

@media(max-width:1180px){
  .menu-toggle{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:10px;
    line-height:1;
    position:relative;
    z-index:92;
  }

  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:90;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
    /* Keep the last link reachable with mobile browser bars visible. */
    max-height:calc(100vh - 82px);
    max-height:calc(100svh - 82px);
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scroll-padding-bottom:20px;
    -webkit-overflow-scrolling:touch;
    padding:12px 20px max(20px,env(safe-area-inset-bottom));
    background:#050608;
    border-top:1px solid rgba(255,255,255,.10);
    box-shadow:0 22px 40px rgba(0,0,0,.32);
  }

  .nav.open{
    display:flex;
  }

  .nav a{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    width:100%;
    min-height:46px;
    padding:10px 4px;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:14px;
    line-height:1.25;
  }

  .nav a:last-child{
    border-bottom:0;
  }

  .nav .btn,
  .nav .btn-sm{
    justify-content:center;
    margin-top:10px;
    padding:12px 16px;
    border-bottom:0;
  }

  body.nav-open{
    overflow:hidden;
  }
}

@media(min-width:1181px){
  .nav{
    gap:15px;
  }

  .nav a{
    font-size:12px;
  }
}

/* =========================================
   PUBLIC WHATSAPP SHORTCUT
========================================= */
.crineo-whatsapp-float{
  position:fixed;
  right:18px;
  bottom:max(20px,env(safe-area-inset-bottom));
  z-index:45;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
  font-weight:800;
  line-height:1;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.24));
}

.crineo-whatsapp-float.account-offset{
  bottom:max(100px,calc(env(safe-area-inset-bottom) + 88px));
}

.crineo-whatsapp-float-label{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  background:#fff;
  color:#122033;
  border:1px solid #e4e8ee;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  font-size:12px;
  white-space:nowrap;
}

.crineo-whatsapp-float-icon{
  width:56px;
  height:56px;
  flex:0 0 56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  border:3px solid #fff;
  box-shadow:0 10px 28px rgba(37,211,102,.32);
  transition:transform .18s ease,box-shadow .18s ease;
}

.crineo-whatsapp-float-icon svg{
  width:31px;
  height:31px;
  display:block;
}

.crineo-whatsapp-float:hover .crineo-whatsapp-float-icon,
.crineo-whatsapp-float:focus-visible .crineo-whatsapp-float-icon{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 32px rgba(37,211,102,.42);
}

@media(max-width:640px){
  .crineo-whatsapp-float{
    right:14px;
    bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));
  }

  .crineo-whatsapp-float.account-offset{
    bottom:max(96px,calc(env(safe-area-inset-bottom) + 86px));
  }

  .crineo-whatsapp-float-label{
    display:none;
  }

  .crineo-whatsapp-float-icon{
    width:52px;
    height:52px;
    flex-basis:52px;
  }

  .crineo-whatsapp-float-icon svg{
    width:29px;
    height:29px;
  }
}


/* ===========================
   PRODUCT SIZE GUIDE
=========================== */
.product-size-guide{
  margin-top:16px;
  border:1px solid #d9dee8;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.product-size-guide summary{
  cursor:pointer;
  list-style:none;
  padding:14px 16px;
  font-weight:800;
  color:#0b2454;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.product-size-guide summary::-webkit-details-marker{
  display:none;
}
.product-size-guide summary::after{
  content:'+';
  font-size:22px;
  line-height:1;
}
.product-size-guide[open] summary::after{
  content:'−';
}
.product-size-guide-body{
  padding:0 16px 16px;
}
.product-size-guide-body p{
  margin:0 0 12px;
  color:#667085;
}
.product-size-guide-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.product-size-guide table{
  width:100%;
  min-width:430px;
  border-collapse:collapse;
  background:#fff;
}
.product-size-guide th,
.product-size-guide td{
  padding:11px 12px;
  border:1px solid #e3e7ee;
  text-align:center;
}
.product-size-guide th{
  background:#f6f8fb;
  color:#101828;
  font-weight:800;
}
.product-size-guide td:first-child{
  font-weight:800;
}
.product-size-guide small{
  display:block;
  margin-top:10px;
  color:#667085;
  line-height:1.5;
}



#productMainImage[hidden]{
  display:none!important
}

#productColourCatalogBoard:not([hidden]){
  display:flex!important
}

/* PRODUCT 11 — 10-COLOUR CATALOG BOARD */
.product-colour-catalog[hidden]{
  display:none!important
}

.product-colour-catalog{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:16px 18px;
  overflow:hidden;
  border-radius:14px;
  background:
    radial-gradient(circle at 100% 0%,rgba(200,155,50,.12),transparent 34%),
    linear-gradient(180deg,#fff,#fbfcff)
}

.product-colour-catalog-head{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:left
}

.product-colour-catalog-logo{
  width:46px!important;
  height:46px!important;
  max-height:none!important;
  object-fit:contain!important;
  flex:0 0 46px
}

.product-colour-catalog-head strong{
  display:block;
  color:#102c5c;
  font-size:17px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.01em
}

.product-colour-catalog-head small{
  display:block;
  margin-top:3px;
  color:#667085;
  font-size:10px;
  line-height:1.25;
  font-weight:700
}

.product-colour-catalog-grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px
}

.product-colour-catalog-card{
  min-width:0;
  margin:0;
  padding:6px 5px 5px;
  border:1px solid #e4e7ec;
  border-radius:10px;
  background:rgba(255,255,255,.96);
  box-shadow:0 5px 14px rgba(16,44,92,.06)
}

.product-colour-catalog-card img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:1/1!important;
  object-fit:contain!important;
  border-radius:7px!important
}

.product-colour-catalog-card figcaption{
  margin-top:3px;
  overflow:hidden;
  color:#172033;
  font-size:9px;
  line-height:1.1;
  font-weight:850;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap
}

.product-colour-catalog-watermark{
  position:absolute;
  z-index:2;
  left:50%;
  top:52%;
  width:110%;
  transform:translate(-50%,-50%) rotate(-15deg);
  color:#17396e;
  font-size:clamp(24px,5vw,52px);
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
  opacity:.055;
  text-align:center;
  white-space:nowrap;
  pointer-events:none
}

.product-catalog-thumb{
  width:100%;
  height:100%;
  display:grid;
  place-content:center;
  align-items:center;
  justify-items:center;
  gap:0;
  border-radius:7px;
  background:
    radial-gradient(circle at 85% 10%,rgba(200,155,50,.22),transparent 40%),
    #f7f9fc;
  color:#102c5c
}

.product-catalog-thumb-grid{
  font-size:17px;
  line-height:.9;
  color:#c89b32
}

.product-catalog-thumb strong{
  font-size:17px;
  line-height:1;
  font-weight:950
}

.product-catalog-thumb small{
  margin-top:2px;
  font-size:7px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em
}

@media(max-width:640px){
  .product-colour-catalog{
    gap:7px;
    padding:10px 8px 9px
  }

  .product-colour-catalog-head{
    gap:7px
  }

  .product-colour-catalog-logo{
    width:34px!important;
    height:34px!important;
    flex-basis:34px
  }

  .product-colour-catalog-head strong{
    font-size:13px
  }

  .product-colour-catalog-head small{
    font-size:8px
  }

  .product-colour-catalog-grid{
    gap:5px
  }

  .product-colour-catalog-card{
    padding:4px 3px 3px;
    border-radius:7px
  }

  .product-colour-catalog-card figcaption{
    font-size:7px
  }
}


/* ORDER AMENDMENT CONTROL CENTER */

.order-amend-center{
  margin-top:18px;
  padding:18px;
  border:1px solid #dfe5ec;
  border-radius:18px;
  background:#fff;
}

.order-amend-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.order-amend-head h3,
.order-amend-head h4{
  margin:4px 0 0;
}

.order-amend-countdown-wrap{
  min-width:190px;
  padding:12px 14px;
  border:1px solid #d7dee8;
  border-radius:14px;
  background:#f7f9fc;
}

.order-amend-countdown-wrap small,
.order-amend-countdown-wrap strong{
  display:block;
}

.order-amend-countdown-wrap small{
  margin-bottom:4px;
  color:#667085;
}

.order-amend-countdown-wrap strong{
  font-size:1rem;
  font-variant-numeric:tabular-nums;
}

.order-amend-actions,
.order-amend-save-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.order-amend-panel{
  margin-top:16px;
}

.order-amend-warning{
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #ead7a1;
  border-radius:12px;
  background:#fff9e8;
  line-height:1.55;
}

.order-amend-lines{
  display:grid;
  gap:14px;
}

.order-amend-line{
  padding:15px;
  border:1px solid #e1e6ee;
  border-radius:15px;
  background:#fbfcfe;
}

.order-amend-line-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.order-amend-line-head strong,
.order-amend-line-head small{
  display:block;
}

.order-amend-line-head small{
  margin-top:3px;
  color:#667085;
}

.order-amend-line-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.order-amend-remove{
  flex:0 0 auto;
}

.order-amend-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.order-amend-fields label{
  display:grid;
  gap:6px;
  min-width:0;
  font-weight:600;
}

.order-amend-fields input,
.order-amend-fields select{
  width:100%;
  min-height:44px;
  box-sizing:border-box;
}

.order-amend-history{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #e4e8ef;
}

.order-amend-history h4,
.order-amend-history h5{
  margin:0 0 10px;
}

.order-amend-history-list{
  display:grid;
  gap:8px;
}

.order-amend-history-list article{
  display:grid;
  grid-template-columns:minmax(90px,.7fr) minmax(180px,2fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid #e5e9ef;
  border-radius:11px;
  background:#fff;
}

.order-amend-history-list small{
  color:#667085;
  text-align:right;
}

.admin-order-amend-center{
  margin-bottom:18px;
}

@media (max-width:720px){
  .order-amend-fields{
    grid-template-columns:1fr;
  }

  .order-amend-countdown-wrap{
    width:100%;
  }

  .order-amend-history-list article{
    grid-template-columns:1fr;
  }

  .order-amend-history-list small{
    text-align:left;
  }

  .order-amend-actions > *,
  .order-amend-save-row > button{
    width:100%;
  }
}


/* GHANA CITY REGION AUTOMATION */

#checkoutRegionStatus[data-state="ready"],
#ghanaDeliveryRegionStatus[data-state="ready"]{
  color:#177245;
  font-weight:700;
}

#checkoutRegionStatus[data-state="manual"],
#ghanaDeliveryRegionStatus[data-state="manual"]{
  color:#a15c00;
  font-weight:700;
}

select[name="region"]:disabled,
#ghanaDeliveryRegion:disabled{
  opacity:1;
  color:#172033;
  background:#f4f8f5;
  border-color:#b8d7c2;
  cursor:not-allowed;
}

.admin-delivery-location-facts{
  margin:14px 0 18px;
}


/* UNIFIED NOTIFICATION CENTER */

.notification-preference-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}

.notification-preference-card{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:14px;
  border:1px solid #dfe5ec;
  border-radius:14px;
  background:#fff;
}

.notification-preference-card input{
  margin-top:3px;
  flex:0 0 auto;
}

.notification-preference-card span{
  display:grid;
  gap:4px;
}

.notification-preference-card small{
  color:#667085;
  line-height:1.45;
}

.notification-history-section{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid #e2e7ee;
}

.notification-history-list,
.notification-monitor-list{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.notification-history-card,
.notification-monitor-item{
  padding:15px;
  border:1px solid #e1e6ee;
  border-radius:15px;
  background:#fff;
}

.notification-history-head,
.notification-monitor-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.notification-history-head>div,
.notification-monitor-head>div{
  display:grid;
  gap:5px;
}

.notification-history-head small,
.notification-monitor-head small{
  color:#667085;
  white-space:nowrap;
}

.notification-history-card p,
.notification-monitor-item p{
  margin:10px 0 0;
  color:#475467;
  line-height:1.5;
}

.notification-channel-statuses{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.notification-channel-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border:1px solid #d8dee8;
  border-radius:999px;
  background:#f7f9fc;
  color:#475467;
  font-size:11px;
  line-height:1.2;
}

.notification-channel-pill[data-status="sent"],
.notification-channel-pill[data-status="delivered"],
.notification-channel-pill[data-status="read"]{
  border-color:#b8d7c2;
  background:#edf8f0;
  color:#176b32;
}

.notification-channel-pill[data-status="failed"]{
  border-color:#efc1bd;
  background:#fff1ef;
  color:#b42318;
}

.notification-channel-pill[data-status="pending_config"],
.notification-channel-pill[data-status="pending"]{
  border-color:#ead8a1;
  background:#fff9e8;
  color:#8a6514;
}

.notification-channel-pill[data-status^="skipped"]{
  background:#f2f4f7;
  color:#667085;
}

.notification-monitor-toolbar{
  display:flex;
  gap:10px;
  margin:14px 0;
}

.notification-monitor-toolbar select{
  min-height:42px;
  max-width:320px;
}

.notification-monitor-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}

.notification-monitor-stats>div{
  padding:12px;
  border:1px solid #e0e5ec;
  border-radius:12px;
  background:#f8fafc;
}

.notification-monitor-stats small,
.notification-monitor-stats strong{
  display:block;
}

.notification-monitor-stats small{
  color:#667085;
}

.notification-monitor-stats strong{
  margin-top:4px;
  font-size:1.25rem;
}

.notification-provider-grid{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.notification-provider-readiness{
  display:grid;
  gap:3px;
  padding:12px;
  border:1px solid #dfe5ec;
  border-radius:12px;
  background:#fff;
}

.notification-provider-readiness span{
  color:#667085;
  font-size:11px;
}

.notification-monitor-toolbar input,
.notification-monitor-toolbar select{
  min-height:42px;
  box-sizing:border-box;
}

.notification-monitor-toolbar input{
  flex:1 1 260px;
  min-width:0;
}

.notification-retry-btn{
  margin-top:12px;
}

@media(max-width:720px){
  .notification-preference-grid,
  .notification-monitor-stats,
  .notification-provider-grid{
    grid-template-columns:1fr;
  }

  .notification-monitor-toolbar{
    flex-direction:column;
  }

  .notification-history-head,
  .notification-monitor-head{
    display:grid;
    grid-template-columns:1fr;
  }

  .notification-history-head small,
  .notification-monitor-head small{
    white-space:normal;
  }

  .notification-monitor-toolbar select{
    width:100%;
    max-width:none;
  }
}


/* VARIANT INVENTORY & STOCK RESERVATIONS */

.variant-availability[data-stock-status="in_stock"],
.stock-state[data-stock-status="in_stock"]{
  color:#177245;
  font-weight:800;
}

.variant-availability[data-stock-status="low_stock"],
.stock-state[data-stock-status="low_stock"]{
  color:#9a6700;
  font-weight:800;
}

.variant-availability[data-stock-status="out_of_stock"],
.stock-state[data-stock-status="out_of_stock"]{
  color:#b42318;
  font-weight:800;
}

.admin-inventory-center{
  margin-top:22px;
}

.admin-inventory-head-actions,
.admin-inventory-toolbar,
.admin-inventory-row-actions,
.admin-inventory-csv{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.admin-inventory-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:16px 0;
}

.admin-inventory-stats>div{
  padding:12px;
  border:1px solid #e0e5ec;
  border-radius:12px;
  background:#f8fafc;
}

.admin-inventory-stats small,
.admin-inventory-stats strong{
  display:block;
}

.admin-inventory-stats small{
  color:#667085;
}

.admin-inventory-stats strong{
  margin-top:4px;
  font-size:1.25rem;
}

.admin-inventory-toolbar{
  margin:14px 0;
}

.admin-inventory-toolbar input{
  flex:1 1 260px;
  min-height:42px;
}

.admin-inventory-toolbar select{
  min-height:42px;
  min-width:180px;
}

.admin-inventory-reorder-input{
  width:86px;
  min-height:38px;
  box-sizing:border-box;
}

.admin-inventory-table small,
.admin-inventory-ledger-table small{
  display:block;
  margin-top:4px;
  color:#667085;
}

.inventory-status-badge{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background:#f2f4f7;
  color:#475467;
}

.inventory-status-badge[data-status="in_stock"]{
  background:#edf8f0;
  color:#176b32;
}

.inventory-status-badge[data-status="low_stock"]{
  background:#fff7df;
  color:#8a6514;
}

.inventory-status-badge[data-status="out_of_stock"]{
  background:#fff1ef;
  color:#b42318;
}

.admin-inventory-details{
  margin-top:16px;
  padding:14px 0 0;
  border-top:1px solid #e2e7ee;
}

.admin-inventory-details>summary{
  cursor:pointer;
  list-style:none;
}

.admin-inventory-details>summary::-webkit-details-marker{
  display:none;
}

.admin-inventory-reservations{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.admin-inventory-reservation-card{
  display:grid;
  grid-template-columns:1.1fr 1.5fr .5fr 1fr;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border:1px solid #e0e5ec;
  border-radius:12px;
  background:#fff;
}

.admin-inventory-reservation-card div{
  display:grid;
  gap:3px;
}

.admin-inventory-reservation-card span,
.admin-inventory-reservation-card small{
  color:#667085;
  font-size:12px;
}

.admin-inventory-ledger{
  margin-top:12px;
}

.inventory-delta-positive{
  color:#177245;
}

.inventory-delta-negative{
  color:#b42318;
}

.admin-inventory-csv{
  margin-top:14px;
  align-items:flex-start;
}

.admin-inventory-csv .small-note{
  flex:1 1 100%;
  margin:0;
}

.order-inventory-card{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:13px;
  align-items:start;
  margin-top:16px;
  padding:15px;
  border:1px solid #dfe5ec;
  border-radius:15px;
  background:#fff;
}

.order-inventory-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  font-weight:900;
  background:#f2f4f7;
}

.order-inventory-card p{
  margin:5px 0;
  line-height:1.5;
}

.order-inventory-card small{
  color:#667085;
}

.order-inventory-card.active{
  border-color:#ead8a1;
  background:#fffaf0;
}

.order-inventory-card.committed{
  border-color:#b8d7c2;
  background:#f2faf4;
}

.order-inventory-card.expired,
.order-inventory-card.conflict{
  border-color:#efc1bd;
  background:#fff5f3;
}

@media(max-width:860px){
  .admin-inventory-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .admin-inventory-reservation-card{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:620px){
  .admin-inventory-stats,
  .admin-inventory-reservation-card{
    grid-template-columns:1fr;
  }

  .admin-inventory-toolbar{
    align-items:stretch;
    flex-direction:column;
  }

  .admin-inventory-toolbar input,
  .admin-inventory-toolbar select{
    width:100%;
  }

  .admin-inventory-head-actions>*,
  .admin-inventory-csv button{
    width:100%;
  }
}


/* ===========================
   AFTER-SALES CENTRE
=========================== */

.after-sales-center{
  margin-top:22px;
  padding:20px;
  border:1px solid rgba(10,38,80,.12);
  border-radius:20px;
  background:#fff;
}

.after-sales-center-head,
.after-sales-case-head,
.admin-after-sales-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.after-sales-center h4,
.after-sales-case-card h5,
.admin-after-sales-detail h3,
.admin-after-sales-row h4{
  margin:4px 0 6px;
}

.after-sales-new-case{
  margin-top:18px;
  border:1px solid rgba(10,38,80,.12);
  border-radius:16px;
  padding:0;
  overflow:hidden;
  background:#f8fafc;
}

.after-sales-new-case > summary,
.after-sales-details > summary,
.admin-after-sales-panel > summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  padding:15px 16px;
}

.after-sales-new-case > summary::-webkit-details-marker,
.after-sales-details > summary::-webkit-details-marker,
.admin-after-sales-panel > summary::-webkit-details-marker{
  display:none;
}

.after-sales-new-case > form{
  padding:0 16px 16px;
}

.after-sales-form-grid,
.admin-after-sales-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.after-sales-policy-check{
  display:flex!important;
  align-items:flex-start;
  gap:10px;
  margin:14px 0;
}

.after-sales-policy-check input{
  width:auto!important;
  margin-top:4px;
  flex:0 0 auto;
}

.after-sales-policy-check span{
  line-height:1.55;
}

.after-sales-case-card{
  margin-top:14px;
  padding:16px;
  border:1px solid rgba(10,38,80,.12);
  border-radius:18px;
  background:#fff;
}

.after-sales-case-ref{
  display:inline-block;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.08em;
  color:#8a6a18;
}

.after-sales-case-head p,
.admin-after-sales-row p{
  margin:0;
  opacity:.72;
}

.after-sales-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:7px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:900;
  background:#eef2f7;
  color:#334155;
}

.after-sales-status[data-status="submitted"]{
  background:#fff7dd;
  color:#7b5b00;
}

.after-sales-status[data-status="under_review"]{
  background:#e8f0ff;
  color:#174c9a;
}

.after-sales-status[data-status="awaiting_customer"]{
  background:#fff0e1;
  color:#92400e;
}

.after-sales-status[data-status="approved"],
.after-sales-status[data-status="resolved"]{
  background:#e9f8ef;
  color:#17663a;
}

.after-sales-status[data-status="rejected"],
.after-sales-status[data-status="closed"]{
  background:#f1f3f5;
  color:#59616d;
}

.after-sales-case-description{
  margin-top:14px;
  padding:13px 14px;
  border-radius:14px;
  background:#f7f9fc;
  line-height:1.65;
  white-space:pre-wrap;
}

.after-sales-public-response{
  margin-top:14px;
  padding:13px 14px;
  border-left:4px solid #b99028;
  border-radius:10px;
  background:#fff9e9;
}

.after-sales-public-response p{
  margin:6px 0 0;
  white-space:pre-wrap;
}

.after-sales-refund-summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:13px;
  padding:11px 13px;
  border-radius:12px;
  background:#f0f7ff;
}

.after-sales-details{
  margin-top:14px;
  border-top:1px solid rgba(10,38,80,.10);
}

.after-sales-details > summary{
  padding-left:0;
  padding-right:0;
}

.after-sales-timeline{
  display:grid;
  gap:10px;
  margin:4px 0 14px;
}

.after-sales-timeline-item{
  padding:11px 12px;
  border:1px solid rgba(10,38,80,.10);
  border-radius:12px;
  background:#fafbfc;
}

.after-sales-timeline-item > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.after-sales-timeline-item p{
  margin:7px 0 0;
  white-space:pre-wrap;
}

.after-sales-file-list{
  display:grid;
  gap:8px;
  margin:9px 0;
}

.after-sales-file{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(10,38,80,.12);
  border-radius:11px;
  text-decoration:none;
  background:#fff;
}

.after-sales-evidence-section{
  margin-top:12px;
}

.after-sales-evidence-form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

.after-sales-evidence-form input[type="file"]{
  flex:1 1 240px;
}

.after-sales-evidence-form .form-status{
  flex:1 0 100%;
  margin:0;
}

.after-sales-update-form{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(10,38,80,.10);
}

.after-sales-case-time{
  display:block;
  margin-top:12px;
  opacity:.65;
}

/* Admin after-sales */

.admin-after-sales-shell{
  display:block;
}

.admin-after-sales-stats{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin:18px 0;
}

.admin-after-sales-stats > div{
  padding:13px;
  border:1px solid rgba(10,38,80,.10);
  border-radius:14px;
  background:#f8fafc;
}

.admin-after-sales-stats small{
  display:block;
  opacity:.66;
}

.admin-after-sales-stats strong{
  display:block;
  margin-top:4px;
  font-size:1.45rem;
}

.admin-after-sales-filters{
  display:grid;
  grid-template-columns:minmax(220px,2fr) minmax(160px,1fr) minmax(160px,1fr);
  gap:10px;
  margin-bottom:16px;
}

.admin-after-sales-layout{
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(0,1.7fr);
  gap:16px;
  align-items:start;
}

.admin-after-sales-list{
  display:grid;
  gap:10px;
  max-height:760px;
  overflow:auto;
  padding-right:2px;
}

.admin-after-sales-row{
  width:100%;
  text-align:left;
  border:1px solid rgba(10,38,80,.12);
  border-radius:15px;
  padding:13px;
  background:#fff;
  color:inherit;
  cursor:pointer;
}

.admin-after-sales-row:hover,
.admin-after-sales-row.active{
  border-color:#b99028;
  box-shadow:0 8px 24px rgba(10,38,80,.08);
}

.admin-after-sales-row-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.admin-after-sales-row-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:9px 0;
}

.admin-after-sales-row-meta span{
  padding:5px 8px;
  border-radius:999px;
  background:#f1f4f8;
  font-size:.72rem;
  font-weight:700;
}

.after-sales-priority[data-priority="high"]{
  background:#fff2d8!important;
  color:#855600;
}

.after-sales-priority[data-priority="urgent"]{
  background:#ffe6e6!important;
  color:#9d1c1c;
}

.admin-after-sales-detail{
  margin:0;
}

.admin-after-sales-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:15px 0;
}

.admin-after-sales-summary-grid > div{
  padding:11px 12px;
  border-radius:12px;
  background:#f7f9fc;
}

.admin-after-sales-summary-grid small,
.admin-after-sales-summary-grid strong{
  display:block;
}

.admin-after-sales-summary-grid small{
  opacity:.65;
  margin-bottom:4px;
}

.admin-after-sales-customer-issue{
  padding:14px;
  border:1px solid rgba(10,38,80,.10);
  border-radius:14px;
  background:#fff;
  margin-bottom:16px;
}

.admin-after-sales-customer-issue p{
  white-space:pre-wrap;
  margin-bottom:0;
}

.admin-after-sales-form-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.admin-after-sales-panel{
  margin-top:16px;
  border:1px solid rgba(10,38,80,.10);
  border-radius:14px;
  padding:0 13px 13px;
}

@media (max-width:1100px){
  .admin-after-sales-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .admin-after-sales-layout{
    grid-template-columns:1fr;
  }

  .admin-after-sales-list{
    max-height:430px;
  }

  .admin-after-sales-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  .after-sales-center{
    padding:15px;
    border-radius:16px;
  }

  .after-sales-center-head,
  .after-sales-case-head,
  .admin-after-sales-detail-head{
    flex-direction:column;
  }

  .after-sales-form-grid,
  .admin-after-sales-form-grid,
  .admin-after-sales-filters,
  .admin-after-sales-summary-grid{
    grid-template-columns:1fr;
  }

  .admin-after-sales-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .after-sales-refund-summary{
    display:grid;
  }

  .after-sales-file{
    align-items:flex-start;
    flex-direction:column;
  }
}


.after-sales-open-btn{
  margin-left:auto;
  white-space:nowrap;
}

@media (max-width:700px){
  .order-tracking-card .account-item-head{
    flex-wrap:wrap;
  }

  .order-tracking-card .after-sales-open-btn{
    margin-left:0;
  }
}


/* WhatsApp-style compact message bubbles and in-bubble timestamps */
#accountMessages .chat-message-group{
  width:fit-content!important;
  max-width:min(78%,420px)!important;
}
#accountMessages .chat-sender{display:none!important}
#accountMessages .chat-bubble{
  width:fit-content!important;
  max-width:100%!important;
  padding:7px 10px 6px!important;
}
#accountMessages .chat-message-text{
  width:fit-content!important;
  max-width:100%!important;
  font-size:14px!important;
  line-height:1.35!important;
}
#accountMessages .message-meta-actions{
  width:fit-content!important;
  max-width:100%!important;
  align-self:flex-end!important;
  justify-content:flex-end!important;
  gap:4px!important;
  margin-top:2px!important;
}
#accountMessages .chat-time-outside{
  margin:0!important;
  font-size:10px!important;
  line-height:1.15!important;
}
#accountMessages .message-more-btn{
  width:20px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0!important;
  font-size:12px!important;
}
@media(max-width:640px){
  #accountMessages .chat-message-group{max-width:min(82%,360px)!important}
  #accountMessages .chat-bubble{padding:6px 9px 5px!important}
}


/* Consistent public navigation and grouped customer resources. */
.site-header{background:rgba(8,26,45,.97)}
.site-header .nav-group{position:relative}
.site-header .nav-group summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;color:#eef3fb;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.site-header .nav-group summary::-webkit-details-marker{display:none}
.site-header .nav-group summary:hover,.site-header .nav-group[open] summary{color:#f2d792}
.site-header .nav-group summary:focus-visible{outline:2px solid #d7ae54;outline-offset:5px;border-radius:3px}
.site-header .nav-group-panel{position:absolute;top:calc(100% + 18px);left:0;min-width:235px;padding:10px;border:1px solid #d7ae5440;border-radius:12px;background:#081a2d;box-shadow:0 16px 32px #0004}
.site-header .nav-group-panel a{display:block;padding:11px 12px;font-size:12px;border-radius:6px;white-space:normal}
.site-header .nav-group-panel a:hover,.site-header .nav-group-panel a:focus-visible{background:#ffffff0a}
@media(max-width:1180px){
 .site-header .nav-group{width:100%;flex:0 0 auto;border-bottom:1px solid #ffffff14}
 .site-header .nav-group summary{min-height:46px;padding:10px 4px;font-size:14px;justify-content:space-between}
 .site-header .nav-group-panel{position:static;min-width:0;padding:0 0 8px 14px;border:0;border-left:1px solid #d7ae5450;border-radius:0;background:transparent;box-shadow:none;margin:0 0 10px 4px}
 .site-header .nav .nav-group-panel a{font-size:13px;min-height:42px;border:0;padding:10px 12px}
}
@media(min-width:1181px) and (max-width:1350px){.site-header .nav{gap:12px}.site-header .nav a,.site-header .nav-group summary{font-size:11px}}