/* =========================================================
   JOOD APP STOREFRONT
   00 RESET + ISOLATION
   Place this block at the very top of: assets/css/albakht-app.css
========================================================= */

/* =========================================================
   00.01 ROOT ISOLATION
========================================================= */

#albakht-app,
#albakht-app *,
#albakht-app *::before,
#albakht-app *::after {
  box-sizing: border-box;
}

#albakht-app {
  direction: rtl;
  unicode-bidi: isolate;
  isolation: isolate;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #171a22;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  text-align: right;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#albakht-app[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

#albakht-app[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* =========================================================
   00.02 CONTENT FLOW RESET
========================================================= */

#albakht-app :where(
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  main,
  menu,
  nav,
  section,
  summary
) {
  display: block;
}

#albakht-app :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd,
  ul,
  ol,
  menu,
  pre
) {
  margin: 0;
  padding: 0;
}

#albakht-app :where(ul, ol, menu) {
  list-style: none;
}

#albakht-app :where(hr) {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid currentColor;
  color: inherit;
  opacity: .14;
}

#albakht-app :where(address) {
  font-style: normal;
}

#albakht-app :where(strong, b) {
  font-weight: 800;
}

#albakht-app :where(small) {
  font-size: .875em;
}

#albakht-app :where(mark) {
  color: inherit;
  background: transparent;
}

#albakht-app :where(code, kbd, samp, pre) {
  font-family: inherit;
}

/* =========================================================
   00.03 LINKS RESET
========================================================= */

#albakht-app :where(a) {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  -webkit-text-decoration-skip: objects;
}

#albakht-app :where(a:hover, a:focus, a:active) {
  color: inherit;
  text-decoration: none;
}

#albakht-app :where(a:focus) {
  outline: none;
}

#albakht-app :where(a:focus-visible) {
  outline: 3px solid rgba(200, 166, 121, .34);
  outline-offset: 3px;
}

/* =========================================================
   00.04 MEDIA RESET
========================================================= */

#albakht-app :where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
  max-width: 100%;
}

#albakht-app :where(img, video, canvas) {
  height: auto;
}

#albakht-app :where(img) {
  border-style: none;
  vertical-align: middle;
}

#albakht-app :where(svg) {
  width: 1em;
  height: 1em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
}

#albakht-app :where(svg path, svg circle, svg rect, svg line, svg polyline, svg polygon) {
  vector-effect: non-scaling-stroke;
}

#albakht-app :where(iframe) {
  width: 100%;
  border: 0;
}

/* =========================================================
   00.05 TABLE RESET
========================================================= */

#albakht-app :where(table) {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

#albakht-app :where(th, td) {
  padding: 0;
  text-align: inherit;
  vertical-align: middle;
}

#albakht-app :where(th) {
  font-weight: 800;
}

/* =========================================================
   00.06 FORM RESET
========================================================= */

#albakht-app :where(
  button,
  input,
  optgroup,
  select,
  textarea
) {
  margin: 0;
  font: inherit;
  color: inherit;
}

#albakht-app :where(button, select) {
  text-transform: none;
}

#albakht-app :where(button, [type="button"], [type="reset"], [type="submit"]) {
  appearance: button;
  -webkit-appearance: button;
  border: 0;
  background: transparent;
  cursor: pointer;
}

#albakht-app :where(button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner) {
  padding: 0;
  border-style: none;
}

#albakht-app :where(button:disabled, input:disabled, select:disabled, textarea:disabled) {
  cursor: not-allowed;
  opacity: .58;
}

#albakht-app :where(input, textarea, select, button) {
  max-width: 100%;
  min-width: 0;
}

#albakht-app :where(textarea) {
  overflow: auto;
  resize: vertical;
}

#albakht-app :where(select) {
  word-wrap: normal;
}

#albakht-app :where([type="search"]) {
  appearance: textfield;
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

#albakht-app :where([type="search"]::-webkit-search-decoration) {
  -webkit-appearance: none;
}

#albakht-app :where([type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button) {
  height: auto;
}

#albakht-app :where(input[type="hidden"]) {
  display: none !important;
}

#albakht-app :where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#albakht-app :where(legend) {
  display: table;
  max-width: 100%;
  padding: 0;
  color: inherit;
  white-space: normal;
}

#albakht-app :where(label) {
  display: inline-block;
  cursor: pointer;
}

#albakht-app :where(input::placeholder, textarea::placeholder) {
  opacity: 1;
}

/* =========================================================
   00.07 DETAILS / DIALOG / PROGRESS RESET
========================================================= */

#albakht-app :where(details) {
  display: block;
}

#albakht-app :where(summary) {
  display: list-item;
  cursor: pointer;
}

#albakht-app :where(dialog) {
  padding: 0;
  border: 0;
}

#albakht-app :where(progress) {
  vertical-align: baseline;
}

/* =========================================================
   00.08 WORDPRESS / THEME SAFETY INSIDE JOOD ONLY
========================================================= */

#albakht-app :where(.alignleft, .alignright, .aligncenter) {
  float: none;
  display: block;
  margin: 0;
}

#albakht-app :where(.wp-caption) {
  max-width: 100%;
}

#albakht-app :where(.wp-caption img) {
  width: 100%;
}

#albakht-app :where(.screen-reader-text) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* =========================================================
   00.09 WOOCOMMERCE SAFETY INSIDE JOOD ONLY
========================================================= */

#albakht-app :where(.woocommerce, .woocommerce-page) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#albakht-app :where(.woocommerce form, .woocommerce-page form) {
  margin: 0;
}

#albakht-app :where(.woocommerce p, .woocommerce-page p) {
  margin: 0;
}

#albakht-app :where(.woocommerce ul, .woocommerce-page ul) {
  margin: 0;
  padding: 0;
}

#albakht-app :where(.woocommerce-error, .woocommerce-info, .woocommerce-message) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  list-style: none;
}

#albakht-app :where(.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before) {
  display: none;
  content: none;
}

#albakht-app :where(.woocommerce-error li, .woocommerce-info li, .woocommerce-message li) {
  margin: 0;
  padding: 0;
}

#albakht-app :where(.woocommerce form .form-row) {
  margin: 0;
  padding: 0;
}

#albakht-app :where(.woocommerce form .form-row-first, .woocommerce form .form-row-last) {
  float: none;
  width: auto;
}

#albakht-app :where(.woocommerce form .form-row-wide) {
  clear: none;
}

#albakht-app :where(.woocommerce table.shop_table) {
  margin: 0;
  border: 0;
  border-radius: 0;
}

#albakht-app :where(.woocommerce table.shop_table th, .woocommerce table.shop_table td) {
  border: 0;
}

#albakht-app :where(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: inherit;
  font-weight: inherit;
  box-shadow: none;
}

/* =========================================================
   00.10 APP DIRECT CHILDREN SAFETY
========================================================= */

#albakht-app :where(.albakht-app-main, .albakht-app-content) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  position: relative;
}

#albakht-app :where(.albakht-app-content > *) {
  min-width: 0;
}

#albakht-app :where(.albakht-app-content > :first-child) {
  margin-top: 0;
}

#albakht-app :where(.albakht-app-content > :last-child) {
  margin-bottom: 0;
}

/* =========================================================
   00.11 TAP / SCROLL / SELECTION
========================================================= */

#albakht-app {
  -webkit-tap-highlight-color: rgba(200, 166, 121, .18);
}

#albakht-app ::selection {
  background: rgba(200, 166, 121, .28);
  color: #171a22;
}

#albakht-app :where([hidden]) {
  display: none !important;
}

/* =========================================================
   00.12 REDUCED MOTION BASE
========================================================= */

@media (prefers-reduced-motion: reduce) {
  #albakht-app *,
  #albakht-app *::before,
  #albakht-app *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   01 VARIABLES
   Paste the next batch directly under this line
========================================================= */
/* =========================================================
   01 VARIABLES
   Design tokens for the full Albakht app interface.
   Paste this block directly under 00 Reset + Isolation.
========================================================= */

/* =========================================================
   01.01 BRAND COLORS
========================================================= */

#albakht-app {
  --albakht-ink: #171a22;
  --albakht-ink-2: #2A180F;
  --albakht-ink-3: #2b3140;

  --albakht-gold: #c8a679;
  --albakht-gold-2: #d8bd91;
  --albakht-gold-3: #ead6b7;
  --albakht-gold-4: #f5ead8;

  --albakht-cream: #f6efe4;
  --albakht-cream-2: #fbf7ef;
  --albakht-cream-3: #fffaf2;

  --albakht-white: #FFFFFF;
  --albakht-white-soft: #fdfbf8;

  --albakht-brown: #8b5a36;
  --albakht-brown-2: #a06d45;

  --albakht-text: #242124;
  --albakht-text-soft: #4b4650;
  --albakht-muted: #756c60;
  --albakht-muted-2: #91877a;
  --albakht-muted-3: #aaa095;

  --albakht-border: #e9ddce;
  --albakht-border-2: #dfcfba;
  --albakht-border-3: #d2bea3;

  --albakht-success: #1f8a5b;
  --albakht-success-soft: #eaf7f1;

  --albakht-danger: #b84034;
  --albakht-danger-soft: #fff0ee;

  --albakht-warning: #b87921;
  --albakht-warning-soft: #fff6e7;

  --albakht-info: #2f6f8f;
  --albakht-info-soft: #eef8fb;
}

/* =========================================================
   01.02 PAGE BACKGROUNDS
========================================================= */

#albakht-app {
  --albakht-page-bg: #FFFFFF;
  --albakht-page-bg-soft: #fdfbf8;
  --albakht-page-bg-warm: #fbf7ef;

  --albakht-surface: #FFFFFF;
  --albakht-surface-soft: #fffaf2;
  --albakht-surface-muted: #f8f3eb;
  --albakht-surface-glass: rgba(255, 255, 255, .84);

  --albakht-overlay-light: rgba(255, 255, 255, .72);
  --albakht-overlay-warm: rgba(251, 247, 239, .82);
  --albakht-overlay-gold: rgba(200, 166, 121, .12);

  --albakht-dark-surface: #171a22;
  --albakht-dark-surface-2: #2A180F;
  --albakht-dark-text: #FFFFFF;
  --albakht-dark-muted: rgba(255, 255, 255, .72);
}

/* =========================================================
   01.03 TYPOGRAPHY SCALE
========================================================= */

#albakht-app {
  --albakht-font-family: inherit;

  --albakht-fs-10: 10px;
  --albakht-fs-11: 11px;
  --albakht-fs-12: 12px;
  --albakht-fs-13: 13px;
  --albakht-fs-14: 14px;
  --albakht-fs-15: 15px;
  --albakht-fs-16: 16px;
  --albakht-fs-17: 17px;
  --albakht-fs-18: 18px;
  --albakht-fs-20: 20px;
  --albakht-fs-22: 22px;
  --albakht-fs-24: 24px;
  --albakht-fs-28: 28px;
  --albakht-fs-32: 32px;
  --albakht-fs-38: 38px;
  --albakht-fs-44: 44px;

  --albakht-lh-tight: 1.15;
  --albakht-lh-heading: 1.25;
  --albakht-lh-body: 1.7;
  --albakht-lh-loose: 1.9;

  --albakht-fw-regular: 400;
  --albakht-fw-medium: 500;
  --albakht-fw-semibold: 700;
  --albakht-fw-bold: 800;
  --albakht-fw-black: 900;
  --albakht-fw-heavy: 950;

  --albakht-letter-tight: -.6px;
  --albakht-letter-normal: 0;
}

/* =========================================================
   01.04 LAYOUT WIDTHS
========================================================= */

#albakht-app {
  --albakht-max: 1180px;
  --albakht-max-wide: 1320px;
  --albakht-max-narrow: 920px;
  --albakht-max-form: 760px;
  --albakht-max-card: 560px;

  --albakht-safe-x: clamp(12px, 2.4vw, 28px);
  --albakht-safe-y: clamp(14px, 2.6vw, 30px);

  --albakht-main-top: clamp(12px, 2vw, 22px);
  --albakht-main-bottom: clamp(34px, 5vw, 70px);

  --albakht-section-y: clamp(18px, 3vw, 36px);
  --albakht-section-y-sm: clamp(12px, 2vw, 22px);
  --albakht-section-y-lg: clamp(26px, 4vw, 52px);
}

/* =========================================================
   01.05 SPACING SCALE
========================================================= */

#albakht-app {
  --albakht-space-0: 0;
  --albakht-space-1: 2px;
  --albakht-space-2: 4px;
  --albakht-space-3: 6px;
  --albakht-space-4: 8px;
  --albakht-space-5: 10px;
  --albakht-space-6: 12px;
  --albakht-space-7: 14px;
  --albakht-space-8: 16px;
  --albakht-space-9: 18px;
  --albakht-space-10: 20px;
  --albakht-space-11: 22px;
  --albakht-space-12: 24px;
  --albakht-space-14: 28px;
  --albakht-space-16: 32px;
  --albakht-space-18: 36px;
  --albakht-space-20: 40px;
  --albakht-space-24: 48px;
  --albakht-space-28: 56px;
  --albakht-space-32: 64px;

  --albakht-gap-xs: 6px;
  --albakht-gap-sm: 8px;
  --albakht-gap-md: 12px;
  --albakht-gap-lg: 16px;
  --albakht-gap-xl: 20px;
  --albakht-gap-2xl: 24px;
  --albakht-gap-3xl: 32px;
}

/* =========================================================
   01.06 RADIUS SCALE
========================================================= */

#albakht-app {
  --albakht-radius-0: 0;
  --albakht-radius-xs: 8px;
  --albakht-radius-sm: 10px;
  --albakht-radius-md: 14px;
  --albakht-radius-lg: 18px;
  --albakht-radius-xl: 22px;
  --albakht-radius-2xl: 26px;
  --albakht-radius-3xl: 32px;
  --albakht-radius-card: 20px;
  --albakht-radius-panel: 24px;
  --albakht-radius-hero: 28px;
  --albakht-radius-pill: 999px;
}

/* =========================================================
   01.07 BORDERS
========================================================= */

#albakht-app {
  --albakht-border-light: 1px solid rgba(233, 221, 206, .72);
  --albakht-border-normal: 1px solid rgba(233, 221, 206, .95);
  --albakht-border-strong: 1px solid rgba(210, 190, 163, .95);
  --albakht-border-gold: 1px solid rgba(200, 166, 121, .46);
  --albakht-border-dark-soft: 1px solid rgba(23, 26, 34, .08);
  --albakht-border-white-soft: 1px solid rgba(255, 255, 255, .18);
}

/* =========================================================
   01.08 SHADOWS
========================================================= */

#albakht-app {
  --albakht-shadow-none: none;

  --albakht-shadow-hair: 0 1px 0 rgba(23, 26, 34, .04);
  --albakht-shadow-xs: 0 4px 14px rgba(23, 26, 34, .045);
  --albakht-shadow-sm: 0 8px 24px rgba(23, 26, 34, .065);
  --albakht-shadow-md: 0 14px 38px rgba(23, 26, 34, .085);
  --albakht-shadow-lg: 0 22px 58px rgba(23, 26, 34, .11);

  --albakht-shadow-gold-xs: 0 4px 14px rgba(200, 166, 121, .12);
  --albakht-shadow-gold-sm: 0 10px 28px rgba(200, 166, 121, .16);

  --albakht-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .72);
  --albakht-shadow-focus: 0 0 0 4px rgba(200, 166, 121, .18);
}

/* =========================================================
   01.09 TRANSITIONS
========================================================= */

#albakht-app {
  --albakht-speed-fast: 140ms;
  --albakht-speed: 220ms;
  --albakht-speed-slow: 360ms;

  --albakht-ease: cubic-bezier(.2, .75, .25, 1);
  --albakht-ease-out: cubic-bezier(.16, 1, .3, 1);
  --albakht-ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --albakht-transition-base:
    color var(--albakht-speed) var(--albakht-ease),
    background-color var(--albakht-speed) var(--albakht-ease),
    border-color var(--albakht-speed) var(--albakht-ease),
    box-shadow var(--albakht-speed) var(--albakht-ease),
    transform var(--albakht-speed) var(--albakht-ease);

  --albakht-transition-fast:
    color var(--albakht-speed-fast) var(--albakht-ease),
    background-color var(--albakht-speed-fast) var(--albakht-ease),
    border-color var(--albakht-speed-fast) var(--albakht-ease),
    transform var(--albakht-speed-fast) var(--albakht-ease);
}

/* =========================================================
   01.10 BUTTON TOKENS
========================================================= */

#albakht-app {
  --albakht-btn-height-xs: 34px;
  --albakht-btn-height-sm: 40px;
  --albakht-btn-height-md: 46px;
  --albakht-btn-height-lg: 52px;
  --albakht-btn-height-xl: 58px;

  --albakht-btn-pad-xs: 7px 11px;
  --albakht-btn-pad-sm: 9px 13px;
  --albakht-btn-pad-md: 11px 16px;
  --albakht-btn-pad-lg: 13px 20px;
  --albakht-btn-pad-xl: 15px 24px;

  --albakht-btn-bg-primary: #171a22;
  --albakht-btn-bg-primary-hover: #2A180F;
  --albakht-btn-text-primary: #FFFFFF;

  --albakht-btn-bg-gold: #c8a679;
  --albakht-btn-bg-gold-hover: #d8bd91;
  --albakht-btn-text-gold: #171a22;

  --albakht-btn-bg-ghost: #FFFFFF;
  --albakht-btn-bg-ghost-hover: #fffaf2;
  --albakht-btn-text-ghost: #171a22;
}

/* =========================================================
   01.11 FORM TOKENS
========================================================= */

#albakht-app {
  --albakht-field-height-sm: 42px;
  --albakht-field-height: 48px;
  --albakht-field-height-lg: 54px;

  --albakht-field-radius: 16px;
  --albakht-field-radius-sm: 12px;
  --albakht-field-radius-lg: 20px;

  --albakht-field-pad-x: 14px;
  --albakht-field-pad-y: 11px;

  --albakht-field-bg: #FFFFFF;
  --albakht-field-bg-soft: #fdfbf8;
  --albakht-field-border: rgba(233, 221, 206, .98);
  --albakht-field-border-hover: rgba(200, 166, 121, .55);
  --albakht-field-border-focus: rgba(200, 166, 121, .86);

  --albakht-field-text: #171a22;
  --albakht-field-placeholder: rgba(117, 108, 96, .62);
  --albakht-field-label: #242124;

  --albakht-field-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
  --albakht-field-focus-shadow: 0 0 0 4px rgba(200, 166, 121, .16);
}

/* =========================================================
   01.12 CARD TOKENS
========================================================= */

#albakht-app {
  --albakht-card-bg: #FFFFFF;
  --albakht-card-bg-soft: #fffaf2;
  --albakht-card-border: 1px solid rgba(233, 221, 206, .92);
  --albakht-card-border-hover: 1px solid rgba(200, 166, 121, .58);
  --albakht-card-radius: 20px;
  --albakht-card-radius-lg: 24px;
  --albakht-card-shadow: 0 6px 18px rgba(23, 26, 34, .055);
  --albakht-card-shadow-hover: 0 14px 34px rgba(23, 26, 34, .09);

  --albakht-card-pad-xs: 10px;
  --albakht-card-pad-sm: 12px;
  --albakht-card-pad-md: 16px;
  --albakht-card-pad-lg: 20px;
  --albakht-card-pad-xl: 24px;
}

/* =========================================================
   01.13 PRODUCT TOKENS
========================================================= */

#albakht-app {
  --albakht-product-card-radius: 18px;
  --albakht-product-card-pad: 12px;
  --albakht-product-media-radius: 16px;
  --albakht-product-media-bg: #fbf7ef;

  --albakht-product-title-size: 14px;
  --albakht-product-title-lh: 1.45;
  --albakht-product-excerpt-size: 12px;
  --albakht-product-price-size: 15px;

  --albakht-product-grid-gap: 12px;
  --albakht-product-grid-desktop: repeat(4, minmax(0, 1fr));
  --albakht-product-grid-laptop: repeat(3, minmax(0, 1fr));
  --albakht-product-grid-tablet: repeat(2, minmax(0, 1fr));
  --albakht-product-grid-mobile: repeat(2, minmax(0, 1fr));
}

/* =========================================================
   01.14 CART / CHECKOUT / ACCOUNT TOKENS
========================================================= */

#albakht-app {
  --albakht-panel-bg: #FFFFFF;
  --albakht-panel-border: 1px solid rgba(233, 221, 206, .92);
  --albakht-panel-radius: 24px;
  --albakht-panel-pad: clamp(14px, 2vw, 22px);
  --albakht-panel-shadow: 0 8px 24px rgba(23, 26, 34, .06);

  --albakht-summary-width: 360px;
  --albakht-summary-width-lg: 400px;

  --albakht-sidebar-sticky-top: 16px;

  --albakht-step-size: 34px;
  --albakht-icon-box: 42px;
  --albakht-icon-box-sm: 34px;
  --albakht-icon-box-lg: 50px;
}

/* =========================================================
   01.15 MOBILE TOKENS
========================================================= */

#albakht-app {
  --albakht-mobile-safe-x: 10px;
  --albakht-mobile-main-top: 10px;
  --albakht-mobile-main-bottom: 96px;

  --albakht-mobile-card-radius: 16px;
  --albakht-mobile-panel-radius: 18px;
  --albakht-mobile-hero-radius: 20px;

  --albakht-mobile-card-pad: 11px;
  --albakht-mobile-panel-pad: 12px;
  --albakht-mobile-gap: 10px;

  --albakht-bottom-nav-height: 68px;
  --albakht-bottom-nav-radius: 22px;
  --albakht-bottom-nav-z: 9998;
}

/* =========================================================
   01.16 Z INDEX TOKENS
========================================================= */

#albakht-app {
  --albakht-z-base: 1;
  --albakht-z-raised: 5;
  --albakht-z-sticky: 50;
  --albakht-z-dropdown: 200;
  --albakht-z-overlay: 800;
  --albakht-z-modal: 1000;
  --albakht-z-nav: 9998;
  --albakht-z-toast: 9999;
}

/* =========================================================
   01.17 VIEW LEVEL TOKENS FROM APP LAYOUT
========================================================= */

#albakht-app.albakht-app-shell-view-store,
#albakht-app.albakht-app-shell-view-category {
  --albakht-current-max: var(--albakht-max-wide);
  --albakht-current-bg: var(--albakht-page-bg);
  --albakht-current-main-top: var(--albakht-main-top);
}

#albakht-app.albakht-app-shell-view-product {
  --albakht-current-max: var(--albakht-max);
  --albakht-current-bg: var(--albakht-page-bg);
  --albakht-current-main-top: var(--albakht-main-top);
}

#albakht-app.albakht-app-shell-view-cart,
#albakht-app.albakht-app-shell-view-checkout,
#albakht-app.albakht-app-shell-view-account,
#albakht-app.albakht-app-shell-view-invoice,
#albakht-app.albakht-app-shell-view-thank-you {
  --albakht-current-max: var(--albakht-max);
  --albakht-current-bg: var(--albakht-page-bg);
  --albakht-current-main-top: 12px;
}

/* =========================================================
   01.18 STATE TOKENS
========================================================= */

#albakht-app {
  --albakht-hover-y: -2px;
  --albakht-hover-y-strong: -4px;
  --albakht-active-scale: .985;

  --albakht-disabled-opacity: .54;

  --albakht-focus-outline: 3px solid rgba(200, 166, 121, .34);
  --albakht-focus-outline-offset: 3px;

  --albakht-loading-bg:
    linear-gradient(
      90deg,
      rgba(233, 221, 206, .24) 0%,
      rgba(255, 255, 255, .72) 50%,
      rgba(233, 221, 206, .24) 100%
    );
}

/* =========================================================
   01.19 PRINT TOKENS
========================================================= */

#albakht-app {
  --albakht-print-text: #111111;
  --albakht-print-border: #dddddd;
  --albakht-print-bg: #FFFFFF;
}

/* =========================================================
   02 APP LAYOUT
   Paste the next batch directly under this line
========================================================= */
/* =========================================================
   02 APP LAYOUT
   Main shell, page container, view isolation, notice zone,
   page heading, missing template, and mobile bottom nav base.
   Paste this block directly under 01 Variables.
========================================================= */

/* =========================================================
   02.01 SHELL BASE
========================================================= */

#albakht-app.albakht-app-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: auto;
  margin: 0;
  padding: 0;
  position: relative;
  isolation: isolate;
  background: var(--albakht-current-bg, var(--albakht-page-bg));
  color: var(--albakht-text);
  font-family: var(--albakht-font-family);
  overflow-x: clip;
}

#albakht-app.albakht-app-no-plugin-header {
  padding-top: 0;
}

#albakht-app.albakht-app-no-plugin-header::before,
#albakht-app.albakht-app-no-plugin-header::after {
  content: none;
  display: none;
}

#albakht-app.albakht-app-shell-view-store,
#albakht-app.albakht-app-shell-view-category,
#albakht-app.albakht-app-shell-view-product,
#albakht-app.albakht-app-shell-view-cart,
#albakht-app.albakht-app-shell-view-checkout,
#albakht-app.albakht-app-shell-view-account,
#albakht-app.albakht-app-shell-view-invoice,
#albakht-app.albakht-app-shell-view-thank-you {
  background:
    linear-gradient(180deg, var(--albakht-page-bg) 0%, var(--albakht-page-bg) 100%);
}

/* =========================================================
   02.02 MAIN CONTAINER
========================================================= */

#albakht-app .albakht-app-main {
  width: min(var(--albakht-current-max, var(--albakht-max)), calc(100% - (var(--albakht-safe-x) * 2)));
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  margin-block: 0;
  padding-block:
    var(--albakht-current-main-top, var(--albakht-main-top))
    var(--albakht-main-bottom);
  padding-inline: 0;
  position: relative;
  z-index: var(--albakht-z-base);
}

#albakht-app .albakht-app-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
}

#albakht-app .albakht-app-content > * {
  max-width: 100%;
  min-width: 0;
}

#albakht-app .albakht-app-content > :first-child {
  margin-top: 0;
}

#albakht-app .albakht-app-content > :last-child {
  margin-bottom: 0;
}

/* =========================================================
   02.03 VIEW CONTENT ISOLATION
========================================================= */

#albakht-app .albakht-app-content-store,
#albakht-app .albakht-app-content-category,
#albakht-app .albakht-app-content-product,
#albakht-app .albakht-app-content-cart,
#albakht-app .albakht-app-content-checkout,
#albakht-app .albakht-app-content-account,
#albakht-app .albakht-app-content-invoice,
#albakht-app .albakht-app-content-thank-you {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
}

#albakht-app.albakht-app-shell-view-store .albakht-app-main,
#albakht-app.albakht-app-shell-view-category .albakht-app-main {
  width: min(var(--albakht-max-wide), calc(100% - (var(--albakht-safe-x) * 2)));
}

#albakht-app.albakht-app-shell-view-product .albakht-app-main,
#albakht-app.albakht-app-shell-view-cart .albakht-app-main,
#albakht-app.albakht-app-shell-view-checkout .albakht-app-main,
#albakht-app.albakht-app-shell-view-account .albakht-app-main,
#albakht-app.albakht-app-shell-view-invoice .albakht-app-main,
#albakht-app.albakht-app-shell-view-thank-you .albakht-app-main {
  width: min(var(--albakht-max), calc(100% - (var(--albakht-safe-x) * 2)));
}

#albakht-app.albakht-app-shell-view-cart .albakht-app-main,
#albakht-app.albakht-app-shell-view-checkout .albakht-app-main,
#albakht-app.albakht-app-shell-view-account .albakht-app-main,
#albakht-app.albakht-app-shell-view-invoice .albakht-app-main,
#albakht-app.albakht-app-shell-view-thank-you .albakht-app-main {
  padding-top: 10px;
}

/* =========================================================
   02.04 WHITE COMPACT PAGE FOUNDATION
========================================================= */

#albakht-app :where(
  .albakht-store-stage,
  .albakht-category-page,
  .albakht-product-page,
  .albakht-cart-page,
  .albakht-checkout-page,
  .albakht-account-page,
  .albakht-invoice-page,
  .albakht-thankyou-page
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  position: relative;
}

#albakht-app :where(
  .albakht-store-section,
  .albakht-category-section,
  .albakht-product-section,
  .albakht-cart-section,
  .albakht-checkout-section,
  .albakht-account-section,
  .albakht-invoice-section
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-block: var(--albakht-section-y);
  position: relative;
}

#albakht-app :where(
  .albakht-store-section:first-child,
  .albakht-category-section:first-child,
  .albakht-product-section:first-child,
  .albakht-cart-section:first-child,
  .albakht-checkout-section:first-child,
  .albakht-account-section:first-child,
  .albakht-invoice-section:first-child
) {
  margin-top: 0;
}

#albakht-app :where(
  .albakht-store-section:last-child,
  .albakht-category-section:last-child,
  .albakht-product-section:last-child,
  .albakht-cart-section:last-child,
  .albakht-checkout-section:last-child,
  .albakht-account-section:last-child,
  .albakht-invoice-section:last-child
) {
  margin-bottom: 0;
}

/* =========================================================
   02.05 APP NOTICE BAR
========================================================= */

#albakht-app .albakht-app-notice-bar {
  width: min(var(--albakht-current-max, var(--albakht-max)), calc(100% - (var(--albakht-safe-x) * 2)));
  max-width: 100%;
  min-width: 0;
  margin: 0 auto var(--albakht-space-6);
  padding: 0;
  position: relative;
  z-index: var(--albakht-z-raised);
}

#albakht-app .albakht-app-notice-bar:empty {
  display: none;
}

#albakht-app .albakht-app-notice-bar__inner {
  width: 100%;
  min-height: 42px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--albakht-gap-sm);
  border: var(--albakht-border-light);
  border-radius: var(--albakht-radius-pill);
  background: var(--albakht-surface-glass);
  color: var(--albakht-muted);
  box-shadow: var(--albakht-shadow-xs);
  overflow: hidden;
}

#albakht-app .albakht-app-notice-bar__inner p {
  margin: 0;
  color: inherit;
  font-size: var(--albakht-fs-13);
  line-height: var(--albakht-lh-body);
  font-weight: var(--albakht-fw-bold);
}

#albakht-app .albakht-app-notice-bar__inner .albakht-svg-icon,
#albakht-app .albakht-app-notice-bar__inner .albakht-layout-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--albakht-gold);
}

/* =========================================================
   02.06 APP PAGE HEAD
========================================================= */

#albakht-app .albakht-app-page-head {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 var(--albakht-space-8);
  padding: 0;
  position: relative;
}

#albakht-app .albakht-app-page-head__inner {
  width: 100%;
  min-height: 74px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--albakht-gap-lg);
  border: var(--albakht-border-normal);
  border-radius: var(--albakht-radius-panel);
  background: var(--albakht-surface);
  color: var(--albakht-text);
  box-shadow: var(--albakht-shadow-xs);
  overflow: hidden;
  position: relative;
}

#albakht-app .albakht-app-page-head__inner::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--albakht-gold), var(--albakht-gold-3));
  opacity: .9;
  pointer-events: none;
}

#albakht-app .albakht-app-page-head__inner > div {
  min-width: 0;
  position: relative;
  z-index: 1;
}

#albakht-app .albakht-app-page-head .albakht-app-eyebrow {
  min-height: 24px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--albakht-radius-pill);
  background: var(--albakht-gold-4);
  color: var(--albakht-brown);
  font-size: var(--albakht-fs-11);
  line-height: 1.4;
  font-weight: var(--albakht-fw-black);
  white-space: nowrap;
}

#albakht-app .albakht-app-page-head h1 {
  margin: 6px 0 0;
  color: var(--albakht-ink);
  font-size: clamp(21px, 2.3vw, 32px);
  line-height: var(--albakht-lh-heading);
  font-weight: var(--albakht-fw-heavy);
  letter-spacing: var(--albakht-letter-tight);
}

#albakht-app .albakht-app-page-head__cart {
  flex: 0 0 auto;
  min-width: 150px;
  min-height: 56px;
  padding: 9px 13px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: var(--albakht-border-light);
  border-radius: var(--albakht-radius-lg);
  background: var(--albakht-surface-soft);
  color: var(--albakht-text);
  box-shadow: var(--albakht-shadow-hair);
  transition: var(--albakht-transition-base);
}

