/* ==========================================================================
   DEXIE Storefront Theme - "Deep Ink"
   The Scents / DEX EMPIRE LIMITED

   Market-agnostic by rule: no currency symbols, country names, contact
   details or legal text live in this file. All of that comes from store
   settings so a new market inherits a finished storefront.

   No external requests. No @import, no CDN, no webfont URL.
   ========================================================================== */

:root{
  --ink:#15202E;
  --ink-2:#4F5865;
  --ink-3:#868E9A;
  --ground:#FCFBF9;
  --surface:#FFFFFF;
  --surface-2:#F1EFEB;
  --rule:#E3E1DC;
  --rule-2:#C8C5BE;
  --accent-ink:#FFFFFF;
  --copper:#B8541B;
  --copper-soft:#FCEEE2;
  --trade:#1B5E6B;
  --trade-soft:#E3F0F2;
  --hero-wash:linear-gradient(135deg,#15202E,#2C4358);
  --radius:2px;
  --shadow:0 2px 8px -2px rgba(21,32,46,.10),0 14px 34px -18px rgba(21,32,46,.22);
  --sans:ui-sans-serif,-apple-system,"Segoe UI Variable Display","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- base ---------- */
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--copper);}
h1,h2,h3,h4,h5{font-weight:800;letter-spacing:-.035em;color:var(--ink);}
h1{font-size:clamp(1.6rem,3vw,2.3rem);text-transform:uppercase;line-height:1;}
h2{font-size:clamp(1.35rem,2.4vw,1.9rem);text-transform:uppercase;}
h3{font-size:1.15rem;}
hr{border-color:var(--rule);opacity:1;}

/* ---------- buttons ---------- */
.btn{
  border-radius:var(--radius);
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:13px 26px;border-width:1px;
  transition:background .16s,color .16s,border-color .16s;
}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--accent-ink);}
.btn-primary:hover,.btn-primary:focus{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-light,.btn-secondary{background:var(--surface-2);border-color:var(--rule);color:var(--ink);}
.btn-light:hover,.btn-secondary:hover{background:var(--ink);border-color:var(--ink);color:var(--accent-ink);}
.btn-danger{background:var(--copper);border-color:var(--copper);color:#fff;}

/* ---------- header ---------- */
#header,header.dx{background:var(--surface);border-bottom:1px solid var(--rule);}
#logo a{font-size:21px;font-weight:800;letter-spacing:-.045em;text-transform:uppercase;color:var(--ink);}
#logo img{max-height:44px;width:auto;}
#search .form-control{
  border:1px solid transparent;background:var(--surface-2);
  border-radius:var(--radius);height:46px;font-size:14px;
}
#search .form-control:focus{border-color:var(--ink);box-shadow:none;background:var(--surface);}
#search .btn{background:var(--ink);border-color:var(--ink);color:var(--accent-ink);}
#cart > .btn{background:transparent;border:0;color:var(--ink);font-weight:700;letter-spacing:.04em;}
#cart .dropdown-menu{border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);}

/* ---------- navigation ---------- */
#menu,.navbar{background:var(--surface);border-bottom:1px solid var(--rule);}
#menu .nav-link,.navbar .nav-link{
  color:var(--ink-2);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:15px 16px;
}
#menu .nav-link:hover,.navbar .nav-link:hover{color:var(--ink);}
.dropdown-menu{border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px;}
.dropdown-item{font-size:13.5px;border-radius:var(--radius);padding:8px 12px;}
.dropdown-item:hover{background:var(--surface-2);color:var(--ink);}

/* ---------- breadcrumb ---------- */
.breadcrumb{background:none;padding:16px 0;font-size:12px;letter-spacing:.03em;margin:0;}
.breadcrumb a{color:var(--ink-3);}
.breadcrumb a:hover{color:var(--ink);}

/* ---------- product card ---------- */
.product-thumb{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;height:100%;
  display:flex;flex-direction:column;
  transition:border-color .18s,box-shadow .18s;
}
.product-thumb:hover{border-color:var(--ink);box-shadow:var(--shadow);}
.product-thumb .image{position:relative;background:var(--surface-2);overflow:hidden;}
.product-thumb .image img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .4s ease;
}
.product-thumb:hover .image img{transform:scale(1.04);}
.product-thumb .caption{padding:15px 16px 17px;display:flex;flex-direction:column;gap:2px;flex:1;}
.product-thumb .caption h4{
  font-size:14px;font-weight:600;letter-spacing:-.008em;line-height:1.3;
  margin:2px 0 0;text-transform:none;
}
.product-thumb .caption h4 a{color:var(--ink);}
.product-thumb .description{display:none;}

