/* ============================================
   Product Detail Page
   ============================================ */

/* ---- Hero Image ---- */
.pd-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 5/4;
    overflow: hidden;
    /* background: var(--color-bg-glass); */
}

/* ─── Placeholder hero — when the product has no images ──────────────
   Renders in place of the photo carousel so a text-only menu doesn't
   feel "unfinished". Shorter aspect (5:2) than a real photo (5:4) so
   the actual product card gets primary screen real estate.

   Layered visual:
     1. Multi-stop gradient using --color-primary + --color-secondary so
        each tenant looks like its own brand (not a stock template).
     2. Two large blurred "color blob" radial gradients overlay for an
        organic mesh-gradient effect — keeps it from looking like a flat
        diagonal stripe.
     3. Optional category icon watermark in the centre, low opacity, so
        the customer reads it as "this is a Pasta & Tatlı item" before
        even glancing at the breadcrumb.

   Header bar (with business logo) sits directly above this hero — by
   design we DON'T put the logo here too. The category icon avoids the
   "two logos stacked" amateur look.
   ─────────────────────────────────────────────────────────────────── */
.pd-hero--placeholder {
    /* Placeholder hero (no product image) is shorter than the photo
       hero — a tall gradient block above plain text feels like dead
       space, so we trim it down to 6/2. */
    aspect-ratio: 6/2;
    background:
        radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--color-primary) 65%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 70%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary, var(--color-primary)) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-hero__watermark {
    width: 38%;
    max-width: 220px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0.18;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
    pointer-events: none;
}
.pd-hero__watermark > svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
}

/* Emoji / single-character fallback when the category has no SVG icon
   but does have a text icon (often an emoji like 🍰). */
.pd-hero__watermark--text {
    font-size: clamp(56px, 14vw, 140px);
    line-height: 1;
    opacity: 0.28;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}

/* Light theme: tone watermark down a touch — fully white can look
   washed against lighter brand gradients. */
body.theme-light .pd-hero__watermark {
    color: rgba(255, 255, 255, 0.95);
    opacity: 0.22;
}

.pd-hero__carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.pd-hero__track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pd-hero__track::-webkit-scrollbar { display: none; }

.pd-hero__slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
}

.pd-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-hero__dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}

.pd-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.pd-hero__dot--active {
    background: #fff;
    width: 20px;
    border-radius: 4px;
}

/* ---- Detail Card ---- */
.pd-card {
    position: relative;
    z-index: 3;
    margin: var(--space-lg) var(--space-md) 0;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    background: var(--color-bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.pd-card--overlap {
    margin-top: -28px;
}

body.theme-light .pd-card {
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0px -20px 24px rgba(0, 0, 0, 0.06);
}

body:not(.theme-light) .pd-card {
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}

/* ---- Breadcrumb ----
   Horizontal-scroll behaviour: long breadcrumb chains (deep group
   → category → product) used to wrap into 2-3 ugly lines on narrow
   viewports. Now they scroll horizontally as a single line — matches
   how mobile users already expect to interact with overflowing
   navigation chrome (Twitter, app store breadcrumbs, etc.). The
   scrollbar is hidden visually but the area is keyboard/touch
   scrollable, and scroll-snap nudges each segment into a comfortable
   resting position.

   Edge fade hints there's more content off-screen without adding
   visual noise (a shadow that masks itself when the scroll reaches
   either end). */
.pd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-md);
    font-size: 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge legacy */
    /* Negative inline margin + padding lets the scroll edge bleed past
       the parent padding so links flush to the visible edge when scrolled. */
    margin-left: calc(var(--space-md) * -1);
    margin-right: calc(var(--space-md) * -1);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    /* Subtle fade on both sides when content overflows. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.pd-breadcrumb::-webkit-scrollbar {
    display: none;                    /* Chromium/Safari */
}

.pd-breadcrumb__link {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s;
    flex: none;                       /* never shrink — keeps each crumb on its own */
    white-space: nowrap;
    scroll-snap-align: start;
}

