/* ============================================================
   HK theme skin — v0-style redesign (header + product page)
   Tokens from the v0 design; applied over bakala base styles.
   ============================================================ */

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Vazirmatn-var.woff2') format('woff2');
}

:root {
  --hk-bg: #f6f9fb;
  --hk-fg: #141b24;
  --hk-card: #fff;
  --hk-primary: #225ad6;
  --hk-primary-fg: #fcfcfc;
  --hk-secondary: #eef2f7;
  --hk-secondary-fg: #272e38;
  --hk-muted-fg: #6c727a;
  --hk-accent: #e4efff;
  --hk-accent-fg: #1141ad;
  --hk-destructive: #db2a3d;
  --hk-success: #269e5f;
  --hk-border: #e1e5ea;
  --hk-radius: 14px;
  --hk-font: 'Vazirmatn', 'IRANSansX', IRANSans, Tahoma, sans-serif;
}

body.hk-skin,
body.hk-skin button,
body.hk-skin input,
body.hk-skin select,
body.hk-skin textarea,
body.hk-skin h1, body.hk-skin h2, body.hk-skin h3,
body.hk-skin h4, body.hk-skin h5, body.hk-skin h6,
body.hk-skin p, body.hk-skin a, body.hk-skin li,
body.hk-skin span:not([class*="icon"]):not([class*="fa-"]):not([class*="bakala-icon"]) {
  font-family: var(--hk-font);
}

body.hk-skin {
  background: var(--hk-bg);
  color: var(--hk-fg);
  /* bakala makes body a scroll container (overflow: hidden auto) which breaks the sticky header */
  overflow: visible !important;
}

.hk-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}

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

.hk-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--hk-card);
  border-bottom: 1px solid var(--hk-border);
  box-shadow: 0 1px 2px rgb(20 27 36 / 4%);
}

/* --- tier 2: main row --- */
.hk-tier2-in {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.hk-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.hk-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 12px;
}
.hk-logo-text {
  font-size: 19px;
  font-weight: 800;
  color: var(--hk-fg);
  white-space: nowrap;
}

/* search (FiboSearch solaris restyle) */
.hk-search { flex: 1 1 auto; min-width: 0; }
.hk-search .dgwt-wcas-search-wrapp { max-width: 640px; margin: 0; }
.hk-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
.hk-search .dgwt-wcas-style-solaris .dgwt-wcas-search-input,
.hk-search input.dgwt-wcas-search-input {
  background: var(--hk-secondary) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  height: 46px !important;
  min-height: 46px !important;
  font-size: 14px !important;
  color: var(--hk-fg) !important;
  box-shadow: none !important;
  font-family: var(--hk-font) !important;
  padding-inline-start: 44px !important;
}
.hk-search input.dgwt-wcas-search-input:focus {
  background: var(--hk-card) !important;
  border-color: var(--hk-primary) !important;
}
.hk-search .dgwt-wcas-ico-magnifier {
  max-width: 18px;
  opacity: .55;
}
.hk-search .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
  background: transparent !important;
}
.hk-search .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:before { display: none; }

/* account + cart chips */
.hk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.hk-actions .tbar { margin: 0; padding: 0; }
.hk-actions .c-header__btn-container { position: relative; }
.hk-actions .bakala-header-account,
.hk-actions .dk-button.header-cart {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hk-border);
  border-radius: 12px;
  background: var(--hk-card);
  padding: 7px 12px;
  min-height: 46px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  box-shadow: none;
}
.hk-actions .bakala-header-account:hover,
.hk-actions .dk-button.header-cart:hover {
  border-color: var(--hk-primary);
  background: var(--hk-card);
}
.hk-actions .bakala-header-account-text,
.hk-actions .header-cart-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.4;
}
.hk-actions .bakala-header-account-text small,
.hk-actions .header-cart-text small {
  font-size: 11px;
  color: var(--hk-muted-fg);
}
.hk-actions .bakala-header-account-text strong,
.hk-actions .header-cart-text strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hk-fg);
}
.hk-actions .header-bk_skeleton { display: none !important; }
.hk-actions .cart-box { position: relative; }
.hk-actions .dk-button-container { margin: 0; }

