/* ==========================================================================
   Store page builder: shared section building blocks.
   Each section type adds its own sections/<type>/style.css; templates restyle under .tpl-<slug>.
   ========================================================================== */

.sec-categories, .sec-products, .sec-catalog, .sec-about { padding: 1.25rem 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem; }
.sec-head__text { display: flex; flex-direction: column; }
.sec-title { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 800; margin: 0; }
.sec-sub { order: 2; color: var(--muted); margin: .15rem 0 0; font-size: .95rem; }
.sec-placeholder { border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.25rem; text-align: center; color: var(--muted); margin: 1rem 0; background: rgba(255,255,255,.6); }

/* Product grids */
.sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 576px) { .sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .sec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } }
@media (min-width: 992px) {
    .sec-grid { grid-template-columns: repeat(var(--store-columns, 6), minmax(0, 1fr)); }
    .sec-grid--narrow { grid-template-columns: repeat(var(--store-columns-narrow, 5), minmax(0, 1fr)); }
}
.sec-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, calc((100% - (var(--store-columns, 6) - 1) * .75rem) / var(--store-columns, 6))); gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem 0 1rem; padding-inline: .25rem .5rem; }
.sec-scroller > * { scroll-snap-align: start; }

/* Photo-led cards (card style "minimal") */
.cards-minimal .sec-grid { gap: 1.25rem .9rem; }
.cards-minimal .sec-scroller, .cards-minimal .prod-spot-side { gap: .9rem; }
.mcard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.mcard__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--border); border-radius: var(--radius-sm); }
.mcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mcard:hover .mcard__media img { transform: scale(1.05); }
.mcard__tag { position: absolute; top: .75rem; inset-inline-start: .75rem; background: var(--accent); color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .08em; padding: .25rem .6rem; }
.mcard__tag--muted { background: var(--dark); }
.mcard__wish { position: absolute; top: .65rem; inset-inline-end: .65rem; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--dark); }
.mcard__add { position: absolute; inset-inline-start: .6rem; inset-inline-end: .6rem; top: calc(100% - 6.6rem); border: 0; background: var(--dark); color: #fff; padding: .55rem; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: all .25s ease; border-radius: var(--radius-sm); }
.mcard:hover .mcard__add, .mcard__add:focus-visible { opacity: 1; transform: none; }
.mcard__add:disabled { display: none; }
.mcard__info { padding: .6rem .1rem 0; text-align: center; height: 4rem; }
.mcard__title { display: block; color: var(--dark); font-size: .98rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard__price { margin-top: .2rem; color: var(--muted); font-size: .95rem; }
.mcard__price s { margin-inline-start: .4rem; opacity: .7; }

/* Outlined cards with a hard shadow (card style "outlined") */
.cards-outlined .p-card { border: 2px solid var(--dark); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--dark); }
.cards-outlined .p-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--primary); }
.cards-outlined .p-card__title { font-weight: 700; }
.cards-outlined .badge-pill--sale { background: var(--accent); color: var(--dark); }
.cards-outlined .prod-spot { border: 2px solid var(--dark); box-shadow: 8px 8px 0 var(--primary); }
.cards-outlined .prod-spot__body { border-top: 2px solid var(--dark); }
.cards-outlined .sec-scroller { padding-inline-end: 1rem; }

/* Category side menu layout (design option "side_menu"): menu on the left, sections in the column next to it */
.store-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.5rem; align-items: start; padding-top: 1.25rem; padding-bottom: 1rem; }
.store-main { min-width: 0; --store-columns: var(--store-columns-narrow); }
.store-main .container { max-width: none; padding-inline-start: 0; padding-inline-end: 0; }
.store-main > .sec:first-child, .store-main > .sec:first-child > .container:first-child { padding-top: 0; }
.store-main :is(.hero-centered, .hero-bold, .hero-minimal, .hero-banner, .hero-split, .promo--band, .about-dark, .ann--bar) { border-radius: var(--radius-lg); overflow: hidden; }
.store-main :is(.hero-centered, .hero-bold, .hero-minimal, .hero-banner, .promo--band, .about-dark, .ann--bar) > .container { padding-inline-start: clamp(1rem, 3vw, 2.25rem); padding-inline-end: clamp(1rem, 3vw, 2.25rem); }
.store-main .sec-promo--band, .store-main .sec-announcement { padding: .75rem 0; }

