/* ==========================================================================
   ZENITH BEAUTY WORLD -ShopTill-E theme (standalone)
   The complete stylesheet for the theme. No heathers/base CSS is loaded ----
   this file owns the reset, layout system, homepage, and all inner pages.
   Design system: 1:1 port of the Zenith React template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, dl, dt, dd,
form, fieldset, legend, table, th, td, figure, figcaption, blockquote, section, nav,
header, footer, main, article, aside { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: inline-block; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: inherit; }

/* --------------------------------------------------------------------------
   2. TOKENS + BASE
   -------------------------------------------------------------------------- */
:root {
  --z-plum-900: #2a0730;
  --z-plum-800: #3d0a3f;
  --z-plum-700: #54125a;
  --z-plum-600: #6d1c73;
  --z-wine: #4a0e2e;
  --z-gold-400: #e3c878;
  --z-gold-500: #c9a24b;
  --z-gold-600: #a9842f;
  --z-rose-500: #e11d74;
  --z-rose-400: #f04e96;
  --z-blush: #fbeef4;
  --z-cream: #faf6f1;
  --z-sand: #f3ece4;
  --z-ink: #1b1418;
  --z-mute: #6c6168;
  --z-green: #8fbf3f;
  --z-emerald: #059669;
  --z-shadow-card: 0 10px 30px -12px rgba(61, 10, 63, 0.25);
  --z-shadow-soft: 0 6px 24px -10px rgba(27, 20, 24, 0.18);
  --z-font-display: 'Playfair Display', Georgia, serif;
  --z-font-body: 'Poppins', 'Montserrat', 'Nunito Sans', Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: #fff;
  color: var(--z-ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--z-font-display); letter-spacing: 0; line-height: 1.3; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::selection { background: var(--z-plum-800); color: #fff; }

/* --------------------------------------------------------------------------
   3. LAYOUT SYSTEM (used by inner-page templates)
   -------------------------------------------------------------------------- */
.zen-container, .inner { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; position: relative; }
@media (min-width: 768px) { .zen-container, .inner { padding-left: 32px; padding-right: 32px; } }
.inner .inner { padding-left: 0; padding-right: 0; }

.grid_row { display: block; }
.grid_row::after { content: ""; display: table; clear: both; }
.flex_row { display: flex; flex-wrap: wrap; }

.grid { float: left; width: 100%; min-height: 1px; }
.flex_row > .grid { float: none; }

@media (min-width: 768px) {
  .g01 { width: 8.333%; }  .g02 { width: 16.666%; } .g03 { width: 25%; }
  .g04 { width: 33.333%; } .g05 { width: 41.666%; } .g06 { width: 50%; }
  .g07 { width: 58.333%; } .g08 { width: 66.666%; } .g09 { width: 75%; }
  .g10 { width: 83.333%; } .g11 { width: 91.666%; } .g12 { width: 100%; }
  .gF50 { width: 50%; }
  .pad_right { padding-right: 24px; }
  .pad_left { padding-left: 24px; }
}
@media (max-width: 767px) {
  .gF50 { width: 50%; }
}

.grid_right, .go_right { float: right; }
.centre { text-align: center; }
.clearer { clear: both; }
.margin_right { margin-right: 12px; }
.noborder { border: 0 !important; }
.main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 16px 40px; }
@media (min-width: 768px) { .main { padding-left: 32px; padding-right: 32px; } }

/* mini account page (login / register) */
.zen-account { max-width: 960px; margin: 0 auto; padding: 16px 0 24px; text-align: center; }
.zen-account .zen-divider { margin-left: auto; margin-right: auto; }
.zen-account-card {
  margin-top: 28px; text-align: left;
  background: #fff; border: 1px solid var(--z-sand); border-radius: 20px;
  box-shadow: var(--z-shadow-soft);
  padding: 24px;
}
@media (min-width: 768px) { .zen-account-card { padding: 32px; } }
.zen-account-card h2, .zen-account-card h3, .zen-account-card .subheading {
  font-family: var(--z-font-display); font-size: 19px; font-weight: 600;
  color: var(--z-plum-800); margin: 0 0 14px;
}
.zen-account-card label, .zen-account-card .label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 500; }
.zen-account-card table { width: 100%; }
.zen-account-card td, .zen-account-card th { border: 0; padding: 5px 4px; }
.zen-account-card .input-button, .zen-account-card input[type="submit"], .zen-account-card .button {
  display: block; width: 100%; margin-top: 14px;
}
.zen-account-card a { color: var(--z-rose-500); }
.zen-account-card a.button { color: #fff !important; }
.zen-account-card a:not(.button):hover { text-decoration: underline; }
.zen-account-single { max-width: 420px; margin-left: auto; margin-right: auto; }
.zen-account-switch { margin-top: 20px; font-size: 13px; color: var(--z-mute); }
.zen-account-switch a { color: var(--z-rose-500); font-weight: 600; }
.zen-account-switch a:hover { text-decoration: underline; }

/* register page -open layout, Pak-style */
.zen-register { max-width: 620px; margin: 0 auto; padding: 8px 0 24px; }
.main > .crumbs { text-align: left; padding-top: 0; margin: -6px 0 14px; }
.zen-register-title {
  font-family: inherit; text-align: center;
  font-size: 22px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--z-ink); margin: 8px 0 20px;
}
.zen-register-intro { text-align: left; font-size: 14.5px; line-height: 1.65; color: var(--z-ink); margin: 0 0 26px; }
.zen-regform { text-align: left; }
.zen-regform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.zen-regform .frow--1 { grid-template-columns: 1fr; }
/* single-column form (login) sits narrower than the 2-column register form */
.zen-regform--narrow { max-width: 380px; margin-left: auto; margin-right: auto; }
.zen-regform--narrow .zen-reg-buttons { flex-direction: column; }
.zen-regform--narrow .zen-btn-flat { width: 100%; }
@media (max-width: 640px) { .zen-regform .frow { grid-template-columns: 1fr; } }
/* forgotten-password panel */
.zen-reset { display: none; }
.zen-reset.open { display: block; }
.zen-reset-title { font-family: var(--z-font-body); font-size: 16px; font-weight: 700; color: var(--z-ink); margin: 0 0 8px; }
.zen-reset-text { font-size: 13.5px; line-height: 1.65; color: #666; margin: 0 0 16px; }
.zen-reset-done { display: none; margin-top: 16px; font-size: 13px; }
.zen-reset-done.show { display: block; }

.zen-regform .zen-forgot { display: block; margin: 4px 0 0; font-size: 12.5px; }
.zen-regform .zen-forgot a { color: var(--z-rose-500); }
.zen-regform .zen-forgot a:hover { text-decoration: underline; }
.zen-regform input[type="text"], .zen-regform input[type="email"], .zen-regform input[type="tel"],
.zen-regform input[type="password"], .zen-regform select {
  border-radius: 4px; padding: 12px 14px; font-size: 13px;
}
.zen-regform input::placeholder { text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; color: var(--z-mute); }
.zen-reg-check { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 26px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.7; cursor: pointer; }
.zen-reg-check input { margin-top: 2px; }
.zen-reg-check a { color: var(--z-rose-500); }
.zen-reg-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.zen-btn-flat {
  display: inline-block; border: 0; border-radius: 4px !important; cursor: pointer;
  background: var(--z-rose-500) !important; color: #fff !important;
  padding: 13px 22px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; text-align: center;
  transition: background 0.2s;
}
.zen-btn-flat:hover { background: var(--z-plum-800) !important; }
/* the platform-injected form on /account/create picks up the same look */
.zen-regform .input-button, .zen-regform input[type="submit"], .zen-regform .button {
  display: inline-block; width: auto; border-radius: 4px !important;
  background: var(--z-rose-500) !important; color: #fff !important;
  padding: 13px 22px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.zen-regform .input-button:hover, .zen-regform input[type="submit"]:hover { background: var(--z-plum-800) !important; }
.zen-regform label, .zen-regform .label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.zen-regform table td { padding: 6px 4px; border: 0; }
.zen-account-note {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; font-size: 12px; color: var(--z-mute);
}
.zen-account-note svg { width: 14px; height: 14px; color: var(--z-gold-600); }
.pagecontent { line-height: 1.7; color: var(--z-ink); }
.pagecontent p { margin: 0 0 14px; }
.pagecontent ul { list-style: disc; margin: 0 0 14px 22px; }
.pagecontent ol { list-style: decimal; margin: 0 0 14px 22px; }
.pagecontent a { color: var(--z-rose-500); }
.pagecontent a:hover { text-decoration: underline; }
.pagecontent h2, .pagecontent h3 { margin: 20px 0 10px; color: var(--z-plum-800); }

/* responsive visibility helpers */
@media (max-width: 999px) {
  .no-mobile { display: none !important; }
}
@media (min-width: 1000px) {
  .no-desktop { display: none !important; }
}

.zen-divider { height: 2px; width: 64px; background: linear-gradient(90deg, var(--z-gold-500), var(--z-gold-400)); margin-top: 12px; }

/* --------------------------------------------------------------------------
   4. TYPE + SHARED ELEMENTS
   -------------------------------------------------------------------------- */
.heading {
  font-family: var(--z-font-display);
  font-size: 28px; font-weight: 700; color: var(--z-plum-800);
  margin: 0 0 16px;
}
.subheading {
  font-family: var(--z-font-display);
  font-size: 20px; font-weight: 600; color: var(--z-plum-800);
  margin: 0 0 12px;
}
.heading_side { font-family: var(--z-font-display); font-size: 16px; font-weight: 600; color: var(--z-plum-800); margin: 0 0 10px; }
.heading_side_sub { font-size: 13px; font-weight: 600; color: var(--z-mute); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.heading__product { margin-bottom: 6px; }

/* buttons */
.button, .input-button, .ss_button, .button__a2b, .button_x {
  display: inline-block;
  background: var(--z-plum-800); color: #fff !important;
  border: 0; border-radius: 999px;
  padding: 10px 26px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  text-align: center; cursor: pointer;
  transition: background 0.2s;
}
.button:hover, .input-button:hover, .ss_button:hover, .button__a2b:hover, .button_x:hover { background: var(--z-rose-500); }
.button__oos { background: var(--z-sand) !important; color: var(--z-mute) !important; cursor: default; }
.button__oos:hover { background: var(--z-sand) !important; }

/* forms */
.label, label { font-size: 13px; font-weight: 500; color: var(--z-ink); }
.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], select, textarea {
  width: 100%; max-width: 100%;
  background: #fff; color: var(--z-ink);
  border: 1px solid var(--z-sand); border-radius: 10px;
  padding: 9px 12px; font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-text:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--z-plum-800);
  box-shadow: 0 0 0 3px rgba(61, 10, 63, 0.08);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--z-plum-800); }
