/* Sprint A — minimalist product card with hover-image swap (msofas pattern).
   Loaded after PS theme.css via head.tpl injection (cache-bust ?v={$smarty.now}).
   Scope: every .product-miniature globally — listing, search, Featured/New
   carousels, related products. Card style MUST stay consistent everywhere. */

.product-miniature {
    width: 100%;
}

.product-miniature .left-product {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

/* Aspect-ratio box keeps cards uniform height even with mixed-aspect product
   photography. 4:3 = ~20% taller than original 380×225 (16:9) source — gets
   the "20% larger" the brief asked for via taller crop instead of zoom. */
.product-miniature .left-product a.thumbnail.product-thumbnail {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
}

.product-miniature .left-product .cover_image,
.product-miniature .left-product .hover_image {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.product-miniature .left-product .cover_image img,
.product-miniature .left-product .hover_image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    display: block;
    /* PrestaShop's image regeneration uses PS_IMAGE_GENERATION_METHOD=0 (AUTO)
       which adds white pillarbox padding when source aspect doesn't match the
       target home_default (380×225, ~1.69:1). Most source photos are squarer
       (e.g. 4:3 or 1:1), so PS bakes in ~9% white margins on left/right.
       transform: scale(1.18) crops that pillarbox out edge-to-edge.
       Trade-off: minor zoom on photos that already fit the 1.69:1 ratio.
       Permanent fix would be regenerating images with method=1 (width-fit). */
    transform: scale(1.18);
    transform-origin: center;
}

.product-miniature .left-product .hover_image {
    opacity: 0;
    /* !important needed: theme field_style.css declares the same selector
       at equal specificity later in source order with 0.15s ease-in-out,
       which won the cascade tie and made the hover feel snappy/jerky. */
    transition: opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1) !important;
    pointer-events: none;
}

.product-miniature:hover .left-product .hover_image {
    opacity: 1;
}
/* No scale change on hover — only opacity transition. Keeps card geometry
   stable so adjacent layout never shifts during hover. */

/* Kill dark overlay-on-hover used by horizontal_mode and similar */
.product-miniature .left-product a.thumbnail:before,
.horizontal_mode .item-inner .left-product a.thumbnail:before,
.item-product-list .left-product a.thumbnail:before {
    display: none !important;
}

/* Hide grid overlay buttons (quick view, add to cart) — msofas pattern: enter PDP to act */
.product-miniature .button-action,
.product-miniature .quick-view-product-full,
.product-miniature .add-to-cart-product-full {
    display: none !important;
}

/* Card frame — flat, no border/shadow per minimalist brief */
.item .item-inner {
    background: transparent;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 32px;
}

/* Listing grid breakpoints — category/listing pages.
   <520→1 col, 520-767→2 cols, ≥768→3 cols.
   Sprint p9: dropped the 4-col rule at ≥1200 in favour of a 3-col grid
   per msofas reference (wider product photos read better on category
   pages; the homepage carousels keep their own 4-up at ≥1200). */
