/* ============================================================
   DESIGN TOKENS (CSS Variables)
   ============================================================ */
:root {
    /* ---------- Colors : Brand / Accent ---------- */
    --clr-brand-900: #0b3b25;
    --clr-brand-800: #14532d;
    --clr-brand-700: #296a4c;

    /* ---------- Colors : Text ---------- */
    --clr-text-900: #030712;
    --clr-text-800: #0f172a;
    --clr-text-700: #1f2937;
    --clr-text-600: #374151;
    --clr-text-500: #6b7280;
    --clr-text-400: #8a8a8a;
    --clr-text-300: #9ca3af;
    --clr-text-muted: #296A4C;

    /* ---------- Colors : Neutral / Surface ---------- */
    --clr-white: #ffffff;
    --clr-bg-page: #fcfcfd;
    --clr-bg-soft: #f8fafc;
    --clr-bg-muted: #f4f5f7;
    --clr-bg-hover: #f3f4f6;

    /* ---------- Colors : Border ---------- */
    --clr-border-soft: #edeef0;
    --clr-border-light: #e5e7eb;
    --clr-border-mid: #d1d5db;
    --clr-border-dark: #9ca3af;
    --clr-border-placeholder: #c6cbd1;
    --clr-border-dcdde0: #dcdde0;

    /* ---------- Colors : Price / States ---------- */
    --clr-price-old: #b7b7b7;
    --clr-price-new: #0b3b25;
    --clr-danger: #ef4444;

    /* ---------- Colors : Badge backgrounds ---------- */
    --clr-badge-blue-light: #e1f7fe;
    --clr-badge-red-light: #fee7e7;
    --clr-badge-amber-light: #fbdcac;
    --clr-badge-cyan-light: #cdf2ff;
    --clr-badge-amber-soft: #f7dfb2;
    --clr-badge-gradient-from: #fdba74;
    --clr-badge-gradient-to: #fffbf7;

    /* ---------- Colors : Placeholder ---------- */
    --clr-ph-bg-1: #eceff1;
    --clr-ph-bg-2: #e3e6e8;
    --clr-ph-text: #8a94a0;

    /* ---------- Overlay gradients (mid banners) ---------- */
    --ov-banner-brown-1: rgba(90, 60, 40, .75);
    --ov-banner-brown-2: rgba(90, 60, 40, .15);
    --ov-banner-teal-1: rgba(20, 90, 100, .55);
    --ov-banner-teal-2: rgba(20, 90, 100, .1);
    --ov-banner-maroon-1: rgba(120, 40, 40, .7);
    --ov-banner-maroon-2: rgba(120, 40, 40, .15);

    /* ---------- Radius ---------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 24px;
    --radius-2xl: 24.65px;
    --radius-pill: 999px;

    /* ---------- Shadows ---------- */
    --shadow-2xs: 0px 1px 1px rgba(0, 0, 0, 0.05);
    --shadow-xs: 0px 0.77px 0.77px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, .05);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .06);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 10px 24px rgba(0, 0, 0, 0.1);

    /* ---------- Typography ---------- */
    --font-family-base: 'Vazirmatn', Tahoma, sans-serif;
    --fs-2xs: 10.78px;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-sm2: 12.5px;
    --fs-base: 13.86px;
    --fs-md: 14px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 36px;
    --fs-3xl: 52px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 16px;
    --lh-snug: 18.49px;
    --lh-base: 20px;
    --lh-relaxed: 24px;
    --lh-loose: 1.9;

    /* ---------- Spacing ---------- */
    --sp-1: 4px;
    --sp-2: 6px;
    --sp-3: 8px;
    --sp-4: 10px;
    --sp-5: 12px;
    --sp-6: 16px;
    --sp-7: 20px;
    --sp-8: 24px;
    --sp-9: 32px;
    --sp-10: 36px;

    /* ---------- Layout ---------- */
    --page-max: 1440px;
    --gutter: 32px;
    --grid-gap: 16px;

    /* ---------- Sizes : Components ---------- */
    --btn-height-sm: 32px;
    --btn-min-width-sm: 36px;
    --btn-icon-size: 46px;
    --card-product-height: 295px;
    --card-product-width: 223px;
    --card-brand-height: 110px;
    --card-badge-height: 118px;
    --card-badge-width: 228px;
    --hero-height: 327px;
    --hero-image-width: 1440px;
    --promo-item-height: 150px;
    --midbanner-height: 220px;
    --product-media-height: 180px;
    --badge-discount-height: 343px;

    /* ---------- Transitions ---------- */
    --t-fast: 0.15s ease;
    --t-base: 0.2s ease;
    --t-medium: 0.25s ease;
    --t-slow: 0.3s ease;
    --t-slower: 0.8s ease-in-out;
}

