/* =============================================================================
   shop-templates.css — Phase E · Mobile-first · 15 templates
   --------------------------------------------------------------------
   Design principles:
   1. ห้าม fake content (banner promo ปลอม, countdown ปลอม, sidebar text ปลอม)
   2. ใช้ element จริงใน Index.cshtml
   3. Mobile-first responsive
   4. ทุก template force #my-carousel aspect-ratio ของตัวเอง
   5. Templates ที่ต้อง JS reorder อ่าน wwwroot/js/shop-templates.js
   --------------------------------------------------------------------
   Templates:
     01 grid      Classic            - original site.css 100%
     02 hero      Hero Banner        - banner ใหญ่ rounded shadow
     03 magazine  Magazine           - JS: banner เข้า productGrid · 4-col
     04 tower     Tower              - JS: banner = vertical column ขวา
     05 carousel  Carousel Top       - banner เด่น 32:9 · indicators
     06 bento     Bento Box          - 4-col bento grid (data-bento-pos)
     07 spotlight Spotlight Reel     - JS: first card hero · 5-col thumbs
     08 dual      Dual Highlight     - JS: first 2 feature · 4-col
     09 mosaic    Mosaic             - asymmetric grid (nth-child)
     10 gallery   Pinterest Gallery  - column-count masonry
     11 story     Story Lookbook     - banner full-bleed 8:3
     12 mall      Flat Mall          - 5-col tight + accent
     13 brutal    Brutalist          - banner ใหญ่ + thick black borders + bold type
     14 polaroid  Polaroid Wall      - rotated frames + bottom border
     15 newspaper Newspaper          - column-count text + drop cap
   ============================================================================= */

/* ============================================================================
   SECTION 1 — Shared base · ribbons · zoom · quick-view · BestSeller pulse
   ============================================================================ */

body.shop-themed .moreBox {
    position: relative;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
    box-sizing: border-box;
}
body.shop-themed .moreBox .ratio,
body.shop-themed .moreBox .image-base {
    overflow: hidden; border-radius: 4px; background: var(--shop-bg);
}
body.shop-themed .moreBox .image-base img {
    transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .25s;
}
body.shop-themed .moreBox:hover .image-base img { transform: scale(1.06); filter: brightness(1.04); }

body.shop-themed .moreBox::before {
    content: ""; position: absolute; top: 6px; left: 6px; z-index: 3;
    background: var(--shop-secondary); color: #fff; font-weight: 700; font-size: 10.5px;
    letter-spacing: .04em; padding: 3px 9px; border-radius: 2px; text-transform: uppercase;
    opacity: 0; pointer-events: none; line-height: 1;
}
body.shop-themed .moreBox:nth-child(7n+1)::before { content: "NEW"; opacity: 1; background: var(--shop-primary); }
body.shop-themed .moreBox:nth-child(11n+3)::before { content: "HOT"; opacity: 1; background: #d4533a; }
body.shop-themed .moreBox:nth-child(13n+5)::before { content: "-20%"; opacity: 1; background: var(--shop-secondary); font-family: 'JetBrains Mono', monospace; }

body.shop-themed .moreBox::after {
    content: "👁  ดูเร็ว"; position: absolute; top: 38%; left: 50%;
    transform: translate(-50%, -50%) scale(.92);
    background: rgba(0,0,0,.78); color: #fff; padding: 7px 16px; border-radius: 999px;
    font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .25s, transform .25s;
    pointer-events: none; z-index: 4; white-space: nowrap;
}
body.shop-themed .moreBox:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

body.shop-themed .moreBox .image-top { animation: pulseGlow 2.4s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100%{filter:drop-shadow(0 0 0 transparent);} 50%{filter:drop-shadow(0 0 6px rgba(212,166,74,.5));} }

/* ============================================================================
   SECTION 2 — Reset Bootstrap row/gutter ของ template ที่ใช้ display:grid
   ============================================================================ */

body.tpl-magazine  #productGrid,
body.tpl-tower     #productGrid,
body.tpl-bento     #productGrid,
body.tpl-spotlight #productGrid,
body.tpl-dual      #productGrid,
body.tpl-mosaic    #productGrid,
body.tpl-gallery   #productGrid,
body.tpl-story     #productGrid,
body.tpl-mall      #productGrid,
body.tpl-brutal    #productGrid,
body.tpl-polaroid  #productGrid,
body.tpl-newspaper #productGrid {
    margin: 0 !important;
}
body.tpl-magazine  #productGrid > .moreBox,
body.tpl-tower     #productGrid > .moreBox,
body.tpl-bento     #productGrid > .moreBox,
body.tpl-spotlight #productGrid > .moreBox,
body.tpl-dual      #productGrid > .moreBox,
body.tpl-mosaic    #productGrid > .moreBox,
body.tpl-gallery   #productGrid > .moreBox,
body.tpl-story     #productGrid > .moreBox,
body.tpl-mall      #productGrid > .moreBox,
body.tpl-brutal    #productGrid > .moreBox,
body.tpl-polaroid  #productGrid > .moreBox,
body.tpl-newspaper #productGrid > .moreBox {
    width: auto !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 12px !important;
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: 6px;
}

