/*
    «سبد خرید گروهی» صفحه‌ی محصول (Pages/Components/GroupCart/GroupCart.cshtml + js/GroupCart.js)
    فقط وقتی تنظیم سایت ProductPage_GroupCart روشن باشد در ProductDetail.cshtml لود می‌شود (بعد از style_product.css).

    رنگ‌ها: همه از متغیرهای Bootstrap 5.3 (--bs-*) و توکن‌های --kw-* می‌آیند (فقط سیاهِ تیره‌کردن هاور دکمه و سفیدِ تیک چیپ ثابت‌اند)
    (توکن‌های مشترک در style_product.css). مستاجر برای عوض‌کردن رنگ‌ها فقط توکن را در :root فایل خودش
    (wwwroot/tenants/{domain}/…_site.css) می‌نویسد؛ :where(:root) تضمین می‌کند ترتیب لود مهم نیست.
*/

/* توکن‌های موجودی (توکن‌های رنگ شاخص/خرید عمده/پیام: style_product.css) */
:where(:root) {
    --kw-stock-low-bg: var(--bs-warning-bg-subtle);
    --kw-stock-low-color: var(--bs-warning-text-emphasis);
    --kw-stock-low-border: var(--bs-warning-border-subtle);
    --kw-stock-out-bg: var(--bs-secondary-bg);
    --kw-stock-out-color: var(--bs-secondary-color);

    /* پیام «حداکثر موجودی» داخل ردیف */
    --kw-limit-color: var(--bs-danger-text-emphasis);
}

/*
    بالای صفحه: وقتی کارت خرید برداشته شده و قاب سمت چپ هیچ سطری ندارد (گارانتی، ارسال رایگان، حداقل سفارش و ...)،
    ستون چپ پنهان می‌شود و ستون اطلاعات تمام عرض را می‌گیرد. اگر سطری داشت، مثل قبل نمایش داده می‌شود.
    (.totalBox = دکمه‌ی «تماس و استعلام قیمت» که نباید پنهان شود)
*/
.gc-info-row:not(:has(.boxProce :is(.col-12, .totalBox))) > .col-sm-5 {
    display: none;
}

@media (min-width: 576px) {
    .gc-info-row:not(:has(.boxProce :is(.col-12, .totalBox))) > .col-sm-7 {
        flex: 0 0 100%;
        width: 100%;
    }
}

.gc-wrap {
    clear: both;
    width: 100%;
    margin-top: 24px;
    color: var(--bs-body-color);
    font-size: 13px;
    line-height: 1.8;
}

/* ---------- نوع‌های badge مخصوص سبد گروهی (badge پایه: style_product.css) ---------- */
.kw-badge-count {
    --kw-badge-bg: var(--bs-secondary-bg);
    --kw-badge-color: var(--bs-secondary-color);
}

.kw-badge-low {
    --kw-badge-bg: var(--kw-stock-low-bg);
    --kw-badge-color: var(--kw-stock-low-color);
    --kw-badge-border: var(--kw-stock-low-border);
}

.kw-badge-out {
    --kw-badge-bg: var(--kw-stock-out-bg);
    --kw-badge-color: var(--kw-stock-out-color);
}

.kw-badge-basket {
    --kw-badge-bg: var(--bs-body-bg);
    --kw-badge-color: var(--bs-emphasis-color);
    --kw-badge-border: var(--bs-border-color);
}

/* ---------- هدر بخش: «سایر سایز ها» / «سایر رنگ ها» / «کالای تکمیلی اجباری» ... ---------- */
.gc-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--bs-border-color);
    color: var(--bs-emphasis-color);
    font-size: 16px;
    font-weight: 700;
}

/* خط رنگی کوتاه زیر عنوان */
.gc-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -2px;
    width: 70px;
    height: 2px;
    background: var(--kw-buy-accent);
}

/* ---------- انتخابگر رنگ/یونیت: چیپ‌های گرد (رادیوی واقعی مخفی است) ---------- */
.gc-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 2px 16px;
}

.gc-opt {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.gc-opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.gc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 16px;
    border: 1.5px solid var(--bs-border-color);
    border-radius: 24px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color .15s, background-color .15s, box-shadow .15s, color .15s;
}

.gc-opt:hover .gc-chip {
    border-color: var(--kw-buy-accent);
}

.gc-opt input:checked + .gc-chip {
    border-color: var(--kw-buy-accent);
    background: color-mix(in srgb, var(--kw-buy-accent) 10%, var(--bs-body-bg));
    color: var(--bs-emphasis-color);
    font-weight: 700;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kw-buy-accent) 18%, transparent);
}