/* strip bakala's colored cart button — same neutral chip as account */
.hk-actions .dk-button.green,
.hk-actions .dk-button.header-cart,
.hk-actions .dk-button.header-cart .dk-button-label,
.hk-actions .dk-button.header-cart .header-cart-icon {
  background: var(--hk-card) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--hk-fg) !important;
}
.hk-actions .dk-button.header-cart { border: 1px solid var(--hk-border) !important; }
.hk-actions .dk-button.header-cart .dk-button-labelname,
.hk-actions .dk-button.header-cart .fa-angle-down { display: none !important; }
.hk-actions .header-cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.hk-actions .dk-button.header-cart { position: relative !important; }
.hk-actions .header-cart-icon .dk-button-label { display: flex; align-items: center; position: static; }
.hk-actions .dk-button-icon-cart { display: none !important; }
.hk-actions .header-cart-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23272e38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: center;
}
/* count badge pinned to the chip's top corner (anchored to the chip, not the icon — it was overlapping the label) */
.hk-actions .cart-items-count {
  position: absolute !important;
  top: -7px;
  inset-inline-start: -7px;
  inset-inline-end: auto !important;
  bottom: auto !important;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hk-primary) !important;
  color: #fff !important;
  border: 2px solid var(--hk-card);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  padding-inline: 4px;
  line-height: 1;
  margin: 0 !important;
}
.hk-actions .header-cart-text strong.bill,
.hk-actions .header-cart-text .price {
  color: var(--hk-fg) !important;
  font-size: 12.5px;
}
.hk-actions .header-cart-text .price .woocommerce-Price-currencySymbol { font-size: 10px; }

/* --- tier 3: nav + mega menu --- */
.hk-tier3 {
  position: relative;
  background: var(--hk-card);
  border-top: 1px solid var(--hk-border);
}
.hk-tier3-in {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
}
.hk-cats-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hk-accent);
  color: var(--hk-accent-fg);
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  transition: filter .15s;
  font-family: var(--hk-font);
}
.hk-cats-btn:hover { filter: brightness(.97); }
.hk-cats-btn[aria-expanded="true"] {
  background: var(--hk-primary);
  color: var(--hk-primary-fg);
}
.hk-tier3-sep {
  width: 1px;
  height: 20px;
  background: var(--hk-border);
  margin-inline: 10px;
}
.hk-nav-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hk-fg);
  padding: 9px 9px;
  border-radius: 9px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
/* فقط ۳ دستهٔ پرفروش اینجا می‌آید؛ باقی درخت پشت دکمهٔ مگامنو است — بدون اسکرول افقی. */
.hk-nav-cats {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hk-nav-link:hover {
  color: var(--hk-primary);
  background: var(--hk-secondary);
}
/* پیگیری سفارشات / تماس با ما — utility links grouped at the far end of the nav row */
.hk-nav-util { color: var(--hk-muted-fg); }
.hk-tier3-in .hk-nav-util:nth-last-child(4) { margin-inline-start: auto; }
.hk-nav-sale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hk-destructive);
  font-weight: 700;
  background: rgb(219 42 61 / 8%);
}
.hk-nav-sale:hover {
  color: var(--hk-destructive);
  background: rgb(219 42 61 / 14%);
}

/* mega menu panel */
.hk-megamenu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--hk-card);
  border-top: 1px solid var(--hk-border);
  border-bottom: 1px solid var(--hk-border);
  box-shadow: 0 24px 40px -20px rgb(20 27 36 / 18%);
  z-index: 1029;
}
.hk-megamenu-in {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 24px;
  padding-block: 26px;
}
.hk-megamenu-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hk-megamenu-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--hk-fg);
  padding-bottom: 4px;
}
a.hk-megamenu-title:hover { color: var(--hk-primary); }
.hk-megamenu-link {
  font-size: 13.5px;
  color: var(--hk-muted-fg);
  transition: color .15s;
}
.hk-megamenu-link:hover { color: var(--hk-primary); }

/* neutralize legacy bakala sticky-header remnants */
body.hk-skin .site-header { display: none; }

/* ============================================================
   BREADCRUMB
   ============================================================ */

