/* ==========================================================================
   GreenMarket — Product listing / search (PLP)
   Desktop: Figma 315:5589 (without the top banner)
   Mobile : Figma 465:4925 (list) · 465:6575 (sort sheet) · 465:6025 / 465:6931 (filter sheet)
   ========================================================================== */

.gm-plp3 {
    --p-green: #00b274;
    --p-green-2: #2cc18d;
    --p-green-600: #008e5d;
    --p-ink: #3d3d3d;
    --p-ink-2: #454545;
    --p-muted: #6e6e6e;
    --p-muted-2: #878787;
    --p-line: #ebebeb;
    --p-card-line: #e8e8e8;
    --p-ease: cubic-bezier(.2, .7, .2, 1);
    --p-sticky-top: 104px;
    color: var(--p-ink);
    padding-bottom: 64px;
}

.gm-plp3,
.gm-plp3 :where(*:not(i):not([class^="fa"]):not([class*=" fa-"])),
.gm-pf,
.gm-pf :where(*) {
    font-family: "GMSans", "IRANSansX", Tahoma, sans-serif !important;
}

.gm-plp3 > .container {
    width: 100%;
    max-width: 1256px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin: 0 auto;
}

.gm-plp3 :focus-visible {
    outline: 2px solid var(--p-green);
    outline-offset: 2px;
    border-radius: 6px;
}

.gm-plp3 .sr-only,
.gm-pf .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- breadcrumb ---------- */
.gm-plp3__crumb {
    margin: 24px 0 0;
}

.gm-plp3__crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gm-plp3__crumb li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #969696;
}

.gm-plp3__crumb li + li::before {
    content: "/";
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: #99a3b3;
    margin-left: 4px;
}

.gm-plp3__crumb a {
    color: #969696 !important;
    text-decoration: none !important;
    transition: color .15s ease;
}

.gm-plp3__crumb a:hover {
    color: var(--p-green-600) !important;
}

.gm-plp3__crumb [aria-current] {
    color: var(--p-ink);
}

/* ---------- category tiles (same component as home) ---------- */
.gm-pcats {
    margin-top: 40px;
}

/* The strip stays inside the 1224px content column (it used to bleed to the
   left edge of the window, which cut tiles off on wide screens). Hidden
   tiles are hinted with a soft fade on the side that still has content. */
.gm-pcats__viewport {
    position: relative;
    margin: -20px 0;
}

.gm-pcats__slider {
    overflow: hidden;
    padding: 20px 2px;
    --gm-pcats-fade: 56px;
}

/* RTL: the start of the strip is on the right, more tiles are on the left */
.gm-pcats__slider.is-scrollable:not(.is-end) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gm-pcats-fade));
    mask-image: linear-gradient(to right, transparent 0, #000 var(--gm-pcats-fade));
}

.gm-pcats__slider.is-scrollable:not(.is-start) {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--gm-pcats-fade));
    mask-image: linear-gradient(to left, transparent 0, #000 var(--gm-pcats-fade));
}

.gm-pcats__slider.is-scrollable:not(.is-start):not(.is-end) {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--gm-pcats-fade), #000 calc(100% - var(--gm-pcats-fade)), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 var(--gm-pcats-fade), #000 calc(100% - var(--gm-pcats-fade)), transparent 100%);
}

.gm-pcats__slider .swiper-wrapper {
    align-items: flex-start;
}

.gm-pcats__slider .swiper-slide {
    width: auto !important;
    min-width: 112px;
}

.gm-pcat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 112px;
    color: var(--p-ink) !important;
    text-decoration: none !important;
}