/* تیک گوشه‌ی چیپ انتخاب‌شده (ماسک: رنگ تیک از currentColor و رنگ دایره از --kw-buy-accent) */
.gc-opt input:checked + .gc-chip::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--kw-buy-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.7 2.7L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* دسترسی‌پذیری با کیبورد */
.gc-opt input:focus-visible + .gc-chip {
    outline: 2px solid var(--kw-buy-accent);
    outline-offset: 2px;
}

.gc-swatch {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--bs-body-bg);
}

/* ---------- جدول (CSS Grid؛ ستون موجودی فقط وقتی تنظیم نمایش موجودی روشن است) ---------- */
.gc-table {
    --gc-cols: minmax(0, 3.4fr) minmax(0, 1.6fr) minmax(0, 1.5fr) minmax(0, 1.2fr);
    width: 100%;
    margin-top: 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    background: var(--bs-body-bg);
}

.gc-table.gc-has-stock {
    --gc-cols: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1.6fr) minmax(0, 1.2fr);
}

.gc-head,
.gc-row {
    display: grid;
    grid-template-columns: var(--gc-cols);
}

.gc-head .gc-c {
    padding: 10px 14px;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 12px;
    font-weight: 600;
}

.gc-row {
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    transition: background-color .15s;
}

.gc-row:last-child {
    border-bottom: 0;
}

.gc-row .gc-c {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    padding: 12px 14px;
}

/* سایز/مدل: عکس + نام + کد (خاکستری) */
.gc-row .gc-main {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.gc-thumb {
    flex: 0 0 56px;
    cursor: zoom-in;
    line-height: 0;
}

.gc-thumb img {
    width: 56px;
    max-width: 100%;
    height: 56px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    object-fit: contain;
}

.gc-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}

.gc-name-text {
    color: var(--bs-emphasis-color);
    font-weight: 700;
    line-height: 1.7;
}

.gc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    color: var(--bs-secondary-color);
    font-size: 12px;
}

.gc-info .badge {
    margin-top: 2px;
}

.gc-full {
    margin-inline-start: 6px;
    color: var(--bs-secondary-color);
}

/* دکمه‌ی ویرایش ادمین (فقط با هاور) */
.gc-edit {
    display: none;
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    padding: 4px 12px;
    border-radius: var(--bs-border-radius);
    background: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
    font-size: 12px;
    text-decoration: none;
    z-index: 2;
}

.gc-edit:hover {
    color: var(--bs-body-bg);
    opacity: .85;
}

.gc-row:hover .gc-edit {
    display: block;
}

/* موجودی */
.gc-stock-text {
    color: var(--bs-secondary-color);
}

/* قیمت واحد */
.gc-old {
    color: var(--bs-secondary-color);
    font-size: 12px;
    text-decoration: line-through;
}

.gc-now {
    color: var(--bs-secondary-color);
}

.gc-now-num {
    color: var(--bs-emphasis-color);
    font-size: 15px;
    font-weight: 700;
}

.gc-unit {
    font-size: 12px;
}

/* ردیفی که تخفیف تعدادی روی قیمتش اعمال شده (قیمت واحد جدید با رنگ خرید عمده) */
.gc-row.qd-tier-on .gc-now-num {
    color: var(--kw-bulk-color);
}

/* جدول پله‌ها داخل جدول گروهی (overflow:hidden دارد) درون ردیف باز می‌شود نه روی آن */
.gc-row .qd-box {
    width: 100%;
}

.gc-row .qd-pop {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 8px;
    box-shadow: none;
}

/* ستون قیمت باریک است: شرح پله‌ها می‌تواند بشکند و برچسب هرگز از ستون بیرون نمی‌زند */
.gc-row .qd-pop td {
    padding-inline: 6px;
    white-space: normal;
}

.gc-row .qd-badge {
    max-width: 100%;
    white-space: normal;
    text-align: start;
}

/* جمع ردیف */
.gc-sum-num {
    color: var(--bs-secondary-color);
}

.gc-row .gc-sum-num b {
    color: var(--bs-emphasis-color);
    font-size: 15px;
}

/* ردیف ناموجود/از رده خارج */
.gc-row.gc-off .gc-name-text,
.gc-row.gc-off .gc-now-num {
    color: var(--bs-secondary-color);
}

/* ردیف انتخاب‌شده (تعداد بیش از صفر) */
.gc-row.gc-picked {
    background: color-mix(in srgb, var(--kw-buy-accent) 9%, var(--bs-body-bg));
}

/* ردیفی که کالایش در سبد خرید است */
.gc-basket-flag {
    display: none;
}

.gc-row.gc-inbasket .gc-basket-flag {
    display: inline-block;
}

/* ---------- شمارنده: [−] [تعداد] [+] ---------- */
.gc-counter {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    overflow: hidden;
    transition: border-color .15s;
}

.gc-row.gc-picked .gc-counter {
    border-color: var(--kw-buy-accent);
}

/* پیام «حداکثر موجودی» داخل ردیف (به‌جای toast) */
.gc-limit {
    margin-top: 4px;
    color: var(--kw-limit-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
}

.gc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    cursor: pointer;
}