@media (max-width: 519px) {
    #products #box-product-grid .row > .item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}
@media (min-width: 520px) and (max-width: 767px) {
    #products #box-product-grid .row > .item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}
@media (min-width: 768px) {
    #products #box-product-grid .row > .item {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* Ensure the row is a flex container for percentages to work cleanly */
#products #box-product-grid .row {
    display: flex;
    flex-wrap: wrap;
}

/* Product info column — left-aligned title + price per feedback */
.product-miniature .right-product {
    padding: 16px 4px 8px;
    text-align: left !important;
    margin-top: 0;
}

.product-miniature .right-product .product_name {
    margin-bottom: 8px;
    text-align: left !important;
    display: block;
}

.product-miniature .right-product .product_name a {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    text-align: left;
    transition: color 0.2s ease;
}

.product-miniature .right-product .product_name a:hover,
.product-miniature .right-product .product_name a:focus-visible {
    /* WCAG AA: #6FA72F on #fff = 2.90:1 fails for normal text. Use
       underline as the hover affordance instead of color-only change. */
    color: #1a1a1a;
    text-decoration: underline;
    text-decoration-color: #6FA72F;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Brand-aligned focus ring on every interactive element inside cards */
.product-miniature a:focus-visible {
    outline: 2px solid #6FA72F;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Price block — flex layout, left-aligned, sale price in #c31818 red */
.product-miniature .right-product .product-price-and-shipping {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    text-align: left !important;
    font-weight: normal;
}

.product-miniature .right-product .cash-promo-price-list {
    font-size: 17px;
    font-weight: 700;
    color: #c31818;
    order: 1;
    text-align: left;
}

/* ESBfurniture-only line-through GBP*1.6 (existing logic in tpl) — RRP-style strikethrough */
.product-miniature .right-product .price {
    order: 2;
    font-size: 14px;
    color: #737373;
    line-height: 1.4;
    text-align: left;
}

.product-miniature .right-product .price span {
    color: #737373;
}

/* PS native discount: regular_price + percent badge */
.product-miniature .right-product .regular-price {
    order: 2;
    color: #737373;
    font-size: 14px;
    text-decoration: line-through;
    font-weight: normal;
}

.product-miniature .right-product .price-percent-reduction,
.product-miniature .right-product .discount-percentage,
.product-miniature .right-product .discount-percentage-product {
    order: 3;
    background: #c31818;
    color: #fff;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 2px;
    line-height: 1.5;
    display: inline-block;
}

/* New / Sale flags */
.conditions-box {
    z-index: 3;
}

.conditions-box .new_product,
.conditions-box .sale_product {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding: 4px 9px;
    line-height: 1.6;
    border-radius: 0;
    background: #1a1a1a;
    color: #fff;
    display: inline-block;
}

.conditions-box .sale_product {
    background: #c31818;
}

/* Countdown timer — keep but de-emphasize */
.product-miniature .item-countdown {
    font-size: 11px;
}

/* Mobile tighter typography (single-column zone, <520px) */
@media (max-width: 519px) {
    .product-miniature .right-product .product_name a {
        font-size: 14px;
    }
    .product-miniature .right-product .cash-promo-price-list {
        font-size: 16px;
    }
    .item .item-inner {
        margin-bottom: 24px;
    }
}

/* Featured / New carousels — make sure left/center alignment of carousel
   wrappers doesn't override our left-aligned product info */
#featured_products .right-product,
#new_products .right-product,
#featured_products .right-product .product_name,
#new_products .right-product .product_name,
#featured_products .right-product .product-price-and-shipping,
#new_products .right-product .product-price-and-shipping {
    text-align: left !important;
}

/* ============================================================
   Section blocks — Featured Products / New Products
   Real container IDs: #featured_products_block, #field_newproductslider_block
   ============================================================ */

#featured_products_block,
#field_newproductslider_block {
    position: relative;
}

/* Section title left-aligned, 32px, no border, with green underline accent */
#featured_products_block .title_block,
#field_newproductslider_block .title_block {
    text-align: left !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a !important;
    border: none !important;
    margin-bottom: 28px !important;
    padding-bottom: 0 !important;
    position: relative;
}

/* Slightly smaller on mobile for readability without scaling other parts */
@media (max-width: 519px) {
    #featured_products_block .title_block,
    #field_newproductslider_block .title_block {
        font-size: 24px !important;
    }
}

#featured_products_block .title_block::before,
#field_newproductslider_block .title_block::before {
    display: none !important;
}

#featured_products_block .title_block::after,
#field_newproductslider_block .title_block::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: #6FA72F;
    margin-top: 10px;
}

/* Section spacing aligned with grid breakpoints (520/768/1200):
   <768  → 36px 16px (tighter on mobile/small tablet)
   ≥768  → 60px 30px (desktop & up). */
@media (min-width: 768px) {
    #featured_products_block,
    #field_newproductslider_block {
        padding: 60px 30px !important;
    }
}
@media (max-width: 767px) {
    #featured_products_block,
    #field_newproductslider_block {
        padding: 36px 16px !important;
    }
}

/* Owl Carousel — hide nav arrows entirely (per feedback), keep only dots */
#featured_products_block .owl-controls .owl-buttons,
#featured_products_block .owl-buttons,
#field_newproductslider_block .owl-controls .owl-buttons,
#field_newproductslider_block .owl-buttons {
    display: none !important;
}

/* Carousel fills its block container — overrides theme's
   field_style.css:963 `.owl-carousel { width: 95%; margin: 0 auto }` which
   auto-centers each carousel and shifts items ~35px inward from block edge.
   With width:100% margin:0, the first item left edge sits flush with the
   block edge → naturally aligns with the section title (no JS needed). */
#featured_products,
#new_products {
    width: 100% !important;
    margin: 0 !important;
}

/* Theme's `.row` inside the block adds 5px padding/margin that also pushes
   content inward. Reset for our two carousel rows so items start at X=0. */
#featured_products_block > .row,
#field_newproductslider_block > .row {
    margin: 0 !important;
    padding: 0 !important;
}

