@charset "UTF-8";
/* ==========================================================================
   Hachi Tobacco — theme stylesheet (hachi.scss)
   Compiled by Zoho Commerce after the base style.css (see template.conf).
   Written for the light-weight rule: no framework, no @import, tokens in CSS
   variables, logical properties (start/end) so the same rules serve EN + AR.

   Contents
     1  Tokens
     2  Template utilities (zcs_*) used by builder content
     3  Typography
     4  Trust strip, language pill, licensed line  (inside the header container)
     5  Header — desktop pill + cream menu strip
     6  Header — mobile
     7  Buttons (one cream style everywhere)
     8  Headings with a thin gold line
     9  Product cards + grids
    10  Homepage rows: heading link + "View all"
    11  Category tiles, banner, SEO block (store content hooks)
    12  Reviews: auto-scrolling strip
    13  Footer
    14  Floating contact stack + back-to-top
    15  Price glyph (AED), carousel fade, motion preferences
   ========================================================================== */
/* 1 — Tokens ------------------------------------------------------------- */
:root {
  --ht-ink: #150004;
  --ht-ink-2: #0d0703;
  /* headings */
  --ht-brown: #3b2417;
  /* text on cream / buttons */
  --ht-brown-2: #5c3a1c;
  --ht-hd-brown: #4f3622;
  /* header icons */
  --ht-gold: #946400;
  /* eyebrow, links */
  --ht-line: #a8873c;
  /* borders, gold line */
  --ht-cream: #f9f7f2;
  --ht-cream-2: #efe6d3;
  /* licensed line */
  --ht-btn: #eadcc0;
  --ht-btn-h: #e0cfaa;
  --ht-wine: #9b1c2e;
  /* prices, hover */
  --ht-green: #2fbf5b;
  --ht-blue: #1a73e8;
  /* language pill */
  --ht-footer: #1d231e;
  --ht-footer-top: #a8661a;
  --ht-shadow: 0 2px 10px rgba(21, 0, 4, .07);
  --ht-shadow-h: 0 10px 24px rgba(21, 0, 4, .14);
  --ht-sans: "Jost", "Segoe UI", Tahoma, sans-serif;
  --ht-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; }

/* 2 — Template utilities -------------------------------------------------- */
#notificationBar {
  position: relative !important;
  background: #7C5637 !important;
  border-block-start: 2px solid #000000; }

#notificationBar div {
  color: #ffffff !important;
  font-family: "'Montserrat',sans-serif" !important;
  font-weight: 300;
  text-shadow: none !important;
  font-size: 14px !important;
  padding-block: 4px !important; }