/* brand eyebrow above the product name */
.dx-brand{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}

/* ---------- pricing: two prices, then the saving ---------- */
.product-thumb .price,.price{
  margin-top:auto;padding-top:13px;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.price-new{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.03em;}
.price-old{font-size:13px;color:var(--ink-3);text-decoration:line-through;font-weight:400;}
.price-tax{display:none;}

.dx-saving{
  margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--copper);background:var(--copper-soft);
  padding:5px 9px;align-self:flex-start;border-radius:var(--radius);
  font-variant-numeric:tabular-nums;
}
.dx-saving--trade{color:var(--trade);background:var(--trade-soft);}
.dx-trade-tag{
  display:block;margin-top:9px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--trade);
}

/* ---------- product page ---------- */
#product .price-new{font-size:30px;}
.thumbnails img{border:1px solid var(--rule);border-radius:var(--radius);}
.nav-tabs{border-bottom:1px solid var(--rule);}
.nav-tabs .nav-link{
  border:0;border-bottom:2px solid transparent;color:var(--ink-3);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:13px 18px;
}
.nav-tabs .nav-link.active{color:var(--ink);border-bottom-color:var(--ink);background:none;}

/* ---------- forms ---------- */
.form-control,.form-select{
  border:1px solid var(--rule);border-radius:var(--radius);
  font-size:14px;padding:11px 14px;background:var(--surface);color:var(--ink);
}
.form-control:focus,.form-select:focus{border-color:var(--ink);box-shadow:none;}
.form-label{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);}

/* ---------- alerts, badges ---------- */
.alert{border-radius:var(--radius);border:1px solid var(--rule);font-size:13.5px;}
.alert-success{background:var(--trade-soft);border-color:var(--trade);color:var(--trade);}
.alert-danger{background:var(--copper-soft);border-color:var(--copper);color:var(--copper);}
.badge{border-radius:var(--radius);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:10px;padding:5px 9px;}

/* ---------- pagination ---------- */
.pagination .page-link{
  border:1px solid var(--rule);color:var(--ink);border-radius:var(--radius);
  margin:0 3px;font-size:13px;font-weight:600;
}
.pagination .page-item.active .page-link{background:var(--ink);border-color:var(--ink);color:var(--accent-ink);}

/* ---------- footer ---------- */
footer{
  background:var(--surface);border-top:1px solid var(--rule);
  padding:56px 0 26px;color:var(--ink-2);margin-top:60px;
}
footer h5{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:16px;}
footer a{color:var(--ink-2);font-size:13px;}
footer a:hover{color:var(--ink);}
footer .list-unstyled li{margin-bottom:9px;}