/* Item gap — flush layout (msofas-style), no horizontal padding. Vertical
   bottom margin keeps spacing from the pagination dots row. */
#featured_products .item .item-inner,
#new_products .item .item-inner {
    padding: 0 !important;
    margin-bottom: 12px !important;
}

/* Owl pagination dots — green active state to match brand */
#featured_products_block .owl-pagination,
#field_newproductslider_block .owl-pagination {
    text-align: center;
    margin-top: 8px;
}

#featured_products_block .owl-pagination .owl-page span,
#field_newproductslider_block .owl-pagination .owl-page span {
    background: #d0d0d0;
    width: 9px;
    height: 9px;
    margin: 0 4px;
    transition: background 0.2s ease;
    opacity: 1;
}
#featured_products_block .owl-pagination .owl-page.active span,
#field_newproductslider_block .owl-pagination .owl-page.active span {
    background: #6FA72F;
}

/* ============================================================
   Sprint B — ESB Featured Categories (homepage carousel of square tiles).
   msofas.pl pattern: square photo + category name typeset BELOW the image.
   Same Owl carousel mechanics as Featured/New product sliders so behaviour
   is consistent across the homepage (paged scroll, dot pagination, no
   half-empty trailing slides, scrollbar-safe breakpoints).
   ============================================================ */

/* ============================================================
   Sprint p7e — Uniform homepage container width.
   displayHome blocks (USP, Gallery, Collections) render OUTSIDE
   theme's `#wrapper > .container`, so they need their own width
   cap to align with Featured/Bestsellers (which inherit .container
   from layout-both-columns.tpl).
   Mirror Bootstrap container breakpoints from theme.css:761-796 +
   field_style.css 1800px override @ ≥1200px so blocks share one
   column at every breakpoint.
   ============================================================ */
/* esbabout intentionally NOT in this list — it renders via blockPosition3
   inside `<section id="content"><DIV class="container">`, so it inherits
   the .container width naturally. Adding margin/max-width here would
   double the 15px container gutter on mobile (block ends up L=30, not L=15). */
#esbusp_block,
#esbgallery_block,
#esbfc_block {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* <544px: theme renders Featured/Bestsellers inside .container with
   15px L/R padding, so emulate the same gutter for displayHome blocks
   instead of going edge-to-edge. */
@media (max-width: 543px) {
    #esbusp_block, #esbgallery_block, #esbfc_block {
        margin-left: 15px;
        margin-right: 15px;
    }
}
@media (min-width: 544px) {
    #esbusp_block, #esbgallery_block, #esbfc_block { max-width: 576px; }
}
@media (min-width: 768px) {
    #esbusp_block, #esbgallery_block, #esbfc_block { max-width: 720px; }
}
@media (min-width: 992px) {
    #esbusp_block, #esbgallery_block, #esbfc_block { max-width: 940px; }
}
@media (min-width: 1200px) {
    #esbusp_block, #esbgallery_block, #esbfc_block { max-width: 1800px; }
}

#esbfc_block {
    position: relative;
    padding: 60px 30px;
    background: #fff;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    #esbfc_block {
        padding: 36px 16px;
    }
}

#esbfc_block .esbfc-title {
    text-align: left;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    border: none;
    margin: 0 0 28px 0;
    padding: 0;
}

#esbfc_block .esbfc-title::before {
    display: none;
}

#esbfc_block .esbfc-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: #6FA72F;
    margin-top: 10px;
}

@media (max-width: 519px) {
    #esbfc_block .esbfc-title {
        font-size: 24px;
    }
}

/* Carousel container — anchored for absolute children; align with title */
#esbfc_block #esbfc_carousel {
    width: 100% !important;
    margin: 0 !important;
}

#esbfc_block > .row {
    margin: 0 !important;
    padding: 0 !important;
}

/* Theme field_style.css:996 caps every .owl-item at max-width 416px which
   breaks 4-up layouts on wide screens (4 visible + partial 5th peeking).
   Drop the cap for our three carousels so Owl's computed width wins. */
#esbfc_block .owl-item,
#featured_products .owl-item,
#new_products .owl-item {
    max-width: none !important;
}

/* Gap between tiles (msofas-style breathing room) — 12px each side =
   24px visible gap between adjacent tile content. */
#esbfc_block .item .item-inner {
    padding: 0 12px !important;
    margin-bottom: 12px;
}

/* Hide arrows; keep dot pagination only — same convention as Featured/New */
#esbfc_block .owl-controls .owl-buttons,
#esbfc_block .owl-buttons {
    display: none !important;
}

