/* Private label page: phone layout (loaded with media="(max-width: 760px)").
   The export is a desktop composition (absolute positions in vw/vh, one screen per section); on phones every
   section is re-stacked into a vertical flow. Animation values written by page4.js are kept where they still apply. */

#dc-root section > div { will-change: auto; }

/* 2 · From concept to shelf: title, then each card as its own block, then the tagline + button centred */
#sv-path { height: auto !important; }
#sv-path > div { position: relative !important; height: auto !important; overflow: visible !important; display: flex; flex-direction: column; padding: 0 20px; }
#sv-path > div > div:nth-child(1) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 18px !important; min-height: 64vh; padding: 96px 0 32px; }
#sv-path > div > div:nth-child(2), #sv-path > div > div:nth-child(3) { display: none !important; }
#sv-path > div > div:nth-child(4) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; grid-template-columns: 1fr !important; gap: 0 !important; }
#sv-path > div > div:nth-child(4) > article { min-height: 86vh; justify-content: center; padding: 48px 0; border-top: 1px solid rgba(20,18,16,.12); }
#sv-path > div > div:nth-child(4) > article > div:nth-child(2) { height: 46vh !important; aspect-ratio: auto !important; }
#sv-path > div > div:nth-child(4) > article > div:nth-child(2) img { width: 100% !important; height: 100% !important; object-fit: cover; }
#sv-path > div > div:nth-child(5) { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; gap: 22px !important; padding: 56px 0 88px; transform: none !important; opacity: 1 !important; }

/* 3 · Expertise in 80+ countries: globe on top (page4.js), text at the bottom */
#sv-market > div > div:nth-child(2) { left: 20px !important; right: 20px !important; width: auto !important; top: auto !important; bottom: 5vh !important; transform: none !important; gap: 14px !important; }
#sv-market > div > div:nth-child(2) > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 20px !important; }

/* 4–6, 11 · Brand creation / Liquid development / Production & bottling / Logistics: video on top, text below */
#bv-brand, #bv-lab, #bv-prod, #bv-logi { height: auto !important; }
#bv-brand > div, #bv-lab > div, #bv-prod > div, #bv-logi > div { position: relative !important; height: auto !important; padding: 84px 20px 64px; display: flex; flex-direction: column; gap: 30px; }
#bv-brand > div > div:nth-child(1), #bv-lab > div > div:nth-child(1), #bv-prod > div > div:nth-child(1), #bv-logi > div > div:nth-child(1) {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; height: 54vh !important; flex: none; }
#bv-brand > div > div:nth-child(2), #bv-lab > div > div:nth-child(2), #bv-prod > div > div:nth-child(2), #bv-logi > div > div:nth-child(2) {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; transform: none !important; gap: 18px !important; }
#bv-logi > div > div:nth-child(2) > div:last-child { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px 14px !important; max-width: 360px; }

/* 7 · You dream it. We can it.: title, the three figures stacked, then the four benefits stacked */
#sv-capacity { height: auto !important; }
#sv-capacity > div { position: relative !important; height: auto !important; }
#sv-capacity > div > div:nth-child(3) { position: relative !important; inset: auto !important; height: auto !important; justify-content: flex-start !important; gap: 40px !important; padding: 96px 0 0; }
#sv-capacity > div > div:nth-child(3) > div:nth-child(1) { padding: 0 20px !important; }
#sv-capacity > div > div:nth-child(3) > div:nth-child(2) { grid-template-columns: 1fr !important; padding: 0 20px !important; gap: 0; }
#sv-capacity > div > div:nth-child(3) > div:nth-child(2) > div { padding: 22px 0 !important; border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.18); }
#sv-capacity > div > div:nth-child(3) > div:nth-child(3) { grid-template-columns: 1fr !important; padding: 40px 20px 72px !important; gap: 26px; transform: none !important; opacity: 1 !important; margin-top: 8px; }
#sv-capacity > div > div:nth-child(3) > div:nth-child(3) > div { padding: 0 !important; border-left: 0 !important; }

/* 8 · Powered by global production and trusted sourcing: vertical list instead of the sideways track */
#sv-network { height: auto !important; }
#sv-network > div { position: relative !important; height: auto !important; overflow: visible !important; padding: 88px 20px 56px; }
#sv-network > div > div:nth-child(1) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; }
#sv-network > div > div:nth-child(2) { position: relative !important; left: auto !important; top: auto !important; transform: none !important; flex-direction: column !important; gap: 14px !important; padding: 28px 0 0 !important; }
#sv-network > div > div:nth-child(2) > * { width: auto !important; height: auto !important; }
#sv-network > div > div:nth-child(2) > article > div:first-child { height: 46vh !important; flex: none !important; }
#sv-network > div > div:nth-child(2) > div { margin-top: 18px; }
#sv-network > div > div:nth-child(3) { display: none !important; }

/* 9 · Retail-ready solutions: three cards stacked */
#sv-cats { height: auto !important; }
#sv-cats > div { position: relative !important; height: auto !important; overflow: visible !important; padding: 88px 20px 56px; display: flex; flex-direction: column; gap: 24px; }
#sv-cats > div > div:nth-child(1) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; }
#sv-cats > div > div:nth-child(2) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; grid-template-columns: 1fr !important; gap: 14px !important; }
#sv-cats > div > div:nth-child(2) > article { height: 62vh; min-height: 400px; }
#sv-cats > div > div:nth-child(2) > article > div:last-child { left: 20px !important; right: 20px !important; }

/* 10 · One partner. Endless possibilities.: text, then cans / spirits / RTD rows stacked (sized by page4.js) */
#sv-flex { height: auto !important; }
#sv-flex > div { position: relative !important; height: auto !important; overflow: visible !important; padding: 88px 20px 56px; display: flex; flex-direction: column; gap: 22px; }
#sv-flex > div > div:nth-child(1) { position: relative !important; left: auto !important; top: auto !important; width: auto !important; transform: none !important; }
#sv-flex > div > div:nth-child(2) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; grid-template-columns: 1fr !important; gap: 10px !important; }
#sv-flex > div > div:nth-child(2) > div { height: 52vh; border-top: 1px solid rgba(20,18,16,.1); overflow: hidden; }

/* 12 · Quality and expertise: title, certifications, medals in two rows of three */
#sv-quality { height: auto !important; }
#sv-quality > div { position: relative !important; height: auto !important; overflow: visible !important; padding: 88px 20px 72px; display: flex; flex-direction: column; gap: 40px; }
#sv-quality > div > div { position: relative !important; left: auto !important; right: auto !important; top: auto !important; }
#sv-quality > div > div:nth-child(2) > div:nth-child(2) { flex-wrap: wrap; gap: 20px 28px !important; }
#sv-quality > div > div:nth-child(3) > div:nth-child(2) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px !important; justify-items: center; }

/* slide-up entrance used on phones (classes added by assets/js/mobile.js) */
#dc-root .m-reveal { opacity: 0 !important; transform: translateY(48px) !important; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
#dc-root .m-reveal.m-in { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { #dc-root .m-reveal { opacity: 1 !important; transform: none !important; transition: none; } }