/* ═══════════════════════════════════════════════════
   PRIMO — Belcanto HoReCa Design System v6.0
   Navy · Copper · Cream · Editorial Luxury
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Hind:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--fb); font-size: 15px; line-height: 1.65; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: var(--fb); }
input, textarea, select { font-family: var(--fb); }

/* ── TOKENS ── */
:root {
    --navy:    #0D1B2E;
    --navy2:   #162845;
    --copper:  #C4803A;
    --copper2: #A3652A;
    --cream:   #FAF8F3;
    --pale:    #EEF0F5;
    --ink:     #141E2E;
    --mid:     #6B7C9A;
    --rule:    #D4D8E4;
    --sand:    #E8E4D8;
    --ok:      #2E7D32;
    --fd: 'Libre Baskerville', Georgia, serif;
    --fb: 'Hind', system-ui, sans-serif;
    --fm: 'IBM Plex Mono', 'Courier New', monospace;
    --tr: 0.2s ease;
    --shadow: 0 2px 16px rgba(13,27,46,.10);
    --shadow-lg: 0 8px 40px rgba(13,27,46,.15);
}

/* CONTAINER */
.container { max-width: 1340px; margin: 0 auto; padding: 0 32px; }
@media(max-width:767px) { .container { padding: 0 18px; } }

/* ── TOP STRIP ── */
.top-strip {
    background: var(--navy);
    border-bottom: 1px solid var(--navy2);
    height: 38px;
    display: flex; align-items: center; overflow: hidden;
}
.top-strip__inner {
    display: flex; align-items: center; width: 100%;
    justify-content: space-between; padding: 0 32px;
}
.top-strip__left {
    display: flex; align-items: center; overflow: hidden; flex: 1;
}
.top-strip__marquee {
    display: flex; gap: 0; animation: ts-scroll 32s linear infinite;
    width: max-content; white-space: nowrap;
}
.top-strip__item {
    font-family: var(--fm); font-size: 10px;
    color: rgba(255,255,255,.5); letter-spacing: .16em;
    text-transform: uppercase; padding: 0 40px;
    display: flex; align-items: center; gap: 16px;
}
.top-strip__item::before { content: '✦'; color: var(--copper); font-size: 7px; }
@keyframes ts-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.top-strip__right {
    display: flex; align-items: center; gap: 20px;
    flex-shrink: 0;
}
.top-strip__right a {
    font-family: var(--fm); font-size: 10px; color: rgba(255,255,255,.4);
    letter-spacing: .14em; text-transform: uppercase; transition: color var(--tr);
    text-decoration: none;
}
.top-strip__right a:hover { color: rgba(255,255,255,.8); }
@media(max-width:767px) { .top-strip__right { display: none; } }

/* ── HEADER ── */
.site-header { background: var(--cream); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 200; }
.header-main { display: grid; grid-template-columns: 220px 1fr 220px; align-items: center; height: 76px; }

.logo { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; padding: 0 0 0 0; }
.logo__name { font-family: var(--fd); font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; line-height: 1; }
.logo__sub { font-family: var(--fm); font-size: 9px; font-weight: 400; color: var(--copper); letter-spacing: .28em; text-transform: uppercase; margin-top: 3px; }

.header-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 0; height: 76px; overflow-x: auto; scrollbar-width: none;
}
.header-nav::-webkit-scrollbar { display: none; }
.nav-item {
    display: flex; align-items: center; height: 76px; padding: 0 20px;
    font-family: var(--fb); font-size: 12px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--mid);
    white-space: nowrap; border-bottom: 2px solid transparent;
    transition: color var(--tr), border-color var(--tr); text-decoration: none;
}
.nav-item:hover { color: var(--navy); }
.nav-item.active { color: var(--navy); border-bottom-color: var(--copper); font-weight: 600; }
.nav-item.b2b { color: var(--copper); font-weight: 600; }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0; padding-right: 0; }
.h-btn {
    width: 52px; height: 76px; border: none; background: transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--mid); border-left: 1px solid var(--rule);
    transition: color var(--tr), background var(--tr); text-decoration: none;
    cursor: pointer; position: relative;
}
.h-btn:hover { color: var(--navy); background: var(--pale); }
.h-btn:first-child { border-left: none; }
.cart-dot {
    position: absolute; top: 18px; right: 10px;
    width: 16px; height: 16px; background: var(--copper); color: #fff;
    font-family: var(--fm); font-size: 9px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.mob-btn {
    display: none; width: 52px; height: 76px; border: none; border-left: 1px solid var(--rule);
    background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
}
.mob-btn span { display: block; width: 20px; height: 1.5px; background: var(--navy); }

/* OFFCANVAS */
.oc-overlay { display: none; position: fixed; inset: 0; background: rgba(13,27,46,.5); z-index: 300; }
.oc-overlay.open { display: block; }
.oc-nav { position: fixed; left: 0; top: 0; bottom: 0; width: 300px; max-width: 90vw; background: var(--cream); z-index: 301; border-right: 2px solid var(--navy); transform: translateX(-110%); transition: transform .3s cubic-bezier(.16,1,.3,1); overflow-y: auto; }
.oc-nav.open { transform: translateX(0); }
.oc-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--rule); }
.oc-close { width: 34px; height: 34px; border: 1px solid var(--rule); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; color: var(--navy); transition: all var(--tr); }
.oc-close:hover { background: var(--navy); color: #fff; }
.oc-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: background var(--tr); }
.oc-link:hover { background: var(--pale); }