/* ============================================================================
   SECTION 3 — Banner unified base (non-Classic) · object-fit:cover ทุกใบ
   ============================================================================ */

body.shop-themed #my-carousel {
    overflow: hidden;
    position: relative;
}
body.shop-themed #my-carousel .carousel-inner,
body.shop-themed #my-carousel .carousel-item,
body.shop-themed #my-carousel .banner-slot {
    height: 100%;
}
body.shop-themed #my-carousel .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
/* JS-tagged: Banner row ถูกซ่อนสำหรับ template ที่ SVG ไม่แสดง Banner */
.shop-banner-hidden { display: none !important; }
/* JS-tagged: Banner row ถูก inject เข้า productGrid → reset Bootstrap row */
.shop-banner-injected {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    display: block !important;     /* override .row flex */
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    /* height left auto — each template sets it (polaroid: auto, others: 100%) */
}
.shop-banner-injected > #my-carousel { margin: 0 !important; }

/* ============================================================================
   SECTION 4 — Templates 1-15
   ============================================================================ */

/* ============================================================================
   01 · grid · Classic — ใช้ original site.css 100% (ไม่มี class shop-themed)
   ============================================================================ */
body.tpl-grid .moreBox:hover { transform: translateY(-3px); box-shadow: 0 8px 18px -10px rgba(0,0,0,.18); }

/* ============================================================================
   02 · hero · Hero Banner — banner เด่น rounded shadow
   ============================================================================ */
body.tpl-hero #my-carousel {
    aspect-ratio: 16 / 7;
    min-height: 200px;
    box-shadow: 0 14px 38px -14px rgba(0,0,0,.30);
    border-radius: 14px;
    margin: 8px;
}
body.tpl-hero .moreBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px -10px rgba(0,0,0,.18);
}
@media (min-width: 800px) {
    body.tpl-hero #my-carousel { aspect-ratio: 16 / 5; min-height: 320px; }
}

/* ============================================================================
   03 · magazine · Editorial — Banner col 1-3 row 1-2 (upper-LEFT) + cards tile
   tile mode: gap 1px · cards ติดกัน · row = 380px · column-span only (no row-span)
   ============================================================================ */
body.tpl-magazine #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: dense !important;
    gap: 1px !important;
    padding: 0 !important;
    background: var(--shop-border) !important;
}
body.tpl-magazine #productGrid > .moreBox {
    background: var(--shop-surface) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 8px !important;
    min-height: 380px !important;
    overflow: visible !important;
}
body.tpl-magazine .shop-banner-injected {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
    background: var(--shop-surface) !important;
    padding: 0 !important;
}
body.tpl-magazine .shop-banner-injected #my-carousel {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
@media (min-width: 800px) {
    body.tpl-magazine #productGrid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    /* Banner = col 1-3, row 1-2 (3 cols × 2 rows = SVG upper-left half) */
    body.tpl-magazine .shop-banner-injected {
        grid-column: 1 / 4 !important;
        grid-row: span 2 !important;
    }
}
body.tpl-magazine #productGrid > .moreBox:hover {
    background: var(--shop-bg) !important;
    box-shadow: inset 0 0 0 2px var(--shop-primary);
    z-index: 2; position: relative;
}