input[type="submit"] { width: auto; }
fieldset { border: 0; }

/* messages */
.message, .ss_message {
  border-radius: 12px; padding: 12px 16px; margin: 12px 0;
  background: var(--z-cream); border: 1px solid var(--z-sand);
  font-size: 14px;
}
.message__error { background: var(--z-blush); border-color: rgba(225, 29, 116, 0.25); color: #9d1352; }
.message__thanks { background: #eef7e6; border-color: rgba(143, 191, 63, 0.4); color: #3e6212; }
.message__no { background: var(--z-cream); }

/* breadcrumbs */
.crumbs { font-size: 12px; color: var(--z-mute); padding: 14px 0 4px; }
.crumbs a { color: var(--z-mute); }
.crumbs a:hover { color: var(--z-rose-500); }

/* pagination */
.pagination { margin: 24px 0 8px; padding-top: 16px; border-top: 1px solid var(--z-sand); font-size: 13px; }
.pagination a, .pagination span, .pagination strong {
  display: inline-block; min-width: 32px; padding: 6px 10px; margin: 0 2px;
  border-radius: 999px; text-align: center; color: var(--z-ink);
}
.pagination a:hover { background: var(--z-cream); color: var(--z-plum-800); }
.pagination .pagination-active, .pagination strong { background: var(--z-plum-800); color: #fff; }
.showing { font-size: 12px; color: var(--z-mute); }

/* tables */
.ss_styled_table { width: 100%; font-size: 14px; }
.ss_styled_table th, .ss_styled_table td { padding: 10px 12px; border-bottom: 1px solid var(--z-sand); text-align: left; vertical-align: middle; }
.ss_styled_table thead tr { background: var(--z-plum-800); color: #fff; }
.ss_styled_table thead th { border-bottom: 0; font-weight: 600; }
.tdleft { text-align: left; }
td, th { border-color: var(--z-sand); }

/* sprites legacy hook -render as plain inline text/icons */
.sprites, .sprites-item { background-image: none !important; text-indent: 0; }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
#header {
  position: sticky; top: 0; z-index: 40;
  background: #fff;
}

/* top utility bar -three zones like the reference */
.zen-topbar { border-bottom: 1px solid rgba(27, 20, 24, 0.08); }
.zen-topbar-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 8px; padding-bottom: 8px;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--z-ink);
}
.zen-tb-left { text-align: left; margin-left: -16px; }
/* absolutely centred so it sits dead-centre on the page regardless of side widths */
.zen-tb-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  text-align: center; white-space: nowrap;
}
.zen-tb-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.zen-topbar a { color: var(--z-ink); }
.zen-topbar a:hover { color: var(--z-rose-500); }
.tb-green { color: var(--z-rose-500); font-weight: 700; }

/* register / login -plain text links, same weight as the rest of the bar */
.zen-tb-auth { display: inline-flex; align-items: center; }
.zen-tb-btn {
  display: inline-block; padding: 0 12px;
  background: none; border: 0; border-radius: 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--z-ink); transition: color 0.2s;
}
.zen-tb-btn + .zen-tb-btn { border-left: 1px solid rgba(27, 20, 24, 0.2); }
.zen-tb-btn:last-child { padding-right: 0; }
.zen-tb-btn:hover { color: var(--z-rose-500); }

@media (max-width: 1300px) { .zen-tb-center { position: static; transform: none; } }

.zen-headrow { display: flex; align-items: center; gap: 20px; padding-top: 20px; padding-bottom: 20px; }

.zen-logo { flex-shrink: 0; display: flex; align-items: center; }
.zen-logo img { height: 64px; width: auto; max-width: 300px; object-fit: contain; }
@media (min-width: 768px) { .zen-logo img { height: 80px; } }