body.hk-skin .woocommerce-breadcrumb {
  max-width: 1280px;
  margin: 18px auto 0;
  padding-inline: 20px;
  font-size: 12.5px;
  color: var(--hk-muted-fg);
}
body.hk-skin .woocommerce-breadcrumb a {
  color: var(--hk-muted-fg);
}
body.hk-skin .woocommerce-breadcrumb a:hover { color: var(--hk-primary); }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */

.hk-product { padding-block: 18px 40px; }

.hk-product-grid {
  display: grid;
  width: 100%; /* a theme rule shrink-wraps grid containers here — pin explicitly */
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}

/* bakala's floating meta bar (sku "نامعلوم" + comment count) — not part of this design */
body.hk-skin .main-woo-div > .product_meta_info,
body.hk-skin .product_meta_info { display: none !important; }

/* --- gallery card --- */
.hk-gallery {
  position: relative;
  background: var(--hk-card);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 16px;
}
.hk-gallery .onsale { display: none !important; } /* replaced by .hk-gallery-off percent badge */
.hk-gallery-off {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 3;
  background: var(--hk-destructive);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  padding: 4px 10px;
  line-height: 1.6;
}
.hk-gallery .product-gallery-bk_skeleton,
.hk-gallery .bakala-gallery-thumbnails-bk_skeleton { display: none !important; }
.hk-gallery .woocommerce-product-gallery { width: 100%; }

/* action rail — bakala positions the .product-gallery-warp wrapper with negative margins; rebuild it as a card */
.hk-gallery .product-gallery-warp {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  inset-inline-end: 14px; /* left edge in RTL, like the design */
  margin: 0 !important;
  z-index: 3;
}
.hk-gallery .product-gallery-warp > ul {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 5px !important;
  list-style: none;
  background: var(--hk-card) !important;
  border: 1px solid var(--hk-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px -12px rgb(20 27 36 / 20%) !important;
}
.hk-gallery .product-gallery-warp > ul li {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 34px !important;
  height: 34px !important;
  inset: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.hk-gallery .product-gallery-warp a.icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  position: static !important;
  border-radius: 9px;
  color: var(--hk-muted-fg) !important;
  transition: background .15s, color .15s;
}
.hk-gallery .product-gallery-warp a.icon:hover {
  background: var(--hk-secondary);
  color: var(--hk-primary) !important;
}
.hk-gallery .product-gallery-warp .compare-button { margin: 0; }

/* thumbnails */
.hk-gallery .bakala-control-thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 0;
  padding: 0;
}
.hk-gallery .bakala-control-thumbs li {
  width: 68px;
  height: 68px;
  border: 2px solid var(--hk-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--hk-card);
  transition: border-color .15s;
}
.hk-gallery .bakala-control-thumbs li:hover,
.hk-gallery .bakala-control-thumbs li.flex-active,
.hk-gallery .bakala-control-thumbs li.active {
  border-color: var(--hk-primary);
}
.hk-gallery .bakala-control-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

/* --- info column --- */
.hk-info { min-width: 0; }
.hk-brand-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--hk-accent);
  color: var(--hk-accent-fg);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
}
.hk-title {
  margin: 12px 0 0;
  font-size: 23px;
  line-height: 1.7;
  font-weight: 800;
  color: var(--hk-fg);
}
.hk-title-en {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--hk-muted-fg);
  text-align: end;
}
.hk-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-size: 13.5px;
}
.hk-meta-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.hk-muted { color: var(--hk-muted-fg); font-weight: 400; }
.hk-meta-sep {
  width: 1px;
  height: 16px;
  background: var(--hk-border);
}
.hk-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hk-muted-fg);
  transition: color .15s;
}
.hk-meta-link:hover { color: var(--hk-primary); }
.hk-excerpt {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 2;
  color: var(--hk-muted-fg);
}
.hk-spec-chips {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 22px 0 0;
}
.hk-spec-chip {
  background: var(--hk-card);
  border: 1px solid var(--hk-border);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 0;
}
.hk-spec-chip dt {
  font-size: 12px;
  color: var(--hk-muted-fg);
}
.hk-spec-chip dd {
  margin: 5px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hk-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hk-all-specs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--hk-primary);
  font-size: 13.5px;
  font-weight: 600;
  transition: gap .15s;
}
.hk-all-specs:hover { gap: 10px; color: var(--hk-primary); }