/* FLASH */
.flash { position: fixed; bottom: 24px; right: 24px; z-index: 9999; background: var(--navy); color: #fff; border-left: 4px solid var(--copper); padding: 14px 20px; font-size: 13px; max-width: 340px; display: none; box-shadow: var(--shadow-lg); }
.flash a { color: rgba(255,255,255,.75); text-decoration: underline; }

/* ── FOOTER ── */
.site-footer { background: var(--navy); color: rgba(255,255,255,.65); margin-top: 0; }
.footer-top { border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 56px 0; gap: 0; }
.f-col { padding-right: 48px; }
.f-col:not(:first-child) { border-left: 1px solid rgba(255,255,255,.08); padding-left: 40px; padding-right: 20px; }
.f-logo { font-family: var(--fd); font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.f-logo-sub { font-family: var(--fm); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--copper); margin-bottom: 16px; }
.f-desc { font-size: 13px; line-height: 1.75; max-width: 270px; margin-bottom: 24px; }
.f-socials { display: flex; gap: 8px; }
.f-soc { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(255,255,255,.4); transition: all var(--tr); text-decoration: none; }
.f-soc:hover { background: var(--copper); border-color: var(--copper); color: #fff; }
.f-col-h { font-family: var(--fb); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.9); margin-bottom: 18px; }
.f-links { display: flex; flex-direction: column; gap: 10px; }
.f-link { font-size: 13px; color: rgba(255,255,255,.45); text-decoration: none; transition: color var(--tr); display: flex; align-items: center; gap: 7px; }
.f-link::before { content: '→'; color: var(--copper); font-size: 10px; }
.f-link:hover { color: #fff; }
.f-bottom { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; flex-wrap: wrap; gap: 10px; }
.f-copy { font-family: var(--fm); font-size: 10px; color: rgba(255,255,255,.25); letter-spacing: .1em; }
.f-badges { display: flex; gap: 8px; }
.f-badge { border: 1px solid rgba(255,255,255,.12); padding: 4px 10px; font-family: var(--fm); font-size: 9px; color: rgba(255,255,255,.3); letter-spacing: .12em; text-transform: uppercase; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 28px; font-family: var(--fb); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid; cursor: pointer; transition: all var(--tr); text-decoration: none; white-space: nowrap; }
.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy2); border-color: var(--navy2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--copper { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn--copper:hover { background: var(--copper2); border-color: var(--copper2); }
.btn--outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--outline-w { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn--outline-w:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn--lg { height: 56px; padding: 0 36px; font-size: 13px; }
.btn--sm { height: 38px; padding: 0 18px; font-size: 11px; }

/* ── PRODUCT CARD ── */
.pc {
    background: #fff; border: 1px solid var(--rule);
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    transition: box-shadow var(--tr), transform var(--tr);
    position: relative; overflow: hidden;
}
.pc:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.pc__img { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--pale); position: relative; }
.pc__img img { width: 100%; height: 100%; object-fit: contain; padding: 20px; transition: transform .7s ease; }
.pc:hover .pc__img img { transform: scale(1.07); }
.pc__num { position: absolute; top: 10px; left: 12px; font-family: var(--fm); font-size: 10px; color: var(--mid); letter-spacing: .1em; }
.pc__badge { position: absolute; top: 0; right: 0; background: var(--copper); color: #fff; font-family: var(--fm); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; }
.pc__fav { position: absolute; bottom: 10px; right: 10px; width: 32px; height: 32px; background: #fff; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--mid); cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s, all .2s; }
.pc:hover .pc__fav { opacity: 1; transform: translateY(0); }
.pc__fav:hover, .pc__fav.wl-active { background: var(--copper); border-color: var(--copper); color: #fff; }

.pc__body { padding: 18px 20px 22px; border-top: 1px solid var(--rule); flex: 1; display: flex; flex-direction: column; }
.pc__cat { font-family: var(--fm); font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); margin-bottom: 7px; }
.pc__name { font-family: var(--fd); font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--navy); margin-bottom: 6px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc__pkg { font-family: var(--fm); font-size: 11px; color: var(--mid); letter-spacing: .04em; margin-bottom: 16px; }
.pc__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.pc__price { font-family: var(--fm); font-size: 20px; font-weight: 500; color: var(--navy); }
.pc__price sup { font-size: 12px; font-weight: 400; color: var(--mid); }
.pc__add { width: 38px; height: 38px; background: var(--navy); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; flex-shrink: 0; transition: background var(--tr), transform .25s ease; }
.pc__add:hover { background: var(--copper); transform: rotate(90deg); }

/* GRID */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media(max-width:1199px) { .products-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:575px) { .products-grid { grid-template-columns: repeat(2,1fr); gap: 12px; } }

/* LIST VIEW */
.products-grid.list-v { grid-template-columns: 1fr; gap: 0; }
.products-grid.list-v .pc { flex-direction: row; border-bottom: none; border-top: 1px solid var(--rule); box-shadow: none; }
.products-grid.list-v .pc:first-child { border-top: none; }
.products-grid.list-v .pc:hover { transform: none; box-shadow: var(--shadow); }
.products-grid.list-v .pc__img { width: 120px; aspect-ratio: 1/1; flex-shrink: 0; border-right: 1px solid var(--rule); }
.products-grid.list-v .pc__img img { padding: 10px; }
.products-grid.list-v .pc__body { border-top: none; flex-direction: row; align-items: center; gap: 20px; padding: 16px 24px; }
.products-grid.list-v .pc__main { flex: 1; }
.products-grid.list-v .pc__name { -webkit-line-clamp: 1; }
.products-grid.list-v .pc__foot { flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

/* PAGINATION */
.pag { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; }
.pag a, .pag span { width: 40px; height: 40px; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-family: var(--fm); font-size: 12px; color: var(--mid); text-decoration: none; transition: all var(--tr); background: #fff; }
.pag a:hover { border-color: var(--navy); color: var(--navy); }
.pag a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pag span { cursor: default; border-color: transparent; background: transparent; }

/* UTILS */
.section-label { font-family: var(--fm); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--copper); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.section-label::before { content: ''; width: 28px; height: 1.5px; background: var(--copper); }
.section-h { font-family: var(--fd); font-size: clamp(30px,4vw,52px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--navy); }
.section-h em { font-style: italic; color: var(--copper); }

/* RESPONSIVE */
@media(max-width:991px) { .header-nav { display: none; } .logo { padding-left: 0; } .header-main { grid-template-columns: 1fr auto; } .mob-btn { display: flex; } .footer-grid { grid-template-columns: 1fr 1fr; } .f-col { padding-right: 24px; } }
@media(max-width:767px) { .footer-grid { grid-template-columns: 1fr; } .f-col:not(:first-child) { border-left: none; border-top: 1px solid rgba(255,255,255,.08); padding-left: 0; padding-top: 32px; } .f-col { padding-bottom: 0; } }