.pd-breadcrumb__link:last-child {
    color: var(--color-primary);
    font-weight: 500;
}

.pd-breadcrumb__sep {
    color: var(--color-text-muted);
    opacity: 0.5;
    font-size: 10px;
    flex: none;
}

/* ---- Head: Name + Price ---- */
.pd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.pd-head__name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
    flex: 1;
}

/* ---- Price Badge ---- */
.pd-price-badge {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--color-primary);
    color: var(--color-bg);
    font-size: var(--text-lg);
    font-weight: 800;
    border-radius: 12px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---- Variant Prices ---- */
.pd-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-md);
}

.pd-variant {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
}

body.theme-light .pd-variant {
    background: #f9f9f9;
}

body:not(.theme-light) .pd-variant {
    background: var(--color-bg-glass);
}

.pd-variant__label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.pd-variant__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
}

/* ---- Feature Badges ---- */
.pd-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-md);
}

.pd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pd-badge svg { flex-shrink: 0; }

.pd-badge--new {
    background: #ecfdf5;
    color: #059669;
}
body:not(.theme-light) .pd-badge--new {
    background: rgba(5, 150, 105, 0.15);
}

.pd-badge--popular {
    background: #fff7ed;
    color: #ea580c;
}
body:not(.theme-light) .pd-badge--popular {
    background: rgba(234, 88, 12, 0.15);
}

.pd-badge--chef {
    background: rgba(200, 169, 126, 0.12);
    color: var(--color-primary);
}

.pd-badge--veg {
    background: #ecfdf5;
    color: #16a34a;
}
body:not(.theme-light) .pd-badge--veg {
    background: rgba(22, 163, 74, 0.15);
}

.pd-badge--gf {
    background: #f0fdf4;
    color: #15803d;
}
body:not(.theme-light) .pd-badge--gf {
    background: rgba(21, 128, 61, 0.12);
}

/* Sugar Free — sky-blue tone, distinct from gluten-free's green so
   the two health markers don't visually merge when both appear. */
.pd-badge--sf {
    background: #eff6ff;
    color: #1d4ed8;
}
body:not(.theme-light) .pd-badge--sf {
    background: rgba(29, 78, 216, 0.15);
}

.pd-badge--spicy {
    background: #fef2f2;
    color: #dc2626;
}
body:not(.theme-light) .pd-badge--spicy {
    background: rgba(220, 38, 38, 0.15);
}

/* Product code: monospace + neutral tone, reads like a SKU. */
.pd-badge--code {
    background: #f1f5f9;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}
body:not(.theme-light) .pd-badge--code {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

/* Garsona Göster — looks like a chip but acts like a button.
   Brand-tinted to invite the tap; cursor + hover states distinguish it
   from the read-only chips above. */
.pd-badge--waiter {
    background: #fdf8f0;
    color: #8a6f47;
    border: 1px solid #f0d5a8;
    cursor: pointer;
    transition: background 150ms ease, transform 100ms ease;
}
.pd-badge--waiter:hover {
    background: #f9ecd8;
    transform: translateY(-1px);
}
body:not(.theme-light) .pd-badge--waiter {
    background: rgba(200, 169, 126, 0.15);
    color: #e4b872;
    border-color: rgba(200, 169, 126, 0.35);
}

/* Garsona Göster modal — centered card on a dim backdrop. */
.waiter-help-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}
.waiter-help-backdrop[hidden] { display: none; }
.waiter-help-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.waiter-help-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #ffffff;
    color: #0f172a;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35), 0 8px 24px rgba(15, 23, 42, 0.12);
    transform: translateY(8px);
    transition: transform 240ms ease;
}
.waiter-help-backdrop.is-open .waiter-help-card {
    transform: translateY(0);
}

.waiter-help-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 150ms ease;
}
.waiter-help-close:hover {
    background: #ffffff;
    color: #0f172a;
}

.waiter-help-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f5f9;
}
.waiter-help-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.waiter-help-body {
    padding: 20px 22px 22px;
}