.theme-header .theme-neobrutalism-header {
  padding: 0;
  backdrop-filter: blur(40px);
  background: rgba(255, 255, 255, 0.4);
  padding-inline: 32px !important;
  border-radius: 100px;
  width: 100%;
  margin-inline: 44px;
  border-bottom: 0.2px solid #7C5637 !important; }

.theme-header .theme-neobrutalism-header [data-zs-menu-container] {
  justify-content: center !important;
  color: #000 !important; }

.theme-header.theme-header-animate {
  padding-block-start: 1.5rem; }

.theme-header-fixed.theme-header-animate .theme-header {
  background: transparent !important;
  box-shadow: none !important; }

.zcs_gap_20 {
  gap: 20px; }

.zcs_gap_20 .zpelem-col {
  flex-shrink: 1; }

.zcs_gap_4px p {
  display: flex;
  flex-direction: row;
  gap: 4px; }

.zcs_stretch {
  align-self: stretch; }

.zcs_stretch [data-element-type=box] {
  height: 100%; }

.zcs_position_relative {
  position: relative; }

.zcs_blur_btn {
  backdrop-filter: blur(20px);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }

.zcs_blur_btn .zpbutton-wrapper {
  justify-content: flex-end;
  text-decoration: underline; }

.zcs_blur_btn .zpbutton-wrapper svg {
  width: 10px;
  height: 10px; }

.zcs_anchor_col {
  position: absolute !important;
  bottom: 1.5rem;
  left: 50%;
  translate: -50% 0; }

.zcs_anchor_btn .zpbutton-wrapper {
  justify-content: flex-end;
  backdrop-filter: blur(40px); }

.zcs_anchor_btn .zpbutton-wrapper .zpbutton-icon {
  margin-inline: 0; }

.zcs_anchor_btn .zpbutton-wrapper .zpbutton-icon svg {
  width: 24px;
  height: 24px; }

.zcs_blur_btn.zcs_full_size {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }

.zcs_blur_btn.zcs_full_size .zpbutton-wrapper.zpbutton {
  justify-content: center;
  background-color: transparent !important; }

.zcs_accordion .zpaccordion-content, .zcs_accordion .zpaccordion {
  padding-inline: 0 !important; }

.zcs_accordion .zpaccordion {
  border-block-start: 0px !important;
  border-block-end: 1px solid !important; }

.zcs_slider_55 {
  flex-wrap: nowrap;
  overflow-x: scroll;
  gap: 56px; }

.zcs_slider_55 .zcs_slider_child {
  width: 55%; }

.zcs_line_height_24 {
  line-height: 24px; }

@media (min-width: 992px) {
  .zcs_collection .zpfilmstrip-title-container {
    margin-block-end: 56px !important; }
  .zcs_img_zoom:hover img {
    scale: 1.05; }
  .zcs_slider_55::-webkit-scrollbar {
    height: 2px; }
  .zcs_slider_55::-webkit-scrollbar-thumb {
    background-color: #7C5637;
    border-radius: 4px; }
  .zcs_img_zoom img {
    transition: all 0.3s linear; }
  .zcs_newsletter form {
    border-radius: 42.528px;
    border: 0.967px solid #D9D9D9;
    background: #FFF;
    width: max-content;
    margin-inline: auto;
    margin-block-start: 40px;
    padding: 5px;
    flex-wrap: nowrap !important; }
  .zcs_newsletter form input, .zcs_newsletter form button {
    margin-inline: 0 !important;
    margin-block: 0 !important;
    flex-shrink: 0; }
  .theme-responsive-search-and-cart-container {
    display: none; }
  .theme-header-fixed.theme-header-animate .theme-header {
    padding-block-start: 30px; } }

@media (max-width: 992px) {
  .zcs_mobile_center_align .zpheading, .zcs_mobile_center_align .zptext, .zcs_mobile_center_align .zpbutton-container, .zcs_mobile_center_align p {
    text-align: center !important;
    justify-content: center; }
  .zcs_mobile_left_align .zpheading, .zcs_mobile_left_align .zptext, .zcs_mobile_left_align .zpbutton-container, .zcs_mobile_left_align p {
    text-align: start !important; }
  .zcs_slider_55 {
    gap: 16px; }
  .zcs_slider_55 .zcs_slider_child {
    width: 100%; }
  .zcs_collection {
    margin-block-start: 0 !important; }
  .zcs_collection h2 {
    font-size: 48px !important;
    font-weight: 500;
    line-height: 56px; }
  .zcs_slider_three {
    flex-wrap: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #7C5637 transparent;
    padding-block-end: 40px;
    border-block-end: 1px solid #7C5637; }
  .zcs_slider_three .zpelem-col {
    max-width: 90%; }
  .zcs_slider_three::-webkit-scrollbar {
    height: 2px; }
  .zcs_slider_three::-webkit-scrollbar-track {
    background-color: #000000; }
  .zcs_slider_three::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 4px; }
  .zpheader-style-10.theme-header-fixed.theme-mobile-header-fixed.theme-pages-full-stretch.theme-mobile-header-style-01 {
    position: fixed;
    width: 100%;
    background: transparent; }
  .zpheader-style-10.theme-header-fixed.theme-mobile-header-fixed.theme-pages-full-stretch.theme-mobile-header-style-01 .theme-header-topbar, .zpheader-style-10.theme-header-fixed.theme-mobile-header-fixed.theme-pages-full-stretch.theme-mobile-header-style-01 .theme-header {
    background: transparent; }
  .theme-responsive-menu-area.theme-navigation-and-icons.zpcontainer.theme-hide-burgericon-cart-mobile {
    background: transparent;
    padding-inline: 0 !important;
    margin-inline: 0; }
  .theme-branding-info {
    margin-inline: auto; }
  .theme-header .theme-neobrutalism-header [data-zs-responsive-menu-area] {
    flex: 1; }
  .theme-header .theme-neobrutalism-header [data-zs-responsive-menu-area] [data-zp-burger-clickable-area] {
    margin-inline: 0; }
  .theme-header .theme-neobrutalism-header [data-zs-branding] {
    flex: 1;
    justify-content: center; }
  .theme-header .theme-neobrutalism-header .theme-minicart-icon {
    padding-inline-end: 0 !important; } }

[data-element-type=accordionheader] {
  border-block-end: 0.5px solid #78261A !important; }

[data-element-type=accordionheader] .zpaccordionicon {
  margin-inline-start: auto; }

.zpaccordion-active-content {
  border-block-end: 0.5px solid #78261A !important; }

.zpaccordion-active {
  border-block-end: 0px !important; }

/* 3 — Typography ---------------------------------------------------------- */
/* One sans family everywhere (builder blocks carry their own inline fonts), serif for headings. */
body, body *, body ::before, body ::after, body ::placeholder {
  font-family: var(--ht-sans) !important; }

body :is(h1, h2, h3, h4, h5, h6, .zpheading, .zpimage-heading, .zpicon-heading, .theme-section-heading, .theme-category-name, .hb-title, .htp-title, .ht-lx-head h2),
body :is(h1, h2, h3, h4, h5, h6, .zpheading, .zpimage-heading, .zpicon-heading, .theme-section-heading, .theme-category-name, .hb-title, .htp-title, .ht-lx-head h2) * {
  font-family: var(--ht-serif) !important;
  font-size-adjust: none !important; }

body .theme-product-name h1, body h3.htp-card-title,
html body .theme-footer-area, html body .theme-footer-area *, html body .theme-footer-area ::before, html body .theme-footer-area ::after {
  font-family: var(--ht-sans) !important; }

/* footer headings stay sans (html = beats the serif list above) */
body .theme-branding-info::before, body .theme-branding-info::after {
  font-family: Montserrat, sans-serif !important; }

/* Same x-height across Jost/fallbacks; never for Arabic (own metrics). */
body, body * {
  font-size-adjust: .49; }

html[lang^="ar"] *, html[lang^="ur"] *, html[lang^="zh"] * {
  letter-spacing: normal !important;
  font-size-adjust: none !important; }

/* Readability floors for small labels */
@media (max-width: 767px) {
  body :is(.ht-lang b, .ht-trust__s, .ht-lx-name, .zplight-ticker-item, .zplight-ticker-item strong, .hb-plabel, .theme-product-box-content .theme-product-price) {
    font-size: 12px !important; } }

@media (min-width: 768px) {
  body :is(.ht-lang b, .ht-trust__f, .ht-lx-name, .hb-eyebrow, .hb-plabel, .theme-sortby-label, .theme-sort-colon, .theme-custom-select-value, .theme-product-short-description) {
    font-size: 13px !important; } }

@media (max-width: 767px) {
  body .ht-trust__s {
    font-size-adjust: none !important; } }

img {
  height: auto; }

.zpimage-container, .zpimage-data-ref {
  min-height: 1px; }

/* 4 — Trust strip, language pill, licensed line --------------------------- */
.zpheader-style-10 > .ht-trust {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
  width: 100%;
  background: var(--ht-cream);
  border-block-end: 1px solid #eee7db;
  color: var(--ht-ink);
  font: 600 12.5px/1.2 Jost, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  min-height: 46px;
  padding: 8px 16px;
  gap: clamp(18px, 3.4vw, 56px); }

.ht-trust__i {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ht-ink);
  text-decoration: none;
  white-space: nowrap; }

.ht-trust__i::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: no-repeat center / 22px 22px; }

a.ht-trust__i {
  transition: color .18s ease; }

a.ht-trust__i:hover {
  color: var(--ht-gold); }

.ht-trust__s {
  display: none; }

@media (min-width: 768px) and (max-width: 991px) {
  .zpheader-style-10 > .ht-trust {
    gap: 16px;
    font-size: 11px;
    letter-spacing: .04em; }
  .ht-trust__i {
    gap: 6px; } }

@media (max-width: 767px) {
  .zpheader-style-10 > .ht-trust {
    justify-content: space-between;
    gap: 6px;
    height: 36px;
    min-height: 0;
    padding: 0 8px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none; }
  .ht-trust__i {
    gap: 3px;
    min-width: 0; }
  .ht-trust__i::before {
    width: 15px;
    height: 15px;
    background-size: 15px 15px; }
  .ht-trust__f {
    display: none; }
  .ht-trust__s {
    display: inline; } }

@media (max-width: 389px) {
  .zpheader-style-10 > .ht-trust {
    gap: 4px;
    padding: 0 6px;
    font-size: 9.5px; }
  .ht-trust__i {
    gap: 2px; }
  .ht-trust__i::before {
    width: 13px;
    height: 13px;
    background-size: 13px 13px; } }

@media (max-width: 339px) {
  .ht-trust__i::before {
    display: none; } }

.ht-trust__i[data-i="clock"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23946400' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

.ht-trust__i[data-i="shield"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23946400' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.4-3 7.8-7 9.5-4-1.7-7-5.1-7-9.5V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }

.ht-trust__i[data-i="medal"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23946400' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.6 14.2L7 21l5-3 5 3-1.6-6.8'/%3E%3Cpath d='M9.6 9l1.8 1.8L14.6 7.6'/%3E%3C/svg%3E"); }

.ht-trust__i[data-i="chat"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23946400' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20.5l1.7-5A8.5 8.5 0 1 1 21 11.5z'/%3E%3Cpath d='M9 11.5h.01M12 11.5h.01M15 11.5h.01'/%3E%3C/svg%3E"); }

/* Language pill (native Zoho language list; hidden when the store has one language) */
.ht-lang {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  font: 600 11px/1 Jost, sans-serif;
  letter-spacing: .04em;
  color: #24160d;
  text-transform: none; }

.ht-lang summary {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  list-style: none;
  cursor: pointer;
  background: var(--ht-blue);
  color: #fff;
  border: 1px solid #6ea8f5;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.32); }

.ht-lang summary::-webkit-details-marker {
  display: none; }

.ht-lang summary:hover {
  background: #1765cc; }

.ht-lang svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6; }

.ht-lang b {
  font-weight: 600;
  text-transform: uppercase; }

.ht-lang ul {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: 104px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fffdf8;
  border: 1px solid var(--ht-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(26, 115, 232, 0.18); }

.ht-lang li {
  margin: 0; }

.ht-lang a {
  display: block;
  padding: 8px 12px;
  border-radius: 5px;
  font: 500 13px/1.2 Jost, sans-serif;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  color: #24160d;
  text-decoration: none; }

.ht-lang a:hover, .ht-lang a:focus {
  background: #e8f0fe;
  color: var(--ht-blue);
  outline: 0; }

@media (max-width: 767px) {
  .ht-lang {
    position: relative;
    inset: auto;
    transform: none;
    flex: none;
    margin-inline-end: 2px; }
  .ht-lang summary {
    height: 22px;
    padding: 0 7px;
    gap: 4px; } }

@media (max-width: 389px) {
  .ht-lang summary {
    padding: 0 6px; } }

/* Licensed line */
.ht-lic {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 6px 14px;
  background: var(--ht-cream-2);
  color: #3a2210;
  border-block-end: 1px solid #ddd0b4;
  font: 500 13px/1.35 Jost, sans-serif;
  letter-spacing: .03em;
  text-align: center;
  text-wrap: balance; }

.ht-lic__d {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ht-green);
  box-shadow: 0 0 0 0 rgba(47, 191, 91, 0.65);
  animation: htLicPulse 1.6s ease-out infinite; }

.ht-lic__d {
  margin-inline-end: 8px;
  vertical-align: .08em; }

.ht-lic[lang="ar"] {
  letter-spacing: 0;
  font-size: 14px; }

@keyframes htLicPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 191, 91, 0.65);
    opacity: 1; }
  70% {
    box-shadow: 0 0 0 7px rgba(47, 191, 91, 0);
    opacity: .55; }
  100% {
    box-shadow: 0 0 0 0 rgba(47, 191, 91, 0);
    opacity: 1; } }

@media (max-width: 767px) {
  .ht-lic {
    font-size: 11.5px;
    padding: 5px 12px;
    letter-spacing: .02em; }
  .ht-lic[lang="ar"] {
    font-size: 12.5px; }
  .ht-lic__d {
    margin-inline-end: 6px; } }

/* 5 — Header, desktop ------------------------------------------------------ */
.theme-header-topbar {
  display: none !important; }

/* contact/social topbar is replaced by the strip above */
.zpheader-style-10 .theme-header.theme-header-animate {
  top: 0 !important; }

.theme-branding-info::after {
  color: var(--ht-brown-2) !important; }

@media (min-width: 993px) {
  .zpheader-style-10 .theme-header {
    position: relative;
    box-shadow: 0 4px 18px rgba(29, 35, 30, 0.06);
    padding-block-end: 39px; }
  /* room for the cream menu strip */
  .zpheader-style-10 .theme-header .zpcontainer.theme-neobrutalism-header {
    position: static;
    backdrop-filter: none; }
  /* no backdrop-filter: it would make the pill the containing block of the full-width strip */
  .theme-header .theme-neobrutalism-header .theme-menu-area[data-zp-nonresponsive-container] {
    position: absolute;
    inset: auto 0 1px;
    height: 38px;
    width: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--ht-cream);
    box-shadow: 0 8px 16px -8px rgba(59, 36, 23, 0.28);
    justify-content: center;
    align-items: stretch;
    z-index: 5; }
  .theme-header .theme-neobrutalism-header .theme-menu-area[data-zp-nonresponsive-container] .theme-menu {
    width: 100%;
    height: 38px; }
  .theme-header .theme-neobrutalism-header [data-zs-menu-container] {
    width: 100%;
    height: 38px;
    padding: 0 16px !important;
    box-sizing: border-box;
    justify-content: space-evenly !important;
    flex-wrap: wrap;
    align-items: stretch; }
  .theme-header .theme-neobrutalism-header [data-zs-menu-container] > li > a {
    padding: 11.5px 12px !important;
    height: 38px;
    box-sizing: border-box; }
  .theme-header .theme-neobrutalism-header [data-zs-menu-container] .theme-menu-content {
    font-size: 13.5px;
    line-height: 15px; }
  .theme-header .theme-neobrutalism-header [data-zs-menu-container] :is(a, .theme-menu-content, .theme-menu-name) {
    color: var(--ht-brown) !important; }
  .theme-header .theme-neobrutalism-header [data-zs-menu-container] .theme-sub-li-menu {
    border-color: var(--ht-brown) !important; }
  .theme-header .theme-neobrutalism-header [data-zs-menu-container] :is(li:hover, li.theme-menu-selected) > a,
  .theme-header .theme-neobrutalism-header [data-zs-menu-container] :is(li:hover, li.theme-menu-selected) > a :is(.theme-menu-content, .theme-menu-name) {
    color: var(--ht-wine) !important; }
  .theme-header .theme-neobrutalism-header [data-zs-menu-container] :is(li:hover, li.theme-menu-selected) > a .theme-sub-li-menu {
    border-color: var(--ht-wine) !important; }
  /* Search + account icons */
  .theme-header .theme-neobrutalism-header > [data-menu-and-search]:not(.theme-responsive-search-and-cart-container) {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 20px 0;
    align-items: center;
    box-sizing: border-box; }
  .theme-header .theme-neobrutalism-header .theme-search[data-zs-search-container] {
    display: none; }
  .theme-header .theme-neobrutalism-header .theme-neobrutal-search-field-container {
    display: flex !important;
    position: relative;
    align-self: center;
    flex: 1 1 560px;
    width: auto;
    min-width: 200px;
    max-width: 840px;
    height: 42px;
    margin: 0 auto;
    box-sizing: border-box;
    translate: none;
    overflow: visible;
    background: #fff;
    border: 1px solid var(--ht-line);
    border-radius: 100px;
    backdrop-filter: none;
    transition: none; }
  .theme-header .theme-neobrutal-search-field-container:focus-within {
    border-color: var(--ht-wine); }
  .theme-header .theme-neobrutal-search-field-container form {
    align-items: center;
    width: 100%;
    height: 100%; }
  .theme-header .theme-neobrutal-search-field-container form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 4px;
    padding-inline-start: 22px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ht-brown);
    box-sizing: border-box;
    outline: 0; }
  .theme-header .theme-neobrutal-search-field-container form input::placeholder {
    color: #6f5a4b;
    opacity: 1; }
  .theme-header .theme-neobrutal-search-field-container form button {
    flex: 0 0 48px;
    width: 48px;
    height: 100%;
    padding: 0; }
  .theme-header .theme-neobrutal-search-field-container form button svg path {
    fill: var(--ht-brown); }
  .theme-header .theme-neobrutalism-header .theme-search-cart-non-res {
    flex: 0 0 auto;
    width: auto;
    height: 76px;
    margin-inline: 28px 0;
    align-items: center; }
  .theme-header .theme-search-cart-non-res .theme-search-and-mini-cart-group {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto; }
  .theme-header .theme-search-cart-non-res .theme-nonresponsive-portal-position-two {
    display: flex;
    align-items: center;
    margin: 0; }
  .theme-header .theme-search-cart-non-res :is(.theme-mini-cart, .theme-portal-login.theme-portal-icon-enabled) {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    min-width: 46px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    color: var(--ht-hd-brown);
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none; }
  .theme-header .theme-search-cart-non-res .theme-minicart-icon {
    display: block;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important; }
  .theme-header .theme-search-cart-non-res :is(.theme-minicart-icon, .theme-portal-login.theme-portal-icon-enabled)::before {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 50% !important;
    top: 50% !important;
    width: 28px !important;
    height: 28px !important;
    margin: -14px 0 0 -14px !important;
    background: var(--ht-hd-brown) !important;
    mask: var(--ht-ico) center/28px 28px no-repeat !important;
    pointer-events: none !important;
    transition: background-color .15s; }
  .theme-header .theme-search-cart-non-res .theme-minicart-icon::before {
    --ht-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 8.2h13.6l-1 11.6a1.2 1.2 0 0 1-1.2 1.1H7.4a1.2 1.2 0 0 1-1.2-1.1z'/%3E%3Cpath d='M8.8 8.2V7a3.2 3.2 0 0 1 6.4 0v1.2'/%3E%3C/svg%3E"); }
  .theme-header .theme-search-cart-non-res .theme-portal-login.theme-portal-icon-enabled::before {
    --ht-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.9'/%3E%3Cpath d='M4.6 20.4c.7-3.9 3.6-6.2 7.4-6.2s6.7 2.3 7.4 6.2'/%3E%3C/svg%3E"); }
  .theme-header .theme-search-cart-non-res :is(.theme-minicart-icon, .theme-portal-login.theme-portal-icon-enabled)::after {
    content: none !important;
    display: none !important; }
  .theme-header .theme-search-cart-non-res .theme-mini-cart:hover .theme-minicart-icon::before,
  .theme-header .theme-search-cart-non-res .theme-portal-login.theme-portal-icon-enabled:is(:hover, :focus-within)::before {
    background: var(--ht-wine) !important; }
  .theme-header .theme-search-cart-non-res :is(.theme-minicart-icon, .theme-portal-login.theme-portal-icon-enabled):focus-visible {
    outline: 2px solid var(--ht-hd-brown);
    outline-offset: 6px;
    border-radius: 4px; }
  .theme-header .theme-search-cart-non-res .theme-portal-login.theme-portal-icon-enabled > svg {
    position: absolute;
    width: 28px;
    height: 28px;
    inset-inline-start: 50%;
    top: 50%;
    margin: -14px 0 0 -14px; }
  .theme-header .theme-search-cart-non-res .theme-portal-login .theme-portal-container-dropdown {
    inset-inline-end: 0;
    margin-top: -6px; }
  .theme-header .theme-search-cart-non-res .theme-minicart-icon .theme-mini-cart-count {
    position: absolute;
    inset-inline-end: -9px;
    top: -8px;
    box-sizing: border-box;
    min-width: 17px;
    height: 17px;
    margin: 0 !important;
    padding: 0 4px;
    border-radius: 9px;
    font: 600 10px/17px Jost, sans-serif;
    text-align: center; }
  /* Category page: clear the fixed header */
  .theme-category-image-description-conatainer:not([class*="no-image"]) {
    min-height: 518px; }
  .theme-category-name-description-no-imgage {
    padding-top: 168px; } }

.theme-mini-cart-count {
  background: #d32f2f !important;
  color: #fff !important; }

.theme-header .theme-search-icon svg *, .theme-header .theme-portal-login svg *, .theme-header .theme-wishlist-icon svg * {
  stroke: var(--ht-ink) !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round;
  stroke-linejoin: round; }

/* 6 — Header, mobile ------------------------------------------------------- */
.theme-minicart-icon, .theme-portal-icon-enabled {
  position: relative !important; }

.theme-minicart-icon svg, .theme-portal-icon-enabled > svg {
  visibility: hidden !important; }

.theme-minicart-icon::before, .theme-portal-icon-enabled::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 0 !important;
  width: 24px !important;
  height: 24px !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important; }

.theme-minicart-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23150004' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.6 12.2a2 2 0 0 0 2 1.6h8.3a2 2 0 0 0 2-1.5L21.5 7H6'/%3E%3C/svg%3E"); }

.theme-portal-icon-enabled::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23150004' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7.5' r='3.2'/%3E%3Cpath d='M2.5 20v-1a5 5 0 0 1 5-5h2.5'/%3E%3Cpath d='M14 17h7M18 13.5l3.5 3.5-3.5 3.5'/%3E%3C/svg%3E"); }

.theme-portal-icon-enabled::after, .theme-minicart-icon::after {
  content: "Login";
  position: absolute;
  inset-inline-start: 50%;
  top: 27px;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .3px;
  color: var(--ht-ink);
  pointer-events: none;
  white-space: nowrap; }

.theme-minicart-icon::after {
  content: "Cart";
  inset-inline-start: 12px; }

html[dir="rtl"] .theme-portal-icon-enabled::after {
  content: "دخول"; }

html[dir="rtl"] .theme-minicart-icon::after {
  content: "السلة";
  transform: translateX(50%); }

html[dir="rtl"] :is(.theme-portal-icon-enabled)::after {
  transform: translateX(50%); }

@media (max-width: 992px) {
  .theme-header :is(.theme-minicart-icon) {
    --tile: 0 0 0 5px #fbf8f1, 0 0 0 6px rgba(168, 135, 60, .34), 0 6px 16px rgba(21, 0, 4, .10);
    box-sizing: content-box;
    border-radius: 12px;
    padding: 0 0 12px !important;
    margin: 0 0 -12px;
    background-color: #fbf8f1;
    box-shadow: var(--tile);
    transition: box-shadow .2s ease, background-color .2s ease, transform .2s ease;
    cursor: pointer; }
  .theme-header .theme-mini-cart:hover .theme-minicart-icon {
    background-color: #fffdf8;
    box-shadow: 0 0 0 5px #fffdf8, 0 0 0 6px rgba(168, 135, 60, 0.6), 0 10px 20px rgba(21, 0, 4, 0.16);
    transform: translateY(-2px); }
  .theme-header .theme-minicart-icon:focus-visible {
    outline: 2px solid var(--ht-gold);
    outline-offset: 8px; }
  .theme-menu .theme-portal-login.theme-portal-icon-enabled::after {
    display: none !important; }
  .theme-branding-info::after {
    content: none !important; } }

@media (min-width: 993px) {
  .theme-branding-info {
    justify-content: flex-start !important;
    gap: 14px !important; }
  .theme-branding-info::after {
    content: "HACHI TOBACCO";
    color: var(--ht-line);
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
    white-space: nowrap; } }

.theme-responsive-menu-area.zpcontainer .theme-responsive-menu-container .theme-burger-icon {
  height: 1.6px !important;
  border-radius: 1.6px; }

.theme-responsive-menu-area.zpcontainer .theme-responsive-menu-container .theme-burger-icon::before, .theme-responsive-menu-area.zpcontainer .theme-responsive-menu-container .theme-burger-icon::after {
  border-radius: 1.6px; }

.theme-navigation-and-icons .theme-menu-area .theme-menu .theme-sub-li-menu::after {
  border-inline-end-width: 1.6px !important;
  border-block-start-width: 1.6px !important; }

/* 7 — Buttons: one cream style ---------------------------------------------- */
body :is(.zpbutton:not(.main-content-nav-btn):not(.theme-rec-prod-navigation):not(.zpbutton-outline):not(.theme-more-details):not(.theme-continue-shopping-button), .theme-cart-button:not(.theme-more-details), [data-zs-add-to-cart], [data-zs-add-to-quote], [data-zs-checkout], [data-zs-view-cart]:not(.theme-mini-cart), .theme-product-list-style-18 .theme-product-details-area .theme-product-button-area a, a.zpbutton.theme-cart-button.theme-more-details[data-zs-more-details], .zpbutton.zpbutton-type-link.theme-continue-shopping-button[data-zs-continue-shopping]) {
  background: var(--ht-btn) !important;
  border-color: var(--ht-line) !important;
  color: var(--ht-brown) !important;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--ht-line), 0 1px 2px rgba(21, 0, 4, 0.12) !important;
  background-image: none !important;
  transition: background-color .2s ease, box-shadow .2s ease; }

body :is(.zpbutton:not(.main-content-nav-btn):not(.theme-rec-prod-navigation):not(.zpbutton-outline):not(.theme-more-details):not(.theme-continue-shopping-button), .theme-cart-button:not(.theme-more-details), [data-zs-add-to-cart], [data-zs-add-to-quote], [data-zs-checkout], [data-zs-view-cart]:not(.theme-mini-cart), .theme-product-list-style-18 .theme-product-details-area .theme-product-button-area a, a.zpbutton.theme-cart-button.theme-more-details[data-zs-more-details], .zpbutton.zpbutton-type-link.theme-continue-shopping-button[data-zs-continue-shopping]):hover {
  background: var(--ht-btn-h) !important;
  color: #2a170c !important;
  transform: none !important; }

body :is(.zpbutton:not(.main-content-nav-btn):not(.theme-rec-prod-navigation):not(.zpbutton-outline):not(.theme-more-details):not(.theme-continue-shopping-button), .theme-cart-button:not(.theme-more-details), [data-zs-add-to-cart], [data-zs-add-to-quote], [data-zs-checkout], [data-zs-view-cart]:not(.theme-mini-cart), .theme-product-list-style-18 .theme-product-details-area .theme-product-button-area a, a.zpbutton.theme-cart-button.theme-more-details[data-zs-more-details], .zpbutton.zpbutton-type-link.theme-continue-shopping-button[data-zs-continue-shopping]):focus-visible {
  outline: 2px solid var(--ht-brown) !important;
  outline-offset: 2px !important; }

.theme-product-quick-view, .theme-prod-box button[data-zs-quick-view] {
  display: none !important; }

.zpbutton.zpbutton-outline {
  border-radius: 6px !important;
  color: var(--ht-brown) !important;
  border-color: var(--ht-brown) !important; }

.zpbutton.zpbutton-outline:hover {
  background-color: rgba(58, 34, 16, 0.07) !important; }

/* 8 — Headings with a thin gold line ------------------------------------------ */
h1.zpheading, h2.zpheading, h1.zpheading *, h2.zpheading *, .ht-lx-head h2, .htp-title, h2.hb-title {
  font-weight: 500 !important;
  color: var(--ht-ink-2) !important;
  -webkit-text-stroke: 0.35px var(--ht-ink-2); }

.ht-lx-head h2, .htp-title {
  font-size: 32px !important; }

@media (min-width: 641px) {
  h2.zpheading > span {
    font-size: 32px !important; } }

@media (max-width: 640px) {
  h2.zpheading > span, .ht-lx-head h2, .htp-title {
    font-size: 24px !important; } }

.zpelem-heading h2.zpheading, .zpelem-heading h1.zpheading, .ht-lx-head h2, #ht-lx-title, .htp-title, .theme-section-heading,
.theme-product-name > h1, .htp-card-title, .hb-title {
  position: relative; }

.zpelem-heading h2.zpheading::after, .zpelem-heading h1.zpheading::after, .ht-lx-head h2::after, #ht-lx-title::after, .htp-title::after, .theme-section-heading::after,
.theme-product-name > h1::after, .htp-card-title::after, .hb-title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: var(--ht-hl, -12px);
  width: 48px;
  height: 2px;
  background: var(--ht-line);
  border-radius: 2px;
  pointer-events: none; }

.ht-lx-head h2, #ht-lx-title, .htp-title {
  --ht-hl: -16px; }

.zpelem-heading h2.zpheading, .zpelem-heading h1.zpheading {
  --ht-hl: -10px; }

.theme-section-heading {
  --ht-hl: 13px; }

.theme-collection-heading-view-all-search .theme-section-heading {
  --ht-hl: -10px; }

@media (max-width: 640px) {
  .ht-lx-head h2, #ht-lx-title, .htp-title {
    --ht-hl: -15px; }
  .zpelem-heading h2.zpheading, .zpelem-heading h1.zpheading {
    --ht-hl: -8px; }
  .theme-section-heading {
    --ht-hl: 10px; } }