/* ============================================================================
   04 · tower · Tower — Banner pinned ขวา (position:absolute · NO inject)
   Mobile: Banner เต็มบน (default) · Products 2-col grid
   Desktop (800+): mainView padding-right + Banner absolute right (full height)
   วิธีนี้ห่าม grid-row span → ไม่มี scroll ซ้อน
   ============================================================================ */
body.tpl-tower #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 1px !important;
    padding: 0 !important;
    background: var(--shop-border) !important;
}
body.tpl-tower #productGrid > .moreBox {
    background: var(--shop-surface) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 8px !important;
    min-height: 380px !important;
    overflow: hidden !important;
}
body.tpl-tower #productGrid > .moreBox:hover {
    background: var(--shop-bg) !important;
    box-shadow: inset 0 0 0 2px var(--shop-primary);
    z-index: 2; position: relative;
}
@media (min-width: 800px) {
    /* mainView = positioning context · padding-right ให้พื้นที่ banner */
    body.tpl-tower #mainView {
        position: relative;
        padding-right: 282px;
    }
    /* Banner row pin absolute right · stretch full mainView height */
    body.tpl-tower .tpl-tower-banner {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        overflow: hidden !important;
        z-index: 1;
    }
    body.tpl-tower .tpl-tower-banner #my-carousel {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    /* Products grid 4-col · banner ไม่ทับเพราะ mainView padding-right */
    body.tpl-tower #productGrid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
@media (min-width: 1300px) {
    body.tpl-tower #mainView { padding-right: 322px; }
    body.tpl-tower .tpl-tower-banner { width: 320px !important; }
    body.tpl-tower #productGrid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* ============================================================================
   05 · carousel · Carousel-Forward
   ============================================================================ */
body.tpl-carousel #my-carousel {
    aspect-ratio: 16 / 7;
    min-height: 200px;
    box-shadow: 0 16px 40px -16px rgba(0,0,0,.28);
    border-radius: 12px;
    margin: 10px;
}
body.tpl-carousel #my-carousel .carousel-indicators {
    margin-bottom: 12px;
}
body.tpl-carousel #my-carousel .carousel-indicators button {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 0;
    margin: 0 4px;
    opacity: .5;
    transition: all .3s;
}
body.tpl-carousel #my-carousel .carousel-indicators button.active {
    opacity: 1;
    width: 28px;
    border-radius: 4px;
    background: var(--shop-primary);
}
body.tpl-carousel .moreBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px -10px rgba(0,0,0,.18);
}
@media (min-width: 800px) {
    body.tpl-carousel #my-carousel { aspect-ratio: 32 / 9; min-height: 360px; }
}

/* ============================================================================
   06 · bento · Bento Box — Banner above (thin band) + 4-col tile grid
   pattern: pos 1 = wide 2-col · pos 4 = wide 2-col · others normal (column-span ONLY)
   SVG: acc 184×20 (thin band) ABOVE grid → Banner เหนือ grid
   ============================================================================ */