/* ---------- helpers ---------- */
.dx-eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink-3);}
.dx-hero{background:var(--hero-wash);color:#fff;padding:56px;border-radius:var(--radius);}
.dx-hero h1,.dx-hero h2{color:#fff;}
.dx-hero .btn-primary{background:#fff;border-color:#fff;color:var(--ink);}
.dx-hero .btn-primary:hover{background:transparent;color:#fff;}

/* ==========================================================================
   DEXIE product card — sale flag, actions, rating
   ========================================================================== */

.dx-flag{
  position:absolute;top:0;left:0;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;background:var(--copper);color:#fff;
  font-variant-numeric:tabular-nums;z-index:2;
}

.dx-rating{margin-top:8px;color:var(--copper);font-size:11px;letter-spacing:.06em;}

.dx-card-actions{
  margin-top:14px;display:flex;gap:6px;align-items:stretch;
}
.dx-btn-cart{
  flex:1;background:var(--ink);color:var(--accent-ink);border:1px solid var(--ink);
  border-radius:var(--radius);
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 14px;cursor:pointer;transition:background .16s,color .16s;
}
.dx-btn-cart:hover{background:transparent;color:var(--ink);}
.dx-btn-icon{
  background:transparent;border:1px solid var(--rule);color:var(--ink-2);
  border-radius:var(--radius);padding:11px 13px;cursor:pointer;
  transition:border-color .16s,color .16s;
}
.dx-btn-icon:hover{border-color:var(--ink);color:var(--copper);}

/* ==========================================================================
   DEXIE header — utility bar + masthead
   ========================================================================== */

.dx-utilitybar{
  background:var(--surface);
  border-bottom:1px solid var(--rule);
  font-size:11.5px;
}
.dx-utilitybar__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:40px;flex-wrap:wrap;
}
.dx-utilitybar__left{display:flex;align-items:center;gap:4px;}
.dx-utilitybar__right{display:flex;align-items:center;gap:22px;}
.dx-utilitybar__link{
  color:var(--ink-3);font-weight:650;letter-spacing:.04em;
  text-decoration:none;font-size:11.5px;
}
.dx-utilitybar__link:hover{color:var(--ink);}

/* currency + language selectors sitting in the utility bar */
.dx-utilitybar form{margin:0;}
.dx-utilitybar .btn,
.dx-utilitybar .dropdown-toggle{
  background:transparent;border:0;color:var(--ink-3);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 11px;
}
.dx-utilitybar .btn:hover,
.dx-utilitybar .dropdown-toggle:hover{color:var(--ink);background:transparent;}

/* ---------- masthead ---------- */
.dx-masthead{
  background:var(--surface);
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:30;
}
.dx-masthead__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:30px;align-items:center;
  min-height:78px;
}
@media (max-width:767px){
  .dx-masthead__inner{grid-template-columns:1fr auto;gap:14px;padding:14px 0;}
  .dx-masthead__search{grid-column:1 / -1;order:3;}
}
.dx-masthead__logo img{max-height:44px;width:auto;}
.dx-wordmark{
  font-size:21px;font-weight:800;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.dx-wordmark:hover{color:var(--ink);}

.dx-masthead__actions{display:flex;align-items:center;gap:4px;}
.dx-iconlink{
  display:flex;align-items:center;gap:7px;
  color:var(--ink);text-decoration:none;
  font-size:12px;font-weight:650;letter-spacing:.03em;
  padding:9px 12px;cursor:pointer;white-space:nowrap;
}
.dx-iconlink:hover{color:var(--copper);}

/* search sits flush and quiet until focused */
.dx-masthead__search .input-group{border:0;}
.dx-masthead__search input[type="text"],
.dx-masthead__search .form-control{
  background:var(--surface-2);border:1px solid transparent;
  border-radius:var(--radius) 0 0 var(--radius);
  height:46px;font-size:14px;box-shadow:none;
}
.dx-masthead__search .form-control:focus{border-color:var(--ink);background:var(--surface);}
.dx-masthead__search .btn{
  background:var(--ink);border-color:var(--ink);color:var(--accent-ink);
  border-radius:0 var(--radius) var(--radius) 0;padding:13px 20px;
}
.dx-masthead__search .btn:hover{background:var(--copper);border-color:var(--copper);}

/* cart button */
.dx-cart .btn,
.dx-cart .dropdown-toggle{
  background:transparent;border:0;color:var(--ink);
  font-size:12px;font-weight:700;letter-spacing:.03em;padding:9px 12px;
}
.dx-cart .btn:hover{color:var(--copper);background:transparent;}

/* ---------- category menu ---------- */
#menu.navbar,
nav#menu{background:var(--surface) !important;border-bottom:1px solid var(--rule);}
#menu .nav-link{
  color:var(--ink-2);font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:15px 16px;
}
#menu .nav-link:hover{color:var(--ink);}
#category{
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);padding:12px 0;
}

/* ==========================================================================
   DEXIE homepage — hero slots, tiles, section heads, trade CTA
   ========================================================================== */

#common-home > .container{margin-bottom:66px;}
#common-home > .container:first-child{margin-top:26px;}

.dx-hero-grid{
  display:grid;gap:12px;grid-template-columns:1fr;
}
@media (min-width:920px){
  .dx-hero-grid{grid-template-columns:1.66fr 1fr;grid-template-rows:auto auto;}
  .dx-slot--tall{grid-row:span 2;}
}