.htp-card-title::after {
  inset-inline-start: 50%;
  margin-inline-start: -24px; }

.theme-prod-content-details :is(h2, h3)::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 10px 0 14px;
  background: var(--ht-line);
  border-radius: 2px; }

.hb-eyebrow, .hb-plabel {
  color: var(--ht-gold) !important; }

/* 9 — Product cards + grids ----------------------------------------------------- */
.theme-prod-box .theme-product-box-content {
  border-radius: 12px;
  overflow: hidden;
  border-color: rgba(21, 0, 4, 0.07);
  box-shadow: var(--ht-shadow);
  transition: box-shadow .22s ease, transform .22s ease; }

@media (hover: hover) and (pointer: fine) {
  .theme-prod-box .theme-product-box-content:hover {
    transform: translateY(-3px);
    box-shadow: var(--ht-shadow-h); } }

@media (hover: hover) {
  .theme-prod-box .theme-product-image-area img {
    transition: transform .5s ease; }
  .theme-prod-box:hover .theme-product-image-area img {
    transform: scale(1.045); } }

.theme-product-list-style-18 .theme-product-box-content:last-child {
  margin: 12px 0 0; }

.theme-product-list-style-18 .theme-product-box-content .theme-product-image-area::after {
  display: none; }

.theme-product-list-style-18 .theme-product-box-content .theme-product-details-area {
  padding: 10px; }

