/* Lemona storefront page layout — Phase 1 homepage */
.pg{max-width:var(--container-full);margin:0 auto;padding:0 var(--gutter-mobile)}
@media(min-width:768px){.pg{padding:0 var(--gutter-tablet)}}
@media(min-width:1024px){.pg{padding:0 var(--gutter-desktop)}}
.sec{padding:var(--section-y-mobile) 0}
@media(min-width:1024px){.sec{padding:var(--section-y-desktop) 0}}
.sec--tight{padding:var(--space-8) 0}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
.sec__title{font:var(--text-h2);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.sec__sub{font:var(--text-body-sm);color:var(--color-text-secondary);margin-top:6px}
.sec__link{font:var(--text-label);letter-spacing:var(--tracking-wider);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-transform:uppercase}
.sec__tools{display:none;gap:var(--space-2)}
@media(min-width:768px){.sec__tools{display:flex}}
a{color:var(--ink-900)}a:hover{color:var(--color-primary)}
.lmn-footer a:hover{color:var(--color-primary)}

/* Hero banner carousel */
.hero{position:relative;background:var(--ink-1000);overflow:hidden}
.hero__viewport{position:relative;width:100%;aspect-ratio:4/3}
@media(min-width:768px){.hero__viewport{aspect-ratio:16/9;max-height:660px}}
.hero__track{display:flex;height:100%;width:100%;transition:transform var(--duration-slow,320ms) cubic-bezier(.2,0,.2,1)}
@media(prefers-reduced-motion:reduce){.hero__track{transition:none}}
.hero__slide{position:relative;flex:0 0 100%;height:100%}
.hero__slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(255,255,255,.92);border:none;width:40px;height:40px;border-radius:var(--radius-sm);display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-1000);transition:background var(--duration-fast,120ms) linear}
@media(min-width:768px){.hero__nav{display:flex}}
.hero__nav:hover{background:#fff}
.hero__nav--prev{left:var(--space-4)}.hero__nav--next{right:var(--space-4)}
.hero__dots{position:absolute;left:0;right:0;bottom:var(--space-4);display:flex;justify-content:center;gap:8px;z-index:2}
.hero__dot{width:26px;height:3px;border:none;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:background var(--duration-fast,120ms) linear}
.hero__dot[aria-current="true"]{background:var(--color-primary)}
.hero__slot{position:absolute;inset:0}

/* Rails */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:64%;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:var(--space-2);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media(min-width:768px){.rail{grid-auto-columns:34%;gap:var(--space-5)}}
@media(min-width:1024px){.rail{grid-auto-columns:calc(25% - var(--space-5) * 3 / 4)}}
.catrail{grid-auto-columns:38%}
@media(min-width:768px){.catrail{grid-auto-columns:22%}}
@media(min-width:1024px){.catrail{grid-auto-columns:calc(16.666% - var(--space-5) * 5 / 6);overflow-x:visible}}

/* Image gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media(min-width:1024px){.gallery{grid-template-columns:repeat(4,1fr);gap:var(--space-4)}}
.gallery__tile{position:relative;aspect-ratio:3/4;border-radius:var(--radius-sm);overflow:hidden}
.gallery__cap{position:absolute;left:0;right:0;bottom:0;padding:var(--space-4);pointer-events:none;background:linear-gradient(0deg,rgba(11,11,12,.78),transparent);color:var(--white);font:var(--text-label);letter-spacing:var(--tracking-wider);text-transform:uppercase}

/* Benefits band */
.benefits{background:var(--ink-1000);color:var(--white)}
.benefits__grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-10) 0}
@media(min-width:768px){.benefits__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-8)}}
.benefit{display:flex;gap:var(--space-4);align-items:flex-start}
.benefit__icon{flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--color-primary);color:var(--ink-1000);display:flex;align-items:center;justify-content:center}
.benefit__title{font:var(--text-h4);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.benefit__copy{font:var(--text-body-sm);color:var(--ink-400);margin-top:4px;max-width:46ch}

/* Phase 1.1 additions */
.hero__viewport--empty{background:var(--ink-100)}
.hero__fallback{display:flex;align-items:center;justify-content:center;background:var(--ink-1000)}
.hero__fallbackInner{text-align:center;padding:var(--space-8);color:var(--white)}
.hero__fallbackTitle{font:var(--text-display);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.hero__fallbackCopy{font:var(--text-body);color:var(--ink-400);margin-top:var(--space-3)}
.hero__slide--broken img{display:none}
.hero__slide--broken{background:var(--ink-900)}
.hero__slide a{display:block;height:100%}
.hero__slide picture{display:block;height:100%}
.gallery__tile img{width:100%;height:100%;object-fit:cover;display:block}
.devnote{background:var(--ink-100);border-bottom:1px solid var(--color-border);color:var(--color-text-secondary);font:var(--text-body-sm);padding:10px var(--gutter-mobile);text-align:center}
.devnote code{font-family:ui-monospace,monospace}

.pdp{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-5)}
@media(min-width:900px){.pdp{grid-template-columns:1.1fr 1fr;gap:var(--space-8)}}
.pdp__info{display:grid;gap:var(--space-4);align-content:start}
.pdp__title{font:var(--text-h2);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.pdp__sub{font:var(--text-body);color:var(--color-text-secondary)}
.pdp__copy{font:var(--text-body);color:var(--color-text-secondary);max-width:60ch}
.pdp__cta{display:grid;gap:var(--space-3)}
@media(min-width:600px){.pdp__cta{grid-template-columns:1fr 1fr}}
.plp{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media(min-width:768px){.plp{grid-template-columns:repeat(3,1fr);gap:var(--space-5)}}
@media(min-width:1200px){.plp{grid-template-columns:repeat(4,1fr)}}