/* ============================================================
   Reset / Base
   ============================================================ */
body {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: var(--font-family-base);
    background: var(--clr-white);
    direction: rtl;
    color: var(--clr-text-700);
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================================
   Landing Page Layout
   ============================================================ */
.gh-landing-page {
    max-width: var(--page-max);
    width: 100%;
    position: relative;
    background-color: var(--clr-bg-page);
    overflow: hidden;
    text-align: right;
    font-size: var(--fs-md);
    color: var(--clr-text-700);
    justify-items: center;
    justify-self: center;
}

.gh-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.gh-container {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 64px;
    max-width: 100%;
}

/* ============================================================
   Common Elements
   ============================================================ */
.gh-icon {
    width: 96px;
    height: 30.7px;
    position: relative;
}

.gh-location-icon {
    height: 20px;
    width: 20px;
    position: relative;
}

.gh-placeholder {
    position: relative;
    letter-spacing: 0.01em;
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
}

.gh-status {
    height: 6px;
    width: 6px;
    position: relative;
    border-radius: var(--radius-pill);
    background-color: var(--clr-text-700);
    display: none;
    flex-shrink: 0;
}

/* ============================================================
   Hero Section
   ============================================================ */
.gh-hero-section {
    width: var(--hero-image-width);
    height: var(--hero-height);
    flex-shrink: 0;
    font-size: var(--fs-xl);
    color: var(--clr-text-800);
    position: relative;
    overflow: hidden;
}

.gh-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--t-slower);
    pointer-events: none;
}

.gh-hero-slide.gh-active {
    opacity: 1;
    pointer-events: auto;
}

.gh-image-155-icon {
    position: absolute;
    top: 0;
    left: calc(50% - 720px);
    width: var(--hero-image-width);
    height: var(--hero-height);
    object-fit: cover;
}

.gh-display-out {
    position: absolute;
    top: 50px;
    left: 768px;
    width: 407px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-6);
    z-index: 2;
}

.gh-display {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-7);
}

.gh-div {
    align-self: stretch;
    position: relative;
    letter-spacing: 0.01em;
    line-height: var(--lh-relaxed);
    font-weight: var(--fw-medium);
}

.gh-span {
    line-height: var(--lh-relaxed);
    white-space: pre-wrap;
}

.gh-span2 {
    font-size: var(--fs-3xl);
    line-height: var(--lh-relaxed);
}

.gh-b {
    align-self: stretch;
    position: relative;
    font-size: var(--fs-2xl);
    letter-spacing: 0.01em;
}

/* ============================================================
   Buttons
   ============================================================ */
.gh-button {
    width: 78px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: center;
    font-size: var(--fs-md);
    color: var(--clr-white);
    text-decoration: none;
    align-self: flex-start;
    user-select: none;
}

.gh-button-small {
    flex: 1;
    border-radius: var(--radius-sm);
    background-color: var(--clr-brand-800);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-5);
    cursor: pointer;
    transition: background-color var(--t-base), transform var(--t-fast);
}

.gh-button:hover .gh-button-small {
    background-color: var(--clr-brand-900);
    transform: translateY(-1px);
}

.gh-button:active .gh-button-small {
    transform: translateY(0);
}

.gh-button2 {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-shrink: 0;
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.gh-button-small2 {
    flex: 1;
    border-radius: var(--radius-sm);
    background-color: var(--clr-white);
    border: 1px solid var(--clr-border-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-5);
    gap: var(--sp-3);
    color: var(--clr-text-700);
    font-size: var(--fs-md);
    transition: background-color var(--t-base), border-color var(--t-base), transform var(--t-fast);
    user-select: none;
}

.gh-button2:hover .gh-button-small2 {
    border-color: var(--clr-brand-800);
    color: var(--clr-brand-800);
    transform: translateY(-1px);
}

.gh-button2:active .gh-button-small2 {
    transform: translateY(0) scale(0.98);
}

.gh-button2 .gh-arrow-left-icon {
    height: 14px;
    width: 14px;
    position: relative;
    flex-shrink: 0;
}

.gh-button2 .gh-placeholder {
    position: relative;
    letter-spacing: 0.01em;
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
}

/* Button - View All (small3) */
.gh-button-small3 {
    width: 98px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-5);
    box-sizing: border-box;
    gap: var(--sp-3);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--t-base);
    border: 1px solid transparent;
}