.theme-product-list-style-18 .theme-product-box-content .theme-product-name-price [data-zs-selling-price] {
  font-size: 14px; }

.theme-product-list-style-18 .theme-product-details-area .theme-product-name a {
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere; }

.theme-product-list-style-18 [data-zs-image-container] {
  overflow: hidden; }

.theme-product-list-style-18 [data-zs-image-container] img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain; }

.theme-product-list-style-18 .theme-product-details-area .theme-product-button-area a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  writing-mode: horizontal-tb; }

.theme-product-list-style-18 a:focus-visible {
  outline: 2px solid var(--ht-gold);
  outline-offset: 3px; }

.theme-product-price:not(del *, s *, strike *), [data-zs-selling-price]:not(del *, s *), .theme-cart-selling-price, [data-zs-sub-total-lineitem], [data-zs-cart-subtotal] {
  color: var(--ht-wine) !important; }

[data-layout-type="filmstrip"][data-filmstrip_gutter="5"] :is(.zpfilmstrip-item, .theme-prod-box), [data-filmstrip-enabled][data-filmstrip_gutter="5"] :is(.zpfilmstrip-item, .theme-prod-box) {
  padding-block-end: 15px !important; }

.theme-productfilter-enable .theme-filter-container [data-zs-filter-container] .theme-category-filter-bar {
  display: none; }