.waiter-help-section {
    padding: 4px 0;
}
.waiter-help-section--default {
    color: #475569;
}

.waiter-help-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.waiter-help-flag { font-size: 14px; }
.waiter-help-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.waiter-help-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.waiter-help-section--default .waiter-help-name {
    font-size: 16px;
    color: #334155;
}

.waiter-help-desc {
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
    color: #475569;
}
.waiter-help-section--default .waiter-help-desc {
    color: #64748b;
}

.waiter-help-divider {
    border: none;
    border-top: 1px dashed #e2e8f0;
    margin: 14px 0;
}

.waiter-help-code-row {
    margin-top: 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.waiter-help-code-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.waiter-help-code-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 16px;
    color: #0f172a;
    letter-spacing: 0.04em;
}

@media (max-width: 480px) {
    .waiter-help-backdrop { padding: 12px; }
    .waiter-help-name { font-size: 17px; }
    .waiter-help-section--default .waiter-help-name { font-size: 15px; }
}

/* ---- Description (rich HTML via Quill, sanitized) ---- */
.pd-desc {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}
/* Tame nested block elements so the description reads as one fluid
   block. First/last children flush with the container; inner spacing
   is enough that bullets + paragraphs feel intentional. */
.pd-desc > :first-child { margin-top: 0; }
.pd-desc > :last-child  { margin-bottom: 0; }
.pd-desc p { margin: 0 0 0.6em; }
.pd-desc ul, .pd-desc ol { margin: 0 0 0.6em; padding-left: 1.4em; }
.pd-desc li { margin-bottom: 0.2em; }
.pd-desc strong { font-weight: 600; color: var(--color-text-primary, #1f2937); }
.pd-desc a { color: var(--color-primary); text-decoration: underline; }

/* ---- Meta (Calories, Prep) ---- */
.pd-meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.pd-meta__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.pd-meta__item svg {
    opacity: 0.5;
}

/* ---- Allergens ---- */
.pd-allergens {
    margin-bottom: var(--space-md);
}

.pd-allergens__title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
}

.pd-allergens__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pd-allergen {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 4px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

body.theme-light .pd-allergen {
    background: #f5f5f5;
}

body:not(.theme-light) .pd-allergen {
    background: var(--color-bg-glass);
}

.pd-allergen img {
    width: 14px;
    height: 14px;
}

/* ---- Similar Products ---- */
.pd-similar {
    padding: var(--space-lg) 0;
    overflow: hidden;
}

.pd-similar__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    padding: 0 var(--space-md) var(--space-md);
}

.pd-similar__scroll {
    display: flex;
    gap: var(--space-md);
    /* Leading 16px only — aligns the first card with the section title
       (which also sits at --space-md) for design coherence. No trailing
       padding so the last visible card bleeds off the right edge, hinting
       "there's more". */
    padding: 0 0 0 var(--space-md);
    overflow-x: auto;
    /* No scroll-snap here. Snapping — mandatory OR proximity — aligns the
       first card to the snapport edge and cancels the 16px padding inset
       (the browser scrolls past the padding to reach the snap point).
       Free scroll is the only way to get "16px at rest, 0 once scrolled",
       and it's the right feel for a small thumbnail carousel anyway. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Start hidden, animate on scroll */
    transform: translateX(80px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.8s ease;
}

.pd-similar__scroll.is-visible {
    transform: translateX(0);
    opacity: 1;
}

.pd-similar__scroll::-webkit-scrollbar { display: none; }

.pd-similar__card {
    flex-shrink: 0;
    width: 130px;
    text-decoration: none;
    color: inherit;
}

.pd-similar__img {
    width: 130px;
    height: 130px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-glass);
    margin-bottom: 6px;
}

.pd-similar__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Designed fallback for a carousel card whose product has no photo.
   Keeps every carousel card the same height and reads as intentional —
   a soft tinted tile carrying the section (category) icon as a
   watermark, not an empty grey box. Theme-aware via the glass tokens. */
.pd-similar__img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-bg-card-hover), var(--color-bg-glass));
    color: var(--color-text-muted);
}