.gc-btn:hover:not(:disabled) {
    background: var(--bs-secondary-bg);
}

.gc-btn:focus-visible {
    outline: 2px solid var(--kw-buy-accent);
    outline-offset: -2px;
}

.gc-btn:disabled {
    color: var(--bs-secondary-color);
    opacity: .45;
    cursor: not-allowed;
}

/* سلکتور دو کلاسه عمدی است: قاعده‌های سراسری input[type=number] (text-align:left در style_preload.rtl.css)
   و input:focus (بوردر خاکستری در site.css) با specificity بیشتر از یک کلاس، عدد را چپ‌چین و بوردر را خراب می‌کردند */
.gc-counter .gc-count,
.gc-counter .gc-count:focus {
    width: 52px;
    height: 36px;
    padding: 0;
    border: 0;
    border-inline: 1px solid var(--bs-border-color);
    border-radius: 0;
    background: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}

.gc-row.gc-picked .gc-counter .gc-count,
.gc-row.gc-picked .gc-counter .gc-count:focus {
    border-inline-color: var(--kw-buy-accent);
}

.gc-counter .gc-count:focus-visible {
    outline: 2px solid var(--kw-buy-accent);
    outline-offset: -2px;
}

.gc-counter .gc-count:disabled {
    background: transparent;
    color: var(--bs-secondary-color);
}

.gc-count::-webkit-outer-spin-button,
.gc-count::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- «موجود شد به من اطلاع بده» ----------
   chaeckNofify کلاس btn-success و متن را می‌گذارد؛ ظاهر اینجا ثابت و خنثی می‌ماند (تنها دکمه‌ی پررنگ صفحه «افزودن به سبد» است).
   سلکتور با #gc-wrap قوی‌تر شده تا استایل عمومی .isnotifiTrue در site.css و رنگ هاور لینک‌ها بر آن غلبه نکند. */
#gc-wrap .gc-notify,
#gc-wrap .gc-notify.btn-success {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    max-width: 100%;
    margin-top: 6px;
    padding: .1em .75em;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: var(--kw-badge-font-size);
    font-weight: var(--kw-badge-font-weight);
    line-height: var(--kw-badge-line-height);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

#gc-wrap .gc-notify:hover,
#gc-wrap .gc-notify:focus,
#gc-wrap .gc-notify:active,
#gc-wrap .gc-notify.btn-success:hover,
#gc-wrap .gc-notify.btn-success:focus,
#gc-wrap .gc-notify.btn-success:active {
    border-color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
}

#gc-wrap .gc-notify:focus-visible {
    outline: 2px solid var(--bs-secondary-color);
    outline-offset: 2px;
}

/* زنگ با ماسک تا رنگش از currentColor (و در نتیجه از تم) بیاید */
#gc-wrap .gc-notify::before {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22zm7-6V11a7 7 0 0 0-5.5-6.84V3.5a1.5 1.5 0 0 0-3 0v.66A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22zm7-6V11a7 7 0 0 0-5.5-6.84V3.5a1.5 1.5 0 0 0-3 0v.66A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* حالت «اطلاع می‌دهیم» (کاربر قبلاً ثبت کرده): زمینه‌ی خنثی‌تر */
#gc-wrap .gc-notify.isnotifiTrue,
#gc-wrap .gc-notify.isnotifiTrue.btn-success {
    border-color: var(--bs-border-color);
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* ---------- بازه‌ی قیمت بالای صفحه: «از X الی Y تومان» (فقط در سبد خرید گروهی؛ به‌جای قیمت کارت خرید) ---------- */
.gc-pricerange {
    margin: 14px 0 6px;
    color: var(--bs-success);
    font-size: 22px;
    line-height: 1.7;
}

.gc-pricerange b {
    font-weight: 700;
}

.gc-pricerange .gc-pr-label {
    color: var(--bs-secondary-color);
    font-size: 15px;
}

.gc-pricerange .gc-pr-unit {
    color: var(--bs-secondary-color);
    font-size: 12px;
}

/* پیام «قیمت و موجودی بروز می‌باشد» بالای صفحه در حالت گروهی جمع‌وجورتر باشد (عرض ستون اطلاعات بیشتر شده) */
.gc-info-row .alert-success {
    max-width: 440px;
    padding: 8px 14px;
    font-size: 13px;
    margin-bottom: 10px;
}

.gc-info-row .RatingTextBox {
    margin: 10px 0 2px;
}

/* تب توضیحات: تصاویر کالا و زیرمجموعه‌ها زیر هم (مثل وب‌فرم قدیمی شهر یراق) */
.gc-desc-block {
    margin: 22px 0 28px;
}

.gc-desc-block h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}

.gc-desc-block picture,
.gc-desc-block img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 14px;
}