#albakht-app .albakht-app-page-head__cart:hover {
  transform: translateY(var(--albakht-hover-y));
  border-color: rgba(200, 166, 121, .52);
  box-shadow: var(--albakht-shadow-sm);
}

#albakht-app .albakht-app-page-head__cart span {
  display: block;
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-11);
  line-height: 1.35;
  font-weight: var(--albakht-fw-bold);
}

#albakht-app .albakht-app-page-head__cart strong {
  display: block;
  color: var(--albakht-ink);
  font-size: var(--albakht-fs-15);
  line-height: 1.35;
  font-weight: var(--albakht-fw-heavy);
}

/* =========================================================
   02.07 VIEW-BASED PAGE HEAD COMPRESSION
========================================================= */

#albakht-app.albakht-app-shell-view-store .albakht-app-page-head,
#albakht-app.albakht-app-shell-view-category .albakht-app-page-head {
  margin-bottom: var(--albakht-space-8);
}

#albakht-app.albakht-app-shell-view-cart .albakht-app-page-head,
#albakht-app.albakht-app-shell-view-checkout .albakht-app-page-head,
#albakht-app.albakht-app-shell-view-account .albakht-app-page-head,
#albakht-app.albakht-app-shell-view-invoice .albakht-app-page-head,
#albakht-app.albakht-app-shell-view-thank-you .albakht-app-page-head {
  margin-bottom: var(--albakht-space-6);
}

#albakht-app.albakht-app-shell-view-cart .albakht-app-page-head__inner,
#albakht-app.albakht-app-shell-view-checkout .albakht-app-page-head__inner,
#albakht-app.albakht-app-shell-view-account .albakht-app-page-head__inner,
#albakht-app.albakht-app-shell-view-invoice .albakht-app-page-head__inner,
#albakht-app.albakht-app-shell-view-thank-you .albakht-app-page-head__inner {
  min-height: 64px;
  padding: 11px 14px;
  border-radius: var(--albakht-radius-xl);
}

#albakht-app.albakht-app-shell-view-cart .albakht-app-page-head h1,
#albakht-app.albakht-app-shell-view-checkout .albakht-app-page-head h1,
#albakht-app.albakht-app-shell-view-account .albakht-app-page-head h1,
#albakht-app.albakht-app-shell-view-invoice .albakht-app-page-head h1,
#albakht-app.albakht-app-shell-view-thank-you .albakht-app-page-head h1 {
  font-size: clamp(20px, 2vw, 28px);
}

#albakht-app.albakht-app-shell-view-invoice.albakht-app-print-mode .albakht-app-page-head {
  display: none;
}

/* =========================================================
   02.08 AUTH / GUEST BODY STATES
========================================================= */

#albakht-app.albakht-app-authenticated {
  --albakht-account-state-color: var(--albakht-success);
  --albakht-account-state-bg: var(--albakht-success-soft);
}

#albakht-app.albakht-app-guest {
  --albakht-account-state-color: var(--albakht-warning);
  --albakht-account-state-bg: var(--albakht-warning-soft);
}

#albakht-app.albakht-app-authenticated .albakht-app-content,
#albakht-app.albakht-app-guest .albakht-app-content {
  min-height: 0;
}

/* =========================================================
   02.09 MISSING TEMPLATE
========================================================= */

#albakht-app .albakht-app-missing-template {
  width: 100%;
  min-height: 360px;
  padding: var(--albakht-space-16) var(--albakht-space-8);
  display: grid;
  place-items: center;
}

#albakht-app .albakht-app-missing-template__card {
  width: min(520px, 100%);
  min-width: 0;
  padding: var(--albakht-space-16);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--albakht-gap-md);
  border: var(--albakht-border-normal);
  border-radius: var(--albakht-radius-panel);
  background: var(--albakht-surface);
  color: var(--albakht-text);
  box-shadow: var(--albakht-shadow-md);
}

#albakht-app .albakht-app-missing-template__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--albakht-radius-xl);
  background: var(--albakht-ink);
  color: var(--albakht-gold);
  font-size: var(--albakht-fs-28);
}

#albakht-app .albakht-app-missing-template h2 {
  color: var(--albakht-ink);
  font-size: var(--albakht-fs-24);
  line-height: var(--albakht-lh-heading);
  font-weight: var(--albakht-fw-heavy);
}

#albakht-app .albakht-app-missing-template p {
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-14);
  line-height: var(--albakht-lh-loose);
  font-weight: var(--albakht-fw-semibold);
}

#albakht-app .albakht-app-missing-template code {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-flex;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: var(--albakht-radius-xs);
  background: var(--albakht-surface-muted);
  color: var(--albakht-ink);
  font-size: var(--albakht-fs-13);
  overflow-wrap: anywhere;
}

/* =========================================================
   02.10 BOTTOM NAV BASE
========================================================= */

#albakht-app .albakht-app-bottom-nav {
  display: none;
}

#albakht-app.albakht-app-with-bottom-nav {
  --albakht-bottom-safe-space: calc(var(--albakht-bottom-nav-height) + 28px + env(safe-area-inset-bottom));
}

#albakht-app.albakht-app-with-bottom-nav .albakht-app-main {
  padding-bottom: max(var(--albakht-main-bottom), var(--albakht-bottom-safe-space));
}

#albakht-app .albakht-app-bottom-nav a {
  min-width: 0;
  color: inherit;
}

#albakht-app .albakht-app-bottom-nav .albakht-svg-icon,
#albakht-app .albakht-app-bottom-nav .albakht-layout-icon {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
}

#albakht-app .albakht-app-bottom-nav strong {
  display: block;
  max-width: 100%;
  font-size: var(--albakht-fs-11);
  line-height: 1.1;
  font-weight: var(--albakht-fw-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#albakht-app .albakht-cart-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--albakht-radius-pill);
  background: var(--albakht-gold);
  color: var(--albakht-ink);
  font-size: 10px;
  line-height: 1;
  font-style: normal;
  font-weight: var(--albakht-fw-heavy);
}

/* =========================================================
   02.11 LAYOUT STABILITY FOR COMMON PAGE WRAPPERS
========================================================= */

#albakht-app :where(
  .albakht-store-stage,
  .albakht-store-hero,
  .albakht-store-quick-links,
  .albakht-category-hero,
  .albakht-category-layout,
  .albakht-product-layout,
  .albakht-cart-hero,
  .albakht-cart-layout,
  .albakht-checkout-hero,
  .albakht-checkout-layout,
  .albakht-account-hero,
  .albakht-account-layout,
  .albakht-account-auth-page,
  .albakht-account-auth-grid,
  .albakht-invoice-sheet,
  .albakht-thankyou-card
) {
  max-width: 100%;
  min-width: 0;
}

#albakht-app :where(
  .albakht-cart-main,
  .albakht-cart-side,
  .albakht-checkout-main,
  .albakht-checkout-side,
  .albakht-account-main,
  .albakht-account-side,
  .albakht-product-main,
  .albakht-product-side
) {
  max-width: 100%;
  min-width: 0;
}

/* =========================================================
   02.12 APP SCROLL TARGETS
========================================================= */

#albakht-app :where(
  #albakht-store-products,
  .albakht-store-section,
  .albakht-category-section,
  .albakht-product-section,
  .albakht-cart-layout,
  .albakht-checkout-layout,
  .albakht-account-layout
) {
  scroll-margin-top: 18px;
}

/* =========================================================
   02.13 DESKTOP LAYOUT POLISH
========================================================= */

@media (min-width: 1181px) {
  #albakht-app.albakht-app-shell-view-store .albakht-app-main,
  #albakht-app.albakht-app-shell-view-category .albakht-app-main {
    width: min(var(--albakht-max-wide), calc(100% - 56px));
  }

  #albakht-app.albakht-app-shell-view-product .albakht-app-main,
  #albakht-app.albakht-app-shell-view-cart .albakht-app-main,
  #albakht-app.albakht-app-shell-view-checkout .albakht-app-main,
  #albakht-app.albakht-app-shell-view-account .albakht-app-main,
  #albakht-app.albakht-app-shell-view-invoice .albakht-app-main,
  #albakht-app.albakht-app-shell-view-thank-you .albakht-app-main {
    width: min(var(--albakht-max), calc(100% - 56px));
  }
}

/* =========================================================
   02.14 TABLET LAYOUT BASE
========================================================= */

@media (max-width: 1180px) {
  #albakht-app .albakht-app-main {
    width: min(var(--albakht-current-max, var(--albakht-max)), calc(100% - 32px));
  }

  #albakht-app .albakht-app-page-head__inner {
    min-height: 68px;
    padding: 12px 14px;
  }

  #albakht-app .albakht-app-page-head__cart {
    min-width: 130px;
  }
}

@media (max-width: 900px) {
  #albakht-app .albakht-app-main {
    width: calc(100% - 24px);
    padding-top: 10px;
  }

  #albakht-app .albakht-app-page-head__inner {
    align-items: center;
    gap: var(--albakht-gap-md);
  }

  #albakht-app .albakht-app-page-head__cart {
    min-width: 118px;
    min-height: 52px;
    padding: 8px 11px;
  }

  #albakht-app .albakht-app-page-head__cart span {
    font-size: 10.5px;
  }

  #albakht-app .albakht-app-page-head__cart strong {
    font-size: var(--albakht-fs-14);
  }
}

/* =========================================================
   02.15 MOBILE APP LAYOUT BASE
========================================================= */

@media (max-width: 782px) {
  #albakht-app.albakht-app-shell {
    min-height: auto;
    overflow-x: clip;
  }

  #albakht-app .albakht-app-main {
    width: 100%;
    padding-inline: var(--albakht-mobile-safe-x);
    padding-top: var(--albakht-mobile-main-top);
    padding-bottom: var(--albakht-mobile-main-bottom);
  }

  #albakht-app.albakht-app-with-bottom-nav .albakht-app-main {
    padding-bottom: calc(var(--albakht-bottom-nav-height) + 34px + env(safe-area-inset-bottom));
  }

  #albakht-app .albakht-app-notice-bar {
    width: 100%;
    margin-bottom: var(--albakht-space-5);
  }

  #albakht-app .albakht-app-notice-bar__inner {
    min-height: 38px;
    padding: 7px 10px;
    justify-content: flex-start;
    border-radius: var(--albakht-radius-lg);
  }

  #albakht-app .albakht-app-notice-bar__inner p {
    font-size: var(--albakht-fs-12);
    line-height: 1.55;
  }

  #albakht-app .albakht-app-page-head {
    margin-bottom: var(--albakht-space-5);
  }

  #albakht-app .albakht-app-page-head__inner {
    min-height: 58px;
    padding: 10px 11px;
    border-radius: var(--albakht-mobile-panel-radius);
    gap: var(--albakht-gap-sm);
  }

  #albakht-app .albakht-app-page-head .albakht-app-eyebrow {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 10.5px;
  }

  #albakht-app .albakht-app-page-head h1 {
    margin-top: 4px;
    font-size: clamp(18px, 5.3vw, 23px);
    line-height: 1.22;
    letter-spacing: -.3px;
  }

  #albakht-app .albakht-app-page-head__cart {
    min-width: 96px;
    min-height: 48px;
    padding: 7px 9px;
    border-radius: var(--albakht-radius-md);
  }

  #albakht-app .albakht-app-page-head__cart span {
    display: none;
  }

  #albakht-app .albakht-app-page-head__cart strong {
    font-size: var(--albakht-fs-13);
    white-space: nowrap;
  }

  #albakht-app.albakht-app-with-bottom-nav .albakht-app-bottom-nav {
    position: fixed;
    z-index: var(--albakht-bottom-nav-z);
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    height: var(--albakht-bottom-nav-height);
    padding: 7px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--albakht-bottom-nav-radius);
    background: rgba(23, 26, 34, .94);
    color: rgba(255, 255, 255, .72);
    box-shadow: 0 18px 46px rgba(23, 26, 34, .28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  #albakht-app.albakht-app-with-bottom-nav .albakht-app-bottom-nav a {
    height: 54px;
    min-width: 0;
    padding: 5px 3px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    position: relative;
    border-radius: 17px;
    color: inherit;
    text-align: center;
    transition: var(--albakht-transition-fast);
  }

  #albakht-app.albakht-app-with-bottom-nav .albakht-app-bottom-nav a.is-active {
    background: rgba(255, 255, 255, .12);
    color: var(--albakht-white);
  }

  #albakht-app.albakht-app-with-bottom-nav .albakht-app-bottom-nav a:active {
    transform: scale(.96);
  }

  #albakht-app.albakht-app-with-bottom-nav .albakht-app-bottom-nav .albakht-cart-count {
    position: absolute;
    top: 4px;
    inset-inline-start: 50%;
    transform: translateX(-2px);
  }
}

/* =========================================================
   02.16 TINY MOBILE LAYOUT BASE
========================================================= */

@media (max-width: 480px) {
  #albakht-app .albakht-app-main {
    padding-inline: 8px;
    padding-top: 8px;
  }

  #albakht-app .albakht-app-page-head__inner {
    min-height: 54px;
    padding: 9px 10px;
    border-radius: 16px;
  }

  #albakht-app .albakht-app-page-head__cart {
    display: none;
  }

  #albakht-app .albakht-app-notice-bar__inner {
    border-radius: 15px;
  }

  #albakht-app.albakht-app-with-bottom-nav .albakht-app-bottom-nav {
    left: 8px;
    right: 8px;
    bottom: calc(7px + env(safe-area-inset-bottom));
    height: 66px;
    padding: 6px;
    border-radius: 20px;
  }

  #albakht-app.albakht-app-with-bottom-nav .albakht-app-bottom-nav a {
    height: 52px;
    border-radius: 15px;
  }

  #albakht-app .albakht-app-bottom-nav strong {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  #albakht-app .albakht-app-main {
    padding-inline: 7px;
  }

  #albakht-app .albakht-app-page-head h1 {
    font-size: 18px;
  }

  #albakht-app.albakht-app-with-bottom-nav .albakht-app-bottom-nav {
    left: 7px;
    right: 7px;
  }
}

/* =========================================================
   02.17 PRINT MODE BASE
========================================================= */

#albakht-app.albakht-app-print-mode {
  background: #FFFFFF !important;
  color: #111111 !important;
}

#albakht-app.albakht-app-print-mode .albakht-app-main {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

#albakht-app.albakht-app-print-mode .albakht-app-notice-bar,
#albakht-app.albakht-app-print-mode .albakht-app-bottom-nav {
  display: none !important;
}

/* =========================================================
   03 BUTTONS + FORMS + SVG
   Paste the next batch directly under this line
========================================================= */
/* =========================================================
   03 BUTTONS + FORMS + SVG
   Shared action system, form fields, SVG icon system,
   WooCommerce form neutralization, quantity controls,
   loading/disabled states, RTL-safe interactions.
   Paste this block directly under 02 App Layout.
========================================================= */

/* =========================================================
   03.01 SVG ICON SYSTEM
========================================================= */

#albakht-app .albakht-svg-icon {
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  position: relative;
  color: currentColor;
  line-height: 1;
  font-size: inherit;
  vertical-align: middle;
}

#albakht-app .albakht-svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#albakht-app .albakht-svg-icon svg :where(path, circle, rect, line, polyline, polygon) {
  vector-effect: non-scaling-stroke;
}

#albakht-app :where(
  .albakht-layout-icon,
  .albakht-store-icon,
  .albakht-category-icon,
  .albakht-product-icon,
  .albakht-cart-icon,
  .albakht-checkout-icon,
  .albakht-account-icon,
  .albakht-invoice-icon
) {
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
  display: inline-grid;
  place-items: center;
  color: inherit;
}

#albakht-app :where(
  .albakht-layout-icon svg,
  .albakht-store-icon svg,
  .albakht-category-icon svg,
  .albakht-product-icon svg,
  .albakht-cart-icon svg,
  .albakht-checkout-icon svg,
  .albakht-account-icon svg,
  .albakht-invoice-icon svg
) {
  width: 100%;
  height: 100%;
}

/* =========================================================
   03.02 ICON BOXES / DECORATIVE ICON STATES
========================================================= */

#albakht-app :where(
  .albakht-icon-box,
  .albakht-feature-icon,
  .albakht-step-icon
) {
  width: var(--albakht-icon-box);
  height: var(--albakht-icon-box);
  min-width: var(--albakht-icon-box);
  min-height: var(--albakht-icon-box);
  display: grid;
  place-items: center;
  border-radius: var(--albakht-radius-lg);
  background: var(--albakht-surface-soft);
  color: var(--albakht-gold);
  border: var(--albakht-border-light);
  box-shadow: var(--albakht-shadow-xs);
}

#albakht-app :where(
  .albakht-icon-box .albakht-svg-icon,
  .albakht-feature-icon .albakht-svg-icon,
  .albakht-step-icon .albakht-svg-icon
) {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

#albakht-app :where(
  .albakht-icon-box-sm,
  .albakht-step-icon-sm
) {
  width: var(--albakht-icon-box-sm);
  height: var(--albakht-icon-box-sm);
  min-width: var(--albakht-icon-box-sm);
  min-height: var(--albakht-icon-box-sm);
  border-radius: var(--albakht-radius-md);
}

#albakht-app :where(
  .albakht-icon-box-lg,
  .albakht-step-icon-lg
) {
  width: var(--albakht-icon-box-lg);
  height: var(--albakht-icon-box-lg);
  min-width: var(--albakht-icon-box-lg);
  min-height: var(--albakht-icon-box-lg);
  border-radius: var(--albakht-radius-xl);
}

/* =========================================================
   03.03 BUTTON BASE
========================================================= */

#albakht-app .albakht-btn,
#albakht-app a.albakht-btn,
#albakht-app button.albakht-btn,
#albakht-app input[type="submit"].albakht-btn,
#albakht-app input[type="button"].albakht-btn {
  min-width: 0;
  min-height: var(--albakht-btn-height-md);
  max-width: 100%;
  padding: var(--albakht-btn-pad-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--albakht-gap-sm);
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--albakht-radius-pill);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  font-family: inherit;
  font-size: var(--albakht-fs-14);
  line-height: 1.35;
  font-weight: var(--albakht-fw-heavy);
  letter-spacing: 0;
  cursor: pointer;
  user-select: none;
  box-shadow: none;
  overflow: hidden;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: var(--albakht-transition-base);
}

#albakht-app .albakht-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .18),
      rgba(255, 255, 255, 0)
    );
  transition: opacity var(--albakht-speed-fast) var(--albakht-ease);
}

#albakht-app .albakht-btn:hover::before {
  opacity: 1;
}

#albakht-app .albakht-btn:hover {
  transform: translateY(var(--albakht-hover-y));
}

#albakht-app .albakht-btn:active {
  transform: translateY(0) scale(var(--albakht-active-scale));
}

#albakht-app .albakht-btn:focus {
  outline: none;
}

#albakht-app .albakht-btn:focus-visible {
  outline: var(--albakht-focus-outline);
  outline-offset: var(--albakht-focus-outline-offset);
}

#albakht-app .albakht-btn:disabled,
#albakht-app .albakht-btn[disabled],
#albakht-app .albakht-btn.is-disabled,
#albakht-app .albakht-btn.disabled,
#albakht-app .albakht-btn[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: var(--albakht-disabled-opacity);
  transform: none;
  box-shadow: none;
}

#albakht-app .albakht-btn > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

#albakht-app .albakht-btn .albakht-svg-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  font-size: 18px;
}

#albakht-app .albakht-btn span,
#albakht-app .albakht-btn strong,
#albakht-app .albakht-btn em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#albakht-app .albakht-btn em {
  font-style: normal;
}

/* =========================================================
   03.04 BUTTON SIZES
========================================================= */

#albakht-app .albakht-btn-xs {
  min-height: var(--albakht-btn-height-xs);
  padding: var(--albakht-btn-pad-xs);
  gap: 6px;
  font-size: var(--albakht-fs-12);
}

#albakht-app .albakht-btn-sm {
  min-height: var(--albakht-btn-height-sm);
  padding: var(--albakht-btn-pad-sm);
  gap: 7px;
  font-size: var(--albakht-fs-13);
}

#albakht-app .albakht-btn-md {
  min-height: var(--albakht-btn-height-md);
  padding: var(--albakht-btn-pad-md);
  font-size: var(--albakht-fs-14);
}

#albakht-app .albakht-btn-lg {
  min-height: var(--albakht-btn-height-lg);
  padding: var(--albakht-btn-pad-lg);
  font-size: var(--albakht-fs-15);
}

#albakht-app .albakht-btn-xl {
  min-height: var(--albakht-btn-height-xl);
  padding: var(--albakht-btn-pad-xl);
  font-size: var(--albakht-fs-16);
}

#albakht-app .albakht-btn-xs .albakht-svg-icon {
  width: 15px;
  height: 15px;
  min-width: 15px;
  font-size: 15px;
}

#albakht-app .albakht-btn-sm .albakht-svg-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  font-size: 16px;
}

#albakht-app .albakht-btn-lg .albakht-svg-icon,
#albakht-app .albakht-btn-xl .albakht-svg-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  font-size: 20px;
}

/* =========================================================
   03.05 BUTTON VARIANTS
========================================================= */

#albakht-app .albakht-btn-primary {
  background: linear-gradient(135deg, var(--albakht-btn-bg-primary), var(--albakht-btn-bg-primary-hover));
  color: var(--albakht-btn-text-primary) !important;
  border-color: rgba(23, 26, 34, .96);
  box-shadow: 0 10px 24px rgba(23, 26, 34, .16);
}

#albakht-app .albakht-btn-primary:hover {
  background: linear-gradient(135deg, var(--albakht-btn-bg-primary-hover), var(--albakht-btn-bg-primary));
  color: var(--albakht-btn-text-primary) !important;
  box-shadow: 0 14px 32px rgba(23, 26, 34, .2);
}

#albakht-app .albakht-btn-primary:active {
  box-shadow: 0 7px 18px rgba(23, 26, 34, .14);
}

#albakht-app .albakht-btn-ghost {
  background: var(--albakht-btn-bg-ghost);
  color: var(--albakht-btn-text-ghost) !important;
  border-color: rgba(233, 221, 206, .98);
  box-shadow: var(--albakht-shadow-xs);
}

#albakht-app .albakht-btn-ghost:hover {
  background: var(--albakht-btn-bg-ghost-hover);
  color: var(--albakht-btn-text-ghost) !important;
  border-color: rgba(200, 166, 121, .55);
  box-shadow: var(--albakht-shadow-sm);
}

#albakht-app .albakht-btn-gold {
  background: linear-gradient(135deg, var(--albakht-gold), var(--albakht-gold-2));
  color: var(--albakht-ink) !important;
  border-color: rgba(200, 166, 121, .95);
  box-shadow: var(--albakht-shadow-gold-sm);
}

#albakht-app .albakht-btn-gold:hover {
  background: linear-gradient(135deg, var(--albakht-gold-2), var(--albakht-gold));
  color: var(--albakht-ink) !important;
  border-color: rgba(200, 166, 121, 1);
  box-shadow: 0 14px 34px rgba(200, 166, 121, .22);
}

#albakht-app .albakht-btn-light {
  background: var(--albakht-surface-soft);
  color: var(--albakht-ink) !important;
  border-color: rgba(233, 221, 206, .9);
  box-shadow: var(--albakht-shadow-hair);
}

#albakht-app .albakht-btn-light:hover {
  background: var(--albakht-white);
  border-color: rgba(200, 166, 121, .45);
  box-shadow: var(--albakht-shadow-xs);
}

#albakht-app .albakht-btn-danger {
  background: var(--albakht-danger);
  color: #FFFFFF !important;
  border-color: rgba(184, 64, 52, .9);
  box-shadow: 0 10px 24px rgba(184, 64, 52, .14);
}

#albakht-app .albakht-btn-danger:hover {
  background: #a83228;
  color: #FFFFFF !important;
  box-shadow: 0 14px 30px rgba(184, 64, 52, .18);
}

#albakht-app .albakht-btn-success {
  background: var(--albakht-success);
  color: #FFFFFF !important;
  border-color: rgba(31, 138, 91, .9);
  box-shadow: 0 10px 24px rgba(31, 138, 91, .14);
}

#albakht-app .albakht-btn-success:hover {
  background: #18744c;
  color: #FFFFFF !important;
}

/* =========================================================
   03.06 BUTTON SHAPES / WIDTH MODES
========================================================= */

#albakht-app .albakht-btn-block,
#albakht-app .albakht-btn-full {
  width: 100%;
  display: flex;
}

#albakht-app .albakht-btn-fit {
  width: fit-content;
}

#albakht-app .albakht-btn-square {
  width: var(--albakht-btn-height-md);
  min-width: var(--albakht-btn-height-md);
  max-width: var(--albakht-btn-height-md);
  padding-inline: 0;
  border-radius: var(--albakht-radius-lg);
}

#albakht-app .albakht-btn-icon {
  width: var(--albakht-btn-height-md);
  min-width: var(--albakht-btn-height-md);
  max-width: var(--albakht-btn-height-md);
  padding: 0;
  border-radius: var(--albakht-radius-pill);
}

#albakht-app .albakht-btn-icon.albakht-btn-sm {
  width: var(--albakht-btn-height-sm);
  min-width: var(--albakht-btn-height-sm);
  max-width: var(--albakht-btn-height-sm);
}

#albakht-app .albakht-btn-icon.albakht-btn-lg {
  width: var(--albakht-btn-height-lg);
  min-width: var(--albakht-btn-height-lg);
  max-width: var(--albakht-btn-height-lg);
}

/* =========================================================
   03.07 BUTTON GROUPS / ACTION ROWS
========================================================= */

#albakht-app :where(
  .albakht-actions,
  .albakht-action-row,
  .albakht-button-row,
  .albakht-form-actions,
  .albakht-card-actions
) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--albakht-gap-sm);
  min-width: 0;
}

#albakht-app :where(
  .albakht-actions.is-end,
  .albakht-action-row.is-end,
  .albakht-button-row.is-end,
  .albakht-form-actions.is-end
) {
  justify-content: flex-end;
}

#albakht-app :where(
  .albakht-actions.is-center,
  .albakht-action-row.is-center,
  .albakht-button-row.is-center,
  .albakht-form-actions.is-center
) {
  justify-content: center;
}

#albakht-app :where(
  .albakht-actions.is-between,
  .albakht-action-row.is-between,
  .albakht-button-row.is-between,
  .albakht-form-actions.is-between
) {
  justify-content: space-between;
}

#albakht-app :where(
  .albakht-actions.is-stack,
  .albakht-action-row.is-stack,
  .albakht-button-row.is-stack,
  .albakht-form-actions.is-stack
) {
  display: grid;
  grid-template-columns: 1fr;
}

/* =========================================================
   03.08 WOO BUTTON NORMALIZATION INSIDE JOOD
========================================================= */

#albakht-app :where(
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .woocommerce-page a.button,
  .woocommerce-page button.button,
  .woocommerce-page input.button,
  .woocommerce-page #respond input#submit
) {
  min-height: var(--albakht-btn-height-md);
  padding: var(--albakht-btn-pad-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--albakht-gap-sm);
  border: 1px solid rgba(23, 26, 34, .96);
  border-radius: var(--albakht-radius-pill);
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(135deg, var(--albakht-ink), var(--albakht-ink-2));
  color: #FFFFFF !important;
  font-family: inherit;
  font-size: var(--albakht-fs-14);
  line-height: 1.35;
  font-weight: var(--albakht-fw-heavy);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(23, 26, 34, .16);
  cursor: pointer;
  transition: var(--albakht-transition-base);
}

#albakht-app :where(
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce input.button:hover,
  .woocommerce #respond input#submit:hover,
  .woocommerce-page a.button:hover,
  .woocommerce-page button.button:hover,
  .woocommerce-page input.button:hover,
  .woocommerce-page #respond input#submit:hover
) {
  transform: translateY(var(--albakht-hover-y));
  background: linear-gradient(135deg, var(--albakht-ink-2), var(--albakht-ink));
  color: #FFFFFF !important;
  box-shadow: 0 14px 32px rgba(23, 26, 34, .2);
}

#albakht-app :where(
  .woocommerce a.button:disabled,
  .woocommerce button.button:disabled,
  .woocommerce input.button:disabled,
  .woocommerce a.button.disabled,
  .woocommerce button.button.disabled,
  .woocommerce input.button.disabled
) {
  opacity: var(--albakht-disabled-opacity);
  pointer-events: none;
  transform: none;
  cursor: not-allowed;
}

/* =========================================================
   03.09 FORM LAYOUT BASE
========================================================= */

#albakht-app :where(form) {
  max-width: 100%;
  min-width: 0;
}

#albakht-app .albakht-form-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--albakht-gap-md);
}

#albakht-app .albakht-form-grid.is-one,
#albakht-app .albakht-form-grid.albakht-form-grid-1 {
  grid-template-columns: 1fr;
}

#albakht-app .albakht-form-grid.is-three,
#albakht-app .albakht-form-grid.albakht-form-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#albakht-app .albakht-form-grid.is-four,
#albakht-app .albakht-form-grid.albakht-form-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#albakht-app :where(
  .albakht-field,
  .albakht-form-field,
  .form-row,
  label.albakht-product-variation-field
) {
  min-width: 0;
  max-width: 100%;
  display: grid;
  align-content: start;
  gap: 7px;
  position: relative;
}

#albakht-app :where(
  .albakht-field.is-wide,
  .albakht-form-field.is-wide,
  .form-row-wide
) {
  grid-column: 1 / -1;
}

#albakht-app :where(
  .albakht-field.is-half,
  .albakht-form-field.is-half,
  .form-row-first,
  .form-row-last
) {
  grid-column: auto;
}

#albakht-app :where(.clear) {
  display: none;
}

/* =========================================================
   03.10 FORM LABELS
========================================================= */

#albakht-app :where(
  .albakht-field > label,
  .albakht-form-field > label,
  .albakht-field > span:first-child,
  .albakht-form-field > span:first-child,
  .form-row > label,
  label.albakht-product-variation-field > span:first-child
) {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--albakht-field-label);
  font-size: var(--albakht-fs-13);
  line-height: 1.45;
  font-weight: var(--albakht-fw-black);
}

#albakht-app :where(
  .albakht-field small,
  .albakht-form-field small,
  .form-row small,
  .albakht-field .description,
  .albakht-form-field .description,
  .form-row .description
) {
  display: block;
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-12);
  line-height: var(--albakht-lh-body);
  font-weight: var(--albakht-fw-semibold);
}

#albakht-app :where(
  .required,
  abbr.required
) {
  color: var(--albakht-danger);
  text-decoration: none;
  border: 0;
  cursor: help;
}

/* =========================================================
   03.11 INPUT / TEXTAREA / SELECT BASE
========================================================= */

#albakht-app :where(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--albakht-field-height);
  margin: 0;
  padding: var(--albakht-field-pad-y) var(--albakht-field-pad-x);
  border: 1px solid var(--albakht-field-border);
  border-radius: var(--albakht-field-radius);
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--albakht-field-bg);
  color: var(--albakht-field-text);
  font-family: inherit;
  font-size: var(--albakht-fs-14);
  line-height: 1.45;
  font-weight: var(--albakht-fw-bold);
  outline: none;
  box-shadow: var(--albakht-field-shadow);
  transition:
    border-color var(--albakht-speed) var(--albakht-ease),
    background-color var(--albakht-speed) var(--albakht-ease),
    box-shadow var(--albakht-speed) var(--albakht-ease),
    color var(--albakht-speed) var(--albakht-ease);
}

#albakht-app :where(
  input[type="text"]:hover,
  input[type="email"]:hover,
  input[type="tel"]:hover,
  input[type="number"]:hover,
  input[type="password"]:hover,
  input[type="search"]:hover,
  input[type="url"]:hover,
  input[type="date"]:hover,
  input[type="time"]:hover,
  input[type="datetime-local"]:hover,
  textarea:hover,
  select:hover
) {
  border-color: var(--albakht-field-border-hover);
  background-color: var(--albakht-white);
}

#albakht-app :where(
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="number"]:focus,
  input[type="password"]:focus,
  input[type="search"]:focus,
  input[type="url"]:focus,
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="datetime-local"]:focus,
  textarea:focus,
  select:focus
) {
  border-color: var(--albakht-field-border-focus);
  background-color: var(--albakht-white);
  box-shadow: var(--albakht-field-focus-shadow);
}