/* --- buy box --- */
.hk-buybox-card {
  position: sticky;
  top: 170px;
  background: var(--hk-card);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 20px;
}
.hk-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hk-success);
}
.hk-stock-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--hk-success);
}
.hk-stock-ping {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgb(38 158 95 / 70%);
  animation: hk-ping 1.2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes hk-ping {
  75%, 100% { transform: scale(2.4); opacity: 0; }
}
.hk-price-block {
  margin-top: 16px;
  padding-inline-end: 150px; /* keeps clear of the inline qty stepper */
}
.hk-price-old-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--hk-muted-fg);
}
.hk-off-badge {
  background: rgb(219 42 61 / 10%);
  color: var(--hk-destructive);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 7px;
  line-height: 1.6;
}
.hk-price-old-row s .woocommerce-Price-currencySymbol { display: none; }
.hk-price-now {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--hk-fg);
}
.hk-price-now .woocommerce-Price-currencySymbol {
  font-size: 14px;
  font-weight: 400;
  color: var(--hk-muted-fg);
  margin-inline-start: 4px;
}
.hk-price-now del { color: var(--hk-muted-fg); font-size: 15px; font-weight: 400; }
.hk-price-now ins { text-decoration: none; }

/* cart form */
.hk-cart-area { margin-top: 18px; }
.hk-cart-area form.cart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  position: relative;
}
/* bakala renders qty → cashback → button; match v0 order: button → cashback, qty floats up next to price */
.hk-cart-area form.cart .add-to-cart-holder { order: 2; width: 100%; margin: 0; }
.hk-cart-area form.cart .bakala-product-cashback-box { order: 3; }
/* our styled stock note replaces bakala's */
.hk-cart-area .alert-stock,
.hk-cart-area .product-remain,
.hk-cart-area p.stock { display: none !important; }
/* bakala's empty helper nodes each add a flex gap — remove them */
.hk-cart-area form.cart > p:empty,
.hk-cart-area form.cart p.single_quantity,
.hk-cart-area form.cart .modified-info {
  display: none !important;
  margin: 0 !important;
}
/* qty stepper sits beside the price row, centered against the price line.
   note: the <p class="single_quantity"> auto-closes (p can't contain div), so .quantity is a form child */
