/* CILCO V9 RC4 (LOCAL ONLY) - additive rules. The approved V9 stylesheets are unchanged.
   Replaces the RC3d nav stylesheet. */

/* Owner header correction (3 Nov 2026): on phones up to 412 CSS px (Galaxy S24 Ultra portrait) the top header
   (logo, Settings/globe button, menu) is hidden and takes no space. Only while the bottom navigation exists
   (:has guard), so a phone is never left without navigation. The <header> element itself stays in the page with
   zero height because the Settings panel (#cilcoSettingsPanel, with the Language list) lives inside it; the
   bottom-nav Language tab opens that panel. 413px and up: the original header is untouched. */
@media (max-width: 412px) {
	html body:has(#cilco3d-v3) > header { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
	html body:has(#cilco3d-v3) > header > .head-inner,
	html body:has(#cilco3d-v3) > header > #mobileNav { display: none !important; }
}

/* A2 - Bottom navigation is phone-only. The approved header switches to the menu toggle at <=760px,
   so the dock is shown at <=760px and hidden from 761px up (no duplicate navigation on tablet/laptop/desktop). */
@media (min-width: 761px) {
	html body #cilco3d-v3 { display: none !important; }
	html body.cilco-v32-ready { padding-bottom: 0 !important; }
	html body > header #mobileNav button[data-page="finder"] { display: inline-block !important; }
}

/* A5 - Diwali Dhamaka (#v9-p0) and Welcome Offer (#v9-p2): single column on every device.
   Home (#v9-p1) and the category cards are not touched. */
html body #v9-p0 .cw-slotgrid,
html body #v9-p2 .cw-slotgrid { grid-template-columns: minmax(0, 1fr) !important; }

/* Owner decision (3 Nov 2026): footer outer background only. The footer element #cilco-final-footer-review
   (the area around and below the panel) becomes #000000. The blue panel .cilfo-inner, its text, buttons, size,
   border and layout are unchanged; the rest of the Home page keeps its approved background. */
/* Owner order 4 Nov 2026 (section 6): the outside frame around the footer now matches the main background #30343B
   (was #000000), and the remaining bottom band below the blue panel (24px on tablet/desktop) is removed. The blue
   panel .cilfo-inner, its sections, text, borders and icons are unchanged. */
html body footer#cilco-final-footer-review.v9-foot { background: #30343B !important; background-image: none !important; }
/* The bottom band is removed only where nothing must be cleared below the panel: from 1024px (no bottom menu), and up to
   1023px only when the approved dock #cilco3d-v3 exists (its own body padding then gives the 0.5px hairline). A page that
   uses another bottom menu (the LIVE page's .bottom-menu) keeps the host footer padding, so the menu never covers the
   footer (found in the LIVE-page compatibility preview, 4 Nov 2026). */
@media (min-width: 1024px) { html body footer#cilco-final-footer-review.v9-foot { padding-bottom: 0 !important; } }
@media (max-width: 1023.98px) { html body:has(#cilco3d-v3) footer#cilco-final-footer-review.v9-foot { padding-bottom: 0 !important; } }

/* Owner decision (3 Nov 2026): product image box background #FFFFFF. Background only: box size, the approved
   blue border (.product .product-art), radius and the photos themselves are unchanged (no crop, no stretch). */
html body .product-art,
html body .v9ap .v9-photo,
html body .v9o-photo { background: #ffffff !important; }

/* Owner decision (3 Nov 2026): main page background Dark Grey #30343B. Only the page background behind the
   content (body, page sections, Home background). Bike Finder (#page-finder) keeps its background; product cards,
   header, footer panel, buttons, search and bottom navigation are not recoloured. */
html, html body, html body.cilco-v32-ready,
html body #page-home, html body #page-catalog, html body #page-order, html body #page-care, html body #page-about,
html body #v4-homeView { background-color: #30343B !important; background-image: none !important; }

/* Owner order (4 Nov 2026, section 4): bottom navigation end position, phones only (<=760px, only while the dock
   exists). Measured at 390px before: Home footer panel ended 145.8px above the dock (110px black footer padding from
   the host rule .footer{padding-bottom:110px} + 36px of body padding max(100px,...) sized for the old floating dock);
   Bike Finder 52.4px, My Order 61.6px, Diwali/Welcome 35.7px. The body bottom padding now equals the dock height
   (64px up to 600px, 70px 601-760px, plus the safe area) + 0.5px hairline, the footer's own bottom padding is removed
   (the blue panel, its border and the side areas are unchanged) and the trailing margin of the page's last block is
   removed. The selected round orb (--lift 18px above the bar) is kept inside the bar (lift 0); its size, colours,
   slide animation and the labels are unchanged. 761px and up: unchanged. */
@media (max-width: 760px) {
	html body.cilco-v32-ready:has(#cilco3d-v3) { padding-bottom: calc(64.5px + env(safe-area-inset-bottom, 0px)) !important; }
	html body:has(#cilco3d-v3) footer#cilco-final-footer-review.v9-foot { padding-bottom: 0 !important; margin-bottom: 0 !important; }
	html body:has(#cilco3d-v3) main > .page.active > .container > :last-child,
	html body:has(#cilco3d-v3) main > .page.active > .container,
	html body:has(#cilco3d-v3) main > .page.active > .container > #v4-finder-root,
	html body:has(#cilco3d-v3) #page-order.active .v9o > :last-child { margin-bottom: 0 !important; }
	html body #cilco3d-v3 { --lift: 0px !important; }
	/* with the orb inside the bar, the active label sits at the bar's bottom edge (was 5px) so the orb's white ring
	   does not cover its text; font, size, colour and centring unchanged. */
	html body #cilco3d-v3 .c3-label { bottom: 1px !important; }
}
@media (min-width: 601px) and (max-width: 760px) {
	html body.cilco-v32-ready:has(#cilco3d-v3) { padding-bottom: calc(70.5px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Owner order (4 Nov 2026, section 6): My Order product card - the photo box and the Model line get the same blue
   rounded frame as the approved Bike Finder product card (values measured from Bike Finder: photo box 1px #739BE8,
   radius 11px; model line 1px #729DE9, radius 10px, background #EEF3FF, padding 7px 9px). Photo box size unchanged
   (border-box); the Model line keeps its own font, colour and position. No other area is framed. */
html body .v9o-card .v9o-photo { border: 1px solid #739be8 !important; border-radius: 11px !important; box-sizing: border-box !important; }
/* 4 Nov 2026: no card-height change - frame border+padding (8px) is taken from the line's own 10px top margin. */
html body .v9o-card .v9o-model { border: 1px solid #729de9 !important; border-radius: 10px !important; background: #eef3ff !important; padding: 3px 9px !important; margin-top: 2px !important; }

/* Owner order (4 Nov 2026, section 9): Model Name letters in CAPITALS (display only; font, weight, colour, size,
   alignment and position unchanged). All Products card (its "MODEL" label is already capitals; the other six
   languages have no letter case), All Products detail Model row, Bike Finder and category cards (model text only,
   not "+N More Models"). My Order is handled in cilco-v9-rc4.js so its "Model" label is not changed. */
html body .v9ap .v9-model,
html body .v9ap .v9-detail .v9-row:nth-child(3) > span:last-child,
html body #page-finder .product .pmodel .model-text,
html body #v4-productGrid .product .pmodel .model-text { text-transform: uppercase !important; }
html body #page-finder .product .pmodel .more-models,
html body #v4-productGrid .product .pmodel .more-models { text-transform: none !important; }

/* Owner order 4 Nov 2026 (section 4): tablet header 761-1023px. The header keeps one row: logo, the approved icon
   buttons Home / All Products / Bike Finder / My Order (the same #desktopNav buttons and icons as the approved
   >=1024px header, same colours, borders and radius) and Language. The menu button and the second row (#mobileNav)
   it opened are hidden, so nothing is pushed down. Customer Care is not in the owner's tablet list and is hidden in
   this range only (it stays in the laptop/desktop header). Labels may use two lines to fit the width. */
@media (min-width: 761px) and (max-width: 1023.98px) {
	html body > header .head-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; padding: 8px 12px !important; }
	html body > header .identity { flex: 0 0 auto !important; }
	html body > header #menuToggle, html body > header #mobileNav { display: none !important; }
	html body > header #desktopNav { display: flex !important; flex: 1 1 auto !important; order: 3 !important; min-width: 0 !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-end !important; gap: 4px !important; margin-left: auto !important; }
	html body > header #desktopNav > button { display: none !important; }
	html body > header #desktopNav > button.cilco-win-item[data-page="home"],
	html body > header #desktopNav > button.cilco-win-item[data-page="catalog"],
	html body > header #desktopNav > button.cilco-win-item[data-page="finder"],
	html body > header #desktopNav > button.cilco-win-item[data-page="order"] { display: flex !important; flex: 1 1 0 !important; max-width: 92px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; min-width: 0 !important; min-height: 55px !important; margin: 0 !important; padding: 6px 3px !important; border: 1px solid #cfdef6 !important; border-radius: 12px !important; box-shadow: 0 2px 7px rgba(12, 50, 135, .08) !important; background: transparent !important; color: #103f9c !important; line-height: 1.12 !important; white-space: normal !important; text-align: center !important; }
	html body > header #desktopNav .cilco-win-icon { width: 21px !important; height: 21px !important; flex: none !important; color: #0845b5 !important; stroke-width: 2.4 !important; }
	html body > header #desktopNav .cilco-win-label { font-size: 11px !important; font-weight: 850 !important; color: #153d85 !important; white-space: normal !important; overflow-wrap: anywhere !important; }
	html body > header #cilcoSettingsToggle { display: flex !important; order: 5 !important; flex: 0 0 auto !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; min-height: 55px !important; padding: 6px 6px !important; border: 1px solid #cfdef6 !important; border-radius: 12px !important; box-shadow: 0 2px 7px rgba(12, 50, 135, .08) !important; background: transparent !important; color: #103f9c !important; white-space: nowrap !important; }
	html body > header #cilcoSettingsToggle > svg { width: 21px !important; height: 21px !important; flex: none !important; color: #0845b5 !important; }
}

/* Owner order 4 Nov 2026 (final): All Products and Bike Finder outer left/right space 2px per side on phone and
   tablet (<=1023px). Before: 28-29px = page gutter 15px + white panel padding 13px (+1px panel border on Bike
   Finder). The gutter becomes 0 and the panel's side padding brings cards and search to exactly 2px from the screen
   edge. Cards, fonts, borders, icons, the page banner and the inner layout are unchanged; 1024px and up unchanged. */
@media (max-width: 1023.98px) {
	html body #page-catalog > .container,
	html body #page-finder > .container { padding-left: 0 !important; padding-right: 0 !important; }
	html body #page-catalog > .container > .content-box { padding-left: 2px !important; padding-right: 2px !important; }
	html body #page-finder > .container #v4-finder-root > .vf-panel { padding-left: 1px !important; padding-right: 1px !important; }
}

/* Owner order (8): owner-rejected diagnostic-port category entry hidden (marked by cilco-v9-rc4.js; no data removed). */
html body .rc4-removed { display: none !important; }

/* Owner order (9): product photo zoom viewer on an opaque pure white background. Size, zoom behaviour and
   controls are unchanged; the white controls get a dark translucent base only so they stay visible on white. */
html body #cwViewer { background: #ffffff !important; }
html body #cwViewer button { background: rgba(5, 12, 30, .55) !important; }
html body #cwViewer .cw-vind i { background: rgba(5, 12, 30, .25) !important; }
html body #cwViewer .cw-vind i.on { background: #0b2874 !important; }

/* A11 - "Include GST 18%" tag placed next to a Final Rate by cilco-v9-rc4.js. */
html body .rc4-gst { display: inline-block; margin-left: 6px; font-size: .78em; font-weight: 700; color: #0b6b3a; white-space: nowrap; letter-spacing: 0; }

/* A4 - My Order: remove the extra empty space above Search. Measured at 390/768/1366px: the only empty block between
   the header and the My Order bar is the 26px top margin of #page-order .content-box. Scoped to My Order only;
   the CILCO INDUSTRIES bar, Search panel and everything below keep the approved design. */
html body #page-order .content-box { margin-top: 0 !important; }