.gh-button-small3:hover {
    color: var(--clr-brand-800);
}

.gh-button-small3:active {
    transform: translateY(0) scale(0.98);
}

.gh-arrow-left-icon {
    height: 14px;
    width: 14px;
    position: relative;
    flex-shrink: 0;
}

.gh-arrow-left-icon4 {
    height: 14px;
    width: 14px;
    position: relative;
    flex-shrink: 0;
}

/* ============================================================
   Hero Slider Dots
   ============================================================ */
.gh-step-of-slider {
    position: absolute;
    top: 295px;
    left: calc(50% - 74px);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    padding: var(--sp-1) var(--sp-2);
    gap: var(--sp-2);
    z-index: 3;
    backdrop-filter: blur(4px);
    user-select: none;
}

.gh-slider-step {
    height: 12px;
    width: 12px;
    position: relative;
    border-radius: var(--radius-md);
    background-color: var(--clr-border-mid);
    border: 1px solid var(--clr-white);
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: width var(--t-slow), background-color var(--t-slow);
}

.gh-slider-step.gh-active {
    width: 64px;
    background-color: var(--clr-border-mid);
}

.gh-slider-step:hover:not(.gh-active) {
    background-color: var(--clr-border-dark);
}

.gh-slider-step-inside {
    position: absolute;
    top: 0;
    left: -75px;
    border-radius: var(--radius-md);
    background-color: var(--clr-white);
    border: 1px solid var(--clr-white);
    box-sizing: border-box;
    width: 75px;
    height: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.gh-slider-step4 {
    height: 12px;
    width: 64px;
    position: relative;
    border-radius: var(--radius-md);
    background-color: var(--clr-border-mid);
    border: 1px solid var(--clr-white);
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: width var(--t-slow), background-color var(--t-slow);
}

.gh-slider-step4.gh-active {
    background-color: var(--clr-text-500);
}

.gh-slider-step-inside4 {
    position: absolute;
    top: 0;
    left: -74px;
    border-radius: var(--radius-md);
    background-color: var(--clr-text-500);
    border: 1px solid var(--clr-white);
    box-sizing: border-box;
    width: 75px;
    height: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

/* ============================================================
   Badge & Tag - Large (Discount Container)
   ============================================================ */
.gh-badge-and-tag-large {
    box-shadow: var(--shadow-2xs);
    border-radius: var(--radius-md);
    background: linear-gradient(89.95deg, var(--clr-badge-gradient-from), var(--clr-badge-gradient-to));
    height: var(--badge-discount-height);
    width: 95%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
    box-sizing: border-box;
    text-align: left;
    font-size: var(--fs-base);
}

.gh-hugeiconshot-price {
    height: 24px;
    width: 24px;
    position: relative;
    z-index: 0;
    flex-shrink: 0;
}

.gh-close-icon {
    height: 16px;
    width: 16px;
    border-radius: var(--radius-pill);
    background-color: var(--clr-border-light);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1;
    flex-shrink: 0;
}

.gh-x {
    height: 10px;
    width: 10px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.gh-chevron-right {
    height: 14px;
    width: 14px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: none;
    z-index: 2;
}

.gh-home {
    height: 14px;
    width: 14px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: none;
    z-index: 3;
}

.gh-avatar3 {
    height: 16px;
    width: 16px;
    position: relative;
    border-radius: var(--radius-pill);
    overflow: hidden;
    flex-shrink: 0;
    display: none;
    z-index: 4;
}

/* ============================================================
   Countdown Section
   ============================================================ */
.gh-streamlinediscount-percent-fi-parent {
    direction: ltr;
    width: 134px;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-8);
    z-index: 6;
    flex-shrink: 0;
    text-align: right;
    font-size: var(--fs-md);
    color: var(--clr-text-800);
}

.gh-streamlinediscount-percent-fi-icon {
    width: 96px;
    height: 96px;
    position: relative;
    flex-shrink: 0;
}

.gh-b14 {
    position: relative;
    font-size: var(--fs-xl);
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

.gh-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    flex-shrink: 0;
    text-align: left;
    color: var(--clr-text-900);
}

.gh-segmented-picker-base {
    height: var(--btn-height-sm);
    border-radius: var(--radius-xs);
    background-color: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3);
    box-sizing: border-box;
    min-width: var(--btn-min-width-sm);
    min-height: var(--btn-height-sm);
    max-height: var(--btn-height-sm);
}

.gh-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gh-label2 {
    position: relative;
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
}

/* ============================================================
   Product Cards Slider
   ============================================================ */
.gh-card-parent {
    direction: rtl;
    width: 1200px;
    margin: 0 !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    z-index: 5;
    flex-shrink: 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gh-card-parent::-webkit-scrollbar {
    display: none;
}

.gh-card,
.gh-card2 {
    height: var(--card-product-height);
    width: var(--card-product-width);
    box-shadow: var(--shadow-xs);
    background-color: var(--clr-bg-page);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-6);
    box-sizing: border-box;
    gap: var(--sp-5);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    transition: transform var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
}

.gh-card2 {
    width: 224px;
}

.gh-card:hover,
.gh-card2:hover {
    box-shadow: var(--shadow-lg);
    background-color: var(--clr-white);
}

.gh-card:active,
.gh-card2:active {
    transform: translateY(-2px) scale(0.99);
}

.gh-card-header-slot {
    width: 439px;
    background-color: var(--clr-bg-soft);
    border: 0.8px solid var(--clr-border-light);
    box-sizing: border-box;
    overflow: hidden;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 15.4px;
    flex-shrink: 0;
}

.gh-card-header-title {
    width: 408.2px;
    height: 16.9px;
    position: relative;
    letter-spacing: 0.01em;
    font-weight: var(--fw-semibold);
    display: inline-block;
    flex-shrink: 0;
}

.gh-card-image-slot {
    align-self: stretch;
    height: 184.9px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 9.24px;
    overflow: hidden;
    flex-shrink: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    font-size: var(--fs-2xs);
    color: var(--clr-white);
}

.gh-image-109-icon,
.gh-image-109-icon2 {
    position: absolute;
    top: calc(50% - 98.61px);
    width: 197.2px;
    height: 197.2px;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform var(--t-slow);
}

.gh-image-109-icon {
    left: calc(50% - 97.81px);
}

.gh-image-109-icon2 {
    left: calc(50% - 98.31px);
}

.gh-card:hover .gh-image-109-icon,
.gh-card2:hover .gh-image-109-icon2 {
    transform: scale(1.05);
}

.gh-wrapper {
    position: absolute;
    top: 0;
    right: 0.39px;
    border-radius: 0 0 0 var(--radius-2xl);
    background-color: var(--clr-danger);
    width: 40.1px;
    height: 40.1px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11.6px;
    box-sizing: border-box;
    opacity: 0;
    flex-shrink: 0;
}

.gh-b2 {
    position: relative;
    letter-spacing: 0.39px;
    flex-shrink: 0;
}

.gh-card-body-slot {
    align-self: stretch;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 12.3px;
    flex-shrink: 0;
    text-align: right;
    color: var(--clr-text-600);
    font-size: var(--fs-md);
}

.gh-div2 {
    align-self: stretch;
    position: relative;
    letter-spacing: 0.01em;
    line-height: var(--lh-snug);
    font-weight: var(--fw-medium);
}

.gh-parent {
    align-self: stretch;
    height: 17.7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-7);
    color: var(--clr-text-500);
}

