/* ========================================================================
Rasa theme — Section 1: Header only.
Original stylesheet; layout patterns are common e-commerce conventions.
Design tokens live in :root — tweak colors here to re-theme globally.
======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');
:root {
--color-primary: #e31c23;
--color-primary-dark: #b71219;
--color-primary-soft: #fdecec;
--color-text: #2d2d2d;
--color-muted: #7d7d7d;
--color-muted-2: #a5a5a5;
--color-border: #ececec;
--color-border-soft: #f4f4f4;
--color-bg: #ffffff;
--color-bg-soft: #fafafa;
--color-bg-strip: #f7f7f7;
--container-max: 1440px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--header-top-h: 40px;
--header-cat-h: 52px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, .06);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, .18);
}
/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: 'Vazirmatn', 'Yekan', Tahoma, Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
direction: rtl;
text-align: right;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
img, svg { max-width: 100%; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
/* Container */
.rasa-container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 24px;
}
/* Icon helper */
.rasa-icon {
width: 20px;
height: 20px;
display: inline-block;
flex: 0 0 auto;
stroke: currentColor;
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.rasa-icon--sm { width: 16px; height: 16px; }
.rasa-icon--lg { width: 24px; height: 24px; }
/* ================================================================
Header
================================================================ */
.rasa-header {
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
}
/* -- Top strip -- */
.rasa-header__top {
background: var(--color-bg-strip);
border-bottom: 1px solid var(--color-border);
font-size: 12px;
color: var(--color-muted);
}
.rasa-header__top-inner {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--header-top-h);
gap: 24px;
}
.rasa-header__top-links {
display: flex;
align-items: center;
gap: 20px;
}
.rasa-header__top-links a,
.rasa-header__top-links button {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-muted);
background: transparent;
border: 0;
padding: 0;
font-size: 12px;
transition: color .15s;
}
.rasa-header__top-links a:hover,
.rasa-header__top-links button:hover { color: var(--color-primary); }
.rasa-header__top-links .divider {
width: 1px;
height: 14px;
background: var(--color-border);
}
.rasa-header__support {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-muted);
}
.rasa-header__support .rasa-icon { color: var(--color-primary); }
.rasa-header__support strong {
color: var(--color-text);
font-weight: 600;
direction: ltr;
unicode-bidi: plaintext;
}
/* -- Main row -- */
.rasa-header__main { padding: 18px 0; }
.rasa-header__main-inner {
display: flex;
align-items: center;
gap: 32px;
}
.rasa-header__logo {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 22px;
font-weight: 700;
color: var(--color-primary);
line-height: 1;
}
.rasa-header__logo img { max-height: 48px; width: auto; display: block; }
/* Search */
.rasa-search {
flex: 1 1 auto;
max-width: 720px;
position: relative;
}
.rasa-search__input {
width: 100%;
height: 46px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0 46px 0 16px;
background: var(--color-bg-soft);
font-size: 14px;
color: var(--color-text);
transition: background .15s, border-color .15s;
}
.rasa-search__input::placeholder { color: var(--color-muted-2); }
.rasa-search__input:focus {
outline: none;
border-color: var(--color-primary);
background: var(--color-bg);
}
.rasa-search__submit {
position: absolute;
inset-inline-start: 4px;
top: 4px;
height: 38px;
width: 38px;
border: 0;
background: transparent;
color: var(--color-muted);
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
}
.rasa-search__submit:hover { background: var(--color-primary-soft); color: var(--color-primary); }
/* Actions (account + cart) */
.rasa-header__actions {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.rasa-header__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
font-size: 13px;
font-weight: 500;
transition: border-color .15s, color .15s, background .15s;
}
.rasa-header__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rasa-header__btn .rasa-icon { color: var(--color-muted); transition: color .15s; }
.rasa-header__btn:hover .rasa-icon { color: var(--color-primary); }
.rasa-header__cart-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: var(--color-primary);
color: #fff;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
margin-inline-start: 4px;
}
/* -- Category strip -- */
.rasa-catnav {
border-top: 1px solid var(--color-border);
background: var(--color-bg);
}
.rasa-catnav__inner {
display: flex;
align-items: center;
gap: 24px;
height: var(--header-cat-h);
}
.rasa-catnav__all-wrapper { position: relative; flex: 0 0 auto; }
.rasa-catnav__all {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-primary);
color: #fff;
padding: 10px 16px;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 600;
border: 0;
cursor: pointer;
transition: background .15s;
}
.rasa-catnav__all:hover,
.rasa-catnav__all-wrapper:hover .rasa-catnav__all { background: var(--color-primary-dark); color: #fff; }
/* All-categories dropdown panel (opens on hover of wrapper) */
.rasa-catnav__panel {
position: absolute;
top: 100%;
inset-inline-start: 0;
margin-top: 6px;
min-width: 260px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 6px 0;
z-index: 200;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
}
.rasa-catnav__all-wrapper:hover .rasa-catnav__panel,
.rasa-catnav__all-wrapper:focus-within .rasa-catnav__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s;
}
.rasa-catnav__panel-list { list-style: none; margin: 0; padding: 0; }
.rasa-catnav__panel-item { position: relative; }
.rasa-catnav__panel-item > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px;
color: var(--color-text);
font-size: 13px;
font-weight: 500;
transition: background .15s, color .15s;
}
.rasa-catnav__panel-item > a > .rasa-icon { color: var(--color-muted-2); transition: color .15s; }
.rasa-catnav__panel-item > a:hover,
.rasa-catnav__panel-item:hover > a {
background: var(--color-primary-soft);
color: var(--color-primary);
}
.rasa-catnav__panel-item:hover > a > .rasa-icon { color: var(--color-primary); }
/* Subcategory flyout on the visually LEFT side of the panel (RTL "end" side) */
.rasa-catnav__panel-flyout {
position: absolute;
top: 0;
inset-inline-start: 100%;
margin-inline-start: 4px;
min-width: 220px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 6px 0;
opacity: 0;
visibility: hidden;
transform: translateX(-4px);
transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
}
.rasa-catnav__panel-item:hover > .rasa-catnav__panel-flyout {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s;
}
.rasa-catnav__panel-flyout ul { list-style: none; margin: 0; padding: 0; }
.rasa-catnav__panel-flyout li a {
display: block;
padding: 8px 16px;
color: var(--color-muted);
font-size: 13px;
transition: background .15s, color .15s;
}
.rasa-catnav__panel-flyout li a:hover {
background: var(--color-bg-soft);
color: var(--color-primary);
}
.rasa-catnav__list {
display: flex;
align-items: center;
gap: 4px;
flex: 1 1 auto;
overflow-x: auto;
scrollbar-width: none;
}
.rasa-catnav__list::-webkit-scrollbar { display: none; }
.rasa-catnav__list > li { position: relative; flex: 0 0 auto; }
.rasa-catnav__list > li > a {
display: inline-block;
padding: 10px 12px;
color: var(--color-text);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
border-radius: var(--radius-sm);
transition: color .15s, background .15s;
}
.rasa-catnav__list > li > a:hover { color: var(--color-primary); background: var(--color-primary-soft); }
/* Flyout placeholder (styling only — filled in a later step) */
.rasa-catnav__list .sublist-wrap {
position: absolute;
top: 100%;
inset-inline-start: 0;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
min-width: 240px;
padding: 8px 0;
box-shadow: var(--shadow-md);
display: none;
z-index: 100;
}
.rasa-catnav__list > li:hover > .sublist-wrap { display: block; }
.rasa-catnav__list .sublist li a {
display: block;
padding: 8px 20px;
color: var(--color-muted);
font-size: 13px;
}
.rasa-catnav__list .sublist li a:hover { background: var(--color-bg-soft); color: var(--color-primary); }
/* Category icons — inline SVGs from _RasaCategoryIcon.cshtml */
.rasa-catnav__icon {
color: var(--color-muted-2);
margin-inline-end: 8px;
vertical-align: middle;
transition: color .15s, transform .15s;
}
/* Accent for hot deals — bumped specificity so it wins over the panel-item rule */
.rasa-catnav__list .rasa-catnav__icon--accent,
.rasa-catnav__panel-item > a > .rasa-catnav__icon--accent { color: var(--color-primary); }
.rasa-catnav__label { vertical-align: middle; }
/* Top-nav L1 anchors: flex so icon + label sit side by side */
.rasa-catnav__list > li > a {
display: inline-flex;
align-items: center;
}
.rasa-catnav__list > li > a:hover .rasa-catnav__icon { color: var(--color-primary); }
/* Top-nav L2 flyout links: same icon treatment as L1 */
.rasa-catnav__list .sublist li a {
display: flex;
align-items: center;
}
/* Mega-menu panel: label expands, chevron pinned to end */
.rasa-catnav__panel-item > a > .rasa-catnav__label { flex: 1 1 auto; }
.rasa-catnav__chevron { color: var(--color-muted-2); }
.rasa-catnav__panel-flyout li a {
display: flex;
align-items: center;
}
.rasa-catnav__panel-flyout li a .rasa-catnav__icon {
width: 14px;
height: 14px;
}
/* ================================================================
Login popup
================================================================ */
.rasa-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(20, 20, 20, .55);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 16px;
}
.rasa-modal.is-open { display: flex; }
.rasa-modal__panel {
background: #fff;
border-radius: var(--radius-lg);
padding: 32px 28px;
width: 100%;
max-width: 380px;
position: relative;
box-shadow: var(--shadow-lg);
animation: rasa-modal-pop .18s ease-out both;
}
@keyframes rasa-modal-pop {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.rasa-modal__close {
position: absolute;
top: 10px;
inset-inline-start: 10px;
width: 32px;
height: 32px;
border: 0;
background: transparent;
color: var(--color-muted);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
}
.rasa-modal__close:hover { background: var(--color-bg-soft); color: var(--color-primary); }
.rasa-modal__title { text-align: center; font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.rasa-modal__sub { text-align: center; font-size: 12px; color: var(--color-muted); margin: 0 0 24px; }
.rasa-modal__field { margin-bottom: 14px; }
.rasa-modal__field label { display: block; font-size: 12px; color: var(--color-muted); margin-bottom: 6px; }
.rasa-modal__field input {
width: 100%;
height: 44px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0 14px;
font-size: 14px;
background: var(--color-bg-soft);
color: var(--color-text);
transition: border-color .15s, background .15s;
}
.rasa-modal__field input:focus { outline: none; border-color: var(--color-primary); background: var(--color-bg); }
.rasa-modal__submit {
width: 100%;
height: 46px;
border: 0;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-md);
font-size: 15px;
font-weight: 600;
transition: background .15s;
margin-top: 4px;
}
.rasa-modal__submit:hover { background: var(--color-primary-dark); }
.rasa-modal__meta { margin-top: 18px; text-align: center; font-size: 13px; color: var(--color-muted); }
.rasa-modal__meta a { color: var(--color-primary); font-weight: 600; }
.rasa-modal__meta a:hover { text-decoration: underline; }
/* ================================================================
Empty homepage placeholder
================================================================ */
.home-page-empty { min-height: 60vh; }
/* ================================================================
Toast — surfaced by theme.rasa.js on AJAX action responses.
================================================================ */
.rasa-toast {
position: fixed;
top: 24px;
inset-inline-end: 24px;
max-width: 380px;
padding: 14px 18px;
background: var(--color-text);
color: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size: 13px;
line-height: 1.55;
z-index: 2000;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .2s, transform .2s, visibility 0s linear .2s;
pointer-events: none;
}
.rasa-toast.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .2s, transform .2s, visibility 0s;
}
.rasa-toast--success { background: #10b981; }
.rasa-toast--error { background: #ef4444; }
/* ================================================================
Section 2 — Hero slider (styles Swiper.js output from Widgets.Swiper)
================================================================ */
.rasa-hero { padding: 20px 0; }
.rasa-hero__frame {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-bg-soft);
box-shadow: var(--shadow-sm);
/* Reserves layout height before the async widget mounts. Matches the 1920x585 aspect ratio of typical hero banners. */
aspect-ratio: 1920 / 585;
min-height: 220px;
}
.rasa-hero__frame > .swiper,
.rasa-hero__frame .nop-slider,
.rasa-hero__frame .slider-wrapper,
.rasa-hero__frame .anywhere-slider { width: 100%; height: 100%; }
/* Slide + image */
.rasa-hero__frame .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-soft);
}
.rasa-hero__frame .swiper-slide a { display: block; width: 100%; height: 100%; }
.rasa-hero__frame .slider-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Slick-slider adapter — SevenSpikes AnywhereSliders uses slick, not Swiper.
The plugin's own CSS handles carousel mechanics; these rules stretch its
internal containers to fill the hero frame so both slides participate. */
.rasa-hero__frame .slick-list,
.rasa-hero__frame .slick-track { height: 100%; }
.rasa-hero__frame .slick-slide { height: 100%; }
.rasa-hero__frame .slick-slide > div { height: 100%; }
.rasa-hero__frame .picture-slide,
.rasa-hero__frame .html-slide { height: 100%; }
.rasa-hero__frame .picture-slide a,
.rasa-hero__frame .picture-slide picture { display: block; width: 100%; height: 100%; }
.rasa-hero__frame .picture-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Slick dots */
.rasa-hero__frame .slick-dots {
position: absolute;
bottom: 14px;
inset-inline: 0;
display: flex !important;
justify-content: center;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
z-index: 3;
}
.rasa-hero__frame .slick-dots li { width: auto; height: auto; margin: 0; }
.rasa-hero__frame .slick-dots li button {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .55);
text-indent: -9999px;
cursor: pointer;
transition: width .2s, background .2s;
}
.rasa-hero__frame .slick-dots li button::before { content: none; }
.rasa-hero__frame .slick-dots li.slick-active button { background: #fff; width: 22px; }
/* Slick arrows — small round buttons at the sides.
Plugin's slick.css draws a default arrow glyph via ::before content; we hide
it and put a single SVG chevron on the button itself so there's no double icon. */
.rasa-hero__frame .anywhere-slider .slick-prev,
.rasa-hero__frame .anywhere-slider .slick-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
padding: 0;
border-radius: 999px;
background-color: rgba(0, 0, 0, .35);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
color: transparent;
font-size: 0;
border: 0;
z-index: 3;
cursor: pointer;
transition: background-color .15s;
}
.rasa-hero__frame .anywhere-slider .slick-prev:hover,
.rasa-hero__frame .anywhere-slider .slick-next:hover { background-color: rgba(0, 0, 0, .55); }
/* Force LTR-convention positioning even in RTL: prev on the left, next on the
right. Physical left/right override the plugin's RTL rules that swap them. */
.rasa-hero__frame .anywhere-slider .slick-prev { left: 16px; right: auto; }
.rasa-hero__frame .anywhere-slider .slick-next { right: 16px; left: auto; transform: translateY(-50%) scaleX(-1); }
/* Nuke plugin's default arrow glyph (::before with a character) */
.rasa-hero__frame .anywhere-slider .slick-prev::before,
.rasa-hero__frame .anywhere-slider .slick-next::before { content: '' !important; display: none !important; }
/* Pagination dots — small, elegant, centered */
.rasa-hero__frame .swiper-pagination {
position: absolute;
bottom: 14px;
inset-inline: 0;
display: flex;
justify-content: center;
gap: 6px;
z-index: 3;
pointer-events: none;
}
.rasa-hero__frame .swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, .55);
display: inline-block;
transition: width .2s, background .2s;
cursor: pointer;
pointer-events: auto;
opacity: 1;
margin: 0 !important; /* override Swiper default */
}
.rasa-hero__frame .swiper-pagination-bullet-active {
background: #fff;
width: 22px;
}
/* Prev / next arrows — Swiper's default CSS renders literal "prev"/"next" text via
the swiper-icons font. Override with mask-image chevrons so the icon inherits
the button's color and stays crisp at any DPI. */
.rasa-hero__frame .swiper-button-prev,
.rasa-hero__frame .swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(255, 255, 255, .85);
color: var(--color-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
transition: background .15s, color .15s, opacity .15s;
opacity: 0;
box-shadow: var(--shadow-sm);
/* prevent Swiper's default font-size affecting the mask sizing */
font-size: 0 !important;
}
.rasa-hero__frame:hover .swiper-button-prev,
.rasa-hero__frame:hover .swiper-button-next { opacity: 1; }
.rasa-hero__frame .swiper-button-prev:hover,
.rasa-hero__frame .swiper-button-next:hover { background: #fff; color: var(--color-primary); }
/* Physical positions — Swiper's default is prev=left, next=right regardless of dir */
.rasa-hero__frame .swiper-button-prev { left: 16px; right: auto; }
.rasa-hero__frame .swiper-button-next { right: 16px; left: auto; }
/* Kill Swiper's "prev" / "next" text and paint a chevron via mask */
.rasa-hero__frame .swiper-button-prev::after,
.rasa-hero__frame .swiper-button-next::after {
content: "" !important;
display: block;
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
font-family: initial !important;
font-size: 0 !important;
}
/* Icon direction matches the button's physical position. */
.rasa-hero__frame .swiper-button-prev::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E");
}
.rasa-hero__frame .swiper-button-next::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}
/* Lazy loader spinner */
.rasa-hero__frame .swiper-lazy-preloader {
position: absolute;
inset: 0;
margin: auto;
width: 42px;
height: 42px;
border: 3px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: rasa-hero-spin 1s linear infinite;
}
@keyframes rasa-hero-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
.rasa-hero { padding: 12px 0; }
.rasa-hero__frame { border-radius: var(--radius-md); min-height: 140px; }
.rasa-hero__frame .swiper-button-prev,
.rasa-hero__frame .swiper-button-next { width: 34px; height: 34px; opacity: 1; }
.rasa-hero__frame .swiper-button-prev { inset-inline-start: 8px; }
.rasa-hero__frame .swiper-button-next { inset-inline-end: 8px; }
}
/* ================================================================
Section 3 — Feature strip (4 icon badges)
================================================================ */
.rasa-features { padding: 24px 0; }
.rasa-features__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow-sm);
}
.rasa-feature {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 12px;
position: relative;
min-width: 0;
}
.rasa-feature:not(:last-child)::after {
content: "";
position: absolute;
top: 12px;
bottom: 12px;
inset-inline-start: -8px;
width: 1px;
background: var(--color-border);
}
.rasa-feature__icon {
flex: 0 0 auto;
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
background: var(--color-primary-soft);
border-radius: 50%;
transition: transform .18s;
}
.rasa-feature:hover .rasa-feature__icon { transform: scale(1.05); }
.rasa-feature__text { flex: 1 1 auto; min-width: 0; }
.rasa-feature__title {
font-size: 14px;
font-weight: 700;
color: var(--color-text);
line-height: 1.4;
margin-bottom: 3px;
}
.rasa-feature__subtitle {
font-size: 12px;
color: var(--color-muted);
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 1024px) {
.rasa-features__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rasa-feature:nth-child(2)::after { display: none; }
.rasa-feature:not(:last-child)::after { top: auto; bottom: -6px; inset-inline-start: 8px; inset-inline-end: 8px; width: auto; height: 1px; }
.rasa-feature:nth-child(3)::after,
.rasa-feature:nth-child(4)::after { display: none; }
}
@media (max-width: 560px) {
.rasa-features { padding: 12px 0; }
.rasa-features__grid { grid-template-columns: 1fr; padding: 12px; }
.rasa-feature:not(:last-child)::after {
top: auto; bottom: -6px;
inset-inline-start: 8px; inset-inline-end: 8px;
width: auto; height: 1px;
}
.rasa-feature:nth-child(2)::after,
.rasa-feature:nth-child(3)::after { display: block; }
.rasa-feature__icon { width: 48px; height: 48px; }
.rasa-feature__subtitle { white-space: normal; }
}
/* ================================================================
Reusable section head (title + "view all" link)
================================================================ */
.rasa-section__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
padding: 0 4px;
}
.rasa-section__title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--color-text);
position: relative;
padding-inline-start: 14px;
}
.rasa-section__title::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 4px;
bottom: 4px;
width: 4px;
background: var(--color-primary);
border-radius: 2px;
}
.rasa-section__more {
font-size: 12px;
color: var(--color-primary);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
}
.rasa-section__more:hover { text-decoration: underline; }
/* ================================================================
Section 4 — Category tiles
================================================================ */
.rasa-cats { padding: 24px 0; }
.rasa-cats__grid {
list-style: none;
margin: 0;
padding: 20px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 12px;
}
.rasa-cat-tile { min-width: 0; }
.rasa-cat-tile > a {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 12px 8px;
border-radius: var(--radius-md);
color: var(--color-text);
transition: background .15s;
}
.rasa-cat-tile > a:hover { background: var(--color-bg-soft); }
.rasa-cat-tile > a:hover .rasa-cat-tile__name { color: var(--color-primary); }
.rasa-cat-tile__image {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--color-primary-soft);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: transform .18s;
position: relative;
}
.rasa-cat-tile > a:hover .rasa-cat-tile__image { transform: scale(1.04); }
.rasa-cat-tile__image img {
width: 74%;
height: 74%;
object-fit: contain;
display: block;
}
.rasa-cat-tile__initial {
font-size: 34px;
font-weight: 700;
color: var(--color-primary);
line-height: 1;
user-select: none;
}
.rasa-cat-tile__name {
font-size: 13px;
font-weight: 500;
color: var(--color-text);
text-align: center;
line-height: 1.4;
transition: color .15s;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 2.8em;
}
@media (max-width: 1200px) {
.rasa-cats__grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
.rasa-cats__grid { grid-template-columns: repeat(4, 1fr); }
.rasa-cat-tile__image { width: 80px; height: 80px; }
.rasa-cat-tile__initial { font-size: 30px; }
}
@media (max-width: 560px) {
.rasa-cats { padding: 12px 0; }
.rasa-cats__grid { grid-template-columns: repeat(3, 1fr); padding: 12px; gap: 8px; }
.rasa-cat-tile__image { width: 68px; height: 68px; }
.rasa-cat-tile__name { font-size: 12px; }
}
/* ================================================================
Section 5 — Product carousel (also reused for best sellers, newest)
================================================================ */
.rasa-featured { padding: 24px 0; }
.rasa-carousel {
position: relative;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 16px 8px;
}
.rasa-carousel__track {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding: 4px 8px;
scrollbar-width: none;
}
.rasa-carousel__track::-webkit-scrollbar { display: none; }
.rasa-carousel__cell {
flex: 0 0 auto;
scroll-snap-align: start;
width: calc((100% - 12px * 4) / 5); /* 5 visible at a time on desktop */
min-width: 180px;
}
/* Nav buttons (circular chevrons, appear on hover) */
.rasa-carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--color-border);
color: var(--color-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
box-shadow: var(--shadow-md);
opacity: 0;
transition: opacity .15s, color .15s, border-color .15s;
font-size: 0;
}
.rasa-carousel:hover .rasa-carousel__nav { opacity: 1; }
.rasa-carousel__nav:hover { color: var(--color-primary); border-color: var(--color-primary); }
.rasa-carousel__nav:disabled { opacity: 0 !important; pointer-events: none; }
.rasa-carousel__nav--prev { left: 8px; }
.rasa-carousel__nav--next { right: 8px; }
.rasa-carousel__nav::after {
content: "";
display: block;
width: 12px;
height: 12px;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* Left button (visually) — points left */
.rasa-carousel__nav--prev::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E");
}
/* Right button (visually) — points right */
.rasa-carousel__nav--next::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}
/* ---------- Product card ---------- */
.rasa-card {
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: box-shadow .15s, border-color .15s, transform .15s;
height: 100%;
display: flex;
flex-direction: column;
cursor: pointer;
}
.rasa-card:hover {
box-shadow: var(--shadow-md);
border-color: transparent;
background: #fff;
}
.rasa-card__link {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px 8px 4px;
color: var(--color-text);
flex: 1 1 auto;
text-decoration: none;
cursor: pointer;
}
.rasa-card__media {
position: relative;
aspect-ratio: 1;
background: #fff;
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.rasa-card__media img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
transition: transform .25s;
}
.rasa-card:hover .rasa-card__media img { transform: scale(1.04); }
.rasa-card__badge {
position: absolute;
top: 8px;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
line-height: 1.4;
z-index: 2;
letter-spacing: 0;
}
.rasa-card__badge--new {
inset-inline-end: 8px;
background: #10b981;
color: #fff;
}
.rasa-card__badge--discount {
inset-inline-start: 8px;
background: var(--color-primary);
color: #fff;
}
.rasa-card__name {
font-size: 13px;
font-weight: 500;
color: var(--color-text);
line-height: 1.5;
margin: 4px 4px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.9em;
transition: color .15s;
}
.rasa-card:hover .rasa-card__name { color: var(--color-primary); }
/* Rating stars — 5-star ghost + colored fill by width % */
.rasa-card__rating {
display: flex;
align-items: center;
gap: 6px;
margin: 0 4px;
min-height: 18px;
}
.rasa-card__rating--empty { visibility: hidden; }
.rasa-card__stars {
position: relative;
width: 80px;
height: 14px;
background-color: var(--color-border);
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cg fill='black'%3E%3Cpath d='M10 0l2.9 6.4 7 .7-5.3 4.8 1.6 7L10 15l-6.2 3.9 1.6-7L0 7.1l7-.7L10 0z'/%3E%3Cpath d='M30 0l2.9 6.4 7 .7-5.3 4.8 1.6 7L30 15l-6.2 3.9 1.6-7-5.4-4.8 7-.7L30 0z'/%3E%3Cpath d='M50 0l2.9 6.4 7 .7-5.3 4.8 1.6 7L50 15l-6.2 3.9 1.6-7-5.4-4.8 7-.7L50 0z'/%3E%3Cpath d='M70 0l2.9 6.4 7 .7-5.3 4.8 1.6 7L70 15l-6.2 3.9 1.6-7-5.4-4.8 7-.7L70 0z'/%3E%3Cpath d='M90 0l2.9 6.4 7 .7-5.3 4.8 1.6 7L90 15l-6.2 3.9 1.6-7-5.4-4.8 7-.7L90 0z'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cg fill='black'%3E%3Cpath d='M10 0l2.9 6.4 7 .7-5.3 4.8 1.6 7L10 15l-6.2 3.9 1.6-7L0 7.1l7-.7L10 0z'/%3E%3Cpath d='M30 0l2.9 6.4 7 .7-5.3 4.8 1.6 7L30 15l-6.2 3.9 1.6-7-5.4-4.8 7-.7L30 0z'/%3E%3Cpath d='M50 0l2.9 6.4 7 .7-5.3 4.8 1.6 7L50 15l-6.2 3.9 1.6-7-5.4-4.8 7-.7L50 0z'/%3E%3Cpath d='M70 0l2.9 6.4 7 .7-5.3 4.8 1.6 7L70 15l-6.2 3.9 1.6-7-5.4-4.8 7-.7L70 0z'/%3E%3Cpath d='M90 0l2.9 6.4 7 .7-5.3 4.8 1.6 7L90 15l-6.2 3.9 1.6-7-5.4-4.8 7-.7L90 0z'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
overflow: hidden;
}
.rasa-card__stars-fill {
height: 100%;
background: #f5b301;
}
.rasa-card__reviews {
font-size: 11px;
color: var(--color-muted-2);
}
/* Footer sits below the anchor block — contains action buttons on the right
(RTL "start") and prices on the left ("end"). */
.rasa-card__footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px;
padding: 6px 10px 10px;
margin-top: auto;
}
.rasa-card__actions {
display: flex;
align-items: center;
gap: 4px;
order: 2; /* prices come first in RTL flow, actions after */
}
.rasa-card__act {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: transparent;
color: var(--color-muted);
border: 0;
padding: 0;
cursor: pointer;
transition: background .15s, color .15s;
}
.rasa-card__act svg { width: 16px; height: 16px; }
.rasa-card__act:hover {
background: var(--color-primary-soft);
color: var(--color-primary);
}
.rasa-card__act--cart {
width: 32px;
height: 32px;
background: var(--color-primary);
color: #fff;
box-shadow: 0 2px 6px rgba(227, 28, 35, .3);
margin-inline-start: 4px;
}
.rasa-card__act--cart:hover {
background: var(--color-primary-dark);
color: #fff;
}
.rasa-card__act--cart svg { width: 18px; height: 18px; }
.rasa-card__prices {
order: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
min-width: 0;
}
.rasa-card__old {
font-size: 11px;
color: var(--color-muted-2);
text-decoration: line-through;
line-height: 1.2;
}
.rasa-card__price {
font-size: 14px;
font-weight: 700;
color: var(--color-text);
line-height: 1.3;
}
.rasa-card__price--call { font-size: 12px; font-weight: 500; color: var(--color-muted); }
@media (max-width: 1200px) {
.rasa-carousel__cell { width: calc((100% - 12px * 3) / 4); }
}
@media (max-width: 900px) {
.rasa-carousel__cell { width: calc((100% - 12px * 2) / 3); }
}
@media (max-width: 640px) {
.rasa-featured { padding: 12px 0; }
.rasa-carousel { padding: 8px 4px; }
.rasa-carousel__nav { display: none; }
.rasa-carousel__cell { width: 46%; min-width: 150px; }
}
/* ================================================================
Section 8 — Brand strip
================================================================ */
.rasa-brands { padding: 24px 0; }
.rasa-brands__grid {
list-style: none;
margin: 0;
padding: 20px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.rasa-brand-tile { min-width: 0; }
.rasa-brand-tile > a {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 14px 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
color: var(--color-text);
text-decoration: none;
transition: border-color .15s, box-shadow .15s, transform .15s;
height: 100%;
}
.rasa-brand-tile > a:hover {
border-color: var(--color-primary-soft);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.rasa-brand-tile__logo {
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
filter: grayscale(1);
opacity: .75;
transition: filter .18s, opacity .18s;
}
.rasa-brand-tile:hover .rasa-brand-tile__logo { filter: grayscale(0); opacity: 1; }
.rasa-brand-tile__logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.rasa-brand-tile__fallback {
font-size: 15px;
font-weight: 700;
color: var(--color-muted);
letter-spacing: .5px;
text-transform: uppercase;
}
.rasa-brand-tile__name {
font-size: 12px;
font-weight: 500;
color: var(--color-muted);
text-align: center;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
transition: color .15s;
}
.rasa-brand-tile:hover .rasa-brand-tile__name { color: var(--color-primary); }
@media (max-width: 1024px) {
.rasa-brands__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
.rasa-brands { padding: 12px 0; }
.rasa-brands__grid { grid-template-columns: repeat(3, 1fr); padding: 12px; gap: 10px; }
.rasa-brand-tile__logo { height: 44px; }
}
@media (max-width: 420px) {
.rasa-brands__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ================================================================
Section 9 — Blog snippets (3-card row)
================================================================ */
.rasa-blog { padding: 24px 0; }
.rasa-blog__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.rasa-blog-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow .18s, transform .18s, border-color .18s;
}
.rasa-blog-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: transparent;
}
.rasa-blog-card > a {
display: flex;
flex-direction: column;
height: 100%;
color: var(--color-text);
text-decoration: none;
}
.rasa-blog-card__cover {
height: 44px;
position: relative;
display: flex;
align-items: center;
padding: 0 18px;
/* Subtle top accent strip; per-card tone via the tone modifier below.
When you add cover images later, override to background: url(...) center/cover no-repeat. */
background: var(--color-primary-soft);
border-bottom: 1px solid var(--color-border);
}
.rasa-blog-card__cover::before {
content: "";
position: absolute;
top: 0; inset-inline-start: 0;
width: 100%; height: 3px;
background: var(--color-primary);
}
.rasa-blog-card--tone-0 .rasa-blog-card__cover { background: linear-gradient(90deg, #fef2f2, #fdecec); }
.rasa-blog-card--tone-1 .rasa-blog-card__cover { background: linear-gradient(90deg, #fff8ed, #ffedd5); }
.rasa-blog-card--tone-1 .rasa-blog-card__cover::before { background: #f77f00; }
.rasa-blog-card--tone-2 .rasa-blog-card__cover { background: linear-gradient(90deg, #eff6ff, #dbeafe); }
.rasa-blog-card--tone-2 .rasa-blog-card__cover::before { background: #3b82f6; }
.rasa-blog-card__date {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
color: var(--color-text);
border-radius: 999px;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border);
}
.rasa-blog-card__date::before {
content: "";
display: inline-block;
width: 12px; height: 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d7d7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.rasa-blog-card__body {
padding: 14px 16px 18px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 8px;
}
.rasa-blog-card__title {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--color-text);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3.1em;
transition: color .15s;
}
.rasa-blog-card:hover .rasa-blog-card__title { color: var(--color-primary); }
.rasa-blog-card__excerpt {
margin: 0;
font-size: 12.5px;
color: var(--color-muted);
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1 1 auto;
}
.rasa-blog-card__more {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-primary);
font-weight: 600;
font-size: 12px;
transition: gap .15s;
}
.rasa-blog-card:hover .rasa-blog-card__more { gap: 10px; }
@media (max-width: 900px) {
.rasa-blog:not(.rasa-content-page *) .rasa-blog__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
.rasa-blog { padding: 12px 0; }
.rasa-blog:not(.rasa-content-page *) .rasa-blog__grid { grid-template-columns: 1fr; }
.rasa-blog-card__cover { height: 38px; }
}
/* ================================================================
Section 10 — Footer
================================================================ */
.rasa-footer {
margin-top: 32px;
background: var(--color-bg-strip);
border-top: 1px solid var(--color-border);
color: var(--color-text);
}
.rasa-footer__cols {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px;
padding: 40px 0 32px;
}
.rasa-footer__col { min-width: 0; }
.rasa-footer__title {
margin: 0 0 16px;
font-size: 14px;
font-weight: 700;
color: var(--color-text);
position: relative;
padding-inline-start: 12px;
}
.rasa-footer__title::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 4px;
bottom: 4px;
width: 3px;
background: var(--color-primary);
border-radius: 2px;
}
.rasa-footer__list,
.rasa-footer__contact {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.rasa-footer__list li a,
.rasa-footer__list li span {
font-size: 13px;
color: var(--color-muted);
line-height: 1.6;
transition: color .15s;
display: inline-block;
}
.rasa-footer__list li a:hover { color: var(--color-primary); }
.rasa-footer__contact li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--color-muted);
line-height: 1.7;
}
.rasa-footer__contact li .rasa-icon {
color: var(--color-primary);
margin-top: 2px;
flex: 0 0 auto;
}
.rasa-footer__contact li a {
color: var(--color-muted);
transition: color .15s;
}
.rasa-footer__contact li a:hover { color: var(--color-primary); }
.rasa-footer__socials {
display: flex;
gap: 8px;
margin-top: 20px;
}
.rasa-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--color-border);
color: var(--color-muted);
transition: border-color .15s, color .15s, transform .15s;
}
.rasa-social svg { width: 16px; height: 16px; }
.rasa-social:hover { transform: translateY(-2px); }
/* Brand-coloured icons — resting color is the platform's brand hue; on hover
we invert to filled brand background with white glyph for extra pop. */
.rasa-social--instagram { color: #E4405F; }
.rasa-social--facebook { color: #1877F2; }
.rasa-social--twitter { color: #1DA1F2; }
.rasa-social--youtube { color: #FF0000; }
.rasa-social--telegram { color: #26A5E4; }
.rasa-social--whatsapp { color: #25D366; }
.rasa-social--instagram:hover { background: #E4405F; color: #fff; border-color: #E4405F; }
.rasa-social--facebook:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.rasa-social--twitter:hover { background: #1DA1F2; color: #fff; border-color: #1DA1F2; }
.rasa-social--youtube:hover { background: #FF0000; color: #fff; border-color: #FF0000; }
.rasa-social--telegram:hover { background: #26A5E4; color: #fff; border-color: #26A5E4; }
.rasa-social--whatsapp:hover { background: #25D366; color: #fff; border-color: #25D366; }
.rasa-footer__bottom {
border-top: 1px solid var(--color-border);
background: #fff;
}
.rasa-footer__bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 24px;
flex-wrap: wrap;
}
.rasa-footer__copyright {
font-size: 12px;
color: var(--color-muted);
}
.rasa-footer__trust {
display: flex;
align-items: center;
gap: 8px;
}
.rasa-trust-slot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 67px;
height: 67px;
background: var(--color-bg-soft);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-muted-2);
font-size: 10px;
text-align: center;
line-height: 1.2;
overflow: hidden;
}
.rasa-trust-slot span { display: inline-block; padding: 0 4px; }
/* Enamad slot: real trust seal image — no placeholder styling */
.rasa-trust-slot--enamad {
background: transparent;
border: 0;
padding: 0;
}
.rasa-trust-slot--enamad a,
.rasa-trust-slot--enamad img {
display: block;
width: 67px;
height: 67px;
object-fit: contain;
}
@media (max-width: 900px) {
.rasa-footer__cols {
grid-template-columns: 1fr 1fr;
gap: 28px;
padding: 28px 0 20px;
}
}
@media (max-width: 560px) {
.rasa-footer { margin-top: 20px; }
.rasa-footer__cols { grid-template-columns: 1fr; gap: 24px; padding: 24px 0 16px; }
.rasa-footer__bottom-inner { flex-direction: column-reverse; text-align: center; padding: 14px 16px; }
.rasa-footer__trust { justify-content: center; }
}
/* ================================================================
Category listing page
================================================================ */
/* Breadcrumb strip */
.rasa-breadcrumb {
background: var(--color-bg-strip);
border-bottom: 1px solid var(--color-border);
padding: 10px 0;
margin-bottom: 20px;
}
.rasa-breadcrumb ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
font-size: 12px;
color: var(--color-muted);
}
.rasa-breadcrumb li { display: inline-flex; align-items: center; }
.rasa-breadcrumb a {
color: var(--color-muted);
transition: color .15s;
}
.rasa-breadcrumb a:hover { color: var(--color-primary); }
.rasa-breadcrumb strong { color: var(--color-text); font-weight: 600; }
.rasa-breadcrumb__sep { color: var(--color-muted-2); user-select: none; }
/* Category header */
.rasa-catpage__header {
margin: 8px 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: nowrap;
}
.rasa-catpage__header .rasa-catpage__title {
flex: 1 1 auto;
min-width: 0;
}
/* Filter chip strip + toggle — hidden on desktop, shown on mobile as a
horizontally scrollable row of outlined pills above the page title. */
.rasa-catpage__filter-chips { display: none; }
.rasa-catpage__sort-pill { display: none; }
.rasa-catpage__filter-toggle,
.rasa-catpage__filter-chip {
display: none;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #fff;
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: color .15s, border-color .15s;
white-space: nowrap;
flex-shrink: 0;
}
.rasa-catpage__filter-toggle:hover,
.rasa-catpage__filter-chip:hover { color: var(--color-primary); border-color: var(--color-primary); }
.rasa-catpage__filter-toggle svg { width: 16px; height: 16px; }
/* Chip whose group has an active selection */
.rasa-catpage__filter-chip.has-selection {
color: var(--color-primary);
border-color: var(--color-primary);
font-weight: 700;
}
.rasa-catpage__title {
margin: 0 0 6px;
font-size: 22px;
font-weight: 700;
color: var(--color-text);
position: relative;
padding-inline-start: 14px;
}
.rasa-catpage__title::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 6px;
bottom: 6px;
width: 4px;
background: var(--color-primary);
border-radius: 2px;
}
.rasa-catpage__description {
color: var(--color-muted);
font-size: 13px;
line-height: 1.8;
max-width: 900px;
}
/* Subcategory row */
.rasa-catpage__sub {
list-style: none;
margin: 0 0 24px;
padding: 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 12px;
}
.rasa-subcat-tile > a {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 10px 6px;
border-radius: var(--radius-md);
color: var(--color-text);
transition: background .15s;
text-decoration: none;
}
.rasa-subcat-tile > a:hover { background: var(--color-bg-soft); }
.rasa-subcat-tile > a:hover .rasa-subcat-tile__name { color: var(--color-primary); }
.rasa-subcat-tile__image {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--color-primary-soft);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.rasa-subcat-tile__image img { width: 78%; height: 78%; object-fit: contain; }
.rasa-subcat-tile__initial {
font-size: 26px;
font-weight: 700;
color: var(--color-primary);
line-height: 1;
}
.rasa-subcat-tile__name {
font-size: 12px;
font-weight: 500;
text-align: center;
line-height: 1.35;
transition: color .15s;
}
/* Two-column layout — sidebar (right in RTL) + main */
.rasa-catpage__layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 20px;
margin-bottom: 32px;
}
.rasa-catpage__sidebar {
grid-column: 1;
}
.rasa-catpage__main {
grid-column: 2;
min-width: 0;
}
/* Filters wrapper — restyle vanilla filter output */
.rasa-filters {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 16px;
position: sticky;
top: 16px;
max-height: calc(100vh - 32px);
overflow: auto;
}
.rasa-filters .filter-content,
.rasa-filters .block { margin-bottom: 20px; }
.rasa-filters .block:last-child { margin-bottom: 0; }
.rasa-filters .title,
.rasa-filters .filter-title,
.rasa-filters .filter-content > .title,
.rasa-filters .block > .title {
font-size: 13px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border);
}
.rasa-filters ul { list-style: none; margin: 0; padding: 0; }
.rasa-filters li,
.rasa-filters .filter-item { font-size: 12px; padding: 4px 0; color: var(--color-muted); }
.rasa-filters a { color: var(--color-muted); transition: color .15s; }
.rasa-filters a:hover { color: var(--color-primary); }
.rasa-filters input[type="text"],
.rasa-filters input[type="number"] {
width: 100%;
height: 32px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0 8px;
font-size: 12px;
}
.rasa-filters button,
.rasa-filters .filter-button {
background: var(--color-primary);
color: #fff;
border: 0;
padding: 6px 12px;
border-radius: var(--radius-sm);
font-size: 12px;
cursor: pointer;
margin-top: 8px;
}
.rasa-filters button:hover { background: var(--color-primary-dark); }
.rasa-filter-block__title {
font-size: 13px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border);
}
.rasa-filter-search { margin-bottom: 20px; }
.rasa-filter-search label {
display: block;
font-size: 12px;
color: var(--color-muted);
margin-bottom: 6px;
}
.rasa-filter-search__row {
display: flex;
gap: 6px;
}
.rasa-filter-search__row input {
flex: 1 1 auto;
height: 34px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0 10px;
font-size: 12px;
background: var(--color-bg-soft);
min-width: 0;
color: var(--color-text);
}
.rasa-filter-search__row input:focus {
outline: none;
border-color: var(--color-primary);
background: #fff;
}
.rasa-filter-search__row button {
flex: 0 0 auto;
width: 34px;
height: 34px;
padding: 0;
background: var(--color-primary);
border: 0;
border-radius: var(--radius-sm);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 0;
transition: background .15s;
}
.rasa-filter-search__row button:hover { background: var(--color-primary-dark); }
.rasa-filter-search__row button svg { width: 14px; height: 14px; }
.rasa-filter-block__sub { padding-top: 8px; border-top: 1px dashed var(--color-border); }
/* Toolbar (count + sort) above product grid */
.rasa-catpage__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: 12px;
}
.rasa-catpage__count { font-size: 13px; color: var(--color-muted); }
.rasa-catpage__count text { font-weight: 600; color: var(--color-text); }
.rasa-catpage__sort {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--color-muted);
}
.rasa-catpage__sort select {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 6px 10px;
font-size: 13px;
color: var(--color-text);
background: #fff;
cursor: pointer;
}
.rasa-catpage__sort select:focus { outline: none; border-color: var(--color-primary); }
/* Featured products slot */
.rasa-catpage__featured { margin-bottom: 16px; }
/* Product grid */
.rasa-catpage__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.rasa-catpage__grid > li { min-width: 0; }
/* Empty / warning states */
.rasa-catpage__warning,
.rasa-catpage__empty {
padding: 32px 20px;
text-align: center;
color: var(--color-muted);
background: var(--color-bg);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
font-size: 14px;
}
/* Pager — restyle vanilla Html.Pager() output */
.rasa-catpage__pager {
display: flex;
justify-content: center;
margin-top: 24px;
}
.rasa-catpage__pager .pager,
.rasa-catpage__pager ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
justify-content: center;
}
.rasa-catpage__pager li a,
.rasa-catpage__pager li span,
.rasa-catpage__pager a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
color: var(--color-text);
font-size: 13px;
text-decoration: none;
transition: border-color .15s, color .15s, background .15s;
}
.rasa-catpage__pager li a:hover,
.rasa-catpage__pager a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rasa-catpage__pager li.current-page span,
.rasa-catpage__pager .current-page {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* Responsive */
@media (max-width: 1024px) {
.rasa-catpage__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.rasa-catpage__layout { grid-template-columns: 1fr; }
.rasa-catpage__sidebar { grid-column: 1; }
.rasa-catpage__main { grid-column: 1; }
.rasa-filters { position: static; max-height: none; }
}
@media (max-width: 640px) {
.rasa-catpage__grid { grid-template-columns: repeat(2, 1fr); }
.rasa-catpage__toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
.rasa-catpage__sub { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.rasa-subcat-tile__image { width: 60px; height: 60px; }
.rasa-catpage__title { font-size: 18px; }
}
/* ================================================================
Product detail page
================================================================ */
.rasa-product { padding-bottom: 32px; }
.rasa-product__main {
display: grid;
grid-template-columns: 5fr 4fr;
gap: 32px;
align-items: start;
padding: 24px 20px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin-bottom: 20px;
}
/* Gallery (RTL start / right visually) */
.rasa-product__gallery { min-width: 0; }
.rasa-product__figure {
position: relative;
aspect-ratio: 1;
background: var(--color-bg-soft);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.rasa-product__figure-link {
display: block;
width: 100%;
height: 100%;
cursor: zoom-in;
}
.rasa-product__figure img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform .25s;
}
.rasa-product__figure:hover img { transform: scale(1.05); }
.rasa-product__figure .rasa-card__badge { top: 12px; }
.rasa-product__thumbs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.rasa-product__thumbs::-webkit-scrollbar { display: none; }
.rasa-product__thumb {
flex: 0 0 auto;
width: 64px;
height: 64px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 4px;
cursor: pointer;
background: #fff;
transition: border-color .15s;
}
.rasa-product__thumb:hover { border-color: var(--color-primary-soft); }
.rasa-product__thumb.is-active { border-color: var(--color-primary); }
.rasa-product__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Info block (RTL end / left visually) */
.rasa-product__info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rasa-product__title {
margin: 0;
font-size: 22px;
font-weight: 700;
color: var(--color-text);
line-height: 1.6;
}
.rasa-product__rating { margin: -4px 0 0; }
.rasa-product__meta {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
font-size: 13px;
color: var(--color-muted);
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
.rasa-product__meta-item { display: inline-flex; gap: 6px; align-items: center; }
.rasa-product__meta-label { color: var(--color-muted-2); font-weight: 500; }
.rasa-product__meta-item a { color: var(--color-primary); font-weight: 500; }
.rasa-product__meta-item a:hover { text-decoration: underline; }
.rasa-product__short {
font-size: 13.5px;
line-height: 1.9;
color: var(--color-muted);
padding-bottom: 4px;
}
.rasa-product__availability { font-size: 13px; }
/* Buy box — attributes, price, add-to-cart, side actions */
.rasa-product__buy {
background: var(--color-bg-soft);
border-radius: var(--radius-md);
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.rasa-product__price-row {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.rasa-product__old-price {
font-size: 13px;
color: var(--color-muted-2);
text-decoration: line-through;
}
.rasa-product__price {
font-size: 22px;
font-weight: 700;
color: var(--color-primary);
}
.rasa-product__price--call { font-size: 15px; color: var(--color-muted); font-weight: 600; }
/* Reuse vanilla partials — restyle their output within our buy box */
.rasa-product__addtocart .add-to-cart,
.rasa-product__addtocart .add-to-cart-panel,
.rasa-product__addtocart .qty-box,
.rasa-product__addtocart .add-to-cart-buttons {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.rasa-product__addtocart .qty-input,
.rasa-product__addtocart input[type="text"].qty-input,
.rasa-product__addtocart input[type="number"] {
width: 72px;
height: 44px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0 10px;
font-size: 14px;
text-align: center;
background: #fff;
}
.rasa-product__addtocart .qty-input:focus { outline: none; border-color: var(--color-primary); }
.rasa-product__addtocart .qty-label { font-size: 13px; color: var(--color-muted); }
.rasa-product__addtocart .add-to-cart-button,
.rasa-product__addtocart button[id^="add-to-cart-button"],
.rasa-product__addtocart .button-1 {
flex: 1 1 auto;
min-width: 180px;
height: 44px;
background: var(--color-primary);
color: #fff;
border: 0;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background .15s;
box-shadow: 0 2px 8px rgba(227, 28, 35, .3);
}
.rasa-product__addtocart .add-to-cart-button:hover,
.rasa-product__addtocart button[id^="add-to-cart-button"]:hover,
.rasa-product__addtocart .button-1:hover { background: var(--color-primary-dark); }
.rasa-product__side-actions {
display: flex;
gap: 8px;
align-items: center;
}
.rasa-product__side-actions .add-to-wishlist-button,
.rasa-product__side-actions .compare-products-button,
.rasa-product__side-actions button {
height: 40px;
padding: 0 14px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-muted);
font-size: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: border-color .15s, color .15s;
}
.rasa-product__side-actions button:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Trust badges strip — placed as a full-width horizontal row below the
description/specs/reviews tabs card. */
.rasa-product__trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
list-style: none;
margin: 0 0 20px;
padding: 14px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.rasa-product__trust li {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
padding: 4px;
font-size: 11px;
color: var(--color-muted);
line-height: 1.4;
}
.rasa-product__trust svg {
width: 24px;
height: 24px;
color: var(--color-primary);
}
/* Tabs */
.rasa-product__tabs {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
margin-bottom: 20px;
}
.rasa-product__tab-bar {
display: flex;
gap: 2px;
background: var(--color-bg-strip);
border-bottom: 1px solid var(--color-border);
padding: 0 8px;
overflow-x: auto;
scrollbar-width: none;
}
.rasa-product__tab-bar::-webkit-scrollbar { display: none; }
.rasa-product__tab {
background: transparent;
border: 0;
padding: 14px 20px;
font-size: 13px;
font-weight: 600;
color: var(--color-muted);
cursor: pointer;
position: relative;
white-space: nowrap;
transition: color .15s;
}
.rasa-product__tab:hover { color: var(--color-text); }
.rasa-product__tab.is-active { color: var(--color-primary); }
.rasa-product__tab.is-active::after {
content: "";
position: absolute;
bottom: -1px;
left: 12px;
right: 12px;
height: 3px;
background: var(--color-primary);
border-radius: 3px 3px 0 0;
}
.rasa-product__tab-panels { padding: 20px; }
.rasa-product__tab-panel { display: none; }
.rasa-product__tab-panel.is-active { display: block; }
.rasa-product__tab-empty {
color: var(--color-muted);
font-size: 13px;
text-align: center;
padding: 24px 0;
}
.rasa-product__rich {
font-size: 14px;
line-height: 1.9;
color: var(--color-text);
}
.rasa-product__rich p { margin: 0 0 12px; }
.rasa-product__rich ul, .rasa-product__rich ol { margin: 0 0 12px; padding-inline-start: 24px; }
.rasa-product__rich img { max-width: 100%; border-radius: var(--radius-sm); }
/* Related products slot */
.rasa-product__related { margin-bottom: 20px; }
/* ================================================================
Lightbox — full-screen image viewer with prev/next.
================================================================ */
.rasa-lightbox {
position: fixed;
inset: 0;
z-index: 3000;
background: rgba(10, 10, 10, .92);
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
animation: rasa-lightbox-in .18s ease-out both;
}
.rasa-lightbox[hidden] { display: none; }
@keyframes rasa-lightbox-in { from { opacity: 0 } to { opacity: 1 } }
.rasa-lightbox__stage {
margin: 0;
max-width: min(1100px, 90vw);
max-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.rasa-lightbox__stage img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
display: block;
border-radius: var(--radius-md);
background: #fff;
}
.rasa-lightbox__close {
position: absolute;
top: 20px;
inset-inline-end: 20px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
border: 0;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.rasa-lightbox__close:hover { background: rgba(255, 255, 255, .22); }
.rasa-lightbox__close svg { width: 22px; height: 22px; }
.rasa-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
border: 0;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.rasa-lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
.rasa-lightbox__nav svg { width: 26px; height: 26px; }
.rasa-lightbox__nav--prev { inset-inline-start: 20px; }
.rasa-lightbox__nav--next { inset-inline-end: 20px; }
.rasa-lightbox__counter {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 13px;
background: rgba(0, 0, 0, .45);
padding: 4px 12px;
border-radius: 999px;
letter-spacing: .5px;
}
@media (max-width: 640px) {
.rasa-lightbox { padding: 12px; }
.rasa-lightbox__nav { width: 40px; height: 40px; }
.rasa-lightbox__nav svg { width: 20px; height: 20px; }
.rasa-lightbox__nav--prev { inset-inline-start: 8px; }
.rasa-lightbox__nav--next { inset-inline-end: 8px; }
.rasa-lightbox__close { top: 10px; inset-inline-end: 10px; }
}
/* ================================================================
Specifications table (product tab)
================================================================ */
.rasa-specs { display: flex; flex-direction: column; gap: 20px; }
.rasa-specs__group {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--color-text);
padding: 8px 12px;
background: var(--color-bg-strip);
border-inline-start: 3px solid var(--color-primary);
border-radius: var(--radius-sm);
}
.rasa-specs__table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
font-size: 13px;
}
.rasa-specs__table tr:nth-child(even) { background: var(--color-bg-soft); }
.rasa-specs__table tr:not(:last-child) th,
.rasa-specs__table tr:not(:last-child) td { border-bottom: 1px solid var(--color-border); }
.rasa-specs__key {
text-align: start;
font-weight: 600;
color: var(--color-muted);
padding: 12px 16px;
width: 32%;
background: transparent;
vertical-align: top;
}
.rasa-specs__value {
color: var(--color-text);
padding: 12px 16px;
line-height: 1.8;
}
.rasa-specs__swatch {
display: inline-block;
width: 22px;
height: 22px;
border-radius: 4px;
border: 1px solid var(--color-border);
vertical-align: middle;
margin: 0 2px;
}
.rasa-specs__sep { color: var(--color-muted-2); margin: 0 4px; }
/* ================================================================
Reviews tab
================================================================ */
.rasa-reviews { display: flex; flex-direction: column; gap: 20px; }
.rasa-reviews__list { display: flex; flex-direction: column; gap: 14px; }
.rasa-review {
padding: 16px;
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: 10px;
}
.rasa-review__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.rasa-review__author {
display: flex;
align-items: center;
gap: 10px;
}
.rasa-review__avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: 700;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex: 0 0 auto;
}
.rasa-review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rasa-review__name { font-size: 13px; font-weight: 700; color: var(--color-text); }
.rasa-review__name a { color: inherit; }
.rasa-review__name a:hover { color: var(--color-primary); }
.rasa-review__date { font-size: 11px; color: var(--color-muted-2); }
.rasa-review__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--color-text); }
.rasa-review__text { font-size: 13px; line-height: 1.9; color: var(--color-text); }
.rasa-review__extra {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 8px;
border-top: 1px dashed var(--color-border);
font-size: 12px;
color: var(--color-muted);
}
.rasa-review__extra-name { font-weight: 600; }
.rasa-review__reply {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 12px 14px;
margin-top: 6px;
}
.rasa-review__reply-header { font-size: 12px; font-weight: 700; color: var(--color-primary); margin-bottom: 4px; }
.rasa-review__reply-text { font-size: 13px; line-height: 1.8; color: var(--color-muted); }
.rasa-review__notice {
padding: 14px 16px;
background: var(--color-primary-soft);
border: 1px solid var(--color-primary-soft);
border-radius: var(--radius-md);
color: var(--color-primary-dark);
font-size: 13px;
text-align: center;
margin-bottom: 16px;
}
.rasa-review__notice--success {
background: #e8f6ee;
border-color: #c8ebd6;
color: #14733d;
}
.rasa-review__notice--error {
background: #fdecec;
border-color: #f4c8c8;
color: #a12626;
}
/* Review form */
.rasa-review-form {
padding: 20px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.rasa-review-form__title {
margin: 0 0 16px;
font-size: 15px;
font-weight: 700;
color: var(--color-text);
}
.rasa-review-form__error { color: var(--color-primary); font-size: 12px; margin-bottom: 10px; }
.rasa-review-form__field { margin-bottom: 14px; }
.rasa-review-form__field label {
display: block;
font-size: 12px;
color: var(--color-muted);
margin-bottom: 6px;
font-weight: 500;
}
.rasa-review-form__field input,
.rasa-review-form__field textarea {
width: 100%;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 10px 12px;
font-size: 13px;
font-family: inherit;
background: var(--color-bg-soft);
color: var(--color-text);
resize: vertical;
}
.rasa-review-form__field input:focus,
.rasa-review-form__field textarea:focus {
outline: none;
border-color: var(--color-primary);
background: #fff;
}
.rasa-review-form__field span[data-valmsg-for] { display: block; font-size: 11px; color: var(--color-primary); margin-top: 4px; }
/* Star radio: reverse order so leftmost star = 5, hover fills all preceding stars */
.rasa-review-form__rating { margin-bottom: 16px; }
.rasa-review-form__rating > label:first-child {
display: block;
font-size: 12px;
color: var(--color-muted);
margin-bottom: 8px;
font-weight: 500;
}
.rasa-review-form__stars {
display: inline-flex;
flex-direction: row-reverse;
gap: 4px;
}
.rasa-review-form__stars input[type="radio"] { display: none; }
.rasa-review-form__stars label {
cursor: pointer;
color: var(--color-border);
transition: color .12s;
}
.rasa-review-form__stars label svg { width: 28px; height: 28px; display: block; }
.rasa-review-form__stars input:checked ~ label,
.rasa-review-form__stars label:hover,
.rasa-review-form__stars label:hover ~ label { color: #f5b301; }
.rasa-review-form__submit {
height: 44px;
padding: 0 22px;
background: var(--color-primary);
color: #fff;
border: 0;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .15s;
box-shadow: 0 2px 8px rgba(227, 28, 35, .3);
}
.rasa-review-form__submit:hover { background: var(--color-primary-dark); }
/* ================================================================
Shopping cart page
================================================================ */
.rasa-cart { padding: 20px 0 32px; }
.rasa-cart__header { margin-bottom: 20px; }
.rasa-cart__body { display: flex; flex-direction: column; gap: 16px; transition: opacity .18s; position: relative; }
.rasa-cart__body.is-updating { opacity: .55; pointer-events: none; }
.rasa-cart__warning {
padding: 12px 16px;
background: #fef1f1;
border: 1px solid #fdd6d6;
color: var(--color-primary-dark);
border-radius: var(--radius-md);
font-size: 13px;
line-height: 1.7;
}
/* Empty state */
.rasa-cart-empty {
padding: 60px 20px;
text-align: center;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.rasa-cart-empty svg {
width: 80px;
height: 80px;
color: var(--color-muted-2);
margin: 0 auto 16px;
display: block;
}
.rasa-cart-empty h2 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--color-text); }
.rasa-cart-empty p { margin: 0 0 20px; color: var(--color-muted); font-size: 13.5px; }
.rasa-cart-empty__cta {
display: inline-block;
padding: 12px 28px;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background .15s;
}
.rasa-cart-empty__cta:hover { background: var(--color-primary-dark); color: #fff; }
/* Two-column grid: items + summary */
.rasa-cart__grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 20px;
align-items: start;
}
.rasa-cart__items { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Single cart-item row card */
.rasa-cart-item {
position: relative;
display: grid;
grid-template-columns: 96px 1fr auto;
gap: 16px;
padding: 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color .15s;
}
.rasa-cart-item:hover { border-color: var(--color-primary-soft); }
.rasa-cart-item__image {
width: 96px;
height: 96px;
background: var(--color-bg-soft);
border-radius: var(--radius-md);
overflow: hidden;
display: block;
flex: 0 0 auto;
}
.rasa-cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.rasa-cart-item__main { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-inline-end: 40px; }
.rasa-cart-item__name {
font-size: 14px;
font-weight: 600;
color: var(--color-text);
line-height: 1.6;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .15s;
}
.rasa-cart-item__name:hover { color: var(--color-primary); }
.rasa-cart-item__attrs { font-size: 12px; color: var(--color-muted); line-height: 1.6; }
.rasa-cart-item__sku,
.rasa-cart-item__vendor { font-size: 11.5px; color: var(--color-muted-2); }
.rasa-cart-item__sku span:first-child { color: var(--color-muted-2); }
.rasa-cart-item__edit { font-size: 12px; color: var(--color-primary); font-weight: 500; margin-top: 4px; }
.rasa-cart-item__edit:hover { text-decoration: underline; }
.rasa-cart-item__warnings {
list-style: none;
margin: 4px 0 0;
padding: 8px 10px;
background: #fef1f1;
border: 1px solid #fdd6d6;
border-radius: var(--radius-sm);
font-size: 12px;
color: var(--color-primary-dark);
}
/* Right side pricing block (RTL end) */
.rasa-cart-item__pricing {
display: grid;
grid-template-columns: repeat(3, minmax(90px, auto));
gap: 16px;
align-items: center;
}
.rasa-cart-item__price,
.rasa-cart-item__qty,
.rasa-cart-item__subtotal {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--color-text);
text-align: center;
}
.rasa-cart-item__price-label {
font-size: 11px;
color: var(--color-muted);
font-weight: 500;
}
.rasa-cart-item__subtotal-value { font-size: 14px; font-weight: 700; color: var(--color-primary); }
.rasa-cart-item__discount {
font-size: 11px;
color: #10b981;
background: rgba(16, 185, 129, .12);
padding: 2px 8px;
border-radius: 999px;
margin-top: 2px;
}
/* Qty stepper */
.rasa-qty-stepper {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
overflow: hidden;
height: 36px;
}
.rasa-qty-stepper button {
width: 32px;
height: 100%;
background: transparent;
border: 0;
color: var(--color-primary);
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background .15s;
line-height: 1;
}
.rasa-qty-stepper button:hover { background: var(--color-primary-soft); }
.rasa-qty-stepper button:disabled { color: var(--color-muted-2); cursor: not-allowed; background: transparent; }
.rasa-qty-stepper input {
width: 44px;
height: 100%;
border: 0;
border-inline: 1px solid var(--color-border);
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--color-text);
background: transparent;
-moz-appearance: textfield;
}
.rasa-qty-stepper input::-webkit-outer-spin-button,
.rasa-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rasa-qty-stepper input:focus { outline: none; background: var(--color-bg-soft); }
.rasa-cart-item__qty-select {
height: 36px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0 10px;
background: #fff;
font-size: 14px;
color: var(--color-text);
}
.rasa-cart-item__qty-select:focus { outline: none; border-color: var(--color-primary); }
/* Remove button positioned top-inline-end of item card */
.rasa-cart-item__remove {
position: absolute;
top: 10px;
inset-inline-end: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
background: transparent;
border: 0;
color: var(--color-muted-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
}
.rasa-cart-item__remove:hover { background: rgba(239, 68, 68, .1); color: #ef4444; }
.rasa-cart-item__remove svg { width: 18px; height: 18px; }
/* Toolbar row below items */
.rasa-cart__toolbar {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 8px 4px 4px;
flex-wrap: wrap;
}
.rasa-cart__toolbar-btn {
height: 38px;
padding: 0 16px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color .15s, color .15s;
}
.rasa-cart__toolbar-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rasa-cart__toolbar-btn--ghost { color: var(--color-muted); }
/* Collapsible sections (coupon, gift card, estimate shipping) */
.rasa-cart__section {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.rasa-cart__collapsible { padding: 0; }
.rasa-cart__collapsible summary {
padding: 14px 16px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--color-text);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.rasa-cart__collapsible summary::-webkit-details-marker { display: none; }
.rasa-cart__collapsible summary::after {
content: "+";
color: var(--color-primary);
font-size: 18px;
font-weight: 700;
line-height: 1;
transition: transform .15s;
}
.rasa-cart__collapsible[open] summary::after { content: "−"; }
.rasa-cart__section-body { padding: 4px 16px 16px; border-top: 1px solid var(--color-border); }
.rasa-cart__section-body input[type="text"],
.rasa-cart__section-body input[type="email"],
.rasa-cart__section-body input[type="number"],
.rasa-cart__section-body select {
height: 38px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0 12px;
font-size: 13px;
background: var(--color-bg-soft);
color: var(--color-text);
min-width: 220px;
}
.rasa-cart__section-body input:focus,
.rasa-cart__section-body select:focus { outline: none; border-color: var(--color-primary); background: #fff; }
.rasa-cart__section-body button {
height: 38px;
padding: 0 16px;
background: var(--color-primary);
color: #fff;
border: 0;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 600;
cursor: pointer;
margin-inline-start: 6px;
}
.rasa-cart__section-body button:hover { background: var(--color-primary-dark); }
/* Vanilla _DiscountBox / _GiftCardBox output — restyle for our theme */
.rasa-cart__section-body .coupon-box,
.rasa-cart__section-body .giftcard-box { display: flex; flex-direction: column; gap: 10px; }
.rasa-cart__section-body .coupon-box .title,
.rasa-cart__section-body .giftcard-box .title { display: none; } /* duplicate — already labels the block */
.rasa-cart__section-body .hint {
font-size: 12px;
color: var(--color-muted);
line-height: 1.7;
margin: 0;
}
.rasa-cart__section-body .coupon-code {
display: flex;
align-items: stretch;
gap: 8px;
flex-wrap: wrap;
}
.rasa-cart__section-body .coupon-code input {
flex: 1 1 200px;
margin: 0;
}
.rasa-cart__section-body .coupon-code button { margin-inline-start: 0; }
.rasa-cart__section-body .message-success,
.rasa-cart__section-body .message-failure {
font-size: 12.5px;
padding: 10px 12px;
border-radius: var(--radius-sm);
line-height: 1.6;
margin: 4px 0 0;
}
.rasa-cart__section-body .message-success {
background: rgba(16, 185, 129, .1);
color: #047857;
border: 1px solid rgba(16, 185, 129, .3);
}
.rasa-cart__section-body .message-failure {
background: #fef1f1;
color: var(--color-primary-dark);
border: 1px solid #fdd6d6;
}
.rasa-cart__section-body .current-code {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 8px 12px;
margin-top: 4px;
font-size: 12.5px;
color: var(--color-text);
}
.rasa-cart__section-body .applied-discount-code { font-weight: 600; }
.rasa-cart__section-body .remove-discount-button {
width: 26px;
height: 26px;
padding: 0;
background: transparent;
color: var(--color-muted);
border: 0;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0;
margin: 0;
position: relative;
transition: background .15s, color .15s;
}
.rasa-cart__section-body .remove-discount-button::before {
content: "×";
font-size: 18px;
font-weight: 700;
line-height: 1;
}
.rasa-cart__section-body .remove-discount-button:hover {
background: rgba(239, 68, 68, .1);
color: #ef4444;
}
/* Summary column card */
.rasa-cart__summary { min-width: 0; }
.rasa-cart__summary-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 20px;
position: sticky;
top: 20px;
}
.rasa-cart__summary-title {
margin: 0 0 16px;
font-size: 15px;
font-weight: 700;
color: var(--color-text);
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.rasa-cart__totals {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
color: var(--color-text);
}
/* Restyle vanilla OrderTotals output */
.rasa-cart__totals table { width: 100%; border-collapse: collapse; }
.rasa-cart__totals tr td { padding: 6px 0; border: 0; font-size: 13px; }
.rasa-cart__totals tr td:first-child { color: var(--color-muted); }
.rasa-cart__totals tr td:last-child { text-align: end; font-weight: 600; }
.rasa-cart__totals .order-total,
.rasa-cart__totals .total-summ,
.rasa-cart__totals .total {
font-size: 16px;
font-weight: 700;
color: var(--color-primary);
}
.rasa-cart__totals .cart-total-right,
.rasa-cart__totals .cart-total-left {
padding: 8px 0 !important;
}
.rasa-cart__totals .cart-total-right + .cart-total-left {
font-weight: 700;
}
.rasa-cart__terms {
margin-top: 14px;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-soft);
font-size: 12.5px;
color: var(--color-text);
line-height: 1.7;
transition: border-color .2s, background .2s;
}
.rasa-cart__terms label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
}
.rasa-cart__terms input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--color-primary);
margin-top: 3px;
flex: 0 0 auto;
}
.rasa-cart__terms a { color: var(--color-primary); font-weight: 600; }
.rasa-cart__terms a:hover { text-decoration: underline; }
.rasa-cart__terms.is-invalid {
border-color: var(--color-primary);
background: var(--color-primary-soft);
animation: rasa-terms-shake .35s;
}
@keyframes rasa-terms-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.rasa-cart__checkout { margin-top: 16px; }
.rasa-cart__checkout-btn {
display: block;
width: 100%;
height: 48px;
border: 0;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-md);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background .15s;
box-shadow: 0 4px 14px rgba(227, 28, 35, .32);
}
.rasa-cart__checkout-btn:hover { background: var(--color-primary-dark); }
.rasa-cart__paybuttons { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rasa-cart__trust {
list-style: none;
margin: 20px 0 0;
padding: 16px 0 0;
border-top: 1px dashed var(--color-border);
display: flex;
flex-direction: column;
gap: 10px;
}
.rasa-cart__trust li {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--color-muted);
}
.rasa-cart__trust svg { width: 20px; height: 20px; color: var(--color-primary); flex: 0 0 auto; }
.rasa-cart__tax-notice {
margin-top: 12px;
padding: 10px 14px;
background: var(--color-bg-soft);
border-radius: var(--radius-md);
font-size: 12px;
color: var(--color-muted);
line-height: 1.7;
}
@media (max-width: 900px) {
.rasa-cart__grid { grid-template-columns: 1fr; }
.rasa-cart__summary-card { position: static; }
}
@media (max-width: 640px) {
.rasa-cart-item {
grid-template-columns: 72px 1fr;
}
.rasa-cart-item__image { width: 72px; height: 72px; }
.rasa-cart-item__main { padding-inline-end: 32px; }
.rasa-cart-item__pricing {
grid-column: 1 / -1;
grid-template-columns: 1fr 1fr 1fr;
border-top: 1px solid var(--color-border);
padding-top: 12px;
margin-top: 4px;
}
.rasa-cart-item__price,
.rasa-cart-item__qty,
.rasa-cart-item__subtotal { align-items: flex-start; text-align: start; }
}
@media (max-width: 900px) {
.rasa-product__main { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
.rasa-product__title { font-size: 18px; }
.rasa-product__price { font-size: 20px; }
}
@media (max-width: 560px) {
/* Keep 3 columns even on the narrowest phones — shrink the icon/label so
the three trust badges stay on a single horizontal row. */
.rasa-product__trust { padding: 10px 6px; gap: 4px; }
.rasa-product__trust svg { width: 20px; height: 20px; }
.rasa-product__trust li { font-size: 10px; padding: 2px; }
.rasa-product__tab-panels { padding: 14px; }
.rasa-product__tab { padding: 12px 14px; font-size: 12px; }
}
/* ================================================================
Responsive
================================================================ */
@media (max-width: 1024px) {
.rasa-header__main-inner { flex-wrap: wrap; }
.rasa-search { order: 3; flex: 1 1 100%; max-width: none; }
}
@media (max-width: 640px) {
.rasa-header__top-links { gap: 12px; font-size: 11px; }
.rasa-header__support { display: none; }
.rasa-header__btn { padding: 8px 10px; font-size: 12px; }
.rasa-header__btn-label { display: none; }
.rasa-catnav__inner { gap: 12px; }
.rasa-catnav__all { padding: 8px 12px; font-size: 12px; }
}
/* ================================================================
One-page checkout
================================================================ */
.rasa-checkout { padding: 20px 0 40px; }
.rasa-checkout__header { margin-bottom: 20px; }
.rasa-checkout__grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 20px;
align-items: start;
}
.rasa-checkout__main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* Progress rail — horizontal breadcrumb with numbered nodes */
.rasa-checkout__rail {
list-style: none;
margin: 0 0 4px;
padding: 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.rasa-checkout__rail::-webkit-scrollbar { display: none; }
.rasa-checkout__rail-step {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 0;
min-width: 130px;
position: relative;
padding: 4px 6px;
}
.rasa-checkout__rail-step:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
inset-inline-end: -4px;
height: 2px;
width: 16px;
background: var(--color-border);
transform: translateY(-50%);
}
.rasa-checkout__rail-num {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-bg-soft);
color: var(--color-muted-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
border: 2px solid var(--color-border);
transition: background .18s, color .18s, border-color .18s;
}
.rasa-checkout__rail-label {
font-size: 12px;
color: var(--color-muted);
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rasa-checkout__rail-step.is-active .rasa-checkout__rail-num {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.rasa-checkout__rail-step.is-active .rasa-checkout__rail-label {
color: var(--color-text);
font-weight: 700;
}
.rasa-checkout__rail-step.is-complete .rasa-checkout__rail-num {
background: #10b981;
color: #fff;
border-color: #10b981;
font-size: 0;
}
.rasa-checkout__rail-step.is-complete .rasa-checkout__rail-num::before {
content: "\2713";
font-size: 13px;
}
/* Steps accordion */
.rasa-checkout__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rasa-step {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color .18s, box-shadow .18s;
}
.rasa-step__title {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
cursor: pointer;
user-select: none;
background: var(--color-bg);
transition: background .15s;
}
.rasa-step__title:hover { background: var(--color-bg-soft); }
.rasa-step__num {
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: 13px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.rasa-step__label {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--color-text);
flex: 1 1 auto;
}
.rasa-step__body {
padding: 6px 18px 18px;
border-top: 1px solid var(--color-border);
background: var(--color-bg-soft);
}
.rasa-step__actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-top: 16px;
margin-top: 16px;
border-top: 1px dashed var(--color-border);
}
.rasa-step__btn {
height: 42px;
padding: 0 22px;
border: 1px solid var(--color-border);
background: #fff;
color: var(--color-text);
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.rasa-step__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rasa-step__btn--primary {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
box-shadow: 0 2px 8px rgba(227, 28, 35, .3);
margin-inline-start: auto;
}
.rasa-step__btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.rasa-step__btn--pay { min-width: 200px; height: 46px; }
.rasa-step__back {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
color: var(--color-muted);
text-decoration: none;
padding: 6px 10px;
border-radius: var(--radius-sm);
transition: background .15s, color .15s;
}
.rasa-step__back:hover { background: var(--color-bg); color: var(--color-primary); }
.rasa-step__waiting {
font-size: 12px;
color: var(--color-muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.rasa-step__waiting::before {
content: "";
width: 14px;
height: 14px;
border: 2px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: rasa-hero-spin .9s linear infinite;
display: inline-block;
}
/* Restyle vanilla form output inside each step body */
.rasa-step__body .form-fields,
.rasa-step__body .fieldset { border: 0; padding: 0; margin: 0; }
.rasa-step__body .inputs,
.rasa-step__body .form-row {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.rasa-step__body label { font-size: 12.5px; color: var(--color-muted); font-weight: 500; }
.rasa-step__body input[type="text"],
.rasa-step__body input[type="email"],
.rasa-step__body input[type="tel"],
.rasa-step__body input[type="number"],
.rasa-step__body input[type="password"],
.rasa-step__body input[type="search"],
.rasa-step__body select,
.rasa-step__body textarea {
width: 100%;
height: 42px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0 12px;
font-family: inherit;
font-size: 13.5px;
background: #fff;
color: var(--color-text);
transition: border-color .15s, background .15s;
box-sizing: border-box;
}
.rasa-step__body textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.rasa-step__body input:focus,
.rasa-step__body select:focus,
.rasa-step__body textarea:focus {
outline: none;
border-color: var(--color-primary);
background: #fff;
}
.rasa-step__body input[type="checkbox"],
.rasa-step__body input[type="radio"] {
width: auto;
height: auto;
accent-color: var(--color-primary);
margin-inline-end: 6px;
}
.rasa-step__body .field-validation-error,
.rasa-step__body span[data-valmsg-for],
.rasa-step__body .message-error {
color: var(--color-primary);
font-size: 11.5px;
margin-top: 3px;
display: block;
}
.rasa-step__body select {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237d7d7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 12px center;
padding-inline-end: 32px;
appearance: none;
-webkit-appearance: none;
}
/* Two-column input rows on wider viewports */
@media (min-width: 720px) {
.rasa-step__body .enter-address,
.rasa-step__body .enter-address .form-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
}
.rasa-step__body .enter-address .inputs { margin-bottom: 0; }
.rasa-step__body .enter-address .inputs.custom-attributes,
.rasa-step__body .enter-address .inputs.email,
.rasa-step__body .enter-address .inputs.faxNumber { grid-column: 1 / -1; }
}
.rasa-step__body .select-billing-address .title,
.rasa-step__body .new-billing-address .title,
.rasa-step__body .enter-billing-address .title {
font-size: 13px;
font-weight: 700;
color: var(--color-text);
margin: 4px 0 10px;
}
.rasa-step__body .method-list,
.rasa-step__body .payment-methods,
.rasa-step__body .shipping-methods {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.rasa-step__body .method-list li,
.rasa-step__body .payment-methods li,
.rasa-step__body .shipping-methods li {
padding: 12px 14px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: border-color .15s;
}
.rasa-step__body .method-list li:hover,
.rasa-step__body .payment-methods li:hover,
.rasa-step__body .shipping-methods li:hover { border-color: var(--color-primary); }
.rasa-step__body .method-list label,
.rasa-step__body .payment-methods label,
.rasa-step__body .shipping-methods label {
flex: 1 1 auto;
color: var(--color-text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
/* Order summary column */
.rasa-checkout__summary { min-width: 0; }
.rasa-checkout__summary-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 20px;
position: sticky;
top: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.rasa-checkout__summary-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.rasa-checkout__summary-head h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text); }
.rasa-checkout__summary-edit { font-size: 12px; color: var(--color-primary); font-weight: 500; }
.rasa-checkout__summary-edit:hover { text-decoration: underline; }
.rasa-checkout__summary-totals { font-size: 13px; }
.rasa-checkout__summary-totals table { width: 100%; border-collapse: collapse; }
.rasa-checkout__summary-totals tr td { padding: 6px 0; border: 0; font-size: 13px; }
.rasa-checkout__summary-totals tr td:first-child { color: var(--color-muted); }
.rasa-checkout__summary-totals tr td:last-child { text-align: end; font-weight: 600; }
.rasa-checkout__summary-totals .order-total,
.rasa-checkout__summary-totals .total-summ,
.rasa-checkout__summary-totals .total {
font-size: 16px;
font-weight: 700;
color: var(--color-primary);
}
.rasa-checkout__safe {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
background: var(--color-bg-soft);
border-radius: var(--radius-md);
color: var(--color-muted);
}
.rasa-checkout__safe svg { width: 24px; height: 24px; color: var(--color-primary); flex: 0 0 auto; }
.rasa-checkout__safe strong { display: block; font-size: 13px; color: var(--color-text); margin-bottom: 2px; }
.rasa-checkout__safe span { font-size: 11.5px; line-height: 1.6; }
/* ================================================================
Search results page — reuses .rasa-catpage layout tokens
================================================================ */
.rasa-search-page__q { color: var(--color-primary); }
.rasa-catpage__layout--nosidebar { grid-template-columns: 1fr; }
.rasa-search-form {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 18px 20px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.rasa-search-form__main {
display: flex;
gap: 8px;
align-items: stretch;
}
.rasa-search-form__input {
flex: 1 1 auto;
height: 46px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0 14px;
background: var(--color-bg-soft);
font-size: 14px;
color: var(--color-text);
transition: background .15s, border-color .15s;
min-width: 0;
}
.rasa-search-form__input:focus {
outline: none;
background: #fff;
border-color: var(--color-primary);
}
.rasa-search-form__submit {
flex: 0 0 auto;
height: 46px;
padding: 0 26px;
background: var(--color-primary);
color: #fff;
border: 0;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .15s;
box-shadow: 0 2px 8px rgba(227, 28, 35, .3);
}
.rasa-search-form__submit:hover { background: var(--color-primary-dark); }
.rasa-search-form__toggle {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--color-muted);
}
.rasa-search-form__toggle input { accent-color: var(--color-primary); }
.rasa-search-form__toggle label { cursor: pointer; user-select: none; }
.rasa-search-form__advanced {
padding-top: 12px;
border-top: 1px dashed var(--color-border);
}
.rasa-search-form__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 16px;
}
.rasa-search-form__field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.rasa-search-form__field > label[for] {
font-size: 12px;
color: var(--color-muted);
font-weight: 500;
}
.rasa-search-form__field select {
height: 38px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0 12px;
font-size: 13px;
background: #fff;
color: var(--color-text);
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237d7d7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 12px center;
padding-inline-end: 30px;
appearance: none;
-webkit-appearance: none;
}
.rasa-search-form__field select:focus { outline: none; border-color: var(--color-primary); }
.rasa-search-form__field--check { justify-content: center; }
.rasa-search-form__field--check label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--color-text);
cursor: pointer;
padding: 8px 0;
font-weight: 500;
}
.rasa-search-form__field--check input {
width: auto;
height: auto;
accent-color: var(--color-primary);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 640px) {
.rasa-search-form { padding: 14px; }
.rasa-search-form__grid { grid-template-columns: 1fr; }
.rasa-search-form__main { flex-direction: column; }
.rasa-search-form__submit { width: 100%; }
}
/* Address picker + inline edit/delete buttons inside checkout step body */
.rasa-step__body .section { margin-bottom: 14px; }
.rasa-step__body .section:last-child { margin-bottom: 0; }
.rasa-step__body .ship-to-same-address {
padding: 10px 14px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.rasa-step__body .ship-to-same-address .selector {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
}
.rasa-step__body .ship-to-same-address label {
font-size: 13px;
color: var(--color-text);
font-weight: 500;
cursor: pointer;
margin: 0;
}
.rasa-step__body .select-billing-address > label,
.rasa-step__body .select-shipping-address > label {
display: block;
font-size: 12.5px;
color: var(--color-muted);
margin-bottom: 6px;
font-weight: 500;
}
.rasa-step__body .min-amount-warning {
display: inline-block;
background: #fef1f1;
color: var(--color-primary-dark);
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: 12px;
margin: 4px 0 8px;
border: 1px solid #fdd6d6;
}
.rasa-step__body .opc-select-address-container { display: flex; flex-direction: column; gap: 8px; }
.rasa-step__body .opc-select-address-container select { margin: 0; }
/* Edit/Delete saved-address buttons — hoisted into the actions row by
initCheckoutButtonHoist() so they sit inline with "Continue". */
#edit-billing-address-button,
#delete-billing-address-button,
#edit-shipping-address-button,
#delete-shipping-address-button,
.rasa-step__body .remove-address-button {
height: 42px;
padding: 0 16px;
background: #fff;
color: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
box-shadow: none;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
/* Override any leftover .button-1 spacing */
margin: 0;
}
#edit-billing-address-button:hover,
#edit-shipping-address-button:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Delete flavour — tinted red hint */
#delete-billing-address-button,
#delete-shipping-address-button,
.rasa-step__body .remove-address-button { color: #b71219; }
#delete-billing-address-button:hover,
#delete-shipping-address-button:hover,
.rasa-step__body .remove-address-button:hover {
border-color: #ef4444;
background: rgba(239, 68, 68, .06);
color: #ef4444;
}
@media (max-width: 900px) {
.rasa-checkout__grid { grid-template-columns: 1fr; }
.rasa-checkout__summary-card { position: static; }
}
@media (max-width: 560px) {
.rasa-checkout__rail { padding: 10px; }
.rasa-checkout__rail-step { min-width: 44px; gap: 0; }
.rasa-checkout__rail-label { display: none; }
.rasa-checkout__rail-step.is-active .rasa-checkout__rail-label { display: inline; margin-inline-start: 6px; }
.rasa-step__title { padding: 12px 14px; }
.rasa-step__body { padding: 6px 14px 14px; }
.rasa-step__btn--primary { margin-inline-start: 0; width: 100%; }
}
/* ========================================================================
Rasa theme — Customer account pages
Layout, sidebar navigation, cards, forms, tables
Restyles vanilla NopCommerce output inside .rasa-account so all other
customer/* pages (Orders, Addresses, ChangePassword, Wishlist, etc.)
inherit the look even without dedicated overrides.
======================================================================== */
.rasa-account-page { background: var(--color-bg-soft); padding: 24px 0 48px; min-height: 60vh; }
.rasa-account__layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 24px;
align-items: start;
}
.rasa-account__sidebar { position: sticky; top: 16px; }
.rasa-account__main { min-width: 0; }
/* Sidebar nav */
.rasa-account-nav {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.rasa-account-nav__title {
margin: 0;
padding: 16px 18px;
font-size: 15px;
font-weight: 700;
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
background: linear-gradient(to bottom, #fff, var(--color-bg-soft));
}
.rasa-account-nav__list { list-style: none; margin: 0; padding: 6px 0; }
.rasa-account-nav__item { margin: 0; }
.rasa-account-nav__link {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 18px;
color: var(--color-text);
text-decoration: none;
font-size: 14px;
border-inline-start: 3px solid transparent;
transition: background .15s, color .15s, border-color .15s;
}
.rasa-account-nav__link:hover { background: var(--color-bg-soft); color: var(--color-primary); }
.rasa-account-nav__icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--color-muted); display: inline-flex; }
.rasa-account-nav__icon svg { width: 100%; height: 100%; }
.rasa-account-nav__link:hover .rasa-account-nav__icon { color: var(--color-primary); }
.rasa-account-nav__label { flex: 1; }
.rasa-account-nav__chevron { width: 14px; height: 14px; color: var(--color-muted-2); opacity: 0; transition: opacity .15s; }
.rasa-account-nav__chevron svg { width: 100%; height: 100%; }
.rasa-account-nav__link:hover .rasa-account-nav__chevron { opacity: 1; }
.rasa-account-nav__item.is-active .rasa-account-nav__link {
background: var(--color-primary-soft);
color: var(--color-primary);
border-inline-start-color: var(--color-primary);
font-weight: 600;
}
.rasa-account-nav__item.is-active .rasa-account-nav__icon,
.rasa-account-nav__item.is-active .rasa-account-nav__chevron { color: var(--color-primary); opacity: 1; }
/* Page header */
.rasa-account__header {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 20px 24px;
margin-bottom: 20px;
}
.rasa-account__title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--color-text); }
.rasa-account__subtitle { margin: 0; font-size: 13px; color: var(--color-muted); }
/* Body wrapper */
.rasa-account__body { display: flex; flex-direction: column; gap: 16px; }
.rasa-account__form { display: flex; flex-direction: column; gap: 16px; }
.rasa-account__error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #b71219;
padding: 12px 16px;
border-radius: var(--radius-md);
font-size: 13px;
}
.rasa-account__error:empty { display: none; }
/* Cards used inside account pages */
.rasa-account-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.rasa-account-card__head {
padding: 16px 20px;
border-bottom: 1px solid var(--color-border);
background: linear-gradient(to bottom, #fff, var(--color-bg-soft));
}
.rasa-account-card__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text); }
.rasa-account-card__body { padding: 20px; }
/* Form grid used inside cards */
.rasa-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 20px;
}
.rasa-form-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.rasa-form-field--full { grid-column: 1 / -1; }
.rasa-form-field__label { font-size: 13px; font-weight: 500; color: var(--color-text); display: inline-block; }
.rasa-form-field__input,
.rasa-account-card select,
.rasa-account-card input[type="text"],
.rasa-account-card input[type="email"],
.rasa-account-card input[type="password"],
.rasa-account-card input[type="tel"],
.rasa-account-card input[type="number"],
.rasa-account-card textarea {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
font-family: inherit;
font-size: 14px;
color: var(--color-text);
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
.rasa-account-card textarea,
.rasa-form-field__textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
.rasa-form-field__input:focus,
.rasa-account-card input:focus,
.rasa-account-card select:focus,
.rasa-account-card textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.rasa-form-field__req { position: absolute; top: 0; inset-inline-end: 0; color: var(--color-primary); font-weight: 700; font-size: 13px; }
.rasa-form-field__error { color: #b71219; font-size: 12px; min-height: 0; }
.rasa-form-field__error:empty { display: none; }
.rasa-form-field__note { font-size: 12px; color: var(--color-muted); font-style: normal; }
.rasa-form-field__static {
padding: 10px 12px;
background: var(--color-bg-soft);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
font-size: 13px;
color: var(--color-muted);
}
.rasa-form-field__inline { display: flex; gap: 8px; }
.rasa-form-field__inline select { flex: 1; min-width: 0; }
/* Radio group */
.rasa-radio-group { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 4px; }
.rasa-radio {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; font-size: 14px; color: var(--color-text);
}
.rasa-radio input[type="radio"] {
width: 18px; height: 18px; margin: 0;
accent-color: var(--color-primary);
cursor: pointer;
}
/* Checkbox */
.rasa-checkbox {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; font-size: 14px; color: var(--color-text);
}
.rasa-checkbox input[type="checkbox"] {
width: 18px; height: 18px; margin: 0;
accent-color: var(--color-primary);
cursor: pointer;
}
.rasa-account-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rasa-account-consent { display: flex; padding: 8px 0; }
.rasa-account-consent + .rasa-account-consent { border-top: 1px dashed var(--color-border); }
/* Table (associated external auth records) */
.rasa-account-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.rasa-account-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rasa-account-table th,
.rasa-account-table td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--color-border); }
.rasa-account-table th { background: var(--color-bg-soft); font-weight: 600; color: var(--color-muted); }
.rasa-account-table tr:last-child td { border-bottom: 0; }
.rasa-account__link-danger { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.rasa-account__link-danger:hover { color: var(--color-primary-dark); text-decoration: underline; }
.rasa-account__note-block { margin-top: 12px; padding: 12px 14px; background: var(--color-bg-soft); border-radius: var(--radius-md); font-size: 13px; color: var(--color-muted); }
.rasa-account__note-block a { color: var(--color-primary); text-decoration: none; margin-inline-start: 6px; }
.rasa-account__note-block a:hover { text-decoration: underline; }
/* Action row (Save button) */
.rasa-account__actions {
display: flex; justify-content: flex-end; gap: 12px;
padding: 4px 0;
}
.rasa-account__btn {
min-width: 160px;
height: 44px;
padding: 0 24px;
border-radius: var(--radius-md);
border: 1px solid transparent;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.rasa-account__btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.rasa-account__btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.rasa-account__btn--ghost { background: #fff; color: var(--color-text); border-color: var(--color-border); }
.rasa-account__btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* --- Compatibility: restyle vanilla output (.fieldset, .buttons, etc.)
so all other customer pages inherit the look until dedicated overrides
are written for them. --- */
.rasa-account-page .page.account-page > .page-title {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 18px 22px;
margin: 0 0 16px;
}
.rasa-account-page .page.account-page > .page-title h1 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: var(--color-text);
line-height: 1.4;
}
.rasa-account-page .page.account-page .page-body { display: flex; flex-direction: column; gap: 16px; }
/* Empty state (RFQ + reviews "no-data") */
.rasa-account-page .no-data {
background: #fff;
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
padding: 40px 24px;
text-align: center;
color: var(--color-muted);
font-size: 14px;
}
/* Generic .section card (RFQ requests/quotes) */
.rasa-account-page .section {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.rasa-account-page .section .title,
.rasa-account-page .section .request-title,
.rasa-account-page .section h2 {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--color-text);
}
.rasa-account-page .request-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-border);
}
.rasa-account-page .section ul.info {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px 20px;
font-size: 13px;
color: var(--color-muted);
}
.rasa-account-page .section ul.info li {
display: flex;
align-items: center;
gap: 6px;
}
.rasa-account-page .section ul.info li span {
color: var(--color-text);
font-weight: 500;
}
.rasa-account-page .section .buttons {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 0;
border-top: 1px solid var(--color-border);
padding-top: 12px;
}
/* Product reviews list */
.rasa-account-page .product-review-item {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.rasa-account-page .product-review-item .review-item-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
}
.rasa-account-page .product-review-item .review-title strong {
font-size: 15px;
font-weight: 700;
color: var(--color-text);
}
.rasa-account-page .product-review-item .review-content .review-text {
font-size: 14px;
color: var(--color-text);
line-height: 1.8;
}
.rasa-account-page .product-review-item .review-info {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-top: 10px;
border-top: 1px dashed var(--color-border);
font-size: 13px;
color: var(--color-muted);
}
.rasa-account-page .product-review-item .review-info label {
color: var(--color-muted);
margin: 0;
margin-inline-end: 4px;
}
.rasa-account-page .product-review-item .review-info a {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
}
.rasa-account-page .product-review-item .review-info a:hover { text-decoration: underline; }
.rasa-account-page .product-review-item .review-info .separator { color: var(--color-muted-2); }
/* Star rating box (5-star bar) */
.rasa-account-page .product-review-box .rating {
display: inline-block;
width: 90px;
height: 16px;
position: relative;
background: linear-gradient(90deg, var(--color-border) 0, var(--color-border) 100%);
background-size: 18px 16px;
background-image: repeating-linear-gradient(90deg, var(--color-border) 0 16px, transparent 16px 18px);
border-radius: 3px;
overflow: hidden;
vertical-align: middle;
}
.rasa-account-page .product-review-box .rating::before {
content: "☆☆☆☆☆";
position: absolute;
top: 0; inset-inline-start: 0;
line-height: 16px;
font-size: 16px;
letter-spacing: 2px;
color: #e2c000;
z-index: 1;
}
.rasa-account-page .product-review-box .rating > div {
height: 100%;
background: transparent;
position: relative;
z-index: 2;
overflow: hidden;
white-space: nowrap;
}
.rasa-account-page .product-review-box .rating > div::before {
content: "★★★★★";
position: absolute;
top: 0; inset-inline-start: 0;
line-height: 16px;
font-size: 16px;
letter-spacing: 2px;
color: #f5b301;
}
.rasa-account-page .review-type-rating-ext {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--color-muted);
margin-top: 6px;
}
.rasa-account-page .review-type-rating-ext .review-title i { font-style: normal; color: var(--color-text); }
/* Reply block */
.rasa-account-page .product-review-item .reply {
background: var(--color-bg-soft);
border-inline-start: 3px solid var(--color-primary);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-top: 4px;
}
.rasa-account-page .product-review-item .reply-header {
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 6px;
}
.rasa-account-page .product-review-item .reply-text {
font-size: 13px;
color: var(--color-text);
line-height: 1.7;
}
/* Pager */
.rasa-account-page .pager {
display: flex;
justify-content: center;
padding: 8px 0;
}
.rasa-account-page .pager ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.rasa-account-page .pager ul li a,
.rasa-account-page .pager ul li span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
color: var(--color-text);
text-decoration: none;
font-size: 13px;
transition: border-color .15s, color .15s, background .15s;
}
.rasa-account-page .pager ul li a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rasa-account-page .pager ul li.current-page span,
.rasa-account-page .pager ul li span.current-page {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.rasa-account-page .page.account-page .fieldset {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 0;
margin: 0;
overflow: hidden;
}
.rasa-account-page .page.account-page .fieldset > .title {
margin: 0;
padding: 16px 20px;
font-size: 15px;
font-weight: 700;
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
background: linear-gradient(to bottom, #fff, var(--color-bg-soft));
}
.rasa-account-page .page.account-page .form-fields { padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.rasa-account-page .page.account-page .form-fields .inputs { display: flex; flex-direction: column; gap: 6px; position: relative; }
.rasa-account-page .page.account-page .form-fields .inputs.date-of-birth { grid-column: 1 / -1; }
.rasa-account-page .page.account-page .inputs > label {
font-size: 13px; font-weight: 500; color: var(--color-text);
}
.rasa-account-page .page.account-page .inputs input:not([type="checkbox"]):not([type="radio"]),
.rasa-account-page .page.account-page .inputs select,
.rasa-account-page .page.account-page .inputs textarea {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
font-family: inherit;
font-size: 14px;
color: var(--color-text);
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
.rasa-account-page .page.account-page .inputs textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
.rasa-account-page .page.account-page .inputs input:focus,
.rasa-account-page .page.account-page .inputs select:focus,
.rasa-account-page .page.account-page .inputs textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.rasa-account-page .page.account-page .inputs .required { color: var(--color-primary); font-weight: 700; }
.rasa-account-page .page.account-page .field-validation-error,
.rasa-account-page .page.account-page .message-error { color: #b71219; font-size: 12px; }
.rasa-account-page .page.account-page .buttons {
display: flex; justify-content: flex-end; gap: 12px; padding: 4px 0;
}
.rasa-account-page .page.account-page .button-1,
.rasa-account-page .page.account-page input[type="submit"].button-1 {
min-width: 160px; height: 44px; padding: 0 24px;
background: var(--color-primary); color: #fff;
border: 1px solid var(--color-primary); border-radius: var(--radius-md);
font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
transition: background .15s, border-color .15s;
}
.rasa-account-page .page.account-page .button-1:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.rasa-account-page .page.account-page .button-2 {
min-width: 120px; height: 40px; padding: 0 18px;
background: #fff; color: var(--color-text);
border: 1px solid var(--color-border); border-radius: var(--radius-md);
font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
transition: border-color .15s, color .15s;
}
.rasa-account-page .page.account-page .button-2:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* Date-picker inline layout (day/month/year selects) */
.rasa-account-page .page.account-page .date-of-birth select { display: inline-block; width: auto; min-width: 90px; margin-inline-end: 6px; }
/* --------------------------------------------------------------------------
Extra compat for vanilla account pages that still emit legacy markup
(CustomerRewardPoints, CustomerRecurringPayments, DownloadableProducts,
Avatar, CustomerSubscriptions, ChangePassword, Addresses, etc.).
Restyles .section / .data-table / .no-data / .buttons / .description
so the page inherits the rasa look without a dedicated override.
-------------------------------------------------------------------------- */
.rasa-account-page .page.account-page .section {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
}
.rasa-account-page .page.account-page .section > .title,
.rasa-account-page .page.account-page .section > h2.title {
margin: -18px -20px 12px;
padding: 14px 20px;
background: linear-gradient(to bottom, #fff, var(--color-bg-soft));
border-bottom: 1px solid var(--color-border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
font-size: 15px;
font-weight: 700;
color: var(--color-text);
}
.rasa-account-page .page.account-page .description {
padding: 12px 16px;
background: var(--color-bg-soft);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
font-size: 13px;
color: var(--color-muted);
line-height: 1.7;
}
.rasa-account-page .page.account-page .no-data,
.rasa-account-page .page.account-page .no-result {
background: #fff;
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
padding: 40px 24px;
text-align: center;
color: var(--color-muted);
font-size: 14px;
}
.rasa-account-page .page.account-page .table-wrapper {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow-x: auto;
background: #fff;
}
.rasa-account-page .page.account-page .data-table,
.rasa-account-page .page.account-page table.cart {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin: 0;
}
.rasa-account-page .page.account-page .data-table th,
.rasa-account-page .page.account-page .data-table td,
.rasa-account-page .page.account-page table.cart th,
.rasa-account-page .page.account-page table.cart td {
padding: 10px 14px;
text-align: start;
border-bottom: 1px solid var(--color-border);
}
.rasa-account-page .page.account-page .data-table th,
.rasa-account-page .page.account-page table.cart th {
background: var(--color-bg-soft);
font-weight: 600;
color: var(--color-muted);
white-space: nowrap;
}
.rasa-account-page .page.account-page .data-table tr:last-child td,
.rasa-account-page .page.account-page table.cart tr:last-child td { border-bottom: 0; }
.rasa-account-page .page.account-page .data-table a,
.rasa-account-page .page.account-page table.cart a {
color: var(--color-primary);
text-decoration: none;
}
.rasa-account-page .page.account-page .data-table a:hover,
.rasa-account-page .page.account-page table.cart a:hover { text-decoration: underline; }
.rasa-account-page .page.account-page .td-title {
display: none; /* mobile-only responsive labels — hide on desktop */
font-size: 11px;
color: var(--color-muted);
margin-inline-end: 6px;
}
.rasa-account-page .page.account-page .buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 12px 0 0;
margin-top: 4px;
}
.rasa-account-page .page.account-page .info-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
}
.rasa-account-page .page.account-page .info-list li { margin: 0; }
.rasa-account-page .page.account-page .info-list .label {
color: var(--color-muted);
margin-inline-end: 6px;
}
.rasa-account-page .page.account-page .reward-points-overview,
.rasa-account-page .page.account-page .reward-points-history { margin-top: 12px; }
/* Downloadable products download link */
.rasa-account-page .page.account-page .download a {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: var(--radius-sm);
font-size: 12px;
text-decoration: none;
font-weight: 500;
}
.rasa-account-page .page.account-page .download a:hover {
background: var(--color-primary);
color: #fff;
}
/* Avatar page upload form */
.rasa-account-page .page.account-page .avatar-image img {
max-width: 180px;
border-radius: 50%;
border: 3px solid var(--color-border);
padding: 4px;
background: #fff;
}
.rasa-account-page .page.account-page input[type="file"] {
padding: 10px 12px;
background: var(--color-bg-soft);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
cursor: pointer;
font-size: 13px;
}
/* Card head — row variant used by RFQ/review cards */
.rasa-account-card__head--row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.rasa-account-card__head--row .rasa-account__btn { min-width: 110px; height: 36px; font-size: 13px; padding: 0 16px; }
/* Empty state block (RFQ/reviews) */
.rasa-account-empty {
background: #fff;
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
padding: 48px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.rasa-account-empty svg { width: 56px; height: 56px; color: var(--color-muted-2); margin-bottom: 4px; }
.rasa-account-empty h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-text); }
.rasa-account-empty p { margin: 0; font-size: 13px; color: var(--color-muted); }
/* Meta list (key/value rows inside a card) */
.rasa-account-meta {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px 24px;
}
.rasa-account-meta li { display: flex; flex-direction: column; gap: 4px; }
.rasa-account-meta__key { font-size: 12px; color: var(--color-muted); }
.rasa-account-meta__val { font-size: 14px; color: var(--color-text); font-weight: 500; }
/* Status badge / pill */
.rasa-account-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
align-self: flex-start;
}
.rasa-account-badge--muted { background: var(--color-bg-soft); color: var(--color-muted); }
/* Review card */
.rasa-review-card__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rasa-review-card__title strong { font-size: 15px; color: var(--color-text); }
.rasa-review-card__text { font-size: 14px; line-height: 1.9; color: var(--color-text); }
.rasa-review-card__subrating {
display: flex; align-items: center; gap: 12px;
padding: 8px 12px;
background: var(--color-bg-soft);
border-radius: var(--radius-md);
margin-top: 8px;
font-size: 13px;
}
.rasa-review-card__subrating-name { color: var(--color-muted); flex: 1; }
.rasa-review-card__meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding-top: 12px;
border-top: 1px dashed var(--color-border);
font-size: 13px; color: var(--color-muted);
margin-top: 12px;
}
.rasa-review-card__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.rasa-review-card__meta-item a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.rasa-review-card__meta-item a:hover { text-decoration: underline; }
.rasa-review-card__meta-sep { color: var(--color-muted-2); }
.rasa-review-card__reply {
background: var(--color-bg-soft);
border-inline-start: 3px solid var(--color-primary);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-top: 12px;
}
.rasa-review-card__reply-head { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-bottom: 6px; }
.rasa-review-card__reply-text { font-size: 13px; line-height: 1.7; color: var(--color-text); }
/* Star rating bar (0–100% fill) */
.rasa-review-card__stars {
display: inline-block;
line-height: 0;
}
.rasa-review-card__stars-track {
position: relative;
width: 100px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 1l2.6 5.3 5.9.9-4.3 4.2 1 5.9L10 14.5 4.8 17.3l1-5.9L1.5 7.2l5.9-.9z' fill='none' stroke='%23dcdcdc' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: 20px 18px;
background-repeat: repeat-x;
}
.rasa-review-card__stars-fill {
position: absolute;
top: 0;
inset-inline-start: 0;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 1l2.6 5.3 5.9.9-4.3 4.2 1 5.9L10 14.5 4.8 17.3l1-5.9L1.5 7.2l5.9-.9z' fill='%23f5b301' stroke='%23f5b301' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: 20px 18px;
background-repeat: repeat-x;
}
/* Rasa pager */
.rasa-pager { display: flex; justify-content: center; padding: 8px 0; }
.rasa-pager .pager,
.rasa-pager > ul { display: flex; justify-content: center; }
.rasa-pager ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.rasa-pager li a,
.rasa-pager li span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
color: var(--color-text);
text-decoration: none;
font-size: 13px;
transition: border-color .15s, color .15s, background .15s;
}
.rasa-pager li a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rasa-pager li.current-page span,
.rasa-pager li span.current-page {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* Header row variant (title on start, actions on end) */
.rasa-account__header--row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.rasa-account__header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.rasa-account__header-actions .rasa-form-field__label { font-size: 12px; color: var(--color-muted); }
.rasa-account__filter { min-width: 180px; }
/* Card action row (buttons at end of card body) */
.rasa-account-card__actions {
display: flex;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--color-border);
}
.rasa-account-card__actions .rasa-account__btn {
min-width: 120px;
height: 38px;
font-size: 13px;
padding: 0 18px;
}
/* Danger button variant */
.rasa-account__btn--danger {
background: #fff;
color: #b71219;
border-color: #f8c9cc;
}
.rasa-account__btn--danger:hover {
background: rgba(239, 68, 68, .06);
border-color: #ef4444;
color: #ef4444;
}
/* Order card */
.rasa-order-card__title-wrap { display: flex; flex-direction: column; gap: 2px; }
.rasa-order-card__label { font-size: 12px; color: var(--color-muted); font-weight: 400; }
.rasa-order-card__total { color: var(--color-primary); font-weight: 700; font-size: 15px; }
/* Order status colors (map to nop's OrderStatus enum lowercase) */
.rasa-order-status--complete { background: #e6f6ea; color: #12833f; }
.rasa-order-status--processing { background: #fff3e2; color: #b56a00; }
.rasa-order-status--pending { background: #eef2ff; color: #4c5fdb; }
.rasa-order-status--cancelled { background: #fdecec; color: #b71219; }
/* =========================
Wishlist page
========================= */
.rasa-wishlist-page { background: var(--color-bg-soft); padding: 12px 0 48px; }
.rasa-wishlist__custom-name { color: var(--color-muted); font-weight: 500; margin-inline-start: 6px; font-size: 14px; }
.rasa-wishlist__tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0 20px;
padding: 10px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.rasa-wishlist__tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #fff;
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.rasa-wishlist__tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rasa-wishlist__tab.is-active {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.rasa-wishlist__tab--add { border-style: dashed; color: var(--color-primary); border-color: var(--color-primary-soft); }
.rasa-wishlist__tab--add svg { width: 14px; height: 14px; }
.rasa-wishlist__grid { display: flex; flex-direction: column; gap: 12px; }
.rasa-wishlist-item {
display: grid;
grid-template-columns: 96px 1.5fr 1fr auto;
gap: 16px;
align-items: start;
padding: 16px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
position: relative;
}
.rasa-wishlist-item__image {
display: block;
width: 96px;
height: 96px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: #fff;
}
.rasa-wishlist-item__image img { width: 100%; height: 100%; object-fit: contain; }
.rasa-wishlist-item__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rasa-wishlist-item__name {
font-size: 14px;
font-weight: 600;
color: var(--color-text);
text-decoration: none;
line-height: 1.5;
}
.rasa-wishlist-item__name:hover { color: var(--color-primary); }
.rasa-wishlist-item__attrs { font-size: 12px; color: var(--color-muted); }
.rasa-wishlist-item__sku { font-size: 12px; color: var(--color-muted); display: flex; gap: 4px; }
.rasa-wishlist-item__edit { align-self: flex-start; font-size: 12px; color: var(--color-primary); text-decoration: none; }
.rasa-wishlist-item__edit:hover { text-decoration: underline; }
.rasa-wishlist-item__warnings { list-style: none; margin: 0; padding: 0; font-size: 12px; color: #b71219; }
.rasa-wishlist-item__move { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.rasa-wishlist-item__move label { font-size: 12px; color: var(--color-muted); }
.rasa-wishlist-item__move select {
padding: 4px 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12px;
background: #fff;
}
.rasa-wishlist-item__pricing {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
align-content: start;
}
.rasa-wishlist-item__label { display: block; font-size: 11px; color: var(--color-muted); margin-bottom: 2px; }
.rasa-wishlist-item__price,
.rasa-wishlist-item__qty,
.rasa-wishlist-item__subtotal { font-size: 13px; color: var(--color-text); }
.rasa-wishlist-item__subtotal-value { color: var(--color-primary); font-weight: 700; }
.rasa-wishlist-item__discount { display: block; margin-top: 3px; font-size: 11px; color: #12833f; }
.rasa-wishlist-item__qty-select,
.rasa-wishlist-item__qty-input {
width: 72px;
height: 32px;
padding: 0 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
font-size: 13px;
}
.rasa-wishlist-item__add {
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--color-text);
cursor: pointer;
margin-top: 4px;
}
.rasa-wishlist-item__add input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; }
.rasa-wishlist-item__remove {
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
width: 32px;
height: 32px;
padding: 0;
cursor: pointer;
color: var(--color-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color .15s, color .15s, background .15s;
align-self: start;
}
.rasa-wishlist-item__remove svg { width: 16px; height: 16px; }
.rasa-wishlist-item__remove:hover { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, .05); }
.rasa-wishlist__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
margin-top: 16px;
padding: 14px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.rasa-wishlist__share {
margin-top: 16px;
padding: 12px 16px;
background: #fff;
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
font-size: 13px;
color: var(--color-muted);
}
.rasa-wishlist__share-link {
color: var(--color-primary);
text-decoration: none;
font-size: 12px;
word-break: break-all;
}
.rasa-wishlist__share-link:hover { text-decoration: underline; }
/* Responsive */
@media (max-width: 900px) {
.rasa-account__layout { grid-template-columns: 1fr; }
.rasa-account__sidebar { position: static; }
.rasa-form-grid,
.rasa-account-page .page.account-page .form-fields { grid-template-columns: 1fr; }
.rasa-wishlist-item { grid-template-columns: 80px 1fr auto; }
.rasa-wishlist-item__pricing { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rasa-wishlist-item__image { width: 80px; height: 80px; }
}
@media (max-width: 560px) {
.rasa-wishlist-item { grid-template-columns: 1fr auto; }
.rasa-wishlist-item__image { grid-row: span 2; }
.rasa-wishlist-item__pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rasa-account__header--row { flex-direction: column; align-items: stretch; }
.rasa-account__header-actions { justify-content: space-between; }
}
@media (max-width: 560px) {
.rasa-account__header { padding: 16px 18px; }
.rasa-account-card__body,
.rasa-account-page .page.account-page .form-fields { padding: 16px; }
.rasa-account__actions { justify-content: stretch; }
.rasa-account__btn { flex: 1; min-width: 0; }
}
/* ========================================================================
Rasa theme — Static / content pages
TopicDetails, ContactUs, Sitemap, Blog, News, CompareProducts,
RecentlyViewedProducts, NewProducts — reachable from footer links.
======================================================================== */
.rasa-content-page {
background: var(--color-bg-soft);
padding: 12px 0 48px;
min-height: 60vh;
}
.rasa-content-page .rasa-container { }
/* Hero header block */
.rasa-content__hero {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 20px 24px;
margin: 12px 0 20px;
}
.rasa-content__hero--row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.rasa-content__hero-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--color-text); }
.rasa-content__hero-subtitle { margin: 0; font-size: 13px; color: var(--color-muted); line-height: 1.7; }
.rasa-content__hero-rss {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
color: #b56a00;
border: 1px solid #ffd991;
border-radius: var(--radius-md);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background .15s, border-color .15s;
}
.rasa-content__hero-rss:hover { background: #fff8ea; border-color: #f0a626; }
.rasa-content__hero-rss svg { width: 14px; height: 14px; }
/* Card wrapper for content */
.rasa-content-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 24px;
margin-bottom: 16px;
}
.rasa-content-card__title-bar {
padding: 14px 20px;
border-bottom: 1px solid var(--color-border);
background: linear-gradient(to bottom, #fff, var(--color-bg-soft));
margin: -24px -24px 20px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.rasa-content-card__title-bar h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text); }
.rasa-content-card__body { }
.rasa-content-card__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text); }
.rasa-content__header { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.rasa-content__title { margin: 0; font-size: 24px; font-weight: 700; color: var(--color-text); line-height: 1.4; }
.rasa-content__body { font-size: 15px; line-height: 1.9; color: var(--color-text); }
.rasa-content__body p { margin: 0 0 12px; }
.rasa-content__body h1, .rasa-content__body h2, .rasa-content__body h3, .rasa-content__body h4 {
margin: 24px 0 12px; color: var(--color-text); font-weight: 700;
}
.rasa-content__body h2 { font-size: 20px; }
.rasa-content__body h3 { font-size: 17px; }
.rasa-content__body h4 { font-size: 15px; }
.rasa-content__body ul, .rasa-content__body ol { margin: 0 0 12px; padding-inline-start: 24px; }
.rasa-content__body li { margin: 4px 0; }
.rasa-content__body a { color: var(--color-primary); text-decoration: none; }
.rasa-content__body a:hover { text-decoration: underline; }
.rasa-content__body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.rasa-content__body blockquote {
margin: 12px 0;
padding: 12px 16px;
background: var(--color-bg-soft);
border-inline-start: 3px solid var(--color-primary);
border-radius: var(--radius-md);
color: var(--color-muted);
font-style: italic;
}
.rasa-content__error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #b71219;
padding: 10px 14px;
border-radius: var(--radius-md);
font-size: 13px;
margin-top: 12px;
}
/* Password-protected topic form */
.rasa-content-card--auth .rasa-content__auth-row {
display: flex; gap: 10px; align-items: center; margin-top: 12px;
}
.rasa-content-card--auth .rasa-form-field__input { flex: 1; }
/* ========== Contact us ========== */
.rasa-contact__layout {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 20px;
align-items: start;
}
.rasa-contact__form-card { }
.rasa-contact__form { display: flex; flex-direction: column; gap: 16px; }
.rasa-contact__success {
text-align: center;
padding: 32px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.rasa-contact__success svg { width: 56px; height: 56px; color: #12833f; }
.rasa-contact__success h2 { margin: 0; font-size: 18px; color: #12833f; }
.rasa-contact__success p { margin: 0; color: var(--color-muted); font-size: 14px; }
.rasa-contact__info-card { padding: 20px; }
.rasa-contact__info-card .rasa-content-card__title { margin-bottom: 14px; }
.rasa-contact__info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rasa-contact__info-list li { display: flex; gap: 12px; align-items: flex-start; }
.rasa-contact__info-icon {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-primary-soft);
border-radius: var(--radius-md);
color: var(--color-primary);
}
.rasa-contact__info-icon svg { width: 18px; height: 18px; }
.rasa-contact__info-key { display: block; font-size: 12px; color: var(--color-muted); margin-bottom: 2px; }
.rasa-contact__info-val { display: block; font-size: 14px; color: var(--color-text); font-weight: 500; }
/* ========== Sitemap ========== */
.rasa-sitemap__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.rasa-sitemap__group { padding: 0; overflow: hidden; }
.rasa-sitemap__group .rasa-content-card__title-bar { margin: 0; }
.rasa-sitemap__list { list-style: none; margin: 0; padding: 8px 0; }
.rasa-sitemap__list li { margin: 0; }
.rasa-sitemap__list a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
color: var(--color-text);
text-decoration: none;
font-size: 13px;
border-inline-start: 3px solid transparent;
transition: background .15s, color .15s, border-color .15s;
}
.rasa-sitemap__list a:hover {
background: var(--color-bg-soft);
color: var(--color-primary);
border-inline-start-color: var(--color-primary);
}
.rasa-sitemap__list a svg { width: 12px; height: 12px; color: var(--color-muted-2); flex: 0 0 12px; }
.rasa-sitemap__list a:hover svg { color: var(--color-primary); }
/* ========== Blog / News grid — scoped to /blog and /news pages only
(homepage uses a 3-col grid variant defined in Section 9) ========== */
.rasa-content-page .rasa-blog__grid { display: flex; flex-direction: column; gap: 16px; }
.rasa-blog-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 12px;
transition: box-shadow .15s, border-color .15s;
}
.rasa-blog-card:hover { border-color: var(--color-primary-soft); box-shadow: var(--shadow-md); }
.rasa-blog-card__head { display: flex; flex-direction: column; gap: 6px; }
.rasa-blog-card__date { font-size: 12px; color: var(--color-muted); font-weight: 500; }
.rasa-blog-card__title { text-decoration: none; color: var(--color-text); }
.rasa-blog-card__title h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; }
.rasa-blog-card__title:hover h2 { color: var(--color-primary); }
.rasa-blog-card__body { font-size: 14px; color: var(--color-muted); line-height: 1.9; }
.rasa-blog-card__body p { margin: 0; }
.rasa-blog-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding-top: 12px;
border-top: 1px dashed var(--color-border);
}
.rasa-blog-card__tags { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.rasa-blog-card__tags a {
display: inline-block;
padding: 4px 10px;
background: var(--color-bg-soft);
color: var(--color-muted);
border-radius: 999px;
font-size: 11px;
text-decoration: none;
transition: background .15s, color .15s;
}
.rasa-blog-card__tags a:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.rasa-blog-card__actions { display: flex; gap: 14px; align-items: center; margin-inline-start: auto; }
.rasa-blog-card__comments {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; color: var(--color-muted); text-decoration: none;
}
.rasa-blog-card__comments:hover { color: var(--color-primary); }
.rasa-blog-card__comments svg { width: 14px; height: 14px; }
.rasa-blog-card__more { font-size: 13px; color: var(--color-primary); text-decoration: none; font-weight: 600; }
.rasa-blog-card__more:hover { text-decoration: underline; }
/* Blog post single */
.rasa-blog-post { padding: 24px 28px; }
.rasa-blog-post__head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.rasa-blog-post__date {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--color-muted);
}
.rasa-blog-post__date svg { width: 14px; height: 14px; }
.rasa-blog-post__body { padding: 4px 0; }
.rasa-blog-post__tags {
margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--color-border);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rasa-blog-post__tags-label { font-size: 12px; color: var(--color-muted); }
.rasa-blog-post__tags ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.rasa-blog-post__tags ul a {
display: inline-block; padding: 4px 10px;
background: var(--color-bg-soft); color: var(--color-muted);
border-radius: 999px; font-size: 12px; text-decoration: none;
}
.rasa-blog-post__tags ul a:hover { background: var(--color-primary-soft); color: var(--color-primary); }
/* Comments */
.rasa-comments__notice {
text-align: center;
padding: 16px;
background: var(--color-bg-soft);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
font-size: 13px;
color: var(--color-muted);
margin-top: 12px;
}
.rasa-comments__success {
background: #e6f6ea; color: #12833f;
padding: 10px 14px; border-radius: var(--radius-md);
margin-bottom: 12px; font-size: 13px;
}
.rasa-comments__form { display: flex; flex-direction: column; gap: 12px; }
.rasa-comments-list__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.rasa-comment { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--color-border); }
.rasa-comment:last-child { border-bottom: 0; }
.rasa-comment__avatar {
flex: 0 0 40px;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--color-primary-soft);
color: var(--color-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
overflow: hidden;
}
.rasa-comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rasa-comment__body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rasa-comment__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rasa-comment__name { font-size: 13px; font-weight: 600; color: var(--color-text); text-decoration: none; }
.rasa-comment__name:hover { color: var(--color-primary); }
.rasa-comment__time { font-size: 11px; color: var(--color-muted); }
.rasa-comment__title { font-size: 13px; font-weight: 600; color: var(--color-text); }
.rasa-comment__text { font-size: 13px; line-height: 1.8; color: var(--color-text); }
/* ========== Compare products ========== */
.rasa-compare__card { padding: 0; overflow: hidden; }
.rasa-compare__wrap { overflow-x: auto; }
.rasa-compare__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rasa-compare__row { border-bottom: 1px solid var(--color-border); }
.rasa-compare__row:last-child { border-bottom: 0; }
.rasa-compare__key {
padding: 12px 16px;
background: var(--color-bg-soft);
color: var(--color-muted);
font-weight: 600;
font-size: 12px;
white-space: nowrap;
text-align: start;
width: 140px;
}
.rasa-compare__cell { padding: 12px 14px; text-align: center; vertical-align: top; color: var(--color-text); }
.rasa-compare__cell--picture { padding: 20px 14px; }
.rasa-compare__cell--picture img { max-width: 140px; max-height: 140px; object-fit: contain; }
.rasa-compare__cell--name a {
color: var(--color-text); font-weight: 600; text-decoration: none;
}
.rasa-compare__cell--name a:hover { color: var(--color-primary); }
.rasa-compare__cell--price { color: var(--color-primary); font-weight: 700; font-size: 14px; }
.rasa-compare__row--group .rasa-compare__key {
background: var(--color-primary-soft); color: var(--color-primary);
font-weight: 700; width: auto;
}
.rasa-compare__remove {
background: #fff;
border: 1px solid var(--color-border);
color: var(--color-muted);
width: 32px; height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.rasa-compare__remove svg { width: 14px; height: 14px; }
.rasa-compare__remove:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.05); }
/* ========== Product grid (recently viewed, new products) ========== */
.rasa-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.rasa-product-grid__cell { min-width: 0; }
/* Responsive */
@media (max-width: 900px) {
.rasa-contact__layout { grid-template-columns: 1fr; }
.rasa-content__hero--row { flex-direction: column; align-items: stretch; }
.rasa-content__hero-rss { align-self: flex-start; }
}
@media (max-width: 560px) {
.rasa-content-card { padding: 18px; }
.rasa-content-card__title-bar { margin: -18px -18px 16px; padding: 12px 16px; }
.rasa-blog-post { padding: 20px; }
.rasa-compare__key { width: 100px; padding: 10px 12px; font-size: 11px; }
.rasa-compare__cell { padding: 10px; }
.rasa-compare__cell--picture img { max-width: 100px; max-height: 100px; }
}
/* ========================================================================
Rasa theme — Auth pages (Login, Register, PasswordRecovery, ApplyVendor)
======================================================================== */
.rasa-auth__layout {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 20px;
align-items: start;
max-width: 1000px;
margin: 0 auto;
}
.rasa-auth__layout--single { grid-template-columns: minmax(0, 520px); justify-content: center; }
.rasa-auth-card { padding: 32px 32px 24px; }
.rasa-auth-card__head { text-align: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.rasa-auth-card__icon {
width: 56px; height: 56px; margin: 0 auto 12px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: 50%;
}
.rasa-auth-card__icon svg { width: 24px; height: 24px; }
.rasa-auth-card__title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--color-text); }
.rasa-auth-card__subtitle { margin: 0; font-size: 13px; color: var(--color-muted); line-height: 1.7; }
.rasa-auth-card__form { display: flex; flex-direction: column; gap: 14px; }
.rasa-auth-card__notice {
background: var(--color-primary-soft);
border: 1px solid #f8c9cc;
color: var(--color-primary-dark);
padding: 10px 14px;
border-radius: var(--radius-md);
font-size: 13px;
text-align: center;
}
.rasa-auth-card__password { position: relative; }
.rasa-auth-card__password .rasa-form-field__input { padding-inline-end: 42px; }
.rasa-auth-card__password-eye {
position: absolute;
top: 50%; inset-inline-end: 10px;
transform: translateY(-50%);
background: transparent;
border: 0;
padding: 4px;
color: var(--color-muted);
cursor: pointer;
transition: color .15s;
}
.rasa-auth-card__password-eye svg { width: 18px; height: 18px; }
.rasa-auth-card__password-eye:hover,
.rasa-auth-card__password-eye.is-open { color: var(--color-primary); }
.rasa-auth-card__meta {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
font-size: 13px;
}
.rasa-auth-card__forgot { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.rasa-auth-card__forgot:hover { text-decoration: underline; }
.rasa-auth-card__submit { min-width: 100%; }
.rasa-auth-card__external {
margin-top: 18px;
padding-top: 16px;
border-top: 1px dashed var(--color-border);
}
.rasa-auth-card__external-sep {
text-align: center;
color: var(--color-muted);
font-size: 12px;
margin-bottom: 12px;
position: relative;
}
.rasa-auth-card__external-sep::before,
.rasa-auth-card__external-sep::after {
content: "";
position: absolute;
top: 50%;
width: calc(50% - 60px);
height: 1px;
background: var(--color-border);
}
.rasa-auth-card__external-sep::before { inset-inline-start: 0; }
.rasa-auth-card__external-sep::after { inset-inline-end: 0; }
.rasa-auth-card__external-sep span { background: #fff; padding: 0 12px; position: relative; z-index: 1; }
.rasa-auth-card__foot {
text-align: center;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--color-border);
font-size: 13px;
}
.rasa-auth-card__foot a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.rasa-auth-card__foot a:hover { text-decoration: underline; }
/* Side card (new customer / checkout as guest) */
.rasa-auth-side {
padding: 32px 28px;
text-align: center;
display: flex;
flex-direction: column;
gap: 12px;
background: linear-gradient(180deg, #fff 0%, var(--color-bg-soft) 100%);
}
.rasa-auth-side__icon {
width: 64px; height: 64px; margin: 0 auto;
display: inline-flex; align-items: center; justify-content: center;
background: #fff;
border: 2px solid var(--color-primary-soft);
color: var(--color-primary);
border-radius: 50%;
}
.rasa-auth-side__icon svg { width: 28px; height: 28px; }
.rasa-auth-side__title { margin: 8px 0 4px; font-size: 18px; font-weight: 700; color: var(--color-text); }
.rasa-auth-side__text { margin: 0 0 12px; font-size: 13px; line-height: 1.9; color: var(--color-muted); }
.rasa-auth-side__actions { display: flex; flex-direction: column; gap: 10px; }
.rasa-auth-side__actions a { text-decoration: none; }
.rasa-auth__info {
margin-top: 20px;
max-width: 1000px;
margin-inline: auto;
font-size: 13px;
color: var(--color-muted);
line-height: 1.9;
}
/* Vendor form specifics */
.rasa-vendor__intro {
background: var(--color-bg-soft);
border-inline-start: 3px solid var(--color-primary);
padding: 12px 16px;
border-radius: var(--radius-md);
font-size: 13px;
line-height: 1.9;
color: var(--color-text);
margin-bottom: 20px;
}
.rasa-vendor__intro p { margin: 0 0 8px; }
.rasa-vendor__intro p:last-child { margin: 0; }
.rasa-vendor__result {
text-align: center;
padding: 40px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.rasa-vendor__result svg { width: 56px; height: 56px; color: #12833f; }
.rasa-vendor__result h2 { margin: 0; font-size: 18px; color: #12833f; }
.rasa-vendor__result p { margin: 0; color: var(--color-muted); font-size: 14px; }
.rasa-form-field__file {
padding: 10px 12px !important;
height: auto !important;
line-height: 1.5;
cursor: pointer;
}
.rasa-form-field__file::-webkit-file-upload-button {
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 6px 12px;
margin-inline-end: 10px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
color: var(--color-text);
}
/* Consent "read" link (privacy popup) */
.rasa-account-consent .read {
display: inline-block;
margin-inline-start: 6px;
color: var(--color-primary);
cursor: pointer;
font-size: 12px;
text-decoration: underline;
}
.rasa-account-consent .read:hover { color: var(--color-primary-dark); }
@media (max-width: 900px) {
.rasa-auth__layout { grid-template-columns: 1fr; }
.rasa-auth-card { padding: 24px 20px; }
.rasa-auth-side { padding: 24px 20px; }
}
/* ========================================================================
Checkout completed — celebratory success card
Used by Views/Checkout/Completed.cshtml (theme override).
======================================================================== */
.rasa-order-complete {
max-width: 640px;
margin: 24px auto;
padding: 40px 32px 32px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
position: relative;
overflow: hidden;
}
.rasa-order-complete::before {
content: "";
position: absolute;
top: 0; inset-inline-start: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #12833f 0%, #34a854 50%, #12833f 100%);
}
.rasa-order-complete__icon {
width: 88px;
height: 88px;
border-radius: 50%;
background: #e6f6ea;
color: #12833f;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
animation: rasa-pop-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
.rasa-order-complete__icon svg { width: 44px; height: 44px; }
@keyframes rasa-pop-in {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.rasa-order-complete__title {
margin: 4px 0 0;
font-size: 26px;
font-weight: 700;
color: var(--color-text);
}
.rasa-order-complete__subtitle {
margin: 0;
font-size: 15px;
color: var(--color-muted);
line-height: 1.8;
}
.rasa-order-complete__meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 16px 0 8px;
padding: 16px 20px;
background: var(--color-bg-soft);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
width: 100%;
max-width: 420px;
}
.rasa-order-complete__meta-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 16px;
}
.rasa-order-complete__meta-key {
font-size: 12px;
color: var(--color-muted);
font-weight: 500;
}
.rasa-order-complete__meta-val {
font-size: 18px;
font-weight: 700;
color: var(--color-primary);
}
.rasa-order-complete__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 8px;
width: 100%;
}
.rasa-order-complete__actions .rasa-account__btn {
min-width: 200px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 560px) {
.rasa-order-complete { padding: 32px 20px 24px; }
.rasa-order-complete__title { font-size: 22px; }
.rasa-order-complete__actions .rasa-account__btn { min-width: 0; flex: 1; }
}
/* ========================================================================
Order details — Views/Order/Details.cshtml (theme override)
======================================================================== */
.rasa-order-details__header .rasa-content__hero-subtitle {
display: inline-flex; align-items: baseline; gap: 8px;
font-size: 14px;
}
.rasa-order-details__header .rasa-content__hero-subtitle strong {
color: var(--color-primary); font-size: 16px;
}
.rasa-order-details__toolbar {
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center;
}
.rasa-order-details__toolbar .rasa-account__btn {
min-width: 120px; height: 38px; padding: 0 14px; font-size: 13px;
display: inline-flex; align-items: center; gap: 6px;
text-decoration: none;
}
.rasa-order-details__toolbar svg { width: 14px; height: 14px; }
/* Overview strip: date / status / total in one row */
.rasa-order-details__overview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
padding: 20px 24px;
align-items: center;
}
.rasa-order-details__overview-item {
display: flex; flex-direction: column; gap: 6px;
align-items: flex-start;
}
.rasa-order-details__overview-item:nth-child(2),
.rasa-order-details__overview-item:nth-child(3) {
border-inline-start: 1px solid var(--color-border);
padding-inline-start: 20px;
}
.rasa-order-details__total {
color: var(--color-primary);
font-weight: 700;
font-size: 18px;
}
/* Address / payment / shipping cards side-by-side */
.rasa-order-details__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.rasa-order-details__addr-card { padding: 0; overflow: hidden; }
.rasa-order-details__addr-card .rasa-content-card__title-bar { margin: 0; }
.rasa-order-details__addr-list {
list-style: none;
margin: 0;
padding: 18px 22px;
display: flex; flex-direction: column;
gap: 8px;
font-size: 13px;
line-height: 1.7;
}
.rasa-order-details__addr-list li { margin: 0; }
.rasa-order-details__addr-list .rasa-account-meta__key {
margin-inline-end: 4px;
}
.rasa-order-details__hint {
margin: 8px 0 0;
font-size: 12px;
color: var(--color-muted);
font-style: normal;
}
/* Products table */
.rasa-order-details__products th,
.rasa-order-details__products td {
vertical-align: middle;
}
.rasa-order-details__pic-cell { padding: 8px 12px; width: 72px; }
.rasa-order-details__pic-cell img {
width: 56px; height: 56px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: #fff;
object-fit: contain;
}
.rasa-order-details__product-name {
color: var(--color-text);
font-weight: 600;
text-decoration: none;
}
.rasa-order-details__product-name:hover { color: var(--color-primary); }
.rasa-order-details__attrs {
font-size: 12px; color: var(--color-muted); margin-top: 4px;
}
.rasa-order-details__tax-notice {
padding: 10px 22px;
background: var(--color-bg-soft);
border-top: 1px dashed var(--color-border);
font-size: 12px;
color: var(--color-muted);
}
/* Totals table */
.rasa-order-details__totals-card { padding: 0; overflow: hidden; }
.rasa-order-details__totals-card .rasa-content-card__title-bar { margin: 0; }
.rasa-order-details__totals {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 0;
}
.rasa-order-details__totals td {
padding: 10px 22px;
border-bottom: 1px dashed var(--color-border);
}
.rasa-order-details__totals td:first-child {
color: var(--color-muted);
width: 60%;
}
.rasa-order-details__totals td:last-child {
text-align: end;
font-weight: 500;
color: var(--color-text);
}
.rasa-order-details__totals-grand td {
border-bottom: 0;
padding-top: 14px;
padding-bottom: 14px;
background: var(--color-bg-soft);
font-size: 16px;
}
.rasa-order-details__totals-grand td:last-child {
color: var(--color-primary);
font-size: 18px;
}
.rasa-order-details__totals-card .rasa-account-card__actions {
padding: 16px 22px;
margin: 0;
border-top: 1px solid var(--color-border);
}
@media (max-width: 900px) {
.rasa-order-details__overview { grid-template-columns: 1fr; gap: 12px; padding: 16px 20px; }
.rasa-order-details__overview-item:nth-child(n+2) {
border-inline-start: 0;
border-top: 1px dashed var(--color-border);
padding-inline-start: 0;
padding-top: 12px;
}
.rasa-order-details__grid { grid-template-columns: 1fr; }
.rasa-order-details__header { flex-direction: column; align-items: stretch; }
.rasa-order-details__toolbar { justify-content: flex-start; }
.rasa-order-details__toolbar .rasa-account__btn { min-width: 0; flex: 1; }
}
/* ================================================================
404 / Not found page
================================================================ */
.rasa-not-found {
max-width: 640px;
margin: 24px auto;
padding: 48px 32px 40px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.rasa-not-found__code {
font-size: 96px;
line-height: 1;
font-weight: 800;
letter-spacing: 4px;
color: var(--color-primary);
direction: ltr;
margin-bottom: 8px;
text-shadow: 0 2px 0 var(--color-primary-soft);
}
.rasa-not-found__title {
font-size: 24px;
font-weight: 700;
color: var(--color-text);
margin: 0;
}
.rasa-not-found__subtitle {
font-size: 15px;
color: var(--color-muted);
line-height: 1.7;
max-width: 460px;
margin: 0;
}
.rasa-not-found__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 20px;
}
.rasa-not-found__body {
margin-top: 24px;
padding-top: 20px;
border-top: 1px dashed var(--color-border);
width: 100%;
max-width: 520px;
color: var(--color-muted);
font-size: 14px;
line-height: 1.8;
}
.rasa-not-found__body:empty { display: none; }
@media (max-width: 600px) {
.rasa-not-found { padding: 32px 20px 28px; }
.rasa-not-found__code { font-size: 72px; }
.rasa-not-found__title { font-size: 20px; }
.rasa-not-found__actions .rasa-account__btn { flex: 1 1 100%; }
}
/* ================================================================
Mobile responsive overrides — global sweep
================================================================ */
/* Belt-and-braces for media only — don't set overflow-x:hidden on html/body,
that blocks child horizontal scroll containers on iOS. If a specific element
still overflows on mobile, fix it at that element. */
@media (max-width: 900px) {
img, video, iframe { max-width: 100%; height: auto; }
}
/* Explicit horizontal-scroll enablement for all rails so touch swipe works on
iOS/Android — pan-x tells the browser we own horizontal panning here, while
overscroll-behavior-x: contain stops the swipe leaking out to the page. */
.rasa-catnav__list,
.rasa-carousel__track,
.rasa-product__thumbs,
.rasa-product__tab-bar,
.rasa-checkout__rail,
.rasa-account-table-wrap,
.rasa-compare__wrap {
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
touch-action: pan-x pan-y;
}
/* Child links and images inside the horizontal rails default to acting as
draggable content on touch (image drag / iOS callout), which swallows the
swipe before it reaches the scroll container. Disable that so the swipe
propagates to the parent. touch-action: manipulation still allows taps. */
.rasa-catnav__list a,
.rasa-catnav__list button,
.rasa-catnav__list img,
.rasa-carousel__track a,
.rasa-carousel__track img,
.rasa-carousel__track picture,
.rasa-carousel__track .rasa-card,
.rasa-product__thumbs a,
.rasa-product__thumbs img {
-webkit-user-drag: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
/* ------------------ Hero slider ------------------ */
@media (max-width: 640px) {
.rasa-hero { padding: 12px 0; }
.rasa-hero__frame {
/* The 1920x585 desktop ratio becomes too skinny below 640px; use 16:9
instead so slides stay legible. */
aspect-ratio: 16 / 9;
min-height: 180px;
border-radius: var(--radius-md);
}
.rasa-hero__frame .anywhere-slider .slick-prev,
.rasa-hero__frame .anywhere-slider .slick-next {
width: 32px; height: 32px;
background-size: 14px 14px;
}
.rasa-hero__frame .anywhere-slider .slick-prev { left: 6px; }
.rasa-hero__frame .anywhere-slider .slick-next { right: 6px; }
.rasa-hero__frame .slick-dots { bottom: 8px; }
.rasa-hero__frame .slick-dots li button { width: 6px; height: 6px; }
.rasa-hero__frame .slick-dots li.slick-active button { width: 16px; }
}
/* ------------------ Header ------------------ */
@media (max-width: 640px) {
/* Two-row header: logo pinned to the RIGHT border (natural RTL start,
DOM-first), actions pinned to the LEFT border via a margin-auto on the
actions block itself. Search wraps to its own row via flex-basis: 100%. */
.rasa-header__main-inner {
flex-wrap: wrap;
gap: 8px;
row-gap: 10px;
align-items: center;
}
/* Constrain the whole logo BLOCK — the previous rule only capped the image
but the neighbouring "عطر میلاد" text at 22px pushed the block back over
~70% viewport, so the actions row (home + catnav + user + cart) wrapped
to a second line. Shrink font + gap and cap the block at 55%. */
.rasa-header__logo {
max-width: 55%;
font-size: 15px;
gap: 6px;
min-width: 0;
overflow: hidden;
flex-shrink: 1;
}
.rasa-logo-img {
max-width: 100% !important;
max-height: 36px !important;
height: auto !important;
width: auto !important;
}
.rasa-header__actions {
gap: 4px;
flex: 0 0 auto;
/* Push the actions block to the far end of the row (visual left in
RTL) so the logo stays flush against the right border. */
margin-inline-start: auto;
}
.rasa-header__btn-label { display: none; } /* keep only icons */
.rasa-header__btn { padding: 4px 5px; }
.rasa-header__btn .rasa-icon { width: 18px; height: 18px; }
.rasa-header__main { padding: 6px 0; }
.rasa-search {
order: 3;
width: 100%;
max-width: 100%;
flex-basis: 100%;
}
.rasa-header__top { padding: 6px 0; font-size: 11px; }
.rasa-header__top-links { gap: 6px; flex-wrap: wrap; }
.rasa-header__support { display: none; }
}
/* ------------------ Category nav (dropdowns + top strip) ------------------ */
/* Desktop home button in the category strip — transparent secondary link.
Hidden on mobile below; mobile has its own icon in the header actions row. */
.rasa-catnav__home {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
color: var(--color-text);
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-md);
transition: background .15s, color .15s;
flex: 0 0 auto;
}
.rasa-catnav__home:hover { background: var(--color-bg-soft); color: var(--color-primary); }
.rasa-catnav__home .rasa-icon { color: currentColor; }
/* The mobile-only icon buttons live in .rasa-header__actions. Hidden on desktop
by default; the mobile block below flips them on. */
.rasa-header__btn.rasa-header__btn--catnav,
.rasa-header__btn.rasa-header__btn--home { display: none; }
@media (max-width: 640px) {
/* Show the icon shortcuts, hide the full red "All Categories" button and
the desktop home link that lived in the category strip — one entry
point per action is enough on mobile. */
.rasa-header__btn.rasa-header__btn--catnav,
.rasa-header__btn.rasa-header__btn--home {
display: inline-flex;
background: var(--color-primary);
border-radius: var(--radius-md);
}
.rasa-header__btn.rasa-header__btn--catnav .rasa-icon,
.rasa-header__btn.rasa-header__btn--home .rasa-icon { color: #fff; }
.rasa-header__btn.rasa-header__btn--catnav:hover,
.rasa-header__btn.rasa-header__btn--home:hover { background: var(--color-primary-dark); }
.rasa-header__btn.rasa-header__btn--catnav:hover .rasa-icon,
.rasa-header__btn.rasa-header__btn--home:hover .rasa-icon { color: #fff; }
.rasa-catnav__all-wrapper.is-open .rasa-header__btn--catnav { background: var(--color-primary-dark); }
.rasa-catnav__all,
.rasa-catnav__home { display: none; }
/* Because the anchor moved into the header, the mega panel now needs to
align to the whole header (screen edge) instead of the removed button. */
.rasa-catnav__panel {
position: fixed;
top: 56px; /* just under the main header row */
inset-inline-start: 8px;
inset-inline-end: 8px;
min-width: 0;
max-width: none;
max-height: calc(100vh - 72px);
overflow-y: auto;
z-index: 200;
}
/* Toggled open via JS when the icon button is tapped. */
.rasa-catnav__all-wrapper.is-open .rasa-catnav__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Flyouts inside the mega panel — collapse inline instead of hovering out
to the side. Kept hidden by default; the .is-open rule below reveals them
together with the panel so they never hover over the header on close. */
.rasa-catnav__panel-flyout {
position: static;
min-width: 0;
max-width: 100%;
margin: 4px 12px 4px;
transform: none;
box-shadow: none;
border: 0;
border-top: 1px solid var(--color-border);
opacity: 0;
visibility: hidden;
}
.rasa-catnav__all-wrapper.is-open .rasa-catnav__panel-flyout {
opacity: 1;
visibility: visible;
}
/* Kill the tap-triggered flyouts on the horizontal strip. On touch, hovering
a strip item was popping its child sublist so it looked like the "All
Categories" panel had opened. The mega-menu icon in the header now owns
that job — a tap on a strip item just navigates. */
.rasa-catnav__list .sublist-wrap { display: none !important; }
.rasa-catnav__list > li:hover > .sublist-wrap { display: none !important; }
/* Also make sure the mega panel only opens via .is-open (JS toggle), not via
:hover / :focus-within which are unreliable on touch. */
.rasa-catnav__all-wrapper:hover .rasa-catnav__panel,
.rasa-catnav__all-wrapper:focus-within .rasa-catnav__panel {
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
}
.rasa-catnav__all-wrapper.is-open .rasa-catnav__panel {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
/* Give the horizontal category strip a bit of breathing room + force it to
actually scroll on overflow. Without min-width: 0, a flex child defaults
to min-width: auto which lets the list expand to fit its content instead
of scrolling internally. */
.rasa-catnav__list {
gap: 2px;
padding: 4px 0;
min-width: 0;
flex-basis: 0;
max-width: 100%;
}
.rasa-catnav__list > li > a { padding: 8px 10px; font-size: 12px; }
}
/* ------------------ Homepage category tiles ------------------ */
@media (max-width: 640px) {
/* Hide the whole "دستهبندی محصولات" homepage block on mobile — the main
category access on phones is the red icon in the header + the horizontal
strip below it, so this large tile grid is redundant. */
.rasa-cats { display: none; }
}
/* ------------------ Features / feature strip ------------------ */
@media (max-width: 768px) and (min-width: 561px) {
/* Between 560 and 768 the existing rules leave 4 columns; use 2 instead. */
.rasa-features__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ------------------ Product grid / catalog listing ------------------ */
@media (max-width: 640px) {
.rasa-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rasa-products-container { gap: 10px; }
.rasa-catpage__toolbar { flex-wrap: wrap; gap: 8px; }
/* Homepage product sliders — bump from 2 → 3 items per row on phones.
Desktop forces min-width: 180px which caps mobile at 2; we drop it and
compute width to fit exactly 3 cells + 2 gaps in the track. */
.rasa-carousel__track { gap: 8px; padding: 4px 4px; }
.rasa-carousel__cell {
width: calc((100% - 16px) / 3);
min-width: 0;
}
/* Compact card layout inside carousel cells: tighter padding, smaller
text and icons, and a stacked footer (prices row above actions row)
so both have the full card width instead of fighting for space. */
.rasa-carousel__cell .rasa-card__link { padding: 6px 6px 2px; gap: 4px; }
.rasa-carousel__cell .rasa-card__name {
font-size: 11px;
line-height: 1.35;
margin: 2px 2px 0;
min-height: 2.7em;
}
.rasa-carousel__cell .rasa-card__rating { display: none; }
.rasa-carousel__cell .rasa-card__footer {
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 4px 6px 6px;
}
.rasa-carousel__cell .rasa-card__prices { align-items: flex-end; order: 1; }
.rasa-carousel__cell .rasa-card__price { font-size: 12px; line-height: 1.2; }
.rasa-carousel__cell .rasa-card__old { font-size: 10px; }
.rasa-carousel__cell .rasa-card__actions {
order: 2;
justify-content: space-between;
gap: 4px;
}
.rasa-carousel__cell .rasa-card__act { width: 24px; height: 24px; }
.rasa-carousel__cell .rasa-card__act svg { width: 13px; height: 13px; }
.rasa-carousel__cell .rasa-card__act--cart { width: 28px; height: 28px; margin-inline-start: 0; }
.rasa-carousel__cell .rasa-card__act--cart svg { width: 15px; height: 15px; }
.rasa-carousel__cell .rasa-card__badge { font-size: 9px; padding: 2px 6px; top: 6px; }
.rasa-carousel__cell .rasa-card__badge--new { inset-inline-end: 6px; }
.rasa-carousel__cell .rasa-card__badge--discount { inset-inline-start: 6px; }
}
@media (max-width: 360px) {
/* Very narrow phones — keep 3 but even tighter */
.rasa-carousel__track { gap: 6px; }
.rasa-carousel__cell { width: calc((100% - 12px) / 3); }
.rasa-carousel__cell .rasa-card__name { font-size: 10px; }
.rasa-carousel__cell .rasa-card__price { font-size: 11px; }
}
@media (max-width: 380px) {
.rasa-product-grid { grid-template-columns: 1fr; }
}
/* ------------------ Footer ------------------ */
@media (max-width: 640px) {
.rasa-footer__grid {
grid-template-columns: 1fr !important;
gap: 24px;
}
.rasa-footer__col { min-width: 0; }
.rasa-footer__trust { flex-wrap: wrap; gap: 12px; justify-content: center; }
}
/* ------------------ Container padding ------------------ */
@media (max-width: 640px) {
/* Slightly tighter side padding on very small screens */
.rasa-container { padding-inline: 12px; }
}
/* Filter action bar wrapper (Apply + Clear) — hidden on desktop. Mobile popup
turns it into a fixed bottom sticky bar via the media query below. */
.rasa-catpage__filter-actions { display: none; }
.rasa-catpage__filter-apply { display: none; }
.rasa-catpage__filter-clear { display: none; }
.rasa-catpage__filter-close { display: none; }
/* Drill-down list + back button — mobile popup only, hidden elsewhere */
.rasa-filter-nav { display: none; }
.rasa-filter-back { display: none; }
/* Price range filter — two number inputs + apply button (replaces slider) */
.rasa-price-filter .filter-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.rasa-price-filter__row {
display: flex;
gap: 8px;
}
.rasa-price-filter__field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 0;
min-width: 0;
font-size: 12px;
color: var(--color-muted);
}
.rasa-price-filter__label { font-weight: 600; }
.rasa-price-filter__field input {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
color: var(--color-text);
font-size: 13px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.rasa-price-filter__field input:focus {
outline: none;
border-color: var(--color-primary);
}
.rasa-price-filter__apply {
align-self: stretch;
padding: 8px 12px;
background: var(--color-primary);
color: #fff;
border: 0;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
.rasa-price-filter__apply:hover { background: var(--color-primary-dark); }
/* Mobile popup: compact the price filter so it visually matches the checkbox
rows around it. Placeholders already say "حداقل / حداکثر" so the redundant
labels above are hidden; inputs are bumped to 16px to prevent iOS Safari's
zoom-on-focus which was pushing the layout around. */
@media (max-width: 900px) {
.rasa-catpage__sidebar.is-open .rasa-price-filter .filter-content {
gap: 10px;
margin-top: 4px;
}
.rasa-catpage__sidebar.is-open .rasa-price-filter__label { display: none; }
.rasa-catpage__sidebar.is-open .rasa-price-filter__row { gap: 10px; }
.rasa-catpage__sidebar.is-open .rasa-price-filter__field input {
font-size: 16px;
padding: 10px 12px;
min-height: 44px;
text-align: start;
}
.rasa-catpage__sidebar.is-open .rasa-price-filter__apply {
padding: 12px 16px;
font-size: 14px;
min-height: 44px;
}
}
/* ------------------ Category filter drawer (mobile) ------------------ */
@media (max-width: 900px) {
/* Header stacks vertically on mobile — the chip strip sits on its own row
above the page title (order: -1) and horizontally scrolls if the group
list overflows. Native scrollbar is hidden. */
.rasa-catpage__header {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.rasa-catpage__filter-chips {
display: flex;
flex-direction: row;
gap: 6px;
order: -1;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 0;
max-width: 100%;
scrollbar-width: none;
}
.rasa-catpage__filter-chips::-webkit-scrollbar { display: none; }
.rasa-catpage__filter-toggle,
.rasa-catpage__filter-chip { display: inline-flex; }
/* Sort pill — same outlined-pill visuals as the filter toggle. The native