/* ==========================================================================
custom.css — deliberately NOT one of the 5 files Dizains' "advanced
editor" knows about (Theme::templates_info only registers index.html,
home.html, product_info.html, main.css, head.html — all read/written by
raw full-file overwrite). Anything here survives a Dizains CSS save that
would otherwise clobber the same content living in main.css. Linked from
frame.html right after main.css, so cascade order (not !important) gives
it priority on equal-specificity collisions.
========================================================================== */
/* ==========================================================================
PHASE 1 REDESIGN — TYPOGRAPHY
Base font-size 12px -> 14px, line-height 1.5 (2026-08-12).
font-family FINALIZED 2026-08-13: went through an A/B review (system font
stack vs Arial/Helvetica, same size/line-height, see
DESIGN_PHASE_CHANGES.md) — decision is Arial, Helvetica, sans-serif,
replacing the system-stack hybrid tried initially. Reasoning: closer to
the site's original typeface (plain Arial pre-redesign) and read as less
"loud"/mismatched against the rest of the theme's chrome than the system
font, per side-by-side comparison on the homepage and a product page.
Overrides main.css's base rule (main.css:16-19 — same selector list,
`p, body, font, div, td, input, select, textarea`) via cascade order
(this file loads after main.css), no !important needed.
Checked against the 3 risk areas found in recon before applying (these
were about font-size/line-height, unaffected by the font-family decision
above):
- Left category sidebar (179px, main.css:62-63): long LV category names
now wrap to 2 lines instead of 1 (e.g. "Foto un videokameru piederumi").
Not broken - text still wraps normally with its bullet icon, just
taller. Accepted as expected behavior of a larger base font, not
something to preemptively work around.
- .product_qty (35x25px, main.css:1251-1255): visually fine at 14px in
every screenshot tested (digit not clipped) - a getBoundingClientRect()
check gave inconsistent readings between two attempts (37px then 24px
offsetHeight), most likely a reflow-timing artifact in the test
environment rather than a real issue, but re-check this specific field
on prod visually since the measurement wasn't clean.
- Product spec tables: NOT a shared template - found live via a real
product (id 86545, SONY NP-FZ100) that this is hand-authored HTML
inside each product's `description` field, with hardcoded
`
`/`
` columns. Tested this exact
table at 14px: all labels (Sastāvs/Spriegums/Ietilpība (mAh)/
Garantija) still fit on one line in the 170px column, rows just got
taller from the added line-height. Since this lives in per-product
content (not CSS/templates), a bad wrap on some OTHER product's
hand-made table is possible and can't be ruled out globally - watch
for it opportunistically, not something this stylesheet can fix.
========================================================================== */
p, body, font, div, td, input, select, textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
body, p {
line-height: 1.5;
}
/* Header bug, root cause (found via pixel-sampling the actual background
image, not guessed): #container_top and #container_top_right are table
cells (main.css:50-62, `.sci_topbg` table) whose shared row height is
driven by whichever cell's content is tallest - table-cell height is a
MINIMUM, not a cap, and grows past main.css's declared 155px as soon as
the 6-item aux nav (#container_top_right: Par veikalu/Kā pasūtīt
preci?/etc.) needs more room, which any future edit through the
Dizains admin's aux-pages constructor can trigger again (more items,
longer names) - a font-size tweak only patches today's exact wording,
it isn't resilient to that.
The actual visual break: `sci_hat_bg.gif` (the header's background
image, `.sci_topbg { background:#496BAB url(sci_hat_bg.gif) left top
repeat-x; }`) is a fixed 247x155px tile - `repeat-x` only tiles it
horizontally, so it does not cover any row height beyond 155px at all.
Sampled the image's own pixels directly: its bottom edge (y=153-154)
is solid WHITE (`rgb(255,255,255)`), sitting right above whatever's
underneath once a row exceeds 155px. That produced a hard
light-blue -> white -> dark-blue stack exactly where wrapped menu text
landed, reading as "text overlapping the bar" - a fixed-height image
asset colliding with a row that can grow, not a text-sizing problem.
Resilient fix: give both cells the same solid `#496BAB` (main.css's
own `.sci_topbg` fallback color, not a new value) as an explicit
background-color, so whatever area the image doesn't cover - at ANY
row height, for ANY future number/length of aux-page items - is
already the correct continuous blue instead of a mismatched/absent
fallback. Verified in-browser: reverted the aux nav back to the
standard 14px (no longer needs its own smaller size, the seam it was
hiding from is gone) and the header renders seamlessly however tall
the row gets. */
#container_top,
#container_top_right {
background-color: #496BAB;
}
/* Follow-up to the fix above, found 2026-08-13 after Phase 3 widened
#container_top_right (170px -> 190px) made a pre-existing gap far more
visible: the flat #496BAB fallback color is OPAQUE, so it was already
fully hiding .sci_topbg's tiled sci_hat_bg.gif pattern everywhere
within these two cells, not just below 155px height as the comment
above assumed - repeat-x on the table never had a chance to show
through a cell that paints its own solid background on top of it.
#container_top's own background-image (sci_logo.jpg, 580x148px,
no-repeat) only covers the left 580px of a ~1200px-wide cell, so
everything past it, plus all of #container_top_right, was rendering
as a hard-edged solid-color block butting up against the actual
patterned image wherever a sliver of it WAS still visible (past the
table's own cells) - read as a rendering bug, not a design choice.
Fix: replace the flat color with a CSS gradient built from pixels
sampled directly from sci_hat_bg.gif itself (canvas getImageData at
x=10 and x=120, both columns identical - it's a vertical-only
gradient) - rgb(157,181,206) at y=0, dipping to rgb(140,170,206)
around y=60, rising to rgb(156,187,230) by y=120, then held flat
(deliberately NOT continuing to the image's own y=154 row, which
samples pure white - that white edge is exactly what the background-
color fallback above was originally added to avoid). A gradient has
no "phase" to misalign the way a repeated tile would across two
independently-sized adjacent cells, so it reads as one continuous
surface without needing pixel-perfect alignment between the two cells
or with the table's own tiling. For #container_top, layered as a
second background BEHIND sci_logo.jpg (comma-separated
background-image/position/repeat) so the photo collage is unaffected -
see the note in the task about not touching that visual yet.
Guarded to desktop only: mobile's own #container_top rule
(main.css, @media max-width:800px) sets a completely different
background shorthand (mobile/logo.png) - an unguarded background-image
here would load after it in the cascade and silently replace the
mobile logo. The background-color rule above stays unguarded since it
only adds a fallback color behind whatever mobile already renders,
never touching background-image.
SUPERSEDED by Phase 4 (2026-08-14): this block used to layer
sci_logo.jpg behind the sampled gradient. Phase 4 removed the raster
collage entirely (replaced by the inline SVG device cluster in the
umlp7cha content) and overrides #container_top/#container_top_right's
background-image back to `none` further down in this file (see the
"PHASE 4 — HEADER REDESIGN" section) - the actual gradient/jpg rule
that used to live here is gone, not just overridden, since keeping a
dead reference to a decommissioned asset was flagged as confusing
(found while investigating a reported stray-photo-artifact sighting;
this rule was already fully overridden and not the cause, but had no
reason to keep existing either). */
/* Left category sidebar (main.css:64-65, was 179px) widened to fit the
real category names at 14px on one line. Measured empirically in-
browser (canvas text measurement + forced-nowrap scrollWidth on the
live tree, not guessed): every category name in the current tree fits
at 290px except one outlier - "Dekoderi , antenas ciparu televīzijai
(DVB-T) un citi TV piederumi" (66 chars, root-level) - which still
wraps to 2 lines at any width short of ~430px; not worth widening the
whole sidebar that far for one name, accepted as an edge case.
Verified overall page layout after widening (+111px): main content
grid and right sidebar unaffected, nothing overlaps (that check was
desktop-only at the time - Phase 1 predates the header redesign and
the mobile category-tree toggle interaction wasn't part of what was
tested then).
@media(min-width:801px) guard added later (same day as the .all_wrapper
mobile-width fix, found via a real-device report + explicit
getBoundingClientRect() measurement, not visual inspection): this rule
was completely unguarded, so its 290px silently beat main.css's own
correct mobile rule (#container_left_sidebar{width:100%}, inside
main.css's own @media max-width:800px) - same specificity (ID-only on
both sides), and this file loads after main.css, so custom.css's
unguarded 290px won the cascade tie on every viewport, not just
desktop. Confirmed live: #container_left_sidebar measured
width:290px on a 390px mobile viewport (after clicking .toggle to
reveal the tree, since it's display:none by default there), causing
document.documentElement.scrollWidth (402px) to exceed
window.innerWidth (390px) - genuine horizontal overflow, matching the
reported "categories cut off on the side." Guarding this to desktop
only lets main.css's width:100% apply unopposed on mobile again, as
it always should have. */
@media (min-width: 801px) {
#container_left_sidebar {
width: 290px;
}
}
/* REGRESSION FIX for f43564fd (2026-09-22, same day): main.css's own
#container_right_sidebar{width:170px} was never actually enough room for
its own content - confirmed by checking for real overflow after the
table->flex conversion (`el.scrollWidth > el.clientWidth` swept across
every descendant of #container_right_sidebar at 1280px): one
`.cpt_custom_html` card measured scrollWidth 222px against a clientWidth
of only 168px, a 54px shortfall. Under the old
, table-layout:auto
silently widened this column to its content's real min-content width
(measured live, pre-fix table markup: 224px, unconditionally, not
viewport-dependent) - not a deliberate design width, but a real
requirement the raw CSS number never captured. The flex conversion
removed that accidental accommodation (main-content's flex-basis:0 fix
above stops main-content from ever pressuring the sidebars to shrink,
so nothing forces right-sidebar wider than its literal 170px either),
so the card's content started clipping/overflowing silently instead of
the column growing to fit it. width:224px restores the same effective
column width the design has always actually rendered at (matches what's
currently live on prod), eliminating the content overflow - same
@media(min-width:801px) guard as the left sidebar above, since main.css's
own mobile block already gives this element a completely different
width/position(absolute) treatment under 800px. */
@media (min-width: 801px) {
#container_right_sidebar {
width: 224px;
}
}
/* ==========================================================================
LEFT SIDEBAR — CARD REDESIGN, matching the right sidebar's look below
for visual consistency (same header-bar/card pattern, same colors).
Root cause of the "torn header" bug: `.col_header`'s background image
(`sci_katalog_prod_1.gif`, 179x28px, `no-repeat`, main.css:330) was
sized to exactly the OLD 179px sidebar width. Once the sidebar was
widened to 290px above, the image only paints the left 179px of the
header bar - the remaining ~111px has no background at all, reading as
a "torn"/incomplete bar. Same underlying failure mode as the top-header
bug above: a fixed-size image asset that can't grow with its container.
Root cause of "categories escaping the block": there was no card
background/border around the list at all (main.css:250/254 - the old
`sci_katalog_bg_down.gif` card-simulation rules are already commented
out in main.css, so currently nothing replaced them) - text just sits
directly on the page background, unlike the right sidebar's bordered
white cards, hence the visual mismatch the review flagged.
Wrapped in the same `@media (min-width:801px)` guard as the right
sidebar below, for the same reason: main.css's mobile section sets
`.cpt_category_tree{display:none}` and `#container_left_sidebar{width:
100%; background:none; padding:0}` (main.css:895-904) - unguarded, this
card CSS's own background/padding/margin would load after and fight
those mobile rules. Guarding means this only ever applies above 800px,
same scope as everything else already added here. */
/* ==========================================================================
RIGHT SIDEBAR — CARD REDESIGN (sci theme; index.html renders this on
every page, so these rules apply site-wide).
Scoped under #container_right_sidebar so the LEFT sidebar's .col_header
("KATALOGS") and the top nav's .cpt_custom_html usage stay untouched.
Moved here from main.css (2026-08-12, pure relocation, no rule changes)
as part of closing the Dizains-overwrite risk before Phase 1 typography
work. Original comment in main.css noted this block had to sit ABOVE the
`@media (max-width:800px)` block there so the mobile overrides for
`.shcart_link`/`.cpt_shopping_cart_info` backgrounds still won on small
screens - that source-order trick doesn't survive moving to a file
loaded entirely after main.css, so it's now made explicit instead via
`@media (min-width:801px)`, which achieves the same outcome (desktop-only)
without depending on file position at all. Verified this doesn't change
which properties apply on mobile for `.shcart_link`/`.cpt_shopping_cart_info`
(those were always going to lose to the more specific mobile rules in
main.css); the only behavior change from the guard is that the *other*,
non-colliding desktop-card properties (padding/margin/border-radius etc.)
now also correctly stop applying under 800px, instead of leaking into the
80px-wide mobile cart icon as they did before - narrower scoping, matches
what the design was actually for. Could not verify visually at a real
narrow viewport locally (browser automation's resize_window isn't taking
effect in this environment - window.innerWidth stayed fixed regardless).
Check both desktop AND a resized/mobile-width view on prod after deploy.
========================================================================== */
@media (min-width: 801px) {
#container_left_sidebar .col_header {
display: block;
background: #496BAB;
color: #ffffff;
line-height: 1.3;
padding: 7px 10px;
margin: -9px -11px 8px -11px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 11px;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
border-radius: 5px 5px 0 0;
box-sizing: border-box;
}
#container_left_sidebar .cpt_category_tree,
#container_left_sidebar .cpt_product_search {
background: #ffffff;
border: 1px solid #C7C7C7;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
border-radius: 6px;
margin-bottom: 8px;
padding: 9px 11px;
box-sizing: border-box;
overflow: hidden;
}
/* Same reasoning as .sci_box_right_b below - this empty divider div is
redundant now that margin-bottom on the card itself provides spacing. */
#container_left_sidebar .sci_box_left_b {
display: none;
}
/* ROOT CAUSE of the left sidebar looking like a flat blue bar instead of a
card (found by measuring live, not guessed): MEKLĒŠANA/KATALOGS/PARTNERI
are each their own separate `cpt_custom_html` block containing just a
`.col_header` label div - same structure as the right sidebar's MANS
GROZS/KONTAKTI ON-LINE/etc labels. But unlike the right sidebar, there
was no card rule for `#container_left_sidebar .cpt_custom_html` itself,
so `.col_header`'s `margin: -9px -11px 8px -11px` (designed to bleed
flush to a padded card's edges) had no padding to land in. Measured in
DevTools: the first header's box top sat 9px ABOVE the sidebar's own top
edge (bounding-rect gap of -9px, vs 0px on the right sidebar's first
card) - it was overlapping the blue site header above by exactly its
negative margin, both the same blue color, so the overlap read as "no
gap" and the rounded top corners were invisible against the identical
backdrop they were sitting on top of. Adding the same card treatment
the right sidebar already has for `.cpt_custom_html` gives the negative
margin something to bleed into instead of escaping the container -
verified this brings the gap to exactly 0px, matching the right
sidebar's measured value. */
#container_left_sidebar .cpt_custom_html {
background: #ffffff;
border: 1px solid #C7C7C7;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
border-radius: 6px;
margin-bottom: 8px;
padding: 9px 11px;
box-sizing: border-box;
overflow: hidden;
}
#container_left_sidebar .cpt_custom_html:empty,
#container_left_sidebar .cpt_custom_html:has(> .sci_box_left_b:only-child) {
display: none;
}
/* Root-cause fix for header bars overflowing their 170px column: a
full-width color bar that wraps normally, instead of the old fixed
170x28px no-repeat background image, which a long unbreakable label
(e.g. "Kontaktinformācija") could force wider than the 170px column. */
#container_right_sidebar .col_header,
#container_right_sidebar .cpt_shopping_cart_info .shcart_link {
display: block;
background: #496BAB;
color: #ffffff;
line-height: 1.3;
padding: 7px 10px;
margin: -9px -11px 8px -11px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 11px;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
border-radius: 5px 5px 0 0;
box-sizing: border-box;
}
#container_right_sidebar .cpt_shopping_cart_info .shcart_link:hover {
text-decoration: underline;
}
/* Card look for every sidebar widget block (cart + each custom-html
block). The header rule above bleeds out to the card edges via negative
margin so it sits flush with the card's rounded top corners. */
#container_right_sidebar .cpt_custom_html,
#container_right_sidebar .cpt_shopping_cart_info {
background: #ffffff;
border: 1px solid #C7C7C7;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
border-radius: 6px;
margin-bottom: 8px;
padding: 9px 11px;
box-sizing: border-box;
overflow: hidden;
}
/* The old divider blocks (empty
, and a
couple of fully empty custom-html blocks) are redundant now that real
spacing comes from margin-bottom above — collapse their card chrome
instead of showing small empty boxes. The :has() rule degrades
gracefully on very old browsers (a few ~20px empty rounded boxes would
show instead) — cosmetic only, not a functional break. */
#container_right_sidebar .sci_box_right_b {
display: none;
}
#container_right_sidebar .cpt_custom_html:empty,
#container_right_sidebar .cpt_custom_html:has(> .sci_box_right_b:only-child) {
display: none;
}
/* Currency selector - found completely invisible at every desktop width
during the sidebar table->flex sweep (2026-09-22), pre-existing and
unrelated to the flex conversion itself: main.css:831
(.cpt_currency_selection, .prdbrief_comparison, .callus, .contact -
display none) sits two lines above its own Mobile-section comment
marker but OUTSIDE the actual max-width:800px media block that starts
right after it - same unguarded-rule bug shape already seen elsewhere in
this codebase (custom.css's own .hdr-actions-wa history). Left main.css
itself untouched (Dizains-overwrite risk, same reasoning as the rest of
this sidebar redesign) and overridden here instead - this selector's ID
+ class beats main.css's bare class unconditionally, no source-order
dependency. Given the same card treatment as its sibling blocks above so
it doesn't render as unstyled bare text floating between them. */
#container_right_sidebar .cpt_currency_selection {
display: block;
background: #ffffff;
border: 1px solid #C7C7C7;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
border-radius: 6px;
margin-bottom: 8px;
padding: 9px 11px;
box-sizing: border-box;
}
/* WhatsApp button (Stage B content, code 'ie7rr50s' in SC_htmlcodes) —
CSS button with an inline SVG icon instead of the old low-res raster
badge image, so it stays crisp at any zoom/DPI. */
#container_right_sidebar .sb-wa-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #25D366;
color: #ffffff !important;
text-decoration: none !important;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 7px 14px;
border-radius: 16px;
margin: 4px 0;
}
#container_right_sidebar .sb-wa-btn:hover {
background: #1EBE57;
}
#container_right_sidebar .sb-wa-btn svg {
flex-shrink: 0;
}
/* Kontaktinformācija card content (Stage C, code 'phtjnbda' in
SC_htmlcodes) — left-aligned icon rows instead of the old centered
blob, plus a language row that reuses the same flag images/links as
the real language switcher (cpt_language_selection) used in the page
header, so LV/RU/EN here actually switch language too. */
#container_right_sidebar .sb-contact {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
#container_right_sidebar .sb-contact-row {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0;
}
#container_right_sidebar .sb-contact-icon {
flex-shrink: 0;
font-size: 13px;
}
#container_right_sidebar .sb-contact-wa-mini {
display: inline-flex;
margin-left: 2px;
}
#container_right_sidebar .sb-contact-divider {
border-top: 1px solid #e2e2e2;
margin: 8px 0;
}
#container_right_sidebar .sb-lang-row {
display: flex;
align-items: center;
gap: 6px;
}
#container_right_sidebar .sb-lang-label {
font-size: 11px;
font-weight: bold;
color: #777777;
}
#container_right_sidebar .sb-lang-flag {
display: inline-block;
line-height: 0;
opacity: 0.45;
filter: grayscale(60%);
transition: opacity .15s ease;
}
#container_right_sidebar .sb-lang-flag:hover {
opacity: 0.8;
}
#container_right_sidebar .sb-lang-flag.sb-lang-active {
opacity: 1;
filter: none;
}
#container_right_sidebar .sb-lang-flag img {
width: 18px;
height: auto;
display: block;
border-radius: 2px;
}
} /* @media (min-width: 801px) */
/* ==========================================================================
PHASE 2 — "Uzmanību !!!" STOREFRONT NOTICE (2026-08-13)
This text is NOT an SC_htmlcodes block like the sidebar cards above - two
separate SC_local translation rows, no shared source: id='welcome_to_
storefront' (homepage: home.html -> {cpt_custom_html code='njr3gga6'} ->
SC_htmlcodes njr3gga6 -> {lbl_welcome_to_storefront}) and id='Go_Welcome'
(product page: product_info.html's {'Go_Welcome'|translate} directly, no
SC_htmlcodes layer). Both rows' `value` were rewritten (all 3 languages)
from `...` to this `.notice`
markup - this rule is what actually styles it. See
DESIGN_PHASE_CHANGES.md for the full chain and the SQL used.
Not scoped to a container id or the sidebar's @media(min-width:801px)
guard above - this sits in the main content column, not sidebar chrome,
and needs to render at every viewport width.
Amber/warning tone (not red "error", not blue "info") - operational
notice, not a failure state. Colors/radius/icon from the approved Phase 2
mockup (Variant 1). No font-family/font-size here on purpose - inherits
Phase 1's finalized Arial/Helvetica 14px/1.5 from the base rule instead
of the old inline-styled shouting-all-bold-red text.
========================================================================== */
.notice {
display: flex;
align-items: flex-start;
gap: 12px;
background: #FDF3DC;
border: 1px solid #E8C878;
border-left: 4px solid #C98A1E;
border-radius: 6px;
padding: 14px 16px;
margin: 10px 0 16px;
color: #4A3A18;
box-sizing: border-box;
}
.notice svg {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 1px;
color: #C98A1E;
}
.notice p {
margin: 0;
}
/* ==========================================================================
PHASE 3 — HEADER CART BADGE + AUX-PAGES MENU RELOCATION (2026-08-13)
{cpt_auxpages_navigation} (header) and {cpt_shopping_cart_info} (sidebar)
swapped containers in index.html: the cart now renders in
#container_top_right, the aux-pages menu now renders in
#container_right_sidebar (as a new card, title block key 'nfo9kx4w' -
"NODERĪGA INFORMĀCIJA" - added ahead of it, same pattern as the other
sidebar card titles). Width math and mockup approved in the Phase 3
recon session - see DESIGN_PHASE_CHANGES.md.
.shcart_icon baseline hidden here (unguarded) so it never shows on
mobile by default; re-enabled only inside the desktop block below.
Mobile keeps using the existing raster mobile/cart.png treatment,
retargeted to the new container in the @media(max-width:800px) block
further down - not replaced, so nothing on mobile visually changes.
========================================================================== */
#container_top_right .shcart_icon {
display: none;
}
@media (min-width: 801px) {
/* Row of 170px -> 190px: measured empirically (canvas text measurement,
same method as the left sidebar in Phase 1) against the widest realistic
cart-badge content - "24 prece(es)" bold 16px (~93px) and "2 499,00
Euro" 14px (~88px, based on the highest product price in the catalog).
40px icon + 12px gap + ~93-100px text column + 32px card padding =
~184px minimum; 190px leaves a little breathing room without padding it
out arbitrarily. Row height is no longer forced to 252px now that the
6-item aux-pages list is gone - it settles back to #container_top's own
155px (logo-driven) minimum, per the table-cell-height-is-a-floor
finding from the Phase 1 header work. */
#container_top_right {
width: 190px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 10px 14px;
box-sizing: border-box;
}
#container_top_right .cpt_language_selection {
width: auto;
float: none;
margin-top: 0;
display: flex;
justify-content: flex-end;
gap: 6px;
}
/* Cart badge: icon spans both text rows via CSS Grid placement - no
change needed to shopping_cart_info.html's existing sibling-div
structure (.shcart_link, #shpcrtgc, #shpcrtca are still plain siblings;
Grid just places them without requiring a wrapper element). */
#container_top_right .cpt_shopping_cart_info {
display: grid;
grid-template-columns: 40px 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: 10px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 6px;
padding: 8px 10px;
box-sizing: border-box;
}
#container_top_right .shcart_link {
grid-row: 1 / 3;
grid-column: 1;
}
#container_top_right .shcart_link a {
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
}
#container_top_right .shcart_icon {
display: block;
width: 34px;
height: 34px;
}
/* "🛒 Mans grozs" text stays in the DOM for accessibility/SEO but isn't
part of this compact badge's visual design - the icon + count + sum
already say "this is your cart"; kept off-screen rather than removed. */
#container_top_right .shcart_link_text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
#container_top_right #shpcrtgc {
grid-row: 1;
grid-column: 2;
color: #ffffff;
font-weight: bold;
font-size: 15px;
line-height: 1.25;
}
#container_top_right #shpcrtca {
grid-row: 2;
grid-column: 2;
color: #DCE6F7;
font-size: 13px;
line-height: 1.25;
}
/* Aux-pages menu card in the sidebar - same white/bordered/rounded
treatment as every other sidebar card (Phase 1 pattern), independent
card from its 'nfo9kx4w' title block above it (two stacked rounded
cards with a gap, same as MEKLĒŠANA/KATALOGS on the left sidebar -
not one merged card). */
#container_right_sidebar .cpt_auxpages_navigation {
background: #ffffff;
border: 1px solid #C7C7C7;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
border-radius: 6px;
margin-bottom: 8px;
padding: 9px 11px;
box-sizing: border-box;
overflow: hidden;
}
#container_right_sidebar .cpt_auxpages_navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#container_right_sidebar .cpt_auxpages_navigation li {
padding: 5px 0;
border-bottom: 1px solid #EFEFEF;
}
#container_right_sidebar .cpt_auxpages_navigation li:last-child {
border-bottom: none;
}
} /* @media (min-width: 801px) */
/* ==========================================================================
PHASE 4 v4 — HEADER REDESIGN, ROUND 2 (2026-08-14)
Second round after live feedback on the first applied version (which is
why this replaces rather than patches the original Phase 4 block - see
DESIGN_PHASE_CHANGES.md for the full before/after per point):
- Cart made visually bigger (icon 34->38px, text 15/13->17/14px, more
padding). #container_top_right widened 190->212px to fit it.
- Account button gained a visible "Konts" label next to the icon.
- Phone + WhatsApp moved OUT of the thin utility row entirely, into a
new bigger centered row directly above search (.hdr-center wraps
.hdr-contact-row + the search component).
- Flags moved OUT of the utility row's left side into the right side,
next to the account button, reordered LV/RU/EN (site's primary
language first) via :has() on each flag's real alt text.
DOM changes in index.html this depends on: .hdr-util-left is now an
EMPTY div (kept only so #container_top's utility row still matches
#container_top_right's utility row height - otherwise the pixel
background would show a seam between the two cells at different
heights). .hdr-brand-left now wraps the logo AND a new .hdr-center
div (contact row + search). .hdr-util-right now renders
{cpt_language_selection} before the account , and the
account gained a .hdr-acct-label span.
Height budget (still the same concern as the first Phase 4 pass -
sci_hat_bg.gif is a fixed 155px-tall tile, repeat-x only, so total
content height must stay at or under that): utility row 34px + brand
row (contact row ~34px + 8px gap + search 48px = 90px content, +20px
top/bottom padding = 110px) = 144px, ~11px under the 155px ceiling.
========================================================================== */
/* Account dropdown click/tap toggle - unguarded (not inside either @media
block) because it drives the account menu at every viewport width: on
mobile it's the ONLY way to open the menu (no hover), on desktop it's a
click/tap fallback alongside the hover behavior defined in the desktop
block below. Same checkbox-hack mechanism either way, no JS.
.hdr-acct-checkbox itself must also be hidden unguarded, not just inside
the desktop block - found live on mobile (a visible checkbox square sat
next to the account icon) since the original hiding rule only existed
inside @media(min-width:801px). */
.hdr-acct-checkbox {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
}
.hdr-acct-checkbox:checked ~ .hdr-acct-menu {
display: block;
}
.hdr-acct-checkbox:checked ~ .hdr-acct-btn .hdr-acct-chev {
transform: rotate(180deg);
}
/* Unguarded (not inside either @media block): .hdr-actions-wa is a leftover
span from round 6-8's mobile actions row (a third WhatsApp render
location, since removed - round 9 puts WhatsApp back in the contact
row for both viewports). The only other hide rule for it lives inside
@media(min-width:801px) below, which - same recurring bug shape as
several earlier rounds - never applied on mobile at all, so the bare
rendered inline and unstyled there (a real regression, caught
via live screenshot immediately after building round 9's grid, not
assumed safe). This one rule now covers both viewports; the
media-scoped one below is redundant but left in place rather than
removed, matching how other belt-and-suspenders fixes in this file
already work. */
.hdr-actions-wa {
display: none;
}
@media (min-width: 801px) {
#container_top,
#container_top_right {
background-color: transparent;
background-image: none;
}
/* .sci_lt is a pre-existing theme decoration (not something this redesign
added), a fixed 24x150px corner accent (sci_img_l_up.gif) layered over
the top-left of the header, independent of #container_top/_right's own
backgrounds above. It was tuned to taper into the OLD flat-color header
background; found live (pixel-identified via elementFromPoint at the
exact reported artifact location, not guessed) that its own hard
diagonal edge now reads as a visible seam against the busier pixel-tile
background this phase restored. Removing just its background-image
here (desktop only) - the element itself, and the actual continuous
page-side border it sits in front of, come from separate elements
(.sci_lb/.sci_rb) and are untouched. Mobile already hides .sci_lt
entirely via main.css's own unguarded mobile rule, so no mobile-side
change was needed. */
.sci_lt {
background-image: none;
}
/* Client-feedback pass: the yellow-olive decorative stripe (sci_t1_bg_l/r.gif
tiled the full page height via .sci_lb_body/.sci_rb_body, plus the bottom
corner accents sci_img_l/r_down.gif via .sci_lb/.sci_rb) reads as visual
noise with no functional purpose, site-wide, not just the header. Same
fix shape as .sci_lt above: these 4 classes carry nothing but `background`
in main.css (no width/height/position/float), so zeroing it here can't
affect layout - only the corner-gif decoration goes away. Desktop only:
mobile already replaces these same 4 classes' background with the header
tile (main.css, unguarded @media max-width:800px rule) instead of the
yellow gifs, so mobile's gutter is untouched and out of scope here. */
.sci_lb_body,
.sci_rb_body,
.sci_lb,
.sci_rb {
background: none;
}
#container_top {
vertical-align: top;
height: auto;
padding: 0;
}
#container_top .cpt_custom_html {
margin-left: 0;
}
.hdr-util-left {
height: 34px;
}
.hdr-util-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
height: 34px;
padding: 0 22px;
box-sizing: border-box;
position: relative;
z-index: 2;
}
/* Mobile-only third render of the WhatsApp component (round 6) - desktop
already has it in the contact row above search, doesn't need it here
too. Hidden by default (a bare would otherwise render inline,
unstyled) and shown only inside @media(max-width:800px) below. */
.hdr-actions-wa {
display: none;
}
/* Flags: moved here from .hdr-util-left this round. Reorder to LV/RU/EN
via :has() on the real alt text each flag carries (confirmed
live: Latviski/Русский/English) - no DB/admin change needed. */
#container_top_right .hdr-util-right .cpt_language_selection {
display: flex;
align-items: center;
gap: 6px;
float: none;
width: auto;
margin: 0;
padding: 0;
}
#container_top_right .hdr-util-right .cpt_language_selection a:has(img[alt="Latviski"]) {
order: 1;
}
#container_top_right .hdr-util-right .cpt_language_selection a:has(img[alt="Русский"]) {
order: 2;
}
#container_top_right .hdr-util-right .cpt_language_selection a:has(img[alt="English"]) {
order: 3;
}
/* Account dropdown mechanics REWRITTEN this round (2026-08-14, live
feedback): was /, which only opens/closes on click and
stays open until clicked again - live testing confirmed it does NOT
close on mouseleave (getComputedStyle on the menu read display:block
even while closed, proving the browser hides content through
an internal mechanism that a CSS display override can't reach - not
fixable by overriding [open] styling). Replaced with the "checkbox hack":
a visually-hidden checkbox +