/* search -centered underline style */
.zen-search { margin: 0 auto; flex: 1 1 auto; max-width: 672px; }
.searchform { position: relative; }
.searchform-fieldset {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid rgba(27, 20, 24, 0.15);
  padding: 0 0 10px;
}
.searchform-fieldset:focus-within { border-bottom-color: rgba(27, 20, 24, 0.4); }
.zen-search-icon { width: 24px; height: 24px; flex-shrink: 0; color: #3b3b3b; stroke-width: 2.4; }
.searchform-input {
  width: 100%; border: 0 !important; border-radius: 0; background: transparent; outline: none; box-shadow: none !important;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 20px; font-weight: 500; color: var(--z-ink);
  padding: 0;
}
.searchform-input::placeholder { text-transform: uppercase; letter-spacing: 0.05em; font-size: 20px; font-weight: 500; color: #4a4a4a; opacity: 1; }
.searchform-button { display: none; }
.ajaxfinder {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 90;
  background: #fff; border: 1px solid var(--z-sand); border-radius: 12px;
  box-shadow: var(--z-shadow-card);
  max-height: 60vh; overflow-y: auto;
  padding: 8px;
}
.ajaxfinder a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.ajaxfinder a:hover { background: var(--z-cream); color: var(--z-plum-700); }
.ajaxfinder img { border-radius: 8px; }

.zen-headright { margin-left: auto; display: flex; align-items: center; gap: 24px; }
/* heart + basket sit as a tight pair, nudged right of the contact details */
.zen-wish { margin-left: 10px; }
.zen-wish + .cart { margin-left: -12px; }

.zen-contact { line-height: 1.3; color: var(--z-ink); }
.zen-contact p { margin: 0; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.zen-contact p + p { margin-top: 4px; font-size: 11.5px; }
.zen-contact svg { width: 15px; height: 15px; color: rgba(27, 20, 24, 0.7); flex-shrink: 0; }
.zen-contact a { color: var(--z-ink); }
.zen-contact a:hover { color: var(--z-rose-500); }
@media (max-width: 1199px) { .zen-contact { display: none; } }

/* basket -tote icon with green count badge */
/* wishlist heart beside the basket */
.zen-wish { position: relative; left: 10px; display: flex; align-items: center; color: var(--z-rose-500); transition: color 0.2s; }
.zen-wish:hover { color: var(--z-plum-800); }
.zen-wish svg { width: 29px; height: 29px; }
.zen-wish-count {
  position: absolute; top: -4px; right: -8px;
  display: flex; align-items: center; justify-content: center;
  height: 18px; width: 18px; border-radius: 999px;
  background: var(--z-rose-500); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
}

.cart { position: relative; }
.cart-button { position: relative; display: flex; align-items: center; color: var(--z-rose-500); }
.cart-button:hover { color: var(--z-plum-800); }
.zen-tote { width: 32px; height: 32px; }
.minibasket-items {
  position: absolute; top: -4px; right: -8px;
  display: flex; align-items: center; justify-content: center;
  height: 18px; width: 18px; border-radius: 999px;
  background: var(--z-rose-500); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
}
#basket_total { display: none; }
#basketcontents { position: absolute; right: 0; top: 100%; z-index: 80; min-width: 320px; }

/* dropdown basket panel (basket_ajax.tpl) */
.ss_basket { background: #fff; border: 1px solid var(--z-sand); border-radius: 14px; box-shadow: var(--z-shadow-card); overflow: hidden; text-align: left; }
.ss_basket_scroll { max-height: 320px; overflow-y: auto; }
.ss_basket_product { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--z-sand); font-size: 13px; }
.ss_basket_product .left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; }
.ss_basket_product .image img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--z-cream); }
.ss_basket_product .details { line-height: 1.35; }
.ss_basket_product .right { display: flex; align-items: center; gap: 8px; }
.ss_basket_product .price { font-weight: 700; color: var(--z-plum-800); }
.ss_basket_product.outofstock { background: var(--z-blush); }
.ss_remove img { width: 14px; height: 14px; }
#ss_basket_price { padding: 10px 14px; background: var(--z-cream); font-size: 13px; }
#ss_basket_price strong { color: var(--z-plum-800); }
#ss_basket_checkout { padding: 12px 14px; }
.ss_checkout { display: flex; gap: 8px; flex-wrap: wrap; }
.ss_checkout .ss_button { flex: 1 1 auto; font-size: 12px; padding: 9px 14px; }
.ss_button__basket { background: var(--z-sand) !important; color: var(--z-plum-800) !important; }
.ss_button__basket:hover { background: var(--z-gold-400) !important; }

/* mobile pull buttons */
.pull { display: none; }
@media (max-width: 999px) {
  .pull {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    border: 1px solid var(--z-sand); border-radius: 999px;
    padding: 7px 14px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--z-plum-800); cursor: pointer;
    background: #fff;
  }
  .pull.active-pull { background: var(--z-plum-800); color: #fff; }

  /* hamburger: bare icon, sits top-right next to the basket.
     row gap is 10px, so -8.5px left margin leaves a 1.5px gap to the basket;
     -6px right margin tucks the pair closer to the screen edge */
  .pull-menu {
    font-size: 0; padding: 4px; border: 0; background: transparent;
    color: var(--z-ink); order: 3;
    margin-left: -8.5px;
    margin-right: -6px;
  }
  .pull-menu svg { width: 26px; height: 26px; display: block; }
  .pull-menu.active-pull { background: transparent; color: var(--z-rose-500); }
  /* basket pull is a bare icon - no pill outline */
  .pull-basket {
    font-size: 0; letter-spacing: 0; gap: 0;
    padding: 4px; border: 0; background: transparent;
    color: var(--z-rose-500);
    margin-right: 0;
  }
  .pull-basket .zen-tote { width: 26px; height: 26px; display: block; }
  .pull-minicount {
    display: none; position: absolute; top: -6px; right: -6px;
    height: 18px; width: 18px; border-radius: 999px;
    background: var(--z-rose-500); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; text-indent: 0;
  }
  /* logo left, icons pushed to the right edge, search on its own row */
  .zen-headrow { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 10px; align-items: center; }
  .zen-logo { order: 1; margin-right: auto; }
  .zen-logo img { height: 48px; }
  .zen-headright { order: 2; gap: 14px; }
  .pull-basket { order: 2; }
  /* search stays open on mobile, so the toggle button is not needed */
  .zen-search { flex: 1 1 100%; max-width: none; order: 10; display: block; }
  .searchform { display: block !important; padding: 4px 0 10px; }
  .pull-search { display: none !important; }
  .cart { display: none; }
}

/* --------------------------------------------------------------------------
   7. NAV
   -------------------------------------------------------------------------- */
.navigation { border-top: 0; border-bottom: 1px solid rgba(27, 20, 24, 0.1); background: #fff; padding-top: 14px; }
.navigation-ul { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; }
.nav-toplevel { position: relative; }
.nav-toplevel-link {
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap; padding: 10px 0 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--z-ink);
}
@media (min-width: 1200px) { .nav-toplevel-link { font-size: 14px; } }
@media (min-width: 1400px) { .nav-toplevel-link { font-size: 15px; } }
.nav-toplevel:hover > .nav-toplevel-link { color: var(--z-rose-500); }
.nav-toplevel.canopen > .nav-toplevel-link::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 1.6px solid var(--z-ink); border-bottom: 1.6px solid var(--z-ink);
  transform: rotate(45deg) translateY(-3px); transition: transform 0.2s, border-color 0.2s;
}
.nav-toplevel.canopen:hover > .nav-toplevel-link::after { border-color: var(--z-rose-500); transform: rotate(-135deg) translateY(1px); }

/* little flag tags above a nav item (e.g. SHOP BY / HOT) */
.nav-tag {
  position: absolute; top: -14px; left: 0; z-index: 2;
  display: inline-block; padding: 2.5px 7px;
  background: #0d6e6e; color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.nav-tag::after {
  content: ""; position: absolute; top: 100%; left: 9px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid #0d6e6e;
}
.nav-tag--hot { background: #b01e3e; }
.nav-tag--hot::after { border-top-color: #b01e3e; }

@media (min-width: 1000px) {
  .submenu {
    display: none;
    position: absolute; top: 100%; left: 0; z-index: 50;
    width: 240px; max-height: 70vh; overflow-y: auto;
    background: #fff; border: 1px solid var(--z-sand);
    border-radius: 12px; box-shadow: var(--z-shadow-card); padding: 8px;
    text-align: left;
  }
  .nav-toplevel:hover > .submenu { display: block; }
  .nav-toplevel.last .submenu, .nav-toplevel:nth-last-child(-n+4) .submenu { left: auto; right: 0; }
  .submenu .nav-sublevel-heading { padding: 8px 12px 4px; }
  .submenu .nav-sublevel-heading a { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--z-plum-800); }
  .submenu .nav-sublevel a {
    display: block; border-radius: 8px; padding: 8px 12px;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--z-mute);
  }
  .submenu .nav-sublevel a:hover { background: var(--z-cream); color: var(--z-plum-700); }
  .submenu .nav-image, .submenu .sublevel-image { display: none; }
}

