/* =================================================================== eShobuy — Professional Refinement Layer (storefront) ------------------------------------------------------------------- WHAT THIS DOES — AND WHAT IT DELIBERATELY DOES NOT Does NOT: • change a single colour. Every value below is read from the palette the site already ships (---*, ---*, --accent, --stb-*), so the blue stays the blue and anything the admin sets in Customer Site keeps winning. • add a theme system, a dark mode, or any new visual "vibe". • move, reorder, hide or restructure any section. Does: • give the page ONE type system instead of four. The base sheet asked for 'Inter' and never loaded it, so the whole site was silently rendering in whatever the OS supplied — and Bangla in something different again. Inter and Noto Sans Bengali are loaded here and used everywhere, so English and Bangla finally share a voice and a weight. • fix the type scale. Sizes were set ad hoc per component; they now step predictably, and prices/quantities use tabular figures so columns of numbers line up instead of jittering. • fix the spacing rhythm. Section gaps, card padding and heading margins were all slightly different values; they are now a consistent 8px-based scale, with more air between sections — the single biggest difference between a template and a finished storefront. • make borders, radii and hover states consistent. One hairline (--shell-rule), one radius per role, one easing curve, one lift on hover. No competing shadow styles. • tighten the small stuff that reads as unfinished: badge sizes, uppercase tracking on labels, alignment of the card footer, focus rings, scrollbars, reduced-motion support. Loaded after store-redesign.css so it settles the type and spacing arguments, and before store-layout.css so the admin-controlled page width and column counts still have the last word. =================================================================== */ /* The font link lives in the page with a preconnect, not as an @import here: an @import inside a linked stylesheet is a second serialized round-trip before the page can paint, and Noto Sans Bengali is a heavy face. */ :root{ --refined-loaded:1; /* One font stack. Bengali is listed before the generic fallback so a Bangla product title renders in Noto rather than a system default that does not match the Latin text beside it. */ --rf-sans:'Inter','Noto Sans Bengali',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --rf-ease:cubic-bezier(.32,.72,.36,1); --rf-fast:.16s; --rf-slow:.26s; /* Spacing scale — every margin below comes from here. */ --rf-1:4px; --rf-2:8px; --rf-3:12px; --rf-4:16px; --rf-5:20px; --rf-6:24px; --rf-8:32px; --rf-10:40px; --rf-12:48px; --rf-16:64px; /* Micro-label tracking, used for every uppercase label on the site. */ --rf-track:.09em; } /* ── 1. TYPE SYSTEM ─────────────────────────────────────────────── */ html body[class][class][class], html body[class][class][class] input, html body[class][class][class] textarea, html body[class][class][class] select, html body[class][class][class] button, html body[class][class][class] h1,html body[class][class][class] h2,html body[class][class][class] h3,html body[class][class][class] h4,html body[class][class][class] h5{ font-family:var(--rf-sans)!important; } html body[class][class][class]{ font-size:15px; line-height:1.6; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } html body[class][class][class] h1,html body[class][class][class] h2,html body[class][class][class] h3,html body[class][class][class] h4{ font-weight:700!important; line-height:1.25; letter-spacing:-.018em!important; } /* Numbers that sit in columns must not jitter as they change. */ html body[class][class][class] .price-now, html body[class][class][class] .price-old, html body[class][class][class] .d-price, html body[class][class][class] .d-now, html body[class][class][class] .d-old, html body[class][class][class] .qty, html body[class][class][class] .qty-val, html body[class][class][class] .cart-total, html body[class][class][class] .sum-row, html body[class][class][class] .result-count, html body[class][class][class] .badge{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* ── 2. SECTION RHYTHM ──────────────────────────────────────────── */ html body[class][class][class] main.container{padding-top:var(--rf-10)!important;} html body[class][class][class] .section{margin-bottom:var(--rf-16)!important;} /* Single-direction margins: the shelves used a symmetric margin, so two stacked sections left a 96px hole between them. */ html body[class][class][class] .market-category-section{ /* Only the vertical padding is collapsed: stacked with a symmetric margin it left a 116px hole between the two shelves. Horizontal padding is left alone, because in some configurations this section is a bordered panel and zeroing it would run the tiles into the border. */ padding-top:0!important; padding-bottom:0!important; margin:0 0 var(--rf-10)!important; } html body[class][class][class] .market-category-section:first-of-type{margin-top:var(--rf-6)!important;} html body[class][class][class] .market-heading{ /* The base sheet uppercases this label. Caps need POSITIVE tracking — the negative value a lowercase heading wants jams them together. */ font-size:15px!important; font-weight:700!important; letter-spacing:.07em!important; margin:0 0 var(--rf-5)!important; padding-bottom:var(--rf-3)!important; border-bottom:1px solid var(--shell-rule,#DCE3EB)!important; } html body[class][class][class] .sec-head{ margin-bottom:var(--rf-5)!important; padding-bottom:var(--rf-3)!important; } html body[class][class][class] .sec-title{ font-size:20px!important; font-weight:700!important; letter-spacing:-.016em!important; align-items:center!important; gap:10px!important; } /* The accent bar is part of the existing identity — kept, just sized consistently instead of three different heights across the page. */ html body[class][class][class] .sec-title .bar{ width:3px!important;height:19px!important;border-radius:2px!important;flex:0 0 3px!important; } /* ── 3. HEADER ──────────────────────────────────────────────────── */ html body[class][class][class] .header-row{padding:var(--rf-4) 0!important;gap:var(--rf-8)!important;} html body[class][class][class] .search-box{ border-radius:var(--shell-r-lg,5px)!important; transition:border-color var(--rf-fast) var(--rf-ease),box-shadow var(--rf-fast) var(--rf-ease); } html body[class][class][class] .search-box input{font-size:14px!important;letter-spacing:-.005em;} html body[class][class][class] .nav-btn{ border-radius:var(--shell-r-lg,5px)!important; transition:background var(--rf-fast) var(--rf-ease),color var(--rf-fast) var(--rf-ease); } html body[class][class][class] .nav-btn .lbl{ font-size:11px!important; font-weight:600!important; letter-spacing:.01em!important; } html body[class][class][class] .nav-btn .badge{ font-size:10px!important;font-weight:700!important; min-width:17px!important;height:17px!important;line-height:17px!important; border-radius:9px!important;padding:0 5px!important; } /* ── 4. TOOLBAR ─────────────────────────────────────────────────── */ html body[class][class][class] .toolbar{ padding:var(--rf-3) var(--rf-4)!important; margin-bottom:var(--rf-5)!important; border-radius:var(--shell-r-lg,5px)!important; gap:var(--rf-3)!important; } html body[class][class][class] .filter-toggle-btn, html body[class][class][class] .sort-sel{ border-radius:var(--shell-r-lg,5px)!important; font-size:12.5px!important; font-weight:600!important; letter-spacing:-.004em!important; padding:8px 13px!important; transition:border-color var(--rf-fast) var(--rf-ease),background var(--rf-fast) var(--rf-ease); } html body[class][class][class] .result-count{ font-size:12.5px!important; color:var(--shell-slate,#5A6B80)!important; letter-spacing:-.004em!important; } /* ── 5. PRODUCT CARD ────────────────────────────────────────────── */ /* Card radius and image height stay admin-controlled (--core-card-radius, --core-image-height); only the internals are made consistent. */ /* No hover lift or image zoom here: store-product-imagery.css disables card motion deliberately (transform:none!important on .grid > .card), and re-enabling it would undo that decision. */ html body[class][class][class]:not(.core-card-compact) .card-img{padding:var(--rf-4)!important;box-sizing:border-box;} html body[class][class][class]:not(.core-card-compact) .card-body{padding:var(--rf-4) var(--rf-4) var(--rf-3)!important;} html body[class][class][class] .card-brand{ font-size:10.5px!important; font-weight:600!important; letter-spacing:.05em!important; text-transform:uppercase!important; margin-bottom:var(--rf-2)!important; line-height:1.4!important; } html body[class][class][class] .card-name{ font-size:14px!important; font-weight:600!important; line-height:1.42!important; letter-spacing:-.008em!important; margin-bottom:var(--rf-2)!important; } html body[class][class][class] .card-rate{font-size:11.5px!important;letter-spacing:-.003em!important;} html body[class][class][class] .card-swatches{margin:var(--rf-2) 0!important;} html body[class][class][class] .card-foot{ padding-top:var(--rf-3)!important; margin-top:var(--rf-3)!important; align-items:center!important; gap:var(--rf-2)!important; } html body[class][class][class] .price-now{font-size:18px!important;font-weight:700!important;letter-spacing:-.022em!important;} html body[class][class][class] .price-now span{font-size:11.5px!important;font-weight:600!important;letter-spacing:0!important;} html body[class][class][class] .price-old{font-size:12px!important;font-weight:500!important;margin-left:5px!important;} html body[class][class][class] .card-actions{gap:var(--rf-2)!important;} html body[class][class][class] .card-actions .cbtn{ border-radius:var(--shell-r-lg,5px)!important; transition:background var(--rf-fast) var(--rf-ease),color var(--rf-fast) var(--rf-ease),border-color var(--rf-fast) var(--rf-ease); } html body[class][class][class] .card-fav{border-radius:50%!important;transition:color var(--rf-fast) var(--rf-ease),background var(--rf-fast) var(--rf-ease);} /* Badges: one size, one weight, one radius across every variant. */ html body[class][class][class] .badge-tl{gap:5px!important;} html body[class][class][class] .badge-tl .tag{ font-size:10px!important; font-weight:700!important; letter-spacing:.02em!important; border-radius:3px!important; padding:3px 7px!important; line-height:1.4!important; } html body[class][class][class] .emi-tag{ font-size:10px!important;font-weight:600!important; letter-spacing:var(--rf-track)!important;text-transform:uppercase!important; border-radius:3px!important;padding:3px 7px!important; } /* ── 6. CATEGORY / BRAND TILES ──────────────────────────────────── */ /* Tile padding, gap, radius and hover motion live in store-layout.css, which owns tile sizing and loads after this file. Duplicating them here only produced a hover that jumped with no transition. */ /* A white icon box sitting inside a white card read as a frame inside a frame. The plinth now carries the page's own soft tint and drops its border, so the tile is one object with the icon set into it. */ html body[class][class][class] .market-category:not(.stb-see-more) .cat-art{ border-radius:6px!important; background:var(--shell-well,#F1F4F8)!important; border:0!important; font-size:25px!important; transition:background var(--rf-slow) var(--rf-ease); } html body[class][class][class] .market-category:not(.stb-see-more):hover .cat-art{background:var(--shell-blue-wash,#EEF5FB)!important;} html body[class][class][class] .market-category .cat-art img{padding:0!important;} html body[class][class][class] .market-category > span:last-child{ font-size:12px!important; font-weight:600!important; letter-spacing:-.004em!important; line-height:1.4!important; } html body[class][class][class] .market-category.stb-see-more .cat-art{ font-size:18px!important;font-weight:700!important; } /* ── 7. /categories and /brands index pages ─────────────────────── */ html body[class][class][class] .stb-index-head{ margin:var(--rf-6) 0 var(--rf-2)!important; padding-bottom:var(--rf-4)!important; border-bottom:1px solid var(--shell-rule,#DCE3EB); } html body[class][class][class] .stb-index-head h1{letter-spacing:-.022em!important;} html body[class][class][class] .stb-index-count{ font-size:11px!important;font-weight:600!important; letter-spacing:var(--rf-track)!important;text-transform:uppercase!important; } html body[class][class][class] .stb-index-search{font-size:13.5px!important;} /* ── 8. BUTTONS ─────────────────────────────────────────────────── */ html body[class][class][class] .load-more{ border-radius:var(--shell-r-lg,5px)!important; font-size:13px!important;font-weight:600!important;letter-spacing:-.004em!important; padding:13px 34px!important; margin-top:var(--rf-8)!important; transition:background var(--rf-fast) var(--rf-ease),color var(--rf-fast) var(--rf-ease),border-color var(--rf-fast) var(--rf-ease); } html body[class][class][class] .checkout-btn, html body[class][class][class] .hero-btn, html body[class][class][class] .ad-btn, html body[class][class][class] .d-add, html body[class][class][class] .d-buy, html body[class][class][class] .nl-form button, html body[class][class][class] .btn{ /* Corner radius is an admin setting (Customer Site → Button Radius). */ border-radius:var(--core-button-radius,8px)!important; font-size:13px!important; font-weight:600!important; letter-spacing:-.004em!important; transition:background var(--rf-fast) var(--rf-ease),opacity var(--rf-fast) var(--rf-ease),border-color var(--rf-fast) var(--rf-ease); } /* ── 9. PRODUCT DETAIL ──────────────────────────────────────────── */ html body[class][class][class] .d-title{ font-size:clamp(22px,2.4vw,30px)!important; font-weight:700!important;line-height:1.26!important;letter-spacing:-.022em!important; } html body[class][class][class] .d-brand{ font-size:11px!important;font-weight:600!important; letter-spacing:var(--rf-track)!important; } /* .crumbs ends in the full product title, which the shop owner types — in Bangla as often as English. The base sheet's own tracking is left alone; wide tracking separates Bengali conjuncts and matras. */ html body[class][class][class] .crumbs{font-size:11px!important;font-weight:600!important;} html body[class][class][class] .d-price, html body[class][class][class] .d-now{font-size:clamp(24px,2.4vw,31px)!important;font-weight:700!important;letter-spacing:-.026em!important;} html body[class][class][class] .d-taxonomy-row{ border-radius:var(--shell-r-lg,5px)!important; transition:border-color var(--rf-fast) var(--rf-ease),background var(--rf-fast) var(--rf-ease); } html body[class][class][class] .d-taxonomy-label{ font-size:10.5px!important;font-weight:600!important; letter-spacing:var(--rf-track)!important;text-transform:uppercase!important; } html body[class][class][class] .d-thumb{border-radius:var(--shell-r,3px)!important;} /* ── 10. FORMS & FOCUS ──────────────────────────────────────────── */ html body[class][class][class] input, html body[class][class][class] select, html body[class][class][class] textarea{ font-size:14px!important; letter-spacing:-.004em; border-radius:var(--shell-r-lg,5px)!important; } html body[class][class][class] input:focus-visible, html body[class][class][class] select:focus-visible, html body[class][class][class] textarea:focus-visible, html body[class][class][class] button:focus-visible, html body[class][class][class] a:focus-visible{ outline:2px solid var(--accent,#0A6FB4)!important; outline-offset:2px!important; } html body[class][class][class] .filter-h, html body[class][class][class] .filter-drawer-title{ font-size:11px!important;font-weight:700!important; letter-spacing:var(--rf-track)!important;text-transform:uppercase!important; } html body[class][class][class] .filter-block{padding:var(--rf-4) 0!important;} /* ── 11. FOOTER ─────────────────────────────────────────────────── */ /* Colours stay exactly as the admin sets them (footerBg / footerText); only the spacing and label typography are normalised. */ html body[class][class][class] footer{margin-top:var(--rf-16)!important;} html body[class][class][class] .foot-grid{gap:var(--rf-8)!important;padding:var(--rf-12) 0 var(--rf-8)!important;} html body[class][class][class] .foot-about{font-size:13.5px!important;line-height:1.7!important;} html body[class][class][class] .foot-trust span{font-size:12.5px!important;letter-spacing:-.004em!important;} html body[class][class][class] .foot-bottom{ font-size:12.5px!important;letter-spacing:-.002em!important; padding:var(--rf-4) 0!important; } html body[class][class][class] .footer-managed-columns .fcol-title, html body[class][class][class] .footer-managed-columns h4{ font-size:11px!important;font-weight:700!important; letter-spacing:var(--rf-track)!important;text-transform:uppercase!important; margin-bottom:var(--rf-3)!important; } html body[class][class][class] .footer-managed-columns a{font-size:13.5px!important;line-height:2!important;} /* ── 12. NEWSLETTER ─────────────────────────────────────────────── */ html body[class][class][class] .nl h3, html body[class][class][class] .newsletter h3{font-size:20px!important;font-weight:700!important;letter-spacing:-.018em!important;} html body[class][class][class] .nl-form input{border-radius:var(--shell-r-lg,5px)!important;font-size:14px!important;} /* ── 13. SCROLLBAR ──────────────────────────────────────────────── */ html body[class][class][class] ::-webkit-scrollbar{width:10px;height:10px;} html body[class][class][class] ::-webkit-scrollbar-thumb{background:var(--shell-rule-firm,#C6D2DE);border-radius:5px;} html body[class][class][class] ::-webkit-scrollbar-thumb:hover{background:var(--shell-slate,#5A6B80);} /* ── 14. MOTION ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ html body[class][class][class] *,html body[class][class][class] *::before,html body[class][class][class] *::after{ animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important; } } /* ── 15. PHONE ──────────────────────────────────────────────────── */ @media (max-width:760px){ html body[class][class][class]{font-size:14.5px;} html body[class][class][class] main.container{padding-top:var(--rf-5)!important;} html body[class][class][class] .section{margin-bottom:var(--rf-10)!important;} html body[class][class][class] .market-category-section{margin:0 0 var(--rf-8)!important;} html body[class][class][class] .header-row{padding:10px 0!important;gap:10px!important;} html body[class][class][class] .market-heading, html body[class][class][class] .sec-title{font-size:16px!important;} html body[class][class][class] .card-body{padding:var(--rf-3) var(--rf-3) 10px!important;} html body[class][class][class] .card-img{padding:10px!important;} html body[class][class][class] .card-name{font-size:13px!important;} html body[class][class][class] .price-now{font-size:16px!important;} html body[class][class][class] .market-category{padding:var(--rf-3) 6px!important;} html body[class][class][class] .market-category .cat-art{font-size:21px!important;} html body[class][class][class] .load-more{width:100%;padding:13px 20px!important;} html body[class][class][class] .foot-grid{gap:var(--rf-6)!important;padding:var(--rf-8) 0 var(--rf-5)!important;} } /* ── 16. iOS ZOOM ON FOCUS ──────────────────────────────────────── */ /* Safari on iPhone zooms the whole page in whenever a focused input has a font-size under 16px, and then leaves the layout shifted. Every input on the site was under that threshold, so tapping the search box or the checkout fields jumped the page. 16px on small screens only. */ @media (max-width:820px){ html body[class][class][class] input, html body[class][class][class] select, html body[class][class][class] textarea, html body[class][class][class] .search-box input, html body[class][class][class] .sort-sel, html body[class][class][class] .stb-index-search, html body[class][class][class] .nl-form input{font-size:16px!important;} }