.gm-pcat__tile {
    width: 112px;
    height: 116px;
    padding: 5.86px;
    border: .73px solid #f0f0f0;
    border-radius: 17.6px;
    box-shadow: 0 1.47px 18.3px rgba(67, 80, 88, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s var(--p-ease), box-shadow .25s ease;
}

.gm-pcat__tile--1 { background: #fffcde; }
.gm-pcat__tile--2 { background: #dcf5ff; }
.gm-pcat__tile--3 { background: #e1fff3; }

.gm-pcat__tile img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    transition: transform .3s var(--p-ease);
}

.gm-pcat__initial {
    font-size: 30px;
    font-weight: 700;
    color: var(--p-green-600);
}

.gm-pcat__label {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
    transition: color .2s ease;
}

.gm-pcat:hover .gm-pcat__tile {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(67, 80, 88, .18);
}

.gm-pcat:hover .gm-pcat__tile img {
    transform: scale(1.06);
}

.gm-pcat:hover .gm-pcat__label,
.gm-pcat.is-current .gm-pcat__label {
    color: var(--p-green-600);
}

.gm-pcat.is-current .gm-pcat__tile {
    box-shadow: 0 0 0 2px var(--p-green), 0 6px 16px rgba(0, 178, 116, .18);
}

.gm-pcats__nav {
    position: absolute;
    top: 58px;
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(245, 245, 245, .75);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    color: #3e3e3e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
}

.gm-pcats__nav[hidden] { display: none; }
.gm-pcats__nav--prev { right: -8px; }
.gm-pcats__nav--next { left: -8px; }
.gm-pcats__viewport:hover .gm-pcats__nav,
.gm-pcats__nav:focus-visible { opacity: 1; }
.gm-pcats__nav:hover { background: #fff; }
.gm-pcats__nav.swiper-button-disabled { opacity: 0 !important; pointer-events: none; }

/* ---------- two-column layout ---------- */
.gm-plp3__layout {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 40px;
}

.gm-plp3__main {
    min-width: 0;
    padding-top: 10px;
}

/* ---------- sort bar ---------- */
.gm-plp3__mhead {
    display: none;
}

.gm-plp3__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 21px;
}

.gm-psort {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    min-width: 0;
}

.gm-psort__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: var(--p-ink);
    white-space: nowrap;
}

.gm-psort__btn {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: var(--p-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease;
}

.gm-psort__btn::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 2px;
    background: var(--p-green);
    transform: scaleX(0);
    transition: transform .22s var(--p-ease);
}

.gm-psort__btn:hover {
    color: var(--p-ink);
}

.gm-psort__btn.is-active {
    color: #262626;
    font-weight: 600;
}

.gm-psort__btn.is-active::after {
    transform: scaleX(1);
}

.gm-plp3__count {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #737373;
    white-space: nowrap;
}

/* ---------- active filter chips ---------- */
.gm-pchips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.gm-pchips[hidden] {
    display: none;
}

.gm-pchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 4px 10px 4px 12px;
    border: 0;
    border-radius: 30px;
    background: #f7f9fc;
    color: #334155;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.gm-pchip svg {
    color: #64748b;
}

.gm-pchip:hover {
    background: #fdecec;
    color: #c2410c;
}

.gm-pchip:hover svg {
    color: #f25f63;
}

.gm-pchips__clear {
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--p-green-600);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* ---------- product grid ---------- */
.gm-plp3__grid {
    position: relative;
    margin-top: 12px;
    min-height: 320px;
    transition: opacity .2s ease;
}

.gm-plp3.is-loading .gm-plp3__grid {
    pointer-events: none;
}

.gm-pgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 16px;
}

.gm-pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    height: 300px;
    padding: 16px 16px 8px;
    border: 1px solid var(--p-card-line);
    border-radius: 12px;
    background: #fff;
    color: var(--p-ink-2) !important;
    text-decoration: none !important;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--p-ease);
}

.gm-pcard:hover {
    border-color: #d2ece2;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .08);
}

.gm-pcard__media {
    position: relative;
    display: block;
    flex: 0 0 182px;
    height: 182px;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.gm-pcard__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s var(--p-ease);
}

.gm-pcard:hover .gm-pcard__media img {
    transform: scale(1.05);
}

.gm-pcard__credit {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 19px;
    padding: 0 4px;
    border-radius: 24px;
    background: #2cc18d;
    color: #fff;
    font-size: 10px;
    line-height: 15px;
    white-space: nowrap;
}

.gm-pcard__soldout {
    position: absolute;
    inset: auto 8px 8px;
    height: 24px;
    border-radius: 6px;
    background: rgba(61, 61, 61, .78);
    color: #fff;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
}

.gm-pcard.is-unavailable .gm-pcard__media img {
    filter: grayscale(.9);
    opacity: .6;
}

.gm-pcard__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 2px;
}

.gm-pcard__row--title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    height: 21px;
}

