/*
 * Beelivery 2026 design: tobacco on the order page. Tobacco is listed as TEXT ONLY (UK display rule):
 * MerchandiseGridRenderer renders no product photo for it, only the tobacco icon (an ID card), and the
 * aisle gets the age / display / quit-support notice. Loaded after every legacy order stylesheet
 * (OrderLegacyStyles), so these rules win without touching the IDs/classes beelivery.order.js uses.
 * The values were checked visually against the same legacy stylesheets (order.min.css, order.css,
 * beeliveryorderproducts.css): the !importants override their tile sizing, clamp and positioning.
 */

/* ---------- Tobacco: notice panels (rendered once above the first tobacco section) ---------- */
.bz-tob-notice {
    font-family: var(--bz-font, 'Open Sans', system-ui, sans-serif);
    color: #1F1A17;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 8px 0 20px;
    clear: both;
}
.bz-tob-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.bz-tob-panel {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #F0E8E1;
    font-size: 14px;
    line-height: 1.45;
    color: #5E5550;
}
.bz-tob-panel > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.bz-tob-panel strong { color: #1F1A17; font-size: 15px; font-weight: 800; }
.bz-tob-panel a { color: #1F1A17; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bz-tob-panel-icon { flex: none; width: 36px; height: 36px; display: block; }
.bz-tob-badge, .bz-tob-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
}
.bz-tob-badge { background: #1F1A17; color: #fff; }
.bz-tob-icon { background: #FFE6D2; color: #C24E00; }
.bz-tob-warning {
    margin: 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: #1F1A17;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

/* ---------- Tobacco: products as text-only rows (no <img> is rendered for them) ---------- */
.product_container:has(> .bz-tob-card) {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid #F0E8E1;
    border-radius: 18px;
    overflow: hidden;
}
.product_box_Small_container.bz-tob-card {
    float: none !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #F0E8E1;
    background: #fff;
    font-family: var(--bz-font, 'Open Sans', system-ui, sans-serif);
}
.product_box_Small_container.bz-tob-card:last-child { border-bottom: 0; }
.bz-tob-card .product_box_Small {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    overflow: visible !important; /* legacy overflow:hidden clipped the first glyph */
}
/* The image cell holds the tobacco icon and the favourites button. display:contents lets both take
   part in the row's flex layout directly: the icon first, the favourites heart at the end. */
.bz-tob-card .product_image_div {
    order: 0;
    display: contents !important;
    align-items: center;
    gap: 6px;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}
.bz-tob-card .product_badges { display: none; }
.bz-tob-row-icon { order: 0; width: 40px !important; height: 40px !important; flex: none; display: block; }
/* The favourites heart normally sits over the photo (absolute, top-left); in a text row it goes at the end. */
.bz-tob-card .openProductListsButtonContainer { position: static !important; display: flex; align-items: center; order: 9; }
.bz-tob-card .prod150Text {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 13px;
    line-height: 1.4;
    color: #5E5550;
    overflow: visible !important;
}
/* The legacy 4-line clamp (display:-webkit-box + overflow:hidden) clips bold glyphs; rows don't need it. */
.bz-tob-card .product_name_small { text-align: left !important; display: block !important; overflow: visible !important; -webkit-line-clamp: unset; line-clamp: unset; min-height: 0 !important; margin-bottom: 2px; }
.bz-tob-card .product_name_small, .bz-tob-card .product_name_small a {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1F1A17 !important;
    white-space: normal !important;
    height: auto !important;
    text-decoration: none;
}
.bz-tob-card .prod150Price {
    order: 2;
    flex: none;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1F1A17 !important;
    white-space: nowrap;
    text-align: right !important;
    position: static !important;
}
.bz-tob-card .product-button-container {
    flex: none;
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    margin: 0 !important;
}
.bz-tob-card .product-unavailable-container { flex-basis: 100%; font-size: 13px; }

@media (max-width: 560px) {
    /* One line per item on phones too: icon, name (wraps if long), price, ADD. */
    .product_box_Small_container.bz-tob-card { padding: 10px 12px; gap: 8px; }
    .bz-tob-card .product_box_Small { gap: 10px; }
    .bz-tob-row-icon { width: 32px !important; height: 32px !important; }
}

/* Product page: the icon stands in for the photo. */
.large-prod-image.bz-tob-large {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    max-width: 350px;
    border-radius: 18px;
    background: #FFF7F2;
    border: 1px solid #F0E8E1;
}
.large-prod-image.bz-tob-large img { width: 96px; height: 96px; }