#esbfc_block .owl-pagination {
    text-align: center;
    margin-top: 8px;
}

#esbfc_block .owl-pagination .owl-page span {
    background: #d0d0d0;
    width: 9px;
    height: 9px;
    margin: 0 4px;
    transition: background 0.2s ease;
    opacity: 1;
}

#esbfc_block .owl-pagination .owl-page.active span {
    background: #6FA72F;
}

/* Tile — anchor wraps square image + caption underneath */
#esbfc_block .esbfc-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}

#esbfc_block .esbfc-tile__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;             /* square thumb, msofas-style */
    max-width: 432px;                /* design target on wide screens */
    margin: 0 auto;
    background: #f5f5f5;
}

#esbfc_block .esbfc-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

#esbfc_block .esbfc-tile:hover .esbfc-tile__img,
#esbfc_block .esbfc-tile:focus-visible .esbfc-tile__img {
    transform: scale(1.06);
}

/* Caption — name below the image, msofas typography */
#esbfc_block .esbfc-tile__name {
    display: block;
    margin: 16px auto 0;
    max-width: 432px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: #1a1a1a;
    letter-spacing: 0.2px;
    transition: color 0.2s ease;
}

#esbfc_block .esbfc-tile:hover .esbfc-tile__name,
#esbfc_block .esbfc-tile:focus-visible .esbfc-tile__name {
    color: #6FA72F;
}

@media (max-width: 519px) {
    #esbfc_block .esbfc-tile__name {
        font-size: 18px;
        margin-top: 12px;
    }
}

/* Brand-aligned focus ring for keyboard nav */
#esbfc_block .esbfc-tile:focus-visible {
    outline: 2px solid #6FA72F;
    outline-offset: 3px;
    border-radius: 2px;
}
/* ============================================================
   Sprint B (cont.) — ESB Category Product Tabs (homepage Bestsellers).
   Hooks `displayTabcateslider` (called from index.tpl line 32, between
   Featured and New). Reuses the same .product-miniature card so all
   prior token / hover / focus rules from redesign-p2 apply unchanged.
   This block adds only the wrapping section + tab navigation styles.
   ============================================================ */

#esbcpt_block {
    position: relative;
    padding: 60px 30px;
    background: #fff;
}

@media (max-width: 767px) {
    #esbcpt_block {
        padding: 36px 16px;
    }
}

#esbcpt_block .esbcpt-title {
    text-align: left;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    border: none;
    margin: 0 0 20px 0;
    padding: 0;
}

#esbcpt_block .esbcpt-title::before {
    display: none;
}

#esbcpt_block .esbcpt-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: #6FA72F;
    margin-top: 10px;
}

@media (max-width: 519px) {
    #esbcpt_block .esbcpt-title {
        font-size: 24px;
    }
}

/* Tab nav — msofas-style: text labels with underline-on-active.
   No full-width border-bottom on the nav: only the active tab gets a
   green underline so the nav doesn't carry a stray rule past the labels. */
#esbcpt_block .esbcpt-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 24px 0 28px;
}

#esbcpt_block .esbcpt-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 0 14px;
    font-size: 16px;
    font-weight: 500;
    color: #737373;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#esbcpt_block .esbcpt-tab:hover {
    color: #1a1a1a;
}

#esbcpt_block .esbcpt-tab--active {
    color: #1a1a1a;
    border-bottom-color: #6FA72F;
}

#esbcpt_block .esbcpt-tab:focus-visible {
    outline: 2px solid #6FA72F;
    outline-offset: 4px;
    border-radius: 2px;
}

@media (max-width: 519px) {
    #esbcpt_block .esbcpt-tabs {
        gap: 4px 18px;
    }
    #esbcpt_block .esbcpt-tab {
        font-size: 14px;
        padding: 8px 0 10px;
    }
}

/* Panels — keep ALL in DOM (Owl pre-init via responsiveBaseWidth). Hidden
   ones collapse to zero height so they don't take vertical space, but stay
   in the layout tree so Owl's wrapper math doesn't break on reveal. Soft
   fade on the active panel for the polish. */
#esbcpt_block .esbcpt-panel {
    opacity: 1;
    transition: opacity 0.18s ease-out;
}
#esbcpt_block .esbcpt-panel--hidden {
    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

/* Carousel — same overrides as Featured/New so theme width:95% and
   max-width:416 caps don't break our 4-up layout on wide screens. */