.gm-pcard__name {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: var(--p-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-pcard__rate {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.gm-pcard__rate b {
    font-size: 12px;
    font-weight: 400;
    color: var(--p-ink-2);
}

.gm-pcard__seller {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 16px;
    font-size: 10px;
    line-height: 15px;
    color: var(--p-muted-2);
}

.gm-pcard__seller img,
.gm-pcard__avatar {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    box-sizing: content-box;
    object-fit: cover;
}

.gm-pcard__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8b5cf6;
    color: #fff;
    font-size: 7px;
}

.gm-pcard__seller-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-pcard__offers {
    flex-shrink: 0;
    margin-inline-start: auto;
    color: var(--p-green-600);
}

.gm-pcard__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
}

.gm-pcard__city {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin-bottom: 4px;
    font-size: 10px;
    line-height: 15px;
    color: var(--p-muted);
    white-space: nowrap;
}

.gm-pcard__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.gm-pcard__off {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 17px;
    margin-bottom: 1px;
}

.gm-pcard__off del {
    order: 1;
    font-size: 10px;
    font-weight: 500;
    color: var(--p-muted);
    text-decoration-color: var(--p-muted);
}

.gm-pcard__pct {
    order: 2;
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 8px;
    border-radius: 17px;
    background: rgba(242, 95, 99, .12);
    color: #f25f63;
    font-size: 10px;
    font-weight: 700;
}

.gm-pcard__now {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.gm-pcard__now b {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--p-ink-2);
}

.gm-pcard__now small {
    font-size: 10px;
    font-weight: 500;
    color: var(--p-ink-2);
}

.gm-pcard__now.is-muted b {
    font-size: 13px;
    color: #a0a0a0;
}

/* skeleton */
.gm-pgrid.is-skeleton .gm-pcard--skel {
    pointer-events: none;
    gap: 8px;
}

.gm-pcard--skel .gm-pcard__media,
.gm-skel-line {
    background: linear-gradient(90deg, #f3f4f4 25%, #fafafa 37%, #f3f4f4 63%);
    background-size: 400% 100%;
    animation: gm-skel 1.3s ease infinite;
}

.gm-skel-line {
    display: block;
    height: 12px;
    border-radius: 6px;
}

.gm-skel-line--short { width: 55%; }
.gm-skel-line--price { width: 45%; height: 18px; margin-top: auto; align-self: flex-end; }

@keyframes gm-skel {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------- pagination ---------- */
.gm-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.gm-pager__nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 58px;
    height: 40px;
    font-size: 14px;
    line-height: 20px;
    color: #525252 !important;
    text-decoration: none !important;
    border-radius: 8px;
    transition: color .15s ease;
}

.gm-pager__nav svg {
    color: #737373;
    transition: transform .2s var(--p-ease);
}

.gm-pager__nav:hover {
    color: var(--p-green-600) !important;
}

.gm-pager__nav--prev:hover svg { transform: translateX(3px); }
.gm-pager__nav--next:hover svg { transform: translateX(-3px); }

.gm-pager__nav.is-disabled {
    opacity: .4;
    pointer-events: none;
}

.gm-pager__pages {
    display: flex;
    align-items: center;
    gap: 2px;
}

.gm-pager__page,
.gm-pager__gap {
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
    color: #737373 !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}

a.gm-pager__page:hover {
    background: #f5f5f5;
    color: var(--p-ink) !important;
}

.gm-pager__page.is-active {
    background: #edf8f2;
    color: var(--p-green) !important;
    font-weight: 600;
}

.gm-plp-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 0 8px;
    font-size: 12px;
    color: var(--p-muted);
}

.gm-plp-more[hidden] {
    display: none;
}

.gm-plp-more__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #d9f2e7;
    border-top-color: var(--p-green);
    border-radius: 50%;
    animation: gm-spin .8s linear infinite;
}

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

/* ---------- empty state ---------- */
.gm-plp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 16px;
    border: 1px dashed #dfe7e3;
    border-radius: 16px;
    text-align: center;
}

.gm-plp-empty strong {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--p-ink);
}

.gm-plp-empty p {
    margin: 0;
    font-size: 13px;
    color: var(--p-muted-2);
}

.gm-plp-empty__btn {
    margin-top: 12px;
    height: 40px;
    padding: 0 20px;
    border: 1px solid var(--p-green);
    border-radius: 8px;
    background: #fff;
    color: var(--p-green-600);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- category copy + faq ---------- */
.gm-plp3__about {
    margin-top: 48px;
    padding: 24px;
    border: 1px solid var(--p-line);
    border-radius: 16px;
}

.gm-plp3__about-body {
    position: relative;
    max-height: 220px;
    overflow: hidden;
    font-size: 14px;
    line-height: 2;
    color: #5a5a5a;
}

.gm-plp3__about.is-clamped:not(.is-open) .gm-plp3__about-body::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 80px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
}