.theme-productfilter-enable .theme-product-category-list-row {
  padding-block-end: 0; }

[data-zs-category-products] .theme-product-category-list-row {
  padding-block-end: 67px; }

@media (min-width: 992px) {
  .zpsearch_products-container .theme-prod-box, .theme-product-collection-container .theme-prod-box {
    width: 20% !important; }
  :is(.zpsearch_products-container, .theme-product-collection-container) .theme-product-short-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    height: auto;
    max-height: 2.9em; }
  :is(.zpsearch_products-container, .theme-product-collection-container) .theme-product-details-area {
    padding-block: 12px; }
  :is(.zpsearch_products-container, .theme-product-collection-container) .theme-product-name-rating-price {
    gap: 6px; }
  :is(.zpsearch_products-container, .theme-product-collection-container) .theme-product-price-variants {
    margin-top: 8px; } }

@media (max-width: 991px) {
  .zpstorecollection-container.zpfilmstrip .zprow[class*="theme-store-style-collection-row-"]:has(> .theme-prod-box:nth-child(2)) > .theme-prod-box.theme-product-count-xsm-02 {
    flex: 0 0 50% !important;
    width: 50% !important; }
  .zpfilmstrip .zpfilmstrip-gutter-fix {
    padding-block-end: 0 !important; } }

/* Product page (style 07) */
.theme-product-details-style-07 [data-zs-product-primary-details] .theme-product-detail-image-container {
  order: -1 !important; }

.theme-product-details-style-07 [data-zs-product-primary-details] .theme-tag-social-container {
  order: 0 !important; }

.theme-product-details-style-07 [data-zs-product-primary-details] .theme-product-quantity-cart-area {
  flex-direction: row; }

.theme-product-details-style-07 [data-zs-product-primary-details] .theme-product-cart-buttons :is([data-zs-add-to-cart], [data-zs-add-to-quote]) {
  width: min(100%, 240px) !important;
  max-width: 100%;
  height: 46px;
  font-size: 15px !important; }

@media (min-width: 992px) {
  .theme-product-details-style-07 [data-zs-product-primary-details] .theme-product-detail-image-container {
    width: 50%; }
  .theme-product-details-style-07 [data-zs-product-primary-details] .theme-product-detail-container {
    width: 48%; } }