.gh-div3 {
    position: relative;
    text-decoration: line-through;
    letter-spacing: -0.08px;
    line-height: 17.25px;
}

.gh-b3 {
    position: relative;
    letter-spacing: -0.08px;
    line-height: 17.25px;
    color: var(--clr-price-new);
}

.gh-card-footer-slot {
    width: 439px;
    height: 46.2px;
    background-color: var(--clr-bg-soft);
    border: 0.8px solid var(--clr-border-light);
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 15.4px;
}

/* ============================================================
   Slider Navigation Buttons
   ============================================================ */
.gh-button-icons3,
.gh-button-icons6 {
    position: absolute;
    margin: 0 !important;
    display: flex;
    align-items: flex-start;
    z-index: 7;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-fast), opacity var(--t-slow);
}

.gh-button-icons3 {
    left: 35px;
}

.gh-button-icons6 {
    right: 200px;
}

.gh-button-icons3:hover,
.gh-button-icons6:hover {
    transform: scale(1.05);
}

.gh-button-icons3:active,
.gh-button-icons6:active {
    transform: scale(0.95);
}

.gh-button-icons3.gh-hidden,
.gh-button-icons6.gh-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.gh-button-icon3,
.gh-button-icon6 {
    height: var(--btn-icon-size);
    width: var(--btn-icon-size);
    box-shadow: var(--shadow-2xs);
    border-radius: var(--radius-xl);
    background-color: var(--clr-white);
    border: 1px solid var(--clr-border-mid);
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--t-base), border-color var(--t-base);
}

.gh-button-icons3:hover .gh-button-icon3,
.gh-button-icons6:hover .gh-button-icon6 {
    background-color: var(--clr-bg-hover);
    border-color: var(--clr-border-dark);
}

/* ============================================================
   Category Badges Row
   ============================================================ */
.gh-frame-parent2 {
    direction: ltr;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--sp-9) 0;
    width: 1376px;
    height: var(--card-badge-height);
    flex-shrink: 0;
    font-size: var(--fs-lg);
    user-select: none;
}

.gh-badge-parent {
    direction: rtl;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    flex: 1;
    max-width: 100%;
    padding: var(--sp-3) var(--sp-1);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gh-badge-parent::-webkit-scrollbar {
    display: none;
}

.gh-badge-parent>div {
    scroll-snap-align: start;
    flex-shrink: 0;
}

.gh-button-icons4,
.gh-button-icons5 {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform var(--t-fast);
    user-select: none;
}

.gh-button-icons4:hover,
.gh-button-icons5:hover {
    transform: scale(1.05);
}

.gh-button-icons4:active,
.gh-button-icons5:active {
    transform: scale(0.95);
}

.gh-button-icons4.gh-disabled,
.gh-button-icons5.gh-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.gh-button-icons4:hover .gh-button-icon3,
.gh-button-icons5:hover .gh-button-icon3 {
    background-color: var(--clr-bg-hover);
    border-color: var(--clr-border-dark);
}

/* ============================================================
   Category Badge Cards
   ============================================================ */
.gh-badge2,
.gh-badge3,
.gh-badge4,
.gh-badge6 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    height: var(--card-badge-height);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-base), box-shadow var(--t-base);
    -webkit-user-drag: none;
}

.gh-badge2 {
    width: var(--card-badge-width);
    font-size: var(--fs-xl);
}

.gh-badge3 {
    width: 228.8px;
}

.gh-badge4 {
    width: var(--card-badge-width);
    overflow: hidden;
    flex-shrink: 0;
}

.gh-badge6 {
    width: var(--card-badge-width);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
}

.gh-badge2:active,
.gh-badge3:active,
.gh-badge4:active,
.gh-badge6:active {
    transform: translateY(-1px) scale(0.98);
}

.gh-badge-and-tag-large2,
.gh-badge-and-tag-large3,
.gh-badge-and-tag-large4,
.gh-badge-and-tag-large5,
.gh-badge-and-tag-large6 {
    box-shadow: var(--shadow-2xs);
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-6);
    position: relative;
    isolation: isolate;
    -webkit-user-drag: none;
    pointer-events: auto;
}

.gh-badge-and-tag-large2 {
    width: var(--card-badge-width);
    direction: ltr;
    align-self: stretch;
    flex: 1;
    background-color: var(--clr-badge-blue-light);
    padding: var(--sp-3) var(--sp-8);
    gap: 3px;
}

.gh-badge-and-tag-large3 {
    width: var(--card-badge-width);
    align-self: stretch;
    flex: 1;
    background-color: var(--clr-badge-red-light);
    gap: var(--sp-7);
}

.gh-badge-and-tag-large4 {
    align-self: stretch;
    flex: 1;
    background-color: var(--clr-badge-amber-light);
    gap: -94px;
}

.gh-badge-and-tag-large5 {
    align-self: stretch;
    flex: 1;
    background-color: var(--clr-badge-cyan-light);
    gap: -94px;
}

.gh-badge-and-tag-large6 {
    align-self: stretch;
    flex: 1;
    background-color: var(--clr-badge-amber-soft);
    gap: 3px;
    z-index: 0;
    flex-shrink: 0;
}

/* Badge Icons */
.gh-circlei-icon {
    position: relative;
    width: 99px;
    height: 99px;
    opacity: 0.7;
    flex-shrink: 0;
}

.gh-circlei-icon2 {
    height: 99px;
    width: 99px;
    position: absolute;
    margin: 0 !important;
    top: 0;
    left: -35px;
    opacity: 0.7;
    z-index: 0;
    flex-shrink: 0;
}

.gh-circlei-icon3 {
    height: 99px;
    width: 99px;
    position: absolute;
    margin: 0 !important;
    top: 50px;
    left: 150px;
    opacity: 0.7;
    z-index: 1;
    flex-shrink: 0;
}

.gh-close-icon2 {
    height: 99px;
    width: 99px;
    border-radius: var(--radius-pill);
    background-color: var(--clr-border-light);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2;
    flex-shrink: 0;
}

.gh-home2 {
    height: 14px;
    width: 14px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: none;
    z-index: 4;
}

.gh-avatar4 {
    height: 16px;
    width: 16px;
    position: relative;
    border-radius: var(--radius-pill);
    overflow: hidden;
    flex-shrink: 0;
    display: none;
    z-index: 5;
}

.gh-chatgpt-image-sep-7-2026-07- {
    height: 102.1px;
    width: 88px;
    position: relative;
    object-fit: cover;
    z-index: 6;
    flex-shrink: 0;
}

.gh-placeholder17 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--sp-1);
    gap: var(--sp-2);
    z-index: 7;
    flex-shrink: 0;
}

.gh-placeholder18 {
    position: relative;
    letter-spacing: 0.01em;
    line-height: var(--lh-tight);
    flex-shrink: 0;
}

.gh-chatgpt-image-sep-7-2026-07-2 {
    height: 102.1px;
    width: 88px;
    position: relative;
    object-fit: cover;
    z-index: 2;
    flex-shrink: 0;
}

.gh-placeholder19 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--sp-1);
    z-index: 3;
    flex-shrink: 0;
}

.gh-placeholder20 {
    position: relative;
    letter-spacing: 0.01em;
    line-height: var(--lh-tight);
}

.gh-circlei-icon6 {
    height: 99px;
    width: 99px;
    position: absolute;
    margin: 0 !important;
    top: 0;
    left: -35px;
    opacity: 0.7;
    z-index: 0;
    flex-shrink: 0;
}

.gh-chatgpt-image-sep-7-2026-07-3 {
    height: 102.1px;
    width: 88px;
    position: relative;
    object-fit: cover;
    z-index: 1;
    flex-shrink: 0;
}

.gh-circlei-icon7 {
    height: 99px;
    width: 99px;
    position: absolute;
    margin: 0 !important;
    top: 50px;
    left: 150px;
    opacity: 0.7;
    z-index: 0;
    flex-shrink: 0;
}

.gh-status2 {
    height: 6px;
    width: 6px;
    position: relative;
    border-radius: var(--radius-pill);
    background-color: var(--clr-text-700);
    display: none;
}

.gh-placeholder23 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--sp-1);
    gap: var(--sp-2);
    z-index: 6;
    flex-shrink: 0;
}

.gh-circlei-icon9 {
    height: 99px;
    width: 99px;
    position: absolute;
    margin: 0 !important;
    top: 50px;
    left: 150px;
    opacity: 0.7;
    z-index: 7;
    flex-shrink: 0;
}

.gh-chatgpt-image-sep-7-2026-07-5 {
    height: 102.1px;
    width: 88px;
    position: relative;
    object-fit: cover;
    z-index: 5;
    flex-shrink: 0;
}

.gh-circlei-icon11 {
    height: 99px;
    width: 99px;
    position: absolute;
    margin: 0 !important;
    top: 50px;
    left: 150px;
    opacity: 0.7;
    z-index: 1;
    flex-shrink: 0;
}

/* ============================================================
   Product Banners
   ============================================================ */
.gh-product-baners {
    direction: ltr;
    width: 1376px;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    margin: var(--sp-9) 0;
    flex-shrink: 0;
}

.gh-product-baner-link {
    height: 229px;
    flex: 1;
    position: relative;
    border-radius: var(--radius-md);
    max-width: 100%;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    transition: transform var(--t-medium), box-shadow var(--t-medium);
}

.gh-product-baner-link:active {
    transform: translateY(-2px) scale(0.99);
}

.gh-product-baner-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

/* ============================================================
   Brand Section
   ============================================================ */
.gh-frame-parent3 {
    margin: var(--sp-9) 0;
    direction: ltr;
    width: 1376px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-6);
    flex-shrink: 0;
    text-align: center;
    color: var(--clr-brand-700);
}

.gh-button-parent {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-7);
}

.gh-placeholder27 {
    position: relative;
    letter-spacing: 0.01em;
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    flex-shrink: 0;
}

.gh-placeholder-group {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-align: right;
    font-size: var(--fs-xl);
    color: var(--clr-text-700);
}

.gh-placeholder28 {
    position: relative;
    letter-spacing: 0.01em;
    line-height: var(--lh-base);
}

.gh-heart-waves-icon {
    height: 28px;
    width: 28px;
    position: relative;
}

.gh-frame-parent4 {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    text-align: left;
    font-size: var(--fs-base);
    color: var(--clr-text-700);
}

.gh-card-group {
    width: 1028px;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
}

.gh-card7 {
    flex: 1;
    box-shadow: var(--shadow-2xs);
    border-radius: var(--radius-md);
    background-color: var(--clr-bg-page);
    border: 1px solid var(--clr-border-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-6);
    gap: var(--sp-5);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    transition: box-shadow var(--t-base), transform var(--t-base), background-color var(--t-base);
}

.gh-card7:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    background-color: var(--clr-white);
}

.gh-card7:active {
    transform: translateY(-1px) scale(0.99);
}

.gh-wrapper6 {
    position: absolute;
    top: 0;
    right: 0.19px;
    border-radius: 0 0 0 var(--radius-2xl);
    background-color: var(--clr-danger);
    width: 40.1px;
    height: 40.1px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11.6px;
    box-sizing: border-box;
    opacity: 0;
    flex-shrink: 0;
}

.gh-image-169-icon,
.gh-image-168-icon,
.gh-image-167-icon,
.gh-image-166-icon,
.gh-image-165-icon {
    position: absolute;
    width: 100%;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform var(--t-slow);
}

.gh-image-169-icon {
    top: calc(50% - 96px);
    height: 192px;
}

.gh-image-168-icon,
.gh-image-167-icon,
.gh-image-165-icon {
    top: calc(50% - 98px);
    height: 196px;
}

.gh-image-166-icon {
    top: calc(50% - 97px);
    height: 194px;
}

.gh-card-body-slot7 {
    align-self: stretch;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 12.3px;
    flex-shrink: 0;
    text-align: right;
    font-size: var(--fs-md);
    color: var(--clr-text-600);
}

.gh-div14 {
    align-self: stretch;
    position: relative;
    line-height: var(--lh-snug);
    font-weight: var(--fw-medium);
}

.gh-parent6 {
    align-self: stretch;
    height: 17.7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    color: var(--clr-text-500);
    font-size: var(--fs-sm2);
}

.gh-div15 {
    position: relative;
    text-decoration: line-through;
    line-height: 17.25px;
}

/* Brand Promo Banner */
.gh-frame-child {
    height: 332px;
    width: 332px;
    position: relative;
    box-shadow: var(--shadow-2xs);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.gh-frame-child:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.gh-frame-child:active {
    transform: translateY(-2px) scale(0.99);
}

.gh-frame-child-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.gh-frame-child:hover .gh-frame-child-img {
    transform: scale(1.05);
}

/* ============================================================
   PHR SECTION (Layout / Grid / Cards)
   ============================================================ */
.phr-page {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--sp-8) var(--gutter) 60px;
    background: var(--clr-white);
}

/* Placeholders */
.phr-placeholder--img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, var(--clr-ph-bg-1), var(--clr-ph-bg-1) 10px, var(--clr-ph-bg-2) 10px, var(--clr-ph-bg-2) 20px);
    color: var(--clr-ph-text);
    font-size: var(--fs-sm);
    border: 1px dashed var(--clr-border-placeholder);
    width: 100%;
    height: 100%;
}

/* Section Header */
.phr-section-head {
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--sp-10) 0 var(--sp-6);
    gap: var(--sp-6);
}

.phr-section-head__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--clr-text-700);
    direction: rtl;
}

.phr-section-head__title-icon {
    width: var(--fs-lg);
    height: var(--fs-lg);
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

.phr-section-head__link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: color var(--t-base);
}

.phr-section-head__link:hover {
    color: var(--clr-brand-800);
}

.phr-section-head__link-icon {
    width: var(--fs-lg);
    height: var(--fs-lg);
    object-fit: contain;
    display: block;
}

/* Promo Strip */
.phr-promo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
    margin-bottom: var(--sp-9);
}

.phr-promo__item {
    height: var(--promo-item-height);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    display: block;
}

.phr-promo__link {
    display: block;
    width: 100%;
    height: 100%;
}

.phr-promo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
}

/* Product Grid */
.phr-products {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.phr-product {
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--clr-white);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--t-base), transform var(--t-base);
}

.phr-product:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.phr-product__media {
    width: 100%;
    height: var(--product-media-height);
    padding: var(--sp-5);
    background: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.phr-product__media-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.phr-product__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.phr-product__body {
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.phr-product__title {
    font-size: var(--fs-sm2);
    line-height: var(--lh-loose);
    color: var(--clr-text-dark, var(--clr-text-700));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.phr-product__pricing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-sm2);
}

.phr-product__price-old {
    color: var(--clr-price-old);
    text-decoration: line-through;
}

.phr-product__price-new {
    color: var(--clr-price-new);
    font-weight: var(--fw-bold);
}

.phr-product__currency {
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
}

/* Brand Grid */
.phr-brands {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.phr-brand {
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-lg);
    height: var(--card-brand-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-white);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

.phr-brand:hover {
    border-color: var(--clr-border-dcdde0);
    box-shadow: var(--shadow-sm);
}

.phr-brand__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.phr-brand__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Mid Banners */
.phr-midbanners {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    margin-top: var(--sp-9);
}

.phr-midbanner {
    height: var(--midbanner-height);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.phr-midbanner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.phr-midbanner__link {
    display: block;
    width: 100%;
    height: 100%;
}

.phr-midbanner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.phr-midbanner--brown .phr-midbanner__overlay {
    background: linear-gradient(90deg, var(--ov-banner-brown-1), var(--ov-banner-brown-2));
}

.phr-midbanner--teal .phr-midbanner__overlay {
    background: linear-gradient(90deg, var(--ov-banner-teal-1), var(--ov-banner-teal-2));
}

.phr-midbanner--maroon .phr-midbanner__overlay {
    background: linear-gradient(90deg, var(--ov-banner-maroon-1), var(--ov-banner-maroon-2));
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1480px) {
    :root {
        --gutter: 24px;
        --grid-gap: 12px;
    }
}

@media (max-width: 1280px) {
    .phr-products {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .phr-brand {
        height: 100px;
    }

    .phr-promo__item {
        height: 140px;
    }
}

@media (max-width: 1080px) {
    .phr-products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .phr-brands {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .phr-promo {
        grid-template-columns: repeat(2, 1fr);
    }

    .phr-midbanners {
        grid-template-columns: repeat(2, 1fr);
    }

    .phr-section-head__title {
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 16px;
        --grid-gap: 10px;
    }

    .phr-page {
        padding: var(--sp-6) var(--gutter) 40px;
    }

    .phr-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .phr-brands {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .phr-promo {
        grid-template-columns: repeat(2, 1fr);
    }

    .phr-promo__item {
        height: 120px;
    }

    .phr-midbanners {
        grid-template-columns: 1fr;
    }

    .phr-midbanner {
        height: 180px;
    }

    .phr-product__media {
        height: 150px;
    }

    .phr-section-head__title {
        font-size: 15px;
    }

    .phr-section-head__link {
        font-size: var(--fs-sm);
    }
}

@media (max-width: 520px) {
    .phr-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phr-brands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phr-promo {
        grid-template-columns: 1fr;
    }

    .phr-promo__item {
        height: 110px;
    }

    .phr-product__media {
        height: 140px;
        padding: var(--sp-3);
    }

    .phr-product__title {
        font-size: var(--fs-sm);
        line-height: 1.7;
    }

    .phr-product__pricing {
        font-size: 11.5px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-1);
    }

    .phr-section-head {
        margin: var(--sp-8) 0 var(--sp-5);
    }

    .phr-section-head__title {
        font-size: var(--fs-md);
    }
}