.gc-desc-block img {
    max-height: 640px;
    object-fit: contain;
}

/* ---------- نوار پایین: جمع‌ها + دکمه (چسبیده به پایین دید) ---------- */
.gc-total {
    position: sticky;
    bottom: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-body-bg);
    box-shadow: 0 -4px 14px color-mix(in srgb, var(--bs-emphasis-color) 12%, transparent);
}

.gc-total-box {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    min-width: 0;
}

.gc-summary {
    color: var(--bs-secondary-color);
}

.gc-summary b {
    color: var(--bs-emphasis-color);
}

.gc-sum {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.gc-sum-label {
    color: var(--bs-secondary-color);
    font-size: 12px;
}

.gc-sum-value {
    color: var(--bs-secondary-color);
    font-size: 12px;
}

.gc-sum-value b {
    color: var(--bs-emphasis-color);
    font-size: 15px;
}

.gc-sum-total .gc-sum-value b {
    font-size: 22px;
}

/* برچسب «جمع مبلغ پرداختی» فقط وقتی جمع‌های جزئی (اصلی/اجباری/اختیاری) هم دیده می‌شوند لازم است؛ در غیر این‌صورت فقط برای صفحه‌خوان */
.gc-total:not(.gc-has-extra) .gc-sum-total .gc-sum-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* دکمه‌ی افزودن: .btn بوت‌استرپ با متغیرهای خودش (طبق مستندات)؛ رنگ از توکن --kw-buy-accent */
.btn.gc-addall {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .55rem;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--kw-buy-accent);
    --bs-btn-border-color: var(--kw-buy-accent);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kw-buy-accent) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--kw-buy-accent) 85%, #000);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--kw-buy-accent) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--kw-buy-accent) 75%, #000);
    --bs-btn-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--kw-buy-accent) 35%, transparent);
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-inline-start: auto;
    line-height: 1.7;
}

/* ---------- موبایل (زیر ۶۸۰px): هر ردیف یک کارت ---------- */
@media (max-width: 679.98px) {
    .gc-head {
        display: none;
    }

    .gc-table,
    .gc-table.gc-has-stock {
        --gc-cols: minmax(0, 1fr) minmax(0, 1fr);
    }

    .gc-row .gc-c {
        padding: 6px 14px;
    }

    /* ردیف ۱: عکس و نام؛ ردیف ۲: قیمت و شمارنده؛ ردیف ۳: موجودی و جمع */
    .gc-row .gc-main {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-top: 14px;
    }

    .gc-row .gc-price {
        grid-column: 1;
        grid-row: 2;
    }

    .gc-row .gc-qty {
        grid-column: 2;
        grid-row: 2;
        align-items: flex-end;
    }

    .gc-row .gc-stock {
        grid-column: 1;
        grid-row: 3;
        padding-bottom: 14px;
    }

    .gc-row .gc-sum {
        grid-column: 2;
        grid-row: 3;
        align-items: flex-end;
        padding-bottom: 14px;
    }

    .gc-table:not(.gc-has-stock) .gc-row .gc-sum {
        grid-column: 1 / -1;
    }

    /* روی موبایل هاور نداریم؛ دکمه‌ی ویرایش ادمین همیشه دیده شود (کوچک و کم‌رنگ تا جای نام را نگیرد) */
    .gc-edit {
        display: inline-block;
        position: static;
        margin-bottom: 2px;
        padding: 0 8px;
        border: 1px solid var(--bs-border-color);
        background: transparent;
        color: var(--bs-secondary-color);
        font-size: 11px;
        line-height: 1.8;
    }

    .gc-edit:hover {
        background: var(--bs-secondary-bg);
        color: var(--bs-body-color);
        opacity: 1;
    }

    .gc-total {
        padding: 10px 12px;
    }

    .btn.gc-addall {
        justify-content: center;
        width: 100%;
        margin-inline-start: 0;
    }
}

/* گوشی‌های عمودی (تا ۴۷۹px، مثل ۳۲۰/۳۶۰/۳۹۰/۴۱۲/۴۳۰): هر نیم‌ستون حدود ۱۳۰ تا ۱۸۰px جا دارد و برچسب «تا X با خرید عمده»
   (حدود ۱۶۰px) و جدول پله‌ها کنار شمارنده جا نمی‌شوند یا می‌شکنند؛ پس قیمت و تعداد هر کدام یک ردیف تمام‌عرض می‌گیرند.
   از ۴۸۰px به بالا کنار هم می‌مانند (مثل mockup) */
@media (max-width: 479.98px) {
    .gc-row .gc-price {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .gc-row .gc-qty {
        grid-column: 1 / -1;
        grid-row: 3;
        align-items: flex-start;
    }

    .gc-row .gc-stock,
    .gc-row .gc-sum {
        grid-row: 4;
    }
}