.gm-plp3__about.is-open .gm-plp3__about-body {
    max-height: none;
}

.gm-plp3__about-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--p-green-600);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.gm-plp3__about.is-open .gm-plp3__about-more svg {
    transform: rotate(180deg);
}

.gm-plp3__faq {
    max-width: 960px;
    margin: 48px auto 0;
}

.gm-plp3__faq-title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}

.gm-plp3__faq-item {
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 12px;
}

.gm-plp3__faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
}

.gm-plp3__faq-item summary::-webkit-details-marker { display: none; }
.gm-plp3__faq-item[open] summary { color: var(--p-green-600); }
.gm-plp3__faq-item[open] summary svg { transform: rotate(45deg); }
.gm-plp3__faq-item summary svg { transition: transform .25s var(--p-ease); flex-shrink: 0; }

.gm-plp3__faq-answer {
    padding: 0 20px 16px;
    font-size: 14px;
    line-height: 2;
    color: #5a5a5a;
}

/* ==========================================================================
   Filters — desktop sidebar card (288px, sticky, own scroll)
   ========================================================================== */
.gm-pf {
    position: sticky;
    top: var(--p-sticky-top);
    min-width: 0;
}

.gm-pf__panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--p-sticky-top) - 24px);
    border: 1px solid var(--p-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.gm-pf__grip,
.gm-pf__close,
.gm-pf__foot,
.gm-pf__title-m {
    display: none;
}

.gm-pf__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 54px;
    margin: 6px 16px 0;
    border-bottom: 1px solid var(--p-line);
}

.gm-pf__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--p-ink);
}

.gm-pf__clear {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--p-green);
    font-size: 11px;
    line-height: 14px;
    cursor: pointer;
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s ease;
}

.gm-plp3.has-filters .gm-pf__clear {
    opacity: 1;
    pointer-events: auto;
}

.gm-pf__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px 24px 8px;
    margin-left: 4px;
    scrollbar-width: thin;
    scrollbar-color: #919191 #f5f5f5;
}

.gm-pf__body::-webkit-scrollbar { width: 8px; }
.gm-pf__body::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 12px; margin: 8px 0; }
.gm-pf__body::-webkit-scrollbar-thumb { background: #919191; border-radius: 20px; }

/* accordions + blocks share a divider rhythm */
.gm-pf-acc,
.gm-pf-block,
.gm-pf-toggle {
    border-bottom: 1px solid var(--p-line);
}

.gm-pf-acc__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 12px 0;
    border: 0;
    background: none;
    color: var(--p-muted);
    text-align: right;
    cursor: pointer;
}

.gm-pf-acc:first-child .gm-pf-acc__btn {
    min-height: 52px;
}

.gm-pf-acc__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gm-pf-acc__name {
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    color: var(--p-muted);
}

.gm-pf-acc:first-child .gm-pf-acc__name {
    font-size: 14px;
    color: var(--p-ink);
}

.gm-pf-acc__meta {
    font-style: normal;
    font-size: 10px;
    line-height: 15px;
    color: var(--p-green-600);
}

.gm-pf-acc__chev {
    flex-shrink: 0;
    color: var(--p-muted);
    transition: transform .25s var(--p-ease);
}

.gm-pf-acc.is-open > .gm-pf-acc__btn .gm-pf-acc__chev {
    transform: rotate(180deg);
}

.gm-pf-acc__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s var(--p-ease);
}

.gm-pf-acc__inner {
    min-height: 0;
    overflow: hidden;
}

.gm-pf-acc.is-open > .gm-pf-acc__body {
    grid-template-rows: 1fr;
}

.gm-pf-acc.is-open > .gm-pf-acc__body > .gm-pf-acc__inner {
    padding-bottom: 14px;
}

/* price */
.gm-pf-price {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gm-pf-field {
    position: relative;
    display: block;
    margin: 0;
}

.gm-pf-field__input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 44px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    color: var(--p-ink);
    font-size: 14px;
    text-align: right;
    direction: rtl;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.gm-pf-field__input::placeholder {
    color: #969696;
}

.gm-pf-field__input:focus {
    border-color: var(--p-green);
    box-shadow: 0 0 0 3px rgba(0, 178, 116, .12);
}

.gm-pf-field__unit {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 11px;
    color: #a3a3a3;
    pointer-events: none;
}

.gm-pf-price__error {
    margin: 8px 0 0;
    font-size: 11px;
    color: #e5484d;
}

/* payment radios */
.gm-pf-block {
    padding: 12px 0;
}

.gm-pf-block__title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    color: var(--p-ink);
}