body.tpl-bento #my-carousel {
    aspect-ratio: 16 / 3;
    min-height: 80px;
    border-radius: 0;
    overflow: hidden;
    margin: 0;
    border-bottom: 1px solid var(--shop-border);
}
body.tpl-bento #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: dense !important;
    gap: 1px !important;
    padding: 0 !important;
    background: var(--shop-border) !important;
}
body.tpl-bento #productGrid > .moreBox {
    background: var(--shop-surface) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 8px !important;
    min-height: 420px !important;
    overflow: visible !important;
}
body.tpl-bento #productGrid > .moreBox:hover {
    background: var(--shop-bg) !important;
    box-shadow: inset 0 0 0 2px var(--shop-primary);
    z-index: 2; position: relative;
}
@media (min-width: 800px) {
    body.tpl-bento #my-carousel { aspect-ratio: 5 / 1; min-height: 120px; }
    body.tpl-bento #productGrid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    /* Asymmetric: pos 1 = wide 2-col, pos 4 = wide 2-col (no row span → no overflow) */
    body.tpl-bento #productGrid > .moreBox[data-bento-pos="1"] { grid-column: span 2 !important; }
    body.tpl-bento #productGrid > .moreBox[data-bento-pos="4"] { grid-column: span 2 !important; }
}
@media (min-width: 1200px) {
    body.tpl-bento #my-carousel { aspect-ratio: 8 / 1; min-height: 140px; }
    body.tpl-bento #productGrid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    body.tpl-bento #productGrid > .moreBox[data-bento-pos="1"] { grid-column: span 3 !important; }
    body.tpl-bento #productGrid > .moreBox[data-bento-pos="4"] { grid-column: span 2 !important; }
    body.tpl-bento #productGrid > .moreBox[data-bento-pos="6"] { grid-column: span 2 !important; }
}

/* ============================================================================
   07 · spotlight · Spotlight Reel — Banner above (BIG hero) + 5-col thumbnails
   SVG: acc 184×62 (~44%) ABOVE thumb strip → Banner เด่นเหนือ grid
   ============================================================================ */
body.tpl-spotlight #my-carousel {
    aspect-ratio: 16 / 7;
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    margin: 10px;
    box-shadow: 0 10px 26px -12px rgba(0,0,0,.20);
}
body.tpl-spotlight #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
}
body.tpl-spotlight #productGrid > .moreBox:hover {
    transform: translateY(-3px);
    border-color: var(--shop-primary) !important;
    box-shadow: 0 10px 22px -10px rgba(0,0,0,.20);
}
@media (min-width: 800px) {
    body.tpl-spotlight #my-carousel { aspect-ratio: 12 / 5; min-height: 340px; margin: 14px; }
    body.tpl-spotlight #productGrid {
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
        padding: 14px;
    }
}

/* ============================================================================
   08 · dual · Dual Highlight — JS injects Banner LEFT (square) + 1 feature ขวา
   SVG: acc 91×80 ซ้าย + plain 91×80 ขวา (row 1) + 3 cards row 2 (60 wide each)
   ============================================================================ */
body.tpl-dual #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
}
/* Banner injected = LEFT big square (matches acc 91×80 in SVG) */
body.tpl-dual .shop-banner-injected {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}
body.tpl-dual .shop-banner-injected #my-carousel {
    aspect-ratio: 16 / 7 !important;
    height: auto !important;
    border-radius: 8px;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.18);
}
body.tpl-dual #productGrid > .moreBox {
    padding: 14px !important;
    border-radius: 6px !important;
    border-left: 4px solid transparent !important;
    transition: border-left-color .25s, transform .25s, box-shadow .25s;
}
body.tpl-dual #productGrid > .moreBox.tpl-feature {
    border-left: 4px solid var(--shop-primary) !important;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.18);
    background: linear-gradient(165deg, var(--shop-surface), var(--shop-bg)) !important;
}
body.tpl-dual #productGrid > .moreBox:hover {
    border-left-color: var(--shop-primary) !important;
    transform: translateX(4px);
    box-shadow: 0 8px 18px -10px rgba(0,0,0,.18);
}
@media (min-width: 800px) {
    body.tpl-dual #productGrid {
        grid-template-columns: repeat(6, 1fr);
        gap: 14px;
        padding: 14px;
    }
    /* Banner col 1-3 (LEFT half ของ 6-col), feature card col 4-6 (RIGHT half) row 1 */
    body.tpl-dual .shop-banner-injected {
        grid-column: 1 / 4 !important;
        grid-row: 1 !important;
    }
    body.tpl-dual .shop-banner-injected #my-carousel {
        aspect-ratio: 5 / 4 !important;
        height: auto !important;
    }
    body.tpl-dual #productGrid > .moreBox { grid-column: span 2; }
    body.tpl-dual #productGrid > .moreBox.tpl-feature {
        grid-column: 4 / 7 !important;
        grid-row: 1 !important;
        padding: 18px !important;
    }
}

