/* ═══════════════════════════════════════════════════════════════════ store.css — the STOREFRONT shell for catalog/view/template/ (the LIVE theme) (Twisti, 2026-09-03) Loaded by catalog/view/template/common/header.twig AFTER uix.min.css (Tabler = Bootstrap 5) and app.css (the shared admin/storefront component vocabulary). It owns ONLY the shell: top bar, mobile drawer, category-nav slot, page frame, footer and cookie bar. Page bodies are written by the other storefront templates and must sit inside this frame. ── Conventions every storefront template must follow ───────────────────── Root:
(NOT .app-shell — that is the admin root and app.css positions a fixed 430px app bar off it.) Frame: header.twig opens
; footer.twig closes it. Pages render the stock
{{ column_left }}
… grid unchanged — Bootstrap's grid comes from uix.min.css. Tokens: use the app.css tokens (--app-primary, --app-bg, --app-card, --app-border, --app-text, --app-muted, --app-radius, --app-shadow). Tabler's own --tblr-primary / link colour are remapped below to --app-primary so .btn-primary, .form-control:focus, links, badges all pick up the AarZaa blue automatically. Buttons: plain Bootstrap/Tabler classes (.btn .btn-primary / .btn-outline- secondary / .btn-light …) — uix.min.css styles them in the Tabler look. app.css .btn-save / .btn-cancel-bar remain available for phone-style save bars. Cards: .card-android (app.css) for app-flavoured blocks, or Tabler .card. Icons: Tabler Icons . The served font is a SUBSET — see catalog/view/javascript/native/uix/icons/fonts/README.md before using a new icon. Font Awesome ({{ icons }}) is also loaded (plan D6) for stock-derived fragments and common.js alert glyphs. Prefix: every class defined in THIS file starts with `store-`. Breakpoints (plan §5.2): <768 phone, 768–991 tablet, ≥992 desktop nav. ═══════════════════════════════════════════════════════════════════════ */ /* ── Tabler → AarZaa colour remap ───────────────────────────────────────── uix.min.css defines --tblr-primary:#066fd1. Re-pointing the handful of variables Tabler derives buttons/links/focus rings from makes stock-derived `.btn-primary` / `a` / `.form-control:focus` match the admin blue without touching any page template. */ :root { --tblr-primary: var(--app-primary); --tblr-primary-rgb: 26, 86, 219; --tblr-primary-darken: #1747b8; --tblr-link-color: var(--app-primary); --tblr-link-color-rgb: 26, 86, 219; --tblr-link-hover-color: #1747b8; --tblr-link-hover-color-rgb: 23, 71, 184; --tblr-body-bg: var(--app-bg); --store-bar-h: 64px; /* top bar height (desktop); phone uses 56px */ --store-max-w: 1200px; /* ONE content band shared by bar, nav, page, footer */ --store-gutter: 16px; /* ONE side gutter shared by the same four (12px on phones) */ --store-ctrl-h: 40px; /* height of every control in the bar: pills, icons, search input+button, cart button */ } /* ── Shared container ───────────────────────────────────────────────────── Everything that spans the page — the bar's inner row, the category strip's .container, each page's root .container, .app-content hub pages and the footer — is capped at --store-max-w and inset by --store-gutter, so the brand, the search box, the page heading and the first card all start on the same vertical line and end on the same one. Bootstrap's own responsive .container caps (1140/1320…) are overridden here on purpose. */ .store-bar-inner, .store-nav > .container, .store-main > .container, .store-main > [id] > .container, .store-main .app-content, .store-footer-inner { width: 100%; max-width: var(--store-max-w); margin-left: auto; margin-right: auto; padding-left: var(--store-gutter); padding-right: var(--store-gutter); } /* ── Shell root ── */ .store-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--app-bg); } .store-main { flex: 1 0 auto; padding: 18px 0 32px; } /* Hub-style pages (account/*) reuse the admin's .app-content class. In app.css that class carries the ADMIN shell geometry — padding-top for a fixed 60px app bar, 100vh min-height, a 1140px cap at >=1200px. The storefront bar is sticky (no reserved padding needed), so neutralise all of it here; the shared-container rule above already gives it the page band + gutter. The .card-android / .form-page-title / .section-label children carry their own 12–16px insets, so the band is pulled in by 12px to land the cards exactly on the gutter line the grid pages use. */ .store-main .app-content { padding-top: 0 !important; padding-bottom: 24px !important; min-height: 0 !important; flex: none; padding-left: calc(var(--store-gutter) - 12px); padding-right: calc(var(--store-gutter) - 12px); } /* Heading / section labels keep the same 12px inset as .card-android so their text starts on the card edge (and on the bar's brand). */ .store-main .app-content .form-page-title { padding: 4px 12px 12px; } .store-main .app-content .section-label { padding-left: 12px; padding-right: 12px; } .store-main .app-content .section-label:first-of-type { padding-top: 8px; } /* app.css sets `a { color: inherit }` for the admin's button-style links. The storefront is text-link heavy (product names, breadcrumbs, footer), so restore link colour inside the content and footer. Written with :where() so the rule has the specificity of a bare `a` (0,0,1): it still beats app.css's `a { color: inherit }` by source order, but ANY class on the anchor now wins — .acct-btn-primary, .acct-hub-feature, .store-footer-links a, Tabler .btn-* … Before this it was (0,1,1) and silently painted every class-coloured primary-blue (the unreadable "My Workspace" tile and the workspace login button). Do not raise it again. */ :where(.store-main, .store-footer) a { color: var(--app-primary); } :where(.store-main, .store-footer) a:hover { text-decoration: underline; } /* NOT `.store-main .btn` here: Tabler's .btn sets its own colour and each variant (.btn-primary {color:#fff} …) is a bare class — forcing `inherit` at (0,1,1) painted every dark-on-blue. The link rule above is (0,0,1), so Tabler's .btn wins over it on its own. */ .store-main .text-reset, .store-main .store-plain a, .store-main .card-android a, .store-main .list-item { color: inherit; } .store-main .btn:hover, .store-main .card-android a:hover, .store-main .list-item:hover { text-decoration: none; } /* Stock pages open with

straight inside #content; give it the Tabler page-title weight without every template restating it. */ .store-main #content > h1, .store-main #content > h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--app-text); margin: 4px 0 14px; } .store-main .breadcrumb { padding: 0; margin: 0 0 12px; background: none; font-size: 12.5px; font-weight: 600; } .store-main .breadcrumb-item a { color: var(--app-muted); } .store-main .breadcrumb-item.active, .store-main .breadcrumb-item:last-child a { color: var(--app-text); } /* Account screens carry no breadcrumb (owner, 2026-09-04) — mirrors the admin, where app.css hides .breadcrumb-wrapper under .app-shell. One scoped rule instead of editing every account/*.twig: every account/ page root is
, and the two breadcrumb shapes in that folder are the stock
    and the native
      . information/gdpr.twig also uses the stock id #account-gdpr but is NOT an account screen, so it is excluded and keeps its trail. Product, category, checkout and information pages are untouched. display:none removes the element's own margins too, so the heading keeps the shared page-top rhythm. */ .store-main [id^="account-"]:not(#account-gdpr) .breadcrumb, .store-main [id^="account-"]:not(#account-gdpr) .acct-crumbs { display: none !important; } /* Owner, 2026-09-04 (2): also no breadcrumb on the product PAGE and on checkout. Exact root ids on purpose — no prefix match — because product/ also holds category, manufacturer, search, special and compare, which KEEP their trail, and cms/blog + account/order_info reuse product-… / checkout-… ids on nested elements. (Never write a star-slash pair inside this comment: it ends it.) Checkout fragments (cart_list, confirm, *_address, *_method, register) render inside these two roots and carry no breadcrumb of their own. Owner, 2026-09-06 (3): nor on the outcome page (common/success.twig, root #common-success) — a terminal "done" screen after registration, checkout, logout, returns, contact, GDPR and payment failure; the trail is still built by the controllers, only hidden here, so the markup contract is unchanged. */ .store-main #product-info .breadcrumb, .store-main #checkout-cart .breadcrumb, .store-main #checkout-checkout .breadcrumb, .store-main #common-success .breadcrumb { display: none !important; } /* ── Top bar ────────────────────────────────────────────────────────────── Sticky (not fixed): the page never needs to reserve padding for it, so stock page templates that know nothing about the bar still lay out right. */ .store-bar { position: sticky; top: 0; z-index: 30; background: var(--app-card); border-bottom: 1px solid var(--app-border); box-shadow: 0 2px 12px rgba(15,23,42,0.06); padding-top: env(safe-area-inset-top, 0px); } .store-bar-inner { /* width / max-width / gutter come from the shared-container rule above */ min-height: var(--store-bar-h); padding-top: 8px; padding-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Every direct control in the bar shares one height so the row centres on a single axis (pills, icon buttons, search, cart). */ .store-bar-icon, .store-pill, #cart .dropdown > .btn, .store-search .form-control, .store-search .btn { height: var(--store-ctrl-h); min-height: 0; } /* Icon button — same recipe as the admin white app bar (#appBar .app-bar-icon) */ .store-bar-icon { width: 40px; height: 40px; border-radius: 11px; border: none; background: transparent; color: #475569; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; cursor: pointer; flex-shrink: 0; position: relative; -webkit-tap-highlight-color: transparent; text-decoration: none; } .store-bar-icon:hover, .store-bar-icon:active, .store-bar-icon:focus-visible { background: #f1f5f9; color: var(--app-text); text-decoration: none; } /* Brand: logo image or store name */ .store-brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: var(--app-text); text-decoration: none; min-width: 0; flex-shrink: 0; } .store-brand img { max-height: var(--store-ctrl-h); max-width: 150px; width: auto; display: block; object-fit: contain; } .store-brand:hover { text-decoration: none; color: var(--app-text); } .store-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--app-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .store-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Search slot — holds the common/search partial ({{ search }}) unchanged. Stock markup is
      . */ /* Flexible middle: shrinks before anything else so brand + actions never wrap the bar onto a second row (>=768px; phones move it to its own row below). */ .store-search { flex: 1 1 200px; min-width: 150px; max-width: 520px; } /* The stock form carries .input-group.mb-3 and .form-control-lg/.btn-lg. Tabler gives -lg controls DIFFERENT min-heights (input 44px, button 48px), which is what made the input's bottom border sit above the button's and read as a stray rule. Both are pinned to --store-ctrl-h (see the bar rule above), the group is a non-wrapping flex row, and the two halves share one 12px radius. */ .store-search .input-group { margin: 0 !important; flex-wrap: nowrap; } .store-search .form-control { font-size: 14px; line-height: 1.2; padding: 0 14px; border-radius: 12px 0 0 12px; border: 1.5px solid var(--app-border); border-right: 0; background: #f8fafc; box-shadow: none; } .store-search .form-control:focus { background: #fff; border-color: var(--app-primary); box-shadow: none; } .store-search .form-control:focus + .btn { border-color: var(--app-primary); } .store-search .btn { border-radius: 0 12px 12px 0; margin-left: 0 !important; background: var(--app-primary); color: #fff; border: 1.5px solid var(--app-primary); padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; } .store-search .btn:hover { background: var(--tblr-primary-darken); border-color: var(--tblr-primary-darken); color: #fff; } /* Right-hand action cluster */ .store-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; } /* Pill: icon + optional label (label only ≥992px). Used for currency, language, account, wishlist, checkout, contact. Also the dropdown trigger look for the currency/language/account menus. */ .store-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 11px; border: none; background: transparent; color: #475569; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .store-pill i { font-size: 20px; line-height: 1; } .store-pill:hover, .store-pill:focus-visible, .store-pill.show { background: #f1f5f9; color: var(--app-text); text-decoration: none; } .store-pill-label { display: none; } .store-pill-sym { font-weight: 800; font-size: 14px; min-width: 14px; text-align: center; } .store-pill-flag { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; display: block; } /* Tabler's .dropdown-toggle adds a caret pseudo-element; the pill draws its own */ .store-pill.dropdown-toggle::after { display: none; } .store-pill .store-caret { font-size: 14px; opacity: .6; } /* Count badge (wishlist / cart) — same as app.css .notif-badge */ .store-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: #f03e3e; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; border-radius: 9px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; } /* Dropdown menus opened from the bar (account, currency, language, cart). Tabler's .dropdown-menu is already close; tighten radius/shadow to the app.css card look. */ .store-bar .dropdown-menu { border-radius: var(--app-radius); border: 1px solid var(--app-border); box-shadow: 0 10px 30px rgba(15,23,42,0.12); padding: 6px; min-width: 200px; margin-top: 6px !important; } .store-bar .dropdown-item { border-radius: 9px; padding: 9px 10px; font-size: 13.5px; font-weight: 600; color: var(--app-text); display: flex; align-items: center; gap: 9px; } .store-bar .dropdown-item i { font-size: 18px; color: var(--app-muted); } .store-bar .dropdown-item:hover, .store-bar .dropdown-item:focus { background: #f1f5f9; color: var(--app-primary); } .store-bar .dropdown-item:hover i { color: var(--app-primary); } .store-bar .dropdown-item img { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; } /* Cart slot — wraps the common/cart partial ({{ cart }}). Stock markup: