/* 7packz builder — base styles for builder nodes. Logical properties only (RTL-safe). */
.bx-page{display:block;min-width:0}
.bx-page img{max-width:100%;height:auto}
/* image: no UA figure margin, never wider than its parent, honest cover/contain + focal point, alignment inside the parent */
.bx-image{margin:0;display:block;min-width:0;max-width:min(100%,var(--bx-w,100%));overflow:hidden}
.bx-image>a{display:block}.bx-image img{display:block;width:100%;height:auto;max-width:100%}
.bx-image.bx-img-ratio img{height:100%;object-fit:var(--bx-fit,cover);object-position:var(--bx-pos,center)}
.bx-image.bx-al-center{margin-inline:auto}.bx-image.bx-al-start{margin-inline-end:auto}.bx-image.bx-al-end{margin-inline-start:auto}
.bx-image.bx-img-empty{max-width:min(100%,var(--bx-w,480px))}
.bx-container{box-sizing:border-box}
.bx-ph{display:grid;place-items:center;min-height:120px;background:var(--surface,#f6f3f1);color:var(--mute,#8a8486);border:1px dashed var(--line,#ddd);border-radius:var(--r,10px);padding:16px;text-align:center;font-size:.9rem}
.bx-hint,.bx-need-product{color:var(--mute,#8a8486);font-size:.85rem}
.bx-off{display:none!important}
.bx-lock{cursor:default}
.bx-ov{position:absolute;inset:0;pointer-events:none}
/* typography helpers */
.bx-font-display{font-family:var(--font-display,inherit)}.bx-font-body{font-family:var(--font-body,inherit)}
/* tabs */
.bx-tablist{display:flex;gap:4px;border-block-end:1px solid var(--line,#ddd);margin-block-end:16px;overflow-x:auto}
.bx-tablist button{background:none;border:0;border-block-end:2px solid transparent;padding:.7em 1.1em;cursor:pointer;font:inherit;color:var(--mute,#8a8486);white-space:nowrap}
.bx-tablist button[aria-selected=true]{color:var(--primary);border-color:var(--primary);font-weight:600}
.bx-tabpanel[hidden]{display:none}
/* counter / accordion */
.bx-num{font-size:2.4rem;font-weight:700;line-height:1.1;color:var(--primary)}
.bx-lbl{color:var(--mute,#8a8486);margin-block-start:4px}
.bx-acc-title{margin-block-end:12px}
/* features */
.bx-feat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.bx-feat-cards .f{display:flex;gap:14px;padding:18px;border:1px solid var(--line,#ddd);border-radius:var(--r-lg,18px);background:var(--card-bg,#fff)}
.bx-feat-plain,.bx-feat-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.bx-feat-inline .f{display:flex;align-items:center;gap:10px}
.bx-feat .i{color:var(--primary);flex:none}.bx-feat h3{margin:0 0 4px;font-size:1.05rem}.bx-feat p{margin:0;color:var(--mute,#8a8486)}
/* header */
.header.bx-mode-sticky{position:sticky;top:0;z-index:50}
.header.bx-mode-overlay{position:absolute;inset-inline:0;top:0;z-index:50;background:transparent}
.header.bx-mode-overlay.bx-scrolled{position:fixed;background:var(--bg,#fff)}
.header.bx-blur{backdrop-filter:saturate(1.4) blur(10px)}
.header.bx-noborder{border-block-end:0}
.bx-hin{display:flex;align-items:center;gap:16px;min-height:64px}
.bx-hin.bx-full{padding-inline:20px}
.bx-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
/* animations: content stays visible without JS and under reduced motion */
.bx-js .bx-an{opacity:0;transition:opacity var(--bx-t,600ms) ease var(--bx-d,0ms),transform var(--bx-t,600ms) ease var(--bx-d,0ms)}
.bx-js .bx-an-up{transform:translateY(24px)}.bx-js .bx-an-down{transform:translateY(-24px)}
.bx-js .bx-an-left{transform:translateX(-24px)}.bx-js .bx-an-right{transform:translateX(24px)}
[dir=rtl] .bx-js .bx-an-left{transform:translateX(24px)}[dir=rtl] .bx-js .bx-an-right{transform:translateX(-24px)}
.bx-js .bx-an-zoom{transform:scale(.92)}
.bx-js .bx-an.bx-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.bx-js .bx-an{opacity:1!important;transform:none!important;transition:none!important}}
/* editor canvas helpers (only present inside the authenticated editor iframe) */
.bx-edit [data-bx-id]{outline-offset:-1px}
.bx-edit [data-bx-id]:hover{outline:1px dashed #5b8def}
.bx-edit .bx-an,.bx-edit.bx-js .bx-an{opacity:1!important;transform:none!important}
.bx-edit [data-bx-field]{cursor:text}

.bx-hin .bx-burger-auto{order:-1}
.bx-burger-all{display:grid!important}

.bx-container.bx-full{max-width:none!important;padding-inline:0!important}
.bx-logo{display:block;flex:0 1 auto;min-width:0;max-width:100%}
.bx-logo img{display:block;width:min(var(--bx-lw,150px),100%);height:auto;max-width:100%}
@media(max-width:780px){.bx-logo img{width:min(var(--bx-lwm,var(--bx-lw,150px)),100%)}}
/* footer groups that have nothing configured (no phone, no social account…) disappear instead of leaving a hole */
footer .bx-contact:empty,footer .social:empty{display:none}
footer div:has(>.bx-contact:empty):has(>.social:empty){display:none}
/* a grid of aspect-ratio tiles inside a flex column was measured at a narrower width and overlapped what follows */
.bx-pgwrap{width:100%;min-width:0}
/* link lists honour their direction option (footer columns) */
.bx-links.bx-dir-column{flex-direction:column;align-items:flex-start;gap:2px}
/* 7packz Essential refinements: only where the store carries data-look="essential" (fresh installs); every other store is untouched */
[data-look="essential"] .footer{background:var(--surface);color:var(--ink);border-top:1px solid var(--line)}
[data-look="essential"] .footer h4{color:var(--ink);font-size:1rem;margin-bottom:8px}
[data-look="essential"] .footer a{color:var(--ink)}[data-look="essential"] .footer a:hover{color:var(--primary);text-decoration:underline}
[data-look="essential"] .footer img.fl{filter:none}
[data-look="essential"] .tile::after{background:linear-gradient(to top,rgba(0,0,0,.58),rgba(0,0,0,0) 62%)}
[data-look="essential"] .tile span{color:#fff}
/* Essential header on small screens (like Dawn): menu button at the start, logo in the middle, search and cart at the end */
@media(max-width:780px){
  [data-look="essential"] .bx-hin{position:relative}
  [data-look="essential"] .bx-hin .bx-logo{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%)}
  [dir="rtl"][data-look="essential"] .bx-hin .bx-logo{transform:translate(50%,-50%)}
  [data-look="essential"] .bx-hin .langs{display:none}   /* the language links live in the menu drawer */
}
.bx-wordmark{font-weight:700;font-size:1.35rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
/* a category tile picture always fills its tile (the generic ".bx-page img{height:auto}" used to win and left a dark band) */
.bx-page .tile img{height:100%;object-fit:cover}
[data-look="essential"] .header{background:rgba(255,255,255,.94)}
[data-look="essential"] .topbar{color:#fff}
/* steps: fixed 3 columns (auto-fit inside a flex column made Chromium reserve ~4x the content height) */
.bx-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:780px){.bx-steps{grid-template-columns:minmax(0,1fr)}}