@media (max-width: 999px) {
  .navigation { border-top: 0; padding-top: 0; }
  .navigation-ul { display: none; flex-direction: column; align-items: stretch; border-top: 1px solid var(--z-sand); }
  /* tags sit inline on the right of the row instead of floating above */
  .nav-tag { position: static; float: right; margin: 12px 16px 0 0; }
  .nav-tag::after { display: none; }
  .nav-toplevel { border-bottom: 1px solid var(--z-sand); }
  .nav-toplevel-link { padding: 12px 16px; font-size: 13px; font-weight: 600; }
  .submenu { display: none; padding: 0 16px 10px; }
  .nav-toplevel.open .submenu { display: block; }
  .submenu .nav-sublevel a, .submenu .nav-sublevel-heading a { display: block; padding: 7px 0; font-size: 12px; text-transform: uppercase; color: var(--z-mute); }
  .submenu .nav-image, .submenu .sublevel-image { display: none; }
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.zen-hero-banner { display: block; width: 91.666%; margin: 12px auto 0; }
.zen-hero-single { display: block; position: relative; overflow: hidden; border-radius: 12px; }
.zen-hero-single img { display: block; width: 100%; height: auto; }

/* full-bleed hero on phones so the banner reads at a usable size */
@media (max-width: 999px) {
  .zen-hero-banner { width: 100%; margin-top: 0; }
  .zen-hero-single, .zen-hero-banner .rslides { border-radius: 0; }
}

#slider_holder { background: transparent; position: relative; }
.zen-hero-banner .rslides { position: relative; overflow: hidden; border-radius: 12px; }
.rslides { position: relative; overflow: hidden; list-style: none; }
.rslides li { position: absolute; display: none; width: 100%; left: 0; top: 0; }
.rslides li:first-child { position: relative; display: block; float: left; width: 100%; }
.rslides img { display: block; width: 100%; height: auto; }

.banner_overlay { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; z-index: 5; }
.banner_overlay__left { left: 0; right: 35%; }
.banner_overlay__right { right: 0; left: 35%; }
.banner_overlay .inner { padding: 24px 48px; }
.banner_title { font-size: 34px; font-weight: 700; margin: 0 0 8px; line-height: 1.1; }
.banner_text { font-size: 15px; margin: 0 0 14px; }
.banner_button {
  display: inline-block; background: var(--z-gold-500); color: var(--z-plum-900) !important;
  border-radius: 999px; padding: 10px 26px; font-size: 13px; font-weight: 600;
}
.banner_button:hover { background: var(--z-gold-400); }

.rslides_nav {
  position: absolute; top: 45%; z-index: 30;
  height: 38px; width: 38px; border-radius: 999px;
  background: rgba(255,255,255,0.85); color: var(--z-plum-800);
  text-align: center; line-height: 38px; font-size: 20px; overflow: hidden;
}
.rslides_nav.prev { left: 14px; }
.rslides_nav.next { right: 14px; }
.rslides_tabs { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 30; text-align: center; }
.rslides_tabs li { display: inline-block; margin: 0 4px; }
.rslides_tabs a { display: inline-block; height: 9px; width: 9px; border-radius: 999px; background: rgba(255,255,255,0.55); overflow: hidden; text-indent: -999px; }
.rslides_tabs .rslides_here a { background: var(--z-gold-500); }

/* --------------------------------------------------------------------------
   9. HOMEPAGE SECTIONS (tiles, USP, section heads, marquee, testimonials, CTA)
   -------------------------------------------------------------------------- */
.zen-tile-grad { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.zen-grad-rose { background: linear-gradient(to right, rgba(225,29,116,0.9), rgba(225,29,116,0.5), transparent); }
.zen-grad-plum { background: linear-gradient(to right, rgba(42,7,48,0.9), rgba(61,10,63,0.5), transparent); }
.zen-grad-gold { background: linear-gradient(to right, rgba(169,132,47,0.9), rgba(201,162,75,0.5), transparent); }
.zen-grad-emerald { background: linear-gradient(to right, rgba(4,120,87,0.92), rgba(5,150,105,0.55), transparent); }
.zen-section { padding: 40px 0; }
@media (min-width: 768px) { .zen-section { padding: 56px 0; } }

.zen-sechead { margin-bottom: 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.zen-sechead--center { display: block; text-align: center; margin-bottom: 28px; }
.zen-eyebrow { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--z-rose-500); }
.zen-title { font-family: var(--z-font-display); font-size: 24px; font-weight: 700; color: var(--z-plum-800); margin: 4px 0 0; }
@media (min-width: 768px) { .zen-title { font-size: 36px; } }
.zen-sechead--center .zen-title { font-size: 30px; }
@media (min-width: 768px) { .zen-sechead--center .zen-title { font-size: 36px; } }
.zen-sub { margin: 8px 0 0; max-width: 576px; font-size: 14px; color: var(--z-mute); }
.zen-sechead--center .zen-sub { margin-left: auto; margin-right: auto; }
.zen-sechead--center .zen-divider { margin-left: auto; margin-right: auto; }

/* centred row heading (product sections) */
.zen-rowtitle {
  font-family: var(--z-font-body) !important; text-align: center;
  font-size: 23px; font-weight: 500; letter-spacing: 0;
  color: #1f1f1f; margin: 0 0 26px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) { .zen-rowtitle { font-size: 28px; } }

/* five across for the offers row */
@media (min-width: 1000px) {
  .zen-carousel--5 .zen-carousel-track > .item { flex-basis: calc(20% - 16px); }
}

/* carousel with side arrows */
.zen-carousel { position: relative; }
.zen-carousel-track {
  display: flex; align-items: stretch; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 2px 2px 6px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.zen-carousel-track::-webkit-scrollbar { display: none; }
.zen-carousel-track > .item {
  flex: 0 0 calc(50% - 10px); scroll-snap-align: start;
  float: none; width: auto; margin: 0; padding: 0;
}
@media (min-width: 700px) { .zen-carousel-track > .item { flex-basis: calc(33.333% - 14px); } }
@media (min-width: 1000px) { .zen-carousel-track > .item { flex-basis: calc(25% - 15px); } }

.zen-carousel-btn {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 4;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: #111; color: #fff; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; transition: background 0.2s;
}
.zen-carousel-btn:hover { background: var(--z-rose-500); }
.zen-carousel-btn--prev { left: -46px; }
.zen-carousel-btn--next { right: -46px; }
@media (max-width: 1400px) {
  .zen-carousel-btn--prev { left: -6px; }
  .zen-carousel-btn--next { right: -6px; }
}

/* view all link */
.zen-viewall-wrap { text-align: center; margin-top: 40px; }
.zen-viewall-link {
  display: inline-block; padding-bottom: 7px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--z-ink); border-bottom: 3px solid var(--z-rose-500);
  transition: color 0.2s;
}
.zen-viewall-link:hover { color: var(--z-rose-500); }

.zen-sechead-side { display: flex; align-items: center; gap: 12px; }
.zen-viewall { display: none; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--z-plum-700); }
@media (min-width: 640px) { .zen-viewall { display: inline-flex; } }
.zen-viewall:hover { color: var(--z-rose-500); }
.zen-scroll-nav { display: flex; gap: 8px; }
.zen-scroll-nav button {
  display: grid; place-items: center; height: 36px; width: 36px;
  border-radius: 999px; border: 1px solid var(--z-sand); background: #fff;
  color: var(--z-plum-800); font-size: 18px; line-height: 1; cursor: pointer; transition: all 0.2s;
}
.zen-scroll-nav button:hover { background: var(--z-plum-800); color: #fff; }

/* 2-up promos */
.zen-promos { display: grid; gap: 20px; padding-top: 24px; padding-bottom: 24px; }
@media (min-width: 768px) { .zen-promos { grid-template-columns: repeat(2, 1fr); } }
.zen-promo { position: relative; overflow: hidden; border-radius: 24px; display: block; }
.zen-promo img { display: block; width: 100%; height: 256px; object-fit: cover; }
@media (min-width: 768px) { .zen-promo img { height: 288px; } }
.zen-promo-grad { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.zen-promo-content {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  max-width: 320px; padding: 28px;
}
@media (min-width: 768px) { .zen-promo-content { padding: 36px; } }
.zen-promo-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--z-gold-400); }
.zen-promo-title { font-family: var(--z-font-display); font-size: 24px; font-weight: 700; line-height: 1.15; color: #fff; }
@media (min-width: 768px) { .zen-promo-title { font-size: 30px; } }
.zen-promo-text { font-size: 14px; color: rgba(255,255,255,0.85); }
.zen-promo-btn {
  margin-top: 8px; width: fit-content;
  border-radius: 999px; background: #fff; color: var(--z-plum-800);
  padding: 10px 24px; font-size: 14px; font-weight: 600; transition: background 0.2s;
}
.zen-promo:hover .zen-promo-btn { background: var(--z-gold-400); }

/* newsletter CTA */
.zen-newsletter { padding: 56px 0; }
@media (min-width: 768px) { .zen-newsletter { padding: 64px 0; } }
.zen-newsletter-box {
  position: relative; overflow: hidden; border-radius: 24px;
  background: linear-gradient(135deg, var(--z-plum-800), var(--z-plum-700) 55%, var(--z-wine));
  padding: 32px 24px; text-align: center; color: #fff;
}
@media (min-width: 768px) { .zen-newsletter-box { padding: 56px; } }
.zen-newsletter-box::before, .zen-newsletter-box::after { content: ""; position: absolute; border-radius: 999px; filter: blur(40px); }
.zen-newsletter-box::before { top: -40px; right: -40px; height: 192px; width: 192px; background: rgba(201,162,75,0.2); }
.zen-newsletter-box::after { bottom: -48px; left: 40px; height: 160px; width: 160px; background: rgba(225,29,116,0.2); }
.zen-newsletter-box > * { position: relative; z-index: 1; }
.zen-newsletter-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; background: rgba(255,255,255,0.1);
  padding: 6px 16px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--z-gold-400);
}
.zen-newsletter h2 { margin: 16px 0 0; font-size: 30px; font-weight: 700; color: #fff; }
@media (min-width: 768px) { .zen-newsletter h2 { font-size: 36px; } }
.zen-newsletter p { margin: 8px auto 0; max-width: 520px; font-size: 14px; color: rgba(250,246,241,0.85); }
.zen-newsletter .zen-cta {
  display: inline-block; margin-top: 24px;
  border-radius: 999px; background: var(--z-gold-500); color: var(--z-plum-900);
  padding: 12px 28px; font-size: 14px; font-weight: 600; transition: background 0.2s;
}
.zen-newsletter .zen-cta:hover { background: var(--z-gold-400); }
.zen-newsletter .fine { margin-top: 12px; font-size: 11px; color: rgba(250,246,241,0.6); }

/* homepage SEO intro */
.home-intro { background: #fff; padding: 40px 0; }
.home-intro .heading { color: var(--z-plum-800); }
.home-intro .shop-intro { color: var(--z-mute); font-size: 14px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   10. PRODUCT CARDS (homepage rows + category/search grids)
   -------------------------------------------------------------------------- */
/* product grid -clean, borderless, centred */
.zen-pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
@media (min-width: 700px) { .zen-pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .zen-pgrid { grid-template-columns: repeat(4, 1fr); gap: 40px 28px; } }
.zen-pgrid > .item { float: none; width: auto; margin: 0; padding: 0; }

/* grid mode (category/search pages) */
.item { padding: 8px; }
@media (max-width: 767px) { .item.g03 { width: 50%; float: left; } }

.item-inner {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: transparent; border: 0;
  text-align: center;
}
.item.article { width: 100%; }
.item.article .item-inner { flex-direction: row; align-items: stretch; text-align: left; }
.item.article .zen-card-media { flex: 0 0 220px; }

.zen-card-media { position: relative; }
.item-imagebox { position: relative; background: #fff; overflow: hidden; }
.item-imagebox a.product { display: block; }
.item-image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; transition: transform 0.4s; }
.item-inner:hover .item-image.img-1 { transform: scale(1.04); }
.item-image.img-flip { display: none; }
.item-overlay { display: none; }

/* small square flags, top-left */
.zen-badges { position: absolute; top: 6px; left: 6px; z-index: 3; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.zen-badge {
  display: inline-block; border-radius: 3px; padding: 4px 9px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
  line-height: 1.2;
}
.zen-badge--new { background: #22b455; }
.zen-badge--sale { background: var(--z-rose-500); }

/* wishlist heart — fades in on hover, stays put once saved */
.item-wishlist {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: #fff; color: var(--z-ink);
  box-shadow: var(--z-shadow-soft);
  opacity: 0; transform: translateY(-5px);
  transition: opacity 0.22s, transform 0.22s, color 0.2s;
}
.item-wishlist svg { width: 18px; height: 18px; display: block; }
.item-inner:hover .item-wishlist { opacity: 1; transform: none; }
.item-wishlist:hover { color: var(--z-rose-500); }
.item-wishlist.in_wish_list { opacity: 1; transform: none; color: var(--z-rose-500); }
.item-wishlist.in_wish_list svg { fill: currentColor; }
@media (hover: none) { .item-wishlist { opacity: 1; transform: none; } }

/* saved/removed confirmation bubble */
.popup { display: none; }
.popup__wishlist {
  position: absolute; top: 52px; right: 8px; z-index: 6;
  max-width: 190px; text-align: left;
  background: #fff; border: 1px solid var(--z-sand); border-radius: 10px;
  box-shadow: var(--z-shadow-card);
  padding: 9px 12px; font-size: 11.5px; line-height: 1.5; color: var(--z-ink);
  cursor: pointer;
}
.popup__wishlist a { color: var(--z-rose-500); text-decoration: underline; }

/* quick view / add to bag reveal on hover so the grid stays clean */
.zen-quickview {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  border-radius: 999px; background: rgba(255,255,255,0.95);
  padding: 8px 0; text-align: center;
  font-size: 11px; font-weight: 600; color: var(--z-plum-800);
  box-shadow: var(--z-shadow-soft);
  opacity: 0; transform: translateY(12px); transition: all 0.25s;
}
.item-inner:hover .zen-quickview { opacity: 1; transform: translateY(0); }
.zen-quickview:hover { background: #fff; }

.zen-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 6px 0; text-align: center; }
.item.article .zen-card-body { padding: 16px 20px; text-align: left; }

/* brand / range line above the title */
.zen-card-brand {
  display: block; margin-bottom: 7px;
  font-size: 11.5px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
  color: #9a9a9a;
}

.item-heading { margin: 0; }
.item-heading a { font-size: 15px; font-weight: 400; line-height: 1.45; color: #222; }
.item-heading a:hover { color: var(--z-rose-500); }
.item-heading span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em; /* reserve 2 lines so prices sit on a common baseline */
}
.item.article .item-heading a { font-size: 16px; font-weight: 600; text-transform: none; }
.item.article .item-heading span { -webkit-line-clamp: unset; }

.item-desc { display: block; margin-top: 4px; font-size: 12px; color: var(--z-mute); line-height: 1.5; }

.zen-rating { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; }
.item.article .zen-rating { justify-content: flex-start; }
.zen-rating .zen-stars { color: #b9b9b9; font-size: 12px; letter-spacing: 1px; }
.zen-rating .zen-stars--rated { color: var(--z-gold-500); }
.item-reviews { font-size: 12.5px; color: #666; }

.item-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 14px; }
.item.article .item-price { justify-content: flex-start; }
.item-price span { font-size: 16px; font-weight: 700; color: var(--z-ink); }
.item-price del { font-size: 14px; color: var(--z-rose-500); font-weight: 500; }

.variant_images { margin-top: 8px; }
.variant_images ul { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.variant_images .thumb-item { display: inline-block; }
.variant_images img.thumb { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--z-sand); cursor: pointer; object-fit: cover; }

/* push the buy button to the foot of the card so every row lines up */
.item-buy-button { margin-top: auto; padding-top: 16px; }
.item-buy-button .button,
.item-buy-button input.button,
.item-buy-button button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 210px;
  padding: 13px 18px; font-size: 14px; font-weight: 500;
  background: var(--z-rose-500) !important; color: #fff !important;
  border: 0 !important; border-radius: 3px !important;
  cursor: pointer; transition: background 0.2s;
}
.item-buy-button .button svg { width: 17px; height: 17px; flex-shrink: 0; }
.item-buy-button .button:hover,
.item-buy-button input.button:hover,
.item-buy-button button.button:hover { background: var(--z-plum-800) !important; }
.item-buy-button .button__oos { background: var(--z-sand) !important; color: var(--z-mute) !important; cursor: default; }
.item-buy-button .button__oos:hover { background: var(--z-sand) !important; }

/* --------------------------------------------------------------------------
   11. CATEGORY / LISTING PAGES
   -------------------------------------------------------------------------- */
.sidebox {
  background: #fff; border: 1px solid var(--z-sand); border-radius: 14px;
  padding: 16px; margin-bottom: 16px; font-size: 13px;
}
.fs_sidebox { margin-bottom: 16px; }
.sidelist li { margin: 2px 0; }
.sidelist a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--z-mute); font-size: 13px; }
.sidelist a:hover { background: var(--z-cream); color: var(--z-plum-700); }
.sidelist .active, .sidelist .active a { background: var(--z-cream); color: var(--z-plum-800); font-weight: 600; border-radius: 8px; }
.filtersection { margin-bottom: 14px; }
.filterlink { display: block; padding: 5px 0; color: var(--z-mute); font-size: 13px; }
.filterlink:hover { color: var(--z-rose-500); }
.filterlink.icon-ok { color: var(--z-plum-800); font-weight: 600; }
.category-filter { margin-bottom: 10px; }
.input-text__filter { margin-bottom: 8px; }

/* category promo tiles (subcategory images etc.) */
.promos { padding: 24px 0; }
.promos__bg { background: var(--z-cream); }
.promo-inner { position: relative; border-radius: 16px; overflow: hidden; background: var(--z-plum-900); }
.promo-image { display: block; width: 100%; object-fit: cover; transition: transform 0.4s, opacity 0.4s; }
.promo-inner:hover .promo-image, a:hover > .promo-image { transform: scale(1.05); }
.promo-overlay, .promo-overlayX {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 16px;
  background: linear-gradient(to top, rgba(42,7,48,0.9), rgba(42,7,48,0.25) 55%, transparent);
}
.promo-title { color: #fff; font-family: var(--z-font-display); font-size: 18px; font-weight: 600; }
.promo-text { color: var(--z-gold-400); font-size: 12px; margin-top: 3px; }
.promo-button {
  display: inline-block; margin-top: 10px; align-self: flex-start;
  background: #fff; color: var(--z-plum-800);
  border-radius: 999px; padding: 8px 20px; font-size: 12px; font-weight: 600;
}
.promo-button:hover { background: var(--z-gold-400); }

/* sort / filter bars */
.list-sort, .sortbox { font-size: 13px; color: var(--z-mute); }

/* --------------------------------------------------------------------------
   12. PRODUCT PAGE
   -------------------------------------------------------------------------- */
.product-page { padding-top: 8px; }

/* ---- product detail layout ---- */
.zen-pdp { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) { .zen-pdp { grid-template-columns: 5fr 7fr; gap: 54px; } }

.zen-pdp-title {
  font-family: var(--z-font-body) !important;
  font-size: 23px; font-weight: 600; line-height: 1.34;
  text-transform: uppercase; letter-spacing: 0.005em; color: #1f1f1f;
  margin: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) { .zen-pdp-title { font-size: 26px; } }
.zen-pdp-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.zen-pdp-flag {
  flex-shrink: 0; margin-top: 4px;
  border: 1px solid var(--z-rose-500); color: var(--z-rose-500);
  padding: 5px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}

.zen-pdp-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 34px;
  margin-top: 16px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: #7a7a7a;
}
.zen-pdp-meta strong { color: var(--z-ink); font-weight: 700; }
.zen-pdp-meta .zen-pdp-brand { color: var(--z-rose-500); font-weight: 700; }
.zen-pdp-meta .zen-stars { color: #b9b9b9; letter-spacing: 1px; font-size: 12px; }
.zen-pdp-meta .zen-stars--rated { color: var(--z-gold-500); }
.zen-pdp-meta a { color: inherit; }
.zen-pdp-meta a:hover { color: var(--z-rose-500); }

.zen-rule { border: 0; border-top: 1px solid #e8e8e8; margin: 24px 0; }

.zen-pdp-sub {
  font-family: var(--z-font-body) !important;
  font-size: 16.5px; font-weight: 700; line-height: 1.45; letter-spacing: 0;
  color: #1f1f1f; margin: 0 0 14px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.zen-pdp-desc { font-family: var(--z-font-body); font-size: 14.5px; line-height: 1.75; color: #666; }
.zen-pdp-desc p { margin: 0 0 10px; }
.zen-pdp-more { color: var(--z-rose-500); cursor: pointer; }
.zen-pdp-more:hover { text-decoration: underline; }
.zen-pdp-desc-full { display: none; }
.zen-pdp-desc-full.open { display: block; }

/* label + control rows (SIZE / QTY / SELECTED) */
.zen-pdp-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.zen-pdp-label {
  flex: 0 0 74px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: #7a7a7a;
}
.zen-pdp-rowbody { flex: 1 1 auto; min-width: 0; }
.zen-pdp-stock { font-size: 14px; color: #555; }
.zen-pdp-selected { font-size: 14px; color: var(--z-ink); }

/* variant controls (platform-rendered) restyled as outlined chips */
.variants { margin: 0; }
.variants .subheading, .variant .subheading {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: #7a7a7a; margin: 0 0 8px; font-family: inherit;
}
.variants select, .variant select {
  max-width: 260px; border: 1px solid #ddd; border-radius: 3px;
  padding: 9px 12px; font-size: 13px;
}
.variants label {
  display: inline-block; border: 1px solid #ddd; border-radius: 3px;
  padding: 8px 15px; margin: 0 6px 6px 0;
  font-size: 12px; color: var(--z-rose-500); cursor: pointer;
  transition: all 0.15s;
}
.variants label:hover { border-color: var(--z-rose-500); }
.variants label.activeselector, .variants .variant_label__active {
  border-color: var(--z-rose-500); background: var(--z-blush); color: var(--z-rose-500);
}
.variants label.disabled_variant { opacity: 0.4; color: #999; cursor: not-allowed; text-decoration: line-through; }
.variants input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.variants table td { padding: 0; border: 0; }

/* quantity stepper */
.zen-qty { display: inline-flex; align-items: stretch; }
.zen-qty button {
  width: 44px; background: #fff; border: 1px solid #ddd; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--z-ink); transition: all 0.15s;
}
.zen-qty button:hover { border-color: var(--z-rose-500); color: var(--z-rose-500); }
.zen-qty input {
  width: 54px; text-align: center; border: 1px solid #ddd; border-left: 0; border-right: 0;
  border-radius: 0; padding: 11px 0; font-size: 15px; font-weight: 600;
  -moz-appearance: textfield;
}
.zen-qty input::-webkit-outer-spin-button, .zen-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zen-qty input:focus { box-shadow: none; border-color: #ddd; }

/* price + add to cart */
.zen-pdp-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.zen-pdp-price { font-size: 28px; font-weight: 700; color: var(--z-ink); white-space: nowrap; }
.zen-pdp-price del { display: block; font-size: 14px; font-weight: 400; color: var(--z-mute); }
.zen-pdp-price.is-sale .productprice { color: var(--z-rose-500); }
.zen-pdp-buy .button__a2b, .zen-pdp-buy input.button__a2b {
  flex: 1 1 260px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--z-rose-500) !important; color: #fff !important;
  border: 0 !important; border-radius: 3px !important;
  padding: 18px 26px; font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
}
.zen-pdp-buy .button__a2b:hover { background: var(--z-plum-800) !important; }
.zen-pdp-buy .button__a2b svg { width: 19px; height: 19px; }
.zen-pdp-wish {
  flex-shrink: 0; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 999px;
  color: #999; transition: color 0.2s;
}
.zen-pdp-wish svg { width: 22px; height: 22px; }
.zen-pdp-wish:hover, .zen-pdp-wish.in_wish_list { color: var(--z-rose-500); }
.zen-pdp-wish.in_wish_list svg { fill: currentColor; }

.zen-pdp-oos {
  background: var(--z-cream); border: 1px solid var(--z-sand); border-radius: 6px;
  padding: 14px 16px; font-size: 14px; line-height: 1.6;
}
.zen-pdp-oos a { color: var(--z-rose-500); }

/* extra info blocks lower down */
.zen-pdp-extra { margin-top: 30px; }
.zen-pdp-extra .subheading { font-family: inherit; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--z-ink); margin-bottom: 10px; }
.product-photo { position: relative; border: 1px solid var(--z-sand); border-radius: 16px; overflow: hidden; background: var(--z-cream); }
.product-photo img { display: block; width: 100%; }
.productimages { position: relative; }

/* gallery prev/next arrows over the main product image */
.f-main { position: relative; }
.zen-gal-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255,255,255,0.92); border: 1px solid var(--z-sand);
  color: var(--z-ink); font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: var(--z-shadow-soft);
  opacity: 0; transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.f-main:hover .zen-gal-btn, .product-photo:hover ~ .zen-gal-btn { opacity: 1; }
.zen-gal-btn:hover { background: var(--z-rose-500); color: #fff; border-color: var(--z-rose-500); }
.zen-gal-btn--prev { left: 10px; }
.zen-gal-btn--next { right: 10px; }
.zen-gal-btn[hidden] { display: none; }
@media (hover: none) { .zen-gal-btn { opacity: 1; } }

.f-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.f-images li { border: 1px solid var(--z-sand); border-radius: 10px; overflow: hidden; cursor: pointer; }
.f-images li:hover { border-color: var(--z-plum-800); }
.f-thumb, .thumb { display: block; }
.product-thumbs img { border-radius: 10px; }
.jcwrapper { position: relative; overflow: hidden; }
.jcarousel-nav {
  display: inline-grid; place-items: center;
  height: 32px; width: 32px; border-radius: 999px;
  background: #fff; border: 1px solid var(--z-sand); color: var(--z-plum-800);
  font-size: 16px; cursor: pointer;
}
.jcarousel-nav:hover { background: var(--z-plum-800); color: #fff; }

.productprice, .item-price__product { font-size: 30px; font-weight: 700; color: var(--z-plum-800); margin: 10px 0; display: block; }
.item-price__product del { font-size: 16px; color: var(--z-mute); font-weight: 400; margin-right: 8px; }
.item-price__product.item-sale, .productprice .item-sale { color: var(--z-rose-500); }

.variants { margin: 14px 0; }
.variant_wrapper { margin-bottom: 10px; }
.variant, .variants select { max-width: 320px; }
.variants table td { padding: 4px 8px; border: 0; }
.variants label {
  display: inline-block; border: 1px solid var(--z-sand); border-radius: 999px;
  padding: 7px 16px; margin: 3px 4px 3px 0; font-size: 13px; cursor: pointer;
  transition: all 0.15s;
}
.variants label:hover { border-color: var(--z-plum-800); }
.variants label.activeselector, .variants .variant_label__active {
  background: var(--z-plum-800); color: #fff; border-color: var(--z-plum-800);
}
.variants input[type="radio"] { position: absolute; opacity: 0; }

.quantity-item { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.qty-label { font-size: 13px; font-weight: 600; }
.qty-input { width: 76px; text-align: center; }

.info-small { font-size: 12px; color: var(--z-mute); }

/* tabs / info boxes */
.tab {
  display: inline-block; padding: 9px 20px; margin: 0 6px 0 0;
  border: 1px solid var(--z-sand); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--z-mute); cursor: pointer;
  transition: all 0.15s;
}
.tab:hover { color: var(--z-plum-800); border-color: var(--z-plum-800); }
.tab_active { background: var(--z-plum-800); color: #fff; border-color: var(--z-plum-800); }
.infoboxx { display: none; padding: 18px 0; line-height: 1.7; }
.ib_active { display: block; }
.infobox { padding: 12px 0; }
.infobox-nav { display: flex; gap: 8px; margin-bottom: 14px; }
.infobox-nav li a {
  display: inline-block; padding: 9px 20px;
  border: 1px solid var(--z-sand); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--z-mute); cursor: pointer;
}
.infobox-nav li.active a { background: var(--z-plum-800); color: #fff; border-color: var(--z-plum-800); }

.expander h2 { cursor: pointer; }

/* ---- category filter rail: panel headings ("Refine your search" / "Filter results") ---- */
.heading_expander {
  font-family: var(--z-font-display);
  font-size: 15px; font-weight: 600; color: var(--z-plum-800);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--z-sand);
}
.sidebar_filters { margin-bottom: 20px; }

/* ---- price range: min/max inputs sit inline, compact ---- */
.sidebox .fs_sidebox .input-text.g03 {
  display: inline-block; width: 66px; text-align: center; padding: 7px 8px;
}
.sidebox .fs_sidebox .label.grid { display: inline-block; width: auto; float: none; }

/* ---- price slider: skin the default grey jQuery-UI widget in Zenith rose ---- */
#slider-range.ui-slider {
  height: 5px; margin: 16px 4px 8px; border: 0;
  background: var(--z-sand) !important; border-radius: 999px;
}
#slider-range .ui-slider-range {
  background: var(--z-rose-500) !important; border: 0; border-radius: 999px;
}
#slider-range .ui-slider-handle {
  width: 18px; height: 18px; top: -7px; margin-left: -9px;
  background: #fff !important; border: 2px solid var(--z-rose-500) !important;
  border-radius: 50%; cursor: grab; outline: none;
  box-shadow: var(--z-shadow-soft);
}
#slider-range .ui-slider-handle.ui-state-active,
#slider-range .ui-slider-handle:focus { border-color: var(--z-plum-800) !important; cursor: grabbing; }

/* reviews */
.product-reviews { margin-top: 24px; }
.review_1::after, .review_2::after, .review_3::after, .review_4::after, .review_5::after {
  color: var(--z-gold-500); letter-spacing: 1px; margin-left: 6px;
}
.review_1::after { content: "\2605\2606\2606\2606\2606"; }
.review_2::after { content: "\2605\2605\2606\2606\2606"; }
.review_3::after { content: "\2605\2605\2605\2606\2606"; }
.review_4::after { content: "\2605\2605\2605\2605\2606"; }
.review_5::after { content: "\2605\2605\2605\2605\2605"; }
.commentslist { margin: 14px 0; }
.commentslist li, .ss_commentcontainer {
  background: var(--z-cream); border: 1px solid var(--z-sand); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; font-size: 14px;
}

.zoom { position: relative; display: block; }

/* --------------------------------------------------------------------------
   13. BASKET / CHECKOUT / ACCOUNT
   -------------------------------------------------------------------------- */
.ss_basket_full_item { border-bottom: 1px solid var(--z-sand); padding: 12px 0; }
.ss_basket_full_item img { border-radius: 10px; background: var(--z-cream); }
.ss_basket_amount .input-text { width: 64px; text-align: center; }
.ss_basket_subtotal, .ss_basket_totalprice { font-weight: 700; color: var(--z-plum-800); }
.ss_basket_total { font-size: 18px; font-weight: 700; color: var(--z-plum-800); }
.ss_basket_price { font-weight: 600; }
.ss_basket_product_detail { font-size: 13px; color: var(--z-mute); }

.ss_header_thick, .ss_header_thin {
  background: var(--z-cream); border: 1px solid var(--z-sand); border-radius: 10px;
  padding: 10px 14px; margin: 14px 0 10px;
  font-weight: 600; color: var(--z-plum-800);
}
.ss_checkout_infobox {
  background: #fff; border: 1px solid var(--z-sand); border-radius: 14px;
  padding: 16px; margin-bottom: 14px;
}
.ss_checkout_itemprice { color: var(--z-plum-800); font-weight: 600; }
.ss_num {
  display: inline-grid; place-items: center; height: 28px; width: 28px;
  border-radius: 999px; background: var(--z-plum-800); color: #fff;
  font-size: 13px; font-weight: 700; margin-right: 8px;
}
a.ss_change_order {
  display: inline-block; background: var(--z-sand); color: var(--z-plum-800) !important;
  border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600;
}
.ss_option { display: block; border: 1px solid var(--z-sand); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.ss_option:hover, .ss_option.ss_activated { border-color: var(--z-plum-800); background: var(--z-cream); }
.ss_order_history td { font-size: 13px; }

/* --------------------------------------------------------------------------
   14. BLOG / NEWS
   -------------------------------------------------------------------------- */
.news-article { display: block; }
.news-date { font-size: 12px; color: var(--z-rose-500); font-weight: 600; }
.news-title { font-family: var(--z-font-display); font-size: 18px; font-weight: 600; color: var(--z-plum-800); margin: 4px 0; }
.article_byline { font-size: 12px; color: var(--z-mute); margin-bottom: 12px; }
.article_content, .page_post_content { line-height: 1.7; }
.blogpostdetails { margin-bottom: 16px; }
.ss_blogrightcolumn .sidebox { font-size: 13px; }
.ss_blogcommentform .input-text { margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   15. FOOTER -Pak-style: newsletter strip, white footer, centred bottom bar
   -------------------------------------------------------------------------- */
.zen-newsbar { background: #eef3f7; padding: 26px 0; }
.zen-newsbar-inner { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.zen-newsbar-label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--z-ink); }
.zen-newsbar-form { display: flex; align-items: center; gap: 18px; }
.zen-newsbar-form input {
  width: 340px; max-width: 60vw;
  background: #fff; border: 1px solid #ccc; border-radius: 2px;
  padding: 12px 14px; font-size: 12px; letter-spacing: 0.03em;
}
.zen-newsbar-form input::placeholder { text-transform: uppercase; color: #666; opacity: 1; }
.zen-newsbar-form input:focus { border-color: #999; box-shadow: none; }
.zen-newsbar-btn {
  background: transparent; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--z-ink); padding: 6px 2px 8px;
  border-bottom: 3px solid var(--z-green);
}
.zen-newsbar-btn:hover { color: var(--z-green); }
.zen-newsbar-socials { display: flex; align-items: center; gap: 22px; margin-left: 24px; }
.zen-newsbar-socials a { color: #777; }
.zen-newsbar-socials a:hover { color: var(--z-ink); }
.zen-newsbar-socials svg { width: 17px; height: 17px; display: block; }

#footer { background: #fff; color: var(--z-ink); padding: 44px 0 0; }
.zen-footgrid { display: grid; gap: 36px; }
@media (min-width: 768px) { .zen-footgrid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; } }
.zen-footcol-brand { max-width: 380px; }
#footer .footer-logo img { height: 64px; width: auto; object-fit: contain; }
.zen-footer-blurb { margin: 18px 0 0; font-size: 14px; line-height: 1.75; color: #444; }

.zen-payrow { margin-top: 24px; }
.zen-payrow img { display: block; width: 100%; max-width: 320px; height: auto; }

#footer .heading-footer {
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--z-ink);
  margin: 4px 0 20px;
}
#footer .footer-list { margin: 0; }
#footer .footer-link-item { margin: 0 0 13px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.5; }
#footer .footer-link, #footer .footer-link-item a { color: #555; }
#footer .footer-link:hover, #footer .footer-link-item a:hover { color: var(--z-rose-500); }

.zen-footbottom { margin-top: 40px; border-top: 1px solid #eee; padding: 22px 0 26px; text-align: center; }
.zen-copy { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #555; margin: 0; }
.zen-legal { margin: 8px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.zen-legal a { color: #555; text-decoration: underline; margin: 0 8px; }
.zen-legal a:hover { color: var(--z-rose-500); }

/* --------------------------------------------------------------------------
   16. MISC MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .zen-title { font-size: 24px; }
  .banner_title { font-size: 20px; }
  .banner_text { display: none; }
  .banner_overlay .inner { padding: 12px 20px; }
  .zen-newsletter-box { padding: 32px 16px; }
  .heading { font-size: 22px; }
  .item.article .item-inner { flex-direction: column; }
  .item.article .zen-card-media { flex: none; }
}

/* --------------------------------------------------------------------------
   17. FLOATING WHATSAPP BUTTON
   -------------------------------------------------------------------------- */
.zen-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; padding: 0 15px;
  background: #25d366; color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 20px -4px rgba(37, 211, 102, 0.5), 0 2px 8px rgba(0,0,0,0.15);
  overflow: hidden;
  transition: gap 0.25s ease, padding 0.25s ease, background 0.2s;
}
.zen-wa svg { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.zen-wa-label {
  max-width: 0; opacity: 0; white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  transition: max-width 0.25s ease, opacity 0.2s ease;
}
.zen-wa:hover { background: #1eb855; gap: 10px; padding-right: 20px; }
.zen-wa:hover .zen-wa-label { max-width: 190px; opacity: 1; }
.zen-wa:focus-visible { outline: 3px solid rgba(37,211,102,.45); outline-offset: 3px; }

@media (max-width: 999px) {
  .zen-wa { right: 14px; bottom: 14px; height: 52px; padding: 0 13px; }
  .zen-wa svg { width: 28px; height: 28px; }
  /* no hover on touch - keep it a clean circle */
  .zen-wa:hover { gap: 0; padding-right: 13px; }
  .zen-wa:hover .zen-wa-label { max-width: 0; opacity: 0; }
}