#esbcpt_block .esbcpt-carousel {
    width: 100% !important;
    margin: 0 !important;
}

#esbcpt_block > .esbcpt-panels .row {
    margin: 0 !important;
    padding: 0 !important;
}

#esbcpt_block .owl-item {
    max-width: none !important;
}

#esbcpt_block .item .item-inner {
    padding: 0 12px !important;     /* 24px visible gap between cards */
    margin-bottom: 12px !important;
}

/* Hide arrows; dot pagination only — same convention as other carousels */
#esbcpt_block .owl-controls .owl-buttons,
#esbcpt_block .owl-buttons {
    display: none !important;
}

#esbcpt_block .owl-pagination {
    text-align: center;
    margin-top: 12px;
}

#esbcpt_block .owl-pagination .owl-page span {
    background: #d0d0d0;
    width: 9px;
    height: 9px;
    margin: 0 4px;
    transition: background 0.2s ease;
    opacity: 1;
}

#esbcpt_block .owl-pagination .owl-page.active span {
    background: #6FA72F;
}
/* ============================================================
   Sprint B — ESB FAQ accordion (homepage, displayHome end of stack).
   Native <details>/<summary> for accessibility + JS toggles single-pane.
   Square corners (border-radius:0) per brief, msofas-style typography.
   ============================================================ */

#esbfaq_block {
    position: relative;
    padding: 60px 30px;
    background: #fff;
}

@media (max-width: 767px) {
    #esbfaq_block {
        padding: 36px 16px;
    }
}

/* FAQ block — outer column centered on page (max-width), inner
   content left-aligned: title and Q+A read naturally from the left,
   the whole "column" is centred horizontally so it doesn't drift to
   one side of the wide homepage. */
#esbfaq_block .esbfaq-title {
    max-width: 920px;
    margin: 0 auto 28px;
    padding: 0;
    text-align: left;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    border: none;
}

#esbfaq_block .esbfaq-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: #6FA72F;
    margin-top: 10px;
}

@media (max-width: 519px) {
    #esbfaq_block .esbfaq-title {
        font-size: 24px;
    }
}

/* List of accordion items — centered horizontally inside the section */
#esbfaq_block .esbfaq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

/* Single item — square corners, subtle border, no shadow */
#esbfaq_block .esbfaq-item {
    border: 1px solid #e5e5e5;
    border-radius: 0;          /* square corners — explicit per brief */
    background: #fff;
    transition: border-color 0.2s ease;
}

#esbfaq_block .esbfaq-item[open] {
    border-color: #1a1a1a;
}

#esbfaq_block .esbfaq-item:hover:not([open]) {
    border-color: #b8b8b8;
}

/* Question (summary) — text left, chevron right via flex */
#esbfaq_block .esbfaq-question {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    text-align: left;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.45;
}

/* Hide the default disclosure marker — we render our own SVG chevron */
#esbfaq_block .esbfaq-question::-webkit-details-marker { display: none; }
#esbfaq_block .esbfaq-question::marker { content: ''; }

#esbfaq_block .esbfaq-question__text {
    flex: 1 1 auto;
}

#esbfaq_block .esbfaq-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #737373;
    transition: transform 0.25s ease, color 0.2s ease;
}

#esbfaq_block .esbfaq-item[open] > .esbfaq-question .esbfaq-icon {
    transform: rotate(180deg);
    color: #1a1a1a;
}

#esbfaq_block .esbfaq-question:focus-visible {
    outline: 2px solid #6FA72F;
    outline-offset: 2px;
}

@media (max-width: 519px) {
    #esbfaq_block .esbfaq-question {
        padding: 14px 16px;
        font-size: 15px;
    }
}

/* Answer body — left-aligned reading flow */
#esbfaq_block .esbfaq-answer {
    padding: 0 22px 20px;
    color: #404040;
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
}

#esbfaq_block .esbfaq-answer p,
#esbfaq_block .esbfaq-answer ul,
#esbfaq_block .esbfaq-answer ol {
    margin: 0 0 12px;
}

#esbfaq_block .esbfaq-answer p:last-child,
#esbfaq_block .esbfaq-answer ul:last-child,
#esbfaq_block .esbfaq-answer ol:last-child {
    margin-bottom: 0;
}

#esbfaq_block .esbfaq-answer a {
    color: #1a1a1a;
    text-decoration: underline;
    text-decoration-color: #6FA72F;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

@media (max-width: 519px) {
    #esbfaq_block .esbfaq-answer {
        padding: 0 16px 16px;
        font-size: 14px;
    }
}