/* The menu is never scrolled on its own: side-menu.js makes it sticky only while it fits the viewport */
.store-side { position: relative; z-index: 30; display: flex; flex-direction: column; gap: 1rem; }
.store-side.is-sticky { position: sticky; top: var(--side-top, 1rem); }
.store-side__panel { flex-shrink: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.store-side__panel--cats { position: relative; overflow: visible; }
.store-side__head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; background: var(--primary); color: #fff; font-weight: 700; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.store-side__title { padding: .85rem 1rem .2rem; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.store-side__nav { display: flex; flex-direction: column; padding: .35rem; margin: 0; list-style: none; }
.store-side__item.is-extra { display: none; }
.store-side.show-all .store-side__item.is-extra { display: block; }
.store-side__more { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .6rem; margin-top: .2rem; border: 0; border-top: 1px dashed var(--border); background: none; color: var(--primary); font-size: .9rem; font-weight: 600; text-align: start; }
.store-side__more i { width: 30px; text-align: center; transition: transform .2s ease; }
.store-side.show-all .store-side__more i { transform: rotate(45deg); }
.store-side__more:hover { color: var(--primary-dark, var(--primary)); text-decoration: underline; }
.store-side__item.is-open > .store-side__link { background: var(--primary-50); color: var(--primary); }
.store-side__item.is-open > .store-side__link .store-side__chev, .store-side__item.has-children .store-side__chev { width: .7rem; opacity: 1; }
.store-side__item.has-children:not(.is-open) .store-side__chev { opacity: .45; }

/* Fly-out sub-menu: opens beside the categories panel, at least as tall as it */
.store-flyout { display: none; position: absolute; top: 0; inset-inline-start: 100%; min-height: 100%; padding-inline-start: 10px; z-index: 5; }
.store-side__item.is-open > .store-flyout, .store-side:not(.js-ready) .has-flyout:hover > .store-flyout, .has-flyout:focus-within > .store-flyout { display: flex; }
.store-flyout__inner { display: flex; flex-direction: column; width: min(720px, calc(100vw - 340px)); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(15, 23, 42, .16); animation: flyout-in .16s ease-out; overflow: hidden; }
@keyframes flyout-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes flyout-in-rtl { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
[dir="rtl"] .store-flyout__inner { animation-name: flyout-in-rtl; }
.store-flyout__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--light); }
.store-flyout__title { font-size: 1.15rem; font-weight: 700; color: var(--dark); line-height: 1.25; }
.store-flyout__meta { font-size: .82rem; color: var(--muted); }
.store-flyout__all { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-size: .88rem; font-weight: 600; }
.store-flyout__all:hover { color: #fff; filter: brightness(1.08); }
.store-flyout__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem; padding: 1.1rem 1.25rem; }
.store-flyout__body--grid { grid-template-columns: minmax(0, 1fr); }
.store-flyout__subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; align-content: start; }
.store-flyout__group { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.store-flyout__sub { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .3rem; border-bottom: 2px solid var(--primary-50); color: var(--dark); font-weight: 700; font-size: .95rem; }
.store-flyout__sub span { font-size: .74rem; font-weight: 600; color: var(--muted); background: var(--light); border-radius: 999px; padding: .05rem .45rem; }
.store-flyout__sub:hover, .store-flyout__sub.active { color: var(--primary); border-bottom-color: var(--primary); }
.store-flyout__leaf { color: var(--muted); font-size: .88rem; padding: .1rem 0; }
.store-flyout__leaf:hover, .store-flyout__leaf.active { color: var(--primary); }
.store-flyout__leaf--more { font-weight: 600; color: var(--primary); }
.store-flyout__label { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.store-flyout__label a { flex-shrink: 0; color: var(--primary); letter-spacing: .03em; }
.store-flyout__pickset { animation: picks-in .18s ease-out; }
@keyframes picks-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.store-flyout__sub.is-current { color: var(--primary); border-bottom-color: var(--primary); }
.store-flyout__leaf.is-current { color: var(--primary); font-weight: 600; }
.store-flyout__products { display: flex; flex-direction: column; gap: .6rem; }
.store-flyout__product { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .4rem; border-radius: var(--radius-sm); color: var(--dark); }
.store-flyout__product:hover { background: var(--light); color: var(--primary); }
.store-flyout__img { grid-row: span 2; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--light); overflow: hidden; }
.store-flyout__img img { width: 100%; height: 100%; object-fit: cover; }
.store-flyout__ptitle { font-size: .88rem; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; align-self: end; }
.store-flyout__price { font-size: .86rem; font-weight: 700; color: var(--primary); align-self: start; }
.store-flyout__price s { margin-inline-start: .3rem; font-weight: 500; color: var(--muted); }
.store-flyout__body--grid .store-flyout__products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.store-flyout__body--grid .store-flyout__product { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: .35rem; align-items: start; }
.store-flyout__body--grid .store-flyout__img { grid-row: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.store-flyout__foot { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: .75rem 1.25rem; border-top: 1px solid var(--border); font-size: .88rem; font-weight: 600; }
.store-flyout__foot a { color: var(--muted); }
.store-flyout__foot a:hover { color: var(--primary); }
.store-flyout__foot i { margin-inline-end: .3rem; color: var(--primary); }

/* Sub-category chips above the catalogue when a category with sub-categories is open */
.sub-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.sub-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--dark); font-size: .88rem; font-weight: 600; }
.sub-chip span { font-size: .75rem; color: var(--muted); }
.sub-chip:hover { border-color: var(--primary); color: var(--primary); }
.sub-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.sub-chip.active span { color: rgba(255, 255, 255, .8); }
.store-side__link { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--dark); font-size: .95rem; font-weight: 500; transition: background .15s ease, color .15s ease; }
.store-side__link:hover, .store-side__link.active { background: var(--primary-50); color: var(--primary); }
.store-side__link.active { font-weight: 700; }
.store-side__icon { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--light); color: var(--primary); font-size: .88rem; }
.store-side__link.active .store-side__icon { background: var(--primary); color: #fff; }
.store-side__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-side__count { font-size: .76rem; font-weight: 600; color: var(--muted); background: var(--light); border-radius: 999px; padding: .1rem .5rem; }
.store-side__chev { width: 0; overflow: hidden; font-size: .7rem; opacity: 0; transition: all .15s ease; }
.store-side__link:hover .store-side__chev { width: .7rem; opacity: 1; }
.store-side__contact { display: flex; flex-direction: column; gap: .45rem; padding: .3rem 1rem 1rem; font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
.store-side__contact i { width: 1.1rem; color: var(--primary); }

@media (max-width: 991.98px) {
    .store-shell { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding-top: .75rem; }
    .store-side, .store-side.is-sticky { position: relative; top: auto; }
    .store-side__head, .store-side__panel--extra, .store-side__count, .store-side__chev, .store-flyout, .store-side__item--more { display: none !important; }
    .store-side__panel { background: none; border: 0; border-radius: 0; }
    .store-side__nav { flex-direction: row; gap: .5rem; overflow-x: auto; padding: 0 0 .4rem; scrollbar-width: none; }
    .store-side__item, .store-side__item.is-extra { display: block; flex-shrink: 0; }
    .store-side__item.is-open > .store-side__link { background: #fff; color: var(--dark); }
    .sub-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .sub-chip { flex-shrink: 0; }
    .store-side__link { flex-shrink: 0; padding: .3rem; padding-inline-end: .85rem; background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: .9rem; }
    .store-side__icon { width: 28px; height: 28px; border-radius: 50%; }
    .store-side__name { overflow: visible; }
}

@media (max-width: 575.98px) {
    .cards-minimal .sec-grid { gap: 1rem .6rem; }
    .mcard__add { opacity: 1; transform: none; position: static; margin-top: .5rem; }
    .mcard__info { height: auto; }
}