.gm-pf-radios {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gm-pf-radio {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    margin: 0;
    cursor: pointer;
}

.gm-pf-radio input,
.gm-pf-check input,
.gm-pf-toggle input,
.gm-pf-pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.gm-pf-radio__dot {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease;
}

.gm-pf-radio__dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--p-green);
    transform: scale(0);
    transition: transform .18s var(--p-ease);
}

.gm-pf-radio input:checked + .gm-pf-radio__dot {
    border-color: var(--p-green);
}

.gm-pf-radio input:checked + .gm-pf-radio__dot::after {
    transform: scale(1);
}

.gm-pf-radio input:focus-visible + .gm-pf-radio__dot {
    box-shadow: 0 0 0 3px rgba(0, 178, 116, .2);
}

.gm-pf-radio__label {
    font-size: 12px;
    line-height: 22px;
    color: var(--p-muted-2);
}

.gm-pf-radio input:checked ~ .gm-pf-radio__label {
    color: var(--p-ink);
}

/* toggle */
.gm-pf-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 12px 0;
    margin: 0;
    cursor: pointer;
}

.gm-pf-toggle__label {
    font-size: 12px;
    line-height: 22px;
    color: var(--p-muted);
}

.gm-pf-toggle__track {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    height: 20px;
    padding: 2px;
    border-radius: 12px;
    background: #e5e5e5;
    transition: background .2s ease;
}

.gm-pf-toggle__track span {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(16, 24, 40, .1);
    transition: transform .22s var(--p-ease);
}

.gm-pf-toggle input:checked + .gm-pf-toggle__track {
    background: var(--p-green-2);
}

.gm-pf-toggle input:checked + .gm-pf-toggle__track span {
    transform: translateX(-16px);
}

.gm-pf-toggle input:focus-visible + .gm-pf-toggle__track {
    box-shadow: 0 0 0 3px rgba(0, 178, 116, .2);
}

/* checkbox lists */
.gm-pf-find {
    margin-bottom: 8px;
}

.gm-pf-find input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fafafa;
    font-size: 12px;
    outline: none;
}

.gm-pf-find input:focus {
    border-color: var(--p-green);
    background: #fff;
}

.gm-pf-checks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 264px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.gm-pf-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    margin: 0;
    cursor: pointer;
}

.gm-pf-check[hidden] {
    display: none;
}

.gm-pf-check__box {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, border-color .15s ease;
}

.gm-pf-check__box::after {
    content: "";
    width: 8px;
    height: 4.5px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 0 1.8px 1.8px;
    transform: rotate(-45deg) scale(0);
    transition: transform .15s var(--p-ease);
}

.gm-pf-check input:checked + .gm-pf-check__box {
    border-color: var(--p-green-2);
    background: var(--p-green-2);
}

.gm-pf-check input:checked + .gm-pf-check__box::after {
    transform: rotate(-45deg) scale(1);
}

.gm-pf-check input:focus-visible + .gm-pf-check__box {
    box-shadow: 0 0 0 3px rgba(0, 178, 116, .2);
}

.gm-pf-check__label {
    min-width: 0;
    font-size: 12px;
    line-height: 20px;
    color: var(--p-muted);
}

.gm-pf-check input:checked ~ .gm-pf-check__label {
    color: var(--p-ink);
}

/* pills (sale / supplier type) */
.gm-pf-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.gm-pf-pill {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.gm-pf-pill__face {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 29px;
    padding: 4px 12px 4px 6px;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
    background: #fff;
    color: var(--p-muted);
    font-size: 12px;
    line-height: 18px;
    flex-direction: row-reverse;
    transition: border-color .15s ease, background .15s ease;
}

.gm-pf-pill input:checked + .gm-pf-pill__face {
    border-color: var(--p-ink);
    background: #fafafa;
}

.gm-pf__group {
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--p-ink);
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199.98px) {
    .gm-plp3__layout {
        grid-template-columns: 260px minmax(0, 1fr);
    }

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

    .gm-psort__btn:nth-child(n+6) {
        display: none;
    }
}

/* ==========================================================================
   Mobile + tablet portrait — list (465:4925), sheets (465:6575, 465:6931)
   ========================================================================== */