#albakht-app :where(
  input[type="text"]::placeholder,
  input[type="email"]::placeholder,
  input[type="tel"]::placeholder,
  input[type="number"]::placeholder,
  input[type="password"]::placeholder,
  input[type="search"]::placeholder,
  input[type="url"]::placeholder,
  textarea::placeholder
) {
  color: var(--albakht-field-placeholder);
  font-weight: var(--albakht-fw-semibold);
}

#albakht-app :where(textarea) {
  min-height: 112px;
  line-height: var(--albakht-lh-body);
  resize: vertical;
}

#albakht-app :where(select) {
  padding-inline-end: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--albakht-muted) 50%),
    linear-gradient(135deg, var(--albakht-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 17px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#albakht-app[dir="ltr"] :where(select) {
  padding-inline-start: 14px;
  padding-inline-end: 42px;
  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 17px) 50%;
}

/* =========================================================
   03.12 COMPACT FIELDS
========================================================= */

#albakht-app :where(
  .albakht-field.is-small input,
  .albakht-field.is-small select,
  .albakht-field.is-small textarea,
  .albakht-form-field.is-small input,
  .albakht-form-field.is-small select,
  .albakht-form-field.is-small textarea,
  input.albakht-field-small,
  select.albakht-field-small,
  textarea.albakht-field-small
) {
  min-height: var(--albakht-field-height-sm);
  padding: 9px 12px;
  border-radius: var(--albakht-field-radius-sm);
  font-size: var(--albakht-fs-13);
}

#albakht-app :where(
  .albakht-field.is-large input,
  .albakht-field.is-large select,
  .albakht-field.is-large textarea,
  .albakht-form-field.is-large input,
  .albakht-form-field.is-large select,
  .albakht-form-field.is-large textarea,
  input.albakht-field-large,
  select.albakht-field-large,
  textarea.albakht-field-large
) {
  min-height: var(--albakht-field-height-lg);
  padding: 13px 16px;
  border-radius: var(--albakht-field-radius-lg);
  font-size: var(--albakht-fs-15);
}

/* =========================================================
   03.13 INPUT STATES
========================================================= */

#albakht-app :where(
  input[readonly],
  textarea[readonly],
  select[readonly]
) {
  background-color: var(--albakht-field-bg-soft);
  color: var(--albakht-muted);
  cursor: default;
}

#albakht-app :where(
  input:disabled,
  textarea:disabled,
  select:disabled
) {
  background-color: var(--albakht-surface-muted);
  color: var(--albakht-muted-2);
  border-color: rgba(233, 221, 206, .75);
  box-shadow: none;
}

#albakht-app :where(
  .albakht-field.has-error input,
  .albakht-field.has-error textarea,
  .albakht-field.has-error select,
  .albakht-form-field.has-error input,
  .albakht-form-field.has-error textarea,
  .albakht-form-field.has-error select,
  .form-row.woocommerce-invalid input,
  .form-row.woocommerce-invalid textarea,
  .form-row.woocommerce-invalid select
) {
  border-color: rgba(184, 64, 52, .75);
  background-color: var(--albakht-danger-soft);
}

#albakht-app :where(
  .albakht-field.has-error input:focus,
  .albakht-field.has-error textarea:focus,
  .albakht-field.has-error select:focus,
  .albakht-form-field.has-error input:focus,
  .albakht-form-field.has-error textarea:focus,
  .albakht-form-field.has-error select:focus,
  .form-row.woocommerce-invalid input:focus,
  .form-row.woocommerce-invalid textarea:focus,
  .form-row.woocommerce-invalid select:focus
) {
  box-shadow: 0 0 0 4px rgba(184, 64, 52, .13);
}

#albakht-app :where(
  .albakht-field.has-success input,
  .albakht-field.has-success textarea,
  .albakht-field.has-success select,
  .albakht-form-field.has-success input,
  .albakht-form-field.has-success textarea,
  .albakht-form-field.has-success select,
  .form-row.woocommerce-validated input,
  .form-row.woocommerce-validated textarea,
  .form-row.woocommerce-validated select
) {
  border-color: rgba(31, 138, 91, .55);
}

/* =========================================================
   03.14 CHECKBOX / RADIO BASE
========================================================= */

#albakht-app :where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  display: inline-grid;
  place-items: center;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(210, 190, 163, .98);
  background: var(--albakht-white);
  color: var(--albakht-ink);
  cursor: pointer;
  box-shadow: var(--albakht-shadow-hair);
  transition:
    background-color var(--albakht-speed-fast) var(--albakht-ease),
    border-color var(--albakht-speed-fast) var(--albakht-ease),
    box-shadow var(--albakht-speed-fast) var(--albakht-ease);
}

#albakht-app :where(input[type="checkbox"]) {
  border-radius: 6px;
}

#albakht-app :where(input[type="radio"]) {
  border-radius: 999px;
}

#albakht-app :where(input[type="checkbox"]::before) {
  content: "";
  width: 9px;
  height: 5px;
  border-inline-start: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

#albakht-app :where(input[type="radio"]::before) {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: scale(.7);
}

#albakht-app :where(input[type="checkbox"]:checked, input[type="radio"]:checked) {
  background: var(--albakht-gold);
  border-color: var(--albakht-gold);
  color: var(--albakht-ink);
}

#albakht-app :where(input[type="checkbox"]:checked::before, input[type="radio"]:checked::before) {
  opacity: 1;
}

#albakht-app :where(input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible) {
  outline: none;
  box-shadow: var(--albakht-field-focus-shadow);
}

#albakht-app :where(input[type="checkbox"]:disabled, input[type="radio"]:disabled) {
  cursor: not-allowed;
  opacity: var(--albakht-disabled-opacity);
}

/* =========================================================
   03.15 CHECKBOX / RADIO LABEL ROWS
========================================================= */

#albakht-app :where(
  label.checkbox,
  label.radio,
  .woocommerce-form__label,
  .albakht-checkbox,
  .albakht-radio
) {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--albakht-text);
  font-size: var(--albakht-fs-13);
  line-height: var(--albakht-lh-body);
  font-weight: var(--albakht-fw-bold);
  cursor: pointer;
}

#albakht-app :where(
  label.checkbox input,
  label.radio input,
  .woocommerce-form__label input,
  .albakht-checkbox input,
  .albakht-radio input
) {
  margin-top: 3px;
  flex: 0 0 auto;
}

/* =========================================================
   03.16 SEARCH FIELD / INLINE FORMS
========================================================= */

#albakht-app :where(
  .albakht-search-form,
  .albakht-inline-form
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--albakht-gap-sm);
}

#albakht-app :where(
  .albakht-search-form input,
  .albakht-inline-form input,
  .albakht-search-form select,
  .albakht-inline-form select
) {
  flex: 1 1 auto;
  min-width: 0;
}

#albakht-app :where(
  .albakht-search-form .albakht-btn,
  .albakht-inline-form .albakht-btn
) {
  flex: 0 0 auto;
}

/* =========================================================
   03.17 QUANTITY CONTROLS
========================================================= */

#albakht-app :where(.quantity, .albakht-quantity, .albakht-qty) {
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  display: inline-grid;
  grid-template-columns: 38px minmax(48px, 64px) 38px;
  align-items: center;
  border: 1px solid rgba(233, 221, 206, .95);
  border-radius: var(--albakht-radius-pill);
  background: var(--albakht-white);
  color: var(--albakht-ink);
  box-shadow: var(--albakht-shadow-hair);
  overflow: hidden;
}

#albakht-app :where(.quantity input.qty, .albakht-quantity input, .albakht-qty input) {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 4px;
  border: 0;
  border-inline: 1px solid rgba(233, 221, 206, .9);
  border-radius: 0;
  background: transparent;
  color: var(--albakht-ink);
  text-align: center;
  font-size: var(--albakht-fs-14);
  font-weight: var(--albakht-fw-heavy);
  box-shadow: none;
}

#albakht-app :where(.quantity input.qty:focus, .albakht-quantity input:focus, .albakht-qty input:focus) {
  box-shadow: inset 0 0 0 2px rgba(200, 166, 121, .24);
}

#albakht-app :where(.albakht-qty-btn, .albakht-quantity-btn, .quantity button) {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--albakht-ink);
  font-size: var(--albakht-fs-18);
  line-height: 1;
  font-weight: var(--albakht-fw-heavy);
  cursor: pointer;
  transition:
    background-color var(--albakht-speed-fast) var(--albakht-ease),
    color var(--albakht-speed-fast) var(--albakht-ease);
}

#albakht-app :where(.albakht-qty-btn:hover, .albakht-quantity-btn:hover, .quantity button:hover) {
  background: var(--albakht-gold-4);
  color: var(--albakht-brown);
}

/* =========================================================
   03.18 COUPON / CODE FIELDS
========================================================= */

#albakht-app :where(
  .albakht-coupon-form,
  .coupon
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--albakht-gap-sm);
  align-items: center;
}

#albakht-app :where(
  .albakht-coupon-form input,
  .coupon input
) {
  min-width: 0;
}

#albakht-app :where(
  .albakht-coupon-form .albakht-btn,
  .coupon .button
) {
  min-width: 120px;
}

/* =========================================================
   03.19 FORM PANELS
========================================================= */

#albakht-app :where(
  .albakht-form-panel,
  .albakht-auth-form,
  .albakht-profile-form,
  .albakht-checkout-form,
  .albakht-cart-form
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  gap: var(--albakht-gap-md);
}

#albakht-app :where(
  .albakht-form-panel__head,
  .albakht-auth-form__head,
  .albakht-profile-form__head
) {
  min-width: 0;
  display: grid;
  gap: 5px;
}

#albakht-app :where(
  .albakht-form-panel__head h2,
  .albakht-auth-form__head h2,
  .albakht-profile-form__head h2
) {
  color: var(--albakht-ink);
  font-size: var(--albakht-fs-22);
  line-height: var(--albakht-lh-heading);
  font-weight: var(--albakht-fw-heavy);
}

#albakht-app :where(
  .albakht-form-panel__head p,
  .albakht-auth-form__head p,
  .albakht-profile-form__head p
) {
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-13);
  line-height: var(--albakht-lh-body);
  font-weight: var(--albakht-fw-semibold);
}

/* =========================================================
   03.20 FIELD ICON WRAPPERS
========================================================= */

#albakht-app :where(
  .albakht-field-with-icon,
  .albakht-input-with-icon
) {
  position: relative;
  min-width: 0;
}

#albakht-app :where(
  .albakht-field-with-icon > .albakht-svg-icon,
  .albakht-input-with-icon > .albakht-svg-icon
) {
  position: absolute;
  z-index: 2;
  top: 50%;
  inset-inline-start: 14px;
  width: 18px;
  height: 18px;
  color: var(--albakht-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

#albakht-app :where(
  .albakht-field-with-icon input,
  .albakht-input-with-icon input,
  .albakht-field-with-icon select,
  .albakht-input-with-icon select
) {
  padding-inline-start: 42px;
}

#albakht-app :where(
  .albakht-field-with-icon textarea,
  .albakht-input-with-icon textarea
) {
  padding-inline-start: 42px;
}

/* =========================================================
   03.21 VALIDATION / HELP MESSAGES
========================================================= */

#albakht-app :where(
  .albakht-field-error,
  .albakht-form-error,
  .woocommerce-invalid-required-field .error
) {
  width: 100%;
  display: block;
  color: var(--albakht-danger);
  font-size: var(--albakht-fs-12);
  line-height: var(--albakht-lh-body);
  font-weight: var(--albakht-fw-bold);
}

#albakht-app :where(
  .albakht-field-success,
  .albakht-form-success
) {
  width: 100%;
  display: block;
  color: var(--albakht-success);
  font-size: var(--albakht-fs-12);
  line-height: var(--albakht-lh-body);
  font-weight: var(--albakht-fw-bold);
}

#albakht-app :where(
  .albakht-field-hint,
  .albakht-form-hint
) {
  width: 100%;
  display: block;
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-12);
  line-height: var(--albakht-lh-body);
  font-weight: var(--albakht-fw-semibold);
}

/* =========================================================
   03.22 LOADING STATES
========================================================= */

#albakht-app .albakht-is-loading,
#albakht-app .is-loading,
#albakht-app [aria-busy="true"] {
  cursor: progress;
}

#albakht-app .albakht-btn.is-loading,
#albakht-app .albakht-btn[aria-busy="true"] {
  pointer-events: none;
  color: transparent !important;
}

#albakht-app .albakht-btn.is-loading::after,
#albakht-app .albakht-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  inset: 50% auto auto 50%;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  color: #FFFFFF;
  animation: albakht-button-spin 760ms linear infinite;
}

#albakht-app .albakht-btn-ghost.is-loading::after,
#albakht-app .albakht-btn-ghost[aria-busy="true"]::after,
#albakht-app .albakht-btn-light.is-loading::after,
#albakht-app .albakht-btn-light[aria-busy="true"]::after {
  color: var(--albakht-ink);
}

@keyframes albakht-button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   03.23 SELECT2 / ENHANCED SELECT SAFETY
========================================================= */

#albakht-app :where(.select2-container) {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: var(--albakht-fs-14);
}

#albakht-app :where(.select2-container .select2-selection--single) {
  min-height: var(--albakht-field-height);
  display: flex;
  align-items: center;
  border: 1px solid var(--albakht-field-border);
  border-radius: var(--albakht-field-radius);
  background: var(--albakht-field-bg);
  box-shadow: var(--albakht-field-shadow);
}

#albakht-app :where(.select2-container .select2-selection--single .select2-selection__rendered) {
  padding-inline: var(--albakht-field-pad-x) 42px;
  color: var(--albakht-field-text);
  font-weight: var(--albakht-fw-bold);
  line-height: var(--albakht-field-height);
}

#albakht-app :where(.select2-container .select2-selection--single .select2-selection__arrow) {
  top: 50%;
  inset-inline-end: 12px;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
}

#albakht-app :where(.select2-container--default .select2-selection--single .select2-selection__arrow b) {
  border-color: var(--albakht-muted) transparent transparent transparent;
}

/* =========================================================
   03.24 WOO FORM ROW SAFETY
========================================================= */

#albakht-app :where(.woocommerce form .form-row) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

#albakht-app :where(.woocommerce form .form-row-first, .woocommerce form .form-row-last) {
  float: none;
  width: 100%;
  overflow: visible;
}

#albakht-app :where(.woocommerce form .form-row label) {
  margin: 0;
  color: var(--albakht-field-label);
  font-size: var(--albakht-fs-13);
  line-height: 1.45;
  font-weight: var(--albakht-fw-black);
}

#albakht-app :where(.woocommerce form .form-row .input-text) {
  width: 100%;
}

#albakht-app :where(.woocommerce form .form-row textarea) {
  height: auto;
}

/* =========================================================
   03.25 PAYMENT METHOD FORM ELEMENTS
========================================================= */

#albakht-app :where(
  .wc_payment_methods,
  .woocommerce-checkout-payment,
  .payment_methods
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#albakht-app :where(
  .wc_payment_methods li,
  .payment_methods li
) {
  max-width: 100%;
  min-width: 0;
}

#albakht-app :where(
  .wc_payment_methods label,
  .payment_methods label
) {
  max-width: 100%;
  min-width: 0;
}

#albakht-app :where(
  .payment_box,
  .woocommerce-checkout-payment .payment_box
) {
  max-width: 100%;
  min-width: 0;
}

/* =========================================================
   03.26 RESPONSIVE BUTTONS / FORMS TABLET
========================================================= */

@media (max-width: 1180px) {
  #albakht-app .albakht-form-grid.is-four,
  #albakht-app .albakht-form-grid.albakht-form-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #albakht-app .albakht-form-grid.is-three,
  #albakht-app .albakht-form-grid.albakht-form-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #albakht-app .albakht-form-grid {
    gap: var(--albakht-gap-sm);
  }

  #albakht-app .albakht-btn-lg,
  #albakht-app .albakht-btn-xl {
    min-height: var(--albakht-btn-height-md);
    padding: var(--albakht-btn-pad-md);
    font-size: var(--albakht-fs-14);
  }
}

/* =========================================================
   03.27 RESPONSIVE BUTTONS / FORMS MOBILE
========================================================= */

@media (max-width: 782px) {
  #albakht-app .albakht-form-grid,
  #albakht-app .albakht-form-grid.is-three,
  #albakht-app .albakht-form-grid.is-four,
  #albakht-app .albakht-form-grid.albakht-form-grid-3,
  #albakht-app .albakht-form-grid.albakht-form-grid-4 {
    grid-template-columns: 1fr;
    gap: var(--albakht-mobile-gap);
  }

  #albakht-app :where(
    .albakht-field,
    .albakht-form-field,
    .form-row,
    label.albakht-product-variation-field
  ) {
    gap: 6px;
  }

  #albakht-app :where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select
  ) {
    min-height: 45px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: var(--albakht-fs-13);
  }

  #albakht-app :where(select) {
    padding-inline-end: 38px;
    background-position:
      calc(100% - 21px) 50%,
      calc(100% - 15px) 50%;
  }

  #albakht-app :where(textarea) {
    min-height: 96px;
  }

  #albakht-app .albakht-btn,
  #albakht-app a.albakht-btn,
  #albakht-app button.albakht-btn,
  #albakht-app input[type="submit"].albakht-btn,
  #albakht-app input[type="button"].albakht-btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: var(--albakht-fs-13);
  }

  #albakht-app :where(
    .albakht-actions,
    .albakht-action-row,
    .albakht-button-row,
    .albakht-form-actions,
    .albakht-card-actions
  ) {
    gap: 8px;
  }

  #albakht-app :where(
    .albakht-search-form,
    .albakht-inline-form
  ) {
    gap: 8px;
  }

  #albakht-app :where(
    .albakht-coupon-form,
    .coupon
  ) {
    grid-template-columns: 1fr;
  }

  #albakht-app :where(
    .albakht-coupon-form .albakht-btn,
    .coupon .button
  ) {
    width: 100%;
    min-width: 0;
  }

  #albakht-app :where(.quantity, .albakht-quantity, .albakht-qty) {
    grid-template-columns: 36px minmax(44px, 58px) 36px;
    min-height: 38px;
  }

  #albakht-app :where(.quantity input.qty, .albakht-quantity input, .albakht-qty input) {
    min-height: 36px;
    font-size: var(--albakht-fs-13);
  }

  #albakht-app :where(.albakht-qty-btn, .albakht-quantity-btn, .quantity button) {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

/* =========================================================
   03.28 TINY MOBILE BUTTONS / FORMS
========================================================= */

@media (max-width: 480px) {
  #albakht-app .albakht-btn,
  #albakht-app a.albakht-btn,
  #albakht-app button.albakht-btn,
  #albakht-app input[type="submit"].albakht-btn,
  #albakht-app input[type="button"].albakht-btn {
    width: 100%;
    white-space: normal;
  }

  #albakht-app .albakht-btn-fit,
  #albakht-app .albakht-btn-icon,
  #albakht-app .albakht-btn-square {
    width: auto;
  }

  #albakht-app .albakht-btn-icon,
  #albakht-app .albakht-btn-square {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
  }

  #albakht-app :where(
    .albakht-actions,
    .albakht-action-row,
    .albakht-button-row,
    .albakht-form-actions,
    .albakht-card-actions
  ) {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #albakht-app :where(
    .albakht-actions .albakht-btn,
    .albakht-action-row .albakht-btn,
    .albakht-button-row .albakht-btn,
    .albakht-form-actions .albakht-btn,
    .albakht-card-actions .albakht-btn
  ) {
    width: 100%;
  }

  #albakht-app :where(
    .albakht-search-form,
    .albakht-inline-form
  ) {
    display: grid;
    grid-template-columns: 1fr;
  }

  #albakht-app :where(
    .albakht-search-form .albakht-btn,
    .albakht-inline-form .albakht-btn
  ) {
    width: 100%;
  }

  #albakht-app :where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select
  ) {
    min-height: 44px;
    border-radius: 13px;
  }

  #albakht-app :where(
    .albakht-field > label,
    .albakht-form-field > label,
    .albakht-field > span:first-child,
    .albakht-form-field > span:first-child,
    .form-row > label,
    label.albakht-product-variation-field > span:first-child
  ) {
    font-size: var(--albakht-fs-12);
  }
}

/* =========================================================
   03.29 PRINT SAFETY FOR FORMS / BUTTONS
========================================================= */

@media print {
  #albakht-app .albakht-btn,
  #albakht-app a.albakht-btn,
  #albakht-app button.albakht-btn,
  #albakht-app input[type="submit"].albakht-btn,
  #albakht-app input[type="button"].albakht-btn,
  #albakht-app :where(
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit
  ) {
    display: none !important;
  }

  #albakht-app :where(
    input,
    textarea,
    select
  ) {
    border: 1px solid var(--albakht-print-border) !important;
    background: #FFFFFF !important;
    color: var(--albakht-print-text) !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   04 SHARED HERO + SECTION HEADS
   Paste the next batch directly under this line
========================================================= */
/* =========================================================
   04 SHARED HERO + SECTION HEADS
   Shared visual hierarchy: page hero, eyebrow, section heads,
   section kicker, empty states, Woo notices, breadcrumbs,
   pagination base, shared compact headers.
   Paste this block directly under 03 Buttons + Forms + SVG.
========================================================= */

/* =========================================================
   04.01 SHARED TYPOGRAPHY FOUNDATION
========================================================= */

#albakht-app :where(
  .albakht-page-hero,
  .albakht-section-head,
  .albakht-empty-state,
  .albakht-wc-notices,
  .albakht-pagination
) {
  max-width: 100%;
  min-width: 0;
}

#albakht-app :where(
  .albakht-page-hero h1,
  .albakht-section-head h2,
  .albakht-empty-state h3,
  .albakht-app-missing-template h2
) {
  text-wrap: balance;
}

#albakht-app :where(
  .albakht-page-hero p,
  .albakht-section-head p,
  .albakht-empty-state p,
  .albakht-app-missing-template p
) {
  text-wrap: pretty;
}

#albakht-app :where(
  .albakht-page-hero h1,
  .albakht-section-head h2,
  .albakht-empty-state h3
) {
  color: var(--albakht-ink);
  margin: 0;
}

#albakht-app :where(
  .albakht-page-hero p,
  .albakht-section-head p,
  .albakht-empty-state p
) {
  color: var(--albakht-muted);
  margin: 0;
}

/* =========================================================
   04.02 EYEBROW / BRAND LABEL
========================================================= */

#albakht-app .albakht-eyebrow,
#albakht-app .albakht-app-eyebrow,
#albakht-app .albakht-section-kicker {
  width: fit-content;
  max-width: 100%;
  min-height: 25px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  border: 1px solid rgba(200, 166, 121, .34);
  border-radius: var(--albakht-radius-pill);
  background:
    linear-gradient(180deg, rgba(255, 250, 242, .98), rgba(245, 234, 216, .74));
  color: var(--albakht-brown);
  font-size: var(--albakht-fs-11);
  line-height: 1.35;
  font-weight: var(--albakht-fw-heavy);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: var(--albakht-shadow-hair);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#albakht-app .albakht-eyebrow::before,
#albakht-app .albakht-section-kicker::before {
  content: "";
  width: 5px;
  height: 5px;
  min-width: 5px;
  border-radius: 999px;
  background: var(--albakht-gold);
  box-shadow: 0 0 0 4px rgba(200, 166, 121, .13);
}

#albakht-app .albakht-app-eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  min-width: 5px;
  border-radius: 999px;
  background: var(--albakht-gold);
  box-shadow: 0 0 0 4px rgba(200, 166, 121, .13);
}

#albakht-app .albakht-section-kicker {
  min-height: 23px;
  padding: 3px 9px;
  font-size: var(--albakht-fs-11);
}

#albakht-app :where(
  .albakht-eyebrow .albakht-svg-icon,
  .albakht-section-kicker .albakht-svg-icon,
  .albakht-app-eyebrow .albakht-svg-icon
) {
  width: 14px;
  height: 14px;
  min-width: 14px;
  font-size: 14px;
  color: var(--albakht-gold);
}

#albakht-app :where(
  .albakht-eyebrow:focus-visible,
  .albakht-section-kicker:focus-visible,
  .albakht-app-eyebrow:focus-visible
) {
  outline: var(--albakht-focus-outline);
  outline-offset: var(--albakht-focus-outline-offset);
}

/* =========================================================
   04.03 SHARED PAGE HERO
========================================================= */

#albakht-app .albakht-page-hero {
  width: 100%;
  min-height: 118px;
  margin: 0 0 var(--albakht-space-8);
  padding: clamp(16px, 2.4vw, 24px);
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: var(--albakht-border-normal);
  border-radius: var(--albakht-radius-hero);
  background:
    radial-gradient(circle at 8% 12%, rgba(200, 166, 121, .12), transparent 30%),
    linear-gradient(135deg, var(--albakht-surface) 0%, var(--albakht-white-soft) 58%, var(--albakht-surface-soft) 100%);
  color: var(--albakht-text);
  box-shadow: var(--albakht-shadow-xs);
}

#albakht-app .albakht-page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-start: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--albakht-gold), var(--albakht-gold-3));
  opacity: .94;
  pointer-events: none;
}

#albakht-app .albakht-page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  inset-inline-end: -90px;
  top: -120px;
  border-radius: 999px;
  border: 1px solid rgba(200, 166, 121, .18);
  background: radial-gradient(circle, rgba(200, 166, 121, .08), transparent 68%);
  pointer-events: none;
}

#albakht-app .albakht-page-hero > div {
  width: min(760px, 100%);
  max-width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: start;
}

#albakht-app .albakht-page-hero h1 {
  margin-top: 8px;
  color: var(--albakht-ink);
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: var(--albakht-lh-tight);
  font-weight: var(--albakht-fw-heavy);
  letter-spacing: var(--albakht-letter-tight);
}

#albakht-app .albakht-page-hero p {
  width: min(650px, 100%);
  margin-top: 9px;
  color: var(--albakht-muted);
  font-size: clamp(13px, 1.18vw, 15px);
  line-height: var(--albakht-lh-loose);
  font-weight: var(--albakht-fw-semibold);
}

#albakht-app.albakht-app-shell-view-cart .albakht-page-hero,
#albakht-app.albakht-app-shell-view-checkout .albakht-page-hero,
#albakht-app.albakht-app-shell-view-account .albakht-page-hero,
#albakht-app.albakht-app-shell-view-invoice .albakht-page-hero,
#albakht-app.albakht-app-shell-view-thank-you .albakht-page-hero {
  min-height: 96px;
  margin-bottom: var(--albakht-space-6);
  padding: 14px 16px;
  border-radius: var(--albakht-radius-panel);
}

#albakht-app.albakht-app-shell-view-cart .albakht-page-hero h1,
#albakht-app.albakht-app-shell-view-checkout .albakht-page-hero h1,
#albakht-app.albakht-app-shell-view-account .albakht-page-hero h1,
#albakht-app.albakht-app-shell-view-invoice .albakht-page-hero h1,
#albakht-app.albakht-app-shell-view-thank-you .albakht-page-hero h1 {
  font-size: clamp(22px, 2.5vw, 32px);
}

#albakht-app.albakht-app-shell-view-cart .albakht-page-hero p,
#albakht-app.albakht-app-shell-view-checkout .albakht-page-hero p,
#albakht-app.albakht-app-shell-view-account .albakht-page-hero p,
#albakht-app.albakht-app-shell-view-invoice .albakht-page-hero p,
#albakht-app.albakht-app-shell-view-thank-you .albakht-page-hero p {
  margin-top: 7px;
  font-size: var(--albakht-fs-13);
  line-height: 1.75;
}

/* =========================================================
   04.04 SECTION HEAD BASE
========================================================= */

#albakht-app .albakht-section-head {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 var(--albakht-space-8);
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--albakht-gap-lg);
  position: relative;
}

#albakht-app .albakht-section-head > div {
  min-width: 0;
  max-width: min(760px, 100%);
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0;
}

#albakht-app .albakht-section-head h2 {
  margin-top: 8px;
  color: var(--albakht-ink);
  font-size: clamp(22px, 2.55vw, 34px);
  line-height: var(--albakht-lh-heading);
  font-weight: var(--albakht-fw-heavy);
  letter-spacing: var(--albakht-letter-tight);
}

#albakht-app .albakht-section-head p {
  width: min(620px, 100%);
  margin-top: 7px;
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-14);
  line-height: var(--albakht-lh-loose);
  font-weight: var(--albakht-fw-semibold);
}

#albakht-app .albakht-section-head__link {
  min-width: 0;
  min-height: 42px;
  max-width: 100%;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  position: relative;
  border: var(--albakht-border-normal);
  border-radius: var(--albakht-radius-pill);
  background: var(--albakht-surface);
  color: var(--albakht-ink);
  font-size: var(--albakht-fs-13);
  line-height: 1.35;
  font-weight: var(--albakht-fw-heavy);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--albakht-shadow-xs);
  overflow: hidden;
  transition: var(--albakht-transition-base);
}

#albakht-app .albakht-section-head__link::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(200, 166, 121, .12), rgba(255, 255, 255, 0));
  transition: opacity var(--albakht-speed-fast) var(--albakht-ease);
}

#albakht-app .albakht-section-head__link:hover {
  transform: translateY(var(--albakht-hover-y));
  border-color: rgba(200, 166, 121, .58);
  background: var(--albakht-white);
  color: var(--albakht-ink);
  box-shadow: var(--albakht-shadow-sm);
}

#albakht-app .albakht-section-head__link:hover::before {
  opacity: 1;
}

#albakht-app .albakht-section-head__link:active {
  transform: translateY(0) scale(var(--albakht-active-scale));
}

#albakht-app .albakht-section-head__link:focus {
  outline: none;
}

#albakht-app .albakht-section-head__link:focus-visible {
  outline: var(--albakht-focus-outline);
  outline-offset: var(--albakht-focus-outline-offset);
}

#albakht-app .albakht-section-head__link span {
  min-width: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

#albakht-app .albakht-section-head__link .albakht-svg-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  position: relative;
  z-index: 1;
  color: var(--albakht-gold);
  transition: transform var(--albakht-speed-fast) var(--albakht-ease);
}

#albakht-app .albakht-section-head__link:hover .albakht-svg-icon {
  transform: translateX(-2px);
}

/* =========================================================
   04.05 SECTION HEAD VARIATIONS BY CONTEXT
========================================================= */

#albakht-app :where(
  .albakht-store-section,
  .albakht-category-section,
  .albakht-product-section,
  .albakht-cart-section,
  .albakht-checkout-section,
  .albakht-account-section,
  .albakht-invoice-section
) > .albakht-section-head {
  margin-bottom: var(--albakht-space-7);
}

#albakht-app :where(
  .albakht-cart-page,
  .albakht-checkout-page,
  .albakht-account-page,
  .albakht-invoice-page
) .albakht-section-head {
  margin-bottom: var(--albakht-space-6);
}

#albakht-app :where(
  .albakht-cart-page,
  .albakht-checkout-page,
  .albakht-account-page,
  .albakht-invoice-page
) .albakht-section-head h2 {
  font-size: clamp(20px, 2vw, 28px);
}

#albakht-app :where(
  .albakht-cart-page,
  .albakht-checkout-page,
  .albakht-account-page,
  .albakht-invoice-page
) .albakht-section-head p {
  font-size: var(--albakht-fs-13);
  line-height: 1.75;
}

/* =========================================================
   04.06 COMPACT CARD HEADS USED ACROSS TEMPLATES
========================================================= */

#albakht-app :where(
  .albakht-checkout-card__head,
  .albakht-cart-summary-card__head,
  .albakht-cart-coupon-card__head,
  .albakht-account-card__head,
  .albakht-invoice-meta-card__head,
  .albakht-product-variations__head
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--albakht-gap-sm);
  margin: 0;
  padding: 0;
}

#albakht-app :where(
  .albakht-checkout-card__head > .albakht-svg-icon,
  .albakht-cart-summary-card__head > .albakht-svg-icon,
  .albakht-cart-coupon-card__head > .albakht-svg-icon,
  .albakht-account-card__head > .albakht-svg-icon,
  .albakht-invoice-meta-card__head > .albakht-svg-icon,
  .albakht-product-variations__head > .albakht-svg-icon
) {
  width: var(--albakht-icon-box-sm);
  height: var(--albakht-icon-box-sm);
  min-width: var(--albakht-icon-box-sm);
  display: grid;
  place-items: center;
  border-radius: var(--albakht-radius-md);
  background: var(--albakht-gold-4);
  color: var(--albakht-brown);
  border: 1px solid rgba(200, 166, 121, .24);
}