/* ============================================================================
   09 · mosaic · Asymmetric Grid — Banner TOP-MIDDLE (col 2-3) + tile grid
   pattern (column-span ONLY, no row-span): 7n+3 wide · 7n+5 wide
   SVG: acc 80×40 (top-middle) + cells size ต่าง ๆ รอบ ๆ
   ============================================================================ */
body.tpl-mosaic #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: dense !important;
    gap: 1px !important;
    padding: 0 !important;
    background: var(--shop-border) !important;
}
body.tpl-mosaic #productGrid > .moreBox {
    background: var(--shop-surface) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 8px !important;
    min-height: 420px !important;
    overflow: visible !important;
}
/* Banner mobile: full-width row 1 */
body.tpl-mosaic .shop-banner-injected {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
    background: var(--shop-surface) !important;
    padding: 0 !important;
}
body.tpl-mosaic .shop-banner-injected #my-carousel {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
body.tpl-mosaic #productGrid > .moreBox:hover {
    background: var(--shop-bg) !important;
    box-shadow: inset 0 0 0 2px var(--shop-primary);
    z-index: 2; position: relative;
}
@media (min-width: 700px) {
    body.tpl-mosaic #productGrid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    /* Banner ตำแหน่งแปลก: col 2-3 row 1 (TOP-MIDDLE) */
    body.tpl-mosaic .shop-banner-injected {
        grid-column: 2 / 4 !important;
        grid-row: 1 !important;
    }
    /* nth-child shift +1 (banner = child 1) — column-span only */
    body.tpl-mosaic #productGrid > .moreBox:nth-child(7n+3) { grid-column: span 2 !important; }
    body.tpl-mosaic #productGrid > .moreBox:nth-child(7n+5) { grid-column: span 2 !important; }
}

/* ============================================================================
   10 · gallery · Pinterest Gallery — JS hides Banner · column-count masonry
   ============================================================================ */
body.tpl-gallery #productGrid {
    display: block !important;
    column-count: 2;
    column-gap: 10px;
    padding: 10px;
}
body.tpl-gallery #productGrid > .moreBox {
    display: inline-block;
    width: 100% !important;
    margin-bottom: 10px !important;
    break-inside: avoid;
    page-break-inside: avoid;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 4px 12px -8px rgba(0,0,0,.14);
}
body.tpl-gallery #productGrid > .moreBox:nth-child(3n+1) .ratio { aspect-ratio: 4/5 !important; }
body.tpl-gallery #productGrid > .moreBox:nth-child(3n+2) .ratio { aspect-ratio: 1/1 !important; }
body.tpl-gallery #productGrid > .moreBox:nth-child(3n+3) .ratio { aspect-ratio: 3/4 !important; }
body.tpl-gallery #productGrid > .moreBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -10px rgba(0,0,0,.20);
}
@media (min-width: 700px)  { body.tpl-gallery #productGrid { column-count: 3; column-gap: 12px; padding: 12px; } body.tpl-gallery #productGrid > .moreBox { margin-bottom: 12px !important; } }
@media (min-width: 1100px) { body.tpl-gallery #productGrid { column-count: 4; column-gap: 14px; padding: 14px; } body.tpl-gallery #productGrid > .moreBox { margin-bottom: 14px !important; } }
@media (min-width: 1500px) { body.tpl-gallery #productGrid { column-count: 5; } }

/* ============================================================================
   11 · story · Lookbook
   ============================================================================ */
body.tpl-story #my-carousel {
    aspect-ratio: 16 / 7;
    min-height: 240px;
    border-radius: 0;
    margin: 0 0 18px 0;
    overflow: hidden;
}
body.tpl-story #Brand,
body.tpl-story #SubBrand {
    padding: 14px;
    background: var(--shop-surface);
    margin: 0 0 14px 0;
}
body.tpl-story #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 12px 32px;
}
body.tpl-story #productGrid > .moreBox {
    padding: 14px !important;
    border-radius: 4px !important;
    border-top: 3px solid var(--shop-primary) !important;
    border-left: 1px solid var(--shop-border);
    box-shadow: 0 4px 14px -8px rgba(0,0,0,.14);
}
@media (min-width: 800px) {
    body.tpl-story #my-carousel { aspect-ratio: 8 / 3; min-height: 460px; }
    body.tpl-story #productGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        padding: 0 24px 48px;
    }
    body.tpl-story #productGrid > .moreBox { padding: 20px !important; }
}