.hk-cart-area form.cart > .quantity {
  position: absolute;
  bottom: calc(100% + 12px);
  inset-inline-end: 0;
  margin: 0;
  z-index: 2;
}
/* trash at min qty removes the item from the cart */
.hk-cart-area .quantity.hk-at-min .bakala-minus { cursor: pointer; }
.hk-cart-area .quantity.hk-at-min .bakala-minus:hover { background: rgb(219 42 61 / 8%); }
/* [+] on the right, trash/[−] on the left (order beats bakala's row-reverse) */
.hk-cart-area .quantity .bakala-plus { order: 1 !important; }
.hk-cart-area .quantity input.qty { order: 0 !important; }
.hk-cart-area .quantity .bakala-minus { order: -1 !important; }
.hk-cart-area .quantity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border: 1px solid var(--hk-border) !important;
  border-radius: 16px;
  padding: 8px 12px !important;
  background: var(--hk-card) !important;
  box-shadow: 0 4px 14px rgb(20 27 36 / 8%) !important;
  position: relative;
}
/* Persian digit overlay (input keeps the machine-readable Latin value, fully hidden visually) */
.hk-cart-area .quantity input.qty {
  color: transparent !important;
  opacity: 0 !important;
  text-shadow: none !important;
}
.hk-qty-fa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px; /* optical: Persian digits carry their ink high in the em box */
  pointer-events: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--hk-destructive);
  line-height: 1;
}
/* beat bakala's later-loading 21px width with higher specificity */
.hk-cart-area .quantity .bakala-plus,
.hk-cart-area .quantity .bakala-minus {
  width: 36px !important;
  min-width: 36px !important;
}
.hk-cart-area .quantity input.qty {
  border: none !important;
  background: transparent !important;
  width: 32px !important;
  height: 36px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--hk-destructive) !important;
  font-family: var(--hk-font);
  box-shadow: none !important;
  -moz-appearance: textfield;
}
.hk-cart-area .quantity input.qty::-webkit-outer-spin-button,
.hk-cart-area .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hk-cart-area .bakala-plus,
.hk-cart-area .bakala-minus {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
  background: none;
  border: none;
  position: static !important;
}
.hk-cart-area .bakala-plus:hover,
.hk-cart-area .bakala-minus:hover { background: var(--hk-secondary); }
/* bakala's icon font draws boxed glyphs — swap for plain +/− like the reference */
.hk-cart-area .quantity .icon-bakala-plus,
.hk-cart-area .quantity .icon-bakala-minus {
  display: block !important;
  font-size: 0 !important;
  width: 16px;
  height: 16px;
  border: none !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.hk-cart-area .quantity .icon-bakala-plus::before,
.hk-cart-area .quantity .icon-bakala-minus::before { content: none !important; }
.hk-cart-area .quantity .icon-bakala-plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23db2a3d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}
.hk-cart-area .quantity .icon-bakala-minus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23db2a3d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
/* at minimum quantity the minus becomes a trash icon, like Digikala */
.hk-cart-area .quantity.hk-at-min .icon-bakala-minus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23db2a3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}
.hk-cart-area a.single_add_to_cart_button,
.hk-cart-area button.single_add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 12px;
  background: var(--hk-primary);
  color: var(--hk-primary-fg) !important;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s;
  font-family: var(--hk-font);
  box-shadow: none;
}
.hk-cart-area a.single_add_to_cart_button:hover,
.hk-cart-area button.single_add_to_cart_button:hover {
  background: var(--hk-primary);
  filter: brightness(1.1);
}
.hk-cart-area .single_add_to_cart_button .dk-button-container {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  background: none !important;
  box-shadow: none !important;
}
/* kill bakala's decorative icon boxes inside the button */
.hk-cart-area .single_add_to_cart_button::before,
.hk-cart-area .single_add_to_cart_button::after,
.hk-cart-area .single_add_to_cart_button .dk-button-container::after,
.hk-cart-area .single_add_to_cart_button i {
  content: none !important;
  display: none !important;
}
/* white cart icon before the label, like the reference */
.hk-cart-area .single_add_to_cart_button .dk-button-container::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center/contain no-repeat !important;
  position: static !important;
  margin: 0 !important;
}

/* gift-credit (bakala cashback) — green pill with gift icon, like the reference */
body.hk-skin .bakala-product-cashback-box {
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: rgb(38 158 95 / 10%) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
  font-size: 13.5px !important;
  color: var(--hk-success) !important;
  margin: 0 !important;
}
body.hk-skin .bakala-product-cashback-box .bakala-cashback-text,
body.hk-skin .bakala-product-cashback-box .bakala-cashback-amount,
body.hk-skin .bakala-product-cashback-box .woocommerce-Price-amount,
body.hk-skin .bakala-product-cashback-box .woocommerce-Price-amount bdi,
body.hk-skin .bakala-product-cashback-box .woocommerce-Price-currencySymbol {
  color: var(--hk-success) !important;
  font-weight: 600;
}
body.hk-skin .bakala-product-cashback-box .bakala-cashback-amount { font-weight: 800; }
body.hk-skin .bakala-cashback-bullet { display: none !important; }
body.hk-skin .bakala-cashback-icon {
  font-size: 0 !important; /* hides the 🎁 emoji */
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23269e5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* SnappPay widget — keep the plugin logo, place it at the far (left) side like the reference chip */
body.hk-skin .snapppay-widget {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px dashed var(--hk-border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin: 12px 0 0 !important;
  background: var(--hk-card) !important;
}
body.hk-skin .snapppay-widget-image {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
  flex-shrink: 0;
}
body.hk-skin .snapppay-widget-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hk-fg);
}
body.hk-skin .snapppay-widget-title .woocommerce-Price-amount { font-weight: 800; }
body.hk-skin .snapppay-widget-content {
  font-size: 12px;
  color: var(--hk-muted-fg);
  line-height: 1.9;
}

/* assurance list */
.hk-assurance {
  display: grid;
  width: 100%;
  gap: 11px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--hk-border);
  list-style: none;
}
.hk-assurance li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--hk-muted-fg);
}
.hk-assurance li svg { color: var(--hk-primary); flex-shrink: 0; }

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

.hk-content { width: 100%; margin-top: 34px; scroll-margin-top: 170px; }

body.hk-skin .woocommerce-tabs {
  width: 100% !important;
  background: var(--hk-card);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  overflow: hidden;
}
body.hk-skin .woocommerce-Tabs-panel { width: 100%; }
/* real tab switching (bakala forces panels visible with !important; JS toggles hk-active) */
body.hk-skin .hk-tabs-ready .woocommerce-Tabs-panel { display: none !important; }
body.hk-skin .hk-tabs-ready .woocommerce-Tabs-panel.hk-active { display: block !important; }
body.hk-skin .woocommerce-tabs ul.wc-tabs,
body.hk-skin .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0 10px;
  list-style: none;
  border-bottom: 1px solid var(--hk-border);
  background: var(--hk-card);
  overflow-x: auto;
}
body.hk-skin .woocommerce-tabs ul.wc-tabs li,
body.hk-skin .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
}
body.hk-skin .woocommerce-tabs ul.wc-tabs li a,
body.hk-skin .woocommerce-tabs ul.tabs li a {
  position: relative;
  display: inline-block;
  padding: 16px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hk-muted-fg);
  white-space: nowrap;
  transition: color .15s;
}
body.hk-skin .woocommerce-tabs ul.wc-tabs li a:hover { color: var(--hk-fg); }
/* bakala tab decorations (icon boxes + zero-count badges) — clean text tabs like the design */
body.hk-skin .woocommerce-tabs ul.wc-tabs li a::before,
body.hk-skin .woocommerce-tabs ul.wc-tabs li a::after,
body.hk-skin .woocommerce-tabs ul.wc-tabs li a i,
body.hk-skin .woocommerce-tabs ul.wc-tabs li a .bakala-icon,
body.hk-skin .woocommerce-tabs ul.wc-tabs li a span,
body.hk-skin .woocommerce-tabs ul.wc-tabs li::before,
body.hk-skin .woocommerce-tabs ul.wc-tabs li::after {
  content: none !important;
  display: none !important;
}
body.hk-skin .woocommerce-tabs ul.wc-tabs.sticky {
  position: static !important;
  top: auto !important;
}
body.hk-skin .woocommerce-tabs ul.wc-tabs li.active a,
body.hk-skin .woocommerce-tabs ul.tabs li.active a {
  color: var(--hk-primary);
}
body.hk-skin .woocommerce-tabs ul.wc-tabs li.active a,
body.hk-skin .woocommerce-tabs ul.tabs li.active a {
  box-shadow: inset 0 -3px 0 var(--hk-primary);
}
body.hk-skin .woocommerce-Tabs-panel {
  padding: 26px 28px;
}
body.hk-skin .woocommerce-Tabs-panel > h2:first-child { display: none; }
body.hk-skin .woocommerce-Tabs-panel h2 {
  font-size: 18px;
  font-weight: 800;
}
body.hk-skin .woocommerce-Tabs-panel h3 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 26px;
}
body.hk-skin .woocommerce-Tabs-panel p,
body.hk-skin .woocommerce-Tabs-panel li {
  line-height: 2.1;
  color: #3a424d;
  font-size: 14.5px;
}

/* specs table */
body.hk-skin table.woocommerce-product-attributes,
body.hk-skin table.shop_attributes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}
body.hk-skin table.shop_attributes th,
body.hk-skin table.woocommerce-product-attributes th {
  width: 220px;
  text-align: start;
  background: var(--hk-secondary);
  color: var(--hk-muted-fg);
  font-weight: 500;
  font-size: 13.5px;
  padding: 12px 16px;
  border: none;
  border-radius: 0 10px 10px 0;
}
body.hk-skin table.shop_attributes td,
body.hk-skin table.woocommerce-product-attributes td {
  background: var(--hk-card);
  border: 1px solid var(--hk-border);
  border-inline-start: none;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 10px 0 0 10px;
  font-style: normal;
}
body.hk-skin table.shop_attributes td p { margin: 0; }

