/* Shared customer storefront design. Loaded last by every storefront renderer.
Commerce hooks, CMS ordering, dialogs and admin styles retain their owners. */
@font-face{font-family:Begad Jakarta;src:url('../fonts/pixel/plus-jakarta-sans-latin.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}
:root{--market-ink:#20242a;--market-muted:#55514d;--market-accent:#c93405;--market-line:#e9ded3;--market-paper:#fffcf8;--market-radius:18px}
body.begad-marketplace{zoom:1!important;transform:none!important;background:var(--market-paper)!important;color:var(--market-ink);font-family:'Begad Jakarta',Arial,sans-serif!important;-webkit-font-smoothing:antialiased}
/* Widened from 1472px to 1660px (2026-09-08) -- reported live as "huge
amount of white space on the right and left of each element" on wide
monitors, once the hero above (which is now intentionally full-bleed,
see the .market-entrance.container override further down this file)
made every other section's narrower cap+margins obvious by contrast.
1660px matches the pre-existing wide-container cap storefront_layout.php
already uses site-wide outside this marketplace theme (`main .container,
body > section > .container{max-width:min(100% - 32px,1660px)}`), rather
than inventing a third, different "wide" value for this theme alone.
Widened again, 1660px -> 2200px (2026-09-11): reported live, with a real
32in-monitor screenshot, as still having "huge gaps on the right and left
sides" for every non-hero section -- the hero itself was confirmed fine
(it's exempted from this cap entirely, see .market-entrance.container
below). A 32in display commonly reports a ~2560px CSS viewport width (a
2560x1440 panel at 100% OS scaling, or a 3840x2160 panel at 150%), so a
1660px cap left roughly 900px of unused width -- genuinely "huge", not a
one-off perception. 2200px still leaves an intentional margin rather than
going fully edge-to-edge like the hero (unbounded product grids/text
measure poorly at true edge-to-edge on very wide screens), but cuts that
gap to a couple hundred px total on a 2560-wide screen -- consistent with
why the hero itself was deliberately made full-bleed and everything else
wasn't. Revisit again if a genuinely wider real monitor (true 4K at 100%
scaling, ~3840px) reports the same complaint. */
body.begad-marketplace .container{max-width:2200px;padding-inline:18px}
body.begad-marketplace h1,body.begad-marketplace h2,body.begad-marketplace h3,body.begad-marketplace h4,body.begad-marketplace h5,body.begad-marketplace h6{font-family:inherit;letter-spacing:-.035em}
body.begad-marketplace p{line-height:1.65}
body.begad-marketplace a,body.begad-marketplace button,body.begad-marketplace input,body.begad-marketplace select,body.begad-marketplace textarea{-webkit-tap-highlight-color:transparent}
body.begad-marketplace :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #bd4b24!important;outline-offset:4px}
body.begad-marketplace .btn{border-radius:10px!important;font-weight:700;letter-spacing:0;box-shadow:none}
body.begad-marketplace .btn-primary{background:var(--market-accent)!important;border-color:var(--market-accent)!important;color:#fff!important}
body.begad-marketplace .btn-primary:hover{background:#a93612!important;border-color:#a93612!important}
body.begad-marketplace .input-group{border:1px solid #e9ded3;border-radius:10px!important;background:#fff}
body.begad-marketplace :is(input,select,textarea){font-family:inherit}
body.begad-marketplace :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){font-size:max(16px,1em)}
body.begad-marketplace :is(input[type=checkbox],input[type=radio]){accent-color:var(--market-accent)}
/* Compact three-level navigation; existing responsive menus stay intact. */
body.begad-marketplace header .header-top{background:#20242a!important;color:#fff!important;border:0!important;min-height:34px}
body.begad-marketplace header .header-top :is(a,p,span,button,i){color:#fff!important}
body.begad-marketplace header .header-top .container{padding-block:0}
body.begad-marketplace header .header-top :is(.bg-warning,.bg-primary){background:transparent!important}
body.begad-marketplace header .header-middle{background:#fff!important;border:0!important;padding-block:12px!important}
body.begad-marketplace header .header-middle .container>div>div:first-child img{width:142px;height:auto;max-height:54px;object-fit:contain}
body.begad-marketplace header .header-middle .gap-x-\[54px\]{gap:32px}
body.begad-marketplace header .search-input-container .input-group{min-height:50px;border:1px solid #e9ded3!important;border-radius:12px!important;background:#fffcf8!important;box-shadow:none!important}
body.begad-marketplace header .search-input-container input{background:transparent!important;color:var(--market-ink)!important}
body.begad-marketplace header .search-input-container label{background:#fffcf8!important;color:#746c64!important;font-size:14px!important}
body.begad-marketplace header :is(.header-middle,.sticky-header) .bg-warning{background:#fff8f0!important;color:var(--market-ink)!important}
body.begad-marketplace header .header-bottom{background:#fff!important;border-block:1px solid var(--market-line)!important;box-shadow:none!important}
body.begad-marketplace header .header-bottom .btn-primary{background:#fff8f0!important;color:var(--market-ink)!important;border:1px solid #e9ded3!important;border-radius:9px!important;box-shadow:none!important}
body.begad-marketplace header .header-bottom .btn-primary:hover{background:#fff8f0!important}
body.begad-marketplace header .main-menu>ul>li>a{font-size:13px;font-weight:700;color:#20242a}
body.begad-marketplace header .main-menu>ul>li>a:hover{color:var(--market-accent)!important}
body.begad-marketplace header .sticky-header{box-shadow:none;background:#fff!important}
/* A still, editorial entrance, using live catalogue images. */
.b19-homepage:has(.market-entrance) section:has(.home-five-hero-slider){display:none!important}
body.begad-marketplace .market-entrance{padding-top:0}
/* Two-tone strip sitting flush on the hero below it (zero margin between
.market-intro and .market-hero-grid, both direct children of the same
.market-entrance container) -- a UAE-pride panel on one side, Begad's
own existing tagline/order-tracking link (unchanged content, just
restyled) on the other, echoing a reference marketplace strip's layout
without borrowing its bank-partner branding or discount claim. */
.market-intro{display:flex;align-items:stretch;gap:0;font-size:11px;border-radius:16px 16px 0 0;overflow:hidden}
.market-intro-uae{display:flex;flex:0 0 auto;align-items:center;gap:8px;padding:11px 22px;background:#fffcf8;color:#5a2c10;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.market-intro-flag{font-size:15px;line-height:1}
.market-intro-promo{display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;gap:12px;padding:11px 22px;background:#c93405;color:#fff}
.market-intro-promo a{font-weight:700;color:#fff;white-space:nowrap}
/* Image-slideshow variant of .market-intro (requested 2026-09-11: "make
it slide show and we will upload images for it from the admin
portal") -- same flush-on-hero position/radius as the static strip
above, but a fixed-height crossfade of admin-uploaded images instead
of the two text panels. Only renders when Homepage Manager's "Top
Strip Banner" has at least one Active slide with an image
(storefront_fetch_market_intro_slides()); otherwise the static strip
above is what's actually in the page.
Real bug, found live 2026-09-11 from the first 3 real uploaded
banners: .is-active switched to position:relative to drive the
container's height, but that also drops `inset:0` (inset only
applies to absolutely/fixed-positioned boxes) -- so the active
slide's own height became "however tall the naturally is"
instead of the intended fixed strip height, and a ~120-180px source
image rendered at full height, overlapping the header above it. Kept
every slide (active or not) position:absolute + inset:0 against the
slider's own explicit height instead, and added overflow:hidden as a
second line of defense (.market-intro's own overflow:hidden should
already cover this by class combination, but relying on that alone
is exactly the kind of fragility that caused the bug above).
Height went 44px -> 120px -> 70px -> 47px across three live
iterations on 2026-09-11 ("make it 1/3 shorter" than the 70px
version, i.e. 70 * 2/3). Each height change re-cropped the three
real banner images to match (deliberately, offset chosen per image
to keep the real content -- logo/headline/offer -- in frame, rather
than left to object-fit: cover's blind center-crop). At 47px, the
Vidvie banner's own "VIDVIE" wordmark cannot fit uncropped no matter
the offset -- it's tall relative to its own 180px source banner, a
constraint of that source image, not something a different crop
position can fix; the "Smart Accessories" headline and the product
photography were kept fully in frame as the higher-priority content.
Mobile height kept the same ~0.386 ratio to desktop this strip has
used throughout (was 40/70, now 27/47, rounded). */
.market-intro-slider{position:relative;display:block;height:47px;padding:0;overflow:hidden}
.market-intro-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease;pointer-events:none}
.market-intro-slide.is-active{opacity:1;pointer-events:auto}
/* wrapping the (2026-09-11, added for a dedicated mobile
crop of this same banner -- is a real, separately
cacheable image request, not a JS/CSS swap) is display:inline by
default; forcing it to block+100% explicitly rather than relying on
percentage-width-through-an-inline-ancestor resolving the way every
browser happens to today. */
.market-intro-slide picture{display:block;width:100%;height:100%}
.market-intro-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* Real bug, reported live 2026-09-11 from a 12in laptop screenshot: "cropped
at the end of it from the right". The strip's height was fixed (47px)
while its width is full-bleed (100% of viewport), so object-fit:cover had
to horizontally center-crop the 1920x47 banner on every screen narrower
than 1920px -- i.e. on every real laptop. The crop is actually symmetric
(equal px trimmed off both sides), but the real ABX Home banner is
full-bleed content with nothing to spare at either edge (the sofa photo
touches the left edge, "*T&C Apply" touches the right) -- cropping a
photo is invisible, cropping text mid-character is not, which is why it
only *looked* like a right-side-only crop.
Fix: below the artwork's own native 1920px width, let the strip's height
shrink with an aspect-ratio that exactly matches the image's own
(1920/47) instead of staying fixed -- the whole banner scales down as one
piece, so every pixel stays visible, just smaller ("proper SVG
scalability" per the report, rather than a lossy crop). object-fit
switches to contain in this range too, as a safety net for any future
slide whose native ratio doesn't exactly match 1920:47 (worst case then
is a few px of letterboxing, never a cropped edge).
Originally scoped to min-width:601px, deliberately stopping short of
the ≤600px mobile breakpoint: mobile's own fixed height (27px) was kept
on the reasoning that going fully fluid there would shrink the strip to
~9-10px, undoing an earlier explicit "make it 1/3 shorter" legibility
choice. Reported again 2026-09-11, "so cropped" on mobile -- rendered
the actual uploaded banner and simulated the real crop math rather than
reasoning about it again: at a 355px-wide phone viewport with the old
fixed 27px height, object-fit:cover's center-crop showed only the
*middle ~32%* of the 1920px-wide design -- not "a bit tight", but
entirely missing the ABX HOME logo on the left AND the Shop Now/
discount-code CTA and "*T&C Apply" text on the right, since this
banner's content runs genuinely edge-to-edge with no safe zone in the
middle. A banner missing its own logo and CTA is a worse outcome than
one that's merely small, so this rule now applies at every width below
1920px, mobile included -- min-width:601px dropped entirely. The old
concern (illegible at ~9px) is real but the alternative it was avoiding
was worse; a future slide/composition problem specific to this size
should be solved by designing that slide with a mobile-safe center
zone, not by re-introducing a crop that hides two-thirds of every
banner by default.
Left untouched at/above 1920px on purpose still: the user's own
screenshot confirmed the strip already looks correct, edge-to-edge, on
a 32in monitor -- that's the existing fixed-height+cover behavior,
unchanged. */
@media(max-width:1919.98px){
.market-intro-slider{height:auto;aspect-ratio:1920/47;max-height:47px}
.market-intro-slide img{object-fit:contain}
}
/* Mobile treatment of the Top Strip Banner slideshow, final form as of
2026-09-11 after three earlier attempts on the same day (auto-pan,
then swipeable-scroll, each with its own follow-up bugs -- see git
history on this block for the full trail): the site owner ultimately
didn't want motion OR a swipe interaction at all, just "make it look
better" -- and pointed out it's SVG (i.e. infinitely re-croppable
without quality loss, unlike a raster export).
The physical constraint never went away: this banner's ~41:1 aspect
ratio can't be shown in full, legibly, on a ~350-390px phone screen
(doing so needs a box roughly 4x wider than the phone itself -- see
the earlier attempts' own measurements). With motion and scrolling
both off the table, the only remaining option is a static crop -- so
this is one, at a comfortably larger fixed height, using
object-position to choose *which* part of the artwork shows instead
of leaving it at the default center. Center doesn't work as a single
universal choice because different slides put their important content
(a CTA pill, a wordmark, whatever) in completely different places --
confirmed directly by rendering the actual VIDVIE slide at the same
crop window tuned for the ABX Home slide: it showed nothing but three
category icons, missing the VIDVIE wordmark and its own CTA entirely.
So the crop position is admin-configurable per slide ("Mobile Crop
Focus" in this section's form below, 0-100 left-to-right,
market_intro_slide_N_mobile_focus in site_settings) rather than
hardcoded, output as the --intro-mobile-focus custom property inline
per slide in marketplace-hero.php -- the same fix a developer would
otherwise have to make in this CSS file by hand every time a new
slide is uploaded. Defaults to 50 (center) for any slide that hasn't
had a focus point chosen yet, matching plain object-position:center's
own default so a fresh unconfigured slide behaves exactly as if this
feature didn't exist.
height:44px chosen by rendering the real uploaded ABX Home slide and
testing crop windows until the CTA pill ("Shop now -> using code
HOME15 and get 15% OFF") rendered whole and legible with nothing
else bleeding in at the edges -- picked as the shared height for
every slide (crossfading between different heights would visibly
jump), with each slide's own object-position doing the rest. */
@media(max-width:600px){
.market-intro-slider{height:44px;aspect-ratio:auto;overflow:hidden}
/* max-width:none needs !important here: begad-ios-hig.css's global
phone-width image reset ("body.begad-storefront-shell :is(img,
video, canvas, svg){max-width:100%}") has higher specificity
(0,1,2, via the body class + :is(img)) than this plain
".market-intro-slide img" selector (0,1,1) and would otherwise
silently clamp the crop back to the container's own width
regardless of source order -- confirmed live via getComputedStyle
during the previous (swipeable) attempt at this same fix, see git
history; still applies here even though the mechanism (a static
crop, not a scrollable overflow) is different this time. */
.market-intro-slide img{width:100%;height:100%;max-width:none!important;object-fit:cover;object-position:var(--intro-mobile-focus,50%) center}
}
.market-intro-slider-dots{position:absolute;z-index:2;inset-inline-end:16px;bottom:6px;display:flex;gap:6px}
.market-intro-slider-dots>span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.market-intro-slider-dots>span.is-active{background:#fff}
.market-hero-grid{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(245px,1fr);gap:10px}
.market-hero{display:grid;grid-template-columns:1.2fr 1fr;min-height:440px;position:relative;overflow:hidden;border-radius:22px;background:#fff8f0}
/* Requested 2026-09-10: the main hero (previously the hardcoded "A little
upgrade. A better everyday." copy + iPhone spotlight, split across the
1.2fr/1fr columns above) is now a single composed banner image/link --
.market-hero:not(:has(.market-feature)) further down this file already
collapses grid-template-columns to 1fr whenever there's no .market-feature
(true here, that element no longer renders), so this just needs to fill
the one resulting cell.
Two attempts before this one, both wrong:
1) height:auto let the box grow to the image's full natural height, to
stop an older rule further down this file
(`@media(min-width:1600px){.market-hero{min-height:310px;height:310px}}`,
tuned for the old text+spotlight content) from silently clipping the
banner via `overflow:hidden` at >=1600px -- but that made the hero
visibly taller than before on a wide screen, reported live ("why you
made the banner bigger it should have stayed at the same size").
2) A fixed height:420px (matching `.home-banner-big`'s own 420px
max-height elsewhere on this homepage) fixed the wide-screen size,
but a FIXED height applies at every width including mobile, where
100%-width-x-420px-tall is a completely different, much taller-than-
wide box than the banner's own 2.667:1 (1600x600) source ratio --
object-fit:cover then had to zoom in drastically to fill that shape,
cropping in to a near-unrecognizable close-up on a real phone width.
`aspect-ratio` fixes both: height is computed directly from the image's
own resolved width at every screen size (proportional, like `height:
auto` would give), and `max-height:420px` only ever kicks in once that
natural height would exceed it -- which only happens on wide desktop
screens (roughly >1120px CSS width for this 2.667:1 image), exactly
where the "too tall" report came from. Below that width the image
already fits under 420px on its own, so nothing crops at all -- mobile
renders the full banner, uncropped, same as before either change.
`object-position:center top` still governs *what* gets trimmed on the
wide-screen case: the bottom, e.g. the decorative "Stylish Living /
Quality You Can Trust / A Better Home Everyday" row for the current ABX
Home banner, while the title/offer/button stay fully visible either way.
1600/600 is this specific image's own ratio -- update it to match
whatever the graphic designer's replacement banner actually is (see the
ABX Home banner's own commit for the recommended-size conversation).
Scoped to .market-hero:not(:has(.market-feature)) like the
grid-template-columns rule above, so the old text-hero layout's own
tuned heights are untouched if .market-feature ever comes back. */
.market-hero:not(:has(.market-feature)){min-height:0;height:auto}
.market-hero-banner-link{display:block;width:100%}
.market-hero-banner-img{display:block;width:100%;height:auto;aspect-ratio:1600/600;object-fit:cover;object-position:center top;max-height:420px}
.market-hero-copy{padding:48px 0 34px 38px;position:relative;z-index:1;display:flex;align-items:flex-start;flex-direction:column}
[dir=rtl] .market-hero-copy{padding:48px 38px 34px 0}
.market-eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.13em;line-height:1.5;color:#55514d}
.market-eyebrow>span{width:6px;height:6px;border-radius:50%;background:#55514d}
body.begad-marketplace .market-hero h1{margin:24px 0 20px;font-size:clamp(35px,3.7vw,56px);font-weight:800;line-height:1.09;letter-spacing:-.055em;color:#20242a!important}
.market-hero-copy>p{max-width:330px;font-size:13px;color:#55514d;line-height:1.85;margin:0 0 27px}
.market-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.market-button{display:inline-flex;align-items:center;justify-content:center;gap:25px;background:#c93405;color:white!important;padding:15px 20px;border-radius:9px;font-size:12px;font-weight:700;transition:background .2s,transform .2s}
.market-button:hover{background:#20242a;transform:translateY(-2px)}
.market-button>span{font-size:19px}
.market-link{font-size:11px;font-weight:700;color:#20242a;text-decoration:underline;text-underline-offset:5px}
.market-hero-note{display:flex;gap:7px;align-items:center;margin-top:auto;padding-top:30px;font-size:10px;color:#55514d}
.market-feature{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 25px 25px;min-width:0}
.market-feature-label{position:absolute;top:36px;inset-inline-end:25px;font-size:9px;letter-spacing:.15em;color:#746c64;font-weight:700}
.market-feature-orbit{position:absolute;width:300px;height:300px;max-width:90%;aspect-ratio:1;border-radius:50%;background:#e9ded3;box-shadow:0 0 0 22px #e9ded3,0 0 0 23px #e9ded3}
.market-feature>img{position:relative;width:100%;height:270px;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(8px 18px 12px #3820101a);transition:transform .35s}
.market-feature:hover>img{transform:translateY(-6px) rotate(-3deg)}
.market-feature-caption{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:15px;padding:13px 15px;border-radius:12px;background:#ffffffd9;backdrop-filter:blur(10px);border:1px solid #fff}
.market-feature-caption>span:first-child{min-width:0}
.market-feature-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#55514d;max-width:210px;margin-bottom:4px}
.market-feature-caption strong{font-size:17px;color:#20242a;letter-spacing:-.03em}
.market-round-arrow{display:grid;place-items:center;background:#fff;width:31px;height:31px;flex-shrink:0;border-radius:50%;color:#20242a}
.market-side{display:grid;grid-template-rows:1fr;gap:18px;min-width:0}
.market-side>a{position:relative;isolation:isolate;overflow:hidden;padding:26px;border-radius:20px;display:flex;flex-direction:column;align-items:flex-start}
.market-deal-tile{background:#f8e9da;color:#65321a}
.market-side .market-eyebrow{font-size:8px;letter-spacing:.12em;color:inherit}
body.begad-marketplace .market-side h2{font-size:26px;line-height:1.17;font-weight:750;letter-spacing:-.04em;margin-top:17px;margin-bottom:20px;color:inherit!important}
.market-side p{display:flex;gap:18px;font-size:10px;font-weight:700;margin-top:auto;color:inherit;position:relative;z-index:1}
.market-side p span{font-size:17px}
.market-deal-art{position:absolute;inset-inline-end:-4px;bottom:-26px;color:#e9bd974d;font-size:160px;font-weight:800;line-height:1;transform:rotate(-15deg);z-index:-1}
.market-home-tile{background:#e9edef;color:#344651}
.market-home-tile>img{position:absolute;inset-inline-end:-12px;bottom:8px;width:46%;height:140px;object-fit:contain;mix-blend-mode:multiply;z-index:-1}
.market-home-tile h2{max-width:70%}
/* Admin-uploaded slideshow variants of .market-hero and .market-side
(2026-09-11: started as a single-image admin upload for each, then
upgraded the same day to a multi-slide slideshow -- "make it accept
multiple uploads instead of one, like a slideshow". See
storefront_fetch_hero_big_banner_slides()/storefront_fetch_hero_side_banner_slides()
in storefront_helpers.php). The single-image .market-side-banner-image/
.market-side-banner-img classes this replaced are gone -- superseded
entirely by .market-side-slider below, which also covers the single-slide
case (one slide just renders as a static image with no dots/rotation,
same as the Top Strip Banner slideshow's own single-slide behavior). */
.market-hero-slider{position:relative;display:block;width:100%;aspect-ratio:1600/600;max-height:420px;overflow:hidden}
.market-hero-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease;pointer-events:none}
.market-hero-slide.is-active{opacity:1;pointer-events:auto}
.market-hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.market-hero-slider-dots{position:absolute;z-index:2;inset-inline-end:18px;bottom:16px;display:flex;gap:6px}
.market-hero-slider-dots>span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6)}
.market-hero-slider-dots>span.is-active{background:#fff}
/* min-height:190px matches .market-side>a's own min-height (see the base
rule and every breakpoint below) -- needed because .market-side-slider
isn't that selector (it's a plain div replacing the >a tile so multiple
slides can stack inside it) and its slides are all position:absolute, so
without an explicit height it would collapse to 0 under the mobile
breakpoints where .market-side's own row height is auto instead of
stretched to match .market-hero. */
.market-side-slider{position:relative;display:block;width:100%;height:100%;min-height:190px;border-radius:20px;overflow:hidden}
.market-side-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease;pointer-events:none}
.market-side-slide.is-active{opacity:1;pointer-events:auto}
/* object-position:left top, not the default center center (found
2026-09-11, fixed twice and still wrong until actually screenshotted on
a real desktop layout rather than just reasoned about). This box's
width-vs-height ratio swings hard across breakpoints -- landscape
(wide, short) on mobile once the grid column collapses to one, but
portrait (narrow, tall) on desktop, where .market-side's width is just
the ~1fr sliver beside .market-hero's ~3.2fr while its height stretches
to match .market-hero's own considerable height. A first attempt used
object-position:center top, which only accounts for the mobile
(landscape-box) case -- it does nothing for the desktop (portrait-box)
case, where object-fit:cover instead crops evenly off the LEFT and
RIGHT, and a real screenshot showed it slicing the leading "H" off
"Home Upgrade" clean in half. Every real upload so far anchors its
headline/logo to the top-LEFT of the square canvas with empty/
decorative space toward the bottom-right, so left top is the one
anchor that survives both box shapes: mobile crops the (empty) bottom,
desktop crops the (empty) right, and the actual content is never
touched either way. */
.market-side-slide img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.market-side-slider-dots{position:absolute;z-index:2;inset-inline-end:14px;bottom:14px;display:flex;gap:6px}
.market-side-slider-dots>span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6)}
.market-side-slider-dots>span.is-active{background:#fff}
.market-quick-links{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--market-line);padding-block:22px;overflow-x:auto;scrollbar-width:thin}
.market-quick-links>span{font-size:11px;font-weight:700;white-space:nowrap;margin-inline-end:auto}
.market-quick-links>a{display:flex;align-items:center;gap:7px;border:1px solid var(--market-line);background:#fff;border-radius:30px;padding:10px 15px;white-space:nowrap;font-size:10px;font-weight:600;color:#55514d;transition:border-color .2s,background .2s}
.market-quick-links>a:hover{background:#fff8f0;border-color:#e9ded3}
.market-quick-links>a:last-child{border-color:transparent;background:transparent;color:#20242a}
/* Noon-style full-bleed hero (2026-09-08, corrected pass): this is the
hero that actually renders live -- .home-five-hero-slider is
unconditionally display:none whenever .market-entrance is present (see
line 37), which is always true on the current homepage. A first attempt
at this request fixed the old, now-hidden slider's gap/rounding instead
of this one, by mistake -- reported live as "you didn't close the gap"
at a wide viewport, where the .container cap (below -- 1472px at the
time, since widened to 1660px, see that rule's own comment) becomes
visibly narrower than the browser window. Fixed here: the hero spans
the full viewport width edge-to-edge (this section carries the
`.container` class directly on itself rather than nesting one, so the
override targets `.market-entrance.container` specifically -- every
other `.container` on the page, and on every other page, keeps its
normal cap/padding), the gap between .market-hero and
.market-side closes to 0, and every corner (main hero, side tile, the
intro strip on top) squares off instead of rounding -- including the
separate, smaller radius values the ≤600px breakpoint sets for the same
elements further down this file, which needed !important to still win
despite loading earlier in source order than that media query. */
body.begad-marketplace .market-entrance.container{max-width:100%!important;padding-inline:0!important}
.market-hero-grid{gap:0!important}
.market-hero,.market-side>a,.market-intro{border-radius:0!important}
/* CMS sections and reusable product cards. Tightened from 32px/22px/25px
as a dedicated density pass -- requested explicitly against a reference
showing far more content per screen ("closer to this density"). Scoped
to spacing/sizing only per the confirmed approach: same hero, same
design language, no mascot, no sidebar, no countdown strip -- just less
air between the ~13 rails this homepage already has, so more of them
are visible without scrolling. */
body.begad-marketplace.b19-homepage>section:not(.market-entrance):not([data-storefront-newsletter-section]){padding-block:8px!important}
body.begad-marketplace .home-rail-head,body.begad-marketplace .storefront-section-heading-row{margin-bottom:6px!important;gap:6px;align-items:center;justify-content:space-between;text-align:start}
body.begad-marketplace .home-rail-head h3,body.begad-marketplace .home-rail-title{font-size:22px!important;font-weight:750;line-height:1.3;color:#20242a!important;padding-bottom:2px}
body.begad-marketplace .home-rail-head p{font-size:12px;color:#746c64}
body.begad-marketplace :is(.product-card-1,.similar-product-item,[data-storefront-product-card]){background:#fff!important;border:1px solid var(--market-line)!important;border-radius:14px!important;padding:6px!important;box-shadow:none!important;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s}
body.begad-marketplace :is(.product-card-1,.similar-product-item,[data-storefront-product-card]):hover{border-color:#e9ded3!important;box-shadow:0 8px 22px #3820100a!important;transform:translateY(-3px)}
body.begad-marketplace .product-card-1 .product-image{background:#ffffff!important;border-radius:10px!important;margin-bottom:6px!important;overflow:hidden}
body.begad-marketplace .product-card-1 .product-image img{object-fit:contain!important;padding:12px;mix-blend-mode:multiply;transform:none!important;transition:scale .25s}
body.begad-marketplace.b19-homepage .product-card-1 .product-image img{rotate:none!important}
body.begad-marketplace .product-card-1:hover .product-image img{scale:1.04}
body.begad-marketplace .product-card-1 .product-content>h6{font-size:14px!important;font-weight:650;line-height:1.5;min-height:44px;margin-bottom:6px!important;letter-spacing:-.015em}
body.begad-marketplace .product-card-1 .product-content>h6 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#20242a}
body.begad-marketplace .product-card-1 .product-content .btn-section{gap:5px;margin-top:5px}
body.begad-marketplace .product-card-1 .btn-section>a:first-child:not(.btn-primary){width:38px;height:38px;background:#fff!important;border:1px solid var(--market-line)!important;border-radius:9px!important}
body.begad-marketplace .product-card-1 .btn-section .btn-primary{min-height:38px;border-radius:9px!important;font-size:13px!important;padding:8px 10px!important;background:#c93405!important;border-color:#c93405!important}
body.begad-marketplace .product-card-1 .btn-section .btn-primary:hover{background:#20242a!important}
body.begad-marketplace .product-card-1 .product-content :is(.text-light-secondary-text,.text-sm){font-size:13px}
body.begad-marketplace .product-card-1 .product-content del{color:#746c64!important;font-size:13px!important}
body.begad-marketplace :is(.home-category-card,.storefront-category-card,.category-card){border-radius:16px!important;box-shadow:none!important}
body.begad-marketplace :is(.storefront-section-view-all,.featured-collection-view-all){border:1px solid #e9ded3!important;background:#fff!important;color:#20242a!important;border-radius:8px!important;font-size:11px!important;padding:8px 12px!important;box-shadow:none!important}
body.begad-marketplace :is(.home-rail-head,.storefront-section-heading-row) button{width:35px!important;height:35px!important;min-width:35px;border:1px solid var(--market-line)!important;background:#fff!important;color:#55514d!important;border-radius:50%!important;box-shadow:none!important}
body.begad-marketplace .shop-product-grid{gap:8px}
/* Product, cart, forms and customer account share the same surface language. */
body.begad-marketplace [data-storefront-product-detail] :is(h1,h2){letter-spacing:-.035em;line-height:1.25}
body.begad-marketplace :is([data-cart-item],.storefront-cart-trust,.storefront-checkout-panel,.storefront-account-panel){border-color:var(--market-line)!important;border-radius:16px!important;box-shadow:none!important}
body.begad-marketplace [data-cart-item]{padding:22px!important}
body.begad-marketplace [data-cart-item] h2{font-size:17px;line-height:1.5}
body.begad-marketplace [data-cart-total]{color:#20242a}
body.begad-marketplace table{border-collapse:separate;border-spacing:0;font-size:13px}
body.begad-marketplace table th{background:#fff8f0;color:#55514d;font-size:11px;font-weight:700;letter-spacing:.025em}
body.begad-marketplace table :is(td,th){border-color:var(--market-line)!important}
/* Newsletter is a contained panel; footer has clear, quiet columns. */
body.begad-marketplace [data-storefront-newsletter-section]{max-width:1408px!important;width:calc(100% - 48px);margin:16px auto!important;padding:18px 24px!important;border:1px solid var(--market-line);border-radius:20px!important;background:#fff8f0!important;box-shadow:none!important}
body.begad-marketplace [data-storefront-newsletter-section]::before,body.begad-marketplace [data-storefront-newsletter-section]::after{display:none!important}
body.begad-marketplace [data-storefront-newsletter-title]{font-size:26px;letter-spacing:-.04em;color:#20242a}
body.begad-marketplace [data-storefront-newsletter-subtitle]{font-size:12px;color:#55514d}
body.begad-marketplace footer.b19-site-footer{--b19-footer-bg:transparent;--b19-footer-heading:#20242a;--b19-footer-body:#55514d;--b19-footer-link:#20242a;--b19-footer-line:#e9ded3;background:transparent!important;border-top:1px solid #e9ded3;border-radius:0!important;padding-top:18px!important}
body.begad-marketplace .b19-footer-column h5{font-size:14px;letter-spacing:0;padding-bottom:14px;margin-bottom:17px}
body.begad-marketplace .b19-footer-column ul{gap:12px}
body.begad-marketplace .b19-footer-column a{font-size:12px}
body.begad-marketplace .b19-footer-copy{font-size:11px;font-weight:500}
body.begad-marketplace .b19-footer-copy-wrap::before{display:none}
body.begad-marketplace .b19-footer-contact-icon{background:#e9ded3;border-radius:10px}
@media(min-width:1600px){body.begad-marketplace .market-hero h1{font-size:58px}.market-hero{min-height:465px}}
@media(max-width:1199px){body.begad-marketplace .container{padding-inline:24px}.market-hero-grid{grid-template-columns:minmax(0,1fr) 240px}.market-hero{grid-template-columns:1.15fr 1fr}.market-hero-copy{padding-inline-start:26px}.market-feature{padding-inline:15px}.market-feature-orbit{width:220px;height:220px}.market-feature>img{height:230px}.market-actions{gap:14px}.market-side>a{padding:22px}.market-quick-links>span{display:none}body.begad-marketplace header .sticky-header .container{padding-block:7px}}
/* .market-side{grid-template-columns:1fr} here (found 2026-09-11, reported
as "the side panel is compressed on small screens, half of the H is
cropped"): this used to be "1fr 1fr" -- a leftover from an older
two-tile version of this panel that no longer exists in marketplace-
hero.php (it now ever renders exactly one child: either the single
hardcoded fallback tile, or -- since the slideshow upgrade above --
.market-side-slider). With only one grid item, "1fr 1fr" squeezed that
one item into the *first* half-width column and left the second empty,
silently halving the real width of the side banner/slideshow on every
screen <=900px without affecting anything visibly wrong enough to
notice until a real image with text baked into it (object-fit:cover)
got cropped hard by being squeezed into half its intended width. */
/* .market-side{display:none} added here 2026-09-11, requested directly:
below 900px, .market-hero-grid collapses to a single column, so the
side banner/slideshow -- meant to sit as a narrow vertical tile next
to the big hero -- drops underneath it and stretches to the full
container width instead, reading as a second horizontal banner rather
than its intended side-tile shape. Simplest correct fix is to just not
show it below this breakpoint, same one where the grid itself already
changes shape, rather than trying to redesign a vertical-tile
composition to also work as a horizontal strip. The rest of this
breakpoint's now-unreachable .market-side sizing rules (here and in
the <=600px block below) are left in place -- harmless on a hidden
element -- rather than risking a wider edit across every breakpoint
that touches this heavily-reused selector. */
@media(max-width:900px){.market-hero-grid{grid-template-columns:1fr}.market-hero{min-height:400px}.market-side{display:none;grid-template-columns:1fr;grid-template-rows:auto}.market-side>a{min-height:190px}.market-home-tile>img{width:40%;height:160px}.market-feature>img{height:275px}.market-hero-copy{padding:38px 0 30px 30px}body.begad-marketplace .market-hero h1{font-size:46px}.market-side h2{font-size:25px!important}.market-side p{font-size:11px}.market-feature-name{max-width:230px}}
@media(max-width:600px){body.begad-marketplace .container{padding-inline:10px}.market-intro{flex-direction:column;border-radius:12px 12px 0 0;font-size:9px}.market-intro-uae,.market-intro-promo{padding:9px 14px}.market-intro-promo>a{display:none}.market-intro-slider{border-radius:12px 12px 0 0}.market-hero{grid-template-columns:1fr;min-height:0;border-radius:17px}.market-hero-copy{padding:29px 25px 0!important}.market-eyebrow{font-size:9px}body.begad-marketplace .market-hero h1{font-size:42px;margin:19px 0 15px}.market-hero-copy>p{font-size:12px;max-width:310px;margin-bottom:19px}.market-actions{gap:21px}.market-button{padding:13px 17px;font-size:11px}.market-hero-note{display:none}.market-feature{height:270px;margin-top:7px;padding:18px 24px;flex-direction:row;gap:8px}.market-feature>img{width:55%;height:220px}.market-feature-label{top:22px;inset-inline-end:24px;font-size:8px}.market-feature-orbit{width:185px;height:185px;inset-inline-start:27px}.market-feature-caption{width:45%;margin-top:65px;padding:12px;align-items:flex-start}.market-feature-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.5;font-size:9px}.market-feature-caption strong{font-size:16px}.market-round-arrow{display:none}.market-side{gap:12px}.market-side>a{padding:18px 15px;min-height:190px;border-radius:15px}.market-side .market-eyebrow{font-size:7px;letter-spacing:.07em}body.begad-marketplace .market-side h2{font-size:23px!important;max-width:100%;margin-top:15px}.market-side p{font-size:9px;gap:6px}.market-home-tile>img{width:38%;height:85px;bottom:39px;opacity:.65}.market-quick-links{padding-block:17px;gap:8px;margin-inline:-16px;padding-inline:16px}.market-quick-links>a{font-size:10px;padding:9px 13px}.market-deal-art{font-size:130px}body.begad-marketplace.b19-homepage>section:not(.market-entrance):not([data-storefront-newsletter-section]){padding-block:10px!important}body.begad-marketplace .home-rail-head h3,body.begad-marketplace .home-rail-title{font-size:21px!important}body.begad-marketplace .home-rail-head p{font-size:11px}body.begad-marketplace .home-rail-head{text-align:start!important;margin-bottom:8px!important}body.begad-marketplace .product-card-1{padding:6px!important;border-radius:12px!important}body.begad-marketplace .product-card-1 .product-content>h6{font-size:13px!important}body.begad-marketplace .product-card-1 .product-image img{padding:8px}body.begad-marketplace .product-card-1 .btn-section{gap:5px}body.begad-marketplace .product-card-1 .btn-section>a:first-child:not(.btn-primary){width:32px;height:36px}body.begad-marketplace .product-card-1 .btn-section .btn-primary{font-size:12px!important;min-height:36px;padding-inline:7px!important}body.begad-marketplace [data-storefront-newsletter-section]{width:calc(100% - 20px);margin-block:14px!important;padding:16px 18px!important}body.begad-marketplace [data-storefront-newsletter-title]{font-size:23px}body.begad-marketplace .shop-product-grid{gap:8px}body.begad-marketplace [data-cart-item]{padding:16px!important}body.begad-marketplace header .search-input-container .input-group{min-height:46px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}body.begad-marketplace :is(.product-card-1,.similar-product-item,[data-storefront-product-card],.market-button,.market-feature>img){transition:none!important;transform:none!important;scale:1!important}}
/* Retire the earlier pixel treatment on shared navigation and catalogue rails. */
body.begad-marketplace .home-rail-head h3::before,body.begad-marketplace .home-rail-title::before{content:none!important}
body.begad-marketplace .home-rail-head p{color:var(--market-muted)!important}
body.begad-marketplace .home-rail-head h3,body.begad-marketplace .home-rail-title{font-family:inherit!important}
body.begad-marketplace .storefront-category-thumb{border:0!important;border-radius:18px!important;background:#fff8f0!important;box-shadow:none!important;image-rendering:auto}
body.begad-marketplace .storefront-category-thumb::before,body.begad-marketplace .storefront-category-thumb::after{display:none!important}
body.begad-marketplace .storefront-category-thumb img{image-rendering:auto!important;mix-blend-mode:multiply}
body.begad-marketplace .storefront-category-title{font-family:inherit!important;font-size:12px!important;font-weight:650!important}
body.begad-marketplace header :is(#sidebar-menu-btn,.cart-sidebar-btn,.profile-trigger){border:0!important;box-shadow:none!important}
body.begad-marketplace header :is(.cart-sidebar-btn,.profile-trigger) i{color:#20242a!important}
body.begad-marketplace .storefront-language-segmented{box-shadow:none!important;border-color:#e9ded3!important}
body.begad-marketplace .storefront-language-segmented__option.is-active{background:#c93405!important;box-shadow:none!important}
/* Was border:0/background:#fff8f0/color:#55514d -- flattened every
fulfillment badge (Express/Standard/Get It Today) to one identical pale
pill, silently erasing the type-specific colors storefront-controls.css's
.storefront-fulfillment-badge--today/--express/--standard variants are
built to show (reported live via screenshot: "where is the colors for
these badges"). Kept only the size/shape tweak this rule actually wants
for the marketplace card design; border/background/color now fall
through to each variant's own (non-!important) declaration. */
body.begad-marketplace .product-card-1 .storefront-fulfillment-badge{border-radius:5px!important;font-size:11px!important}
body.begad-marketplace .product-card-1 .product-discount-badge{border:0!important;border-radius:5px!important;background:#f7eee2!important;color:#945124!important;font-size:12px!important;box-shadow:none!important}
/* Static collection and cart introductions need no canvas or animation CSS. */
body.begad-marketplace .begad-photo-hero{position:relative;overflow:hidden;margin:0 0 28px;border:1px solid #e9ded3!important;border-radius:20px!important;background:#fff8f0!important;box-shadow:none!important}
body.begad-marketplace .ic-filter-area,body.begad-marketplace .ic-filter-panel,body.begad-marketplace .ic-filter-sort form,body.begad-marketplace .ic-filter-sort select,body.begad-marketplace .ic-filter-row details,body.begad-marketplace .ic-pagination-btn{border:1px solid var(--market-line)!important;border-radius:12px!important;box-shadow:none!important}
body.begad-marketplace .my-account-content,body.begad-marketplace [data-cart-summary],body.begad-marketplace [data-cart-list]>article,body.begad-marketplace .checkout-as-image .checkout-actions-card,body.begad-marketplace .checkout-as-image .payment-method-card{border:1px solid var(--market-line)!important;border-radius:16px!important;box-shadow:none!important}
body.begad-marketplace header .sticky-header .search-input-container .input-group{border:1px solid var(--market-line)!important;border-radius:12px!important}
body.begad-marketplace header .sticky-header .search-input-container{border-radius:12px!important}
body.begad-marketplace header :is(.storefront-header-cart-icon,.profile-trigger>span:first-child,.storefront-header-account-icon){border:1px solid #e9ded3!important;box-shadow:none!important;border-radius:12px!important;background:#fff8f0!important;color:#20242a!important}
body.begad-marketplace header .profile-trigger>span:first-child i{color:#20242a!important}
body.begad-marketplace header #sidebar-menu-btn{border:1px solid #e9ded3!important;box-shadow:none!important}
body.begad-marketplace .storefront-mobile-join{border:0!important;background:#c93405!important;box-shadow:none!important;color:#fff!important;border-radius:9px!important}
body.begad-marketplace .storefront-mobile-bottom-nav{border-top:1px solid #e9ded3!important;box-shadow:0 -4px 20px #38201008!important;background:#fffffffa!important;padding-bottom:env(safe-area-inset-bottom)}
body.begad-marketplace .storefront-mobile-bottom-nav .mobile-nav-icon{border:0!important;border-radius:10px!important;box-shadow:none!important;background:#fff8f0!important;color:#55514d!important}
body.begad-marketplace .storefront-mobile-bottom-nav .footer-bottom-nav-btn{border:0!important;background:transparent!important;box-shadow:none!important}
body.begad-marketplace .storefront-mobile-bottom-nav .footer-bottom-nav-btn.is-active .mobile-nav-icon{background:#c93405!important;color:#fff!important}
body.begad-marketplace .storefront-mobile-bottom-nav .mobile-nav-label{color:#55514d!important;font-size:10px}
body.begad-marketplace .storefront-scroll-shopbar form{border:1px solid #e9ded3!important;border-radius:10px!important;box-shadow:none!important}
body.begad-marketplace .checkout-as-image{background:var(--market-paper)!important}
body.begad-marketplace .checkout-as-image .payment-area,body.begad-marketplace .checkout-as-image .summary-card,body.begad-marketplace .checkout-as-image .checkout-side-stack{border:1px solid var(--market-line)!important;border-radius:16px!important;box-shadow:none!important;background:#fff!important}
body.begad-marketplace .checkout-as-image .payment-area h5,body.begad-marketplace .checkout-as-image .summary-card h5{background:#fff8f0!important;color:#20242a!important;border-bottom:1px solid #e9ded3!important;font-size:16px!important;letter-spacing:0!important;text-transform:none!important}
body.begad-marketplace .checkout-as-image .payment-area .payment-method-card{border:1px solid var(--market-line)!important;border-radius:12px!important;box-shadow:none!important;padding:15px!important}
body.begad-marketplace .checkout-as-image .payment-area .payment-method-card:has(input:checked){border:2px solid #c93405!important;background:#fff8f0!important}
body.begad-marketplace .checkout-as-image .payment-area .payment-method-card input{accent-color:#c93405}
body.begad-marketplace .checkout-as-image .checkout-payment-icon{border:1px solid #e9ded3!important;border-radius:10px!important;box-shadow:none!important}
body.begad-marketplace .storefront-auth-card{border:1px solid var(--market-line)!important;border-radius:22px!important;box-shadow:0 15px 45px #38201010!important}
body.begad-marketplace .storefront-auth-panel input{border:1px solid #e9ded3!important;border-radius:10px!important;background:#fffcf8!important;min-height:48px}
body.begad-marketplace .my-account-menu a{border:1px solid #e9ded3!important;border-radius:10px!important}
/* Product detail: a spacious gallery, readable specifications and a clear buy box. */
body.begad-marketplace .amazon-pdp{font-family:inherit!important;background:var(--market-paper)!important;color:#20242a!important}
body.begad-marketplace .amazon-pdp :is(button,input,table){font-family:inherit!important}
body.begad-marketplace .amazon-pdp-breadcrumb{padding-block:20px!important;font-size:11px!important;color:#746c64!important}
body.begad-marketplace .amazon-pdp a{color:#55514d}
body.begad-marketplace .amazon-pdp-title h1{font-family:inherit!important;font-weight:700!important;font-size:29px!important;line-height:1.4!important;letter-spacing:-.04em!important}
body.begad-marketplace .amazon-pdp-main-media{border:1px solid #e9ded3;border-radius:20px;background:#fff;padding:20px}
body.begad-marketplace .amazon-pdp-stage{background:#fff;border-radius:14px}
body.begad-marketplace .amazon-pdp-current{font-family:inherit!important;font-size:34px!important;font-weight:750!important;color:#20242a!important}
body.begad-marketplace .amazon-pdp-discount{font-size:16px!important;color:#8b5029!important;background:#f4eadd;border-radius:6px;padding:4px 8px}
body.begad-marketplace .amazon-pdp-rating,body.begad-marketplace .amazon-pdp-store,body.begad-marketplace .amazon-pdp-tax{font-size:12px!important}
body.begad-marketplace .amazon-pdp-buybox{border:1px solid #e9ded3!important;border-radius:20px!important;background:#fff!important;padding:24px!important;box-shadow:0 8px 30px #38201010!important}
body.begad-marketplace .amazon-pdp-action{border-radius:10px!important;min-height:46px;font-family:inherit!important;font-size:13px!important;font-weight:700!important;box-shadow:none!important}
body.begad-marketplace .amazon-pdp-cart{background:#c93405!important;border:1px solid #c93405!important;color:#fff!important}
body.begad-marketplace .amazon-pdp-buy{background:#c4461d!important;border:1px solid #c4461d!important;color:#fff!important}
body.begad-marketplace .amazon-pdp-wishlist button{border:1px solid #e9ded3!important;border-radius:10px!important;color:#55514d!important;background:#fff!important}
body.begad-marketplace .amazon-pdp-attributes table{font-size:12px!important;border:1px solid #e9ded3;border-radius:12px;overflow:hidden}
body.begad-marketplace .amazon-pdp-attributes :is(th,td){padding:12px!important}
body.begad-marketplace .amazon-pdp :is(.amazon-pdp-about,.amazon-pdp-tab-content){font-size:13px!important;line-height:1.8!important}
body.begad-marketplace .amazon-pdp :is(.amazon-pdp-info-title,.amazon-pdp-related-title){font-size:25px!important;letter-spacing:-.04em}
body.begad-marketplace .amazon-pdp-tab-card{border:1px solid var(--market-line)!important;border-radius:16px!important;background:#fff!important;padding:24px!important}
body.begad-marketplace .product-card-1 .product-content>h5{font-size:14px!important;font-weight:650;line-height:1.5;min-height:44px;letter-spacing:-.015em;margin-bottom:9px!important}
body.begad-marketplace .product-card-1 .product-content>h5 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.begad-marketplace header .storefront-header-account-icon i{color:#20242a!important}
body.begad-marketplace .ic-filter-row details>summary{border:1px solid #e9ded3!important;border-radius:10px!important;box-shadow:none!important;background:#fff!important;font-size:12px!important}
body.begad-marketplace .container{max-width:2200px!important;padding-inline:18px!important}
body.begad-marketplace .market-hero:not(:has(.market-feature)){grid-template-columns:1fr}
body.begad-marketplace .market-hero:not(:has(.market-feature)) .market-hero-copy{padding-inline:38px}
body.begad-marketplace .amazon-pdp-cart :is(i,svg){color:#fff!important}
body.begad-marketplace .amazon-pdp-specs{font-size:12px!important;border:1px solid var(--market-line);border-radius:12px;overflow:hidden}
body.begad-marketplace .amazon-pdp-specs :is(th,td){padding:10px 12px!important}
body.begad-marketplace .pdp-qty-stepper{border:1px solid #e9ded3!important;border-radius:10px!important;box-shadow:none!important}
body.begad-marketplace [data-storefront-newsletter-title]::before{content:none!important}
body.begad-marketplace [data-storefront-newsletter-email]{border:0!important;box-shadow:none!important;background:transparent!important;min-width:0}
body.begad-marketplace [data-storefront-newsletter-form] .btn-primary{background:#c93405!important;border:0!important;border-radius:8px!important;box-shadow:none!important}
body.begad-marketplace footer.b19-site-footer::before,body.begad-marketplace footer.b19-site-footer::after{display:none!important}
body.begad-marketplace .b19-footer-column :is(a,i){color:#55514d!important}
body.begad-marketplace .b19-footer-column h5{color:#20242a!important}
body.begad-marketplace .b19-footer-contact-icon i{color:#55514d!important}
html[dir=rtl] body.begad-marketplace .market-entrance{font-family:Tahoma,Arial,sans-serif}
html[dir=rtl] body.begad-marketplace .market-eyebrow{font-size:11px;letter-spacing:0}
html[dir=rtl] body.begad-marketplace .market-hero-copy>p{font-size:14px}
html[dir=rtl] body.begad-marketplace .market-feature-name{font-size:11px}
html[dir=rtl] body.begad-marketplace .market-quick-links>a{font-size:12px}
@media(max-width:600px){body.begad-marketplace .container{padding-inline:16px!important}body.begad-marketplace .amazon-pdp-title h1{font-size:23px!important}body.begad-marketplace .amazon-pdp-main-media{padding:12px;border-radius:15px}body.begad-marketplace .amazon-pdp-buybox{padding:18px!important}body.begad-marketplace .amazon-pdp-current{font-size:29px!important}}
@media(max-width:600px){
body.begad-marketplace .market-hero h1{font-size:37px;letter-spacing:-.055em}
}
/* Compact entrance: two-thirds of the original desktop hero height,
with one continuous furniture banner beside it. */
@media (min-width:901px) {
.market-hero{min-height:calc(440px * 2 / 3);height:calc(440px * 2 / 3)}
.market-hero-copy,[dir=rtl] .market-hero-copy{padding:24px 0 24px 30px}
[dir=rtl] .market-hero-copy{padding:24px 30px 24px 0}
body.begad-marketplace .market-hero h1{font-size:clamp(32px,3vw,43px);margin:12px 0 12px;line-height:1.08}
.market-hero-copy>p{font-size:12px;line-height:1.65;max-width:360px;margin-bottom:16px}
.market-hero-note{display:none}
.market-button{padding:11px 17px}
.market-feature{padding:24px 22px 16px}
.market-feature-label{top:15px;font-size:8px}
.market-feature>img{height:180px}
.market-feature-orbit{width:200px;height:200px;box-shadow:0 0 0 14px #e9ded3,0 0 0 15px #e9ded3}
.market-feature-caption{padding:9px 12px;margin-top:8px}
.market-feature-caption strong{font-size:16px}
.market-side{grid-template-columns:1fr;grid-template-rows:1fr}
.market-side>.market-vertical-banner{padding:26px;min-height:0}
body.begad-marketplace .market-vertical-banner h2{font-size:32px;max-width:100%;margin:16px 0 0}
.market-vertical-banner>img{width:62%;height:155px;inset-inline-end:3px;bottom:35px}
.market-vertical-banner p{z-index:1;font-size:11px}
}
@media (min-width:1600px) {
.market-hero{min-height:310px;height:310px}
}
@media (max-width:900px) {
.market-side{grid-template-columns:1fr;grid-template-rows:1fr}
.market-side>.market-vertical-banner{min-height:220px}
.market-vertical-banner>img{width:45%;height:185px;inset-inline-end:12px;bottom:12px;opacity:1}
body.begad-marketplace .market-vertical-banner h2{max-width:58%}
}
@media (max-width:600px) {
.market-hero-copy{padding:22px 22px 0!important}
body.begad-marketplace .market-hero h1{font-size:32px;margin:12px 0}
.market-hero-copy>p{margin-bottom:14px;font-size:11px;line-height:1.6}
.market-feature{height:155px;margin-top:0;padding:8px 22px 14px}
.market-feature>img{height:140px;width:44%}
.market-feature-orbit{height:120px;width:120px;inset-inline-start:25px;box-shadow:0 0 0 9px #e9ded3,0 0 0 10px #e9ded3}
.market-feature-caption{width:56%;margin-top:22px;padding:9px}
.market-feature-label{top:10px;font-size:7px}
.market-side>.market-vertical-banner{padding:22px;min-height:220px}
}
/* Begad brand palette: orange, golden orange, warm white and charcoal. */
:root{--market-brand:#f45a05;--market-brand-bright:#ffa90c;--market-brand-deep:#c93405;--market-ink:#20242a;--market-muted:#746c64;--market-paper:#fffcf8;--market-line:#eee4da}
body.begad-marketplace .market-hero{background:var(--market-premium-gradient)}
body.begad-marketplace .market-hero h1{color:#2c190d!important}
.market-hero .market-eyebrow,.market-hero-copy>p,.market-feature-label{color:#5a2c10}
.market-eyebrow>span{background:#c93405}
.market-button{background:#25201c}
.market-button:hover{background:#443023}
.market-link{color:#44230e}
.market-feature-orbit{background:#ffbd5c;box-shadow:0 0 0 14px #ffc773,0 0 0 15px #ffd799}
.market-feature-caption{background:#fff9eff2;border-color:#ffe5c7}
.market-feature-caption strong{color:#20242a}
.market-feature-name{color:#74604f}
.market-home-tile{background:#fff0da;color:#623114}
body.begad-marketplace .market-vertical-banner h2{color:#623114!important}
body.begad-marketplace header .header-top{background:#c93405!important}
body.begad-marketplace .market-quick-links>a:hover{background:#fff0da;border-color:#ffc887}
/* Was #fff2e3 (a creamy orange tint, part of the "Begad brand palette:
orange..." re-skin above) -- reported live 2026-09-10 as "remove the
creamy orange... remove this orange effect" on the category icon tiles.
Plain white instead, no color effect behind the category photos. */
body.begad-marketplace .storefront-category-thumb{background:#fff!important}
body.begad-marketplace .product-card-1 .btn-section .btn-primary:hover{background:#a92b06!important}
body.begad-marketplace .storefront-language-segmented__option.is-active{background:#c93405!important}
body.begad-marketplace .storefront-mobile-bottom-nav .footer-bottom-nav-btn.is-active .mobile-nav-icon{background:#c93405!important}
body.begad-marketplace footer.b19-site-footer{--b19-footer-bg:transparent;--b19-footer-heading:#20242a;--b19-footer-body:#74604f;--b19-footer-link:#a92b06;--b19-footer-line:#ead9c7;background:transparent!important}
@media(max-width:600px){.market-feature-orbit{box-shadow:0 0 0 9px #ffc773,0 0 0 10px #ffd799}}
/* Preserve the catalogue photo's true colour against the orange campaign. */
.market-feature>img{mix-blend-mode:normal;background:#fff;border-radius:14px;width:150px;padding:8px}
@media(max-width:600px){.market-feature>img{width:105px;padding:6px}}
/* Restore the established Begad premium gradient from storefront-controls.css. */
:root{--market-premium-gradient:linear-gradient(135deg,#ffa90c 0%,#f45a05 58%,#c93405 100%)}
/* Was `.home-rail-head{display:none!important}` -- the commit message said
"hide only the category rail heading", but .home-rail-head is the shared
flex row wrapping BOTH the title/subtitle text (home.php's first child
div) AND .home-two-category-slider-nav (the second child div slick's
appendArrows target for the prev/next buttons) -- hiding the whole row
silently took the scroll arrows down with the heading. Scoped to just the
first child (the text wrapper) so the nav row -- and slick's arrows,
appended into it once JS renders the strip -- stay visible. Found live
2026-09-08 as "add right and left arrows to the categories so we can
scroll through them" once the category count grew past what fits in one
row (see the LIMIT-8 fix in storefront_helpers.php the same day). */
body.begad-marketplace .market-entrance~section:has(.home-two-category-slider) .home-rail-head>*:first-child{display:none!important}
body.begad-marketplace .market-entrance~section:has(.home-two-category-slider){padding-top:22px!important;padding-bottom:22px!important}
/* "put the arrows on the most left and most right of the categories
strip" (2026-09-10): the arrows from the fix above were visible and
working, but both sat together in a small box wherever .home-rail-head's
flex row placed them -- with the heading hidden, that row has only one
visible child (the nav), and a single `justify-between` flex child just
sits at the flex-start (left, in ltr), it has nothing left to space
itself against. Overlay them at the true left/right edges of the strip
below instead, using the same absolute-overlay pattern the hero
slider's own nav already uses (.home-five-hero-slider-nav in
storefront_layout.php) rather than inventing a new one. */
body.begad-marketplace .market-entrance~section:has(.home-two-category-slider) > .container{position:relative}
body.begad-marketplace .market-entrance~section:has(.home-two-category-slider) .home-two-category-slider-nav{position:absolute!important;inset-inline:0;top:50%!important;transform:translateY(-50%);margin:0!important;padding-inline:12px;gap:0!important;justify-content:space-between!important;z-index:3;pointer-events:none}
body.begad-marketplace .market-entrance~section:has(.home-two-category-slider) .home-two-category-slider-nav .slider-btn{pointer-events:auto}
body.begad-marketplace .btn-primary:not(.outline),
body.begad-marketplace .product-card-1 .btn-section .btn-primary,
body.begad-marketplace [data-storefront-newsletter-form] .btn-primary,
body.begad-marketplace .storefront-mobile-join,
body.begad-marketplace .storefront-language-segmented__option.is-active,
body.begad-marketplace .storefront-mobile-bottom-nav .footer-bottom-nav-btn.is-active .mobile-nav-icon{
background:var(--market-premium-gradient)!important;
border-color:#f45a05!important;
color:#fff!important;
}
body.begad-marketplace .product-card-1 .btn-section .btn-primary:hover,
body.begad-marketplace .btn-primary:not(.outline):hover{
background:linear-gradient(135deg,#f45a05 0%,#c93405 100%)!important;
}