/* ============================================================================
   12 · mall · Asia E-com — Banner col 1-3 of 5 + 2 cards ขวาบน · tile dense
   SVG: Banner acc 120×36 (~3/5 LEFT) + 2 cards 60×17 ขวา + 5+5 cards ล่าง
   ============================================================================ */
body.tpl-mall {
    --mall-accent: linear-gradient(90deg, #d4533a, var(--shop-primary), #d4533a);
}
body.tpl-mall #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: dense !important;
    gap: 1px !important;
    padding: 0 !important;
    background: var(--shop-border) !important;
}
body.tpl-mall #productGrid > .moreBox {
    background: var(--shop-surface) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 6px !important;
    min-height: 320px !important;
    overflow: visible !important;
}
body.tpl-mall .shop-banner-injected {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
    background: var(--shop-surface) !important;
    padding: 0 !important;
    border-top: 4px solid;
    border-image: var(--mall-accent) 1;
}
body.tpl-mall .shop-banner-injected #my-carousel {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
body.tpl-mall #productGrid > .moreBox:hover {
    background: var(--shop-bg) !important;
    box-shadow: inset 0 0 0 2px var(--shop-primary);
    z-index: 2; position: relative;
}
@media (min-width: 600px)  { body.tpl-mall #productGrid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 900px)  { body.tpl-mall #productGrid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 1300px) {
    body.tpl-mall #productGrid { grid-template-columns: repeat(5, 1fr) !important; }
    /* Banner spans cols 1-3 + spans 1 row → 2 cards land in cols 4-5 row 1 (ตรง SVG) */
    body.tpl-mall .shop-banner-injected {
        grid-column: 1 / 4 !important;
        grid-row: span 1 !important;
    }
}

/* ============================================================================
   13 · brutal · Brutalist — กรอบดำหนา · ตัวอักษรหนา · banner ใหญ่ + thick border
   SVG: acc 200×42 (full-bleed banner) + thick black divider + cards กรอบหนา 4px
   ============================================================================ */