#albakht-app :where(
  .albakht-checkout-card__head > div,
  .albakht-cart-summary-card__head > div,
  .albakht-cart-coupon-card__head > div,
  .albakht-account-card__head > div,
  .albakht-invoice-meta-card__head > div,
  .albakht-product-variations__head > div
) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#albakht-app :where(
  .albakht-checkout-card__head h3,
  .albakht-cart-summary-card__head h3,
  .albakht-cart-coupon-card__head h3,
  .albakht-account-card__head h3,
  .albakht-invoice-meta-card__head h3,
  .albakht-product-variations__head strong
) {
  margin: 0;
  color: var(--albakht-ink);
  font-size: var(--albakht-fs-17);
  line-height: var(--albakht-lh-heading);
  font-weight: var(--albakht-fw-heavy);
}

#albakht-app :where(
  .albakht-checkout-card__head p,
  .albakht-cart-summary-card__head p,
  .albakht-cart-coupon-card__head p,
  .albakht-account-card__head p,
  .albakht-invoice-meta-card__head p
) {
  margin: 0;
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-12);
  line-height: 1.55;
  font-weight: var(--albakht-fw-semibold);
}

/* =========================================================
   04.07 INLINE SECTION HEADS USED IN PAGES
========================================================= */

#albakht-app :where(
  .albakht-category-products__head,
  .albakht-invoice-section-head,
  .albakht-product-related-head,
  .albakht-cart-items-head,
  .albakht-account-orders-head
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 var(--albakht-space-6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--albakht-gap-md);
}

#albakht-app :where(
  .albakht-category-products__head > div,
  .albakht-invoice-section-head > div,
  .albakht-product-related-head > div,
  .albakht-cart-items-head > div,
  .albakht-account-orders-head > div
) {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 0;
}

#albakht-app :where(
  .albakht-category-products__head h2,
  .albakht-invoice-section-head h3,
  .albakht-product-related-head h2,
  .albakht-cart-items-head h2,
  .albakht-account-orders-head h2
) {
  margin: 7px 0 0;
  color: var(--albakht-ink);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: var(--albakht-lh-heading);
  font-weight: var(--albakht-fw-heavy);
  letter-spacing: -.35px;
}

#albakht-app :where(
  .albakht-category-products__head p,
  .albakht-invoice-section-head p,
  .albakht-product-related-head p,
  .albakht-cart-items-head p,
  .albakht-account-orders-head p
) {
  width: min(620px, 100%);
  margin: 6px 0 0;
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-13);
  line-height: var(--albakht-lh-body);
  font-weight: var(--albakht-fw-semibold);
}

/* =========================================================
   04.08 BACK / COUNT ACTIONS INSIDE INLINE HEADS
========================================================= */

#albakht-app :where(
  .albakht-category-products__back,
  .albakht-invoice-items-count,
  .albakht-cart-items-count,
  .albakht-account-orders-count
) {
  min-height: 38px;
  max-width: 100%;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  border: var(--albakht-border-light);
  border-radius: var(--albakht-radius-pill);
  background: var(--albakht-surface);
  color: var(--albakht-ink);
  font-size: var(--albakht-fs-12);
  line-height: 1.35;
  font-weight: var(--albakht-fw-heavy);
  white-space: nowrap;
  box-shadow: var(--albakht-shadow-hair);
}

#albakht-app :where(
  .albakht-category-products__back .albakht-svg-icon,
  .albakht-invoice-items-count .albakht-svg-icon,
  .albakht-cart-items-count .albakht-svg-icon,
  .albakht-account-orders-count .albakht-svg-icon
) {
  width: 15px;
  height: 15px;
  min-width: 15px;
  color: var(--albakht-gold);
}

#albakht-app :where(.albakht-category-products__back) {
  transition: var(--albakht-transition-base);
}

#albakht-app :where(.albakht-category-products__back:hover) {
  transform: translateY(var(--albakht-hover-y));
  border-color: rgba(200, 166, 121, .55);
  box-shadow: var(--albakht-shadow-xs);
}

/* =========================================================
   04.09 BREADCRUMBS BASE
========================================================= */

#albakht-app :where(
  .albakht-breadcrumbs,
  .albakht-product-breadcrumbs,
  .albakht-category-breadcrumbs
) {
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  margin: 0 0 var(--albakht-space-5);
  padding: 5px 9px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border: var(--albakht-border-light);
  border-radius: var(--albakht-radius-pill);
  background: var(--albakht-surface-glass);
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-12);
  line-height: 1.4;
  font-weight: var(--albakht-fw-bold);
  box-shadow: var(--albakht-shadow-hair);
}

#albakht-app :where(
  .albakht-breadcrumbs a,
  .albakht-product-breadcrumbs a,
  .albakht-category-breadcrumbs a
) {
  color: var(--albakht-muted);
  transition: color var(--albakht-speed-fast) var(--albakht-ease);
}

#albakht-app :where(
  .albakht-breadcrumbs a:hover,
  .albakht-product-breadcrumbs a:hover,
  .albakht-category-breadcrumbs a:hover
) {
  color: var(--albakht-brown);
}

#albakht-app :where(
  .albakht-breadcrumbs span,
  .albakht-product-breadcrumbs span,
  .albakht-category-breadcrumbs span
) {
  min-width: 0;
}

#albakht-app :where(
  .albakht-breadcrumbs .separator,
  .albakht-product-breadcrumbs .separator,
  .albakht-category-breadcrumbs .separator
) {
  color: var(--albakht-gold);
  opacity: .8;
}

/* =========================================================
   04.10 WOOCOMMERCE NOTICES WRAPPER
========================================================= */

#albakht-app .albakht-wc-notices {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 var(--albakht-space-6);
  padding: 0;
  display: grid;
  gap: var(--albakht-gap-sm);
}

#albakht-app .albakht-wc-notices:empty {
  display: none;
}

#albakht-app .albakht-wc-notices :where(
  .woocommerce-error,
  .woocommerce-info,
  .woocommerce-message
) {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  display: grid;
  align-items: center;
  gap: 7px;
  position: relative;
  border: var(--albakht-border-normal);
  border-radius: var(--albakht-radius-lg);
  background: var(--albakht-surface);
  color: var(--albakht-ink);
  box-shadow: var(--albakht-shadow-xs);
  overflow: hidden;
  font-size: var(--albakht-fs-13);
  line-height: var(--albakht-lh-body);
  font-weight: var(--albakht-fw-bold);
}

#albakht-app .albakht-wc-notices :where(
  .woocommerce-error,
  .woocommerce-info,
  .woocommerce-message
)::before {
  content: "";
  display: block;
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--albakht-gold);
  opacity: .9;
}

#albakht-app .albakht-wc-notices .woocommerce-error {
  border-color: rgba(184, 64, 52, .24);
  background: var(--albakht-danger-soft);
  color: var(--albakht-ink);
}

#albakht-app .albakht-wc-notices .woocommerce-error::before {
  background: var(--albakht-danger);
}

#albakht-app .albakht-wc-notices .woocommerce-info {
  border-color: rgba(47, 111, 143, .22);
  background: var(--albakht-info-soft);
  color: var(--albakht-ink);
}

#albakht-app .albakht-wc-notices .woocommerce-info::before {
  background: var(--albakht-info);
}

#albakht-app .albakht-wc-notices .woocommerce-message {
  border-color: rgba(31, 138, 91, .22);
  background: var(--albakht-success-soft);
  color: var(--albakht-ink);
}

#albakht-app .albakht-wc-notices .woocommerce-message::before {
  background: var(--albakht-success);
}

#albakht-app .albakht-wc-notices :where(
  .woocommerce-error a,
  .woocommerce-info a,
  .woocommerce-message a
) {
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--albakht-radius-pill);
  background: var(--albakht-white);
  color: var(--albakht-ink);
  border: var(--albakht-border-light);
  font-size: var(--albakht-fs-12);
  font-weight: var(--albakht-fw-heavy);
  box-shadow: var(--albakht-shadow-hair);
}

/* =========================================================
   04.11 EMPTY STATE
========================================================= */

#albakht-app .albakht-empty-state {
  width: 100%;
  min-height: 280px;
  padding: clamp(22px, 4vw, 42px);
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: var(--albakht-gap-md);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: var(--albakht-border-normal);
  border-radius: var(--albakht-radius-hero);
  background:
    radial-gradient(circle at 50% 0%, rgba(200, 166, 121, .12), transparent 34%),
    linear-gradient(180deg, var(--albakht-white) 0%, var(--albakht-white-soft) 100%);
  color: var(--albakht-text);
  box-shadow: var(--albakht-shadow-sm);
}

#albakht-app .albakht-empty-state::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  inset-inline-start: -120px;
  bottom: -130px;
  border-radius: 999px;
  border: 1px solid rgba(200, 166, 121, .16);
  background: radial-gradient(circle, rgba(200, 166, 121, .08), transparent 65%);
  pointer-events: none;
}

#albakht-app .albakht-empty-state__icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--albakht-radius-2xl);
  background:
    linear-gradient(135deg, var(--albakht-ink), var(--albakht-ink-2));
  color: var(--albakht-gold);
  box-shadow: 0 14px 32px rgba(23, 26, 34, .16);
}

#albakht-app .albakht-empty-state__icon .albakht-svg-icon,
#albakht-app .albakht-empty-state__icon svg {
  width: 30px;
  height: 30px;
  font-size: 30px;
}

#albakht-app .albakht-empty-state h3 {
  margin: var(--albakht-space-2) 0 0;
  color: var(--albakht-ink);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: var(--albakht-lh-heading);
  font-weight: var(--albakht-fw-heavy);
}

#albakht-app .albakht-empty-state p {
  width: min(560px, 100%);
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-14);
  line-height: var(--albakht-lh-loose);
  font-weight: var(--albakht-fw-semibold);
}

#albakht-app .albakht-empty-state .albakht-btn {
  margin-top: var(--albakht-space-3);
}

/* =========================================================
   04.12 PAGINATION BASE
========================================================= */

#albakht-app .albakht-pagination {
  width: 100%;
  max-width: 100%;
  margin: var(--albakht-space-10) 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}

#albakht-app .albakht-pagination :where(a, span) {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--albakht-border-light);
  border-radius: var(--albakht-radius-pill);
  background: var(--albakht-surface);
  color: var(--albakht-ink);
  font-size: var(--albakht-fs-12);
  line-height: 1;
  font-weight: var(--albakht-fw-heavy);
  text-decoration: none;
  box-shadow: var(--albakht-shadow-hair);
  transition: var(--albakht-transition-fast);
}

#albakht-app .albakht-pagination a:hover {
  transform: translateY(var(--albakht-hover-y));
  border-color: rgba(200, 166, 121, .58);
  background: var(--albakht-surface-soft);
  color: var(--albakht-ink);
  box-shadow: var(--albakht-shadow-xs);
}

#albakht-app .albakht-pagination .current {
  background: var(--albakht-ink);
  color: var(--albakht-white);
  border-color: var(--albakht-ink);
  box-shadow: 0 8px 20px rgba(23, 26, 34, .13);
}

#albakht-app .albakht-pagination .dots {
  min-width: 24px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* =========================================================
   04.13 SHARED STATUS PILLS
========================================================= */

#albakht-app :where(
  .albakht-status,
  .albakht-stock,
  .albakht-product-stock,
  .albakht-order-status,
  .albakht-payment-status
) {
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: var(--albakht-border-light);
  border-radius: var(--albakht-radius-pill);
  background: var(--albakht-surface-soft);
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-12);
  line-height: 1.35;
  font-weight: var(--albakht-fw-heavy);
  white-space: nowrap;
}

#albakht-app :where(
  .albakht-status .albakht-svg-icon,
  .albakht-stock .albakht-svg-icon,
  .albakht-product-stock .albakht-svg-icon,
  .albakht-order-status .albakht-svg-icon,
  .albakht-payment-status .albakht-svg-icon
) {
  width: 14px;
  height: 14px;
  min-width: 14px;
}

#albakht-app :where(
  .albakht-status.is-success,
  .albakht-stock.is-in-stock,
  .albakht-product-stock.is-in-stock,
  .albakht-payment-status.is-paid
) {
  background: var(--albakht-success-soft);
  border-color: rgba(31, 138, 91, .24);
  color: var(--albakht-success);
}

#albakht-app :where(
  .albakht-status.is-danger,
  .albakht-stock.is-out-of-stock,
  .albakht-product-stock.is-out-of-stock,
  .albakht-payment-status.is-failed
) {
  background: var(--albakht-danger-soft);
  border-color: rgba(184, 64, 52, .24);
  color: var(--albakht-danger);
}

#albakht-app :where(
  .albakht-status.is-warning,
  .albakht-order-status.is-processing,
  .albakht-payment-status.is-pending
) {
  background: var(--albakht-warning-soft);
  border-color: rgba(184, 121, 33, .24);
  color: var(--albakht-warning);
}

#albakht-app :where(
  .albakht-status.is-info,
  .albakht-order-status.is-completed
) {
  background: var(--albakht-info-soft);
  border-color: rgba(47, 111, 143, .22);
  color: var(--albakht-info);
}

/* =========================================================
   04.14 SHARED MICRO TEXT / META ROWS
========================================================= */

#albakht-app :where(
  .albakht-meta-row,
  .albakht-info-row,
  .albakht-detail-row
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--albakht-gap-sm);
  color: var(--albakht-muted);
  font-size: var(--albakht-fs-13);
  line-height: var(--albakht-lh-body);
  font-weight: var(--albakht-fw-semibold);
}

#albakht-app :where(
  .albakht-meta-row span,
  .albakht-info-row span,
  .albakht-detail-row span
) {
  min-width: 0;
}

#albakht-app :where(
  .albakht-meta-row strong,
  .albakht-info-row strong,
  .albakht-detail-row strong
) {
  color: var(--albakht-ink);
  font-weight: var(--albakht-fw-heavy);
}

/* =========================================================
   04.15 SHARED DIVIDERS
========================================================= */

#albakht-app :where(
  .albakht-divider,
  .albakht-card-divider
) {
  width: 100%;
  height: 1px;
  margin: var(--albakht-space-4) 0;
  border: 0;
  background: rgba(233, 221, 206, .82);
}

#albakht-app :where(
  .albakht-soft-divider
) {
  width: 100%;
  height: 1px;
  margin: var(--albakht-space-3) 0;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(233, 221, 206, .9), transparent);
}

/* =========================================================
   04.16 SHARED RESPONSIVE TABLET
========================================================= */

@media (max-width: 1180px) {
  #albakht-app .albakht-page-hero {
    min-height: 108px;
  }

  #albakht-app .albakht-section-head {
    gap: var(--albakht-gap-md);
  }

  #albakht-app .albakht-section-head h2 {
    font-size: clamp(21px, 2.7vw, 31px);
  }

  #albakht-app :where(
    .albakht-category-products__head h2,
    .albakht-invoice-section-head h3,
    .albakht-product-related-head h2,
    .albakht-cart-items-head h2,
    .albakht-account-orders-head h2
  ) {
    font-size: clamp(20px, 2.5vw, 28px);
  }
}

@media (max-width: 900px) {
  #albakht-app .albakht-page-hero {
    padding: 15px;
    border-radius: var(--albakht-radius-panel);
  }

  #albakht-app .albakht-page-hero h1 {
    font-size: clamp(22px, 4vw, 32px);
  }

  #albakht-app .albakht-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--albakht-gap-sm);
    margin-bottom: var(--albakht-space-6);
  }

  #albakht-app .albakht-section-head > div {
    width: 100%;
    max-width: 100%;
  }

  #albakht-app .albakht-section-head__link {
    min-height: 40px;
  }

  #albakht-app :where(
    .albakht-category-products__head,
    .albakht-invoice-section-head,
    .albakht-product-related-head,
    .albakht-cart-items-head,
    .albakht-account-orders-head
  ) {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--albakht-gap-sm);
  }

  #albakht-app :where(
    .albakht-category-products__back,
    .albakht-invoice-items-count,
    .albakht-cart-items-count,
    .albakht-account-orders-count
  ) {
    min-height: 36px;
  }
}

/* =========================================================
   04.17 SHARED RESPONSIVE MOBILE
========================================================= */

@media (max-width: 782px) {
  #albakht-app .albakht-eyebrow,
  #albakht-app .albakht-app-eyebrow,
  #albakht-app .albakht-section-kicker {
    min-height: 22px;
    padding: 3px 8px;
    gap: 6px;
    font-size: 10.5px;
  }

  #albakht-app .albakht-eyebrow::before,
  #albakht-app .albakht-app-eyebrow::before,
  #albakht-app .albakht-section-kicker::before {
    width: 4px;
    height: 4px;
    min-width: 4px;
    box-shadow: 0 0 0 3px rgba(200, 166, 121, .12);
  }

  #albakht-app .albakht-page-hero {
    min-height: 84px;
    margin-bottom: var(--albakht-space-5);
    padding: 12px;
    border-radius: var(--albakht-mobile-hero-radius);
  }

  #albakht-app .albakht-page-hero::before {
    width: 4px;
  }

  #albakht-app .albakht-page-hero::after {
    width: 150px;
    height: 150px;
    inset-inline-end: -75px;
    top: -90px;
  }

  #albakht-app .albakht-page-hero h1 {
    margin-top: 6px;
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.18;
    letter-spacing: -.35px;
  }

  #albakht-app .albakht-page-hero p {
    margin-top: 6px;
    font-size: var(--albakht-fs-12);
    line-height: 1.65;
  }

  #albakht-app .albakht-section-head {
    margin-bottom: var(--albakht-space-5);
    gap: var(--albakht-gap-sm);
  }

  #albakht-app .albakht-section-head h2 {
    margin-top: 6px;
    font-size: clamp(20px, 5.6vw, 26px);
    line-height: 1.22;
    letter-spacing: -.35px;
  }

  #albakht-app .albakht-section-head p {
    margin-top: 5px;
    font-size: var(--albakht-fs-12);
    line-height: 1.65;
  }

  #albakht-app .albakht-section-head__link {
    min-height: 38px;
    padding: 8px 12px;
    font-size: var(--albakht-fs-12);
  }

  #albakht-app :where(
    .albakht-checkout-card__head,
    .albakht-cart-summary-card__head,
    .albakht-cart-coupon-card__head,
    .albakht-account-card__head,
    .albakht-invoice-meta-card__head,
    .albakht-product-variations__head
  ) {
    gap: 8px;
  }

  #albakht-app :where(
    .albakht-checkout-card__head > .albakht-svg-icon,
    .albakht-cart-summary-card__head > .albakht-svg-icon,
    .albakht-cart-coupon-card__head > .albakht-svg-icon,
    .albakht-account-card__head > .albakht-svg-icon,
    .albakht-invoice-meta-card__head > .albakht-svg-icon,
    .albakht-product-variations__head > .albakht-svg-icon
  ) {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 12px;
  }

  #albakht-app :where(
    .albakht-checkout-card__head h3,
    .albakht-cart-summary-card__head h3,
    .albakht-cart-coupon-card__head h3,
    .albakht-account-card__head h3,
    .albakht-invoice-meta-card__head h3,
    .albakht-product-variations__head strong
  ) {
    font-size: var(--albakht-fs-15);
    line-height: 1.35;
  }

  #albakht-app :where(
    .albakht-category-products__head h2,
    .albakht-invoice-section-head h3,
    .albakht-product-related-head h2,
    .albakht-cart-items-head h2,
    .albakht-account-orders-head h2
  ) {
    margin-top: 6px;
    font-size: clamp(18px, 5vw, 23px);
    line-height: 1.25;
  }

  #albakht-app :where(
    .albakht-category-products__head p,
    .albakht-invoice-section-head p,
    .albakht-product-related-head p,
    .albakht-cart-items-head p,
    .albakht-account-orders-head p
  ) {
    font-size: var(--albakht-fs-12);
    line-height: 1.6;
  }

  #albakht-app .albakht-wc-notices {
    margin-bottom: var(--albakht-space-5);
    gap: 7px;
  }

  #albakht-app .albakht-wc-notices :where(
    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-message
  ) {
    min-height: 40px;
    padding: 9px 11px;
    border-radius: var(--albakht-radius-md);
    font-size: var(--albakht-fs-12);
    line-height: 1.6;
  }

  #albakht-app .albakht-empty-state {
    min-height: 230px;
    padding: 22px 14px;
    border-radius: var(--albakht-mobile-hero-radius);
    gap: var(--albakht-gap-sm);
  }

  #albakht-app .albakht-empty-state__icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 20px;
  }

  #albakht-app .albakht-empty-state__icon .albakht-svg-icon,
  #albakht-app .albakht-empty-state__icon svg {
    width: 25px;
    height: 25px;
    font-size: 25px;
  }

  #albakht-app .albakht-empty-state h3 {
    font-size: clamp(20px, 5.5vw, 25px);
  }

  #albakht-app .albakht-empty-state p {
    font-size: var(--albakht-fs-12);
    line-height: 1.7;
  }

  #albakht-app .albakht-pagination {
    margin-top: var(--albakht-space-7);
    gap: 6px;
  }

  #albakht-app .albakht-pagination :where(a, span) {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: var(--albakht-fs-11);
  }

  #albakht-app :where(
    .albakht-status,
    .albakht-stock,
    .albakht-product-stock,
    .albakht-order-status,
    .albakht-payment-status
  ) {
    min-height: 26px;
    padding: 4px 8px;
    font-size: var(--albakht-fs-11);
  }
}

/* =========================================================
   04.18 TINY MOBILE FIXES
========================================================= */

@media (max-width: 480px) {
  #albakht-app .albakht-page-hero {
    padding: 11px;
    border-radius: 17px;
  }

  #albakht-app .albakht-page-hero h1 {
    font-size: clamp(19px, 6.4vw, 24px);
  }

  #albakht-app .albakht-section-head__link {
    width: 100%;
  }

  #albakht-app :where(
    .albakht-category-products__back,
    .albakht-invoice-items-count,
    .albakht-cart-items-count,
    .albakht-account-orders-count
  ) {
    width: 100%;
  }

  #albakht-app :where(
    .albakht-breadcrumbs,
    .albakht-product-breadcrumbs,
    .albakht-category-breadcrumbs
  ) {
    width: 100%;
    border-radius: 14px;
    font-size: var(--albakht-fs-11);
  }

  #albakht-app .albakht-wc-notices :where(
    .woocommerce-error a,
    .woocommerce-info a,
    .woocommerce-message a
  ) {
    width: 100%;
  }

  #albakht-app .albakht-empty-state .albakht-btn {
    width: 100%;
  }
}

@media (max-width: 380px) {
  #albakht-app .albakht-page-hero h1,
  #albakht-app .albakht-section-head h2 {
    letter-spacing: 0;
  }

  #albakht-app .albakht-page-hero p,
  #albakht-app .albakht-section-head p {
    line-height: 1.58;
  }

  #albakht-app .albakht-pagination :where(a, span) {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
  }
}

/* =========================================================
   04.19 PRINT MODE
========================================================= */

@media print {
  #albakht-app .albakht-page-hero,
  #albakht-app .albakht-section-head__link,
  #albakht-app .albakht-wc-notices,
  #albakht-app .albakht-pagination {
    display: none !important;
  }

  #albakht-app .albakht-section-head {
    margin: 0 0 10px !important;
    display: block !important;
  }

  #albakht-app .albakht-section-head h2 {
    margin: 0 !important;
    color: #111111 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  #albakht-app .albakht-section-head p,
  #albakht-app .albakht-eyebrow,
  #albakht-app .albakht-section-kicker {
    display: none !important;
  }

  #albakht-app .albakht-empty-state {
    min-height: auto !important;
    padding: 18px !important;
    border: 1px solid #dddddd !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   05 STORE PAGE — JOOD ROYAL APP FINAL
   Built from the actual templates:
   - templates/store.php
   - templates/parts.php
   - templates/app-layout.php
   Goal: compact premium mobile-app store, not WooCommerce look.
========================================================= */

/* =========================================================
   05.00 VIEW LOCK + STORE TOKENS
========================================================= */

#albakht-app.albakht-app-shell-view-store {
  --albakht-current-max: 1180px;
  --albakht-store-max: 1180px;
  --albakht-store-ink: #171a22;
  --albakht-store-ink-2: #2A180F;
  --albakht-store-ink-3: #2d3444;
  --albakht-store-gold: #c8a679;
  --albakht-store-gold-2: #d8bd91;
  --albakht-store-gold-3: #ead7b7;
  --albakht-store-cream: #f6efe4;
  --albakht-store-cream-2: #fbf7ef;
  --albakht-store-paper: #FFFFFF;
  --albakht-store-line: rgba(210, 190, 163, .58);
  --albakht-store-line-soft: rgba(233, 221, 206, .88);
  --albakht-store-muted: #756c60;
  --albakht-store-brown: #8b5a36;
  --albakht-store-radius-page: 30px;
  --albakht-store-radius-panel: 24px;
  --albakht-store-radius-card: 22px;
  --albakht-store-radius-control: 16px;
  --albakht-store-shadow-soft: 0 16px 44px rgba(23, 26, 34, .055);
  --albakht-store-shadow-card: 0 12px 30px rgba(23, 26, 34, .07);
  --albakht-store-shadow-hover: 0 20px 50px rgba(23, 26, 34, .11);
  --albakht-store-ease: cubic-bezier(.2, .75, .25, 1);
  background:
    radial-gradient(circle at 92% 0%, rgba(200, 166, 121, .12), transparent 34%),
    radial-gradient(circle at 8% 25%, rgba(139, 90, 54, .045), transparent 30%),
    linear-gradient(180deg, #fffdf9 0%, #fbf7ef 48%, #FFFFFF 100%);
}

#albakht-app.albakht-app-shell-view-store,
#albakht-app.albakht-app-shell-view-store *,
#albakht-app.albakht-app-shell-view-store *::before,
#albakht-app.albakht-app-shell-view-store *::after {
  box-sizing: border-box;
}

#albakht-app.albakht-app-shell-view-store .albakht-app-main {
  width: min(var(--albakht-store-max), calc(100% - 28px)) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-top: 12px !important;
  padding-bottom: max(44px, var(--albakht-main-bottom, 70px)) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-app-content-store {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#albakht-app.albakht-app-shell-view-store :where(
  .albakht-store-stage,
  .albakht-store-hero,
  .albakht-store-quick-links,
  .albakht-store-section-offers,
  .albakht-store-section-featured,
  .albakht-featured-layout,
  .albakht-featured-grid,
  .albakht-product-carousel,
  .albakht-store-service-strip,
  .albakht-products-panel
) {
  display: none !important;
}

/* =========================================================
   05.01 STORE APP FOUNDATION
========================================================= */

#albakht-app.albakht-app-shell-view-store .albakht-store-app {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  position: relative !important;
  isolation: isolate !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-app::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 10%;
  top: 70px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(200, 166, 121, .10), transparent 68%);
  pointer-events: none;
}

#albakht-app.albakht-app-shell-view-store :where(a, button) {
  touch-action: manipulation;
}

#albakht-app.albakht-app-shell-view-store :where(input, select, button, a) {
  -webkit-tap-highlight-color: rgba(200, 166, 121, .18);
}