@media (max-width: 991.98px) {
    .gm-plp3 {
        padding-bottom: 24px;
    }

    .gm-plp3__crumb {
        margin-top: 10px;
    }

    .gm-plp3__crumb li {
        font-size: 11px;
        font-weight: 400;
        line-height: 17px;
        color: #878787;
    }

    .gm-plp3__crumb li + li::before {
        font-size: 11px;
        line-height: 17px;
        color: #878787;
    }

    .gm-plp3__crumb [aria-current] {
        color: var(--p-ink);
    }

    /* category tiles 64×66 */
    .gm-pcats {
        margin-top: 12px;
    }

    .gm-pcats__viewport {
        margin: -12px -16px;
    }

    .gm-pcats__slider {
        padding: 12px 16px;
        --gm-pcats-fade: 28px;
    }

    .gm-pcats__slider .swiper-slide {
        width: 64px !important;
        min-width: 64px;
    }

    .gm-pcat {
        min-width: 64px;
        gap: 6px;
    }

    .gm-pcat__tile {
        width: 64px;
        height: 66px;
        padding: 3.35px;
        border-width: .42px;
        border-radius: 10px;
        box-shadow: 0 .84px 10.47px rgba(67, 80, 88, .15);
    }

    .gm-pcat__tile img {
        width: 47px;
        height: 47px;
    }

    .gm-pcat:hover .gm-pcat__tile {
        transform: none;
    }

    .gm-pcat:active .gm-pcat__tile {
        transform: scale(.94);
    }

    .gm-pcat__label {
        width: 70px;
        margin: 0 -3px;
        font-size: 10px;
        line-height: 15px;
        text-align: center;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .gm-pcats__nav {
        display: none !important;
    }

    .gm-plp3__layout {
        display: block;
        margin-top: 12px;
    }

    .gm-plp3__main {
        padding-top: 0;
    }

    /* title + tools */
    .gm-plp3__mhead {
        position: sticky;
        top: 53px;
        z-index: 30;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0 -16px;
        padding: 0 16px 12px;
        background: #fff;
        transition: box-shadow .2s ease, top .28s cubic-bezier(.2, .7, .2, 1);
    }


    .gm-plp3__mhead.is-stuck {
        padding-top: 10px;
        box-shadow: 0 6px 14px rgba(12, 12, 13, .06);
    }

    .gm-plp3__mhead.is-stuck .gm-plp3__title {
        display: none;
    }

    .gm-plp3__title {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 21px;
        color: var(--p-ink);
    }

    .gm-plp3__mtools {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .gm-plp3__tool {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 27px;
        padding: 0 12px;
        border: 1px solid #e3e3e3;
        border-radius: 48px;
        background: #fff;
        color: var(--p-ink);
        font-size: 10px;
        font-weight: 500;
        line-height: 15px;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .gm-plp3__tool::before {
        content: "";
        position: absolute;
        inset: -8px -2px;
    }

    .gm-plp3__tool.is-set {
        border-color: var(--p-green);
        background: #effaf5;
        color: var(--p-green-600);
    }

    .gm-plp3__tool:active {
        transform: scale(.96);
    }

    .gm-plp3__tool-badge {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 16px;
        background: var(--p-green);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    .gm-plp3__tool-badge[hidden] {
        display: none;
    }

    .gm-plp3__mtools .gm-plp3__count {
        margin-inline-start: auto;
        font-size: 10px;
        font-weight: 400;
        line-height: 15px;
        color: var(--p-muted);
    }

    .gm-plp3__bar {
        display: none;
    }

    .gm-pchips {
        flex-wrap: nowrap;
        margin: 0 -16px 12px;
        padding: 0 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .gm-pchips::-webkit-scrollbar { display: none; }

    .gm-pchip {
        flex-shrink: 0;
        height: 26px;
        font-size: 11px;
    }

    .gm-plp3__grid {
        margin-top: 0;
    }

    /* 2-col grid of 172×240 cards */
    .gm-pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding-bottom: 12px;
    }

    .gm-pcard {
        gap: 8px;
        height: 240px;
        padding: 12px 12px 7px;
    }

    .gm-pcard:hover {
        box-shadow: none;
    }

    .gm-pcard:active {
        transform: scale(.98);
    }

    .gm-pcard__media {
        flex-basis: 133px;
        height: 133px;
    }

    .gm-pcard__credit {
        height: 16px;
        padding: 0 4px;
        font-size: 8px;
        gap: 3px;
    }

    .gm-pcard__credit svg {
        width: 10px;
        height: 10px;
    }

    .gm-pcard__body {
        gap: 4px;
        padding-top: 0;
    }

    .gm-pcard__row--title {
        height: 18px;
    }

    .gm-pcard__name {
        font-size: 12px;
        line-height: 18px;
    }

    .gm-pcard__rate b {
        font-size: 10px;
    }

    .gm-pcard__offers {
        display: none;
    }

    .gm-pcard__foot {
        align-items: flex-start;
    }

    .gm-pcard__city {
        margin: 0;
    }

    .gm-pcard__now b {
        font-size: 14px;
        line-height: 21px;
    }

    .gm-pcard__now small {
        font-size: 10px;
    }

    .gm-pager {
        display: none;
    }

    .gm-plp3__about {
        margin-top: 24px;
        padding: 16px;
    }

    .gm-plp3__faq-title {
        font-size: 18px;
    }

    /* ---------- overlay shared by both sheets (#F2F2F2 50% + blur 6) ---------- */
    .gm-plp3__overlay {
        position: fixed;
        inset: 0;
        z-index: 1240;
        background: rgba(242, 242, 242, .5);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        opacity: 0;
        transition: opacity .25s ease;
    }

    .gm-plp3__overlay.is-visible {
        opacity: 1;
    }

    /* ---------- filter sheet ---------- */
    .gm-pf {
        position: fixed;
        inset: 72px 0 0;
        z-index: 1250;
        top: max(72px, env(safe-area-inset-top));
        pointer-events: none;
    }

    .gm-pf__panel {
        position: absolute;
        inset: 0;
        max-height: none;
        border: 0;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -8px 28px rgba(15, 23, 41, .14);
        transform: translate3d(0, 105%, 0);
        transition: transform .42s cubic-bezier(.22, 1, .36, 1);
        pointer-events: auto;
        visibility: hidden;
    }

    .gm-pf.is-open .gm-pf__panel {
        transform: translate3d(0, var(--gm-pf-drag, 0px), 0);
        visibility: visible;
    }

    .gm-pf.is-dragging .gm-pf__panel {
        transition: none;
    }

    .gm-pf__grip {
        flex: 0 0 20px;
        display: flex;
        justify-content: center;
        padding-top: 8px;
        touch-action: none;
    }

    .gm-pf__grip span {
        width: 40px;
        height: 4px;
        border-radius: 4px;
        background: #e3e3e3;
    }

    .gm-pf__head {
        height: 44px;
        margin: 0;
        padding: 0 16px;
        border: 0;
        touch-action: none;
    }

    .gm-pf__title-m { display: inline; }
    .gm-pf__title-d { display: none; }

    .gm-pf__clear {
        display: none;
    }

    .gm-pf__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: -11px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--p-ink);
    }

    .gm-pf__close:active {
        background: #f5f5f5;
    }

    .gm-pf__body {
        padding: 8px 16px 48px;
        margin: 0;
        scrollbar-width: thin;
    }

    .gm-pf__body::-webkit-scrollbar { width: 4px; }

    .gm-pf-acc__btn,
    .gm-pf-acc:first-child .gm-pf-acc__btn {
        min-height: 52px;
        padding: 12px 0;
    }

    .gm-pf-acc__name,
    .gm-pf-acc:first-child .gm-pf-acc__name {
        font-size: 14px;
        line-height: 25px;
        color: var(--p-ink);
    }

    .gm-pf-acc__meta {
        color: var(--p-muted-2);
    }

    .gm-pf-price {
        flex-direction: row;
        gap: 8px;
    }

    .gm-pf-field {
        flex: 1 1 0;
    }

    .gm-pf-field__input {
        height: 44px;
        font-size: 16px; /* no iOS zoom */
    }

    .gm-pf-toggle {
        min-height: 56px;
    }

    .gm-pf-toggle__label {
        font-size: 14px;
        line-height: 25px;
    }

    .gm-pf-toggle__track {
        flex-basis: 44px;
        width: 44px;
        height: 24px;
    }

    .gm-pf-toggle__track span {
        width: 20px;
        height: 20px;
    }

    .gm-pf-toggle input:checked + .gm-pf-toggle__track span {
        transform: translateX(-20px);
    }

    .gm-pf-radio__label {
        font-size: 12px;
    }

    .gm-pf-checks {
        max-height: none;
        gap: 0;
    }

    .gm-pf-check {
        min-height: 44px;
        padding-right: 8px;
        gap: 12px;
    }

    .gm-pf-check__box {
        flex-basis: 20px;
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .gm-pf-check__label {
        font-size: 14px;
        line-height: 25px;
    }

    .gm-pf-find input {
        height: 40px;
        font-size: 16px;
    }

    .gm-pf__group {
        margin: 12px 0 0;
    }

    .gm-pf__foot {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        box-shadow: 0 -4px 16px rgba(15, 23, 41, .08);
    }

    .gm-pf__apply {
        flex: 1 1 195px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 40px;
        padding: 0 24px;
        border: 0;
        border-radius: 6px;
        background: var(--p-green);
        color: #fff;
        font-size: 14px;
        line-height: 24px;
        cursor: pointer;
    }

    .gm-pf__apply.is-loading .gm-pf__apply-count {
        opacity: .6;
    }

    .gm-pf__apply-count[hidden] {
        display: none;
    }

    .gm-pf__wipe {
        flex: 0 1 151px;
        height: 40px;
        padding: 0 16px;
        border: 0;
        border-radius: 6px;
        background: none;
        color: var(--p-green-600);
        font-size: 14px;
        line-height: 24px;
        cursor: pointer;
    }

    .gm-pf__wipe:active {
        background: #f0faf6;
    }

    /* ---------- sort sheet ---------- */
    .gm-psheet {
        position: fixed;
        inset: 0;
        z-index: 1250;
    }

    .gm-psheet[hidden] {
        display: none;
    }

    .gm-psheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(242, 242, 242, .5);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        opacity: 0;
        transition: opacity .25s ease;
    }

    .gm-psheet__panel {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 24px 0 0;
        background: #fff;
        box-shadow: 0 -8px 28px rgba(15, 23, 41, .14);
        transform: translate3d(0, 105%, 0);
        transition: transform .38s cubic-bezier(.22, 1, .36, 1);
    }

    .gm-psheet.is-open .gm-psheet__backdrop { opacity: 1; }
    .gm-psheet.is-open .gm-psheet__panel { transform: translate3d(0, var(--gm-ps-drag, 0px), 0); }
    .gm-psheet.is-dragging .gm-psheet__panel { transition: none; }

    .gm-psheet__grip {
        display: flex;
        justify-content: center;
        height: 20px;
        padding-top: 8px;
        touch-action: none;
    }

    .gm-psheet__grip span {
        width: 40px;
        height: 4px;
        border-radius: 4px;
        background: #e3e3e3;
    }

    .gm-psheet__head {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
        height: 44px;
        padding: 0 16px;
        touch-action: none;
    }

    .gm-psheet__title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        color: var(--p-ink);
    }

    .gm-psheet__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: -11px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--p-ink);
    }

    .gm-psheet__sub {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 48px;
        margin: 0;
        padding: 0 16px;
        font-size: 13px;
        font-weight: 500;
        color: var(--p-ink);
    }

    .gm-psheet__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .gm-psheet__option {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: 56px;
        padding: 0 16px;
        border: 0;
        background: #fff;
        color: var(--p-muted);
        font-size: 14px;
        font-weight: 400;
        line-height: 25px;
        text-align: right;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .15s ease;
    }

    .gm-psheet__option:active {
        background: #f6faf8;
    }

    .gm-psheet__box {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .gm-psheet__box svg {
        opacity: 0;
    }

    .gm-psheet__option.is-active {
        background: #edfaf5;
        color: #262626;
        font-weight: 600;
    }

    .gm-psheet__option.is-active .gm-psheet__box {
        border-color: var(--p-green-2);
        background: var(--p-green-2);
    }

    .gm-psheet__option.is-active .gm-psheet__box svg {
        opacity: 1;
    }

    body.gm-catalog-drawer-open {
        overflow: hidden;
    }

    body.gm-catalog-drawer-open .gm-bottom-nav {
        transform: translate3d(0, 110%, 0) !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

@media (min-width: 992px) {
    .gm-psheet,
    .gm-plp3__overlay {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gm-plp3 *,
    .gm-pf *,
    .gm-psheet * {
        transition: none !important;
        animation: none !important;
    }
}

/* Figma PLP has no support banner above the footer */
body:has(.gm-plp3) .gm-footer--v3 .gm-support {
    display: none;
}

@media (min-width: 992px) {
    .gm-plp3 {
        padding-bottom: 0;
    }

    body:has(.gm-plp3) .gm-footer--v3 .gm-footer__body {
        padding-top: 92px;
    }
}