/* The icon sits at 0.3 — present as a watermark, not loud. Opacity is
   applied to the icon only so the tinted tile keeps its full tone. */
.pd-similar__img-fallback > svg,
.pd-similar__img-fallback-text {
    opacity: 0.3;
}
.pd-similar__img-fallback > svg {
    width: 56px;
    height: 56px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
}
.pd-similar__img-fallback-text {
    font-size: 44px;
    line-height: 1;
}

.pd-similar__name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-similar__price {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 2px;
    display: block;
}

/* ─── List layout variant ────────────────────────────────────────────
   Switches the carousel into vertical rows. Each card spans the full
   width, image (when present) sits left, name + price stack right.
   Designed to read cleanly even when images are disabled (--no-img).
   ─────────────────────────────────────────────────────────────────── */
.pd-similar--list .pd-similar__scroll {
    flex-direction: column;
    /* List mode is a vertical stack of independent cards — symmetric
       16px gutters and an 8px gap between cards (no more shared
       hairline separators). Each row gets its own surface below. */
    gap: var(--space-sm);
    overflow: visible;
    padding: 0 var(--space-md);
}
.pd-similar--list .pd-similar__card {
    /* Each row is now a self-contained card (image | content | price)
       with its own surface, border, and a touch of elevation — replaces
       the older plain hairline-separated rows that read as a text dump. */
    display: flex;
    width: 100%;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
}
.pd-similar--list .pd-similar__card:active {
    background: var(--color-bg-card-hover);
}
.pd-similar--list .pd-similar__img {
    width: 60px;
    height: 60px;
    flex: none;
    margin: 0;
    border-radius: var(--radius-md);
}
/* The content column — name on top, optional subtitle below. Flex:1
   lets it grow so the price stays right-aligned; min-width:0 lets the
   nested name/sub truncate cleanly when the row is narrow. */
.pd-similar--list .pd-similar__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pd-similar--list .pd-similar__name {
    margin: 0;
    text-align: left;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    /* A touch bolder + larger than the carousel default so the row
       carries the visual weight a card surface deserves. */
    font-size: 14px;
    font-weight: 600;
}
/* Subtitle line — region tag ("URLA/TÜRKİYE") or a short ingredient
   string lifted from the description. Italic + muted so it reads as
   secondary info, ellipsised to a single line. */
.pd-similar--list .pd-similar__sub {
    font-size: 12px;
    color: var(--color-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.pd-similar--list .pd-similar__price {
    margin-top: 0;
    flex: none;
    /* Match the bolder name with a slightly heavier price — the card
       surface lets us afford the visual weight. */
    font-size: 14px;
    font-weight: 700;
}
/* Variant range price — a touch smaller + italic so "1.150 – 3.500₺"
   visibly reads as a range, not a single number. Without this the
   wider text would muddle the right-aligned column. */
.pd-similar__price--range {
    font-size: 0.92em;
    font-style: italic;
    white-space: nowrap;
}

/* ─── No-image variant ────────────────────────────────────────────── */
/* Carousel mode without images: cards collapse to text-only chips. */
.pd-similar--no-img.pd-similar--carousel .pd-similar__card {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}
/* No image-slot override needed for list mode anymore — the card has
   its own padding regardless of whether the image cell is rendered. */

body.theme-light .pd-similar--list .pd-similar__card {
    /* Pure white card on the page's off-white background, with a
       hairline border and a whisper of shadow for elevation. Matches
       the "card surface" feel the operator's reference design uses. */
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
body.theme-light .pd-similar--no-img.pd-similar--carousel .pd-similar__card {
    background: rgba(0, 0, 0, 0.03);
}

/* ─── Search featured: drop placeholder when no-img mode ─────────── */
.search-featured--no-img .search-featured__item {
    grid-template-columns: 1fr;
}

/* ─── Live search results: tighter row when no image slot ────────── */
.product-card--no-img {
    grid-template-columns: 1fr auto !important;
}