.dx-slot{
  position:relative;overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:34px;min-height:212px;
}
.dx-slot--tall{
  min-height:456px;
  background:var(--hero-wash);
  border-color:transparent;
  color:#fff;
}
.dx-slot__dim{
  position:absolute;top:14px;right:14px;
  font-size:10px;letter-spacing:.1em;font-weight:700;
  color:var(--ink-3);background:var(--surface);
  border:1px dashed var(--rule-2);padding:4px 9px;border-radius:var(--radius);
}
.dx-slot--tall .dx-slot__dim{
  color:rgba(255,255,255,.85);background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.35);
}
.dx-slot__eyebrow{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;opacity:.72;margin:0 0 14px;
}
.dx-slot__title{
  font-weight:800;font-size:clamp(1.8rem,3.7vw,3.2rem);
  line-height:.99;letter-spacing:-.045em;margin:0 0 14px;
  text-transform:uppercase;text-wrap:balance;
}
.dx-slot__title--sm{font-size:clamp(1.3rem,2.1vw,1.7rem);}
.dx-slot__text{margin:0 0 24px;font-size:14px;max-width:36ch;opacity:.82;line-height:1.5;}
.dx-slot__btn{
  display:inline-block;align-self:flex-start;
  background:var(--ink);color:var(--accent-ink);border:1px solid var(--ink);
  border-radius:var(--radius);text-decoration:none;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:14px 28px;transition:background .16s,color .16s;
}
.dx-slot__btn:hover{background:transparent;color:var(--ink);}
.dx-slot--tall .dx-slot__btn{background:#fff;color:var(--ink);border-color:#fff;}
.dx-slot--tall .dx-slot__btn:hover{background:transparent;color:#fff;}
.dx-slot__btn--ghost{background:transparent;color:var(--ink);}
.dx-slot__btn--ghost:hover{background:var(--ink);color:var(--accent-ink);}

/* ---------- section heads ---------- */
.dx-sechead{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;margin-bottom:22px;
}
.dx-sechead h3{
  font-weight:800;font-size:clamp(1.35rem,2.5vw,1.95rem);
  letter-spacing:-.035em;margin:0;text-transform:uppercase;
}
.dx-sechead__link{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;
}

/* ---------- category tiles ---------- */
.dx-tiles{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);}
@media (min-width:780px){.dx-tiles{grid-template-columns:repeat(6,1fr);}}
.dx-tile{
  position:relative;border:1px solid var(--rule);background:var(--surface-2);
  border-radius:var(--radius);text-decoration:none;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:150px;padding:18px;transition:background .18s;
}
.dx-tile:hover{background:var(--ink);}
.dx-tile:hover .dx-tile__name,.dx-tile:hover .dx-tile__count{color:var(--accent-ink);}
.dx-tile__name{
  font-size:13.5px;font-weight:750;color:var(--ink);
  letter-spacing:-.01em;text-transform:uppercase;line-height:1.2;
}
.dx-tile__count{font-size:11px;color:var(--ink-3);letter-spacing:.05em;margin-top:3px;}

/* ---------- trade call to action ---------- */
.dx-tradecta{
  background:var(--ink);color:var(--ground);
  border-radius:var(--radius);padding:46px;
  display:grid;gap:26px;align-items:center;
}
@media (min-width:840px){.dx-tradecta{grid-template-columns:1.6fr auto;}}
.dx-tradecta h3{
  font-weight:800;font-size:clamp(1.5rem,2.8vw,2.2rem);
  margin:0 0 12px;letter-spacing:-.04em;text-transform:uppercase;
  line-height:1;color:var(--ground);
}
.dx-tradecta p{margin:0;font-size:14px;opacity:.72;max-width:54ch;line-height:1.55;}
.dx-tradecta .dx-slot__btn{background:var(--ground);color:var(--ink);border-color:var(--ground);}
.dx-tradecta .dx-slot__btn:hover{background:transparent;color:var(--ground);}

/* ==========================================================================
   DEXIE footer
   ========================================================================== */

.dx-footer{
  background:var(--surface);
  border-top:1px solid var(--rule);
  padding:60px 0 26px;
  margin-top:70px;
}
.dx-footer__grid{
  display:grid;gap:38px;
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .dx-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.4fr;}
}
.dx-footer h5{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 16px;
}
.dx-footer ul{margin:0;padding:0;}
.dx-footer li{margin-bottom:10px;}
.dx-footer a{color:var(--ink-2);font-size:13px;text-decoration:none;}
.dx-footer a:hover{color:var(--copper);}

.dx-footer__blurb{
  margin:16px 0 0;font-size:13px;line-height:1.65;
  color:var(--ink-2);max-width:38ch;
}

.dx-social{display:flex;gap:7px;margin-top:18px;flex-wrap:wrap;}
.dx-social__link{
  width:38px;height:38px;border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;text-transform:uppercase;
  color:var(--ink-2) !important;border-radius:var(--radius);
  letter-spacing:.02em;transition:background .16s,color .16s,border-color .16s;
}
.dx-social__link:hover{
  background:var(--ink);color:var(--accent-ink) !important;border-color:var(--ink);
}

.dx-contact li{
  display:flex;gap:10px;align-items:baseline;
  font-size:13px;color:var(--ink-2);line-height:1.6;
}
.dx-contact__label{
  flex:0 0 62px;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}

.dx-footer__bottom{
  border-top:1px solid var(--rule);
  margin-top:42px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:11.5px;color:var(--ink-3);
}
.dx-pay{display:flex;gap:5px;flex-wrap:wrap;}
.dx-pay span{
  border:1px solid var(--rule);padding:5px 10px;
  font-size:10px;letter-spacing:.1em;color:var(--ink-3);font-weight:600;
  border-radius:var(--radius);
}

/* ---------- accessibility and motion ---------- */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ---------- print ---------- */
@media print{#header,#menu,footer,.btn{display:none!important;}}