:is([data-zs-product-details-recommended-section], [data-zs-cart-recommended-section]) .theme-rec-prod-navigation {
  background: #bc7119; }

@media (max-width: 768px) {
  [data-zs-search-products] [data-sort-by-products-target] {
    width: 100%; } }

/* 10 — Homepage rows: the heading itself is the link to the full category (no "View all" button) ------------
   A linked heading must look exactly like a plain one: inherited colour, no underline, keyboard focus ring only. */
.theme-collection-head .theme-section-heading {
  margin: 0; }

:is(.theme-collection-head .theme-section-heading, .zpelem-heading h2.zpheading) a {
  color: inherit;
  text-decoration: none; }

:is(.theme-collection-head .theme-section-heading, .zpelem-heading h2.zpheading) a {
  transition: color .15s; }

:is(.theme-collection-head .theme-section-heading, .zpelem-heading h2.zpheading) a:hover {
  color: #a8873c; }

:is(.theme-collection-head .theme-section-heading, .zpelem-heading h2.zpheading) a:focus-visible {
  outline: 2px solid #a8873c;
  outline-offset: 3px; }

/* Lower-page bands: "What Our Customers Say" (reviews) and "Shisha & Vape Shop in Dubai, UAE" (SEO line): cream band, centred
   heading with a short gold rule. Targets are the two builder sections (stable element ids). */
[data-element-id="elm_wtMJKm6cvkgcQJNHAgKF9g"] {
  background: #faf8f3 !important;
  border-block: 1px solid #eee7db;
  padding-block: 30px !important; }

[data-element-id="elm_wtMJKm6cvkgcQJNHAgKF9g"] h2 {
  margin: 0 auto 22px !important;
  color: #2b2622 !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 700 !important;
  text-align: center !important; }

[data-element-id="elm_wtMJKm6cvkgcQJNHAgKF9g"] h2.zpheading::after {
  content: "";
  display: block;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 48px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 3px;
  background: #a8873c; }

[data-element-id="elm_gsHbm83u4P3n2-q9Dug9XQ"] {
  max-width: 850px;
  margin: 0 auto 20px !important;
  color: #6f655a !important;
  text-align: center !important; }

[data-element-id="elm_R4Epw7-DbbRKVBQ5LTtMOA"] {
  background: #faf8f3 !important;
  border-block-start: 1px solid #eee7db;
  padding-block: 26px !important; }

[data-element-id="elm_R4Epw7-DbbRKVBQ5LTtMOA"] h1 {
  margin: 0 auto !important;
  color: #2b2622 !important;
  font-size: clamp(21px, 2.4vw, 28px) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  line-height: 1.35 !important;
  text-align: center !important; }

[data-element-id="elm_R4Epw7-DbbRKVBQ5LTtMOA"] h1.zpheading::after {
  content: "";
  display: block;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 42px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 3px;
  background: #a8873c; }

@media (max-width: 767px) {
  [data-element-id="elm_wtMJKm6cvkgcQJNHAgKF9g"] {
    padding-block: 22px !important; }
  [data-element-id="elm_R4Epw7-DbbRKVBQ5LTtMOA"] {
    padding-block: 20px !important; } }

@media (min-width: 768px) {
  [data-element-id="elm_9Vkii7lqx96MdD9gIFL7ww"] .zpimage-container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    height: clamp(240px, 31.25vw, 500px) !important;
    aspect-ratio: 16 / 5;
    overflow: hidden;
    background-color: #f4eee6; }
  [data-element-id="elm_9Vkii7lqx96MdD9gIFL7ww"] .zpimage-container::before {
    content: none !important; }
  [data-element-id="elm_9Vkii7lqx96MdD9gIFL7ww"] .zpimage-container :is(.zpimage-data-ref, .zpimage-anchor, picture) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important; }
  [data-element-id="elm_9Vkii7lqx96MdD9gIFL7ww"] .zpimage-container figure img.zpimage {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important; } }

/* 11b — "Shop by Category" image tiles (.ht-lx-*, a builder block) and small layout fixes ------------------- */
.ht-lx-card {
  display: flex;
  flex-direction: column;
  color: #1d231e;
  text-align: center;
  text-decoration: none; }

.ht-lx-frame {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden; }

.ht-lx-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease; }

.ht-lx-card:hover .ht-lx-frame img {
  transform: scale(1.035); }

.ht-lx-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 50px;
  padding: 10px 6px 0;
  position: static !important;
  background: transparent !important;
  color: #1d231e;
  text-align: center;
  transform: none !important; }

.ht-lx-name {
  display: block;
  max-width: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere; }

.ht-lx-card:focus-visible {
  outline: 2px solid #a98d52;
  outline-offset: 3px; }

@media (max-width: 767px) {
  .ht-lx-frame {
    border-radius: 12px; }
  .ht-lx-label {
    min-height: 44px;
    padding: 8px 4px 0; }
  .theme-collection-section {
    padding-block: 0; } }

[data-element-id="elm_kHHANg97RFApnNmTdawdJg"] .zprow .zpcol-md-12 {
  padding-inline: 0; }

.theme-header .theme-search-field-container input {
  border: 1px solid #e4e7e1;
  border-radius: 4px; }

.theme-header .theme-menu-area {
  border-block-start: 1px solid #e4e7e1; }

/* 12 — Reviews: auto-scrolling strip ---------------------------------------------------------------------
   Markup (builder code snippet, written by the daily review sync): .hrm > .hrm-vp > .hrm-t > 3 x .hrm-s (1 live + 2 inert copies)
   of .hr-card items; --n = number of cards. The track slides by exactly one copy (33.333%) forever: no gaps, CSS only.
   Paused on hover / focus / touch (js/hachi.js adds .hrm-p while a finger is down); swipeable on touch via the
   viewport's own overflow scroll; static and swipeable under prefers-reduced-motion; RTL runs the other way. */
.hrm {
  --w: 236px;
  --g: 16px;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  contain: layout paint; }

.hrm-vp {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }

.hrm-vp::-webkit-scrollbar {
  display: none; }

.hrm-t {
  --d: -1;
  display: flex;
  align-items: stretch;
  width: max-content;
  will-change: transform;
  animation: hrmMove calc(var(--n, 6) * 5.5s) linear infinite; }

[dir="rtl"] .hrm-t {
  --d: 1; }

.hrm-s {
  display: contents; }

@keyframes hrmMove {
  to {
    transform: translate3d(calc(var(--d) * 33.3333%), 0, 0); } }

.hrm .hr-card {
  flex: none;
  box-sizing: border-box;
  width: var(--w);
  margin-inline-end: var(--g);
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid #e7e0d4;
  border-radius: 20px; }

.hrm .hr-head {
  display: flex;
  align-items: center;
  gap: 10px; }

.hrm .hr-av {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) !important;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700; }

.hrm .hr-head strong {
  display: block;
  font-size: 15px;
  color: #222; }

.hrm .hr-head small {
  font-size: 13px;
  color: #595959; }

.hrm .hr-stars {
  font-size: 17px;
  letter-spacing: 2px;
  color: #b87800 !important; }

/* darker gold = AA contrast */
.hrm .hr-card p {
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden; }

.hrm :is(.hr-card p, .hr-head strong, .hr-head small) {
  unicode-bidi: plaintext;
  text-align: start; }

/* review text keeps its own direction */
.hrm .hr-g {
  padding-block-start: 9px;
  border-block-start: 1px solid #eee;
  font-size: 13px;
  color: #1a56b0;
  text-decoration: none; }

.hrm .hr-g b {
  margin-inline-end: 4px;
  color: #4285f4; }

@media (hover: hover) {
  .hrm:hover .hrm-t {
    animation-play-state: paused; } }

.hrm:focus-within .hrm-t, .hrm-p .hrm-t {
  animation-play-state: paused; }

@media (max-width: 600px) {
  .hrm {
    --w: 212px;
    --g: 12px; } }

@media (prefers-reduced-motion: reduce) {
  .hrm-vp {
    -webkit-mask-image: none;
    mask-image: none; }
  .hrm-t {
    animation: none;
    will-change: auto; }
  .hrm-s + .hrm-s {
    display: none; } }

/* 13 — Footer ---------------------------------------------------------------------------------------- */
.theme-footer-area {
  background: var(--ht-footer) !important;
  color: #e8ebe5; }

.theme-footer-area .footer-container {
  max-width: 1280px;
  margin-inline: auto; }

.theme-footer-area h5 {
  color: #fff;
  font-size: 15px;
  font-weight: 700; }

.theme-footer-area :is(p, a) {
  color: #d0d5ce;
  line-height: 1.75; }

.theme-footer-area a:hover {
  color: #d2bb7e; }

@media (max-width: 767px) {
  .theme-footer-area .footer-container {
    padding-inline: 16px; } }

.zpsection.zpdefault-section:has(h5.zpheading) {
  background-color: var(--ht-footer-top) !important; }

.zpsection.zpdefault-section:has(h5.zpheading) :is(.zptext, .zptext span, .zptext a, .zptext p, a[href^="tel"], a[href^="mailto"], .zpicon-heading, .zpicon-heading *) {
  color: #fff !important; }

.zpsection.zpdefault-section:has(h5.zpheading) h5.zpheading span, .zpdark-section h5.zpheading, .zpdark-section h5.zpheading * {
  color: var(--ht-ink-2) !important;
  font-weight: 600 !important; }

.zpdark-section .zpaccordion-container.zpaccordion-style-01 .zpaccordion:not(.zpaccordion-active):not(:hover) {
  background-color: #8f6430 !important; }

.theme-footer-area :is(a, span):not(.zpaccordion-name, :is(h1, h2, h3, h4, h5, h6, .zpheading) *) {
  font-weight: 500 !important; }

/* Footer contact icons (elements of the store's footer) */
.theme-footer-area .zpicon {
  position: relative; }

.theme-footer-area .zpicon svg {
  visibility: hidden; }

.theme-footer-area .zpicon::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: no-repeat center / 22px 22px; }

.theme-footer-area [data-element-id="elm_u9LZw5vChxa675Wd3a56dg"] .zpicon::before, [data-element-id="elm_l43vNdm5B59S53dOG5oMbQ"] .zpicon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }

.theme-footer-area [data-element-id="elm_X7ohisaTxsHEyxzcPfYsEQ"] .zpicon::before, [data-element-id="elm_N7iFcgFZSAJnmlvLCuWmTQ"] .zpicon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }

.theme-footer-area [data-element-id="elm_IGFgL5Z0XBYx512-8gTxHQ"] .zpicon::before, [data-element-id="elm_pI7b5kZsTP1mqtUCzAVicw"] .zpicon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }

.theme-footer-area [data-element-id="elm_6heNzqU_x29M5ev0rWRYQw"] .zpicon::before, [data-element-id="elm_9DPAqgIQrYv2X7HwRcNPxw"] .zpicon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

/* 13b — Footer payment pill: one badge, "Cash or Card on Delivery" (no card-scheme logos) ------------------------ */
.theme-footer-area .zpcontainer > .zprow:last-of-type::after {
  content: "" !important;
  display: block !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 36px !important;
  margin: 16px 0 4px !important;
  order: -1 !important;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='236'%20height='36'%20viewBox='0%200%20236%2036'%3E%3Crect%20width='236'%20height='36'%20rx='6'%20fill='%23fff'/%3E%3Crect%20x='3'%20y='3'%20width='230'%20height='30'%20rx='4'%20fill='none'%20stroke='%232e7d32'%20stroke-width='1.6'/%3E%3Cg%20fill='none'%20stroke='%232e7d32'%20stroke-width='1.5'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Crect%20x='13'%20y='12'%20width='18'%20height='12'%20rx='2'/%3E%3Ccircle%20cx='22'%20cy='18'%20r='2.4'/%3E%3Crect%20x='36'%20y='12'%20width='18'%20height='12'%20rx='2'/%3E%3Cpath%20d='M36%2016h18M39.5%2020.5h4'/%3E%3C/g%3E%3Ctext%20x='65'%20y='23'%20font-family='Arial,Helvetica,sans-serif'%20font-size='13'%20font-weight='bold'%20fill='%232e7d32'%3ECash%20or%20Card%20on%20Delivery%3C/text%3E%3C/svg%3E") no-repeat center/236px 36px !important; }

@media (max-width: 991px) {
  .theme-footer-area .zpcontainer-fluid > .zprow > .zpelem-col::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    max-width: 330px !important;
    height: 36px !important;
    margin: 6px auto 18px !important;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='236'%20height='36'%20viewBox='0%200%20236%2036'%3E%3Crect%20width='236'%20height='36'%20rx='6'%20fill='%23fff'/%3E%3Crect%20x='3'%20y='3'%20width='230'%20height='30'%20rx='4'%20fill='none'%20stroke='%232e7d32'%20stroke-width='1.6'/%3E%3Cg%20fill='none'%20stroke='%232e7d32'%20stroke-width='1.5'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Crect%20x='13'%20y='12'%20width='18'%20height='12'%20rx='2'/%3E%3Ccircle%20cx='22'%20cy='18'%20r='2.4'/%3E%3Crect%20x='36'%20y='12'%20width='18'%20height='12'%20rx='2'/%3E%3Cpath%20d='M36%2016h18M39.5%2020.5h4'/%3E%3C/g%3E%3Ctext%20x='65'%20y='23'%20font-family='Arial,Helvetica,sans-serif'%20font-size='13'%20font-weight='bold'%20fill='%232e7d32'%3ECash%20or%20Card%20on%20Delivery%3C/text%3E%3C/svg%3E") no-repeat center/contain !important; } }

/* 14 — Floating contact stack + back-to-top ---------------------------------------------------------------- */
.ht-fab {
  position: fixed;
  z-index: 90;
  inset-inline-end: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0; }

.ht-fab__b, .ht-top {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--ht-btn);
  border: 1px solid var(--ht-line);
  box-shadow: 0 3px 10px rgba(59, 36, 23, 0.22);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, box-shadow .18s ease, opacity .18s ease, visibility .18s; }

.ht-fab__b:hover, .ht-top:hover {
  background: var(--ht-btn-h);
  box-shadow: 0 6px 14px rgba(59, 36, 23, 0.26); }

.ht-fab__b[data-k="wa"] {
  background: var(--ht-line);
  border-color: #8a6d2c; }

.ht-fab__b[data-k="wa"]:hover {
  background: #977a33; }

.ht-fab__b:focus-visible, .ht-top:focus-visible {
  outline: 2px solid var(--ht-brown);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #fff; }

.ht-fab__b::before, .ht-top::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: no-repeat center / 22px 22px; }

.ht-fab__b[data-k="mail"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b2417' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }

.ht-fab__b[data-k="tel"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b2417' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }

.ht-fab__b[data-k="map"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b2417' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }

.ht-fab__b[data-k="wa"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.13) translate(-12 -12)' stroke-width='1.42'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20.5l1.7-5A8.5 8.5 0 1 1 21 11.5z'/%3E%3Cg transform='translate(7.6 7.4) scale(.36)' stroke-width='3.9'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

.ht-top {
  position: fixed;
  z-index: 90;
  inset-inline-start: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 42px;
  height: 42px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px); }

.ht-top::before {
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b2417' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E"); }

.ht-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none; }

@media (max-width: 767px) {
  .ht-fab {
    inset-inline-end: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 8px; }
  .ht-fab__b {
    width: 44px;
    height: 44px; }
  .ht-top {
    inset-inline-start: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 40px;
    height: 40px; } }

@media print {
  .ht-fab, .ht-top, .zpheader-style-10 > .ht-trust, .ht-lic {
    display: none !important; } }

/* 15 — Price glyph, carousel, motion ----------------------------------------------------------------------------- */
/* hachi.js wraps "AED" in .ht-aed; the dirham sign is drawn with a mask so it follows the text colour. */
.ht-nw {
  white-space: nowrap; }

.ht-aed {
  position: relative;
  display: inline-block !important;
  width: .78em;
  height: .72em;
  overflow: hidden;
  vertical-align: baseline;
  line-height: 0;
  letter-spacing: 0;
  text-indent: -999em;
  white-space: nowrap; }

.ht-aed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentcolor;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20108%20100'%3E%3Cpath%20d%3D'M28%207H55A43%2043%200%200%201%2055%2093H28Z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'13'%2F%3E%3Cpath%20d%3D'M0%2039H100M0%2061H100'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'9'%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat; }

:is(del, s, strike) .ht-aed::after, .ht-aed.ht-x::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  height: max(1px, .07rem);
  background: currentcolor; }

/* Hero carousel: soft "pulse in / melt out" cross-fade instead of the slide */
.zpimage-carousel-slide.zpelem-carousel {
  overflow: hidden;
  background: #e8dcc6 !important; }

.zpimage-carousel-slide.zpelem-carousel :is(.zpcarousel-arrow-left, .zpcarousel-arrow-right) {
  display: none !important; }

.zpimage-carousel-slide .zpcarousel-content:is(.slideOutLeft, .slideOutRight) {
  animation: htMeltOut 1.4s ease-in-out both !important;
  z-index: 1; }

.zpimage-carousel-slide .zpcarousel-content:is(.slideInLeft, .slideInRight) {
  animation: htPulseIn 1.3s ease-in-out .35s both !important;
  z-index: 2; }

@keyframes htMeltOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0); }
  100% {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(8px); } }

@keyframes htPulseIn {
  0% {
    opacity: 0;
    transform: scale(0.93); }
  55% {
    opacity: 1;
    transform: scale(1.02); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@media (max-width: 768px) {
  .zplight-ticker-track {
    animation: none !important; }
  .zpcarousel-content {
    min-height: 220px; } }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
  .theme-prod-box .theme-product-box-content:hover, .theme-prod-box:hover .theme-product-image-area img {
    transform: none; } }

/* Skip-to-content link: the base parks it at inset-inline-start:-999px, which overflows to the right in RTL (page gets a sideways scroll). Clip it instead. */
.main-content-nav-btn:not(:focus) {
  inset-inline-start: 0;
  clip-path: inset(50%); }

/* 16 — Homepage "Best sellers" row (js/bestsellers.js). A native scroll-snap row of the store's own product cards: 2.2 cards on phones (the
   next one peeks = "swipe me"), 3.2 on tablets, 6 + arrows from 1025px. Square image reserved with aspect-ratio => no layout shift. ----------- */
.htbs {
  padding-block: 0 8px; }

.htbs .zpelem-heading {
  margin-block: 0 22px; }

@media (max-width: 767px) {
  .htbs .zpelem-heading {
    margin-block: 0 18px; } }

.htbs-wrap {
  position: relative; }

.htbs-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 14px;
  margin: -6px -2px -14px;
  scroll-padding-inline: 2px; }

.htbs-track::-webkit-scrollbar {
  display: none; }

.htbs-track:focus-visible {
  outline: 2px solid #a8873c;
  outline-offset: 2px; }

.htbs .htbs-card {
  flex: 0 0 calc((100% - 5 * 16px) / 6);
  width: auto;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  box-sizing: border-box; }

@media (max-width: 1024px) {
  .htbs .htbs-card {
    flex-basis: calc((100% - 3 * 16px) / 3.2); } }

@media (max-width: 640px) {
  .htbs-track {
    gap: 12px; }
  .htbs .htbs-card {
    flex-basis: calc((100% - 12px) / 2.2); } }

/* the store's card CSS hides the image (opacity 0) until its own loader script reveals it; this static row has no such script, so show it */
.htbs .htbs-card .theme-product-box-content .theme-product-image-area picture img {
  opacity: 1; }

.htbs-card .theme-product-image-area a {
  display: block; }

.htbs-card .theme-product-detail-price-area {
  display: flex;
  gap: .5rem;
  align-items: baseline; }

.htbs-card .theme-product-detail-price-area .theme-product-price {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 600; }

.htbs-nav {
  display: none;
  position: absolute;
  top: 38%;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #c9a84c;
  background: #fff;
  color: var(--ht-brown);
  box-shadow: 0 2px 8px rgba(58, 34, 16, 0.18);
  cursor: pointer;
  transition: background-color .15s, color .15s; }

.htbs-nav:hover, .htbs-nav:focus-visible {
  background: var(--ht-brown);
  color: #fff; }

.htbs-nav:focus-visible {
  outline: 2px solid #a8873c;
  outline-offset: 2px; }

.htbs-prev {
  inset-inline-start: -10px; }

.htbs-next {
  inset-inline-end: -10px; }

.htbs-prev svg {
  transform: scaleX(-1); }

@media (min-width: 1025px) {
  .htbs-nav {
    display: flex; } }

@media (prefers-reduced-motion: reduce) {
  .htbs-nav {
    transition: none; }
  .htbs-track {
    scroll-behavior: auto; } }

/* 17 — Product star-rating box (js/rating.js; tap a star to select it, press Confirm to send). Product pages only; scoped to .ht-r / #ht-rate-reviews. The two "hide the native Ratings/Reviews block"
   rules only apply once rating.js has switched itself on (html.ht-rate-on), so with the endpoint still unset (placeholder) nothing on the page changes. ----- */
html.ht-rate-on [data-zs-product-details-commentbox-section],
html.ht-rate-on .theme-rating-review-container {
  display: none !important; }

.ht-r-host {
  flex-wrap: wrap; }

.ht-r {
  --g:#b8955a;
  --gd:#a8873c;
  --br:#3a2210;
  --mu:#6b5a4a;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 104px;
  margin: 14px 0 0;
  padding: 10px 14px 8px;
  border: 1px solid rgba(184, 149, 90, 0.65);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fffaf3);
  box-shadow: 0 0 0 3px rgba(184, 149, 90, 0.12), 0 6px 18px rgba(184, 149, 90, 0.2);
  color: #150004;
  font: 400 14px/1.4 Jost,"Segoe UI",Tahoma,sans-serif;
  text-align: start; }

.ht-r * {
  box-sizing: border-box; }

.ht-r [hidden] {
  display: none !important; }

.ht-r-def {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden; }

.ht-r-t {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: #4f3622; }

.ht-r-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; }

.ht-r-st {
  display: flex;
  margin-inline-start: -4px; }

.ht-r-st button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; }

.ht-r-st button:focus-visible {
  outline: 2px solid var(--br);
  outline-offset: 1px; }

.ht-r svg, .ht-r-rv svg {
  display: block;
  fill: transparent;
  stroke: var(--gd);
  stroke-width: 1.3;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center; }

.ht-r-st svg {
  width: 32px;
  height: 32px;
  transition: fill .12s; }

.ht-r-st .on svg, .ht-r-cs .on svg {
  fill: var(--g); }

.ht-r-st:not(.lock):has(button:hover) button svg {
  fill: var(--g); }

.ht-r-st:not(.lock) button:hover ~ button svg {
  fill: transparent; }

.ht-r-st.lock button {
  cursor: default; }

.ht-r-av {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: #150004;
  text-decoration: none;
  font-size: 14px; }

.ht-r-av svg {
  width: 16px;
  height: 16px;
  fill: var(--g); }

.ht-r-av b {
  font-weight: 600;
  font-size: 15px; }

.ht-r-av span {
  color: var(--mu); }

a.ht-r-av:hover {
  text-decoration: underline; }

/* Confirm button: shares the stars' row (replaces the average link while a star is selected), so the box never changes height */
.ht-r-c {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--br);
  color: #fff;
  font: 500 14px/1 Jost,"Segoe UI",Tahoma,sans-serif;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(184, 149, 90, 0.45);
  -webkit-tap-highlight-color: transparent;
  transition: background .15s; }

.ht-r-c:hover {
  background: #5c3a1c; }

.ht-r-c:focus-visible {
  outline: 2px solid var(--g);
  outline-offset: 2px; }

.ht-r-c:disabled {
  opacity: .6;
  cursor: default; }

.ht-r.ht-sel .ht-r-c {
  display: inline-flex;
  animation: ht-r-i .22s ease 1; }

.ht-r.ht-sel .ht-r-av {
  display: none; }

@keyframes ht-r-i {
  from {
    opacity: 0;
    transform: translateY(3px); } }

.ht-r-m {
  min-height: 20px;
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--mu); }

.ht-r-lk {
  display: inline-block;
  height: 20px;
  vertical-align: top;
  line-height: 20px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: #7c5637;
  text-decoration: underline;
  cursor: pointer; }

.ht-r-x {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease; }

.ht-r-x.open {
  grid-template-rows: 1fr; }

.ht-r-x > div {
  min-height: 0;
  overflow: hidden;
  visibility: hidden; }

.ht-r-x.open > div {
  visibility: visible; }

.ht-r-ta, .ht-r-nm {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid #d9cdb6;
  border-radius: 8px;
  background: #fff;
  color: #150004;
  font: inherit;
  font-size: 16px; }

.ht-r-ta {
  min-height: 76px;
  resize: vertical; }

.ht-r-ta:focus, .ht-r-nm:focus {
  outline: 2px solid rgba(184, 149, 90, 0.55);
  border-color: var(--gd); }

.ht-r-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 8px 0 4px;
  min-height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: var(--br);
  color: #fff;
  font: 500 15px Jost,"Segoe UI",Tahoma,sans-serif;
  cursor: pointer;
  transition: background .15s; }

.ht-r-b:hover {
  background: #5c3a1c; }

.ht-r-b:disabled {
  opacity: .6;
  cursor: default; }

.ht-r-hp {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none; }

/* one-time attention pulse when the box first scrolls into view */
.ht-r.ht-pop {
  animation: ht-r-g 1.8s ease 1; }

.ht-r.ht-pop .ht-r-st button svg {
  animation: ht-r-p 1s ease 1; }

.ht-r.ht-pop .ht-r-st button:nth-child(2) svg {
  animation-delay: .1s; }

.ht-r.ht-pop .ht-r-st button:nth-child(3) svg {
  animation-delay: .2s; }

.ht-r.ht-pop .ht-r-st button:nth-child(4) svg {
  animation-delay: .3s; }

.ht-r.ht-pop .ht-r-st button:nth-child(5) svg {
  animation-delay: .4s; }

@keyframes ht-r-p {
  0%, 100% {
    transform: scale(1); }
  40% {
    transform: scale(1.25);
    fill: var(--g); } }

@keyframes ht-r-g {
  50% {
    box-shadow: 0 0 0 6px rgba(184, 149, 90, 0.3), 0 6px 24px rgba(184, 149, 90, 0.45); } }

@media (prefers-reduced-motion: reduce) {
  .ht-r, .ht-r * {
    animation: none !important;
    transition: none !important; } }

/* phones: keep clear of the site's floating contact buttons on the right edge */
@media (max-width: 767px) {
  .ht-r {
    padding-right: 34px; } }

@media (min-width: 768px) {
  .ht-r {
    padding: 12px 18px 10px; }
  .ht-r-t {
    font-size: 16px; } }

/* approved comments, in the old Reviews position (above the recommended products) */
#ht-rate-reviews {
  background: #fffaf3;
  padding: 48px 0; }

.ht-r-rv {
  --g:#b8955a;
  --gd:#a8873c;
  max-width: 720px;
  font: 400 15px/1.5 Jost,"Segoe UI",Tahoma,sans-serif;
  color: #150004;
  text-align: start; }

.ht-r-rv h3 {
  margin: 0 0 16px;
  font: 500 34px/1.15 "Cormorant Garamond",Georgia,serif;
  color: #4f3622; }

.ht-r-rv ul {
  margin: 0;
  padding: 0;
  list-style: none; }

.ht-r-rv li {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid #eee7db;
  border-radius: 10px;
  background: #fff; }

.ht-r-rv li > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 4px; }

.ht-r-rv p {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line; }

.ht-r-rv svg {
  width: 16px;
  height: 16px; }

.ht-r-cs {
  display: inline-flex; }

.ht-r-rv b {
  font-weight: 600; }

.ht-r-rv small {
  color: #6b5a4a;
  font-size: 13px; }

/* 18 — "Shop by Category" tiles: press interaction only (phones). The tile keeps its normal look; while pressed it lifts 3px with a stronger shadow and
   pulses once (1 -> 1.04 -> 1, ~300ms), then returns. Appended LAST so it comes after the .ht-lx-* tile rules (11b) and the store's inline category snippet.
   The grid gets vertical padding with an equal negative margin so the lift/shadow are not clipped by its horizontal scroller (vertical only: horizontal would move the visible scroll edge): no layout change at rest.
   .ht-lx-section prefix = beats the snippet's own later `.ht-lx-grid{padding:0}` / `.ht-lx-frame{transition}`. js/hachi.js feature 7 lets iOS apply :active. */
@media (max-width: 640px) {
  .ht-lx-section .ht-lx-grid {
    padding-top: 6px;
    padding-bottom: 26px;
    margin-top: -6px;
    margin-bottom: -26px; }
  .ht-lx-card {
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .ht-lx-section .ht-lx-frame {
    transition: border-color 0.38s ease, transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s; }
  .ht-lx-card:active, .ht-lx-card.ht-press {
    transform: translateY(-3px);
    animation: htCatPulse 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .ht-lx-card:active .ht-lx-frame, .ht-lx-card.ht-press .ht-lx-frame {
    box-shadow: 0 9px 18px rgba(79, 54, 34, 0.34); } }

@keyframes htCatPulse {
  0% {
    transform: translateY(0) scale(1); }
  50% {
    transform: translateY(-3px) scale(1.04); }
  100% {
    transform: translateY(-3px) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ht-lx-card, .ht-lx-card:active, .ht-lx-card.ht-press {
    animation: none;
    transition: none; }
  .ht-lx-card:active, .ht-lx-card.ht-press {
    transform: none; } }

/* 19 — "Rate us on Google" card (js/google-review.js; order-confirmation page only, appended to <body>). position:fixed = no layout shift. Phones: floating bottom sheet; >=600px: centred card.
   Same gold / dark-brown / cream look as the rating box (17). Logical properties, so it mirrors itself in RTL (the script sets dir on the card). */
.ht-gr {
  --g:#e0a82e;
  --gd:#a8873c;
  --br:#3a2210;
  --mu:#6b5a4a;
  box-sizing: border-box;
  position: fixed;
  z-index: 9990;
  inset-inline: 10px;
  bottom: 10px;
  margin-bottom: env(safe-area-inset-bottom, 0px);
  padding: 14px 16px 12px;
  border: 1px solid rgba(184, 149, 90, 0.65);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fffaf3);
  box-shadow: 0 0 0 3px rgba(184, 149, 90, 0.12), 0 10px 28px rgba(58, 34, 16, 0.28);
  color: #150004;
  font: 400 14px/1.4 Jost,"Segoe UI",Tahoma,"Noto Naskh Arabic",sans-serif;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .25s ease,transform .25s ease; }

.ht-gr * {
  box-sizing: border-box; }

.ht-gr.ht-gr-in {
  opacity: 1;
  transform: none; }

.ht-gr-t {
  margin: 0;
  padding-inline: 34px;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: #4f3622; }

.ht-gr-s {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--mu); }

.ht-gr-l {
  display: inline-flex;
  gap: 2px;
  margin: 6px 0 0;
  padding: 4px 8px;
  border-radius: 10px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent; }

.ht-gr-l:focus-visible, .ht-gr-x:focus-visible {
  outline: 2px solid var(--br);
  outline-offset: 2px; }

.ht-gr svg {
  display: block;
  width: 36px;
  height: 36px;
  fill: var(--g);
  stroke: var(--gd);
  stroke-width: 1.2;
  stroke-linejoin: round; }

.ht-gr-l:hover svg {
  transform: scale(1.08); }

.ht-gr svg {
  transition: transform .15s; }

.ht-gr .ht-gr-x {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; }

.ht-gr .ht-gr-x svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--br);
  stroke-width: 2;
  stroke-linecap: round; }

@media (min-width: 600px) {
  .ht-gr {
    inset-inline: 0;
    margin-inline: auto;
    width: 360px;
    bottom: 24px; } }

@media (prefers-reduced-motion: reduce) {
  .ht-gr, .ht-gr svg {
    transition: none; } }