/* ============================================================
   RELATED / UPSELL SECTIONS (light restyle)
   ============================================================ */

body.hk-skin .related.products > h2,
body.hk-skin .upsells.products > h2,
body.hk-skin section.related h2.bakala-section-title,
body.hk-skin .bakala-carousel-header h3,
body.hk-skin .bakala-carousel-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--hk-fg);
}
body.hk-skin .related.products,
body.hk-skin .upsells.products {
  margin-top: 34px;
}
body.hk-skin .section-products-carousel {
  background: var(--hk-card);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  margin-top: 24px;
  padding: 22px 22px 10px;
}
body.hk-skin .section-products-carousel header .related-title,
body.hk-skin .section-products-carousel .related-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--hk-fg);
  background: none;
  padding: 0;
}
body.hk-skin .section-products-carousel .related-title::before { background: var(--hk-primary); }

/* ============================================================
   RESPONSIVE (narrow desktop windows; phones use bakala mobile)
   ============================================================ */

@media (max-width: 1200px) {
  .hk-product-grid {
    grid-template-columns: minmax(300px, 1fr) 1fr;
  }
  .hk-buybox { grid-column: 1 / -1; }
  .hk-buybox-card { position: static; }
}

@media (max-width: 900px) {
  .hk-product-grid { grid-template-columns: 1fr; }
  .hk-tier2-in { flex-wrap: wrap; }
  .hk-megamenu-in { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   VARIABLE PRODUCTS — variations + variation add-to-cart inside the buy box
   (child override of the parent's add-to-cart/variable.php keeps the markup core-shaped)
   ============================================================ */
.hk-cart-area form.hk-variations {
  display: block;
  background: none;
  box-shadow: none;
  padding: 0;
  width: 100%;
}
.hk-cart-area .variations {
  width: 100%;
  margin: 0 0 14px;
  border: 0;
  background: none;
}
/* the swatches plugin lays its own rows out (display:grid) — only touch plain rows */
.hk-cart-area .variations tr:not([class*="vi-wpvs"]) th,
.hk-cart-area .variations tr:not([class*="vi-wpvs"]) td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: start;
  background: none;
}
.hk-cart-area .variations th.label label {
  display: inline-block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hk-muted-fg);
}
.hk-cart-area .variations td.value select {
  width: 100%;
  height: 44px;
  border: 1px solid var(--hk-border);
  border-radius: 10px;
  background: var(--hk-card);
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--hk-fg);
}
.hk-cart-area a.reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--hk-muted-fg);
}
.hk-cart-area .woocommerce-variation-price {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 800;
}
.hk-cart-area .woocommerce-variation-availability p.stock { display: block !important; margin: 0 0 10px; font-size: 13px; }
.hk-cart-area .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
/* simple products float the stepper up next to the price (absolute); variable products
   keep it in flow beside the button — position stays relative so .hk-qty-fa can overlay it */
.hk-cart-area .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.hk-cart-area .woocommerce-variation-add-to-cart .quantity {
  position: relative !important;
  bottom: auto !important;
  inset-inline-end: auto !important;
  flex: 0 0 auto;
  margin: 0 !important;
}
.hk-cart-area .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.hk-cart-area .woocommerce-variation-add-to-cart .add-to-cart-holder {
  order: 0 !important;
  flex: 1 1 auto;
  width: auto !important;
  margin: 0 !important;
}
/* the swatches plugin renders the reset link as a full button — keep it a quiet text link */
.hk-cart-area a.reset_variations {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--hk-muted-fg) !important;
}

/* variable: the range price at the top is replaced by the selected variation's price */
.hk-buybox-card:has(form.hk-variations) .hk-price-block { display: none; }
.hk-cart-area .woocommerce-variation-price .price,
.hk-cart-area .woocommerce-variation-price .amount {
  font-size: 26px;
  font-weight: 800;
  color: var(--hk-fg);
}
.hk-cart-area .woocommerce-variation-price del { display: none; }