/* ==========================================================================
   Inner pages (About, Services, Prices, Shop, Product, Blog, Post, Contact)
   Built to mirror the NicDark Pastry template page layouts.
   ========================================================================== */

/* ---------- Header dropdown (Shop) ---------- */
.nav .has-sub { position: relative; display: flex; align-items: center; }
.nav .has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 7px; opacity: .6; }
.nav .has-sub .sub { position: absolute; top: 100%; left: 0; min-width: 180px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 0; display: none; z-index: 70; }
.nav .has-sub:hover .sub, .nav .has-sub.open .sub { display: block; }
.nav .has-sub .sub a { display: block; padding: 9px 16px; border: 0; font-size: 14px; }
.nav .has-sub .sub a:hover, .nav .has-sub .sub a.active { background: var(--surface-2); color: var(--cocoa); }
.site-header.is-top .nav .has-sub .sub a { color: var(--body); }
.nav .has-sub.active > a { color: var(--cocoa); border-bottom-color: var(--accent); }

/* ---------- Page band (title over photo) ---------- */
.page-band { position: relative; min-height: 300px; display: flex; align-items: flex-end; background: var(--cocoa) center/cover no-repeat; color: #fff; padding: 110px 0 44px; }
.page-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(83,54,51,.35), rgba(83,54,51,.62)); }
.page-band .container { position: relative; }
.page-band .t-label { color: #F6DCD4; font-size: 22px; margin-bottom: 4px; }
.page-band h1 { color: #fff; font-size: clamp(36px, 4.4vw, 58px); text-shadow: 0 2px 18px rgba(0,0,0,.3); }
.page-band.center { align-items: center; text-align: center; padding: 120px 0 70px; }
.page-band.center p { max-width: 720px; margin: 10px auto 0; color: rgba(255,255,255,.9); font-size: 16px; }
.page-band.center .t-label { display: block; }
.page-band .meta { font-family: var(--font-accent); color: #F6DCD4; font-size: 20px; margin-top: 8px; }

/* ---------- Shop grid (template: 3 columns, image / title / price) ---------- */
.shop-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 36px; }
.shop-tabs .chip { padding: 9px 20px; }
.shop-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .shop-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
.shop-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.shop-card .img { width: 100%; aspect-ratio: 1; overflow: hidden; background: #fff; display: block; }
.shop-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.shop-card:hover .img img { transform: scale(1.04); }
.shop-card .body { padding: 18px 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.shop-card h3 { font-size: 18px; color: var(--rose); font-weight: 700; }
.shop-card h3 a { color: inherit; text-decoration: none !important; }
.shop-card .price { font-family: var(--font-body); font-weight: 700; color: var(--ink); font-size: 16px; }
.shop-card .meta { font-size: 12px; color: var(--muted); }
.shop-card .actions { display: flex; gap: 8px; margin-top: 6px; }
.shop-count { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 18px; }

/* ---------- Product page ---------- */
.product-top { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .product-top { grid-template-columns: 1fr 1fr; gap: 56px; } }
.product-top .gallery { background: #fff; border: 1px solid var(--line); overflow: hidden; aspect-ratio: 1; }
.product-top .gallery img { width: 100%; height: 100%; object-fit: cover; }
.product-top h1 { font-size: clamp(28px, 3vw, 40px); color: var(--rose); margin-bottom: 8px; }
.product-top .price { font-family: var(--font-body); font-size: 26px; font-weight: 700; color: var(--ink); }
.product-top .price small { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.product-top .short { margin: 16px 0 20px; font-size: 15.5px; }
.buy-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.buy-row input { width: 110px; border: 1px solid var(--line-strong); padding: 10px 12px; text-align: center; }
.product-meta { font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 6px; }
.product-meta b { color: var(--ink-2); font-weight: 500; }
.product-tabs { margin-top: 56px; }
.product-tabs h2 { font-size: 28px; color: var(--rose); text-align: left; margin-bottom: 14px; }
.product-tabs h2::after { display: none; }
.spec-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .spec-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- About page ---------- */
.about-who { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .about-who { grid-template-columns: 1fr 1fr; gap: 64px; } }
.about-photos { position: relative; aspect-ratio: 1 / .9; }
.about-photos .p1 { position: absolute; left: 0; top: 10%; width: 56%; height: 78%; background: center/cover no-repeat; border: 7px solid #fff; box-shadow: var(--shadow); }
.about-photos .p2 { position: absolute; right: 2%; top: 0; width: 42%; height: 50%; background: center/cover no-repeat; border: 7px solid #fff; box-shadow: var(--shadow); }
.about-photos .p3 { position: absolute; right: 8%; bottom: 0; width: 36%; height: 36%; background: center/cover no-repeat; border: 7px solid #fff; box-shadow: var(--shadow); }
.team-mosaic { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .team-mosaic { grid-template-columns: 1fr 1.1fr 1fr; } }
.team-card { padding: 40px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.team-card.blush { background: #E6C9C3; color: var(--cocoa); }
.team-card.white { background: #fff; color: var(--body); }
.team-card .avatar { width: 120px; height: 120px; border-radius: 50%; background: var(--surface-2) center/cover no-repeat; border: 6px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; font-family: var(--font-accent); font-size: 40px; color: var(--rose); }
.team-card h3 { font-size: 24px; color: var(--rose); }
.team-card.blush h3 { color: var(--cocoa); }
.team-card p { font-size: 14.5px; margin: 0; }
.team-banner { min-height: 360px; background: center/cover no-repeat; position: relative; display: grid; place-items: center; }
.team-banner::before { content: ""; position: absolute; inset: 0; background: rgba(83,54,51,.45); }
.team-banner h3 { position: relative; color: #fff; font-size: clamp(30px, 3vw, 44px); text-align: center; padding: 0 20px; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.team-grid2 { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-top: 20px; }
@media (max-width: 720px) { .team-grid2 { grid-template-columns: 1fr; } }
.team-small { display: flex; gap: 16px; align-items: center; padding: 18px; background: #fff; border: 1px solid var(--line); }
.team-small .avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-family: var(--font-accent); font-size: 26px; color: var(--rose); }
.team-small h4 { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin-bottom: 2px; }
.team-small p { margin: 0; font-size: 13.5px; }

/* price cards (About / Prices) */
.offer-split { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .offer-split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.offer-photo { background: center/cover no-repeat; min-height: 380px; border: 8px solid #fff; box-shadow: var(--shadow); }
.offer-caption { text-align: center; margin-top: 18px; }
.offer-caption h3 { color: var(--rose); font-size: 24px; margin-bottom: 6px; }
.offer-caption p { font-size: 15px; max-width: 460px; margin: 0 auto; }
.price-cards { display: grid; gap: 14px; }
.price-card { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); padding: 14px 18px; text-decoration: none !important; color: var(--body); transition: transform .2s, box-shadow .2s; }
.price-card:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.price-card.hl { background: #E6C9C3; border-color: #E6C9C3; color: var(--cocoa); }
.price-card .thumb { width: 84px; height: 84px; background: center/cover no-repeat; border: 4px solid #fff; }
.price-card .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.price-card h4 { font-family: var(--font-display); font-size: 17px; color: var(--rose); font-weight: 700; }
.price-card.hl h4 { color: var(--cocoa); }
.price-card .pr { font-family: var(--font-body); font-weight: 700; white-space: nowrap; color: var(--ink); }
.price-card p { margin: 4px 0 0; font-size: 13.5px; }

/* counters band */
.counters-band { position: relative; background: center/cover no-repeat; padding: 70px 0; color: #fff; }
.counters-band::before { content: ""; position: absolute; inset: 0; background: rgba(83,54,51,.55); }
.counters-band .container { position: relative; display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .counters-band .container { grid-template-columns: repeat(4, 1fr); } }
.counter { display: flex; gap: 14px; align-items: center; }
.counter b { font-family: var(--font-display); font-size: 46px; font-weight: 700; line-height: 1; }
.counter span { font-size: 14px; line-height: 1.3; max-width: 160px; }
.counter .acc { display: block; font-family: var(--font-accent); color: #F6DCD4; font-size: 18px; }

/* connect form (About) */
.connect { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .connect { grid-template-columns: 1fr 1fr; } }
.connect .photo { background: center/cover no-repeat; min-height: 360px; }
.connect .form { background: var(--cocoa); color: #fff; padding: 44px 40px; }
.connect .form .field label { color: #F6DCD4; }
.connect .form .input, .connect .form .textarea { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.connect .form .input::placeholder, .connect .form .textarea::placeholder { color: rgba(255,255,255,.5); }

/* ---------- Services page ---------- */
.photo-band { position: relative; background: center/cover no-repeat; padding: 80px 0; color: #fff; }
.photo-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(83,54,51,.85), rgba(83,54,51,.35)); }
.photo-band .container { position: relative; display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .photo-band .container { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.photo-band .t-label { color: #F6DCD4; }
.photo-band h2 { color: #fff; text-align: left; font-size: clamp(30px, 3.2vw, 44px); }
.photo-band h2::after { display: none; }
.photo-band p { color: rgba(255,255,255,.9); max-width: 520px; }
.counter-cards { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.counter-card { background: #fff; color: var(--body); padding: 30px 22px; text-align: center; }
.counter-card:nth-child(2) { margin-top: 36px; }
.counter-card b { display: block; font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--rose); }
.counter-card h4 { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin: 6px 0 4px; }
.counter-card p { font-size: 13.5px; margin: 0; }
.strategy { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .strategy { grid-template-columns: 1fr 1.2fr; gap: 56px; } }
.strategy .photo-small { background: center/cover no-repeat; aspect-ratio: 1; border: 8px solid #fff; box-shadow: var(--shadow); max-width: 420px; }
.strategy .photo-big { background: center/cover no-repeat; aspect-ratio: 4 / 3; border: 8px solid #fff; box-shadow: var(--shadow); }
.strategy h2 { text-align: left; } .strategy h2::after { display: none; }

/* best sellers slider (template testimonials) */
.voices { position: relative; }
.voices-track { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .voices-track { grid-template-columns: repeat(3, 1fr); } }
.voice { background: #fff; border: 1px solid var(--line); padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.voice .avatar { width: 84px; height: 84px; border-radius: 50%; background: center/cover no-repeat; border: 5px solid #fff; box-shadow: var(--shadow); }
.voice p { font-size: 15px; margin: 0; }
.voice b { font-family: var(--font-display); color: var(--rose); font-size: 18px; }
.voice span { font-family: var(--font-accent); color: var(--muted); font-size: 15px; }
.info-boxes { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 800px) { .info-boxes { grid-template-columns: repeat(3, 1fr); } }
.info-box { background: #fff; border: 1px solid var(--line); padding: 26px 22px; text-align: center; }
.info-box .ci { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--cocoa); display: grid; place-items: center; margin: 0 auto 12px; }
.info-box h4 { font-family: var(--font-display); color: var(--rose); font-size: 18px; margin-bottom: 4px; }
.info-box p { margin: 0; font-size: 15px; color: var(--ink); font-weight: 500; }
.info-box a { color: var(--ink); }

/* ---------- Prices page ---------- */
.tiles3 { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tiles3 { grid-template-columns: repeat(3, 1fr); } }
.tile { min-height: 320px; padding: 44px 36px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.tile.photo { background: center/cover no-repeat; position: relative; color: #fff; }
.tile.photo::before { content: ""; position: absolute; inset: 0; background: rgba(83,54,51,.5); }
.tile.photo > * { position: relative; }
.tile.photo h3 { color: #fff; font-size: 30px; }
.tile.white { background: #fff; text-align: center; align-items: center; }
.tile.white h3 { color: var(--rose); font-size: 22px; }
.tile.cocoa { background: var(--cocoa); color: #E9D8D3; text-align: center; align-items: center; }
.tile.cocoa h3 { color: #fff; font-size: 22px; }
.tile p { margin: 0; font-size: 15px; }
.price-table td.num, .price-table th.num { text-align: right; }
.price-table tr.group td { background: var(--surface-2); font-family: var(--font-accent); font-size: 18px; color: var(--rose); }
.price-table td a { color: var(--ink); font-weight: 500; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
.post-card { position: relative; display: block; min-height: 380px; background: center/cover no-repeat; color: #fff; text-decoration: none !important; overflow: hidden; }
.post-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(83,54,51,0) 20%, rgba(83,54,51,.9) 100%); transition: opacity .3s; }
.post-card:hover::before { opacity: .92; }
.post-card .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; }
.post-card .date { display: inline-block; background: var(--accent); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; padding: 4px 10px; margin-bottom: 10px; }
.post-card h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.post-card p { color: rgba(255,255,255,.88); font-size: 14.5px; margin: 0; }
.post-wrap { max-width: 900px; margin: 0 auto; }
.post-wrap h2 { text-align: left; font-size: 30px; margin: 32px 0 12px; }
.post-wrap h2::after { display: none; }
.post-wrap p { font-size: 16px; }
.post-quote { background: #FBF3F1; border-left: 4px solid var(--accent); padding: 22px 26px; margin: 24px 0; }
.post-quote p { font-family: var(--font-body); font-style: italic; font-size: 17px; color: var(--ink); margin: 0 0 8px; }
.post-quote .by { font-family: var(--font-accent); color: var(--rose); font-size: 17px; }
.post-images { display: grid; gap: 20px; grid-template-columns: 1fr; margin: 24px 0; }
@media (min-width: 700px) { .post-images { grid-template-columns: 1fr 1fr; } }
.post-images figure { margin: 0; position: relative; }
.post-images img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.post-images figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; background: linear-gradient(180deg, transparent, rgba(83,54,51,.85)); color: #fff; font-family: var(--font-accent); font-size: 16px; }
.accordion { border-top: 1px solid var(--line); margin: 16px 0 28px; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { cursor: pointer; padding: 14px 0; font-family: var(--font-display); font-weight: 700; color: var(--rose); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.accordion summary::after { content: "+"; font-size: 20px; color: var(--accent-dark); }
.accordion details[open] summary::after { content: "–"; }
.accordion details p { margin: 0 0 14px; font-size: 15px; }
.share { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.share .btn { padding: 8px 14px; }
.post-tag { font-family: var(--font-accent); color: var(--rose); font-size: 18px; }

/* ---------- Contact page ---------- */
.contact-center { max-width: 820px; margin: 0 auto; }
.contact-center .section-head { margin-bottom: 30px; }
.map-band { position: relative; min-height: 460px; background: #EDE6E3; }
.map-band iframe { width: 100%; height: 460px; border: 0; display: block; filter: grayscale(1) contrast(.95); }
.map-card { position: absolute; left: 24px; top: 24px; width: min(360px, calc(100% - 48px)); background: #fff; padding: 22px 24px; box-shadow: var(--shadow-lg); font-size: 14px; }
.map-card b { display: block; font-family: var(--font-display); color: var(--ink); font-size: 17px; }
.map-card .lbl { font-family: var(--font-accent); color: var(--rose); font-size: 16px; margin-top: 10px; display: block; }
.gateway { padding: 70px 0 0; text-align: center; overflow: hidden; }
.marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; margin-top: 36px; }
.marquee span { display: inline-block; font-family: var(--font-accent); font-size: 24px; color: var(--rose); animation: marquee 30s linear infinite; padding-left: 100%; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.rfq-section { max-width: 820px; margin: 0 auto 40px; }
.rfq-section .price-block { max-width: none; }

/* ---------- Home additions ---------- */
.home-shop .shop-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 960px) { .home-shop .shop-grid { grid-template-columns: repeat(3, 1fr); } }
.center-cta { text-align: center; margin-top: 32px; }

/* ---------- Mobile fixes: shop cards must shrink to their columns; bottom bars must not overlap ---------- */
.shop-grid > *, .blog-grid > *, .services-grid > *, .price-cards > *, .voices-track > * { min-width: 0; }
.shop-card .actions { flex-wrap: wrap; justify-content: center; width: 100%; }
.shop-card .actions .btn { white-space: normal; flex: 1 1 120px; }
.shop-card h3 { overflow-wrap: anywhere; }
@media (max-width: 560px) { .home-shop .shop-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  .rfq-bar { left: 16px; right: 16px; bottom: 84px; max-width: none; transform: translateY(120px); border-radius: 14px; }
  .rfq-bar.show { transform: none; }
}
@media (max-width: 560px) { .chat-launcher span:last-child { display: none; } .chat-launcher { padding: 13px 16px; } }

/* ==========================================================================
   v4 — client revisions: white logo, wider hero titles + CTAs, timeline,
   floral backgrounds, service icons, inquiry popup, demo-style blog & footer
   ========================================================================== */

/* ---------- Hero: two-line titles + call-to-action buttons ---------- */
.hero-stage h1, .hero-stage .stage-title { max-width: min(1120px, 94vw); font-size: clamp(30px, 4.3vw, 64px); text-wrap: balance; }
.hero-stage .cta { justify-content: center; margin-top: 30px; }
.hero-stage .btn-glass { border: 1px solid rgba(255,255,255,.75); }
@media (max-width: 720px) {
  .hero-stage h1, .hero-stage .stage-title { font-size: clamp(26px, 7.6vw, 36px); }
  .hero-stage .cta { margin-top: 20px; gap: 10px; }
  .hero-stage .cta .btn-lg { padding: 12px 18px; font-size: 13px; }
}

/* ---------- Floral line-art: the client's background images replace the SVG sprigs ---------- */
.floral { display: none !important; }
#about, .floral-bg-1 { background: #fff url(../assets/floral/floral-1.jpg) center bottom / cover no-repeat; }
#services, .floral-bg-2 { background: #fff url(../assets/floral/floral-2.jpg) center top / cover no-repeat; }
.tile-text, .contact-card, .floral-bg-3 { background: #fff url(../assets/floral/floral-3.jpg) center top / cover no-repeat; }

/* ---------- About: fourth collage photo + timeline under text and images ---------- */
.collage .ph.d { left: 38%; bottom: 0; width: 34%; height: 28%; z-index: 2; }
.timeline { list-style: none; margin: 72px 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; position: relative; }
.timeline li { position: relative; padding: 0 0 26px 38px; }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: -8px; width: 2px; background: var(--accent-soft); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-sizing: border-box; }
.timeline b { display: block; font-family: var(--font-accent); font-weight: 400; font-size: 26px; line-height: 1; color: var(--rose); margin-bottom: 8px; }
.timeline p { margin: 0; font-size: 14.5px; color: var(--body); }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .timeline li { padding: 40px 0 0; text-align: center; }
  .timeline li::before { left: 50%; right: -24px; top: 7px; bottom: auto; width: auto; height: 2px; }
  .timeline li::after { left: 50%; top: 0; margin-left: -8px; }
  .timeline b { margin-top: 4px; }
}

/* ---------- Product lines: no dead space above the text ---------- */
.tile-text { padding: 40px 44px; justify-content: center; }
.tile-text .t-label { margin-top: 0; }
@media (min-width: 900px) { .mosaic > * { min-height: 360px; } }

/* ---------- Services: client's sketched icons (blob is part of the image) ---------- */
.svc-icon { width: 118px; height: 118px; margin: 0 auto 14px; transition: transform .3s; }
.svc-icon img { width: 100%; height: 100%; object-fit: contain; }
.svc:hover .svc-icon { transform: rotate(-4deg) scale(1.05); }

/* ---------- Shop teaser: line switch on top, no prices on cards ---------- */
.shop-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: -6px 0 34px; }
.shop-card .price { display: none; }

/* ---------- "Send inquiry" button: inline confirmation instead of a toast ---------- */
.add-btn { position: relative; overflow: hidden; }
.add-btn .lbl, .add-btn .ok { display: inline-flex; align-items: center; gap: 6px; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.add-btn .ok { position: absolute; inset: 0; justify-content: center; transform: translateY(110%); opacity: 0; }
.add-btn .ok svg { width: 16px; height: 16px; }
.add-btn.is-added { background: var(--cocoa); border-color: var(--cocoa); animation: add-pop .45s ease-out; }
.add-btn.is-added .lbl { transform: translateY(-110%); opacity: 0; }
.add-btn.is-added .ok { transform: none; opacity: 1; }
@keyframes add-pop { 0% { transform: scale(1); } 35% { transform: scale(.94); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .add-btn.is-added { animation: none; } }

/* ---------- Home contact: static, like the demo ---------- */
.contact-side .phone-bar { display: inline-flex; align-items: baseline; gap: 14px; margin-top: 26px; padding: 14px 26px; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 24px; font-weight: 500; box-shadow: var(--shadow-lg); }
.contact-side .phone-bar small { font-family: var(--font-accent); font-size: 18px; }
.contact-side .phone-bar a { color: #fff; text-decoration: none !important; }

/* ---------- Inquiry popup ---------- */
.inquiry .iq-items { margin-bottom: 22px; }
.inquiry .iq-items h4 { font-family: var(--font-accent); font-weight: 400; color: var(--rose); font-size: 20px; margin-bottom: 10px; }
.inquiry .iq-empty { margin: 0; padding: 14px 16px; background: #FBF3F1; border-left: 3px solid var(--accent); font-size: 14.5px; }
.inquiry .rfq-summary { margin-top: 10px; }
.iq-status { min-height: 18px; font-size: 13px; }
.iq-status.err { color: var(--red); }
.iq-done { text-align: center; padding: 26px 10px; }
.iq-done svg { width: 54px; height: 54px; padding: 12px; border-radius: 50%; background: var(--accent-soft); color: var(--cocoa); margin-bottom: 12px; }
.iq-done h3 { color: var(--rose); font-size: 26px; margin-bottom: 6px; }

/* ---------- Blog cards (demo: 2 columns, tinted photo, blush date pill) ---------- */
.blog-grid { gap: 44px; }
.post-card { min-height: 420px; }
@media (min-width: 800px) { .post-card { min-height: 560px; } }
.post-card::before { background: linear-gradient(180deg, rgba(60,45,43,.18) 0%, rgba(60,45,43,.38) 45%, rgba(60,45,43,.72) 100%); }
.post-card .body { padding: 44px; }
.post-card .date { background: var(--accent); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .14em; padding: 8px 18px; margin-bottom: 20px; }
.post-card h3 { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 18px; }
.post-card p { font-size: 16.5px; line-height: 1.65; max-width: 860px; }
@media (max-width: 560px) { .post-card .body { padding: 26px; } }

/* ---------- Footer: light, with a thin cocoa bar at the very bottom ---------- */
.site-footer { background: #FBF3F1 url(../assets/floral/floral-3.jpg) center top / cover no-repeat; color: var(--body); padding: 80px 0 0; }
.site-footer h4 { color: var(--rose); }
.site-footer a { color: var(--body); }
.site-footer a:hover { color: var(--cocoa); }
.site-footer .logo-foot { background: none; padding: 0; height: 64px; }
.site-footer .t-label { color: var(--rose); }
.site-footer .social a { border-color: var(--accent); color: var(--cocoa); }
.site-footer .social a:hover { background: var(--accent); color: #fff; }
.site-footer .foot-bar { margin-top: 64px; background: var(--cocoa); color: #E9D8D3; font-family: var(--font-body); font-size: 12.5px; }
.site-footer .foot-bar .container { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
/* keep floating widgets out of the way while a popup is open */
body:has(.modal-backdrop.open) .chat-launcher, body:has(.modal-backdrop.open) .rfq-bar { visibility: hidden; }
.shop-card .actions { flex-wrap: wrap; justify-content: center; }
.shop-card .actions .btn { white-space: nowrap; flex: 1 1 auto; }
/* overflow:hidden (for the "Добавено" slide) lets the flex item shrink below its label — keep the label width so the button wraps to its own row instead of clipping */
.shop-card .actions .add-btn { min-width: max-content; }
/* empty basket: the bar must be fully hidden, not just slid down (it peeked out on phones) */
.rfq-bar:not(.show) { visibility: hidden; opacity: 0; transition: transform .25s, opacity .25s, visibility 0s .25s; }

/* ==========================================================================
   v5 — client revisions: sticky glass header, simpler forms, shop filters,
   icon-only chat, visible inquiry bar, partner logo strip, map lock
   ========================================================================== */

/* ---------- Header: thin matte-glass bar once the page really scrolls ---------- */
body:not(.admin) .site-header.is-stuck { position: fixed; background: rgba(58, 38, 36, .46); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: 0 6px 24px rgba(40,25,23,.18); animation: header-in .35s ease-out; }
body:not(.admin) .site-header.is-stuck .bar { height: 62px; }
body:not(.admin) .site-header.is-stuck .brand .logo { height: 40px; }
@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { body:not(.admin) .site-header.is-stuck { animation: none; } }

/* ---------- Home contact: wider, simpler form ---------- */
@media (min-width: 1000px) { .contact-hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } }
.contact-card { padding: 44px 48px; }
@media (max-width: 560px) { .contact-card { padding: 30px 22px; } }

/* ---------- Chat: icon-only launcher ---------- */
.chat-launcher { width: 58px; height: 58px; padding: 0; justify-content: center; gap: 0; }
.chat-launcher svg { width: 24px; height: 24px; }
.chat-launcher .pulse { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border: 2px solid #fff; }
@media (max-width: 560px) { .chat-launcher { padding: 0; } }

/* ---------- Inquiry bar: warm sesame colour so it stands out from the cocoa/blush page ---------- */
.rfq-bar { background: #C27838; box-shadow: 0 14px 34px rgba(150, 85, 30, .4); }
.rfq-bar .count { background: #fff; color: #A3601F; }
.rfq-bar .btn-primary { background: #fff; color: var(--cocoa); }
.rfq-bar .btn-primary:hover { background: var(--cocoa); color: #fff; }

/* ---------- Shop filters ---------- */
.shop-lines { margin-bottom: 14px; }
.shop-lines .chip { padding: 11px 26px; font-size: 14px; }
.shop-switch .btn { min-width: 130px; }

/* ---------- Product page spacing ---------- */
.nutri-title { font-family: var(--font-accent); font-weight: 400; color: var(--rose); font-size: 22px; margin: 40px 0 18px; }
input[type="number"] { padding-right: 8px; }
input[type="number"]::-webkit-inner-spin-button { margin-left: 12px; }
.rfq-item input { width: 104px; }
.buy-row input[type="number"] { width: 120px; }

/* ---------- Contact page: map ignores the wheel until clicked ---------- */
.map-unlock { position: absolute; inset: 0; z-index: 1; width: 100%; border: 0; background: transparent; cursor: pointer; font-family: var(--font-body); font-size: 14px; color: #fff; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; }
.map-unlock { color: transparent; }
.map-band:hover .map-unlock { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); background: linear-gradient(180deg, rgba(83,54,51,0) 70%, rgba(83,54,51,.35)); }
.map-band.active .map-unlock { display: none; }
.map-card { z-index: 2; }

/* ---------- Contact page: endless partner logo strip (single colour via mask) ---------- */
.logo-marquee { overflow: hidden; margin-top: 36px; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee .track { display: flex; width: max-content; animation: logo-loop 32s linear infinite; }
.logo-marquee:hover .track { animation-play-state: paused; }
.logo-marquee .set { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
.logo-marquee .pl { display: block; width: 190px; height: 58px; background-color: var(--rose); -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
@keyframes logo-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-marquee .track { animation-duration: 90s; } }
/* quick call-back popup: compact */
.modal:has(.quick-form) { max-width: 440px; }
.quick-lead { margin: 0 0 16px; font-size: 14.5px; }
.quick-form { display: grid; gap: 16px; }
@media (max-width: 560px) { .shop-switch { gap: 8px; } .shop-switch .btn { min-width: 0; flex: 1; padding: 11px 8px; } }

/* ==========================================================================
   v6 — menu pinned over the home video, blog cards, social icons, admin login
   ========================================================================== */
/* Home: the original menu stays visible through the video animation, then turns into the glass bar */
body:not(.admin) .site-header.on-hero { position: fixed; }
body:not(.admin) .site-header.on-hero.is-stuck { animation: none; }
body:not(.admin) .site-header.on-hero .bar, body:not(.admin) .site-header.on-hero .brand .logo { transition: height .3s ease; }
/* Blog cards: title only (1.4vw, never below 18px) */
.post-card h3 { font-size: max(18px, 1.4vw); margin-bottom: 0; }
.post-card p { display: none; }
@media (min-width: 800px) { .post-card { min-height: 460px; } }
/* Footer social icons */
.site-footer .social a { cursor: pointer; }
.site-footer .social a[aria-disabled="true"] { cursor: default; }
.site-footer .social svg { display: block; }

/* ==========================================================================
   v7 — about page (timeline, team, offer slider), voices, blog overlay
   ========================================================================== */
/* About: timeline full width under text + photos (same component as home) */
.about-who + .timeline { margin-top: 64px; }

/* Team (demo layout): coloured member columns, tall photo in the middle with the one CTA */
@media (min-width: 900px) { .team-mosaic { grid-template-columns: 1fr 1fr 1fr; } .team-mosaic > * { min-height: 640px; } }
.team-card { justify-content: center; padding: 56px 40px; gap: 14px; }
.team-card.cocoa { background: var(--cocoa); color: #E9D8D3; }
.team-card.cocoa h3 { color: #F6DCD4; }
.team-card .portrait { width: min(240px, 70%); aspect-ratio: 3 / 4; background: rgba(255,255,255,.35) center / cover no-repeat; display: grid; place-items: center; margin-bottom: 14px; box-shadow: 0 14px 34px rgba(40,25,23,.18); }
.team-card .portrait:not([style])::after { content: attr(data-initial); font-family: var(--font-accent); font-size: 64px; color: rgba(255,255,255,.85); }
.team-card h3 { font-size: 26px; font-weight: 500; }
.team-card p { max-width: 340px; font-size: 15px; line-height: 1.7; }
.team-banner { place-items: end center; }
.team-banner::before { background: linear-gradient(180deg, rgba(83,54,51,0) 35%, rgba(83,54,51,.7) 100%); }
.team-banner .tb-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 24px 56px; text-align: center; }
.team-banner h3 { padding: 0; }
.team-small .avatar { background: var(--accent-soft) center / cover no-repeat; }

/* Offer: slider levelled with the three wholesale cards */
@media (min-width: 1000px) {
  .offer-split { grid-template-columns: 1fr 1fr; grid-template-areas: ". label" "slider cards" "caption ."; align-items: stretch; row-gap: 14px; }
  .offer-label { grid-area: label; margin: 0; }
  .offer-slider { grid-area: slider; }
  .offer-cards { grid-area: cards; display: flex; }
  .offer-cards .price-cards { flex: 1; grid-auto-rows: 1fr; }
  .offer-caption { grid-area: caption; margin-top: 10px; }
}
.offer-slider { position: relative; min-height: 380px; border: 8px solid #fff; box-shadow: var(--shadow); overflow: hidden; background: #fff; }
.offer-slider .slide { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1.04); transition: opacity .9s ease, transform 6s ease; }
.offer-slider .slide.on { opacity: 1; transform: scale(1); }
.offer-slider .dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; z-index: 1; }
.offer-slider .dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; }
.offer-slider .dots button.on { background: #fff; }

/* Services "best sellers": three cards, large round photos */
.voice { padding: 40px 28px 34px; gap: 14px; }
.voice .avatar { width: 200px; height: 200px; border-width: 8px; margin-bottom: 8px; }

/* Blog cards: tint only towards the bottom, clear at the top */
.post-card::before { background: linear-gradient(180deg, rgba(60,45,43,0) 0%, rgba(60,45,43,0) 35%, rgba(60,45,43,.72) 100%); }

/* ==========================================================================
   Hero — scroll-scrubbed video, fracture title bursting into particles,
   centre-channel reveal. Pinned by ScrollTrigger for +=250% (js/modules/hero.js).
   ========================================================================== */
.hero-cine { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; color: #FFFDF9;
  background: #1C120C url(../assets/hero-poster.jpg) center / cover no-repeat; }
.hc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* moody edges, clear golden centre */
.fr-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at center, transparent 35%, rgba(10, 6, 4, .75) 100%); }

/* Fracture title — two words that slide apart, then burst into gold particles */
.hero-fracture-title { position: absolute; inset: 0; z-index: 10; margin: 0; display: flex; align-items: center; justify-content: center; gap: .22em; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 7.5vw, 7.5rem); letter-spacing: -0.03em; line-height: .95; text-align: center; }
.hero-fracture-title > span { position: relative; display: inline-block; white-space: nowrap; padding: .08em .03em; will-change: transform; }
.fracture-left { transform-origin: 100% 50%; }
.fracture-right { transform-origin: 0% 50%; }
/* Each letter carries the champagne gradient. The gradient only paints the letter's box, so the box is
   grown above and below (and pulled back with negative margins) to keep descenders such as "д" whole. */
.fr-char { display: inline-block; padding: .14em 0 .24em; margin: -.14em 0 -.24em; will-change: transform, opacity, filter;
  background: linear-gradient(180deg, #FFFDF9 0%, #F5E1C8 60%, #D4AF7A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: blur(calc(var(--fr-cblur, 0) * 1px)) drop-shadow(0 12px 40px rgba(0, 0, 0, .75)); }
.fr-dust { position: absolute; display: block; border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(circle, #FFF6E2 0%, #F2D3A0 45%, rgba(212, 175, 122, 0) 72%); box-shadow: 0 0 10px 1px rgba(255, 220, 160, .85); }

/* Centre channel — eyebrow, subheading, glass CTA in the gap between the meringues */
.hero-center-channel { position: absolute; left: 50%; top: 50%; z-index: 20; width: min(460px, 86vw); max-width: 460px; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.hero-cine:not(.hc-ready):not(.hc-static) .hero-center-channel > * { opacity: 0; } /* no flash before GSAP sets the start state */
.channel-eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #F5E1C8;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255, 218, 165, .42); }
.channel-subtext { margin: 0; font-family: var(--font-accent); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.3; color: #F5E1C8; text-wrap: balance; }
.channel-eyebrow, .channel-subtext { filter: blur(calc(var(--fr-blur, 0) * 1px)) drop-shadow(0 6px 22px rgba(0, 0, 0, .8)); }
.channel-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 34px; margin-top: 4px; border-radius: 999px;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: .03em; color: #FFFDF9 !important; text-decoration: none !important;
  background: rgba(25, 16, 10, .58); border: 1px solid rgba(255, 218, 165, .42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, .18), inset 0 -1px 0 rgba(0, 0, 0, .25);
  filter: blur(calc(var(--fr-blur, 0) * 1px)); transition: box-shadow .35s ease, border-color .35s ease; will-change: transform; }
.channel-cta:hover, .channel-cta:focus-visible, .channel-cta.is-magnet { border-color: rgba(255, 218, 165, .75);
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, .22), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 28px rgba(230, 180, 100, .38); }
.channel-cta:focus-visible { outline: 2px solid #F5E1C8; outline-offset: 3px; }

/* Phones (< 768px): words stack with tight leading, smaller type, gentler drift (set in hero.js) */
@media (max-width: 767px) {
  .hero-fracture-title { flex-direction: column; gap: 0; font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .fracture-left, .fracture-right { transform-origin: 50% 50%; }
  .hero-center-channel { gap: 14px; }
}

/* Reduced motion (or no GSAP): calm static hero — poster, eyebrow, subheading and CTA */
.hero-cine.hc-static .hero-fracture-title, .hero-cine.hc-static .hc-video { display: none; }