/* =========================================================
   05.02 ROYAL COMPACT TOPBAR
========================================================= */

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
  width: 100% !important;
  min-height: 154px !important;
  margin: 0 !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "copy meta" !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 42px) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(200, 166, 121, .32) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 12% 42%, rgba(200, 166, 121, .20), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .08), transparent 30%),
    linear-gradient(135deg, #191a21 0%, #2A180F 54%, #151821 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 22px 55px rgba(23, 26, 34, .18), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar::after {
  content: "";
  position: absolute;
  inset-inline: 28px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, transparent, var(--albakht-store-gold), transparent);
  opacity: .95;
  pointer-events: none;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar__copy {
  grid-area: copy !important;
  min-width: 0 !important;
  display: grid !important;
  justify-items: start !important;
  align-content: center !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 1 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-kicker {
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 28px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200, 166, 121, .46) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #f1d8ad !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .1px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-kicker::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--albakht-store-gold);
  box-shadow: 0 0 0 4px rgba(200, 166, 121, .16);
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: -1.6px !important;
  text-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar p {
  width: min(640px, 100%) !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: clamp(13px, 1.2vw, 15px) !important;
  line-height: 1.8 !important;
  font-weight: 800 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
  grid-area: meta !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(106px, 126px)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  position: relative !important;
  z-index: 1 !important;
  direction: rtl !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card {
  min-width: 0 !important;
  min-height: 96px !important;
  padding: 14px 12px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .075) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 30px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform .22s var(--albakht-store-ease), border-color .22s var(--albakht-store-ease), background .22s var(--albakht-store-ease) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(200, 166, 121, .45) !important;
  background: rgba(255, 255, 255, .105) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart {
  background: linear-gradient(135deg, #d9bf93 0%, #c8a679 100%) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #171a22 !important;
  box-shadow: 0 16px 34px rgba(200, 166, 121, .20), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card strong {
  display: block !important;
  color: inherit !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.6px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card span {
  display: block !important;
  color: inherit !important;
  opacity: .9 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card .albakht-svg-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
  stroke-width: 2 !important;
}

/* =========================================================
   05.03 CATEGORY TABS — APP CHIPS
========================================================= */

#albakht-app.albakht-app-shell-view-store .albakht-store-tabs {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scroll-snap-type: x proximity !important;
  border: 1px solid rgba(233, 221, 206, .96) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 10px 32px rgba(23, 26, 34, .055), inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  scrollbar-width: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tabs::-webkit-scrollbar {
  display: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab {
  flex: 0 0 auto !important;
  min-width: 138px !important;
  min-height: 46px !important;
  padding: 9px 13px !important;
  display: inline-grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  scroll-snap-align: start !important;
  border: 1px solid rgba(233, 221, 206, .98) !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  box-shadow: 0 3px 10px rgba(23, 26, 34, .035) !important;
  transition: transform .18s var(--albakht-store-ease), border-color .18s var(--albakht-store-ease), background .18s var(--albakht-store-ease), color .18s var(--albakht-store-ease) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(200, 166, 121, .50) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab.is-active {
  background: linear-gradient(135deg, #171a22, #2A180F) !important;
  border-color: #171a22 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(23, 26, 34, .13) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab .albakht-svg-icon {
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab em {
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(200, 166, 121, .16) !important;
  color: inherit !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab.is-active em {
  background: rgba(200, 166, 121, .22) !important;
  color: #f4dcb5 !important;
}

/* =========================================================
   05.04 PRODUCTS SHELL
========================================================= */

#albakht-app.albakht-app-shell-view-store .albakht-store-products-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(14px, 2vw, 22px) !important;
  display: grid !important;
  gap: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(233, 221, 206, .96) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(200, 166, 121, .08), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 250, 242, .74)) !important;
  box-shadow: 0 18px 50px rgba(23, 26, 34, .06), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-products-shell::before {
  content: "";
  position: absolute;
  inset-inline: 24px;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(200, 166, 121, .80), transparent);
  pointer-events: none;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  position: relative !important;
  z-index: 1 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__title {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__title span {
  width: fit-content !important;
  padding: 5px 9px !important;
  display: inline-flex !important;
  border: 1px solid rgba(200, 166, 121, .34) !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 242, .86) !important;
  color: var(--albakht-store-brown) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__title h2 {
  margin: 0 !important;
  color: #171a22 !important;
  font-size: clamp(24px, 3.1vw, 38px) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: -.8px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__count {
  flex: 0 0 auto !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid rgba(233, 221, 206, .96) !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
  box-shadow: 0 5px 16px rgba(23, 26, 34, .04) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__count .albakht-svg-icon {
  width: 17px !important;
  height: 17px !important;
  color: var(--albakht-store-gold) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__count strong {
  color: #171a22 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__count span {
  color: var(--albakht-store-muted) !important;
}

/* =========================================================
   05.05 FILTERS — SINGLE PREMIUM CONTROL BAR
========================================================= */

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  border: 1px solid rgba(233, 221, 206, .96) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: 0 10px 28px rgba(23, 26, 34, .045), inset 0 1px 0 rgba(255,255,255,.9) !important;
  position: relative !important;
  z-index: 1 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell > .albakht-svg-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  border: 1px solid rgba(233, 221, 206, .96) !important;
  background: #171a22 !important;
  color: var(--albakht-store-gold) !important;
  padding: 10px !important;
  box-shadow: 0 8px 18px rgba(23, 26, 34, .10) !important;
}

#albakht-app.albakht-app-shell-view-store form.albakht-store-filters,
#albakht-app.albakht-app-shell-view-store .albakht-store-filters {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search {
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 14px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(210, 190, 163, .82) !important;
  border-radius: 17px !important;
  background: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 5px 13px rgba(23,26,34,.025) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search .albakht-svg-icon {
  width: 18px !important;
  height: 18px !important;
  color: var(--albakht-store-brown) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search input {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #171a22 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 46px !important;
  font-weight: 800 !important;
  outline: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search input::placeholder {
  color: rgba(117, 108, 96, .70) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(136px, 156px)) auto auto !important;
  align-items: end !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label {
  min-width: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label > span {
  padding-inline: 6px !important;
  color: var(--albakht-store-brown) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(210, 190, 163, .82) !important;
  border-radius: 16px !important;
  background-color: #FFFFFF !important;
  color: #171a22 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 5px 13px rgba(23,26,34,.025) !important;
  font-size: 12px !important;
  line-height: 48px !important;
  font-weight: 900 !important;
  outline: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects :where(select:focus, input:focus),
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search:focus-within {
  border-color: rgba(200, 166, 121, .92) !important;
  box-shadow: 0 0 0 4px rgba(200,166,121,.14), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .albakht-btn,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects a.albakht-btn {
  min-width: 76px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-align: center !important;
  box-shadow: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .albakht-btn-primary,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button[type="submit"] {
  border: 1px solid #171a22 !important;
  background: #171a22 !important;
  color: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .albakht-btn-ghost,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects a.albakht-btn-ghost {
  border: 1px solid rgba(210, 190, 163, .82) !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
}

/* =========================================================
   05.06 SEARCH NOTE + PAGINATION
========================================================= */

#albakht-app.albakht-app-shell-view-store .albakht-search-result-note {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border: 1px solid rgba(200, 166, 121, .32) !important;
  border-radius: 16px !important;
  background: rgba(245, 234, 216, .72) !important;
  color: #171a22 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-search-result-note strong {
  color: var(--albakht-store-brown) !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-search-result-note a {
  margin-inline-start: auto !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(210, 190, 163, .82) !important;
  color: #171a22 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

/* =========================================================
   05.07 PRODUCT GRID — NO EMPTY STRETCH
========================================================= */

#albakht-app.albakht-app-shell-view-store .albakht-products-grid,
#albakht-app.albakht-app-shell-view-store ul.products {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 2px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 268px)) !important;
  justify-content: start !important;
  align-items: stretch !important;
  gap: 14px !important;
  list-style: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-products-grid > *,
#albakht-app.albakht-app-shell-view-store ul.products > * {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

/* =========================================================
   05.08 PRODUCT CARD — ROYAL APP TILE
========================================================= */

#albakht-app.albakht-app-shell-view-store .albakht-product-card,
#albakht-app.albakht-app-shell-view-store ul.products li.product {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(210, 190, 163, .72) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #fffdf9 100%) !important;
  color: #171a22 !important;
  box-shadow: 0 14px 34px rgba(23, 26, 34, .07), inset 0 1px 0 rgba(255,255,255,.90) !important;
  transition: transform .22s var(--albakht-store-ease), box-shadow .22s var(--albakht-store-ease), border-color .22s var(--albakht-store-ease) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-card:hover,
#albakht-app.albakht-app-shell-view-store ul.products li.product:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(200, 166, 121, .68) !important;
  box-shadow: 0 22px 52px rgba(23, 26, 34, .11), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-card::after {
  content: "";
  position: absolute;
  inset-inline: 16px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, transparent, rgba(200,166,121,.72), transparent);
  opacity: .0;
  transition: opacity .22s var(--albakht-store-ease) !important;
  pointer-events: none;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-card:hover::after {
  opacity: 1 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media {
  width: 100% !important;
  aspect-ratio: 1 / .72 !important;
  min-height: 0 !important;
  max-height: 210px !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px 22px 18px 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(200,166,121,.22), transparent 38%),
    linear-gradient(180deg, #fbf7ef 0%, #f6efe4 100%) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media img,
#albakht-app.albakht-app-shell-view-store ul.products li.product img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translateZ(0) !important;
  transition: transform .34s var(--albakht-store-ease), filter .34s var(--albakht-store-ease) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-card:hover .albakht-product-media img {
  transform: scale(1.035) translateY(-2px) !important;
  filter: saturate(1.04) contrast(1.03) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i {
  position: absolute !important;
  inset-inline-start: 12px !important;
  bottom: 12px !important;
  z-index: 4 !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  border-radius: 15px !important;
  background: #2A180F !important;
  color: #d8bd91 !important;
  box-shadow: 0 12px 24px rgba(23, 26, 34, .22) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i::before,
#albakht-app.albakht-app-shell-view-store .albakht-product-media i::after {
  content: "" !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i::before {
  width: 16px !important;
  height: 2px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i::after {
  width: 2px !important;
  height: 16px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-badges,
#albakht-app.albakht-app-shell-view-store .albakht-badges,
#albakht-app.albakht-app-shell-view-store .onsale {
  position: absolute !important;
  z-index: 5 !important;
  top: 10px !important;
  inset-inline-end: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  max-width: calc(100% - 20px) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-badge,
#albakht-app.albakht-app-shell-view-store .albakht-badge,
#albakht-app.albakht-app-shell-view-store .onsale {
  min-height: 24px !important;
  padding: 5px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  background: rgba(23, 26, 34, .92) !important;
  color: #FFFFFF !important;
  box-shadow: 0 9px 18px rgba(23,26,34,.15) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-info {
  min-width: 0 !important;
  padding: 13px 13px 14px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto auto !important;
  align-content: start !important;
  gap: 10px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-cat {
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 26px !important;
  padding: 5px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(200, 166, 121, .34) !important;
  border-radius: 999px !important;
  background: rgba(245, 234, 216, .72) !important;
  color: #8b5a36 !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-title,
#albakht-app.albakht-app-shell-view-store .albakht-product-title a,
#albakht-app.albakht-app-shell-view-store ul.products li.product .woocommerce-loop-product__title {
  min-width: 0 !important;
  min-height: 39px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #171a22 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 950 !important;
  letter-spacing: -.2px !important;
  text-decoration: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-title:hover {
  color: #8b5a36 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-excerpt {
  margin: 0 !important;
  color: var(--albakht-store-muted) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  font-weight: 750 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-price,
#albakht-app.albakht-app-shell-view-store .albakht-price,
#albakht-app.albakht-app-shell-view-store .price,
#albakht-app.albakht-app-shell-view-store ul.products li.product .price {
  min-width: 0 !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  color: #171a22 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-price .amount,
#albakht-app.albakht-app-shell-view-store .albakht-price .amount,
#albakht-app.albakht-app-shell-view-store .price .amount {
  color: #171a22 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-price del,
#albakht-app.albakht-app-shell-view-store .price del {
  color: rgba(117, 108, 96, .70) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-price ins,
#albakht-app.albakht-app-shell-view-store .price ins {
  color: #8b5a36 !important;
  text-decoration: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions {
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 2px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 82px !important;
  align-items: center !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn,
#albakht-app.albakht-app-shell-view-store .albakht-product-card .button,
#albakht-app.albakht-app-shell-view-store .albakht-product-card button,
#albakht-app.albakht-app-shell-view-store .albakht-product-card input[type="submit"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 15px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-primary,
#albakht-app.albakht-app-shell-view-store .albakht-product-card .albakht-add-cart,
#albakht-app.albakht-app-shell-view-store .albakht-product-card button.albakht-add-cart {
  border: 1px solid #171a22 !important;
  background: linear-gradient(135deg, #171a22 0%, #2A180F 100%) !important;
  color: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-primary:hover,
#albakht-app.albakht-app-shell-view-store .albakht-product-card .albakht-add-cart:hover {
  transform: translateY(-1px) !important;
  border-color: #2A180F !important;
  background: linear-gradient(135deg, #2A180F 0%, #2d3444 100%) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-ghost,
#albakht-app.albakht-app-shell-view-store .albakht-product-actions a.albakht-btn-ghost {
  border: 1px solid rgba(210, 190, 163, .82) !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-ghost:hover {
  border-color: rgba(200, 166, 121, .66) !important;
  background: #fffaf2 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-add-cart.is-added {
  background: linear-gradient(135deg, #c8a679 0%, #d8bd91 100%) !important;
  border-color: rgba(200,166,121,.92) !important;
  color: #171a22 !important;
}

/* =========================================================
   05.09 EMPTY STATE + PAGINATION
========================================================= */

#albakht-app.albakht-app-shell-view-store .albakht-empty-state {
  width: min(520px, 100%) !important;
  margin: 8px auto !important;
  padding: 28px !important;
  display: grid !important;
  place-items: center !important;
  gap: 10px !important;
  text-align: center !important;
  border: 1px solid rgba(233,221,206,.96) !important;
  border-radius: 24px !important;
  background: #FFFFFF !important;
  box-shadow: 0 14px 34px rgba(23,26,34,.06) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-pagination {
  width: 100% !important;
  margin: 6px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-pagination :where(a, span) {
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(210,190,163,.82) !important;
  border-radius: 13px !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-pagination .current {
  background: #171a22 !important;
  border-color: #171a22 !important;
  color: #FFFFFF !important;
}

/* =========================================================
   05.10 MOBILE APP EXPERIENCE
========================================================= */

@media (max-width: 1024px) {
  #albakht-app.albakht-app-shell-view-store .albakht-app-main {
    width: min(100% - 22px, 920px) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
    grid-template-columns: 1fr !important;
    grid-template-areas: "copy" "meta" !important;
    min-height: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #albakht-app.albakht-app-shell-view-store form.albakht-store-filters,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filters {
    grid-template-columns: 1fr !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects {
    grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(2, minmax(88px, auto)) !important;
  }
}

@media (max-width: 782px) {
  #albakht-app.albakht-app-shell-view-store {
    background:
      radial-gradient(circle at 90% -8%, rgba(200,166,121,.16), transparent 34%),
      linear-gradient(180deg, #fffdf9 0%, #fbf7ef 62%, #FFFFFF 100%) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-app-main {
    width: calc(100% - 18px) !important;
    padding-top: 9px !important;
    padding-bottom: max(100px, var(--albakht-main-bottom, 70px)) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-app {
    gap: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
    padding: 16px !important;
    border-radius: 24px !important;
    gap: 14px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
    font-size: 34px !important;
    letter-spacing: -.8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar p {
    font-size: 12.5px !important;
    line-height: 1.75 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card {
    min-height: 68px !important;
    padding: 10px 8px !important;
    border-radius: 17px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card strong {
    font-size: 25px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card span {
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card .albakht-svg-icon {
    width: 24px !important;
    height: 24px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-tabs {
    min-height: 58px !important;
    padding: 7px !important;
    border-radius: 20px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-tab {
    min-width: 132px !important;
    min-height: 44px !important;
    border-radius: 15px !important;
    font-size: 11.5px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-products-shell {
    padding: 12px !important;
    border-radius: 24px !important;
    gap: 12px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-toolbar {
    align-items: end !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__title h2 {
    font-size: 25px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__count {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell > .albakht-svg-icon {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label > span {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .albakht-btn,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects a.albakht-btn {
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .albakht-btn-primary,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .albakht-btn-ghost {
    width: 100% !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-products-grid,
  #albakht-app.albakht-app-shell-view-store ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-card,
  #albakht-app.albakht-app-shell-view-store ul.products li.product {
    border-radius: 20px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media {
    aspect-ratio: 1 / .78 !important;
    max-height: 176px !important;
    border-radius: 19px 19px 16px 16px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media img,
  #albakht-app.albakht-app-shell-view-store ul.products li.product img {
    padding: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media i {
    width: 36px !important;
    height: 36px !important;
    border-radius: 13px !important;
    inset-inline-start: 9px !important;
    bottom: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-info {
    padding: 10px !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-cat {
    min-height: 24px !important;
    padding: 5px 8px !important;
    font-size: 9.5px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-title,
  #albakht-app.albakht-app-shell-view-store .albakht-product-title a {
    min-height: 35px !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-price,
  #albakht-app.albakht-app-shell-view-store .albakht-product-price .amount,
  #albakht-app.albakht-app-shell-view-store .price,
  #albakht-app.albakht-app-shell-view-store .price .amount {
    font-size: 14px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn,
  #albakht-app.albakht-app-shell-view-store .albakht-product-card .button,
  #albakht-app.albakht-app-shell-view-store .albakht-product-card button {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 11.5px !important;
    border-radius: 14px !important;
  }

  #albakht-app.albakht-app-shell-view-store.albakht-app-with-bottom-nav .albakht-app-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    position: fixed !important;
    z-index: var(--albakht-bottom-nav-z, 9998) !important;
    inset-inline: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    min-height: 64px !important;
    padding: 7px !important;
    border: 1px solid rgba(220, 204, 184, .85) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 16px 42px rgba(23, 26, 34, .14) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-app-bottom-nav a {
    min-width: 0 !important;
    min-height: 50px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    position: relative !important;
    border-radius: 16px !important;
    color: #756c60 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-app-bottom-nav a.is-active {
    background: #171a22 !important;
    color: #FFFFFF !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-app-bottom-nav .albakht-svg-icon {
    width: 19px !important;
    height: 19px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-app-bottom-nav strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-app-bottom-nav .albakht-cart-count {
    position: absolute !important;
    top: 4px !important;
    inset-inline-end: 9px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #c8a679 !important;
    color: #171a22 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-weight: 950 !important;
  }
}

@media (max-width: 420px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
    font-size: 30px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card strong {
    font-size: 22px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart span {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-products-grid,
  #albakht-app.albakht-app-shell-view-store ul.products {
    grid-template-columns: 1fr !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-card {
    width: min(100%, 330px) !important;
    justify-self: center !important;
  }
}

/* =========================================================
   05.11 ACCESSIBILITY / MOTION GUARDS
========================================================= */

#albakht-app.albakht-app-shell-view-store a:focus-visible,
#albakht-app.albakht-app-shell-view-store button:focus-visible,
#albakht-app.albakht-app-shell-view-store input:focus-visible,
#albakht-app.albakht-app-shell-view-store select:focus-visible {
  outline: 3px solid rgba(200, 166, 121, .36) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  #albakht-app.albakht-app-shell-view-store *,
  #albakht-app.albakht-app-shell-view-store *::before,
  #albakht-app.albakht-app-shell-view-store *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

body #albakht-app.albakht-app-shell-view-store .albakht-store-app,
body #albakht-app.albakht-app-shell-view-store .albakht-store-topbar,
body #albakht-app.albakht-app-shell-view-store .albakht-store-tabs,
body #albakht-app.albakht-app-shell-view-store .albakht-store-products-shell,
body #albakht-app.albakht-app-shell-view-store .albakht-products-grid,
body #albakht-app.albakht-app-shell-view-store .albakht-product-card {
  float: none !important;
  clear: none !important;
}

/* =========================================================
   06 CATEGORY PAGE
   Paste the next batch directly under this line
========================================================= */


/* =========================================================
   05 STORE PAGE — POLISH OVERRIDES V2
   Compact premium topbar + refined store controls + card polish
========================================================= */

#albakht-app.albakht-app-shell-view-store {
  background:
    radial-gradient(circle at 88% 0%, rgba(200, 166, 121, .10), transparent 28%),
    linear-gradient(180deg, #fffdfa 0%, #fbf7ef 42%, #FFFFFF 100%) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-app {
  gap: 10px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
  min-height: 132px !important;
  padding: clamp(14px, 1.8vw, 22px) !important;
  gap: 16px !important;
  border-radius: 28px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  background:
    radial-gradient(circle at 10% 35%, rgba(200, 166, 121, .18), transparent 26%),
    linear-gradient(135deg, #24262f 0%, #1e2635 44%, #162136 100%) !important;
  box-shadow: 0 16px 34px rgba(23,26,34,.14), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar::before {
  opacity: .11 !important;
  background-size: 28px 28px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar::after {
  inset-inline: 20px !important;
  height: 2px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar__copy {
  gap: 6px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-kicker {
  min-height: 24px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
  font-size: clamp(30px, 3.6vw, 54px) !important;
  line-height: .95 !important;
  letter-spacing: -1.2px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar p {
  width: min(560px, 100%) !important;
  font-size: clamp(12px, 1vw, 14px) !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.78) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
  grid-template-columns: repeat(3, minmax(84px, 108px)) !important;
  gap: 10px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card {
  min-height: 84px !important;
  padding: 10px 10px !important;
  border-radius: 20px !important;
  gap: 3px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card strong {
  font-size: 22px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card span {
  font-size: 10px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card .albakht-svg-icon {
  width: 26px !important;
  height: 26px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart {
  background: linear-gradient(135deg, #dbc08e 0%, #c8a679 100%) !important;
  border-color: rgba(255,255,255,.18) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tabs {
  min-height: 58px !important;
  padding: 7px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 8px 24px rgba(23,26,34,.05) !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab {
  min-height: 42px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
  font-size: 12px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-products-shell {
  padding: 14px !important;
  border-radius: 28px !important;
  box-shadow: 0 12px 34px rgba(23,26,34,.055) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar {
  margin-bottom: 10px !important;
  gap: 12px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__title h2 {
  font-size: clamp(24px, 2.4vw, 36px) !important;
  line-height: 1.05 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__count {
  min-height: 48px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
  padding: 10px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #fffdfa 0%, #fff7ed 100%) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell > .albakht-svg-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

#albakht-app.albakht-app-shell-view-store form.albakht-store-filters {
  gap: 10px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects {
  gap: 10px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search input,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .button,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="submit"],
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="reset"] {
  min-height: 44px !important;
  border-radius: 16px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-products-grid {
  gap: 14px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-card {
  border-radius: 22px !important;
  border-color: rgba(220, 204, 184, .86) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #fffdfa 100%) !important;
  box-shadow: 0 10px 26px rgba(23,26,34,.05) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 38px rgba(23,26,34,.09) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media {
  aspect-ratio: 1 / .82 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff9ef 0%, #f7efe1 100%) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media img {
  object-fit: contain !important;
  padding: 8px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #323848 0%, #2A180F 100%) !important;
  color: #f0d7ab !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 24px rgba(23,26,34,.16) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-info {
  gap: 10px !important;
  padding: 12px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-cat {
  background: #fbf2e2 !important;
  color: #9a6a3e !important;
  border: 1px solid rgba(200,166,121,.24) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-title {
  font-size: 16px !important;
  line-height: 1.5 !important;
  min-height: auto !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-price,
#albakht-app.albakht-app-shell-view-store .albakht-product-price .amount {
  font-size: 15px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions {
  grid-template-columns: 88px minmax(0, 1fr) !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn {
  min-height: 42px !important;
  border-radius: 15px !important;
  font-size: 12px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-primary,
#albakht-app.albakht-app-shell-view-store .albakht-add-cart,
#albakht-app.albakht-app-shell-view-store .add_to_cart_button,
#albakht-app.albakht-app-shell-view-store .single_add_to_cart_button {
  background: linear-gradient(135deg, #1e2635 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(23,26,34,.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-primary:hover,
#albakht-app.albakht-app-shell-view-store .albakht-add-cart:hover,
#albakht-app.albakht-app-shell-view-store .add_to_cart_button:hover,
#albakht-app.albakht-app-shell-view-store .single_add_to_cart_button:hover {
  background: linear-gradient(135deg, #293348 0%, #182030 100%) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-ghost {
  background: #fffaf2 !important;
  color: #171a22 !important;
  border-color: rgba(210,190,163,.82) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-search-result-note {
  border-radius: 18px !important;
}

@media (max-width: 1120px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "copy"
      "meta" !important;
    min-height: auto !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar__copy {
    justify-items: start !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-store .albakht-app-main {
    width: min(100%, calc(100% - 12px)) !important;
    padding-top: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-app {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
    padding: 12px !important;
    border-radius: 22px !important;
    gap: 12px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-kicker {
    order: -1;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
    font-size: 36px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar p {
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card {
    min-height: 72px !important;
    border-radius: 18px !important;
    padding: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card strong {
    font-size: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-tabs {
    padding: 6px !important;
    min-height: 52px !important;
    border-radius: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-tab {
    min-height: 38px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-products-shell {
    padding: 10px !important;
    border-radius: 22px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__title h2 {
    font-size: 30px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-store form.albakht-store-filters {
    display: grid !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-card {
    border-radius: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media {
    aspect-ratio: 1 / .9 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-info {
    padding: 10px !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-title {
    font-size: 14px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions {
    grid-template-columns: 1fr !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn,
  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-ghost,
  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-primary {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
    font-size: 32px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card span {
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   05 STORE PAGE — ROYAL POLISH PATCH V3
   Fixes from live screenshots:
   - White text/icon on cart meta card.
   - White number/text inside active category tab.
   - Custom premium selects instead of Windows XP native look.
   - Centered product copy and balanced card.
   - Non-cropped product image.
   - Better plus button position/color.
   - More creative compact topbar while keeping mobile stable.
========================================================= */

/* ---------- Topbar: tighter, more premium, less heavy ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
  min-height: 118px !important;
  padding: clamp(12px, 1.55vw, 20px) !important;
  border-radius: 26px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  background:
    linear-gradient(90deg, rgba(200,166,121,.12), transparent 23%, transparent 76%, rgba(200,166,121,.10)),
    radial-gradient(circle at 11% 36%, rgba(200,166,121,.20), transparent 25%),
    radial-gradient(circle at 92% 28%, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(135deg, #24252b 0%, #202839 44%, #151b29 100%) !important;
  box-shadow:
    0 16px 34px rgba(23, 26, 34, .13),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(200,166,121,.20) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar::before {
  opacity: .085 !important;
  background-size: 26px 26px !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar::after {
  inset-inline: clamp(18px, 3vw, 42px) !important;
  height: 2px !important;
  background:
    linear-gradient(90deg, transparent, rgba(200,166,121,.0), rgba(200,166,121,.95), rgba(234,215,183,.95), rgba(200,166,121,.0), transparent) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar__copy {
  gap: 5px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-kicker {
  min-height: 24px !important;
  padding: 4px 10px !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(200,166,121,.45) !important;
  color: #f7dfb4 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 16px rgba(0,0,0,.12) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
  font-size: clamp(30px, 3.35vw, 50px) !important;
  line-height: .96 !important;
  letter-spacing: -1.25px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar p {
  max-width: 620px !important;
  font-size: clamp(12px, .95vw, 14px) !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.80) !important;
}

/* ---------- Topbar meta cards: balanced + white active text ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
  grid-template-columns: repeat(3, minmax(76px, 100px)) !important;
  gap: 9px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card {
  min-height: 72px !important;
  padding: 9px 10px !important;
  border-radius: 18px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  gap: 2px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045)) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card strong {
  color: #FFFFFF !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card span {
  color: rgba(255,255,255,.86) !important;
  opacity: 1 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart {
  grid-template-columns: auto auto !important;
  grid-template-rows: 1fr !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 8px !important;
  background:
    linear-gradient(135deg, #d6b77f 0%, #c19a63 100%) !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.12) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart span,
#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart strong,
#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart .albakht-svg-icon {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart .albakht-svg-icon {
  width: 29px !important;
  height: 29px !important;
  padding: 5px !important;
  border-radius: 12px !important;
  background: rgba(23,26,34,.18) !important;
  stroke-width: 2.2 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card:not(.is-cart)::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.045);
  pointer-events: none;
}

/* ---------- Category tabs: active chip number and text must be white ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-tabs {
  align-items: center !important;
  border-color: rgba(220,204,184,.78) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,250,242,.80)) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab.is-active,
#albakht-app.albakht-app-shell-view-store .albakht-store-tab.is-active:hover {
  background: linear-gradient(135deg, #2A180F 0%, #141a25 100%) !important;
  border-color: rgba(23,26,34,.95) !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 20px rgba(23,26,34,.12) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab.is-active span,
#albakht-app.albakht-app-shell-view-store .albakht-store-tab.is-active strong,
#albakht-app.albakht-app-shell-view-store .albakht-store-tab.is-active .albakht-svg-icon {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-tab.is-active em {
  background: rgba(255,255,255,.16) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* ---------- Filters: kill native Windows XP select look ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,239,.88)) !important;
  border-color: rgba(220,204,184,.82) !important;
  box-shadow:
    0 10px 28px rgba(23,26,34,.045),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label {
  position: relative !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label::after {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  bottom: 18px;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid #8b5a36;
  border-bottom: 2px solid #8b5a36;
  transform: rotate(45deg);
  pointer-events: none;
  opacity: .86;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-inline: 16px 36px !important;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #fffaf2 100%) !important;
  color: #171a22 !important;
  border: 1px solid rgba(210,190,163,.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 4px 12px rgba(23,26,34,.025) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select:focus {
  border-color: rgba(200,166,121,.95) !important;
  box-shadow:
    0 0 0 4px rgba(200,166,121,.14),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select option {
  color: #171a22 !important;
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search input {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #fffaf2 100%) !important;
  border-color: rgba(210,190,163,.82) !important;
  color: #171a22 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search .albakht-svg-icon,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search button .albakht-svg-icon {
  color: #8b5a36 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell > .albakht-svg-icon {
  background:
    linear-gradient(180deg, #2A180F 0%, #151b26 100%) !important;
  color: #f0d7ab !important;
  box-shadow:
    0 9px 18px rgba(23,26,34,.12),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* ---------- Product card: centered, refined, no crop ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-product-card {
  text-align: center !important;
  justify-items: stretch !important;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #fffdfa 55%, #fbf7ef 100%) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media {
  aspect-ratio: 1 / .78 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(200,166,121,.16), transparent 46%),
    linear-gradient(180deg, #fff8eb 0%, #f8efe1 100%) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 10px !important;
  transform: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-card:hover .albakht-product-media img {
  transform: scale(1.025) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-info {
  justify-items: center !important;
  text-align: center !important;
  align-content: start !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-cat {
  margin-inline: auto !important;
  justify-content: center !important;
  text-align: center !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-title {
  width: 100% !important;
  text-align: center !important;
  justify-self: center !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-price,
#albakht-app.albakht-app-shell-view-store .albakht-price,
#albakht-app.albakht-app-shell-view-store .price {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions {
  width: 100% !important;
  align-self: end !important;
}

/* ---------- Plus button: white plus + better premium position ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-product-media i {
  inset-inline-start: 14px !important;
  bottom: 14px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, #242b3b 0%, #171d2a 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 14px 26px rgba(23,26,34,.18),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i::before,
#albakht-app.albakht-app-shell-view-store .albakht-product-media i::after {
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i::before {
  width: 15px !important;
  height: 2px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i::after {
  width: 2px !important;
  height: 15px !important;
}

/* ---------- Badges ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-product-badge,
#albakht-app.albakht-app-shell-view-store .albakht-badge,
#albakht-app.albakht-app-shell-view-store .onsale {
  background:
    linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.14) !important;
}

/* ---------- Buttons: premium navy/gold, no green ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-primary,
#albakht-app.albakht-app-shell-view-store .albakht-add-cart,
#albakht-app.albakht-app-shell-view-store .add_to_cart_button,
#albakht-app.albakht-app-shell-view-store .single_add_to_cart_button,
#albakht-app.albakht-app-shell-view-store .albakht-product-actions a.ajax_add_to_cart {
  background:
    linear-gradient(135deg, #2A180F 0%, #131a26 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(23,26,34,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 10px 20px rgba(23,26,34,.10) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-primary:hover,
#albakht-app.albakht-app-shell-view-store .albakht-add-cart:hover,
#albakht-app.albakht-app-shell-view-store .add_to_cart_button:hover,
#albakht-app.albakht-app-shell-view-store .single_add_to_cart_button:hover,
#albakht-app.albakht-app-shell-view-store .albakht-product-actions a.ajax_add_to_cart:hover {
  background:
    linear-gradient(135deg, #2a3448 0%, #192233 100%) !important;
  transform: translateY(-1px) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-ghost {
  background: #FFFFFF !important;
  color: #171a22 !important;
  border: 1px solid rgba(210,190,163,.82) !important;
}

/* ---------- Mobile: compact app feel, no broken layout ---------- */

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
    min-height: 0 !important;
    padding: 11px !important;
    border-radius: 21px !important;
    gap: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
    font-size: 32px !important;
    letter-spacing: -.9px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar p {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card {
    min-height: 62px !important;
    padding: 7px !important;
    border-radius: 16px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card strong {
    font-size: 17px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart .albakht-svg-icon {
    width: 23px !important;
    height: 23px !important;
    padding: 4px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-tabs {
    min-height: 48px !important;
    padding: 5px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-tab {
    flex: 0 0 auto !important;
    min-height: 37px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label::after {
    bottom: 17px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media {
    aspect-ratio: 1 / .82 !important;
    overflow: hidden !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media img {
    padding: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media i {
    width: 39px !important;
    height: 39px !important;
    bottom: 10px !important;
    inset-inline-start: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
    font-size: 29px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card {
    min-height: 58px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   05 STORE PAGE — FILTER + MOBILE GRID FIX V4
   هدف التصحيح:
   - الديسكتوب: الفلاتر صف واحد متوازن بدون زحمة.
   - الجوال: البحث صف كامل، 3 قوائم في صف واحد، الزرين في صف واحد.
   - المنتجات على الجوال: منتجين في الصف بمساحة مريحة بدون لزق.
========================================================= */

/* ---------- Filter shell: less height, better alignment ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
  padding: 9px !important;
  border-radius: 22px !important;
  align-items: center !important;
}

#albakht-app.albakht-app-shell-view-store form.albakht-store-filters {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1.15fr) minmax(0, 1.85fr) !important;
  align-items: end !important;
  gap: 10px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: end !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns:
    minmax(130px, 1fr)
    minmax(130px, 1fr)
    minmax(130px, 1fr)
    minmax(78px, .58fr)
    minmax(72px, .52fr) !important;
  align-items: end !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search label,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  gap: 4px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search label > span,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label > span {
  min-height: 14px !important;
  color: #8b5a36 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  padding-inline: 6px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-search input,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .button,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="submit"],
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="reset"] {
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 15px !important;
  font-size: 11px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select {
  padding-inline: 12px 34px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label::after {
  bottom: 17px !important;
  inset-inline-start: 13px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .button,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="submit"],
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="reset"] {
  align-self: end !important;
  justify-content: center !important;
  padding-inline: 12px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button[type="submit"],
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="submit"] {
  background: linear-gradient(135deg, #2A180F 0%, #121925 100%) !important;
  color: #FFFFFF !important;
  border-color: #2A180F !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button[type="reset"],
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="reset"],
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .albakht-btn-ghost {
  background: #FFFFFF !important;
  color: #171a22 !important;
  border-color: rgba(210,190,163,.82) !important;
}

/* ---------- Product grid: desktop/tablet comfort ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-products-grid {
  align-items: stretch !important;
  justify-content: start !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

@media (max-width: 1180px) {
  #albakht-app.albakht-app-shell-view-store form.albakht-store-filters {
    grid-template-columns: 1fr !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects {
    grid-template-columns:
      minmax(120px, 1fr)
      minmax(120px, 1fr)
      minmax(120px, 1fr)
      minmax(86px, .65fr)
      minmax(78px, .6fr) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* ---------- Mobile filter layout exactly as requested ---------- */

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-products-shell {
    padding: 10px !important;
    border-radius: 22px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-toolbar {
    margin-bottom: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
    padding: 9px !important;
    border-radius: 20px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell > .albakht-svg-icon {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-store form.albakht-store-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search label {
    width: 100% !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search input {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 15px !important;
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label {
    min-width: 0 !important;
    width: 100% !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label > span {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-inline: 8px 26px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label::after {
    width: 6px !important;
    height: 6px !important;
    bottom: 16px !important;
    inset-inline-start: 9px !important;
    border-width: 1.8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .button,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="submit"],
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="reset"] {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    width: 100% !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button:nth-last-child(2),
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="submit"] {
    grid-column: 1 / span 2 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button:nth-last-child(1),
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="reset"],
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .albakht-btn-ghost {
    grid-column: span 1 !important;
  }

  /* Mobile product grid: two comfortable cards in one row */
  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-top: 2px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-card {
    border-radius: 18px !important;
    min-width: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media {
    aspect-ratio: 1 / .86 !important;
    border-radius: 15px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media img {
    padding: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-info {
    padding: 9px !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-cat {
    min-height: 22px !important;
    padding: 4px 7px !important;
    font-size: 9px !important;
    max-width: 100% !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-title {
    font-size: 12px !important;
    line-height: 1.45 !important;
    min-height: 34px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-price,
  #albakht-app.albakht-app-shell-view-store .albakht-product-price .amount,
  #albakht-app.albakht-app-shell-view-store .price,
  #albakht-app.albakht-app-shell-view-store .price .amount {
    font-size: 13px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
    padding-inline: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media i {
    width: 36px !important;
    height: 36px !important;
    border-radius: 13px !important;
    bottom: 8px !important;
    inset-inline-start: 8px !important;
  }
}

/* ---------- Very small phones: still two per row unless screen is too narrow ---------- */

@media (max-width: 390px) {
  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-info {
    padding: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-title {
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn {
    font-size: 9px !important;
  }
}

@media (max-width: 330px) {
  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   05 STORE PAGE — MOBILE APP EXPERIENCE FIX V5
   حل المشاكل الظاهرة في لقطات الجوال:
   - الفلاتر بدون كارت داخل كارت وبدون زحمة.
   - البحث صف كامل واضح.
   - الثلاث قوائم في صف واحد متساوي.
   - تطبيق/مسح في صف واحد متوازن.
   - المنتجات على الجوال كتالوج تطبيق: صورتين/منتجين في الصف براحة.
   - لو المنتج واحد فقط: يتمدد بشكل أنيق بدل ما يترمي يمين ويترك فراغ.
========================================================= */

/* ---------- Kill extra nested look inside filter panel ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
  overflow: visible !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell,
#albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell form,
#albakht-app.albakht-app-shell-view-store form.albakht-store-filters {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---------- Desktop filter refinement ---------- */

@media (min-width: 768px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
    padding: 8px !important;
    border-radius: 20px !important;
  }

  #albakht-app.albakht-app-shell-view-store form.albakht-store-filters {
    display: grid !important;
    grid-template-columns: minmax(300px, 1.15fr) minmax(0, 1.85fr) !important;
    gap: 10px !important;
    align-items: end !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects {
    display: grid !important;
    grid-template-columns:
      minmax(118px, 1fr)
      minmax(118px, 1fr)
      minmax(118px, 1fr)
      minmax(82px, .6fr)
      minmax(76px, .55fr) !important;
    gap: 8px !important;
    align-items: end !important;
  }
}

/* =========================================================
   V5 MOBILE FILTERS — MEASURED APP BAR
========================================================= */

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-products-shell {
    padding: 8px !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,250,242,.88) 100%) !important;
    box-shadow: 0 10px 28px rgba(23,26,34,.045) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding-inline: 2px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__title h2 {
    font-size: 25px !important;
    line-height: 1.05 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-toolbar__count {
    min-height: 38px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
    padding: 8px !important;
    border-radius: 20px !important;
    display: block !important;
    background:
      linear-gradient(180deg, #fffdf9 0%, #fff8ee 100%) !important;
    border: 1px solid rgba(220,204,184,.72) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.86),
      0 8px 18px rgba(23,26,34,.035) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell > .albakht-svg-icon {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-store form.albakht-store-filters {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search label {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search label > span {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search input {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 44px 14px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(210,190,163,.76) !important;
    background:
      linear-gradient(180deg, #FFFFFF 0%, #fffaf2 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 4px 10px rgba(23,26,34,.025) !important;
    color: #171a22 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search input::placeholder {
    color: rgba(117,108,96,.68) !important;
    font-weight: 800 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search .albakht-svg-icon,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search button,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-search button .albakht-svg-icon {
    position: absolute !important;
    inset-inline-start: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 19px !important;
    height: 19px !important;
    color: #8b5a36 !important;
    z-index: 2 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "cat sort stock"
      "apply apply reset" !important;
    gap: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label:nth-of-type(1) {
    grid-area: cat !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label:nth-of-type(2) {
    grid-area: sort !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label:nth-of-type(3) {
    grid-area: stock !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label > span {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select {
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 9px 0 25px !important;
    border-radius: 14px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 1px solid rgba(210,190,163,.74) !important;
    background:
      linear-gradient(180deg, #FFFFFF 0%, #fffaf2 100%) !important;
    color: #171a22 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.94),
      0 4px 10px rgba(23,26,34,.02) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-align-last: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 9px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    margin-top: -5px !important;
    border-inline-end: 2px solid #8b5a36 !important;
    border-bottom: 2px solid #8b5a36 !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
    opacity: .84 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .button,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="submit"],
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="reset"],
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects a {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button[type="submit"],
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="submit"],
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .albakht-btn-primary {
    grid-area: apply !important;
    background:
      linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(23,26,34,.95) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects button[type="reset"],
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects input[type="reset"],
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects .albakht-btn-ghost,
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects a:not(.albakht-btn-primary) {
    grid-area: reset !important;
    background: #FFFFFF !important;
    color: #171a22 !important;
    border: 1px solid rgba(210,190,163,.76) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
  }
}

/* =========================================================
   V5 MOBILE PRODUCT CATALOG — 2 PRODUCTS PER ROW WITH BREATHING
========================================================= */

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 8px 0 2px !important;
    margin: 0 !important;
    direction: rtl !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-products-grid > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* If only one product exists in the database, center it instead of leaving dead space */
  #albakht-app.albakht-app-shell-view-store .albakht-products-grid:has(> :only-child) {
    grid-template-columns: minmax(0, min(100%, 290px)) !important;
    justify-content: center !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    border-radius: 18px !important;
    border: 1px solid rgba(220,204,184,.74) !important;
    background:
      linear-gradient(180deg, #FFFFFF 0%, #fffdf9 55%, #fbf7ef 100%) !important;
    box-shadow:
      0 8px 18px rgba(23,26,34,.045),
      inset 0 1px 0 rgba(255,255,255,.88) !important;
    overflow: hidden !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media {
    width: 100% !important;
    aspect-ratio: 1 / .92 !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 22%, rgba(200,166,121,.12), transparent 46%),
      linear-gradient(180deg, #fffaf2 0%, #f8efe1 100%) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 7px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-badges,
  #albakht-app.albakht-app-shell-view-store .albakht-badges {
    top: 8px !important;
    inset-inline-end: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-badge,
  #albakht-app.albakht-app-shell-view-store .albakht-badge,
  #albakht-app.albakht-app-shell-view-store .onsale {
    min-height: 22px !important;
    padding: 4px 7px !important;
    font-size: 9px !important;
    border-radius: 999px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media i {
    width: 35px !important;
    height: 35px !important;
    bottom: 8px !important;
    inset-inline-start: 8px !important;
    border-radius: 13px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media i::before {
    width: 13px !important;
    height: 2px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media i::after {
    width: 2px !important;
    height: 13px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-info {
    padding: 9px !important;
    display: grid !important;
    grid-template-rows: auto auto auto 1fr !important;
    gap: 7px !important;
    justify-items: center !important;
    text-align: center !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-cat {
    max-width: 100% !important;
    min-height: 21px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-title {
    width: 100% !important;
    min-height: 34px !important;
    color: #111722 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 950 !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-price,
  #albakht-app.albakht-app-shell-view-store .albakht-price,
  #albakht-app.albakht-app-shell-view-store .price {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    color: #111722 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-price .amount,
  #albakht-app.albakht-app-shell-view-store .albakht-price .amount,
  #albakht-app.albakht-app-shell-view-store .price .amount {
    color: #111722 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-self: end !important;
    margin-top: 2px !important;
    padding-top: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn,
  #albakht-app.albakht-app-shell-view-store .albakht-product-actions a,
  #albakht-app.albakht-app-shell-view-store .albakht-product-actions button {
    width: 100% !important;
    min-height: 37px !important;
    height: 37px !important;
    border-radius: 13px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    justify-content: center !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-primary,
  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-add-cart,
  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .add_to_cart_button {
    background:
      linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
    color: #FFFFFF !important;
    border-color: rgba(23,26,34,.95) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn-ghost {
    background: #FFFFFF !important;
    color: #171a22 !important;
    border-color: rgba(210,190,163,.76) !important;
  }
}

/* Keep 2 products per row on normal phones, only collapse on extremely tiny widths */
@media (max-width: 350px) {
  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    gap: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-info {
    padding: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-title {
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn,
  #albakht-app.albakht-app-shell-view-store .albakht-product-actions a,
  #albakht-app.albakht-app-shell-view-store .albakht-product-actions button {
    font-size: 9px !important;
  }
}

@media (max-width: 310px) {
  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   05 STORE PAGE — WHITE CLEAN PRODUCT FIX V6
   المطلوب من المعاينة:
   - خلفية صفحة المتجر بيضاء بالكامل.
   - خلفية صورة المنتج بيضاء بدون كريم/بيج.
   - الصورة كاملة بدون قص.
   - زر + لا يركب على صورة المنتج ولا الكلام.
   - تقليل المسافة بين العنوان والسعر.
   - إصلاح أيقونات select التي راكبة على الكلام.
========================================================= */

/* ---------- Store page white background ---------- */

#albakht-app.albakht-app-shell-view-store,
#albakht-app.albakht-app-shell-view-store .albakht-app-main,
#albakht-app.albakht-app-shell-view-store .albakht-app-content-store,
#albakht-app.albakht-app-shell-view-store .albakht-store-app,
#albakht-app.albakht-app-shell-view-store .albakht-store-products-shell {
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-app::before,
#albakht-app.albakht-app-shell-view-store .albakht-store-products-shell::before,
#albakht-app.albakht-app-shell-view-store .albakht-store-products-shell::after {
  display: none !important;
  content: none !important;
}

/* ---------- Filters: fix dropdown arrow riding over text ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select {
  padding-inline-start: 34px !important;
  padding-inline-end: 12px !important;
  text-align: center !important;
  text-align-last: center !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label::after {
  inset-inline-start: 14px !important;
  inset-inline-end: auto !important;
  z-index: 3 !important;
}

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-shell {
    background: #FFFFFF !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects select {
    padding-inline-start: 24px !important;
    padding-inline-end: 7px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-filter-selects label::after {
    inset-inline-start: 8px !important;
  }
}

/* ---------- Product card white clean catalogue style ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-product-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(220, 204, 184, .70) !important;
  box-shadow: 0 8px 18px rgba(23, 26, 34, .04) !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-card:hover {
  box-shadow: 0 14px 30px rgba(23, 26, 34, .07) !important;
}

/* Image area: white background, full image, no crop */
#albakht-app.albakht-app-shell-view-store .albakht-product-media {
  position: relative !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  aspect-ratio: 1 / .78 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media::before,
#albakht-app.albakht-app-shell-view-store .albakht-product-media::after {
  display: none !important;
  content: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 8px !important;
  background: #FFFFFF !important;
  transform: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-card:hover .albakht-product-media img {
  transform: scale(1.012) !important;
}

/* Plus button: smaller and placed inside media corner without covering product too much */
#albakht-app.albakht-app-shell-view-store .albakht-product-media i {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  inset-inline-start: 8px !important;
  bottom: 8px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #222b3b 0%, #121925 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  box-shadow: 0 8px 18px rgba(23, 26, 34, .16) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i::before,
#albakht-app.albakht-app-shell-view-store .albakht-product-media i::after {
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i::before {
  width: 13px !important;
  height: 2px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-media i::after {
  width: 2px !important;
  height: 13px !important;
}

/* Product content: remove dead vertical gaps */
#albakht-app.albakht-app-shell-view-store .albakht-product-info {
  padding: 9px 10px 10px !important;
  gap: 5px !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
  align-content: start !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-cat {
  margin-bottom: 1px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-title {
  min-height: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
  font-weight: 950 !important;
  text-align: center !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-excerpt {
  display: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-price,
#albakht-app.albakht-app-shell-view-store .albakht-price,
#albakht-app.albakht-app-shell-view-store .price {
  margin: 1px 0 0 !important;
  padding: 0 !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-product-price .amount,
#albakht-app.albakht-app-shell-view-store .albakht-price .amount,
#albakht-app.albakht-app-shell-view-store .price .amount {
  font-size: 13px !important;
  font-weight: 950 !important;
}

/* Actions closer and balanced */
#albakht-app.albakht-app-shell-view-store .albakht-product-actions {
  margin-top: 4px !important;
  gap: 6px !important;
}

/* ---------- Mobile exact product comfort ---------- */

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-store {
    background: #FFFFFF !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 8px 0 0 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-products-grid:has(> :only-child) {
    grid-template-columns: minmax(0, min(100%, 280px)) !important;
    justify-content: center !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-card {
    border-radius: 17px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media {
    aspect-ratio: 1 / .82 !important;
    border-radius: 15px !important;
    background: #FFFFFF !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media img {
    padding: 6px !important;
    object-fit: contain !important;
    background: #FFFFFF !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media i {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    bottom: 7px !important;
    inset-inline-start: 7px !important;
    border-radius: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-info {
    padding: 8px 8px 9px !important;
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-cat {
    min-height: 20px !important;
    padding: 3px 7px !important;
    font-size: 8.5px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-title {
    min-height: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-price,
  #albakht-app.albakht-app-shell-view-store .albakht-product-price .amount,
  #albakht-app.albakht-app-shell-view-store .albakht-price,
  #albakht-app.albakht-app-shell-view-store .albakht-price .amount,
  #albakht-app.albakht-app-shell-view-store .price,
  #albakht-app.albakht-app-shell-view-store .price .amount {
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions {
    margin-top: 4px !important;
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-actions .albakht-btn,
  #albakht-app.albakht-app-shell-view-store .albakht-product-actions a,
  #albakht-app.albakht-app-shell-view-store .albakht-product-actions button {
    min-height: 35px !important;
    height: 35px !important;
    border-radius: 12px !important;
    font-size: 9.5px !important;
  }
}

@media (max-width: 360px) {
  #albakht-app.albakht-app-shell-view-store .albakht-products-grid {
    gap: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-media {
    aspect-ratio: 1 / .86 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-product-info {
    padding: 7px !important;
  }
}


/* =========================================================
   05 STORE PAGE — PREMIUM TOPBAR REBUILD V7
   إعادة بناء الشريط العلوي فقط:
   - شكل أفخم وأحدث بدل كروت ويندوز القديمة.
   - الشريط مضغوط ومتوازن.
   - الإحصائيات تتحول إلى كبسولات حديثة بدل مربعات ضخمة.
   - السلة تظهر كـ CTA واضح بلون ذهبي راقٍ.
   - تجاوب الموبايل مضبوط ومضغوط.
========================================================= */

/* ---------- Topbar shell: modern compact premium strip ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
  min-height: 112px !important;
  padding: clamp(13px, 1.7vw, 20px) !important;
  grid-template-columns: minmax(0, 1fr) minmax(330px, auto) !important;
  grid-template-areas: "copy meta" !important;
  align-items: center !important;
  gap: clamp(14px, 2vw, 26px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(200, 166, 121, .30) !important;
  background:
    linear-gradient(90deg, rgba(200,166,121,.12) 0%, transparent 20%, transparent 82%, rgba(200,166,121,.08) 100%),
    radial-gradient(circle at 7% 50%, rgba(200,166,121,.20), transparent 27%),
    radial-gradient(circle at 96% 18%, rgba(255,255,255,.10), transparent 23%),
    linear-gradient(135deg, #20242f 0%, #172233 48%, #111824 100%) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 18px 42px rgba(23, 26, 34, .14),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(200,166,121,.20) !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .10 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar::after {
  content: "" !important;
  position: absolute !important;
  inset-inline: clamp(18px, 3vw, 44px) !important;
  bottom: 0 !important;
  height: 2px !important;
  border-radius: 999px 999px 0 0 !important;
  background:
    linear-gradient(90deg, transparent, rgba(200,166,121,.15), rgba(232,210,176,.95), rgba(200,166,121,.15), transparent) !important;
  opacity: .95 !important;
  pointer-events: none !important;
}

/* ---------- Topbar copy: cleaner hierarchy ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar__copy {
  grid-area: copy !important;
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 5px !important;
  position: relative !important;
  z-index: 2 !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-kicker {
  min-height: 23px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200,166,121,.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045)) !important;
  color: #f2d7aa !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(0,0,0,.12) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-kicker::after {
  width: 6px !important;
  height: 6px !important;
  background: #c8a679 !important;
  box-shadow: 0 0 0 4px rgba(200,166,121,.16) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: clamp(30px, 3.4vw, 50px) !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: -1.15px !important;
  text-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar p {
  width: min(620px, 100%) !important;
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: clamp(11px, .95vw, 13px) !important;
  line-height: 1.6 !important;
  font-weight: 800 !important;
}

/* ---------- Meta zone: modern segmented pills instead of big old blocks ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
  grid-area: meta !important;
  width: min(390px, 100%) !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 1.08fr .82fr .82fr !important;
  gap: 8px !important;
  align-items: center !important;
  justify-self: end !important;
  position: relative !important;
  z-index: 2 !important;
  direction: rtl !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card {
  min-width: 0 !important;
  min-height: 54px !important;
  height: 54px !important;
  padding: 8px 10px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "num label"
    "num label" !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 2px 8px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045)) !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 22px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card strong {
  grid-area: num !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.10) !important;
  color: #FFFFFF !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.2px !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card span {
  grid-area: label !important;
  display: block !important;
  color: rgba(255,255,255,.86) !important;
  opacity: 1 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* Cart CTA: gold pill, icon and text balanced */
#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "icon label" !important;
  gap: 8px !important;
  justify-items: start !important;
  align-items: center !important;
  background:
    linear-gradient(135deg, #d9bd87 0%, #c8a679 54%, #b98e55 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow:
    0 12px 24px rgba(200,166,121,.18),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.12) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart strong {
  display: none !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart .albakht-svg-icon {
  grid-area: icon !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 7px !important;
  border-radius: 14px !important;
  background: rgba(23,26,34,.18) !important;
  color: #FFFFFF !important;
  stroke-width: 2.2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart span {
  grid-area: label !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

/* ---------- Hover: modern, not exaggerated ---------- */

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card:hover {
  transform: translateY(-2px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07)) !important;
  border-color: rgba(200,166,121,.35) !important;
}

#albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart:hover {
  background:
    linear-gradient(135deg, #e1c893 0%, #cda86f 55%, #bd9257 100%) !important;
}

/* =========================================================
   V7 TOPBAR RESPONSIVE
========================================================= */

@media (max-width: 980px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "copy"
      "meta" !important;
    min-height: 0 !important;
    padding: 14px !important;
    gap: 12px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar {
    padding: 12px !important;
    border-radius: 22px !important;
    gap: 10px !important;
    background:
      radial-gradient(circle at 12% 25%, rgba(200,166,121,.18), transparent 30%),
      linear-gradient(135deg, #20242f 0%, #172233 56%, #111824 100%) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar h1 {
    font-size: 31px !important;
    line-height: 1 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar p {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
    grid-template-columns: 1fr 1fr 1.06fr !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card {
    min-height: 50px !important;
    height: 50px !important;
    padding: 7px 8px !important;
    border-radius: 16px !important;
    grid-template-columns: auto 1fr !important;
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card strong {
    width: 26px !important;
    height: 26px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card span {
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart .albakht-svg-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 6px !important;
    border-radius: 11px !important;
  }
}

@media (max-width: 380px) {
  #albakht-app.albakht-app-shell-view-store .albakht-store-topbar__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    text-align: center !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card span {
    white-space: normal !important;
  }

  #albakht-app.albakht-app-shell-view-store .albakht-store-meta-card.is-cart {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
}



/* =========================================================
   06 CATEGORY PAGE — JOOD PREMIUM APP CATALOG
   Built from templates/category.php actual classes:
   .albakht-category-page
   .albakht-category-hero
   .albakht-category-hero__content
   .albakht-category-hero__visual
   .albakht-category-children
   .albakht-category-highlight
   .albakht-category-products
   .albakht-category-products__head
   .albakht-products-panel
   .albakht-store-filters
   .albakht-products-grid
   .albakht-product-card
========================================================= */

/* =========================================================
   06.00 CATEGORY VIEW TOKENS + WHITE FOUNDATION
========================================================= */

#albakht-app.albakht-app-shell-view-category {
  --albakht-category-max: 1180px;
  --albakht-category-ink: #171a22;
  --albakht-category-ink-2: #2A180F;
  --albakht-category-gold: #c8a679;
  --albakht-category-gold-2: #d8bd91;
  --albakht-category-gold-3: #ead7b7;
  --albakht-category-cream: #f6efe4;
  --albakht-category-paper: #FFFFFF;
  --albakht-category-line: rgba(210, 190, 163, .70);
  --albakht-category-line-soft: rgba(233, 221, 206, .86);
  --albakht-category-muted: #756c60;
  --albakht-category-brown: #8b5a36;
  --albakht-current-max: 1180px;
  background: #FFFFFF !important;
  color: var(--albakht-category-ink) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-app-main {
  width: min(var(--albakht-category-max), calc(100% - 28px)) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-top: 12px !important;
  padding-bottom: max(44px, var(--albakht-main-bottom, 70px)) !important;
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-app-content-category,
#albakht-app.albakht-app-shell-view-category .albakht-category-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  background: #FFFFFF !important;
  position: relative !important;
  isolation: isolate !important;
}

/* =========================================================
   06.01 CATEGORY HERO — SAME PREMIUM FEEL AS STORE TOPBAR
========================================================= */

#albakht-app.albakht-app-shell-view-category .albakht-category-hero {
  width: 100% !important;
  min-height: 128px !important;
  margin: 0 !important;
  padding: clamp(14px, 1.8vw, 22px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) !important;
  align-items: center !important;
  gap: clamp(14px, 2vw, 24px) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(200, 166, 121, .30) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(90deg, rgba(200,166,121,.12) 0%, transparent 20%, transparent 82%, rgba(200,166,121,.08) 100%),
    radial-gradient(circle at 7% 50%, rgba(200,166,121,.20), transparent 27%),
    radial-gradient(circle at 96% 18%, rgba(255,255,255,.10), transparent 23%),
    linear-gradient(135deg, #20242f 0%, #172233 48%, #111824 100%) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 18px 42px rgba(23, 26, 34, .14),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(200,166,121,.20) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .10 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero::after {
  content: "" !important;
  position: absolute !important;
  inset-inline: clamp(18px, 3vw, 44px) !important;
  bottom: 0 !important;
  height: 2px !important;
  border-radius: 999px 999px 0 0 !important;
  background:
    linear-gradient(90deg, transparent, rgba(200,166,121,.15), rgba(232,210,176,.95), rgba(200,166,121,.15), transparent) !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__content {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 7px !important;
  position: relative !important;
  z-index: 2 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-breadcrumbs {
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 24px !important;
  margin: 0 0 2px !important;
  padding: 4px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200,166,121,.34) !important;
  background: rgba(255,255,255,.075) !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-breadcrumbs a,
#albakht-app.albakht-app-shell-view-category .albakht-breadcrumbs span {
  color: inherit !important;
  white-space: nowrap !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-breadcrumbs__sep {
  opacity: .6 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero .albakht-eyebrow {
  width: fit-content !important;
  min-height: 23px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200,166,121,.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045)) !important;
  color: #f2d7aa !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(0,0,0,.12) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero h2 {
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: clamp(30px, 3.4vw, 50px) !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: -1.15px !important;
  text-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero p,
#albakht-app.albakht-app-shell-view-category .albakht-category-hero__description,
#albakht-app.albakht-app-shell-view-category .albakht-category-hero__description p {
  width: min(620px, 100%) !important;
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: clamp(11px, .95vw, 13px) !important;
  line-height: 1.6 !important;
  font-weight: 800 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions {
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions .albakht-btn {
  min-height: 38px !important;
  padding: 9px 14px !important;
  border-radius: 14px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions .albakht-btn-primary {
  background: linear-gradient(135deg, #d9bd87 0%, #c8a679 54%, #b98e55 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.18) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions .albakht-btn-ghost {
  background: rgba(255,255,255,.08) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Hero stats as compact premium pills */
#albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats {
  margin-top: 8px !important;
  width: min(390px, 100%) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats div {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 7px 8px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "icon value"
    "icon label" !important;
  align-items: center !important;
  gap: 1px 7px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.10) !important;
  color: #FFFFFF !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats .albakht-svg-icon {
  grid-area: icon !important;
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  padding: 5px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.10) !important;
  color: #f2d7aa !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats strong {
  grid-area: value !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats span {
  grid-area: label !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hero visual */
#albakht-app.albakht-app-shell-view-category .albakht-category-hero__visual {
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 128px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  z-index: 2 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__image,
#albakht-app.albakht-app-shell-view-category .albakht-category-hero__abstract {
  width: min(300px, 100%) !important;
  aspect-ratio: 1.55 / 1 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 14px 30px rgba(0,0,0,.13) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 10px !important;
  background: rgba(255,255,255,.06) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__abstract {
  position: relative !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__abstract .albakht-svg-icon {
  width: 56px !important;
  height: 56px !important;
  color: #f2d7aa !important;
  position: relative !important;
  z-index: 2 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__shape {
  position: absolute !important;
  border-radius: 999px !important;
  background: rgba(200,166,121,.18) !important;
  filter: blur(.2px) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__shape-one {
  width: 120px !important;
  height: 120px !important;
  inset-inline-start: -36px !important;
  bottom: -36px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__shape-two {
  width: 92px !important;
  height: 92px !important;
  inset-inline-end: -20px !important;
  top: -28px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__shape-three {
  width: 48px !important;
  height: 48px !important;
  inset-inline-start: 48% !important;
  top: 18px !important;
}

/* =========================================================
   06.02 CHILD CATEGORIES + HIGHLIGHT RAIL
========================================================= */

#albakht-app.albakht-app-shell-view-category .albakht-store-section {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-children,
#albakht-app.albakht-app-shell-view-category .albakht-category-highlight {
  display: grid !important;
  gap: 10px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-section-head {
  padding: 10px 12px !important;
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border: 1px solid rgba(220,204,184,.68) !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.035) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-section-head .albakht-eyebrow,
#albakht-app.albakht-app-shell-view-category .albakht-section-kicker {
  width: fit-content !important;
  min-height: 22px !important;
  padding: 4px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  border: 1px solid rgba(200,166,121,.24) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-section-head h2 {
  margin-top: 5px !important;
  color: #111722 !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -.7px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-section-head p {
  margin-top: 5px !important;
  color: #756c60 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  font-weight: 800 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-rail {
  width: 100% !important;
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 0 8px !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: thin !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-card {
  flex: 0 0 min(220px, 72vw) !important;
  scroll-snap-align: start !important;
  border-radius: 20px !important;
  border: 1px solid rgba(220,204,184,.72) !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.04) !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-carousel,
#albakht-app.albakht-app-shell-view-category .albakht-category-highlight__rail {
  width: 100% !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(210px, 260px) !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 0 10px !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: thin !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-carousel > * {
  scroll-snap-align: start !important;
}

/* =========================================================
   06.03 PRODUCTS PANEL — SAME STORE EXPERIENCE
========================================================= */

#albakht-app.albakht-app-shell-view-category .albakht-category-products {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-products-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(220,204,184,.72) !important;
  background: #FFFFFF !important;
  box-shadow: 0 12px 34px rgba(23,26,34,.045) !important;
  overflow: visible !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-products-panel::before,
#albakht-app.albakht-app-shell-view-category .albakht-products-panel::after {
  display: none !important;
  content: none !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-products__head {
  margin: 0 0 10px !important;
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-products__head > div {
  min-width: 0 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-products__head h2 {
  margin-top: 5px !important;
  color: #111722 !important;
  font-size: clamp(24px, 2.5vw, 38px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.8px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-products__head p {
  width: min(620px, 100%) !important;
  margin-top: 5px !important;
  color: #756c60 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  font-weight: 800 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-products__back {
  flex: 0 0 auto !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(210,190,163,.76) !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 10px rgba(23,26,34,.025) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-products__back .albakht-svg-icon {
  width: 15px !important;
  height: 15px !important;
  color: #8b5a36 !important;
}

/* =========================================================
   06.04 CATEGORY FILTERS — MATCH STORE MOBILE FINAL
========================================================= */

#albakht-app.albakht-app-shell-view-category .albakht-products-panel > form.albakht-store-filters,
#albakht-app.albakht-app-shell-view-category form.albakht-store-filters {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 12px !important;
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 1.15fr) minmax(0, 1.85fr) !important;
  gap: 10px !important;
  align-items: end !important;
  border: 1px solid rgba(220,204,184,.72) !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.035), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-search {
  min-width: 0 !important;
  display: grid !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns:
    minmax(118px, 1fr)
    minmax(118px, 1fr)
    minmax(118px, 1fr)
    minmax(82px, .6fr)
    minmax(76px, .55fr) !important;
  gap: 8px !important;
  align-items: end !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-search label,
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects label {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  gap: 4px !important;
  position: relative !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-search label > span,
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects label > span {
  min-height: 14px !important;
  color: #8b5a36 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  padding-inline: 6px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-search input,
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects select,
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects button,
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects .button,
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects input[type="submit"],
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects input[type="reset"] {
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(210,190,163,.76) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #fffaf2 100%) !important;
  color: #171a22 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 4px 10px rgba(23,26,34,.025) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-search input {
  padding-inline: 42px 14px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-search .albakht-svg-icon,
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-search button .albakht-svg-icon {
  position: absolute !important;
  inset-inline-start: 13px !important;
  top: calc(50% + 8px) !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  color: #8b5a36 !important;
  z-index: 2 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-inline-start: 34px !important;
  padding-inline-end: 12px !important;
  text-align: center !important;
  text-align-last: center !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects label::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 14px !important;
  bottom: 17px !important;
  width: 7px !important;
  height: 7px !important;
  border-inline-end: 2px solid #8b5a36 !important;
  border-bottom: 2px solid #8b5a36 !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
  opacity: .86 !important;
  z-index: 3 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects button[type="submit"],
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects input[type="submit"],
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects .albakht-btn-primary {
  background: linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(23,26,34,.95) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects button[type="reset"],
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects input[type="reset"],
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects .albakht-btn-ghost,
#albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects a:not(.albakht-btn-primary) {
  background: #FFFFFF !important;
  color: #171a22 !important;
  border-color: rgba(210,190,163,.76) !important;
}

/* =========================================================
   06.05 CATEGORY PRODUCT GRID + PRODUCT CARD
   Same style as the final Store product cards.
========================================================= */

#albakht-app.albakht-app-shell-view-category .albakht-products-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  justify-content: start !important;
  padding: 0 !important;
  margin: 0 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-products-grid > * {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  position: relative !important;
  border-radius: 18px !important;
  border: 1px solid rgba(220,204,184,.70) !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.04) !important;
  overflow: hidden !important;
  transition: transform .22s cubic-bezier(.2,.75,.25,1), box-shadow .22s cubic-bezier(.2,.75,.25,1), border-color .22s cubic-bezier(.2,.75,.25,1) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(200,166,121,.44) !important;
  box-shadow: 0 14px 30px rgba(23,26,34,.07) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-media {
  width: 100% !important;
  aspect-ratio: 1 / .78 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-media::before,
#albakht-app.albakht-app-shell-view-category .albakht-product-media::after {
  display: none !important;
  content: none !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 8px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #FFFFFF !important;
  transform: none !important;
  transition: transform .24s cubic-bezier(.2,.75,.25,1) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-card:hover .albakht-product-media img {
  transform: scale(1.012) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-badges,
#albakht-app.albakht-app-shell-view-category .albakht-badges {
  position: absolute !important;
  z-index: 3 !important;
  top: 8px !important;
  inset-inline-end: 8px !important;
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-badge,
#albakht-app.albakht-app-shell-view-category .albakht-badge,
#albakht-app.albakht-app-shell-view-category .onsale {
  min-height: 22px !important;
  padding: 4px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.14) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-media i {
  position: absolute !important;
  z-index: 4 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  inset-inline-start: 8px !important;
  bottom: 8px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #222b3b 0%, #121925 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.16) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-media i::before,
#albakht-app.albakht-app-shell-view-category .albakht-product-media i::after {
  content: "" !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  background: #FFFFFF !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-media i::before {
  width: 13px !important;
  height: 2px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-media i::after {
  width: 2px !important;
  height: 13px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-info {
  padding: 9px 10px 10px !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 5px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-cat {
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 20px !important;
  margin: 0 auto 1px !important;
  padding: 3px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  border: 1px solid rgba(200,166,121,.24) !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-title {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: #111722 !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-excerpt {
  display: none !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-price,
#albakht-app.albakht-app-shell-view-category .albakht-price,
#albakht-app.albakht-app-shell-view-category .price {
  width: 100% !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  color: #111722 !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-price .amount,
#albakht-app.albakht-app-shell-view-category .albakht-price .amount,
#albakht-app.albakht-app-shell-view-category .price .amount {
  color: #111722 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-actions {
  width: 100% !important;
  margin-top: 4px !important;
  padding-top: 0 !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-actions .albakht-btn,
#albakht-app.albakht-app-shell-view-category .albakht-product-actions a,
#albakht-app.albakht-app-shell-view-category .albakht-product-actions button {
  width: 100% !important;
  min-height: 35px !important;
  height: 35px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-actions .albakht-btn-primary,
#albakht-app.albakht-app-shell-view-category .albakht-product-actions .albakht-add-cart,
#albakht-app.albakht-app-shell-view-category .albakht-product-actions .add_to_cart_button {
  background: linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(23,26,34,.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 16px rgba(23,26,34,.08) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-product-actions .albakht-btn-ghost {
  background: #FFFFFF !important;
  color: #171a22 !important;
  border: 1px solid rgba(210,190,163,.76) !important;
}

/* =========================================================
   06.06 SEARCH NOTE + PAGINATION + EMPTY STATE
========================================================= */

#albakht-app.albakht-app-shell-view-category .albakht-search-result-note {
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 9px 11px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(200,166,121,.25) !important;
  background: #fff7e9 !important;
  color: #756c60 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-search-result-note .albakht-svg-icon {
  width: 16px !important;
  height: 16px !important;
  color: #8b5a36 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-search-result-note strong {
  color: #8b5a36 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-search-result-note a {
  margin-inline-start: auto !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(210,190,163,.76) !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

/* =========================================================
   06.07 RESPONSIVE CATEGORY PAGE
========================================================= */

@media (max-width: 1180px) {
  #albakht-app.albakht-app-shell-view-category .albakht-products-panel > form.albakht-store-filters,
  #albakht-app.albakht-app-shell-view-category form.albakht-store-filters {
    grid-template-columns: 1fr !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects {
    grid-template-columns:
      minmax(120px, 1fr)
      minmax(120px, 1fr)
      minmax(120px, 1fr)
      minmax(86px, .65fr)
      minmax(78px, .6fr) !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #albakht-app.albakht-app-shell-view-category .albakht-category-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__visual {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats {
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  #albakht-app.albakht-app-shell-view-category .albakht-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-category .albakht-app-main {
    width: min(100%, calc(100% - 12px)) !important;
    padding-top: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-page {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero {
    padding: 12px !important;
    border-radius: 22px !important;
    gap: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero h2 {
    font-size: 31px !important;
    line-height: 1 !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero p,
  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__description,
  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__description p {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions {
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions .albakht-btn {
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats div {
    min-height: 48px !important;
    padding: 6px !important;
    border-radius: 15px !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "value"
      "label" !important;
    justify-items: center !important;
    text-align: center !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats .albakht-svg-icon {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats strong {
    font-size: 16px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats span {
    font-size: 8.5px !important;
    white-space: normal !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-products-panel {
    padding: 8px !important;
    border-radius: 22px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-products__head {
    align-items: center !important;
    margin-bottom: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-products__head h2 {
    font-size: 25px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-products__head p {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-products__back {
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-products-panel > form.albakht-store-filters,
  #albakht-app.albakht-app-shell-view-category form.albakht-store-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding: 8px !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-search {
    width: 100% !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-search label > span,
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects label > span {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-search input {
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 44px 14px !important;
    border-radius: 17px !important;
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-search .albakht-svg-icon,
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-search button .albakht-svg-icon {
    top: 50% !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "cat sort stock"
      "apply apply reset" !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects label:nth-of-type(1) {
    grid-area: cat !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects label:nth-of-type(2) {
    grid-area: sort !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects label:nth-of-type(3) {
    grid-area: stock !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects select {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-inline-start: 24px !important;
    padding-inline-end: 7px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects label::after {
    inset-inline-start: 8px !important;
    bottom: 16px !important;
    width: 6px !important;
    height: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects button,
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects .button,
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects input[type="submit"],
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects input[type="reset"],
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects a {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects button[type="submit"],
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects input[type="submit"],
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects .albakht-btn-primary {
    grid-area: apply !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects button[type="reset"],
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects input[type="reset"],
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects .albakht-btn-ghost,
  #albakht-app.albakht-app-shell-view-category .albakht-store-filter-selects a:not(.albakht-btn-primary) {
    grid-area: reset !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 8px 0 0 !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-products-grid:has(> :only-child) {
    grid-template-columns: minmax(0, min(100%, 280px)) !important;
    justify-content: center !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-card {
    border-radius: 17px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-media {
    aspect-ratio: 1 / .82 !important;
    border-radius: 15px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-media img {
    padding: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-media i {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    bottom: 7px !important;
    inset-inline-start: 7px !important;
    border-radius: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-info {
    padding: 8px 8px 9px !important;
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-cat {
    min-height: 20px !important;
    padding: 3px 7px !important;
    font-size: 8.5px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-title {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-price,
  #albakht-app.albakht-app-shell-view-category .albakht-product-price .amount,
  #albakht-app.albakht-app-shell-view-category .albakht-price,
  #albakht-app.albakht-app-shell-view-category .albakht-price .amount,
  #albakht-app.albakht-app-shell-view-category .price,
  #albakht-app.albakht-app-shell-view-category .price .amount {
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-actions {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-actions .albakht-btn,
  #albakht-app.albakht-app-shell-view-category .albakht-product-actions a,
  #albakht-app.albakht-app-shell-view-category .albakht-product-actions button {
    min-height: 35px !important;
    height: 35px !important;
    border-radius: 12px !important;
    font-size: 9.5px !important;
  }
}

@media (max-width: 360px) {
  #albakht-app.albakht-app-shell-view-category .albakht-products-grid {
    gap: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-media {
    aspect-ratio: 1 / .86 !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-product-info {
    padding: 7px !important;
  }
}


/* =========================================================
   06 CATEGORY PAGE — HERO BALANCE + MOBILE NAV REMOVE V9
   Fixes from live category screenshots:
   - Better category hero distribution.
   - Buttons match title/content width.
   - Mobile buttons in one row.
   - Hide category visual/image on mobile.
   - Remove plugin bottom mobile nav completely because site already has one.
========================================================= */

/* ---------- Remove plugin mobile bottom nav completely ---------- */

#albakht-app .albakht-app-bottom-nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-with-bottom-nav .albakht-app-main {
  padding-bottom: var(--albakht-main-bottom, 70px) !important;
}

@media (max-width: 767px) {
  #albakht-app.albakht-app-with-bottom-nav .albakht-app-main {
    padding-bottom: 38px !important;
  }
}

/* ---------- Category hero desktop rebalance ---------- */

#albakht-app.albakht-app-shell-view-category .albakht-category-hero {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px) !important;
  grid-template-areas: "content visual" !important;
  align-items: center !important;
  padding: clamp(16px, 2vw, 24px) !important;
  gap: clamp(18px, 2.4vw, 34px) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__content {
  grid-area: content !important;
  width: min(760px, 100%) !important;
  justify-self: end !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__visual {
  grid-area: visual !important;
  justify-self: start !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__image,
#albakht-app.albakht-app-shell-view-category .albakht-category-hero__abstract {
  width: min(280px, 100%) !important;
  aspect-ratio: 1.22 / 1 !important;
  border-radius: 22px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero h2 {
  max-width: 620px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero p,
#albakht-app.albakht-app-shell-view-category .albakht-category-hero__description,
#albakht-app.albakht-app-shell-view-category .albakht-category-hero__description p {
  max-width: 620px !important;
}

/* Buttons: same visual width as content/title area */
#albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions {
  width: min(420px, 100%) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions .albakht-btn {
  width: 100% !important;
  min-height: 42px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Stats under buttons, aligned cleanly with content */
#albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats {
  width: min(520px, 100%) !important;
  margin-top: 10px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Breadcrumbs/kicker stay compact */
#albakht-app.albakht-app-shell-view-category .albakht-breadcrumbs,
#albakht-app.albakht-app-shell-view-category .albakht-category-hero .albakht-eyebrow {
  max-width: 100% !important;
}

/* ---------- Category products head balance ---------- */

#albakht-app.albakht-app-shell-view-category .albakht-category-products__head {
  align-items: center !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-products__head > div {
  width: min(720px, 100%) !important;
}

#albakht-app.albakht-app-shell-view-category .albakht-category-products__back {
  min-width: 112px !important;
  justify-content: center !important;
}

/* ---------- Mobile: hide visual entirely + buttons in one row ---------- */

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-category .albakht-category-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "content" !important;
    padding: 12px !important;
    border-radius: 22px !important;
    text-align: center !important;
    justify-items: center !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__content {
    width: 100% !important;
    justify-self: stretch !important;
    justify-items: center !important;
    text-align: center !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__visual,
  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__image,
  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__abstract {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-breadcrumbs {
    max-width: 100% !important;
    justify-content: center !important;
    margin-inline: auto !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero .albakht-eyebrow {
    margin-inline: auto !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero h2 {
    max-width: 100% !important;
    font-size: 30px !important;
    text-align: center !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero p,
  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__description,
  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__description p {
    max-width: 100% !important;
    text-align: center !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions .albakht-btn {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats {
    width: 100% !important;
    margin-top: 8px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats div {
    min-height: 50px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-products__head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-products__head > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-products__head h2 {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-products__back {
    min-width: 88px !important;
    min-height: 35px !important;
    padding: 7px 9px !important;
    font-size: 9.5px !important;
  }
}

@media (max-width: 380px) {
  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions {
    gap: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__actions .albakht-btn {
    font-size: 9.5px !important;
    padding-inline: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-category .albakht-category-hero__stats span {
    font-size: 8px !important;
  }
}



/* =========================================================
   07 PRODUCT PAGE — JOOD PREMIUM PRODUCT EXPERIENCE
   Built from templates/product.php actual classes:
   .albakht-product-page
   .albakht-product-hero
   .albakht-product-gallery
   .albakht-product-gallery__main
   .albakht-product-gallery__thumbs
   .albakht-product-thumb
   .albakht-product-summary
   .albakht-product-category-links
   .albakht-product-short-desc
   .albakht-product-summary__price-row
   .albakht-product-stock
   .albakht-product-trust-row
   .albakht-product-cart-form
   .albakht-product-variations
   .albakht-product-variation-field
   .albakht-selected-variation-box
   .albakht-product-buy-panel
   .albakht-product-quantity
   .albakht-qty-control
   .albakht-product-add-to-cart
   .albakht-product-details-grid
   .albakht-product-detail-card
   .albakht-product-rich-text
   .albakht-product-meta-list
   .albakht-product-related
========================================================= */

/* =========================================================
   07.00 PRODUCT VIEW TOKENS + FOUNDATION
========================================================= */

#albakht-app.albakht-app-shell-view-product {
  --albakht-product-page-max: 1180px;
  --albakht-product-ink: #171a22;
  --albakht-product-ink-2: #2A180F;
  --albakht-product-ink-3: #2d3444;
  --albakht-product-gold: #c8a679;
  --albakht-product-gold-2: #d8bd91;
  --albakht-product-gold-3: #ead7b7;
  --albakht-product-cream: #f6efe4;
  --albakht-product-paper: #FFFFFF;
  --albakht-product-line: rgba(210, 190, 163, .70);
  --albakht-product-line-soft: rgba(233, 221, 206, .86);
  --albakht-product-muted: #756c60;
  --albakht-product-brown: #8b5a36;
  --albakht-current-max: 1180px;
  background: #FFFFFF !important;
  color: var(--albakht-product-ink) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-app-main {
  width: min(var(--albakht-product-page-max), calc(100% - 28px)) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-top: 12px !important;
  padding-bottom: max(44px, var(--albakht-main-bottom, 70px)) !important;
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-app-content-product,
#albakht-app.albakht-app-shell-view-product .albakht-product-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  position: relative !important;
  isolation: isolate !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-page::before,
#albakht-app.albakht-app-shell-view-product .albakht-product-page::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   07.01 PRODUCT HERO — PREMIUM APP PRODUCT LAYOUT
========================================================= */

#albakht-app.albakht-app-shell-view-product .albakht-product-hero {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(12px, 1.8vw, 18px) !important;
  display: grid !important;
  grid-template-columns: minmax(380px, .92fr) minmax(0, 1.08fr) !important;
  gap: clamp(14px, 2vw, 24px) !important;
  align-items: stretch !important;
  border: 1px solid rgba(220, 204, 184, .72) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #fffdf9 62%, #FFFFFF 100%) !important;
  box-shadow:
    0 14px 34px rgba(23, 26, 34, .045),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
  position: relative !important;
  overflow: visible !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-hero::before {
  content: "" !important;
  position: absolute !important;
  inset-inline: 28px !important;
  top: 0 !important;
  height: 2px !important;
  border-radius: 0 0 999px 999px !important;
  background: linear-gradient(90deg, transparent, rgba(200,166,121,.62), transparent) !important;
  pointer-events: none !important;
}

/* =========================================================
   07.02 GALLERY — WHITE CLEAN, FULL IMAGE, THUMBS
========================================================= */

#albakht-app.albakht-app-shell-view-product .albakht-product-gallery {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, auto) auto !important;
  align-content: start !important;
  gap: 10px !important;
  position: relative !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main {
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 1 / .82 !important;
  min-height: 360px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(220,204,184,.72) !important;
  border-radius: 26px !important;
  background: #FFFFFF !important;
  box-shadow:
    0 10px 26px rgba(23,26,34,.04),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main::before,
#albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main::after {
  display: none !important;
  content: none !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-main-image,
#albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: clamp(10px, 1.6vw, 18px) !important;
  background: #FFFFFF !important;
  transform: none !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-gallery__placeholder {
  width: min(180px, 60%) !important;
  aspect-ratio: 1 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 28px !important;
  border: 1px dashed rgba(210,190,163,.82) !important;
  background: #fffdf9 !important;
  color: #c8a679 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-gallery__placeholder .albakht-svg-icon {
  width: 56px !important;
  height: 56px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-badges,
#albakht-app.albakht-app-shell-view-product .albakht-badges {
  position: absolute !important;
  z-index: 4 !important;
  top: 12px !important;
  inset-inline-end: 12px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-badge,
#albakht-app.albakht-app-shell-view-product .albakht-badge,
#albakht-app.albakht-app-shell-view-product .onsale {
  min-height: 28px !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.14) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-gallery__thumbs {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 74px !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 0 8px !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: thin !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-thumb {
  width: 74px !important;
  height: 74px !important;
  padding: 4px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(220,204,184,.70) !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 5px 12px rgba(23,26,34,.035) !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-thumb:hover,
#albakht-app.albakht-app-shell-view-product .albakht-product-thumb.is-active {
  border-color: rgba(200,166,121,.78) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.065) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #FFFFFF !important;
}

/* =========================================================
   07.03 SUMMARY — TITLE, CATEGORY LINKS, PRICE, STOCK
========================================================= */

#albakht-app.albakht-app-shell-view-product .albakht-product-summary {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  padding: clamp(10px, 1.5vw, 16px) !important;
  border-radius: 26px !important;
  border: 1px solid rgba(220,204,184,.62) !important;
  background: #FFFFFF !important;
  box-shadow: 0 10px 26px rgba(23,26,34,.035) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-summary .albakht-breadcrumbs {
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 28px !important;
  padding: 5px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(210,190,163,.72) !important;
  background: #fffdf9 !important;
  color: #756c60 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-summary .albakht-breadcrumbs a,
#albakht-app.albakht-app-shell-view-product .albakht-product-summary .albakht-breadcrumbs span {
  color: inherit !important;
  white-space: nowrap !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-category-links {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-category-links a {
  min-height: 24px !important;
  padding: 4px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  border: 1px solid rgba(200,166,121,.24) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-summary h2 {
  margin: 0 !important;
  color: #111722 !important;
  font-size: clamp(28px, 3.1vw, 48px) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: -.9px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-short-desc {
  width: min(680px, 100%) !important;
  margin: 0 !important;
  color: #756c60 !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  font-weight: 800 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row {
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(220,204,184,.70) !important;
  border-radius: 20px !important;
  background: #fffdf9 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .albakht-product-price,
#albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .albakht-price,
#albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .price {
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  color: #111722 !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .amount {
  color: #111722 !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row del {
  color: rgba(117,108,96,.70) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row ins {
  color: #8b5a36 !important;
  text-decoration: none !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-stock {
  min-height: 36px !important;
  padding: 8px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  border: 1px solid rgba(31,138,91,.22) !important;
  background: #eaf7f1 !important;
  color: #1f8a5b !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-stock.is-out-of-stock {
  border-color: rgba(184,64,52,.22) !important;
  background: #fff0ee !important;
  color: #b84034 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-stock .albakht-svg-icon {
  width: 16px !important;
  height: 16px !important;
}

/* =========================================================
   07.04 TRUST ROW
========================================================= */

#albakht-app.albakht-app-shell-view-product .albakht-product-trust-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-trust-row div {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(220,204,184,.70) !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 10px rgba(23,26,34,.025) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-trust-row .albakht-svg-icon {
  width: 30px !important;
  height: 30px !important;
  padding: 7px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  border: 1px solid rgba(200,166,121,.24) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-trust-row span {
  min-width: 0 !important;
  color: #756c60 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 850 !important;
}

/* =========================================================
   07.05 CART FORM + VARIATIONS + QUANTITY
========================================================= */

#albakht-app.albakht-app-shell-view-product .albakht-product-cart-form {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-variations {
  width: 100% !important;
  padding: 10px !important;
  display: grid !important;
  gap: 10px !important;
  border: 1px solid rgba(220,204,184,.70) !important;
  border-radius: 20px !important;
  background: #fffdf9 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-variations__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-section-kicker {
  width: fit-content !important;
  min-height: 22px !important;
  padding: 4px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  border: 1px solid rgba(200,166,121,.24) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-variations__head strong {
  color: #111722 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-variation-field {
  width: 100% !important;
  display: grid !important;
  gap: 5px !important;
  position: relative !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-variation-field > span {
  color: #8b5a36 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  padding-inline: 5px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-variation-field select {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding-inline: 14px 34px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(210,190,163,.76) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #fffaf2 100%) !important;
  color: #171a22 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 4px 10px rgba(23,26,34,.025) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-variation-field::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 14px !important;
  bottom: 17px !important;
  width: 7px !important;
  height: 7px !important;
  border-inline-end: 2px solid #8b5a36 !important;
  border-bottom: 2px solid #8b5a36 !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-selected-variation-box {
  width: 100% !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(200,166,121,.24) !important;
  border-radius: 16px !important;
  background: #fff7e9 !important;
  color: #171a22 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-selected-variation-box[hidden] {
  display: none !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-selected-variation-box span,
#albakht-app.albakht-app-shell-view-product .albakht-selected-variation-box small {
  color: #756c60 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-selected-variation-box strong {
  color: #111722 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel {
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: minmax(150px, .62fr) minmax(0, 1fr) minmax(110px, .42fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
  border: 1px solid rgba(220,204,184,.70) !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.035) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-quantity {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-quantity > span {
  color: #8b5a36 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  padding-inline: 5px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-qty-control {
  width: 100% !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  overflow: hidden !important;
  border: 1px solid rgba(210,190,163,.76) !important;
  border-radius: 15px !important;
  background: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 4px 10px rgba(23,26,34,.025) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-qty-control button {
  width: 100% !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  color: #8b5a36 !important;
  background: #fffaf2 !important;
  border: 0 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-qty-control input {
  width: 100% !important;
  height: 44px !important;
  border: 0 !important;
  text-align: center !important;
  color: #111722 !important;
  background: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-qty-control input::-webkit-outer-spin-button,
#albakht-app.albakht-app-shell-view-product .albakht-qty-control input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel .albakht-btn,
#albakht-app.albakht-app-shell-view-product .albakht-product-add-to-cart {
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 10px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 15px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-add-to-cart,
#albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel .albakht-btn-primary {
  background: linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(23,26,34,.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 16px rgba(23,26,34,.08) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-add-to-cart:hover,
#albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel .albakht-btn-primary:hover {
  background: linear-gradient(135deg, #2a3448 0%, #192233 100%) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel .albakht-btn-ghost {
  background: #FFFFFF !important;
  color: #171a22 !important;
  border: 1px solid rgba(210,190,163,.76) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-add-to-cart .albakht-svg-icon,
#albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel .albakht-btn .albakht-svg-icon {
  width: 17px !important;
  height: 17px !important;
  color: currentColor !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-unavailable {
  width: 100% !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(184,64,52,.20) !important;
  border-radius: 18px !important;
  background: #fff0ee !important;
  color: #b84034 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-unavailable .albakht-svg-icon {
  width: 38px !important;
  height: 38px !important;
  padding: 9px !important;
  border-radius: 14px !important;
  background: rgba(184,64,52,.08) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-unavailable strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-unavailable span {
  display: block !important;
  margin-top: 2px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* =========================================================
   07.06 DETAILS GRID — DESCRIPTION + META
========================================================= */

#albakht-app.albakht-app-shell-view-product .albakht-product-details-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-detail-card {
  width: 100% !important;
  min-width: 0 !important;
  padding: clamp(12px, 1.6vw, 18px) !important;
  display: grid !important;
  gap: 12px !important;
  border: 1px solid rgba(220,204,184,.72) !important;
  border-radius: 26px !important;
  background: #FFFFFF !important;
  box-shadow: 0 10px 26px rgba(23,26,34,.035) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-detail-card__head {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-detail-card__head > .albakht-svg-icon {
  width: 40px !important;
  height: 40px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  border: 1px solid rgba(200,166,121,.24) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-detail-card__head h3 {
  margin: 5px 0 0 !important;
  color: #111722 !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-rich-text,
#albakht-app.albakht-app-shell-view-product .albakht-product-muted-text {
  color: #4b4650 !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
  font-weight: 750 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-rich-text p + p {
  margin-top: 10px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-rich-text ul,
#albakht-app.albakht-app-shell-view-product .albakht-product-rich-text ol {
  display: grid !important;
  gap: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-rich-text li {
  position: relative !important;
  padding-inline-start: 16px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-rich-text li::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: .78em !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #c8a679 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-meta-list {
  display: grid !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-meta-list div {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(220,204,184,.62) !important;
  border-radius: 16px !important;
  background: #fffdf9 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-meta-list span {
  color: #756c60 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-meta-list strong {
  min-width: 0 !important;
  color: #111722 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 950 !important;
  text-align: end !important;
  overflow-wrap: anywhere !important;
}

/* =========================================================
   07.07 RELATED PRODUCTS — SAME STORE/CATEGORY PRODUCT CARDS
========================================================= */

#albakht-app.albakht-app-shell-view-product .albakht-product-related {
  width: 100% !important;
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-section-head {
  padding: 10px 12px !important;
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border: 1px solid rgba(220,204,184,.68) !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.035) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-section-head h2 {
  margin-top: 5px !important;
  color: #111722 !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -.7px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-section-head p {
  margin-top: 5px !important;
  color: #756c60 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  font-weight: 800 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-section-head__link {
  min-height: 38px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(210,190,163,.76) !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-carousel,
#albakht-app.albakht-app-shell-view-product .albakht-product-related__rail {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(210px, 260px) !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 0 10px !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: thin !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-carousel > * {
  scroll-snap-align: start !important;
}

/* Reuse compact card styling for related cards */
#albakht-app.albakht-app-shell-view-product .albakht-product-carousel .albakht-product-card {
  border-radius: 18px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(220,204,184,.70) !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.04) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-carousel .albakht-product-media {
  aspect-ratio: 1 / .82 !important;
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-carousel .albakht-product-media img {
  object-fit: contain !important;
  background: #FFFFFF !important;
  padding: 8px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-carousel .albakht-product-info {
  padding: 9px 10px 10px !important;
  gap: 5px !important;
  text-align: center !important;
  justify-items: center !important;
}

/* =========================================================
   07.08 RESPONSIVE PRODUCT PAGE
========================================================= */

@media (max-width: 1120px) {
  #albakht-app.albakht-app-shell-view-product .albakht-product-hero {
    grid-template-columns: minmax(330px, .92fr) minmax(0, 1.08fr) !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel {
    grid-template-columns: minmax(130px, .58fr) minmax(0, 1fr) !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel .albakht-btn-ghost {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 980px) {
  #albakht-app.albakht-app-shell-view-product .albakht-product-hero {
    grid-template-columns: 1fr !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main {
    min-height: 320px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-details-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-product .albakht-app-main {
    width: min(100%, calc(100% - 12px)) !important;
    padding-top: 6px !important;
    padding-bottom: 38px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-page {
    gap: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-hero {
    padding: 8px !important;
    border-radius: 22px !important;
    gap: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main {
    min-height: 0 !important;
    aspect-ratio: 1 / .86 !important;
    border-radius: 20px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-main-image,
  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main img {
    padding: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-badge,
  #albakht-app.albakht-app-shell-view-product .albakht-badge,
  #albakht-app.albakht-app-shell-view-product .onsale {
    min-height: 24px !important;
    padding: 5px 8px !important;
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery__thumbs {
    grid-auto-columns: 58px !important;
    gap: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-thumb {
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px !important;
    padding: 3px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary {
    padding: 10px !important;
    border-radius: 20px !important;
    gap: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary .albakht-breadcrumbs {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-category-links {
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-category-links a {
    min-height: 22px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary h2 {
    font-size: 28px !important;
    line-height: 1.12 !important;
    letter-spacing: -.55px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-short-desc {
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 17px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .albakht-product-price,
  #albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .albakht-price,
  #albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .price {
    justify-content: center !important;
    text-align: center !important;
    font-size: 20px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .amount {
    font-size: 20px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-stock {
    width: 100% !important;
    justify-content: center !important;
    min-height: 34px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-trust-row {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-trust-row div {
    min-height: 42px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-variations {
    padding: 9px !important;
    border-radius: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-variations__head {
    display: grid !important;
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-variation-field select {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel {
    padding: 9px !important;
    border-radius: 18px !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-quantity {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-quantity > span {
    padding: 0 !important;
    white-space: nowrap !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-qty-control {
    min-height: 42px !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-qty-control button,
  #albakht-app.albakht-app-shell-view-product .albakht-qty-control input {
    height: 42px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel .albakht-btn,
  #albakht-app.albakht-app-shell-view-product .albakht-product-add-to-cart {
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-detail-card {
    padding: 11px !important;
    border-radius: 20px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-detail-card__head {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-detail-card__head > .albakht-svg-icon {
    width: 36px !important;
    height: 36px !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-detail-card__head h3 {
    font-size: 21px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-rich-text,
  #albakht-app.albakht-app-shell-view-product .albakht-product-muted-text {
    font-size: 12px !important;
    line-height: 1.85 !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-meta-list div {
    min-height: 42px !important;
    padding: 8px 9px !important;
    border-radius: 14px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head {
    padding: 9px !important;
    border-radius: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-section-head h2 {
    font-size: 23px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-section-head p {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-section-head__link {
    min-height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-carousel,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related__rail {
    grid-auto-columns: minmax(160px, 46vw) !important;
    gap: 10px !important;
  }
}

@media (max-width: 390px) {
  #albakht-app.albakht-app-shell-view-product .albakht-product-summary h2 {
    font-size: 25px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-short-desc {
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-meta-list div {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-meta-list strong {
    text-align: start !important;
  }
}


/* =========================================================
   07 PRODUCT PAGE — RELATED PRODUCTS + FULL PRODUCT POLISH V11
   Fixes from screenshot:
   - Related products section was leaving huge empty space.
   - Related card was narrow/plain and missing premium actions layout.
   - Related rail now becomes a real catalog grid on desktop/tablet.
   - On mobile it becomes 2 products per row with comfortable spacing.
   - Product page gets extra creative/premium touches without breaking layout.
========================================================= */

/* ---------- Product page white surface + section spacing ---------- */

#albakht-app.albakht-app-shell-view-product .albakht-product-page {
  gap: 16px !important;
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  background: #FFFFFF !important;
}

/* ---------- Related section head: compact premium bar ---------- */

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(220, 204, 184, .72) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #fffdf9 100%) !important;
  box-shadow:
    0 10px 24px rgba(23, 26, 34, .04),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head::before {
  content: "" !important;
  position: absolute !important;
  inset-inline: 18px !important;
  top: 0 !important;
  height: 2px !important;
  border-radius: 0 0 999px 999px !important;
  background: linear-gradient(90deg, transparent, rgba(200,166,121,.64), transparent) !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-eyebrow,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-kicker {
  width: fit-content !important;
  min-height: 23px !important;
  padding: 4px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200,166,121,.24) !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head h2 {
  margin: 0 !important;
  color: #111722 !important;
  font-size: clamp(24px, 2.4vw, 36px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -.75px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head p {
  max-width: 620px !important;
  margin: 0 !important;
  color: #756c60 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 800 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head__link {
  min-width: 112px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(210,190,163,.76) !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 4px 10px rgba(23,26,34,.025) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head__link .albakht-svg-icon {
  width: 15px !important;
  height: 15px !important;
  color: #8b5a36 !important;
}

/* ---------- Related rail: real grid, not a narrow carousel stuck on the right ---------- */

#albakht-app.albakht-app-shell-view-product .albakht-product-related__rail,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-carousel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-auto-flow: initial !important;
  grid-auto-columns: initial !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related__rail > *,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-carousel > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  scroll-snap-align: none !important;
}

/* Center if there is only one related product */
#albakht-app.albakht-app-shell-view-product .albakht-product-related__rail:has(> :only-child),
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-carousel:has(> :only-child) {
  grid-template-columns: minmax(0, min(100%, 280px)) !important;
  justify-content: center !important;
}

/* ---------- Related product card: same final store card style ---------- */

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(220,204,184,.70) !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
  box-shadow:
    0 8px 18px rgba(23,26,34,.04),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
  transition:
    transform .22s cubic-bezier(.2,.75,.25,1),
    box-shadow .22s cubic-bezier(.2,.75,.25,1),
    border-color .22s cubic-bezier(.2,.75,.25,1) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(200,166,121,.44) !important;
  box-shadow: 0 14px 30px rgba(23,26,34,.07) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media {
  width: 100% !important;
  aspect-ratio: 1 / .82 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media::before,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media::after {
  display: none !important;
  content: none !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 8px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #FFFFFF !important;
  transform: none !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-card:hover .albakht-product-media img {
  transform: scale(1.012) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-badges,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-badges {
  position: absolute !important;
  z-index: 4 !important;
  top: 8px !important;
  inset-inline-end: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-badge,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-badge,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .onsale {
  min-height: 22px !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.14) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media i {
  position: absolute !important;
  z-index: 4 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  inset-inline-start: 8px !important;
  bottom: 8px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #222b3b 0%, #121925 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow: 0 8px 18px rgba(23,26,34,.16) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media i::before,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media i::after {
  content: "" !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  background: #FFFFFF !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media i::before {
  width: 13px !important;
  height: 2px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media i::after {
  width: 2px !important;
  height: 13px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-info {
  padding: 9px 10px 10px !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 5px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-cat {
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 20px !important;
  margin: 0 auto 1px !important;
  padding: 3px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  border: 1px solid rgba(200,166,121,.24) !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-title {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: #111722 !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-excerpt {
  display: none !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-price,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-price,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .price {
  width: 100% !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  color: #111722 !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-price .amount,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-price .amount,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .price .amount {
  color: #111722 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions {
  width: 100% !important;
  margin-top: 4px !important;
  padding-top: 0 !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions .albakht-btn,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions a,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions button {
  width: 100% !important;
  min-height: 35px !important;
  height: 35px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions .albakht-btn-primary,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions .albakht-add-cart,
#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions .add_to_cart_button {
  background: linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(23,26,34,.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 16px rgba(23,26,34,.08) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions .albakht-btn-ghost {
  background: #FFFFFF !important;
  color: #171a22 !important;
  border: 1px solid rgba(210,190,163,.76) !important;
}

/* ---------- Product page extra polish: hero and details ---------- */

#albakht-app.albakht-app-shell-view-product .albakht-product-hero {
  box-shadow:
    0 16px 38px rgba(23, 26, 34, .05),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-summary {
  position: relative !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-summary::before {
  content: "" !important;
  position: absolute !important;
  inset-inline: 16px !important;
  top: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(200,166,121,.54), transparent) !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-detail-card {
  position: relative !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-product .albakht-product-detail-card::before {
  content: "" !important;
  position: absolute !important;
  inset-inline: 18px !important;
  top: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(200,166,121,.48), transparent) !important;
  pointer-events: none !important;
}

/* ---------- Responsive related products ---------- */

@media (max-width: 1180px) {
  #albakht-app.albakht-app-shell-view-product .albakht-product-related__rail,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-carousel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  #albakht-app.albakht-app-shell-view-product .albakht-product-related__rail,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-product .albakht-product-related {
    gap: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head {
    padding: 10px !important;
    border-radius: 20px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-eyebrow,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-kicker {
    min-height: 21px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head h2 {
    font-size: 23px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head p {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head__link {
    min-width: 82px !important;
    min-height: 34px !important;
    padding: 7px 9px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related__rail,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related__rail:has(> :only-child),
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-carousel:has(> :only-child) {
    grid-template-columns: minmax(0, min(100%, 280px)) !important;
    justify-content: center !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-card {
    border-radius: 17px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media {
    aspect-ratio: 1 / .82 !important;
    border-radius: 15px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media img {
    padding: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-media i {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    bottom: 7px !important;
    inset-inline-start: 7px !important;
    border-radius: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-info {
    padding: 8px 8px 9px !important;
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-cat {
    min-height: 20px !important;
    padding: 3px 7px !important;
    font-size: 8.5px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-title {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-price,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-price .amount,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-price,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-price .amount,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .price,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .price .amount {
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions .albakht-btn,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions a,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-actions button {
    min-height: 35px !important;
    height: 35px !important;
    border-radius: 12px !important;
    font-size: 9.5px !important;
  }
}

@media (max-width: 360px) {
  #albakht-app.albakht-app-shell-view-product .albakht-product-related__rail,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-carousel {
    gap: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-info {
    padding: 7px !important;
  }
}


/* =========================================================
   07 PRODUCT PAGE — MOBILE COMPACT EXPERIENCE V12
   الهدف:
   - صفحة المنتج على الجوال مضغوطة بدون مساحة طولية مبالغ فيها.
   - الحفاظ على نفس التجاوب وعدم اللزق.
   - صورة المنتج واضحة وكاملة لكن بارتفاع أقل.
   - Summary / Price / Trust / Buy Panel مضغوطين كواجهة تطبيق.
   - الوصف والخصائص والمنتجات المقترحة أقل طولًا وأهدأ.
========================================================= */

@media (max-width: 767px) {
  /* ---------- Page rhythm ---------- */

  #albakht-app.albakht-app-shell-view-product .albakht-app-main {
    width: min(100%, calc(100% - 10px)) !important;
    padding-top: 5px !important;
    padding-bottom: 30px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-page {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-hero {
    padding: 7px !important;
    gap: 8px !important;
    border-radius: 20px !important;
    box-shadow:
      0 8px 20px rgba(23, 26, 34, .035),
      inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  /* ---------- Gallery compact but not cropped ---------- */

  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery {
    gap: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main {
    aspect-ratio: 1 / .72 !important;
    min-height: 0 !important;
    max-height: 270px !important;
    border-radius: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-main-image,
  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main img {
    padding: 6px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-badges,
  #albakht-app.albakht-app-shell-view-product .albakht-badges {
    top: 8px !important;
    inset-inline-end: 8px !important;
    gap: 4px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-badge,
  #albakht-app.albakht-app-shell-view-product .albakht-badge,
  #albakht-app.albakht-app-shell-view-product .onsale {
    min-height: 22px !important;
    padding: 4px 7px !important;
    font-size: 8.5px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery__thumbs {
    grid-auto-columns: 50px !important;
    gap: 5px !important;
    padding: 1px 0 4px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-thumb {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    padding: 2px !important;
  }

  /* ---------- Summary compact ---------- */

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary {
    padding: 9px !important;
    gap: 8px !important;
    border-radius: 18px !important;
    box-shadow: 0 7px 16px rgba(23,26,34,.03) !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary::before {
    inset-inline: 14px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary .albakht-breadcrumbs {
    min-height: 24px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-category-links {
    gap: 4px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-category-links a {
    min-height: 20px !important;
    padding: 3px 7px !important;
    font-size: 8.5px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary h2 {
    font-size: 24px !important;
    line-height: 1.12 !important;
    letter-spacing: -.45px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-short-desc {
    font-size: 11px !important;
    line-height: 1.55 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ---------- Price row compact ---------- */

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row {
    padding: 8px !important;
    gap: 6px !important;
    border-radius: 15px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .albakht-product-price,
  #albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .albakht-price,
  #albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .price {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary__price-row .amount {
    font-size: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-stock {
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-stock .albakht-svg-icon {
    width: 14px !important;
    height: 14px !important;
  }

  /* ---------- Trust row as small chips in one row when possible ---------- */

  #albakht-app.albakht-app-shell-view-product .albakht-product-trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-trust-row div {
    min-height: 36px !important;
    padding: 7px !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 6px !important;
    border-radius: 13px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-trust-row .albakht-svg-icon {
    width: 24px !important;
    height: 24px !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-trust-row span {
    font-size: 9px !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ---------- Variations and buy panel compact ---------- */

  #albakht-app.albakht-app-shell-view-product .albakht-product-cart-form {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-variations {
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-variations__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-section-kicker {
    min-height: 20px !important;
    padding: 3px 7px !important;
    font-size: 8.5px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-variations__head strong {
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-variation-field {
    gap: 4px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-variation-field > span {
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-variation-field select {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-variation-field::after {
    bottom: 14px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-selected-variation-box {
    padding: 7px 8px !important;
    border-radius: 13px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel {
    padding: 8px !important;
    gap: 7px !important;
    border-radius: 16px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-quantity {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-quantity > span {
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-qty-control {
    min-height: 38px !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    border-radius: 13px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-qty-control button,
  #albakht-app.albakht-app-shell-view-product .albakht-qty-control input {
    height: 38px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel .albakht-btn,
  #albakht-app.albakht-app-shell-view-product .albakht-product-add-to-cart {
    min-height: 39px !important;
    padding: 8px 10px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-add-to-cart .albakht-svg-icon,
  #albakht-app.albakht-app-shell-view-product .albakht-product-buy-panel .albakht-btn .albakht-svg-icon {
    width: 15px !important;
    height: 15px !important;
  }

  /* ---------- Details cards compact ---------- */

  #albakht-app.albakht-app-shell-view-product .albakht-product-details-grid {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-detail-card {
    padding: 9px !important;
    gap: 8px !important;
    border-radius: 18px !important;
    box-shadow: 0 7px 16px rgba(23,26,34,.03) !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-detail-card__head {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-detail-card__head > .albakht-svg-icon {
    width: 32px !important;
    height: 32px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-detail-card__head h3 {
    margin-top: 3px !important;
    font-size: 19px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-rich-text,
  #albakht-app.albakht-app-shell-view-product .albakht-product-muted-text {
    font-size: 11px !important;
    line-height: 1.7 !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-rich-text p + p {
    margin-top: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-meta-list {
    gap: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-meta-list div {
    min-height: 36px !important;
    padding: 7px 8px !important;
    border-radius: 12px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-meta-list span {
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-meta-list strong {
    font-size: 10px !important;
  }

  /* ---------- Related section compact ---------- */

  #albakht-app.albakht-app-shell-view-product .albakht-product-related {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head {
    padding: 9px !important;
    border-radius: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head h2 {
    font-size: 21px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-section-head__link {
    min-height: 32px !important;
    min-width: 76px !important;
    padding: 6px 9px !important;
    border-radius: 12px !important;
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-related__rail,
  #albakht-app.albakht-app-shell-view-product .albakht-product-related .albakht-product-carousel {
    gap: 10px !important;
  }
}

@media (max-width: 390px) {
  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main {
    max-height: 238px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-summary h2 {
    font-size: 22px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-trust-row {
    gap: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-trust-row div {
    padding: 6px !important;
  }
}

@media (max-width: 340px) {
  #albakht-app.albakht-app-shell-view-product .albakht-product-trust-row {
    grid-template-columns: 1fr !important;
  }

  #albakht-app.albakht-app-shell-view-product .albakht-product-gallery__main {
    max-height: 220px !important;
  }
}



/* =========================================================
   08 CART PAGE — JOOD PREMIUM COMPACT CART EXPERIENCE
   Built from templates/cart.php actual classes:
   .albakht-cart-page
   .albakht-cart-hero
   .albakht-cart-hero__content
   .albakht-cart-steps
   .albakht-cart-hero__summary
   .albakht-cart-layout
   .albakht-cart-main
   .albakht-cart-main__head
   .albakht-cart-clear
   .albakht-cart-items
   .albakht-cart-actions-row
   .albakht-cart-side
   .albakht-cart-side-card
   .albakht-cart-coupon-card
   .albakht-applied-coupons
   .albakht-applied-coupon
   .albakht-cart-trust-card
   .albakht-cart-trust-list
   + shared partials:
   albakht_part_cart_item()
   albakht_part_coupon_box()
   albakht_part_cart_totals()
========================================================= */

/* =========================================================
   08.00 CART VIEW TOKENS + WHITE APP FOUNDATION
========================================================= */

#albakht-app.albakht-app-shell-view-cart {
  --albakht-cart-max: 1180px;
  --albakht-cart-ink: #171a22;
  --albakht-cart-ink-2: #2A180F;
  --albakht-cart-ink-3: #2d3444;
  --albakht-cart-gold: #c8a679;
  --albakht-cart-gold-2: #d8bd91;
  --albakht-cart-gold-3: #ead7b7;
  --albakht-cart-cream: #f6efe4;
  --albakht-cart-paper: #FFFFFF;
  --albakht-cart-line: rgba(210, 190, 163, .70);
  --albakht-cart-line-soft: rgba(233, 221, 206, .86);
  --albakht-cart-muted: #756c60;
  --albakht-cart-brown: #8b5a36;
  --albakht-current-max: 1180px;
  background: #FFFFFF !important;
  color: var(--albakht-cart-ink) !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-app-main {
  width: min(var(--albakht-cart-max), calc(100% - 28px)) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-top: 12px !important;
  padding-bottom: max(44px, var(--albakht-main-bottom, 70px)) !important;
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-app-content-cart,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  position: relative !important;
  isolation: isolate !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-page::before,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-page::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   08.01 CART HERO — COMPACT PREMIUM HEADER
========================================================= */

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero {
  width: 100% !important;
  min-height: 132px !important;
  margin: 0 !important;
  padding: clamp(14px, 1.8vw, 22px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) !important;
  align-items: center !important;
  gap: clamp(14px, 2vw, 24px) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(200, 166, 121, .30) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(90deg, rgba(200,166,121,.12) 0%, transparent 20%, transparent 82%, rgba(200,166,121,.08) 100%),
    radial-gradient(circle at 7% 50%, rgba(200,166,121,.20), transparent 27%),
    radial-gradient(circle at 96% 18%, rgba(255,255,255,.10), transparent 23%),
    linear-gradient(135deg, #20242f 0%, #172233 48%, #111824 100%) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 18px 42px rgba(23, 26, 34, .14),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(200,166,121,.20) !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .10 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero::after {
  content: "" !important;
  position: absolute !important;
  inset-inline: clamp(18px, 3vw, 44px) !important;
  bottom: 0 !important;
  height: 2px !important;
  border-radius: 999px 999px 0 0 !important;
  background:
    linear-gradient(90deg, transparent, rgba(200,166,121,.15), rgba(232,210,176,.95), rgba(200,166,121,.15), transparent) !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__content {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 7px !important;
  position: relative !important;
  z-index: 2 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero .albakht-eyebrow {
  width: fit-content !important;
  min-height: 23px !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200,166,121,.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045)) !important;
  color: #f2d7aa !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(0,0,0,.12) !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero h2 {
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: clamp(30px, 3.4vw, 50px) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: -1.1px !important;
  text-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero p {
  width: min(620px, 100%) !important;
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: clamp(11px, .95vw, 13px) !important;
  line-height: 1.6 !important;
  font-weight: 800 !important;
}

/* Steps: compact segmented progress */
#albakht-app.albakht-app-shell-view-cart .albakht-cart-steps {
  width: min(520px, 100%) !important;
  margin-top: 8px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-steps div {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 7px 8px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045)) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.09) !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-steps div.is-active {
  background: linear-gradient(135deg, #d9bd87 0%, #c8a679 54%, #b98e55 100%) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-steps span {
  width: 24px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.12) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-steps strong {
  min-width: 0 !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hero summary card */
#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 126px !important;
  padding: 14px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  position: relative !important;
  z-index: 2 !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 24px rgba(0,0,0,.10) !important;
  text-align: center !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #d9bd87 0%, #c8a679 100%) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 20px rgba(200,166,121,.16) !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary-icon .albakht-svg-icon {
  width: 22px !important;
  height: 22px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary > span {
  color: rgba(255,255,255,.78) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary strong {
  color: #FFFFFF !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary small {
  color: rgba(255,255,255,.72) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

/* =========================================================
   08.02 EMPTY CART
========================================================= */

#albakht-app.albakht-app-shell-view-cart .albakht-cart-empty-wrap {
  width: 100% !important;
  padding: clamp(12px, 2vw, 18px) !important;
  border: 1px solid rgba(220,204,184,.72) !important;
  border-radius: 26px !important;
  background: #FFFFFF !important;
  box-shadow: 0 10px 26px rgba(23,26,34,.035) !important;
}

/* =========================================================
   08.03 CART LAYOUT
========================================================= */

#albakht-app.albakht-app-shell-view-cart .albakht-cart-layout {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
  gap: 14px !important;
  align-items: start !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-main,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-side-card,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals,
#albakht-app.albakht-app-shell-view-cart .cart_totals {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid rgba(220,204,184,.72) !important;
  border-radius: 26px !important;
  background: #FFFFFF !important;
  box-shadow: 0 10px 26px rgba(23,26,34,.035) !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-main {
  padding: 12px !important;
  display: grid !important;
  gap: 12px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-main__head {
  width: 100% !important;
  padding: 0 0 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(233,221,206,.78) !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-main__head > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-section-kicker {
  width: fit-content !important;
  min-height: 22px !important;
  padding: 4px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  border: 1px solid rgba(200,166,121,.24) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-main__head h2 {
  margin: 0 !important;
  color: #111722 !important;
  font-size: clamp(22px, 2.2vw, 32px) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: -.65px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-main__head p {
  margin: 0 !important;
  color: #756c60 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 800 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-clear {
  min-height: 38px !important;
  padding: 8px 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid rgba(184,64,52,.20) !important;
  border-radius: 14px !important;
  background: #fff0ee !important;
  color: #b84034 !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-clear .albakht-svg-icon {
  width: 15px !important;
  height: 15px !important;
}

/* =========================================================
   08.04 CART ITEMS — SUPPORT PARTIAL CLASSES ROBUSTLY
========================================================= */

#albakht-app.albakht-app-shell-view-cart .albakht-cart-items {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

/* Try to catch all likely cart item wrappers from parts.php */
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-line,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-product,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items > article,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items > div {
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(220,204,184,.70) !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 5px 12px rgba(23,26,34,.025) !important;
  overflow: hidden !important;
}

/* Image blocks */
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item__image,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item-image,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-product-image,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item figure,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items > article figure,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items > div figure {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  border: 1px solid rgba(220,204,184,.62) !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-item__image img,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item-image img,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-product-image img,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item figure img,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items > article figure img,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items > div figure img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 6px !important;
  background: #FFFFFF !important;
}

/* Item content */
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item__content,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item-content,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-product-content,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item__info,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item-info {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-item h3,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item-title,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-product-title,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items h3,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items h4 {
  margin: 0 !important;
  color: #111722 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 950 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-item-meta,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-product-meta,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items .variation,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items small,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items p {
  margin: 0 !important;
  color: #756c60 !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

/* Item actions / quantity */
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item__actions,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item-actions,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-product-actions,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item__controls,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item-controls {
  min-width: 160px !important;
  display: grid !important;
  justify-items: end !important;
  gap: 7px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-item-price,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-product-price,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-item-total,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-product-total,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items .amount,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-items .price {
  color: #111722 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-qty-control,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-qty,
#albakht-app.albakht-app-shell-view-cart .quantity {
  width: 124px !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 36px !important;
  overflow: hidden !important;
  border: 1px solid rgba(210,190,163,.76) !important;
  border-radius: 13px !important;
  background: #FFFFFF !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-qty-control button,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-qty button,
#albakht-app.albakht-app-shell-view-cart .quantity button {
  height: 38px !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: #fffaf2 !important;
  color: #8b5a36 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-qty-control input,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-qty input,
#albakht-app.albakht-app-shell-view-cart .quantity input {
  width: 100% !important;
  height: 38px !important;
  border: 0 !important;
  text-align: center !important;
  background: #FFFFFF !important;
  color: #111722 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-remove-cart-item,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-remove,
#albakht-app.albakht-app-shell-view-cart .remove {
  min-height: 30px !important;
  padding: 6px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(184,64,52,.18) !important;
  background: #fff0ee !important;
  color: #b84034 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* =========================================================
   08.05 MAIN ACTION ROW
========================================================= */

#albakht-app.albakht-app-shell-view-cart .albakht-cart-actions-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-actions-row .albakht-btn {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 15px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-actions-row .albakht-btn-primary {
  background: linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(23,26,34,.95) !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-actions-row .albakht-btn-ghost {
  background: #FFFFFF !important;
  color: #171a22 !important;
  border: 1px solid rgba(210,190,163,.76) !important;
}

/* =========================================================
   08.06 SIDE SUMMARY / COUPON / TOTALS / TRUST
========================================================= */

#albakht-app.albakht-app-shell-view-cart .albakht-cart-side {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 12px !important;
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-side-card,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals,
#albakht-app.albakht-app-shell-view-cart .cart_totals,
#albakht-app.albakht-app-shell-view-cart .albakht-order-summary,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-summary {
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-side-card::before,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals::before,
#albakht-app.albakht-app-shell-view-cart .cart_totals::before,
#albakht-app.albakht-app-shell-view-cart .albakht-order-summary::before,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-summary::before {
  content: "" !important;
  position: absolute !important;
  inset-inline: 16px !important;
  top: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(200,166,121,.54), transparent) !important;
  pointer-events: none !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-side-card__head {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-side-card__head > .albakht-svg-icon {
  width: 38px !important;
  height: 38px !important;
  padding: 9px !important;
  border-radius: 15px !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  border: 1px solid rgba(200,166,121,.24) !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-side-card__head h3 {
  margin: 4px 0 0 !important;
  color: #111722 !important;
  font-size: 18px !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
}

/* Coupon form robust selectors */
#albakht-app.albakht-app-shell-view-cart .albakht-coupon-box,
#albakht-app.albakht-app-shell-view-cart .albakht-coupon-form,
#albakht-app.albakht-app-shell-view-cart .coupon {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-coupon-box input,
#albakht-app.albakht-app-shell-view-cart .albakht-coupon-form input,
#albakht-app.albakht-app-shell-view-cart .coupon input[type="text"] {
  width: 100% !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(210,190,163,.76) !important;
  background: #FFFFFF !important;
  color: #171a22 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-coupon-box button,
#albakht-app.albakht-app-shell-view-cart .albakht-coupon-form button,
#albakht-app.albakht-app-shell-view-cart .coupon button,
#albakht-app.albakht-app-shell-view-cart .coupon .button {
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(23,26,34,.95) !important;
  background: linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

/* Applied coupons */
#albakht-app.albakht-app-shell-view-cart .albakht-applied-coupons {
  display: grid !important;
  gap: 7px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-applied-coupon {
  min-height: 42px !important;
  padding: 8px 9px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(200,166,121,.24) !important;
  border-radius: 14px !important;
  background: #fff7e9 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-applied-coupon span {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-applied-coupon strong {
  color: #111722 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-applied-coupon small {
  color: #756c60 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-remove-coupon {
  min-height: 30px !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(184,64,52,.18) !important;
  background: #FFFFFF !important;
  color: #b84034 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

/* Totals robust selectors */
#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals h2,
#albakht-app.albakht-app-shell-view-cart .cart_totals h2,
#albakht-app.albakht-app-shell-view-cart .albakht-order-summary h2,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-summary h2,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals h3,
#albakht-app.albakht-app-shell-view-cart .cart_totals h3,
#albakht-app.albakht-app-shell-view-cart .albakht-order-summary h3,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-summary h3 {
  margin: 0 !important;
  color: #111722 !important;
  font-size: 20px !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals table,
#albakht-app.albakht-app-shell-view-cart .cart_totals table,
#albakht-app.albakht-app-shell-view-cart .albakht-order-summary table,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-summary table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals tr,
#albakht-app.albakht-app-shell-view-cart .cart_totals tr,
#albakht-app.albakht-app-shell-view-cart .albakht-order-summary tr,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-summary tr,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-total-row,
#albakht-app.albakht-app-shell-view-cart .albakht-summary-row {
  min-height: 42px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals th,
#albakht-app.albakht-app-shell-view-cart .cart_totals th,
#albakht-app.albakht-app-shell-view-cart .albakht-order-summary th,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-summary th,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-total-row span,
#albakht-app.albakht-app-shell-view-cart .albakht-summary-row span {
  padding: 8px 9px !important;
  color: #756c60 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-align: start !important;
  background: #fffdf9 !important;
  border-start-start-radius: 14px !important;
  border-end-start-radius: 14px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals td,
#albakht-app.albakht-app-shell-view-cart .cart_totals td,
#albakht-app.albakht-app-shell-view-cart .albakht-order-summary td,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-summary td,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-total-row strong,
#albakht-app.albakht-app-shell-view-cart .albakht-summary-row strong {
  padding: 8px 9px !important;
  color: #111722 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-align: end !important;
  background: #fffdf9 !important;
  border-start-end-radius: 14px !important;
  border-end-end-radius: 14px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals .order-total th,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-totals .order-total td,
#albakht-app.albakht-app-shell-view-cart .cart_totals .order-total th,
#albakht-app.albakht-app-shell-view-cart .cart_totals .order-total td,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-total-final,
#albakht-app.albakht-app-shell-view-cart .albakht-summary-total {
  color: #111722 !important;
  background: #fff7e9 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .wc-proceed-to-checkout,
#albakht-app.albakht-app-shell-view-cart .albakht-cart-checkout-actions,
#albakht-app.albakht-app-shell-view-cart .albakht-summary-actions {
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

#albakht-app.albakht-app-shell-view-cart .checkout-button,
#albakht-app.albakht-app-shell-view-cart .wc-forward,
#albakht-app.albakht-app-shell-view-cart .albakht-checkout-button,
#albakht-app.albakht-app-shell-view-cart .albakht-summary-actions .albakht-btn-primary {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 15px !important;
  border: 1px solid rgba(23,26,34,.95) !important;
  background: linear-gradient(135deg, #2A180F 0%, #111722 100%) !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

/* Trust card */
#albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list {
  display: grid !important;
  gap: 8px !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list div {
  min-height: 46px !important;
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(220,204,184,.62) !important;
  border-radius: 15px !important;
  background: #fffdf9 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list .albakht-svg-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 8px !important;
  border-radius: 12px !important;
  background: #fff7e9 !important;
  color: #8b5a36 !important;
  border: 1px solid rgba(200,166,121,.24) !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list strong {
  color: #111722 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
}

#albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list small {
  color: #756c60 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

/* =========================================================
   08.07 CART RESPONSIVE — MOBILE APP COMPACT
========================================================= */

@media (max-width: 980px) {
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary {
    min-height: 90px !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "icon label count"
      "icon total count" !important;
    justify-items: start !important;
    text-align: start !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary-icon {
    grid-area: icon !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary > span {
    grid-area: label !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary strong {
    grid-area: total !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary small {
    grid-area: count !important;
    justify-self: end !important;
    padding: 6px 9px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.10) !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-layout {
    grid-template-columns: 1fr !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-side {
    position: static !important;
  }
}

@media (max-width: 767px) {
  #albakht-app.albakht-app-shell-view-cart .albakht-app-main {
    width: min(100%, calc(100% - 10px)) !important;
    padding-top: 5px !important;
    padding-bottom: 30px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-page {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero {
    padding: 11px !important;
    border-radius: 22px !important;
    gap: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__content {
    justify-items: center !important;
    text-align: center !important;
    gap: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero .albakht-eyebrow {
    min-height: 21px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero h2 {
    font-size: 26px !important;
    line-height: 1.12 !important;
    letter-spacing: -.55px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero p {
    font-size: 11px !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-steps {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-steps div {
    min-height: 40px !important;
    padding: 6px !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 3px !important;
    border-radius: 14px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-steps span {
    width: 21px !important;
    height: 21px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-steps strong {
    font-size: 8.5px !important;
    white-space: normal !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary {
    min-height: 64px !important;
    padding: 8px !important;
    border-radius: 17px !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary-icon .albakht-svg-icon {
    width: 18px !important;
    height: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary > span,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary small {
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero__summary strong {
    font-size: 16px !important;
  }

  /* Cart main */
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-layout {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-main {
    padding: 9px !important;
    gap: 9px !important;
    border-radius: 20px !important;
    box-shadow: 0 7px 16px rgba(23,26,34,.03) !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-main__head {
    padding-bottom: 8px !important;
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-section-kicker {
    min-height: 20px !important;
    padding: 3px 7px !important;
    font-size: 8.5px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-main__head h2 {
    font-size: 20px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-main__head p {
    display: none !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-clear {
    min-height: 34px !important;
    padding: 7px 9px !important;
    border-radius: 12px !important;
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-clear .albakht-svg-icon {
    width: 13px !important;
    height: 13px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-line,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items > article,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items > div {
    padding: 8px !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    grid-template-areas:
      "image content"
      "actions actions" !important;
    gap: 8px !important;
    border-radius: 17px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item__image,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-image,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-image,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item figure,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items > article figure,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items > div figure {
    grid-area: image !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    border-radius: 13px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item__image img,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-image img,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-image img,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item figure img,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items > article figure img,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items > div figure img {
    padding: 5px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item__content,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-content,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-content,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item__info,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-info {
    grid-area: content !important;
    gap: 4px !important;
    align-self: center !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item h3,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-title,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-title,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items h3,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items h4 {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-meta,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-meta,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items .variation,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items small,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items p {
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item__actions,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-actions,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-actions,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item__controls,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-controls {
    grid-area: actions !important;
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(110px, .8fr) minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-price,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-price,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-total,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-total,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items .amount,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items .price {
    font-size: 11px !important;
    align-self: center !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-qty-control,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-qty,
  #albakht-app.albakht-app-shell-view-cart .quantity {
    width: 112px !important;
    min-height: 34px !important;
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    border-radius: 12px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-qty-control button,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-qty button,
  #albakht-app.albakht-app-shell-view-cart .quantity button,
  #albakht-app.albakht-app-shell-view-cart .albakht-qty-control input,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-qty input,
  #albakht-app.albakht-app-shell-view-cart .quantity input {
    height: 34px !important;
    font-size: 11px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-remove-cart-item,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-remove,
  #albakht-app.albakht-app-shell-view-cart .remove {
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-actions-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-actions-row .albakht-btn {
    min-height: 40px !important;
    padding: 8px 9px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
  }

  /* Side cards compact */
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-side {
    gap: 8px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-side-card,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-totals,
  #albakht-app.albakht-app-shell-view-cart .cart_totals,
  #albakht-app.albakht-app-shell-view-cart .albakht-order-summary,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-summary {
    padding: 9px !important;
    gap: 8px !important;
    border-radius: 18px !important;
    box-shadow: 0 7px 16px rgba(23,26,34,.03) !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-side-card__head {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-side-card__head > .albakht-svg-icon {
    width: 32px !important;
    height: 32px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-side-card__head h3 {
    font-size: 16px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-coupon-box,
  #albakht-app.albakht-app-shell-view-cart .albakht-coupon-form,
  #albakht-app.albakht-app-shell-view-cart .coupon {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-coupon-box input,
  #albakht-app.albakht-app-shell-view-cart .albakht-coupon-form input,
  #albakht-app.albakht-app-shell-view-cart .coupon input[type="text"],
  #albakht-app.albakht-app-shell-view-cart .albakht-coupon-box button,
  #albakht-app.albakht-app-shell-view-cart .albakht-coupon-form button,
  #albakht-app.albakht-app-shell-view-cart .coupon button,
  #albakht-app.albakht-app-shell-view-cart .coupon .button {
    min-height: 38px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-totals h2,
  #albakht-app.albakht-app-shell-view-cart .cart_totals h2,
  #albakht-app.albakht-app-shell-view-cart .albakht-order-summary h2,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-summary h2,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-totals h3,
  #albakht-app.albakht-app-shell-view-cart .cart_totals h3,
  #albakht-app.albakht-app-shell-view-cart .albakht-order-summary h3,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-summary h3 {
    font-size: 18px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-totals table,
  #albakht-app.albakht-app-shell-view-cart .cart_totals table,
  #albakht-app.albakht-app-shell-view-cart .albakht-order-summary table,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-summary table {
    border-spacing: 0 5px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-totals th,
  #albakht-app.albakht-app-shell-view-cart .cart_totals th,
  #albakht-app.albakht-app-shell-view-cart .albakht-order-summary th,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-summary th,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-total-row span,
  #albakht-app.albakht-app-shell-view-cart .albakht-summary-row span,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-totals td,
  #albakht-app.albakht-app-shell-view-cart .cart_totals td,
  #albakht-app.albakht-app-shell-view-cart .albakht-order-summary td,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-summary td,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-total-row strong,
  #albakht-app.albakht-app-shell-view-cart .albakht-summary-row strong {
    padding: 7px 8px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .checkout-button,
  #albakht-app.albakht-app-shell-view-cart .wc-forward,
  #albakht-app.albakht-app-shell-view-cart .albakht-checkout-button,
  #albakht-app.albakht-app-shell-view-cart .albakht-summary-actions .albakht-btn-primary {
    min-height: 40px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list {
    gap: 6px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list div {
    min-height: 38px !important;
    padding: 6px !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list .albakht-svg-icon {
    width: 26px !important;
    height: 26px !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list strong {
    font-size: 10px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-trust-list small {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 390px) {
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-hero h2 {
    font-size: 23px !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item__actions,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-actions,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-actions,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item__controls,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-controls {
    grid-template-columns: minmax(100px, 1fr) auto !important;
    grid-template-areas:
      "qty remove"
      "price price" !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-qty-control,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-qty,
  #albakht-app.albakht-app-shell-view-cart .quantity {
    grid-area: qty !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-remove-cart-item,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-remove,
  #albakht-app.albakht-app-shell-view-cart .remove {
    grid-area: remove !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-price,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-price,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-item-total,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-product-total,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items .amount,
  #albakht-app.albakht-app-shell-view-cart .albakht-cart-items .price {
    grid-area: price !important;
  }

  #albakht-app.albakht-app-shell-view-cart .albakht-cart-actions-row {
    grid-template-columns: 1fr !important;
  }
}

/* Albakht: reward program removed by Ethar Web */
.albakht-account-reward-disabled-card,.albakht-account-reward-disabled-panel{display:none!important;}