body.tpl-brutal #my-carousel {
    aspect-ratio: 4 / 1;
    min-height: 220px;
    border-radius: 0;
    margin: 0;
    border-bottom: 6px solid var(--shop-ink);
    box-shadow: none;
}
body.tpl-brutal #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
    background: var(--shop-ink) !important;
}
body.tpl-brutal #productGrid > .moreBox {
    background: var(--shop-surface) !important;
    border: 4px solid var(--shop-ink) !important;
    border-radius: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
    transition: transform .15s, box-shadow .15s;
}
body.tpl-brutal #productGrid > .moreBox h6,
body.tpl-brutal #productGrid > .moreBox b {
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -.02em;
    color: var(--shop-ink) !important;
}
body.tpl-brutal #productGrid > .moreBox:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--shop-primary);
    border-color: var(--shop-primary) !important;
}
@media (min-width: 700px)  { body.tpl-brutal #productGrid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; padding: 8px !important; } }
@media (min-width: 1100px) { body.tpl-brutal #productGrid { grid-template-columns: repeat(4, 1fr) !important; } }

/* ============================================================================
   14 · polaroid · Polaroid Wall — JS injects Banner = polaroid card หนึ่งใบ
   SVG: acc 44×34 อยู่ใน frame ของ polaroid ที่สอง (rotate +2deg)
   frames + slight rotation · productGrid overflow:hidden กัน scroll ซ้อน
   ============================================================================ */
body.tpl-polaroid #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 14px;
    overflow: hidden;
}
/* Banner injected = polaroid card หนึ่งใบ (white frame + rotation + shadow) */
body.tpl-polaroid .shop-banner-injected {
    background: #ffffff !important;
    border: 0 !important;
    padding: 8px 8px 24px !important;
    border-radius: 2px !important;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.18);
    transform: rotate(.8deg);
    transition: transform .35s, box-shadow .25s;
}
body.tpl-polaroid .shop-banner-injected #my-carousel {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    border-radius: 0 !important;
    background: #ddd;
    margin: 0 !important;
}
body.tpl-polaroid .shop-banner-injected:hover {
    transform: rotate(0) translateY(-4px) scale(1.02);
    box-shadow: 0 14px 28px -10px rgba(0,0,0,.25);
    z-index: 2;
}
body.tpl-polaroid #productGrid > .moreBox {
    background: #ffffff !important;
    border: 0 !important;
    padding: 8px 8px 24px !important;
    border-radius: 2px !important;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.18);
    transition: transform .35s, box-shadow .25s;
}
/* Banner = child 1 → .moreBox start ที่ child 2 → rotation pattern shift +1 */
body.tpl-polaroid #productGrid > .moreBox:nth-child(4n+2) { transform: rotate(-1deg); }
body.tpl-polaroid #productGrid > .moreBox:nth-child(4n+3) { transform: rotate(.8deg); }
body.tpl-polaroid #productGrid > .moreBox:nth-child(4n+4) { transform: rotate(-.5deg); }
body.tpl-polaroid #productGrid > .moreBox:nth-child(4n+5) { transform: rotate(1.2deg); }
body.tpl-polaroid #productGrid > .moreBox:hover {
    transform: rotate(0) translateY(-4px) scale(1.02);
    box-shadow: 0 14px 28px -10px rgba(0,0,0,.25);
    z-index: 2;
}
body.tpl-polaroid #productGrid > .moreBox .ratio {
    border-radius: 0 !important;
    background: #ddd;
}
@media (min-width: 700px)  { body.tpl-polaroid #productGrid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 1100px) { body.tpl-polaroid #productGrid { grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 18px; } }

/* ============================================================================
   15 · newspaper · Newspaper — JS hides Banner · column-count + serif drop cap
   ============================================================================ */
body.tpl-newspaper {
    font-family: Georgia, 'Times New Roman', 'Noto Serif Thai', serif !important;
}
body.tpl-newspaper #productGrid {
    display: block !important;
    column-count: 2;
    column-gap: 24px;
    padding: 14px;
    border-top: 3px double var(--shop-ink);
    border-bottom: 3px double var(--shop-ink);
}
body.tpl-newspaper #productGrid > .moreBox {
    display: inline-block;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 8px 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--shop-border) !important;
    border-radius: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
}
body.tpl-newspaper #productGrid > .moreBox:first-child::first-letter {
    font-size: 3em;
    font-weight: 700;
    float: left;
    line-height: .9;
    margin: 4px 6px 0 0;
    color: var(--shop-primary);
}
body.tpl-newspaper #productGrid > .moreBox:hover {
    background: var(--shop-bg) !important;
}
@media (min-width: 800px)  { body.tpl-newspaper #productGrid { column-count: 3; column-gap: 28px; padding: 18px; } }
@media (min-width: 1200px) { body.tpl-newspaper #productGrid { column-count: 4; column-gap: 32px; } }